Spaces:
Running
Running
| import React, { useEffect, useMemo, useRef, useState } from 'react'; | |
| import { commitment, composeSystem, modelLabel, parsePersona, personaLines, setModelField, TASK_CLASSES } from '../core/context'; | |
| import { CONTEXT_INFO, CONTEXT_KINDS, type ContextKind } from '../core/windows'; | |
| import { ContextWindow } from './ContextWindow'; | |
| import type { ModuleWindowProps, UIFModule } from '../core/modules'; | |
| import type { ContextApi } from './contextStore'; | |
| import { useUIF, type UIFContextValue } from './UIFContext'; | |
| const ACCEPT: Record<ContextKind, string> = { | |
| history: '.history,.jsonl,application/json', | |
| memory: '.memory,.jsonl,application/json', | |
| prompt: '.prompt,.txt,text/plain', | |
| persona: '.persona,.json,application/json', | |
| model: '.model,.yaml,.yml,text/plain', | |
| }; | |
| function download(name: string, text: string) { | |
| const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' })); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = name; | |
| document.body.appendChild(a); | |
| a.click(); | |
| a.remove(); | |
| setTimeout(() => URL.revokeObjectURL(url), 1000); | |
| } | |
| /** Renders every open window, whichever module it belongs to, in the field's frame. */ | |
| export function ModuleWindows() { | |
| const uif = useUIF(); | |
| const { windows } = uif; | |
| return ( | |
| <> | |
| {windows.defs | |
| .filter(d => windows.open[d.id]) | |
| .map(def => { | |
| const close = () => windows.hide(def.id); | |
| return ( | |
| <ContextWindow | |
| key={def.id} | |
| info={def} | |
| rect={windows.open[def.id]!} | |
| onRect={r => windows.setRect(def.id, r)} | |
| onClose={close} | |
| > | |
| {Tools => <def.Body uif={uif} close={close} Tools={Tools} />} | |
| </ContextWindow> | |
| ); | |
| })} | |
| </> | |
| ); | |
| } | |
| /** The body of one context window: its file's import and export in the title bar, its contents, and a status note. */ | |
| function ContextFileBody({ kind, Tools }: { kind: ContextKind; Tools: ModuleWindowProps['Tools'] }) { | |
| const { context, storageKey } = useUIF(); | |
| const [note, setNote] = useState<{ text: string; error?: boolean } | null>(null); | |
| const fileRef = useRef<HTMLInputElement>(null); | |
| const fileName = `${storageKey}${CONTEXT_INFO[kind].file}`; | |
| useEffect(() => { | |
| if (!note) return; | |
| const t = setTimeout(() => setNote(null), 4000); | |
| return () => clearTimeout(t); | |
| }, [note]); | |
| const onFile = async (e: React.ChangeEvent<HTMLInputElement>) => { | |
| const file = e.target.files?.[0]; | |
| e.target.value = ''; | |
| if (!file) return; | |
| try { | |
| setNote({ text: context.importText(kind, await file.text()) }); | |
| } catch (err) { | |
| setNote({ text: (err as Error).message, error: true }); | |
| } | |
| }; | |
| return ( | |
| <> | |
| <Tools> | |
| <button type="button" title={`Import a ${CONTEXT_INFO[kind].file} file`} aria-label="Import" onClick={() => fileRef.current?.click()}> | |
| ⤒ | |
| </button> | |
| <button type="button" title={`Download ${fileName}`} aria-label="Export" onClick={() => download(fileName, context.fileText(kind))}> | |
| ⤓ | |
| </button> | |
| <input ref={fileRef} type="file" accept={ACCEPT[kind]} hidden onChange={onFile} data-uif-import={kind} /> | |
| </Tools> | |
| {kind === 'history' && <HistoryBody context={context} />} | |
| {kind === 'memory' && <MemoryBody context={context} />} | |
| {kind === 'prompt' && <PromptBody context={context} />} | |
| {kind === 'persona' && <PersonaBody context={context} />} | |
| {kind === 'model' && <ModelBody context={context} />} | |
| {note && ( | |
| <p className={`uif-window-note ${note.error ? 'is-error' : ''}`} role="status"> | |
| {note.text} | |
| </p> | |
| )} | |
| </> | |
| ); | |
| } | |
| /** The built-in module: the five context files, in Savante's formats. */ | |
| export const contextModule: UIFModule = { | |
| id: 'context', | |
| label: 'Context', | |
| windows: CONTEXT_KINDS.map(kind => ({ | |
| id: kind, | |
| ...CONTEXT_INFO[kind], | |
| Body: ({ Tools }: ModuleWindowProps) => <ContextFileBody kind={kind} Tools={Tools} />, | |
| detail: (uif: UIFContextValue) => { | |
| const c = uif.context; | |
| switch (kind) { | |
| case 'history': | |
| return `${c.history.length} exchange${c.history.length === 1 ? '' : 's'}`; | |
| case 'memory': | |
| return `${c.memory.length} note${c.memory.length === 1 ? '' : 's'}`; | |
| case 'prompt': | |
| return c.prompt.trim() ? `${c.prompt.trim().length} chars` : 'empty'; | |
| case 'persona': | |
| return c.persona ? String(c.persona.name ?? c.persona.persona ?? 'set') : 'none'; | |
| case 'model': | |
| return String(c.model.logical_model ?? 'auto'); | |
| } | |
| }, | |
| })), | |
| }; | |
| /** Records, Merkle root (rfc6962-sha256, as bankml) — shareable, reveals no content. */ | |
| function Commitment({ file, lines }: { file: string; lines: string[] }) { | |
| const [c, setC] = useState<{ records: number; merkle_root: string | null } | null>(null); | |
| useEffect(() => { | |
| let live = true; | |
| commitment(file, lines).then(r => live && setC(r)).catch(() => live && setC(null)); | |
| return () => { | |
| live = false; | |
| }; | |
| }, [file, lines]); | |
| if (!c) return null; | |
| return ( | |
| <footer className="uif-window-commit" title="Merkle root over the JSONL lines (rfc6962-sha256), the same commitment bankml computes"> | |
| {c.records} record{c.records === 1 ? '' : 's'} | |
| {c.merkle_root && ( | |
| <> | |
| {' · root '} | |
| <code data-uif-root={c.merkle_root}>{c.merkle_root.slice(0, 16)}…</code> | |
| <button type="button" className="uif-link" onClick={() => navigator.clipboard?.writeText(c.merkle_root!)}> | |
| copy | |
| </button> | |
| </> | |
| )} | |
| </footer> | |
| ); | |
| } | |
| /** A button that asks once more before doing something it cannot undo (no browser dialogs). */ | |
| function ConfirmButton({ label, onConfirm }: { label: string; onConfirm(): void }) { | |
| const [armed, setArmed] = useState(false); | |
| useEffect(() => { | |
| if (!armed) return; | |
| const t = setTimeout(() => setArmed(false), 3000); | |
| return () => clearTimeout(t); | |
| }, [armed]); | |
| return ( | |
| <button | |
| type="button" | |
| className={`uif-button is-quiet ${armed ? 'is-danger' : ''}`} | |
| onClick={() => { | |
| if (armed) { | |
| setArmed(false); | |
| onConfirm(); | |
| } else setArmed(true); | |
| }} | |
| > | |
| {armed ? `Really ${label.toLowerCase()}?` : label} | |
| </button> | |
| ); | |
| } | |
| function when(ts: number) { | |
| return new Date(ts * 1000).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); | |
| } | |
| function HistoryBody({ context }: { context: ContextApi }) { | |
| const [q, setQ] = useState(''); | |
| const listRef = useRef<HTMLOListElement>(null); | |
| const shown = useMemo(() => { | |
| const needle = q.trim().toLowerCase(); | |
| const all = context.history.map((h, i) => ({ h, i })); | |
| return needle ? all.filter(({ h }) => `${h.user}\n${h.assistant}\n${h.output ?? ''}`.toLowerCase().includes(needle)) : all; | |
| }, [context.history, q]); | |
| useEffect(() => { | |
| const el = listRef.current; | |
| if (el && !q) el.scrollTop = el.scrollHeight; | |
| }, [shown.length, q]); | |
| return ( | |
| <div className="uif-window-stack"> | |
| <div className="uif-window-row"> | |
| <input className="uif-input" value={q} onChange={e => setQ(e.target.value)} placeholder="Search .history…" aria-label="Search history" /> | |
| <ConfirmButton label="Clear" onConfirm={context.clearHistory} /> | |
| </div> | |
| {shown.length === 0 ? ( | |
| <p className="uif-window-empty">{q ? 'Nothing matches.' : 'No exchanges yet. Messages you send in chat are recorded here.'}</p> | |
| ) : ( | |
| <ol className="uif-history" ref={listRef}> | |
| {shown.map(({ h, i }) => ( | |
| <li key={i} className="uif-history-item"> | |
| <div className="uif-history-meta"> | |
| {when(h.ts)} | |
| {h.output && <span> · {h.output}</span>} | |
| {h.model && <span> · {h.model}</span>} | |
| {h.receipt !== undefined && ( | |
| <span className="uif-history-receipt" title={JSON.stringify(h.receipt, null, 2)}> | |
| {' '}· receipt | |
| </span> | |
| )} | |
| </div> | |
| <div className="uif-msg uif-msg-user">{h.user}</div> | |
| <div className="uif-msg uif-msg-assistant">{h.assistant}</div> | |
| </li> | |
| ))} | |
| </ol> | |
| )} | |
| <Commitment file=".history" lines={context.historyLines} /> | |
| </div> | |
| ); | |
| } | |
| function MemoryBody({ context }: { context: ContextApi }) { | |
| const [text, setText] = useState(''); | |
| const notes = context.memory.map((n, i) => ({ n, i })).reverse(); | |
| const add = async (e: React.FormEvent) => { | |
| e.preventDefault(); | |
| if (!text.trim()) return; | |
| await context.remember(text); | |
| setText(''); | |
| }; | |
| return ( | |
| <div className="uif-window-stack"> | |
| <form className="uif-window-row" onSubmit={add}> | |
| <input className="uif-input" value={text} onChange={e => setText(e.target.value)} placeholder="Add a note to remember…" aria-label="New memory note" /> | |
| <button type="submit" className="uif-button" disabled={!text.trim()}>Remember</button> | |
| </form> | |
| {notes.length === 0 ? ( | |
| <p className="uif-window-empty">No notes. Add one here, or press ◈ on a reply to keep it.</p> | |
| ) : ( | |
| <ul className="uif-memory"> | |
| {notes.map(({ n, i }) => ( | |
| <li key={`${n.sha256}-${i}`} className="uif-memory-item"> | |
| <span className={`uif-memory-kind is-${n.source.kind}`} | |
| title={n.source.kind === 'delivery' ? 'how an answer was delivered: kept, never sent to the model' : n.source.kind === 'response' ? 'kept from a reply' : 'typed'}> | |
| {n.source.kind === 'delivery' ? '⏱' : n.source.kind === 'response' ? '◈' : '✎'} | |
| </span> | |
| <span className="uif-memory-text">{n.text}</span> | |
| <button type="button" className="uif-link" title="Forget this note" aria-label="Forget" onClick={() => context.forget(i)}> | |
| ✕ | |
| </button> | |
| </li> | |
| ))} | |
| </ul> | |
| )} | |
| <div className="uif-window-row is-end"> | |
| <span className="uif-window-hint">Notes (✎ ◈) are sent with every message, newest first, up to 2,400 characters; deliveries (⏱) are kept, never sent.</span> | |
| <ConfirmButton label="Clear" onConfirm={context.clearMemory} /> | |
| </div> | |
| <Commitment file=".memory" lines={context.memoryLines} /> | |
| </div> | |
| ); | |
| } | |
| function PromptBody({ context }: { context: ContextApi }) { | |
| const [preview, setPreview] = useState(false); | |
| const hasPersonaPrompt = !!context.persona?.system_prompt?.trim(); | |
| const composed = composeSystem({ prompt: context.prompt, persona: context.persona, source: context.promptSource, memory: context.memory }); | |
| return ( | |
| <div className="uif-window-stack"> | |
| <textarea | |
| className="uif-input uif-window-text" | |
| value={context.prompt} | |
| onChange={e => context.setPrompt(e.target.value)} | |
| placeholder="You are … (the system prompt sent with every message)" | |
| aria-label="System prompt" | |
| spellCheck | |
| /> | |
| <fieldset className="uif-window-choice"> | |
| <legend>When the persona has its own system prompt</legend> | |
| <label> | |
| <input type="radio" name="uif-prompt-source" checked={context.promptSource === 'persona'} onChange={() => context.setPromptSource('persona')} /> | |
| use the persona's{hasPersonaPrompt ? '' : ' (none set)'} | |
| </label> | |
| <label> | |
| <input type="radio" name="uif-prompt-source" checked={context.promptSource === 'prompt'} onChange={() => context.setPromptSource('prompt')} /> | |
| use this .prompt | |
| </label> | |
| </fieldset> | |
| <button type="button" className="uif-link is-left" onClick={() => setPreview(p => !p)} aria-expanded={preview}> | |
| {preview ? '▾' : '▸'} What the model receives ({composed.promptSource} | |
| {context.memory.length ? ' + memory' : ''}) | |
| </button> | |
| {preview && <pre className="uif-window-preview">{composed.system || '(empty: no system prompt)'}</pre>} | |
| </div> | |
| ); | |
| } | |
| function PersonaBody({ context }: { context: ContextApi }) { | |
| const [draft, setDraft] = useState(context.personaText); | |
| const [error, setError] = useState<string | null>(null); | |
| useEffect(() => setDraft(context.personaText), [context.personaText]); | |
| const p = context.persona; | |
| const dirty = draft !== context.personaText; | |
| const check = (text: string) => { | |
| setDraft(text); | |
| if (!text.trim()) return setError(null); | |
| try { | |
| parsePersona(text); | |
| setError(null); | |
| } catch (err) { | |
| setError((err as Error).message); | |
| } | |
| }; | |
| const apply = () => { | |
| try { | |
| context.setPersonaText(draft); | |
| setError(null); | |
| } catch (err) { | |
| setError((err as Error).message); | |
| } | |
| }; | |
| return ( | |
| <div className="uif-window-stack"> | |
| {p ? ( | |
| <div className="uif-persona-card"> | |
| <strong>{p.name ?? p.persona ?? 'Unnamed persona'}</strong> | |
| {p.role && <span className="uif-persona-role">{p.role}</span>} | |
| {p.description && <p>{p.description}</p>} | |
| {personaLines(p).map(l => ( | |
| <p key={l} className="uif-persona-line">{l}</p> | |
| ))} | |
| <p className="uif-window-hint">{p.system_prompt ? 'Has its own system prompt.' : 'No system prompt of its own; the .prompt is used.'}</p> | |
| </div> | |
| ) : ( | |
| <p className="uif-window-empty">No persona. Import a .persona file (mindX v1 or boardroom) or paste its JSON below.</p> | |
| )} | |
| <textarea | |
| className={`uif-input uif-window-text is-code ${error ? 'is-invalid' : ''}`} | |
| value={draft} | |
| onChange={e => check(e.target.value)} | |
| placeholder='{ "name": "Savante", "system_prompt": "You are …" }' | |
| aria-label="Persona JSON" | |
| aria-invalid={!!error} | |
| spellCheck={false} | |
| /> | |
| {error && <p className="uif-window-note is-error">{error}</p>} | |
| <div className="uif-window-row is-end"> | |
| <button type="button" className="uif-button is-quiet" disabled={!dirty} onClick={() => check(context.personaText)}> | |
| Revert | |
| </button> | |
| <button type="button" className="uif-button" disabled={!dirty || !!error} onClick={apply}> | |
| {draft.trim() ? 'Apply' : 'Clear persona'} | |
| </button> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| function ModelBody({ context }: { context: ContextApi }) { | |
| const m = context.model; | |
| const set = (key: string, value: string | boolean) => context.setModelText(setModelField(context.modelText, key, value)); | |
| return ( | |
| <div className="uif-window-stack"> | |
| <div className="uif-model-grid"> | |
| <label> | |
| logical_model | |
| <input className="uif-input" value={String(m.logical_model ?? '')} onChange={e => set('logical_model', e.target.value || 'auto')} /> | |
| </label> | |
| <label> | |
| task_class | |
| <select className="uif-input" value={String(m.task_class ?? 'general')} onChange={e => set('task_class', e.target.value)}> | |
| {TASK_CLASSES.map(t => ( | |
| <option key={t}>{t}</option> | |
| ))} | |
| </select> | |
| </label> | |
| <label> | |
| model_facet | |
| <input className="uif-input" value={String(m.model_facet ?? '')} onChange={e => set('model_facet', e.target.value)} /> | |
| </label> | |
| <label className="uif-model-pin"> | |
| <input type="checkbox" checked={m.pinned === true} onChange={e => set('pinned', e.target.checked)} /> | |
| pinned | |
| </label> | |
| </div> | |
| <p className="uif-window-hint"> | |
| {context.modelError ? <span className="is-error">{context.modelError}</span> : <>Messages go out as <b>{modelLabel(m)}</b>. Your onSend reads this from meta.context.model.</>} | |
| </p> | |
| <textarea | |
| className={`uif-input uif-window-text is-code ${context.modelError ? 'is-invalid' : ''}`} | |
| value={context.modelText} | |
| onChange={e => context.setModelText(e.target.value)} | |
| aria-label=".model YAML" | |
| spellCheck={false} | |
| /> | |
| </div> | |
| ); | |
| } | |