{search ? t('menu.noMatch') : t('menu.noConversations')}
+ {showFilters && (
+
+ {statusLine}
+ {meta?.indexing && {t('menu.find.indexing')}}
+ {meta?.partial && {t('menu.find.partial', { searched: meta.searched, total: meta.total })}}
+
+ )}
+
+
+ {searchState === 'error' && (
+
))
})()}
@@ -274,6 +370,7 @@ export default function ChatsList({
↵ {t('menu.keys.open')}
F2 {t('menu.keys.rename')}
Del {t('menu.keys.delete')}
+ Esc {t('menu.keys.clear')}
{onDeleteAll && chats.length > 1 && (
)}
diff --git a/core/http/react-ui/src/pages/Chat.jsx b/core/http/react-ui/src/pages/Chat.jsx
index b43c74f647..51631539bf 100644
--- a/core/http/react-ui/src/pages/Chat.jsx
+++ b/core/http/react-ui/src/pages/Chat.jsx
@@ -79,6 +79,7 @@ import { useAuth } from '../context/AuthContext'
import { useOperations } from '../hooks/useOperations'
import { useLoadedModels } from '../hooks/useLoadedModels'
import { copyToClipboard } from '../utils/clipboard'
+import { chatAddress, seqOfSearch } from '../utils/chatSearch'
import Icon from '../components/Icon'
// eslint-disable-next-line no-unused-vars
import WorkspaceChangeNote from '../components/wellknown/WorkspaceChangeNote'
@@ -427,6 +428,29 @@ function ChatPage() {
})
}, [find.index, find.count, find.query])
+ // A link from the chat search names a message (?seq=14): scroll to it once
+ // the transcript has it, and flash it so the eye finds it. location.key
+ // makes a second click on the same hit jump again.
+ const wantSeq = seqOfSearch(location.search)
+ const jumpedRef = useRef('')
+ useEffect(() => {
+ if (!wantSeq || !activeId || routeId !== activeId) return undefined
+ const mark = `${location.key}:${activeId}:${wantSeq}`
+ if (jumpedRef.current === mark) return undefined
+ const el = messagesRef.current?.querySelector(`[data-testid="chat-message"][data-index="${wantSeq}"]`)
+ if (!el) return undefined
+ jumpedRef.current = mark
+ el.scrollIntoView({ block: 'center' })
+ el.focus({ preventScroll: true })
+ // on, then off (the colour fades by a transition), then gone. Not cleared
+ // by the cleanup: a new message in the transcript re-runs this effect and
+ // must not cut the flash short.
+ el.setAttribute('data-flash', 'on')
+ setTimeout(() => el.setAttribute('data-flash', 'off'), 1400)
+ setTimeout(() => el.removeAttribute('data-flash'), 2800)
+ return undefined
+ }, [wantSeq, activeId, routeId, messages, location.key])
+
// Highlight code blocks and add per-block Copy and Download buttons, and
// Open preview on a block that is a result (a page, an SVG, a long block, a
// block the answer names as a file). The observer is disconnected while we
@@ -1036,14 +1060,14 @@ function ChatPage() {
ref={chatsMenuRef}
chats={visibleChats}
activeChatId={activeId}
- onSelect={(id) => navigate(`/app/chats/${id}`)}
+ onSelect={(id, opts) => navigate(chatAddress(id, opts))}
onNew={() => navigate('/app')}
onDelete={requestDelete}
onDeleteAll={promptDeleteAll}
onRename={(id, name) => chat.rename(id, name)}
onExport={(c) => exportChat(c.id)}
onCopyChat={(c) => copyChat(c.id)}
- onSearch={(text) => chatsApi.search(text, 50)}
+ onSearch={(text, params) => chatsApi.search(text, 50, params)}
originTitle={originTitle}
/>
)}
diff --git a/core/http/react-ui/src/pages/chat.css b/core/http/react-ui/src/pages/chat.css
index f15f193066..f32a2f5be8 100644
--- a/core/http/react-ui/src/pages/chat.css
+++ b/core/http/react-ui/src/pages/chat.css
@@ -1945,3 +1945,39 @@ html[data-handoff='fade']::view-transition-new(root) {
.ac-group { padding: 10px; }
.ac-row__open { flex-direction: column; align-items: flex-start; gap: 2px; }
}
+
+/* ---- Chat search: filters, hits, deep link ------------------------------------- */
+.cx-find-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 8px 16px; box-shadow: inset 0 -1px 0 var(--dk-edge); flex: none; }
+.cx-find-filter { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.cx-find-filter__label { color: var(--dk-muted); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .04em; }
+.cx-find-select {
+ height: 32px;
+ max-width: 100%;
+ padding: 0 8px;
+ border: 0;
+ border-radius: var(--dk-radius-1);
+ background: var(--dk-inset);
+ box-shadow: inset 0 0 0 1px var(--dk-edge);
+ color: var(--dk-text);
+ font: inherit;
+ font-size: var(--fs-small);
+}
+.cx-find-select:focus-visible { outline: 2px solid var(--dk-accent-text); outline-offset: 1px; }
+.cx-find-reset { align-self: flex-end; }
+.cx-find-status { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 16px 0; color: var(--dk-muted); font-size: var(--fs-meta); }
+.cx-find-status__note { color: var(--dk-warn-text, var(--dk-muted)); }
+.cx-find-list[data-dim] { opacity: .55; transition: opacity var(--dk-dur-1) var(--dk-ease-out); }
+.cx-find-snip { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
+.cx-find-snip__who { margin-right: 6px; color: var(--dk-text); font-weight: 600; }
+.cx-find-snip__more { margin-left: 8px; font-size: var(--fs-meta); }
+.cx-find-mark { padding: 0 1px; border-radius: var(--dk-radius-1); background: var(--dk-accent-wash); color: var(--dk-accent-text); font-weight: 650; }
+.cx-msg[data-flash] { border-radius: var(--dk-radius-2); transition: background-color 1.2s ease-out, box-shadow 1.2s ease-out; }
+.cx-msg[data-flash="on"] { background: var(--dk-accent-wash); box-shadow: 0 0 0 8px var(--dk-accent-wash); }
+.cx-msg[data-flash="off"] { background: transparent; box-shadow: 0 0 0 8px transparent; }
+@media (prefers-reduced-motion: reduce) { .cx-msg[data-flash] { transition: none; } }
+@media (max-width: 760px) {
+ .cx-find-filters { padding: 8px 12px; gap: 6px 8px; }
+ .cx-find-filter { flex: 1 1 42%; }
+ .cx-find-select { width: 100%; font-size: var(--fs-lead); }
+ .cx-find-status { padding: 8px 12px 0; }
+}
diff --git a/core/http/react-ui/src/utils/api.js b/core/http/react-ui/src/utils/api.js
index 5aa02dc506..530f125162 100644
--- a/core/http/react-ui/src/utils/api.js
+++ b/core/http/react-ui/src/utils/api.js
@@ -156,7 +156,9 @@ export const chatsApi = {
fork: (id, fromSeq, title) => postJSON(`${API_CONFIG.endpoints.chat(id)}/fork`, {
...(fromSeq ? { from_seq: Number(fromSeq) } : {}), ...(title ? { title } : {}),
}),
- search: (text, limit) => fetchJSON(`${API_CONFIG.endpoints.chats}/search${q({ q: text, limit })}`),
+ // Search all chats: params are the filters of GET /api/chats/search (agent,
+ // origin, role, since, until, group).
+ search: (text, limit, params = {}) => fetchJSON(`${API_CONFIG.endpoints.chats}/search${q({ q: text, limit, ...params })}`),
exportUrl: (id, format) => apiUrl(`${API_CONFIG.endpoints.chat(id)}/export${q({ format })}`),
// chat is the JSON export (GET .../export?format=json); model replaces its model.
importChat: (chat, model) => postJSON(`${API_CONFIG.endpoints.chats}/import`, { chat, ...(model ? { model } : {}) }),
diff --git a/core/http/react-ui/src/utils/chatSearch.js b/core/http/react-ui/src/utils/chatSearch.js
new file mode 100644
index 0000000000..2f1dd568c7
--- /dev/null
+++ b/core/http/react-ui/src/utils/chatSearch.js
@@ -0,0 +1,81 @@
+// Helpers of the chat search (GET /api/chats/search). No React, so a node test
+// drives them.
+
+// The words of a hit's snippet, split at the marked ranges. The server gives
+// ranges as offsets in UTF-16 code units, which is how a JavaScript string
+// counts, and the page draws the parts as text nodes: nothing from a message is
+// ever parsed as HTML. Ranges that are out of order, overlap or lie outside the
+// text are cut or dropped, so a wrong range never throws or repeats text.
+export function highlightParts(text, ranges) {
+ const s = String(text || '')
+ const parts = []
+ let at = 0
+ const sorted = [...(Array.isArray(ranges) ? ranges : [])]
+ .filter((r) => r && Number.isInteger(r.start) && Number.isInteger(r.end))
+ .sort((a, b) => a.start - b.start)
+ for (const r of sorted) {
+ const start = Math.max(r.start, at)
+ const end = Math.min(r.end, s.length)
+ if (end <= start) continue
+ if (start > at) parts.push({ text: s.slice(at, start), mark: false })
+ parts.push({ text: s.slice(start, end), mark: true })
+ at = end
+ }
+ if (at < s.length) parts.push({ text: s.slice(at), mark: false })
+ return parts
+}
+
+// The date presets of the filter row, as the number of days back.
+export const RANGE_DAYS = { day: 1, week: 7, month: 30, year: 365 }
+
+const iso = (d) => d.toISOString()
+
+// The query parameters of the filters: { agent, origin, range, from, to }.
+// A preset is a span back from now; a custom range is two dates (YYYY-MM-DD,
+// the end day included). Empty values are left out.
+export function searchParams(filters, now = new Date()) {
+ const f = filters || {}
+ const out = {}
+ if (f.agent) out.agent = f.agent
+ if (f.origin) out.origin = f.origin
+ if (RANGE_DAYS[f.range]) out.since = iso(new Date(now.getTime() - RANGE_DAYS[f.range] * 86400000))
+ if (f.range === 'custom') {
+ if (/^\d{4}-\d{2}-\d{2}$/.test(f.from || '')) out.since = f.from
+ if (/^\d{4}-\d{2}-\d{2}$/.test(f.to || '')) out.until = f.to
+ }
+ return out
+}
+
+export const noFilters = { agent: '', origin: '', range: '', from: '', to: '' }
+export const filtersActive = (f) => Boolean(f && (f.agent || f.origin || f.range))
+
+// A stable string for the filters, to tell when a search is a new one.
+export const filtersKey = (f) => JSON.stringify([f?.agent || '', f?.origin || '', f?.range || '', f?.from || '', f?.to || ''])
+
+// The address of a chat, at one of its messages when seq is given.
+export function chatAddress(id, opts) {
+ const base = `/app/chats/${encodeURIComponent(id)}`
+ const seq = Number(opts?.seq)
+ return Number.isInteger(seq) && seq > 0 ? `${base}?seq=${seq}` : base
+}
+
+// The seq of a chat address (?seq=14), or 0.
+export function seqOfSearch(search) {
+ const seq = Number(new URLSearchParams(search || '').get('seq'))
+ return Number.isInteger(seq) && seq > 0 ? seq : 0
+}
+
+// The rows of a search answer: one per hit, the chat as the list draws it.
+export function hitRows(res, toChat) {
+ return (res?.hits || []).filter((h) => h?.chat?.id).map((h) => ({
+ key: `${h.chat.id}:${h.seq || 0}`,
+ chat: toChat(h.chat),
+ seq: h.seq || 0,
+ role: h.role || '',
+ at: h.at ? Date.parse(h.at) || 0 : 0,
+ snippet: h.snippet || '',
+ highlights: h.highlights || [],
+ inTitle: Boolean(h.in_title),
+ more: Math.max(0, (h.matches || 0) - 1),
+ }))
+}
diff --git a/core/http/react-ui/tests/unit/chatsearch.test.mjs b/core/http/react-ui/tests/unit/chatsearch.test.mjs
new file mode 100644
index 0000000000..19aeb20bb6
--- /dev/null
+++ b/core/http/react-ui/tests/unit/chatsearch.test.mjs
@@ -0,0 +1,75 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { highlightParts, searchParams, chatAddress, seqOfSearch, hitRows, filtersActive, noFilters, filtersKey } from '../../src/utils/chatSearch.js'
+
+test('chat search: highlight splits the text at the ranges and keeps all of it', () => {
+ const parts = highlightParts('What is the Qdrant port?', [{ start: 12, end: 18 }, { start: 19, end: 23 }])
+ assert.deepEqual(parts, [
+ { text: 'What is the ', mark: false },
+ { text: 'Qdrant', mark: true },
+ { text: ' ', mark: false },
+ { text: 'port', mark: true },
+ { text: '?', mark: false },
+ ])
+ assert.equal(parts.map((p) => p.text).join(''), 'What is the Qdrant port?')
+})
+
+test('chat search: highlight never turns message text into markup', () => {
+ const text = '
+
)}
- {(() => {
+ {searchState !== 'error' && flat.length === 0 && searchState !== 'loading' && (
+ {t('menu.find.failed')}
+ +
+ {searching
+ ? (filtersActive(filters) ? t('menu.find.noMatchFiltered', { query }) : t('menu.find.noMatchFor', { query }))
+ : search ? t('menu.noMatch') : t('menu.noConversations')}
+
+ )}
+ {searchState !== 'error' && searchState === 'loading' && flat.length === 0 && (
+ {t('menu.find.searching')}
+ )}
+ {searching && searchState !== 'error' && (
+
+ {flat.map((entry, idx) => renderRow(entry, idx))}
+
+ )}
+ {!searching && (() => {
let n = 0
return groups.map(g => (
{t(`menu.group.${g.key}`)}
- {g.items.map(chat => { - const idx = n++ - const selected = idx === activeIdx - const editing = editingId === chat.id - const preview = snippets[chat.id] || '' - const originKind = chat.origin ? (knownKind(chat.origin)) : '' - return ( - !editing && choose(chat.id)}
- onMouseMove={() => { if (!selected) setActiveIdx(idx) }}
- >
-
- )
- })}
+ {g.items.map(chat => renderRow(flat[n], n++, g.key))}
- {chat.running &&
- {preview && {preview}
}
- {chat.model || t('menu.noModel')}
- {when(g.key, chat.updatedAt || chat.createdAt || 0)}
-
-
- {onCopyChat && (
-
- )}
- {onExport && (
-
- )}
- {canDelete && (
-
- )}
-
-