feat: playbook tools, RAG, vision, voice, chat controls, faster boot

- Tool-using playbooks: read-only tool registry (search_memory, search_history, search_documents, list_models, get_time), per-playbook allowlist, agentic loop, and a "running tool" status indicator. - Document ingest / RAG: documents table + chunker + embed/cosine retrieval reusing the existing stack; Documents page (upload/paste, viewer, delete); top-k chunks injected into the system prompt. - Vision chat: attach images, base64 into /api/chat. - Voice I/O: Web Speech dictation + read-aloud (browser-native, no backend). - Chat controls: stop, regenerate, edit-and-resend; num_ctx knob in Settings. - Per-playbook model override. - History polish: per-conversation + bulk ShareGPT export. - Faster ncp start: UI up first, Ollama warms in the background, with a per-phase timing readout. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 13:31:48 -05:00
parent f514d3dbe5
commit f509034fdd
15 changed files with 1061 additions and 96 deletions
@@ -0,0 +1,146 @@
+import { useEffect, useState } from "react";
+import { API_BASE } from "./config";
+
+// RAG document manager: upload/paste text, chunked + embedded server-side, then
+// retrieved into the chat system prompt. See synapse/memory/store.py.
+export function Documents() {
+  const [docs, setDocs] = useState([]);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState("");
+  const [viewing, setViewing] = useState(null); // {title, chunks} being previewed
+
+  const openDoc = async (doc) => {
+    try {
+      const r = await fetch(`${API_BASE}/documents/${encodeURIComponent(doc.doc_id)}`);
+      if (r.ok) setViewing({ title: doc.title, chunks: (await r.json()).chunks || [] });
+    } catch { /* ignore */ }
+  };
+
+  const load = async () => {
+    try {
+      const r = await fetch(`${API_BASE}/documents`);
+      if (r.ok) setDocs((await r.json()).documents || []);
+    } catch { /* offline — leave list as-is */ }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const onFile = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      setContent(String(reader.result || ""));
+      if (!title.trim()) setTitle(file.name.replace(/\.[^.]+$/, ""));
+    };
+    reader.readAsText(file);
+    e.target.value = ""; // allow re-selecting the same file
+  };
+
+  const addDoc = async () => {
+    if (!title.trim() || !content.trim()) {
+      setMessage("Title and content are required.");
+      return;
+    }
+    setBusy(true);
+    setMessage("Chunking and embedding…");
+    try {
+      const r = await fetch(`${API_BASE}/documents`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title: title.trim(), content }),
+      });
+      if (r.ok) {
+        const d = await r.json();
+        setMessage(`Indexed "${d.title}" (${d.chunks} chunk${d.chunks === 1 ? "" : "s"}).`);
+        setTitle("");
+        setContent("");
+        load();
+      } else {
+        setMessage((await r.json().catch(() => ({}))).detail || "Failed to index.");
+      }
+    } catch (err) {
+      setMessage(`Error: ${err.message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const removeDoc = async (docId) => {
+    try {
+      await fetch(`${API_BASE}/documents/${encodeURIComponent(docId)}`, { method: "DELETE" });
+      load();
+    } catch { /* ignore */ }
+  };
+
+  const input = { padding: "0.9rem", background: "#222", color: "#eee", border: "1px solid #333", borderRadius: "10px", width: "100%", boxSizing: "border-box" };
+
+  return (
+    <div style={{ padding: "1.5rem", color: "#eee", maxWidth: "820px" }}>
+      <h2 style={{ marginTop: 0 }}>📄 Documents</h2>
+      <p style={{ color: "#aaa", marginTop: 0 }}>
+        Upload or paste text. It's chunked, embedded, and pulled into chat as source
+        material when a message is relevant.
+      </p>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.7rem", marginBottom: "1.5rem" }}>
+        <input type="text" placeholder="Title" value={title}
+          onChange={e => setTitle(e.target.value)} style={input} />
+        <textarea rows={8} placeholder="Paste text here, or load a .txt/.md file below"
+          value={content} onChange={e => setContent(e.target.value)} style={input} />
+        <div style={{ display: "flex", gap: "0.7rem", alignItems: "center" }}>
+          <input type="file" accept=".txt,.md,.markdown,text/*" onChange={onFile}
+            style={{ color: "#aaa", flex: 1 }} />
+          <button onClick={addDoc} disabled={busy}
+            style={{ padding: "0.9rem 1.5rem", background: busy ? "#555" : "#007acc", color: "#fff", border: "none", borderRadius: "8px", cursor: busy ? "default" : "pointer" }}>
+            {busy ? "Indexing…" : "Add document"}
+          </button>
+        </div>
+        {message && <div style={{ color: "#8ab4ff" }}>{message}</div>}
+      </div>
+
+      {docs.length === 0 ? (
+        <div style={{ color: "#777" }}>No documents yet.</div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+          {docs.map(d => (
+            <div key={d.doc_id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0.8rem 1rem", background: "#1a1a1a", border: "1px solid #2a2a2a", borderRadius: "10px" }}>
+              <div onClick={() => openDoc(d)} style={{ cursor: "pointer", flex: 1 }} title="View chunks">
+                <div style={{ fontWeight: 600 }}>{d.title}</div>
+                <div style={{ color: "#888", fontSize: "0.85rem" }}>{d.chunks} chunk{d.chunks === 1 ? "" : "s"}</div>
+              </div>
+              <button onClick={() => removeDoc(d.doc_id)}
+                style={{ padding: "0.5rem 0.9rem", background: "#2a1a1a", color: "#ff8a80", border: "1px solid #5a2a2a", borderRadius: "8px", cursor: "pointer" }}>
+                Delete
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {viewing && (
+        <div onClick={() => setViewing(null)}
+          style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100, padding: "2rem" }}>
+          <div onClick={e => e.stopPropagation()}
+            style={{ background: "#1a1a1a", border: "1px solid #333", borderRadius: "12px", maxWidth: "700px", width: "100%", maxHeight: "80vh", display: "flex", flexDirection: "column" }}>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1rem 1.25rem", borderBottom: "1px solid #2a2a2a" }}>
+              <strong>{viewing.title}</strong>
+              <button onClick={() => setViewing(null)}
+                style={{ background: "none", border: "none", color: "#aaa", fontSize: "1.2rem", cursor: "pointer" }}>✕</button>
+            </div>
+            <div style={{ overflowY: "auto", padding: "1rem 1.25rem" }}>
+              {viewing.chunks.map(c => (
+                <div key={c.chunk_idx} style={{ marginBottom: "1rem" }}>
+                  <div style={{ color: "#666", fontSize: "0.75rem", marginBottom: "0.3rem" }}>chunk {c.chunk_idx + 1}</div>
+                  <div style={{ whiteSpace: "pre-wrap", color: "#ddd", fontSize: "0.9rem", background: "#141414", border: "1px solid #262626", borderRadius: "8px", padding: "0.7rem" }}>{c.text}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}