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