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 | * Markdown renders agent text (GitHub-flavoured: tables, task lists, ...). | |
| 3 | * Kept as the single markdown entry point so styling and plugins stay | |
| 4 | * consistent everywhere agent content appears. | |
| 5 | * | |
| 6 | * @example | |
| 7 | * <Markdown text="**bold** and `code`" /> | |
| 8 | */ | |
| 9 | ||
| 10 | import ReactMarkdown from "react-markdown"; | |
| 11 | import remarkGfm from "remark-gfm"; | |
| Add copy-paste functionality for code blocks and completion widgets | 12 | import type { Components } from "react-markdown"; |
| 13 | 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 | 14 | |
| 15 | export function Markdown({ text }: { text: string }) { | |
| Add copy-paste functionality for code blocks and completion widgets | 16 | const components: Components = { |
| 17 | pre: ({ children, ...props }) => { | |
| 18 | // Extract code content from pre > code structure | |
| ✨ Switch the ACP adapter to @agentclientprotocol/claude-agent-acp (template 0.0.2) | 19 | // react-markdown hands `pre` its rendered <code> child; type its props so |
| 20 | // the string body can be extracted for the copy button. | |
| 21 | const codeElement = children as React.ReactElement<{ | |
| 22 | children?: unknown; | |
| 23 | }>; | |
| Add copy-paste functionality for code blocks and completion widgets | 24 | const codeContent = |
| 25 | codeElement?.props?.children && | |
| 26 | typeof codeElement.props.children === "string" | |
| 27 | ? codeElement.props.children | |
| 28 | : ""; | |
| 29 | ||
| 30 | return ( | |
| 31 | <div className="code-block-wrapper"> | |
| ✨ Switch the ACP adapter to @agentclientprotocol/claude-agent-acp (template 0.0.2) | 32 | {codeContent && ( |
| 33 | <CopyButton content={codeContent} label="Copy code" /> | |
| 34 | )} | |
| Add copy-paste functionality for code blocks and completion widgets | 35 | <pre {...props}>{children}</pre> |
| 36 | </div> | |
| 37 | ); | |
| 38 | }, | |
| 39 | }; | |
| 40 | ||
| ✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS | 41 | return ( |
| 42 | <div className="markdown"> | |
| Add copy-paste functionality for code blocks and completion widgets | 43 | <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}> |
| 44 | {text} | |
| 45 | </ReactMarkdown> | |
| ✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS | 46 | </div> |
| 47 | ); | |
| 48 | } |