Victor Giers
795f4d272a
[add] README.md [add] backend/libraries/punk/library.json [add] backend/libraries/punk/stage/19f1e5d2ceaab5fd1f1dc58ff07422388f156610d16dfdea2bdb35a5b9e70813--GeorgeJordac-TheVoiceOfHumanJustice.pdf [add] backend/libraries/punk/stage/85fce554ff7685f7bccb136aff5768e54b9ba8361672fe45dbce599598c4be4b--4_Strings_-_Take_Me_Away_Into_The_Night_Vocal_Radio_Mix_.mp3 [add] backend/libraries/punk/stage/e816ca61aebd84159747d248fedd6d5ff318c471c36bcc31b1ac6bf9aebcd3c1--The_Evolution_of_Cooperation_Robert_Axelrod_liber3.pdf [add] backend/local_rag.py [add] backend/rag/__init__.py [add] backend/rag/corpus_builder.py [add] backend/rag/corpus_enricher.py [add] backend/rag/index_builder.py [add] backend/rag/unified_rag.py [add] dist/assets/index-Cc0DLWqA.css [add] dist/assets/index-DKAz6gtp.js [add] dist/index.html [add] src/LibraryManager.jsx [add] wheelcheck2117/pydantic-2.11.7-py3-none-any.whl [add] wheelcheck274/pydantic-2.7.4-py3-none-any.whl [change] backend/main.py [change] backend/requirements.txt [change] backend/schemas.py [change] electron/main.cjs [change] electron/preload.cjs [change] package.json [change] run.sh [change] src/App.jsx [change] src/InterfaceSettings.jsx [change] src/colorSchemes.js [change] src/main.jsx [change] src/styles.css
1765 lines
64 KiB
JavaScript
1765 lines
64 KiB
JavaScript
// /Users/giers/Heimgeist/src/App.jsx
|
|
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
|
import { flushSync } from 'react-dom';
|
|
import TextareaAutosize from 'react-textarea-autosize';
|
|
import GeneralSettings from './GeneralSettings'
|
|
import InterfaceSettings from './InterfaceSettings'
|
|
import LibraryManager from './LibraryManager'
|
|
import WebsearchSettings from './WebsearchSettings'
|
|
import { markdownToHTML } from './markdown';
|
|
import { applyColorScheme } from './colorSchemes'
|
|
// Extract <think> or <thinking> block (first occurrence) and return { think, answer }
|
|
function splitThinkBlocks(text) {
|
|
if (!text) return { think: null, answer: '' };
|
|
|
|
const openTagRe = /<think(?:ing)?>/i;
|
|
const closeTagRe = /<\/think(?:ing)?>/i;
|
|
|
|
const openMatch = text.match(openTagRe);
|
|
|
|
if (!openMatch) {
|
|
// No opening <think> tag found, so all content is answer
|
|
return { think: null, answer: text };
|
|
}
|
|
|
|
const openTagIndex = openMatch.index;
|
|
const openTagLength = openMatch[0].length;
|
|
|
|
const answerPartBeforeThink = text.substring(0, openTagIndex).trim();
|
|
let contentAfterOpenTag = text.substring(openTagIndex + openTagLength);
|
|
|
|
const closeMatch = contentAfterOpenTag.match(closeTagRe);
|
|
|
|
let thinkInner = null;
|
|
let finalAnswer = answerPartBeforeThink;
|
|
|
|
if (closeMatch) {
|
|
// Both open and close tags are present
|
|
thinkInner = contentAfterOpenTag.substring(0, closeMatch.index).trim();
|
|
finalAnswer += contentAfterOpenTag.substring(closeMatch.index + closeMatch[0].length);
|
|
} else {
|
|
// Only open tag found (streaming case), take everything after it as think
|
|
thinkInner = contentAfterOpenTag.trim();
|
|
}
|
|
|
|
return { think: thinkInner || null, answer: finalAnswer.trim() };
|
|
}
|
|
|
|
// Renders assistant message with a collapsible "Thoughts" block (if present)
|
|
function AssistantMessageContent({ content, streamOutput, sources }) {
|
|
const { think, answer } = splitThinkBlocks(content || '');
|
|
const [open, setOpen] = React.useState(false);
|
|
const showThinkButton = !!think;
|
|
|
|
return (
|
|
<div className="assistant-message">
|
|
{showThinkButton && (
|
|
<div className="assistant-thoughts">
|
|
<button
|
|
className="think-toggle"
|
|
onClick={() => setOpen(o => !o)}
|
|
aria-expanded={open ? 'true' : 'false'}
|
|
aria-controls="think-content"
|
|
>
|
|
<span className="think-toggle-icon" aria-hidden="true">
|
|
{open ? '▾' : '▸'}
|
|
</span>
|
|
Thoughts
|
|
</button>
|
|
{open && (
|
|
<div
|
|
id="think-content"
|
|
className="think-content"
|
|
dangerouslySetInnerHTML={{ __html: markdownToHTML(think) }}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div
|
|
className="msg-content"
|
|
dangerouslySetInnerHTML={{ __html: markdownToHTML(answer || content || '') }}
|
|
/>
|
|
{Array.isArray(sources) && sources.length > 0 && (
|
|
<div className="msg-sources chips">
|
|
{sources.map((u, i) => {
|
|
let label = u;
|
|
let isFile = false;
|
|
try {
|
|
const parsed = new URL(u);
|
|
if (parsed.protocol === 'file:') {
|
|
isFile = true;
|
|
const parts = parsed.pathname.split('/').filter(Boolean);
|
|
label = decodeURIComponent(parts[parts.length - 1] || u);
|
|
} else {
|
|
const host = parsed.hostname || u;
|
|
label = host.replace(/^www\./i, '');
|
|
}
|
|
} catch {}
|
|
return (
|
|
<a
|
|
key={u + i}
|
|
className="chip"
|
|
href={u}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
title={u}
|
|
onClick={(event) => {
|
|
if (!isFile) return;
|
|
event.preventDefault();
|
|
try {
|
|
const parsed = new URL(u);
|
|
window.electronAPI?.openPath?.(decodeURIComponent(parsed.pathname));
|
|
} catch {}
|
|
}}
|
|
>
|
|
{label}
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const API_URL_KEY = 'ollamaApiUrl';
|
|
const COLOR_SCHEME_KEY = 'colorScheme';
|
|
const WEBSEARCH_URL_KEY = 'websearch.searxUrl';
|
|
const WEBSEARCH_ENGINES_KEY = 'websearch.engines';
|
|
const CHAT_LIBRARY_KEY = 'chat.librarySlug';
|
|
|
|
// Initial API value will be set by useEffect after settings are loaded
|
|
let API = import.meta.env.VITE_API_URL ?? 'http://127.0.0.1:8000';
|
|
const TOP_ALIGN_OFFSET = 48; // match .chat padding + header height for exact top alignment (should be more dynamic depending on header height)
|
|
const BOTTOM_EPSILON = 24; // px tolerance for treating as bottom
|
|
|
|
export default function App() {
|
|
const [chatSessions, setChatSessions] = useState([])
|
|
const [activeSessionId, setActiveSessionId] = useState(null)
|
|
const [activeSidebarMode, setActiveSidebarMode] = useState('chats') // 'chats', 'dbs', 'settings'
|
|
const [activeSettingsSubmenu, setActiveSettingsSubmenu] = useState('General'); // 'General', 'Interface'
|
|
const [editingSessionId, setEditingSessionId] = useState(null); // ID of the session being edited
|
|
const [libraries, setLibraries] = useState([])
|
|
const [libraryJobs, setLibraryJobs] = useState([])
|
|
const [activeLibrarySlug, setActiveLibrarySlug] = useState(null)
|
|
const [chatLibrarySlug, setChatLibrarySlug] = useState(localStorage.getItem(CHAT_LIBRARY_KEY) || null)
|
|
const [isCreatingLibrary, setIsCreatingLibrary] = useState(false)
|
|
const [newLibraryName, setNewLibraryName] = useState('')
|
|
const [libraryCreateError, setLibraryCreateError] = useState('')
|
|
|
|
// Use currentSessionId for the actual chat operations
|
|
const [model, setModel] = useState('')
|
|
const [input, setInput] = useState('')
|
|
const chatRef = useRef(null)
|
|
const textareaRef = useRef(null); // Ref for the textarea
|
|
const [ollamaApiUrl, setOllamaApiUrl] = useState(API); // State for Ollama API URL
|
|
const [colorScheme, setColorScheme] = useState('Default'); // State for color scheme
|
|
const [streamOutput, setStreamOutput] = useState(false);
|
|
const [searxUrl, setSearxUrl] = useState(localStorage.getItem(WEBSEARCH_URL_KEY) || 'http://localhost:8888');
|
|
const [searxEngines, setSearxEngines] = useState(() => {
|
|
try {
|
|
const raw = localStorage.getItem(WEBSEARCH_ENGINES_KEY);
|
|
if (raw) return JSON.parse(raw);
|
|
} catch {}
|
|
return ["duckduckgo","bing","wikipedia","github","stack_overflow"];
|
|
});
|
|
useEffect(() => {
|
|
localStorage.setItem(WEBSEARCH_URL_KEY, searxUrl || '');
|
|
}, [searxUrl]);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
localStorage.setItem(WEBSEARCH_ENGINES_KEY, JSON.stringify(searxEngines || []));
|
|
} catch {}
|
|
}, [searxEngines]);
|
|
const [webSearchEnabled, setWebSearchEnabled] = useState(false);
|
|
const [isSending, setIsSending] = useState(false);
|
|
const [loading, setLoading] = useState(true); // Loading state for initial session fetch
|
|
const [unreadSessions, setUnreadSessions] = useState([]); // Track unread messages
|
|
const [scrollPositions, setScrollPositions] = useState({}); // Store scroll positions for each session
|
|
// Editing state for user messages
|
|
const [editingMessageIndex, setEditingMessageIndex] = useState(null);
|
|
const [editText, setEditText] = useState('');
|
|
// Helpers + handlers for message copy/edit/regenerate (must live inside App)
|
|
function getMarkdownForCopy(message) {
|
|
const raw = message.content || '';
|
|
|
|
if (message.role === 'assistant') {
|
|
// Copy the assistant's raw *markdown answer*, not rendered text,
|
|
// and strip any <think>...</think> block.
|
|
try {
|
|
const { answer } = splitThinkBlocks(raw);
|
|
return (answer || raw).trim();
|
|
} catch {
|
|
return raw.trim();
|
|
}
|
|
}
|
|
|
|
// User messages: copy exactly as typed
|
|
return raw;
|
|
}
|
|
|
|
async function handleCopyMessage(message) {
|
|
try {
|
|
await navigator.clipboard.writeText(getMarkdownForCopy(message));
|
|
} catch (err) {
|
|
console.error('Failed to copy message:', err);
|
|
}
|
|
}
|
|
|
|
function setAssistantMessageContent(sessionId, messageId, content, options = {}) {
|
|
const { removeIfEmpty = false } = options
|
|
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session => {
|
|
if (session.session_id !== sessionId) return session
|
|
|
|
const nextMessages = []
|
|
for (const message of session.messages || []) {
|
|
if (message.id !== messageId) {
|
|
nextMessages.push(message)
|
|
continue
|
|
}
|
|
|
|
if (removeIfEmpty && !content) continue
|
|
nextMessages.push({ ...message, content })
|
|
}
|
|
|
|
return { ...session, messages: nextMessages }
|
|
})
|
|
)
|
|
}
|
|
|
|
function isAbortError(error) {
|
|
return error?.name === 'AbortError'
|
|
}
|
|
|
|
function getErrorText(error) {
|
|
if (error instanceof Error && error.message) return error.message
|
|
return String(error)
|
|
}
|
|
|
|
function startEditMessage(index, content) {
|
|
setEditingMessageIndex(index);
|
|
setEditText(content || '');
|
|
}
|
|
|
|
function cancelEditMessage() {
|
|
setEditingMessageIndex(null);
|
|
setEditText('');
|
|
}
|
|
|
|
async function commitEditMessage(index) {
|
|
const original = (messages[index]?.content || '').trim();
|
|
const nextRaw = editText ?? '';
|
|
const next = nextRaw.trim();
|
|
|
|
// NEW: If empty after trimming, cancel edit (revert to original)
|
|
if (next.length === 0) {
|
|
cancelEditMessage();
|
|
return;
|
|
}
|
|
|
|
// If nothing changed, cancel edit
|
|
if (next === original) {
|
|
cancelEditMessage();
|
|
return;
|
|
}
|
|
|
|
const sessionId = activeSessionId;
|
|
if (!sessionId) return;
|
|
|
|
// Optimistically update UI: set edited content and prune following messages
|
|
setChatSessions(prev =>
|
|
prev.map(s => {
|
|
if (s.session_id !== sessionId) return s;
|
|
const old = s.messages || [];
|
|
const updated = old.slice(0, index + 1).map((m, j) =>
|
|
j === index ? { ...m, content: next } : m
|
|
);
|
|
return { ...s, messages: updated };
|
|
})
|
|
);
|
|
|
|
// Exit edit mode immediately
|
|
setEditingMessageIndex(null);
|
|
setEditText('');
|
|
|
|
// ⬇️ Scroll the chat frame to the bottom after the DOM updates
|
|
requestAnimationFrame(() => scrollToBottom('auto', sessionId));
|
|
|
|
try {
|
|
const resp = await fetch(`${ollamaApiUrl}/sessions/${sessionId}/messages/${index}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: next })
|
|
});
|
|
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
|
} catch (err) {
|
|
// Roll back to original content on failure
|
|
console.error('Failed to update message:', err);
|
|
setChatSessions(prev =>
|
|
prev.map(s => {
|
|
if (s.session_id !== sessionId) return s;
|
|
const old = s.messages || [];
|
|
const restored = old.map((m, j) =>
|
|
j === index ? { ...m, content: original } : m
|
|
);
|
|
return { ...s, messages: restored };
|
|
})
|
|
);
|
|
return; // don't regenerate on failure
|
|
}
|
|
|
|
// Continue conversation from the edited message
|
|
await regenerateFromIndex(index, next);
|
|
}
|
|
|
|
async function regenerateFromIndex(index, overrideUserText = null) {
|
|
const sessionId = activeSessionId
|
|
if (isSending || !sessionId || typeof index !== 'number') return
|
|
|
|
const msgs = (chatSessions.find(s => s.session_id === sessionId)?.messages) || []
|
|
let lastUserIdx = index
|
|
for (let i = index; i >= 0; i--) {
|
|
if (msgs[i]?.role === 'user') {
|
|
lastUserIdx = i
|
|
break
|
|
}
|
|
}
|
|
|
|
setChatSessions(prev =>
|
|
prev.map(s => s.session_id === sessionId
|
|
? { ...s, messages: (s.messages || []).slice(0, lastUserIdx + 1) }
|
|
: s
|
|
)
|
|
)
|
|
|
|
const requestController = beginCancelableRequest(sessionId)
|
|
|
|
let enrichedPrompt = null
|
|
let citationSources = []
|
|
try {
|
|
if (webSearchEnabled) {
|
|
try {
|
|
const promptText = overrideUserText != null ? overrideUserText : (msgs[lastUserIdx]?.content || '')
|
|
const historyForSearch = msgs
|
|
.slice(Math.max(0, lastUserIdx - 7), lastUserIdx + 1)
|
|
.map(m => ({ role: m.role, content: m.content || '' }))
|
|
if (historyForSearch.length > 0) {
|
|
historyForSearch[historyForSearch.length - 1] = { role: 'user', content: promptText }
|
|
}
|
|
|
|
const resp = await fetch(`${ollamaApiUrl}/websearch`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
signal: requestController.signal,
|
|
body: JSON.stringify({
|
|
prompt: promptText,
|
|
model,
|
|
messages: historyForSearch,
|
|
history_limit: 8,
|
|
searx_url: searxUrl || null,
|
|
engines: Array.isArray(searxEngines) ? searxEngines : null,
|
|
})
|
|
})
|
|
const data = await resp.json()
|
|
if (data && typeof data.enriched_prompt === 'string') {
|
|
enrichedPrompt = data.enriched_prompt
|
|
citationSources = Array.isArray(data.sources) ? data.sources : []
|
|
}
|
|
} catch (error) {
|
|
if (isAbortError(error)) throw error
|
|
console.warn('web search enrichment (regenerate) failed', error)
|
|
}
|
|
}
|
|
|
|
if (streamOutput) {
|
|
const assistantMsgId = `msg-${Date.now()}-${Math.random()}`
|
|
let full = ''
|
|
|
|
setChatSessions(prev =>
|
|
prev.map(s => s.session_id === sessionId
|
|
? { ...s, messages: [...(s.messages || []), { id: assistantMsgId, role: 'assistant', content: '', sources: citationSources }] }
|
|
: s
|
|
)
|
|
)
|
|
|
|
try {
|
|
const res = await fetch(`${ollamaApiUrl}/sessions/${sessionId}/regenerate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
signal: requestController.signal,
|
|
body: JSON.stringify({
|
|
index,
|
|
model,
|
|
stream: true,
|
|
enriched_message: enrichedPrompt,
|
|
sources: citationSources || []
|
|
})
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
|
|
const reader = res.body?.getReader()
|
|
if (!reader) throw new Error('Missing response body')
|
|
|
|
const decoder = new TextDecoder()
|
|
let unreadMarked = false
|
|
|
|
while (true) {
|
|
const { value, done } = await reader.read()
|
|
if (done) break
|
|
|
|
const chunk = decoder.decode(value, { stream: true })
|
|
full += chunk
|
|
setAssistantMessageContent(sessionId, assistantMsgId, full)
|
|
|
|
if (!unreadMarked && activeSessionIdRef.current !== sessionId) {
|
|
unreadMarked = true
|
|
setPendingScrollToLastUser(prev => ({ ...prev, [sessionId]: assistantMsgId }))
|
|
setUnreadSessions(prev => [...new Set([...prev, sessionId])])
|
|
}
|
|
}
|
|
|
|
if (activeSessionIdRef.current !== sessionId) {
|
|
setPendingScrollToLastUser(prev => ({ ...prev, [sessionId]: assistantMsgId }))
|
|
setUnreadSessions(prev => [...new Set([...prev, sessionId])])
|
|
} else if (!userScrolledUpRef.current[sessionId]) {
|
|
requestAnimationFrame(() => scrollMessageToTop(assistantMsgId, 'smooth', sessionId))
|
|
} else {
|
|
setNewMsgTip(prev => ({ ...prev, [sessionId]: assistantMsgId }))
|
|
}
|
|
} catch (error) {
|
|
if (isAbortError(error)) {
|
|
setAssistantMessageContent(sessionId, assistantMsgId, full, { removeIfEmpty: true })
|
|
return
|
|
}
|
|
|
|
console.error(error)
|
|
setAssistantMessageContent(sessionId, assistantMsgId, `Error: ${getErrorText(error)}`, { removeIfEmpty: true })
|
|
return
|
|
}
|
|
} else {
|
|
const res = await fetch(`${ollamaApiUrl}/sessions/${sessionId}/regenerate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
signal: requestController.signal,
|
|
body: JSON.stringify({
|
|
index,
|
|
model,
|
|
stream: false,
|
|
enriched_message: enrichedPrompt,
|
|
sources: citationSources || []
|
|
})
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
|
|
const data = await res.json()
|
|
const assistantMsgId = `msg-${Date.now()}`
|
|
setChatSessions(prev =>
|
|
prev.map(s => s.session_id === sessionId
|
|
? { ...s, messages: [...(s.messages || []), { role: 'assistant', content: data.reply, id: assistantMsgId, sources: citationSources }] }
|
|
: s
|
|
)
|
|
)
|
|
|
|
if (activeSessionIdRef.current !== sessionId) {
|
|
setPendingScrollToLastUser(prev => ({ ...prev, [sessionId]: assistantMsgId }))
|
|
setUnreadSessions(prev => [...new Set([...prev, sessionId])])
|
|
} else if (!userScrolledUpRef.current[sessionId]) {
|
|
requestAnimationFrame(() => scrollMessageToTop(assistantMsgId, 'smooth', sessionId))
|
|
} else {
|
|
setNewMsgTip(prev => ({ ...prev, [sessionId]: assistantMsgId }))
|
|
}
|
|
}
|
|
} catch (error) {
|
|
if (!isAbortError(error)) {
|
|
console.error(error)
|
|
}
|
|
} finally {
|
|
finishCancelableRequest(requestController)
|
|
}
|
|
}
|
|
|
|
|
|
// Persist userScrolledUp state per session + live ref for closures (streaming)
|
|
const [userScrolledUpState, setUserScrolledUpState] = useState({});
|
|
const userScrolledUpRef = useRef({});
|
|
|
|
// When a response arrives in a non-active chat, remember to scroll to the new ASSISTANT message on open
|
|
const [pendingScrollToLastUser, setPendingScrollToLastUser] = useState({}); // { [sessionId]: assistantMsgId }
|
|
|
|
// Live per-session scrollTop tracker to avoid races
|
|
const scrollTopsRef = useRef({});
|
|
// Live per-session previous scrollTop tracker to detect scroll direction
|
|
const prevScrollTopsRef = useRef({});
|
|
|
|
// Tip state: { [sessionId]: messageId }
|
|
const [newMsgTip, setNewMsgTip] = useState({});
|
|
|
|
// Collapse state per user message: { [msgKey]: boolean } — true means "collapsed"
|
|
const [collapsedUserMsgs, setCollapsedUserMsgs] = useState({});
|
|
|
|
// Compute a stable key for collapse map (prefer id, else session:index)
|
|
const collapseKeyFor = (m, i, sessionId) => (m?.id ? m.id : `${sessionId}:${i}`);
|
|
|
|
// Initialize/maintain collapsed map whenever messages or the active session change
|
|
useEffect(() => {
|
|
if (!activeSessionId) return;
|
|
|
|
const msgs =
|
|
(chatSessions.find(s => s.session_id === activeSessionId)?.messages) || [];
|
|
|
|
setCollapsedUserMsgs(prev => {
|
|
const next = {};
|
|
msgs.forEach((m, i) => {
|
|
if (m.role !== 'user') return;
|
|
const key = collapseKeyFor(m, i, activeSessionId);
|
|
const lineCount = (m.content || '').split(/\r\n|\r|\n/).length;
|
|
const needsCollapse = lineCount > 30;
|
|
// Default collapsed = true when needsCollapse; preserve user toggles
|
|
next[key] = needsCollapse ? (prev[key] ?? true) : false;
|
|
});
|
|
return next;
|
|
});
|
|
}, [chatSessions, activeSessionId]);
|
|
|
|
// Toggle collapse/expand for a specific message
|
|
function toggleUserMsgCollapse(key) {
|
|
setCollapsedUserMsgs(prev => ({ ...prev, [key]: !(prev[key] ?? true) }));
|
|
}
|
|
|
|
const setUserScrolledUp = React.useCallback((sessionId, value) => {
|
|
setUserScrolledUpState(prev => {
|
|
const next = { ...prev, [sessionId]: value };
|
|
userScrolledUpRef.current = next;
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
const activeRequestRef = useRef(null);
|
|
const justSentMessage = useRef(false);
|
|
const lastSentSessionRef = useRef(null);
|
|
const activeSessionIdRef = useRef(activeSessionId);
|
|
useEffect(() => {
|
|
activeSessionIdRef.current = activeSessionId;
|
|
}, [activeSessionId]);
|
|
|
|
const beginCancelableRequest = React.useCallback((sessionId) => {
|
|
const controller = new AbortController()
|
|
activeRequestRef.current = { controller, sessionId }
|
|
setIsSending(true)
|
|
return controller
|
|
}, [])
|
|
|
|
const finishCancelableRequest = React.useCallback((controller) => {
|
|
if (activeRequestRef.current?.controller !== controller) return
|
|
activeRequestRef.current = null
|
|
setIsSending(false)
|
|
}, [])
|
|
|
|
const cancelActiveRequest = React.useCallback(() => {
|
|
const activeRequest = activeRequestRef.current
|
|
if (!activeRequest) return
|
|
activeRequestRef.current = null
|
|
activeRequest.controller.abort()
|
|
setIsSending(false)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
activeRequestRef.current?.controller.abort()
|
|
}
|
|
}, [])
|
|
|
|
// Flag to ensure we only restore once per open of a chat
|
|
const restoredForRef = useRef(null);
|
|
|
|
// Sidebar resizing state
|
|
const [sidebarWidth, setSidebarWidth] = useState(230);
|
|
const [isResizing, setIsResizing] = useState(false);
|
|
|
|
const startResizing = React.useCallback((mouseDownEvent) => {
|
|
setIsResizing(true);
|
|
}, []);
|
|
|
|
const stopResizing = React.useCallback(() => {
|
|
setIsResizing(false);
|
|
}, []);
|
|
|
|
const resizeSidebar = React.useCallback((mouseMoveEvent) => {
|
|
if (isResizing) {
|
|
const newWidth = Math.max(230, Math.min(500, mouseMoveEvent.clientX));
|
|
setSidebarWidth(newWidth);
|
|
}
|
|
}, [isResizing]);
|
|
|
|
React.useEffect(() => {
|
|
window.addEventListener('mousemove', resizeSidebar);
|
|
window.addEventListener('mouseup', stopResizing);
|
|
return () => {
|
|
window.removeEventListener('mousemove', resizeSidebar);
|
|
window.removeEventListener('mouseup', stopResizing);
|
|
};
|
|
}, [resizeSidebar, stopResizing]);
|
|
|
|
React.useEffect(() => {
|
|
if (isResizing) {
|
|
document.body.classList.add('no-select');
|
|
} else {
|
|
document.body.classList.remove('no-select');
|
|
}
|
|
}, [isResizing]);
|
|
|
|
React.useEffect(() => {
|
|
const onClick = async (e) => {
|
|
const btn = e.target.closest('.codeblock__copy');
|
|
if (!btn) return;
|
|
|
|
const wrapper = btn.closest('.codeblock');
|
|
const codeEl = wrapper?.querySelector('pre > code');
|
|
if (!codeEl) return;
|
|
|
|
try {
|
|
// Use textContent to copy the plain code accurately
|
|
await navigator.clipboard.writeText(codeEl.textContent || '');
|
|
// Optional: brief visual feedback
|
|
btn.classList.add('copied');
|
|
setTimeout(() => btn.classList.remove('copied'), 800);
|
|
} catch (err) {
|
|
console.error('Copy failed:', err);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('click', onClick);
|
|
return () => document.removeEventListener('click', onClick);
|
|
}, []);
|
|
|
|
|
|
// Load settings on startup
|
|
useEffect(() => {
|
|
window.electronAPI.getSettings().then(settings => {
|
|
setOllamaApiUrl(settings.ollamaApiUrl);
|
|
setColorScheme(settings.colorScheme || 'Default');
|
|
setModel(settings.chatModel || ''); // Load the selected model, with a fallback
|
|
setStreamOutput(settings.streamOutput || false);
|
|
setScrollPositions(settings.scrollPositions || {}); // Load scroll positions
|
|
applyColorScheme(settings.colorScheme || 'Default'); // Apply initial scheme
|
|
});
|
|
|
|
const handleFocus = () => {
|
|
if (activeSidebarMode === 'chats') {
|
|
textareaRef.current?.focus();
|
|
}
|
|
};
|
|
|
|
window.electronAPI.onWindowFocus(handleFocus);
|
|
|
|
return () => {
|
|
// Clean up the listener when the component unmounts
|
|
// This part is tricky with the current setup, as `onWindowFocus` uses `ipcRenderer.on`
|
|
// which doesn't return a cleanup function. A more robust implementation
|
|
// would involve `ipcRenderer.removeListener`. For now, we'll assume this is okay
|
|
// for the lifetime of the app.
|
|
};
|
|
}, [activeSidebarMode]);
|
|
|
|
// Apply color scheme whenever it changes
|
|
useEffect(() => {
|
|
applyColorScheme(colorScheme);
|
|
}, [colorScheme]);
|
|
|
|
const fetchHistory = (sessionId) => {
|
|
if (!sessionId || !ollamaApiUrl) return;
|
|
fetch(`${ollamaApiUrl}/history?session_id=${encodeURIComponent(sessionId)}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session =>
|
|
session.session_id === sessionId
|
|
? { ...session, messages: data.messages || [] }
|
|
: session
|
|
)
|
|
);
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
async function refreshLibraries() {
|
|
if (!ollamaApiUrl) return;
|
|
try {
|
|
const response = await fetch(`${ollamaApiUrl}/libraries`);
|
|
const data = await response.json();
|
|
const nextLibraries = Array.isArray(data.libraries) ? data.libraries : [];
|
|
setLibraries(nextLibraries);
|
|
|
|
if (nextLibraries.length === 0) {
|
|
setActiveLibrarySlug(null);
|
|
setChatLibrarySlug(null);
|
|
return;
|
|
}
|
|
|
|
if (!nextLibraries.some(lib => lib.slug === activeLibrarySlug)) {
|
|
setActiveLibrarySlug(nextLibraries[0].slug);
|
|
}
|
|
if (chatLibrarySlug && !nextLibraries.some(lib => lib.slug === chatLibrarySlug)) {
|
|
setChatLibrarySlug(null);
|
|
}
|
|
} catch (error) {
|
|
console.warn('Failed to load libraries', error);
|
|
}
|
|
}
|
|
|
|
async function refreshLibraryJobs() {
|
|
if (!ollamaApiUrl) return;
|
|
try {
|
|
const response = await fetch(`${ollamaApiUrl}/jobs`);
|
|
const data = await response.json();
|
|
setLibraryJobs(Array.isArray(data.jobs) ? data.jobs : []);
|
|
} catch (error) {
|
|
console.warn('Failed to load library jobs', error);
|
|
}
|
|
}
|
|
|
|
async function createLibrary(nameOverride = null) {
|
|
const rawName = typeof nameOverride === 'string' ? nameOverride : newLibraryName
|
|
const name = rawName.trim()
|
|
if (!name) {
|
|
setLibraryCreateError('Name is required.')
|
|
return
|
|
}
|
|
try {
|
|
setLibraryCreateError('')
|
|
const response = await fetch(`${ollamaApiUrl}/libraries`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name })
|
|
});
|
|
if (!response.ok) {
|
|
const detail = await response.text()
|
|
throw new Error(detail || `HTTP ${response.status}`)
|
|
}
|
|
const data = await response.json();
|
|
setIsCreatingLibrary(false)
|
|
setNewLibraryName('')
|
|
await refreshLibraries();
|
|
if (data?.slug) {
|
|
setActiveLibrarySlug(data.slug);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to create library', error);
|
|
setLibraryCreateError(String(error?.message || error))
|
|
}
|
|
}
|
|
|
|
// Load chat sessions from backend on initial render
|
|
useEffect(() => {
|
|
if (!ollamaApiUrl) return;
|
|
setLoading(true);
|
|
fetch(`${ollamaApiUrl}/sessions`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const sessionsWithMessages = data.sessions.map(s => ({ ...s, messages: [] }));
|
|
setChatSessions(sessionsWithMessages);
|
|
if (sessionsWithMessages.length > 0) {
|
|
setActiveSessionId(sessionsWithMessages[0].session_id);
|
|
} else {
|
|
setActiveSessionId(null);
|
|
}
|
|
setLoading(false);
|
|
})
|
|
.catch(() => {
|
|
setLoading(false);
|
|
});
|
|
}, [ollamaApiUrl]);
|
|
|
|
useEffect(() => {
|
|
if (!ollamaApiUrl) return;
|
|
refreshLibraries();
|
|
refreshLibraryJobs();
|
|
}, [ollamaApiUrl]);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
if (chatLibrarySlug) {
|
|
localStorage.setItem(CHAT_LIBRARY_KEY, chatLibrarySlug);
|
|
} else {
|
|
localStorage.removeItem(CHAT_LIBRARY_KEY);
|
|
}
|
|
} catch {}
|
|
}, [chatLibrarySlug]);
|
|
|
|
useEffect(() => {
|
|
if (!ollamaApiUrl) return;
|
|
const interval = setInterval(() => {
|
|
refreshLibraries();
|
|
refreshLibraryJobs();
|
|
}, 3000);
|
|
return () => clearInterval(interval);
|
|
}, [ollamaApiUrl, activeSidebarMode, activeLibrarySlug, chatLibrarySlug]);
|
|
|
|
// Load messages for the active session
|
|
useEffect(() => {
|
|
fetchHistory(activeSessionId);
|
|
}, [activeSessionId]);
|
|
|
|
const handleSidebarClick = (mode) => {
|
|
// Saving happens in the centralized cleanup effect below
|
|
setActiveSidebarMode(mode);
|
|
};
|
|
|
|
const handleSelectChat = (sessionId) => {
|
|
// Saving happens in the centralized cleanup effect below
|
|
selectChat(sessionId);
|
|
};
|
|
|
|
const messages = useMemo(() => {
|
|
return chatSessions.find(s => s.session_id === activeSessionId)?.messages || [];
|
|
}, [activeSessionId, chatSessions]);
|
|
|
|
const activeLibrary = useMemo(() => {
|
|
return libraries.find(lib => lib.slug === activeLibrarySlug) || null;
|
|
}, [activeLibrarySlug, libraries]);
|
|
|
|
const chatLibrary = useMemo(() => {
|
|
return libraries.find(lib => lib.slug === chatLibrarySlug) || null;
|
|
}, [chatLibrarySlug, libraries]);
|
|
|
|
// Persist the scrollTop of the session we are LEAVING (on chat change or when leaving the chat view)
|
|
useEffect(() => {
|
|
const leavingSessionId = activeSessionId;
|
|
const leavingMode = activeSidebarMode;
|
|
|
|
return () => {
|
|
if (leavingMode === 'chats' && leavingSessionId) {
|
|
const top = typeof scrollTopsRef.current[leavingSessionId] === 'number'
|
|
? scrollTopsRef.current[leavingSessionId]
|
|
: (chatRef.current ? chatRef.current.scrollTop : 0);
|
|
|
|
setScrollPositions(prev => {
|
|
const updated = { ...prev, [leavingSessionId]: top };
|
|
window.electronAPI.updateSettings({ scrollPositions: updated });
|
|
return updated;
|
|
});
|
|
}
|
|
};
|
|
}, [activeSessionId, activeSidebarMode]);
|
|
|
|
// Track scroll + whether user left bottom
|
|
useEffect(() => {
|
|
const chatDiv = chatRef.current;
|
|
if (!chatDiv) return;
|
|
|
|
const handleScroll = () => {
|
|
const { scrollTop, scrollHeight, clientHeight } = chatDiv;
|
|
const isAtBottom = (scrollHeight - scrollTop - clientHeight) <= BOTTOM_EPSILON;
|
|
|
|
if (activeSessionId) {
|
|
const prevScrollTop = prevScrollTopsRef.current[activeSessionId];
|
|
const scrolledUp = typeof prevScrollTop === 'number' && scrollTop < prevScrollTop;
|
|
|
|
scrollTopsRef.current[activeSessionId] = scrollTop;
|
|
|
|
if (isAtBottom) {
|
|
setUserScrolledUp(activeSessionId, false); // User is at bottom, enable autoscroll
|
|
} else if (scrolledUp) {
|
|
setUserScrolledUp(activeSessionId, true); // User scrolled up, disable autoscroll
|
|
}
|
|
// If user scrolled down but not to bottom, maintain current userScrolledUp state
|
|
prevScrollTopsRef.current[activeSessionId] = scrollTop;
|
|
}
|
|
};
|
|
|
|
chatDiv.addEventListener('scroll', handleScroll);
|
|
return () => chatDiv.removeEventListener('scroll', handleScroll);
|
|
}, [activeSessionId, setUserScrolledUp]);
|
|
|
|
// Auto-hide the tip if user returns to bottom in the active chat
|
|
useEffect(() => {
|
|
const sid = activeSessionId;
|
|
if (!sid) return;
|
|
if (userScrolledUpState[sid] === false) {
|
|
setNewMsgTip(prev => {
|
|
if (!(sid in prev)) return prev;
|
|
const rest = { ...prev };
|
|
delete rest[sid];
|
|
return rest;
|
|
});
|
|
}
|
|
}, [activeSessionId, userScrolledUpState]);
|
|
|
|
// --- Robust restoration: do it before paint, exactly once per open ---
|
|
useLayoutEffect(() => {
|
|
if (activeSidebarMode !== 'chats' || !activeSessionId) return;
|
|
|
|
const div = chatRef.current;
|
|
if (!div) return;
|
|
|
|
restoredForRef.current = null;
|
|
|
|
const applyRestore = () => {
|
|
if (restoredForRef.current === activeSessionId) return;
|
|
|
|
const liveSaved = typeof scrollTopsRef.current[activeSessionId] === 'number'
|
|
? scrollTopsRef.current[activeSessionId]
|
|
: undefined;
|
|
const saved = typeof liveSaved === 'number'
|
|
? liveSaved
|
|
: scrollPositions[activeSessionId];
|
|
|
|
if (typeof saved === 'number') {
|
|
div.scrollTop = saved;
|
|
restoredForRef.current = activeSessionId;
|
|
return;
|
|
}
|
|
if (messages.length > 0) {
|
|
// default: bottom when no saved position
|
|
div.scrollTop = div.scrollHeight;
|
|
restoredForRef.current = activeSessionId;
|
|
}
|
|
};
|
|
|
|
// Run immediately (pre-paint) and also schedule a fallback rAF
|
|
applyRestore();
|
|
const r0 = requestAnimationFrame(applyRestore);
|
|
|
|
// If content size/DOM changes after first paint, apply once
|
|
const onDomChange = () => {
|
|
if (restoredForRef.current !== activeSessionId) {
|
|
requestAnimationFrame(applyRestore);
|
|
}
|
|
};
|
|
|
|
const mo = new MutationObserver(onDomChange);
|
|
mo.observe(div, { childList: true, subtree: true });
|
|
|
|
const ro = new ResizeObserver(onDomChange);
|
|
ro.observe(div);
|
|
|
|
return () => {
|
|
cancelAnimationFrame(r0);
|
|
mo.disconnect();
|
|
ro.disconnect();
|
|
};
|
|
}, [activeSessionId, activeSidebarMode, messages.length, scrollPositions]);
|
|
|
|
// If there is no saved scroll and content arrives later (e.g., on first app load),
|
|
// default to bottom exactly once for this open chat.
|
|
useEffect(() => {
|
|
if (activeSidebarMode !== 'chats' || !activeSessionId) return;
|
|
if (restoredForRef.current === activeSessionId) return; // already applied
|
|
|
|
const liveSaved = typeof scrollTopsRef.current[activeSessionId] === 'number'
|
|
? scrollTopsRef.current[activeSessionId]
|
|
: undefined;
|
|
const savedScrollTop = typeof liveSaved === 'number'
|
|
? liveSaved
|
|
: scrollPositions[activeSessionId];
|
|
|
|
// Only when there is no saved position and we now have content
|
|
if (typeof savedScrollTop !== 'number' && messages.length > 0) {
|
|
requestAnimationFrame(() => {
|
|
const div = chatRef.current;
|
|
if (!div) return;
|
|
div.scrollTop = div.scrollHeight;
|
|
restoredForRef.current = activeSessionId;
|
|
});
|
|
}
|
|
}, [messages.length, activeSessionId, activeSidebarMode, scrollPositions]);
|
|
|
|
// Session-aware scroll helpers
|
|
const scrollToBottom = (behavior = 'smooth', sessionId = null) => {
|
|
const chatDiv = chatRef.current;
|
|
if (!chatDiv) return;
|
|
const target = sessionId ?? activeSessionIdRef.current;
|
|
if (activeSessionIdRef.current !== target) return;
|
|
chatDiv.scrollTo({ top: chatDiv.scrollHeight, behavior });
|
|
setUserScrolledUp(target, false);
|
|
};
|
|
|
|
const scrollMessageToTop = (msgId, behavior = 'auto', sessionId = null) => {
|
|
const chatDiv = chatRef.current;
|
|
if (!chatDiv) return;
|
|
const target = sessionId ?? activeSessionIdRef.current;
|
|
if (activeSessionIdRef.current !== target) return;
|
|
const el = document.getElementById(msgId);
|
|
if (el) {
|
|
const top = Math.max(0, el.offsetTop - TOP_ALIGN_OFFSET);
|
|
chatDiv.scrollTo({ top, behavior });
|
|
}
|
|
};
|
|
|
|
// Handler for new message tip click
|
|
const handleNewMsgTipClick = () => {
|
|
const sid = activeSessionIdRef.current;
|
|
const msgId = newMsgTip[sid];
|
|
if (msgId) {
|
|
scrollMessageToTop(msgId, 'smooth', sid);
|
|
setNewMsgTip(prev => {
|
|
const { [sid]: _omit, ...rest } = prev;
|
|
return rest;
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
async function sendMessage() {
|
|
if (isSending || !input.trim() || !model) return
|
|
|
|
let targetSessionId = activeSessionId
|
|
let isNewChat = false
|
|
if (!targetSessionId) {
|
|
const newSession = await createNewChat()
|
|
await new Promise(resolve => setTimeout(resolve, 200))
|
|
targetSessionId = newSession.session_id
|
|
isNewChat = true
|
|
} else {
|
|
const currentSession = chatSessions.find(s => s.session_id === targetSessionId)
|
|
isNewChat = currentSession && currentSession.name === "New Chat" && currentSession.messages.length === 0
|
|
}
|
|
|
|
const userMsg = { role: 'user', content: input.trim(), id: `msg-${Date.now()}-${Math.random()}` }
|
|
justSentMessage.current = true
|
|
lastSentSessionRef.current = targetSessionId
|
|
setUserScrolledUp(targetSessionId, false)
|
|
|
|
if (activeSessionIdRef.current === targetSessionId) {
|
|
restoredForRef.current = activeSessionIdRef.current
|
|
}
|
|
|
|
flushSync(() => {
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session =>
|
|
session.session_id === targetSessionId
|
|
? { ...session, messages: [...(session.messages || []), userMsg] }
|
|
: session
|
|
)
|
|
)
|
|
setInput('')
|
|
})
|
|
requestAnimationFrame(() => scrollToBottom('auto', targetSessionId))
|
|
|
|
const requestController = beginCancelableRequest(targetSessionId)
|
|
try {
|
|
let historyForSearch = []
|
|
try {
|
|
const existing = (chatSessions.find(s => s.session_id === targetSessionId)?.messages) || []
|
|
const lastFew = existing.slice(-8).map(m => ({ role: m.role, content: m.content || '' }))
|
|
historyForSearch = [...lastFew, { role: 'user', content: userMsg.content }]
|
|
} catch {}
|
|
|
|
let enrichedPrompt = userMsg.content
|
|
let citationSources = []
|
|
const contextBlocks = []
|
|
|
|
if (chatLibrarySlug) {
|
|
try {
|
|
const resp = await fetch(`${ollamaApiUrl}/libraries/${chatLibrarySlug}/context`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
signal: requestController.signal,
|
|
body: JSON.stringify({
|
|
prompt: userMsg.content,
|
|
top_k: 5
|
|
})
|
|
})
|
|
const data = await resp.json()
|
|
if (data && typeof data.context_block === 'string' && data.context_block.trim()) {
|
|
contextBlocks.push(data.context_block.trim())
|
|
}
|
|
if (Array.isArray(data?.sources)) {
|
|
citationSources.push(...data.sources)
|
|
}
|
|
} catch (error) {
|
|
if (isAbortError(error)) throw error
|
|
console.warn('local library enrichment failed', error)
|
|
}
|
|
}
|
|
|
|
if (webSearchEnabled) {
|
|
try {
|
|
const resp = await fetch(`${ollamaApiUrl}/websearch`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
signal: requestController.signal,
|
|
body: JSON.stringify({
|
|
prompt: userMsg.content,
|
|
model,
|
|
messages: historyForSearch,
|
|
history_limit: 8,
|
|
searx_url: searxUrl || null,
|
|
engines: Array.isArray(searxEngines) ? searxEngines : null,
|
|
})
|
|
})
|
|
const data = await resp.json()
|
|
if (data && typeof data.context_block === 'string' && data.context_block.trim()) {
|
|
contextBlocks.push(data.context_block.trim())
|
|
}
|
|
if (Array.isArray(data?.sources)) {
|
|
citationSources.push(...data.sources)
|
|
}
|
|
} catch (error) {
|
|
if (isAbortError(error)) throw error
|
|
console.warn('web search enrichment failed', error)
|
|
}
|
|
}
|
|
|
|
citationSources = [...new Set(citationSources)]
|
|
if (contextBlocks.length > 0) {
|
|
enrichedPrompt = `${userMsg.content}\n\n${contextBlocks.join('\n\n')}`
|
|
}
|
|
|
|
if (streamOutput) {
|
|
const assistantMsgId = `msg-${Date.now()}-${Math.random()}`
|
|
let fullReply = ''
|
|
const assistantMsg = { role: 'assistant', content: '', id: assistantMsgId, sources: citationSources }
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session =>
|
|
session.session_id === targetSessionId
|
|
? { ...session, messages: [...(session.messages || []), assistantMsg] }
|
|
: session
|
|
)
|
|
)
|
|
|
|
try {
|
|
const res = await fetch(`${ollamaApiUrl}/chat`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
signal: requestController.signal,
|
|
body: JSON.stringify({
|
|
session_id: targetSessionId,
|
|
model,
|
|
message: userMsg.content,
|
|
enriched_message: contextBlocks.length > 0 ? enrichedPrompt : null,
|
|
stream: true,
|
|
sources: citationSources || []
|
|
})
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
|
|
const reader = res.body?.getReader()
|
|
if (!reader) throw new Error('Missing response body')
|
|
|
|
const decoder = new TextDecoder()
|
|
let pendingMarked = false
|
|
|
|
while (true) {
|
|
const { value, done } = await reader.read()
|
|
if (done) {
|
|
setAssistantMessageContent(targetSessionId, assistantMsgId, fullReply)
|
|
|
|
if (activeSessionIdRef.current === targetSessionId) {
|
|
if (!userScrolledUpRef.current[targetSessionId]) {
|
|
requestAnimationFrame(() => scrollMessageToTop(assistantMsgId, 'smooth', targetSessionId))
|
|
} else {
|
|
setNewMsgTip(prev => ({ ...prev, [targetSessionId]: assistantMsgId }))
|
|
}
|
|
} else {
|
|
setPendingScrollToLastUser(prev => ({ ...prev, [targetSessionId]: assistantMsgId }))
|
|
setUnreadSessions(prev => [...new Set([...prev, targetSessionId])])
|
|
}
|
|
|
|
break
|
|
}
|
|
|
|
const chunk = decoder.decode(value, { stream: true })
|
|
fullReply += chunk
|
|
setAssistantMessageContent(targetSessionId, assistantMsgId, fullReply)
|
|
|
|
if (activeSessionIdRef.current === targetSessionId && !userScrolledUpRef.current[targetSessionId]) {
|
|
scrollToBottom('auto', targetSessionId)
|
|
}
|
|
if (activeSessionIdRef.current !== targetSessionId && !pendingMarked) {
|
|
setPendingScrollToLastUser(prev => ({ ...prev, [targetSessionId]: assistantMsgId }))
|
|
pendingMarked = true
|
|
}
|
|
}
|
|
} catch (error) {
|
|
if (isAbortError(error)) {
|
|
setAssistantMessageContent(targetSessionId, assistantMsgId, fullReply, { removeIfEmpty: true })
|
|
return
|
|
}
|
|
|
|
console.error('Failed to send message:', error)
|
|
setAssistantMessageContent(targetSessionId, assistantMsgId, 'Error: ' + getErrorText(error), { removeIfEmpty: true })
|
|
return
|
|
}
|
|
} else {
|
|
const res = await fetch(`${ollamaApiUrl}/chat`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
signal: requestController.signal,
|
|
body: JSON.stringify({
|
|
session_id: targetSessionId,
|
|
model,
|
|
message: userMsg.content,
|
|
enriched_message: contextBlocks.length > 0 ? enrichedPrompt : null,
|
|
stream: false,
|
|
sources: citationSources || []
|
|
})
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
|
|
const data = await res.json()
|
|
const assistantMsgId = `msg-${Date.now()}`
|
|
const assistantMsg = {
|
|
role: 'assistant',
|
|
content: data.reply,
|
|
id: assistantMsgId,
|
|
sources: citationSources
|
|
}
|
|
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session =>
|
|
session.session_id === targetSessionId
|
|
? { ...session, messages: [...(session.messages || []), assistantMsg] }
|
|
: session
|
|
)
|
|
)
|
|
|
|
if (assistantMsgId) {
|
|
if (activeSessionIdRef.current === targetSessionId) {
|
|
if (!userScrolledUpRef.current[targetSessionId]) {
|
|
requestAnimationFrame(() => scrollMessageToTop(assistantMsgId, 'smooth', targetSessionId))
|
|
} else {
|
|
setNewMsgTip(prev => ({ ...prev, [targetSessionId]: assistantMsgId }))
|
|
}
|
|
} else {
|
|
setPendingScrollToLastUser(prev => ({ ...prev, [targetSessionId]: assistantMsgId }))
|
|
}
|
|
}
|
|
}
|
|
|
|
if (activeSessionIdRef.current !== targetSessionId) {
|
|
setUnreadSessions(prev => [...new Set([...prev, targetSessionId])])
|
|
}
|
|
|
|
if (isNewChat) {
|
|
fetch(`${ollamaApiUrl}/generate-title`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
session_id: targetSessionId,
|
|
message: userMsg.content,
|
|
model
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const sanitizedTitle = data.title.replace(/<think(?:ing)?>[\s\S]*?<\/think(?:ing)?>/i, '').trim()
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session =>
|
|
session.session_id === targetSessionId ? { ...session, name: sanitizedTitle } : session
|
|
)
|
|
)
|
|
})
|
|
}
|
|
} catch (error) {
|
|
if (isAbortError(error)) {
|
|
finishCancelableRequest(requestController)
|
|
return
|
|
}
|
|
|
|
console.error('Failed to send message:', error)
|
|
const errorMsg = { role: 'assistant', content: 'Error: ' + getErrorText(error), id: `msg-${Date.now()}-${Math.random()}` }
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session =>
|
|
session.session_id === targetSessionId
|
|
? { ...session, messages: [...session.messages, errorMsg] }
|
|
: session
|
|
)
|
|
)
|
|
} finally {
|
|
finishCancelableRequest(requestController)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function toggleWebSearch() {
|
|
setWebSearchEnabled(prev => !prev);
|
|
}
|
|
|
|
async function createNewChat() {
|
|
const newSessionId = 'sess-' + Math.random().toString(36).slice(2) + Date.now().toString(36);
|
|
const res = await fetch(`${ollamaApiUrl}/sessions`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ session_id: newSessionId })
|
|
});
|
|
const newSession = await res.json();
|
|
const sessionWithMessages = { ...newSession, messages: [] };
|
|
setChatSessions(prevSessions => [sessionWithMessages, ...prevSessions]);
|
|
setActiveSessionId(newSession.session_id);
|
|
textareaRef.current?.focus();
|
|
return newSession;
|
|
}
|
|
|
|
function selectChat(sessionId) {
|
|
setActiveSessionId(sessionId);
|
|
// Clear unread dot immediately for this chat
|
|
setUnreadSessions(prev => prev.filter(id => id !== sessionId));
|
|
|
|
// If we had queued a guided scroll for this chat (from background replies), run it now, smoothly
|
|
const pendingId = pendingScrollToLastUser[sessionId];
|
|
if (pendingId) {
|
|
// Defer until the chat content renders; restoration is gated by restoredForRef, so won't fight
|
|
requestAnimationFrame(() => {
|
|
let tries = 12; // ~200ms @ 60fps
|
|
const attempt = () => {
|
|
const chatDiv = chatRef.current;
|
|
if (!chatDiv) return;
|
|
|
|
let el = document.getElementById(pendingId);
|
|
if (!el) {
|
|
const sess = chatSessions.find(s => s.session_id === sessionId);
|
|
if (sess && Array.isArray(sess.messages)) {
|
|
for (let i = sess.messages.length - 1; i >= 0; i--) {
|
|
const m = sess.messages[i];
|
|
if (m.role === 'assistant' && m.id) { el = document.getElementById(m.id); break; }
|
|
}
|
|
}
|
|
}
|
|
|
|
if (el) {
|
|
scrollMessageToTop(el.id, 'smooth', sessionId);
|
|
setPendingScrollToLastUser(prev => {
|
|
const { [sessionId]: _omit, ...rest } = prev;
|
|
return rest;
|
|
});
|
|
} else if (tries-- > 0) {
|
|
requestAnimationFrame(attempt);
|
|
}
|
|
};
|
|
requestAnimationFrame(attempt);
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleRename(sessionId, newName) {
|
|
fetch(`${ollamaApiUrl}/sessions/${sessionId}/rename`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title: newName })
|
|
})
|
|
.then(() => {
|
|
setChatSessions(prevSessions =>
|
|
prevSessions.map(session =>
|
|
session.session_id === sessionId ? { ...session, name: newName } : session
|
|
)
|
|
);
|
|
setEditingSessionId(null);
|
|
});
|
|
}
|
|
|
|
function handleDelete(sessionId) {
|
|
fetch(`${ollamaApiUrl}/sessions/${sessionId}`, { method: 'DELETE' })
|
|
.then(() => {
|
|
const newSessions = chatSessions.filter(s => s.session_id !== sessionId);
|
|
setChatSessions(newSessions);
|
|
if (activeSessionId === sessionId) {
|
|
setActiveSessionId(newSessions.length > 0 ? newSessions[0].session_id : null);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Auto-delete empty "New Chat" sessions
|
|
useEffect(() => {
|
|
const emptyNewChats = chatSessions.filter(
|
|
s => s.name === "New Chat" && s.session_id !== activeSessionId && s.messages.length === 0
|
|
);
|
|
if (emptyNewChats.length > 0) {
|
|
emptyNewChats.forEach(chat => {
|
|
handleDelete(chat.session_id);
|
|
});
|
|
}
|
|
}, [activeSessionId, chatSessions, ollamaApiUrl]);
|
|
|
|
const handleChatFrameClick = (e) => {
|
|
const selection = window.getSelection();
|
|
if (selection.toString().length > 0) {
|
|
return;
|
|
}
|
|
|
|
if (document.activeElement === textareaRef.current) {
|
|
return;
|
|
}
|
|
|
|
if (e.target.closest('.msg')) {
|
|
return;
|
|
}
|
|
|
|
textareaRef.current?.focus();
|
|
};
|
|
|
|
return (
|
|
<div className="app" style={{ gridTemplateColumns: `${sidebarWidth}px 1fr` }}>
|
|
<div className="sidebar">
|
|
<div className="sidebar-header">
|
|
<div
|
|
className={`sidebar-tab ${activeSidebarMode === 'chats' ? 'active' : ''}`}
|
|
onClick={() => handleSidebarClick('chats')}
|
|
>
|
|
Chats
|
|
</div>
|
|
<div
|
|
className={`sidebar-tab ${activeSidebarMode === 'dbs' ? 'active' : ''}`}
|
|
onClick={() => handleSidebarClick('dbs')}
|
|
>
|
|
DBs
|
|
</div>
|
|
<div
|
|
className={`sidebar-tab ${activeSidebarMode === 'settings' ? 'active' : ''}`}
|
|
onClick={() => handleSidebarClick('settings')}
|
|
>
|
|
Settings
|
|
</div>
|
|
</div>
|
|
<div className="sidebar-content">
|
|
{activeSidebarMode === 'chats' && (
|
|
<div className="chat-list">
|
|
{chatSessions.map(session => (
|
|
<div
|
|
key={session.session_id}
|
|
className={`chat-item ${session.session_id === activeSessionId ? 'active' : ''}`}
|
|
onClick={() => handleSelectChat(session.session_id)}
|
|
>
|
|
{editingSessionId === session.session_id ? (
|
|
<input
|
|
type="text"
|
|
className="rename-input"
|
|
defaultValue={session.name}
|
|
onBlur={() => setEditingSessionId(null)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
handleRename(session.session_id, e.target.value);
|
|
} else if (e.key === 'Escape') {
|
|
setEditingSessionId(null);
|
|
}
|
|
}}
|
|
autoFocus
|
|
/>
|
|
) : (
|
|
<>
|
|
<span>{session.name}</span>
|
|
<div className="chat-item-buttons">
|
|
{unreadSessions.includes(session.session_id) && <div className="unread-dot"></div>}
|
|
<button className="icon-button" onClick={(e) => { e.stopPropagation(); setEditingSessionId(session.session_id); }}>
|
|
<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>
|
|
<button className="icon-button" onClick={(e) => { e.stopPropagation(); handleDelete(session.session_id); }}>
|
|
<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-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{activeSidebarMode === 'dbs' && (
|
|
<div className="db-list">
|
|
{libraries.length === 0 ? (
|
|
<div className="empty-list-message">No databases yet.</div>
|
|
) : (
|
|
libraries.map(library => (
|
|
<div
|
|
key={library.slug}
|
|
className={`chat-item ${library.slug === activeLibrarySlug ? 'active' : ''}`}
|
|
onClick={() => setActiveLibrarySlug(library.slug)}
|
|
>
|
|
<span>{library.name}</span>
|
|
{chatLibrarySlug === library.slug && <div className="db-active-badge">Chat</div>}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
{activeSidebarMode === 'settings' && (
|
|
<div className="settings-list">
|
|
<div
|
|
className={`settings-item ${activeSettingsSubmenu === 'General' ? 'active' : ''}`}
|
|
onClick={() => setActiveSettingsSubmenu('General')}
|
|
>
|
|
General
|
|
</div>
|
|
<div
|
|
className={`settings-item ${activeSettingsSubmenu === 'Interface' ? 'active' : ''}`}
|
|
onClick={() => setActiveSettingsSubmenu('Interface')}
|
|
>
|
|
Interface
|
|
</div>
|
|
<div
|
|
className={`settings-item ${activeSettingsSubmenu === 'Websearch' ? 'active' : ''}`}
|
|
onClick={() => setActiveSettingsSubmenu('Websearch')}
|
|
>
|
|
Websearch
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{activeSidebarMode !== 'settings' && (
|
|
<div className="sidebar-footer">
|
|
{activeSidebarMode === 'chats' && (
|
|
<button className="button new-chat-button" onClick={createNewChat}>New Chat</button>
|
|
)}
|
|
{activeSidebarMode === 'dbs' && (
|
|
isCreatingLibrary ? (
|
|
<div className="new-db-form">
|
|
<input
|
|
type="text"
|
|
className="rename-input"
|
|
value={newLibraryName}
|
|
onChange={(e) => setNewLibraryName(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
createLibrary()
|
|
} else if (e.key === 'Escape') {
|
|
setIsCreatingLibrary(false)
|
|
setNewLibraryName('')
|
|
setLibraryCreateError('')
|
|
}
|
|
}}
|
|
placeholder="Database name"
|
|
autoFocus
|
|
/>
|
|
{libraryCreateError && <div className="form-error">{libraryCreateError}</div>}
|
|
<div className="new-db-actions">
|
|
<button className="button new-db-button" onClick={() => createLibrary()}>Create</button>
|
|
<button
|
|
className="button ghost"
|
|
onClick={() => {
|
|
setIsCreatingLibrary(false)
|
|
setNewLibraryName('')
|
|
setLibraryCreateError('')
|
|
}}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
className="button new-db-button"
|
|
onClick={() => {
|
|
setIsCreatingLibrary(true)
|
|
setLibraryCreateError('')
|
|
}}
|
|
>
|
|
New Database
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="resizer" onMouseDown={startResizing}></div>
|
|
</div>
|
|
<div className="main-content">
|
|
{activeSidebarMode === 'chats' && (
|
|
<>
|
|
<div className="header">
|
|
<strong>Chat - {chatSessions.find(s => s.session_id === activeSessionId)?.name || 'New Chat'}</strong>
|
|
{chatLibrary && <span className="header-subtle">KB: {chatLibrary.name}</span>}
|
|
</div>
|
|
|
|
<div key={activeSessionId} className="chat" ref={chatRef} onClick={handleChatFrameClick}>
|
|
{messages.map((m, i) => {
|
|
const isEditingThis = m.role === 'user' && editingMessageIndex === i;
|
|
return (
|
|
<div
|
|
key={m.id || i}
|
|
id={m.id}
|
|
className={
|
|
'msg ' +
|
|
(m.role === 'user' ? 'user' : 'assistant') +
|
|
(isEditingThis ? ' editing' : '')
|
|
}
|
|
>
|
|
{m.role === 'assistant' ? (
|
|
<div className="assistant-message-wrapper">
|
|
<AssistantMessageContent content={m.content} streamOutput={streamOutput} sources={m.sources} />
|
|
{!isSending && (
|
|
<div className="message-options-bar assistant-options">
|
|
<button className="icon-button" title="Copy message" onClick={() => handleCopyMessage(m)}>
|
|
<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"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
|
</button>
|
|
<button className="icon-button" title="Regenerate response" onClick={() => regenerateFromIndex(i)}>
|
|
<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"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"></path></svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="user-message-wrapper">
|
|
{isEditingThis ? (
|
|
<div className="msg-content msg-content--user editing">
|
|
<div className="user-edit-shadow" aria-hidden="true">
|
|
{editText}
|
|
</div>
|
|
|
|
<TextareaAutosize
|
|
className="edit-message-input edit-overlay"
|
|
value={editText}
|
|
onChange={(e) => setEditText(e.target.value)}
|
|
onBlur={cancelEditMessage}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Escape') { e.preventDefault(); cancelEditMessage(); }
|
|
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); commitEditMessage(i); }
|
|
}}
|
|
autoFocus
|
|
minRows={1}
|
|
/>
|
|
</div>
|
|
) : (
|
|
(() => {
|
|
const raw = m.content || '';
|
|
const lines = raw.split(/\r\n|\r|\n/);
|
|
const needsCollapse = lines.length > 30;
|
|
const key = collapseKeyFor(m, i, activeSessionId);
|
|
const isCollapsed = needsCollapse ? (collapsedUserMsgs[key] ?? true) : false;
|
|
const displayText = isCollapsed ? lines.slice(0, 30).join('\n') + '\n…' : raw;
|
|
|
|
return (
|
|
<>
|
|
<div className="msg-content msg-content--user">{displayText}</div>
|
|
{needsCollapse && (
|
|
<button
|
|
className="user-msg-expand"
|
|
onClick={() => toggleUserMsgCollapse(key)}
|
|
aria-expanded={isCollapsed ? 'false' : 'true'}
|
|
>
|
|
{isCollapsed ? 'Show entire message' : 'Collapse'}
|
|
</button>
|
|
)}
|
|
</>
|
|
);
|
|
})()
|
|
)}
|
|
{!isSending && !isEditingThis && (
|
|
<div className="message-options-bar user-options">
|
|
<button className="icon-button" title="Edit message" onClick={() => startEditMessage(i, m.content)}>
|
|
<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"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
|
|
</button>
|
|
<button className="icon-button" title="Copy message" onClick={() => handleCopyMessage(m)}>
|
|
<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"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* New message tip (active chat only) */}
|
|
{newMsgTip[activeSessionId] && (
|
|
<button
|
|
className="new-msg-tip"
|
|
onClick={handleNewMsgTipClick}
|
|
title="Jump to the new message"
|
|
aria-label="Jump to the new message"
|
|
>
|
|
New message<span style={{ marginLeft: 6 }}>↓</span>
|
|
</button>
|
|
)}
|
|
|
|
<div className="footer">
|
|
<div className="footer-content-wrapper">
|
|
<TextareaAutosize
|
|
ref={textareaRef}
|
|
className="input"
|
|
value={input}
|
|
onChange={e => setInput(e.target.value)}
|
|
onKeyDown={e => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
}}
|
|
placeholder="Ask any question..."
|
|
maxRows={13}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className={"websearch-toggle" + (webSearchEnabled ? " active" : "")}
|
|
onClick={toggleWebSearch}
|
|
title="Toggle web search"
|
|
aria-pressed={webSearchEnabled}
|
|
>
|
|
<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">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="2" y1="12" x2="22" y2="12"/>
|
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
className="button"
|
|
onClick={isSending ? cancelActiveRequest : sendMessage}
|
|
title={isSending ? 'Cancel generation' : 'Send'}
|
|
aria-label={isSending ? 'Cancel generation' : 'Send'}
|
|
>
|
|
{isSending ? <div className="spinner"></div> : 'Send'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{activeSidebarMode === 'dbs' && (
|
|
<>
|
|
<div className="header">
|
|
<strong>{activeLibrary?.name || 'Databases'}</strong>
|
|
{chatLibrary && <span className="header-subtle">Chat KB: {chatLibrary.name}</span>}
|
|
</div>
|
|
<LibraryManager
|
|
apiBase={ollamaApiUrl}
|
|
library={activeLibrary}
|
|
jobs={libraryJobs}
|
|
chatLibrarySlug={chatLibrarySlug}
|
|
onRefresh={async () => {
|
|
await refreshLibraries();
|
|
await refreshLibraryJobs();
|
|
}}
|
|
onToggleChatLibrary={setChatLibrarySlug}
|
|
onDeleted={(slug) => {
|
|
if (activeLibrarySlug === slug) {
|
|
const next = libraries.find(lib => lib.slug !== slug);
|
|
setActiveLibrarySlug(next?.slug || null);
|
|
}
|
|
if (chatLibrarySlug === slug) {
|
|
setChatLibrarySlug(null);
|
|
}
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
{activeSidebarMode === 'settings' && (
|
|
<>
|
|
<div className="header">
|
|
<strong>{activeSettingsSubmenu} Settings</strong>
|
|
</div>
|
|
{activeSettingsSubmenu === 'General' && (
|
|
<GeneralSettings
|
|
onModelChange={setModel}
|
|
streamOutput={streamOutput}
|
|
onStreamOutputChange={setStreamOutput}
|
|
/>
|
|
)}
|
|
{activeSettingsSubmenu === 'Interface' && <InterfaceSettings />}
|
|
{activeSettingsSubmenu === 'Websearch' && (
|
|
<WebsearchSettings
|
|
searxUrl={searxUrl}
|
|
setSearxUrl={setSearxUrl}
|
|
engines={searxEngines}
|
|
setEngines={setSearxEngines}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|