auto-git:

[add] src/ChatDatabasePicker.jsx [add] src/useChatLibrarySelection.js [change] src/App.jsx
2026-05-06 03:39:28 +02:00
parent 82d7faabf3
commit bd316e6805
3 changed files with 228 additions and 1 deletions
--- a/src/ChatDatabasePicker.jsx
+++ b/src/ChatDatabasePicker.jsx
@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from 'react'
+
+export default function ChatDatabasePicker({
+  activeSessionId,
+  chatLibrary,
+  chatLibrarySlug,
+  chatLibraryStatusSuffix,
+  isLibrarySyncing,
+  libraries,
+  setChatLibraryForSession,
+}) {
+  const dbPickerRef = useRef(null)
+  const [isDbPickerOpen, setIsDbPickerOpen] = useState(false)
+
+  useEffect(() => {
+    if (!isDbPickerOpen) return
+
+    const onPointerDown = (event) => {
+      if (!dbPickerRef.current?.contains(event.target)) {
+        setIsDbPickerOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    return () => document.removeEventListener('mousedown', onPointerDown)
+  }, [isDbPickerOpen])
+
+  useEffect(() => {
+    setIsDbPickerOpen(false)
+  }, [activeSessionId])
+
+  return (
+    <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>
+  )
+}