Refactor database picker and status display in App.jsx
This commit is contained in:
88
src/App.jsx
88
src/App.jsx
@@ -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)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user