Refactor database picker and status display in App.jsx

This commit is contained in:
2026-03-19 21:37:12 +01:00
parent 174fd0d4f3
commit 26624423b7

View File

@@ -1670,7 +1670,7 @@ async function createNewChat() {
<span>{library.name}</span>
<div className="chat-item-buttons">
{chatLibrarySlug === library.slug && <div className="db-active-badge">Chat</div>}
{pendingChatLibrarySlug === library.slug && <div className="db-active-badge">Preparing</div>}
{isLibrarySyncing(library.slug) && <div className="db-active-badge">Syncing</div>}
<button className="icon-button" onClick={(e) => { e.stopPropagation(); setEditingLibrarySlug(library.slug) }}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
</button>
@@ -1766,9 +1766,9 @@ async function createNewChat() {
<>
<div className="header">
<strong>Chat - {chatSessions.find(s => s.session_id === activeSessionId)?.name || 'New Chat'}</strong>
{chatAttachmentLibrary && (
{chatLibrary && (
<span className="header-subtle">
{chatLibrary ? `DB: ${chatLibrary.name}` : `DB: ${chatAttachmentLibrary.name} (preparing)`}
{`DB: ${chatLibrary.name}${chatLibraryStatusSuffix}`}
</span>
)}
</div>
@@ -1891,6 +1891,74 @@ async function createNewChat() {
placeholder="Ask any question..."
maxRows={13}
/>
<div className="footer-tool-group" ref={dbPickerRef}>
<button
type="button"
className={"db-picker-toggle" + (chatLibrary ? " active" : "")}
onClick={() => {
if (!activeSessionId) return
setIsDbPickerOpen(prev => !prev)
}}
title={chatLibrary ? `Database: ${chatLibrary.name}${chatLibraryStatusSuffix}` : 'Select database for this chat'}
aria-haspopup="menu"
aria-expanded={isDbPickerOpen}
disabled={!activeSessionId}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
aria-hidden="true">
<ellipse cx="12" cy="5" rx="8" ry="3"/>
<path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/>
<path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>
</svg>
</button>
{isDbPickerOpen && (
<div className="db-picker-menu" role="menu">
<button
type="button"
className={"db-picker-option" + (!chatLibrarySlug ? " selected" : "")}
onClick={() => {
setChatLibraryForSession(activeSessionId, null)
setIsDbPickerOpen(false)
}}
>
<span>No database</span>
{!chatLibrarySlug && <span className="db-picker-status">Selected</span>}
</button>
{libraries.length === 0 ? (
<div className="db-picker-empty">No databases yet.</div>
) : (
libraries.map(library => {
const selected = chatLibrarySlug === library.slug
const syncing = isLibrarySyncing(library.slug)
const status = !library.files?.length
? 'Empty'
: library.states?.is_indexed
? 'Ready'
: syncing
? 'Syncing'
: 'Needs sync'
return (
<button
key={library.slug}
type="button"
className={"db-picker-option" + (selected ? " selected" : "")}
disabled={!library.files?.length}
onClick={() => {
setChatLibraryForSession(activeSessionId, library.slug)
setIsDbPickerOpen(false)
}}
>
<span>{library.name}</span>
<span className="db-picker-status">{selected ? 'Selected' : status}</span>
</button>
)
})
)}
</div>
)}
</div>
<button
type="button"
className={"websearch-toggle" + (webSearchEnabled ? " active" : "")}
@@ -1922,9 +1990,9 @@ async function createNewChat() {
<>
<div className="header">
<strong>{activeLibrary?.name || 'Databases'}</strong>
{chatAttachmentLibrary && (
{chatLibrary && (
<span className="header-subtle">
{chatLibrary ? `Chat DB: ${chatLibrary.name}` : `Chat DB: ${chatAttachmentLibrary.name} (preparing)`}
{`Current chat DB: ${chatLibrary.name}${chatLibraryStatusSuffix}`}
</span>
)}
</div>
@@ -1932,24 +2000,16 @@ async function createNewChat() {
apiBase={ollamaApiUrl}
library={activeLibrary}
jobs={libraryJobs}
chatLibrarySlug={chatLibrarySlug}
pendingChatLibrarySlug={pendingChatLibrarySlug}
onRefresh={async () => {
await refreshLibraries();
await refreshLibraryJobs();
}}
onToggleChatLibrary={toggleChatLibrary}
onDeleted={(slug) => {
if (activeLibrarySlug === slug) {
const next = libraries.find(lib => lib.slug !== slug);
setActiveLibrarySlug(next?.slug || null);
}
if (chatLibrarySlug === slug) {
setChatLibrarySlug(null);
}
if (pendingChatLibrarySlug === slug) {
setPendingChatLibrarySlug(null);
}
removeLibraryFromChatSelections(slug)
}}
/>
</>