forked from bots-garden/ori
| ✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS | 1 | /** |
| 2 | * ChatThread renders the conversation: user prompts, streamed agent answers | |
| 3 | * (markdown) and inline errors, auto-scrolled to the latest entry. | |
| 4 | * | |
| 5 | * @example | |
| 6 | * <ChatThread thread={[{ kind: "user", text: "hi" }]} turnActive={false} /> | |
| 7 | */ | |
| 8 | ||
| 9 | import { useEffect, useRef } from "react"; | |
| 10 | import type { ThreadItem } from "../reducer"; | |
| 11 | import { Markdown } from "./Markdown"; | |
| 12 | import { ToolCallCard } from "./ToolCallCard"; | |
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 13 | import { WorkingIndicator } from "./WorkingIndicator"; |
| ✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS | 14 | |
| 15 | interface ChatThreadProps { | |
| 16 | thread: ThreadItem[]; | |
| 17 | turnActive: boolean; | |
| 18 | } | |
| 19 | ||
| 20 | export function ChatThread({ thread, turnActive }: ChatThreadProps) { | |
| 21 | const endRef = useRef<HTMLDivElement>(null); | |
| 22 | ||
| 23 | // biome-ignore lint/correctness/useExhaustiveDependencies: thread and turnActive intentionally retrigger the scroll-to-bottom on every conversation change. | |
| 24 | useEffect(() => { | |
| 25 | // Optional call: test DOMs (jsdom) do not implement scrollIntoView. | |
| 26 | endRef.current?.scrollIntoView?.({ behavior: "smooth" }); | |
| 27 | }, [thread, turnActive]); | |
| 28 | ||
| 29 | return ( | |
| 30 | <section className="thread" aria-label="conversation"> | |
| 31 | {thread.length === 0 && ( | |
| 32 | <p className="thread-empty"> | |
| 33 | Send a prompt to start working with the agent. | |
| 34 | </p> | |
| 35 | )} | |
| 36 | {thread.map((item, index) => ( | |
| 37 | // biome-ignore lint/suspicious/noArrayIndexKey: the thread is append-only (never reordered or spliced), so the index is a stable identity. | |
| 38 | <ThreadEntry key={index} item={item} /> | |
| 39 | ))} | |
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 40 | {turnActive && <WorkingIndicator />} |
| ✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS | 41 | <div ref={endRef} /> |
| 42 | </section> | |
| 43 | ); | |
| 44 | } | |
| 45 | ||
| 46 | function ThreadEntry({ item }: { item: ThreadItem }) { | |
| 47 | switch (item.kind) { | |
| 48 | case "user": | |
| 49 | return <div className="message message-user">{item.text}</div>; | |
| 50 | case "agent": | |
| 51 | return ( | |
| 52 | <div className="message message-agent"> | |
| 53 | <Markdown text={item.text} /> | |
| 54 | </div> | |
| 55 | ); | |
| 56 | case "thought": | |
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 57 | return <ThoughtEntry text={item.text} closed={item.closed} />; |
| ✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS | 58 | case "tool": |
| 59 | return <ToolCallCard call={item.call} />; | |
| 60 | case "error": | |
| 61 | return ( | |
| 62 | <div className="message message-error" role="alert"> | |
| 63 | {item.text} | |
| 64 | </div> | |
| 65 | ); | |
| 66 | } | |
| 67 | } | |
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 68 | |
| 69 | /** | |
| 70 | * ThoughtEntry renders one thinking block: while the thought streams its | |
| 71 | * content stays visible; once the turn ends it collapses into a reopenable | |
| 72 | * summary. | |
| 73 | */ | |
| 74 | function ThoughtEntry({ text, closed }: { text: string; closed: boolean }) { | |
| 75 | if (!closed) { | |
| 76 | return ( | |
| 77 | <div className="thought thought-live"> | |
| 78 | <p className="thought-summary">💭 Thinking…</p> | |
| 79 | <div className="thought-body"> | |
| 80 | <Markdown text={text} /> | |
| 81 | </div> | |
| 82 | </div> | |
| 83 | ); | |
| 84 | } | |
| 85 | return ( | |
| 86 | <details className="thought"> | |
| 87 | <summary className="thought-summary">💭 Thought for a moment</summary> | |
| 88 | <div className="thought-body"> | |
| 89 | <Markdown text={text} /> | |
| 90 | </div> | |
| 91 | </details> | |
| 92 | ); | |
| 93 | } |