{a.does.charAt(0).toUpperCase() + a.does.slice(1)}.
+{a.wakes}
+{t.name}
+ {t.does}
+ + No tools. It reads the lead and the policy wordings, and writes its answer + back into the workflow — nothing else. +
+ )} ++ Every step it takes is recorded against the lead, with what it wrote and why. + It cannot confirm a premium, issue a policy or telephone anybody. +
+{p.slice(1, -1)}
+ return p
+ })
+}
+
+/** `| a | b |` -> ['a','b']; a separator row (`|---|`) has no content. */
+const cells = (line) => line.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim())
+const isRow = (line) => /^\s*\|.*\|\s*$/.test(line)
+const isRule = (line) => /^\s*\|[\s:|-]+\|\s*$/.test(line)
+
+function Rich({ text }) {
+ const lines = String(text || '').split('\n')
+ const out = []
+ let list = null
+ let rows = null
+
+ const flush = () => {
+ if (rows) {
+ const [head, ...body] = rows
+ out.push(
+ | {inline(c, `h${i}`)} | )}
|---|
| {inline(c, `${ri}-${ci}`)} | )}
{inline(line, i)}
) + } + }) + flush() + return <>{out} +} + +/** The tools a turn ran, as chips — the desk's working, not just its answer. */ +function toolsOf(row) { + if (!row) return [] + const raw = row.metadata?.tool_calls ?? row.metadata?.api_calls ?? row.metadata?.tools + const list = Array.isArray(raw) ? raw : [] + return list.map((t) => (typeof t === 'string' ? t : t?.name || t?.tool_name)).filter(Boolean) +} + +export default function AskDesk({ onClose }) { + const { client } = useZino() + const [sessionId, setSessionId] = useState(null) + const [rows, setRows] = useState([]) + const [text, setText] = useState('') + const [asking, setAsking] = useState(false) + const [err, setErr] = useState(null) + const feedRef = useRef(null) + const inputRef = useRef(null) + + // One conversation per opening of the panel. Reusing the last one would make + // the desk answer this week's question against last week's context, and the + // transcript stays on the platform either way. + useEffect(() => { + let dead = false + client.deskStartSession(SUPPORT_AGENT_ID) + .then((s) => { if (!dead) setSessionId(s?.id ?? s?.data?.id ?? null) }) + .catch((e) => { if (!dead) setErr(e) }) + return () => { dead = true } + }, [client]) + + useEffect(() => { + const el = feedRef.current + if (el) el.scrollTop = el.scrollHeight + }, [rows, asking]) + + useEffect(() => { inputRef.current?.focus() }, [sessionId]) + + const ask = useCallback(async (question) => { + const q = String(question ?? '').trim() + if (!q || !sessionId || asking) return + setErr(null) + setText('') + // The question shows immediately; the answer replaces the waiting line. + setRows((prev) => [...prev, { key: 'q' + Date.now(), role: 'user', content: q }]) + setAsking(true) + try { + const res = await client.deskAsk(sessionId, q) + const answer = res?.agent_message + const called = toolsOf(res?.call_api_message) + setRows((prev) => [...prev, { + key: 'a' + (answer?.id ?? Date.now()), + role: 'agent', + content: answer?.content ?? 'The desk answered with nothing at all.', + tools: called, + }]) + } catch (e) { + setErr(e) + } finally { + setAsking(false) + inputRef.current?.focus() + } + }, [client, sessionId, asking]) + + return ( +