| 1 | import "./SubagentDetails.css"; |
| 2 | |
| 3 | import { Markdown } from "./Markdown"; |
| 4 | import { ReasoningSummary } from "./ReasoningSummary"; |
| 5 | import { useT } from "../lib/i18n"; |
| 6 | import type { SubagentProgress } from "../lib/useController"; |
| 7 | |
| 8 | type SubagentPreviewProps = { |
| 9 | progress: SubagentProgress; |
| 10 | showReasoning: boolean; |
| 11 | reasoningOpen: boolean; |
| 12 | onReasoningToggle: () => void; |
| 13 | onReasoningOpen: () => void; |
| 14 | }; |
| 15 | |
| 16 | export function SubagentPreview({ |
| 17 | progress, |
| 18 | showReasoning, |
| 19 | reasoningOpen, |
| 20 | onReasoningToggle, |
| 21 | onReasoningOpen, |
| 22 | }: SubagentPreviewProps) { |
| 23 | const t = useT(); |
| 24 | return ( |
| 25 | <div className="tool__subagent-preview"> |
| 26 | {progress.reasoning && showReasoning && ( |
| 27 | <div className="tool__subagent-preview-section"> |
| 28 | <button |
| 29 | type="button" |
| 30 | className="tool__subagent-preview-label tool__subagent-preview-label--toggle" |
| 31 | onClick={onReasoningToggle} |
| 32 | aria-expanded={reasoningOpen} |
| 33 | > |
| 34 | {t("subagent.preview.reasoning")} |
| 35 | </button> |
| 36 | {reasoningOpen ? ( |
| 37 | <div className="tool__subagent-preview-text tool__subagent-preview-text--markdown"> |
| 38 | <Markdown text={progress.reasoning} streaming={progress.phase === "reasoning"} /> |
| 39 | </div> |
| 40 | ) : ( |
| 41 | <ReasoningSummary |
| 42 | text={progress.reasoning} |
| 43 | streaming={progress.phase === "reasoning"} |
| 44 | onOpen={onReasoningOpen} |
| 45 | /> |
| 46 | )} |
| 47 | </div> |
| 48 | )} |
| 49 | {progress.text && ( |
| 50 | <div className="tool__subagent-preview-section"> |
| 51 | <div className="tool__subagent-preview-label">{t("subagent.preview.text")}</div> |
| 52 | <pre className="tool__subagent-preview-text">{progress.text}</pre> |
| 53 | </div> |
| 54 | )} |
| 55 | {progress.notice && ( |
| 56 | <div className="tool__subagent-preview-section"> |
| 57 | <div className="tool__subagent-preview-label">{t("subagent.preview.notice")}</div> |
| 58 | <pre className="tool__subagent-preview-text">{progress.notice}</pre> |
| 59 | </div> |
| 60 | )} |
| 61 | {progress.truncated && <div className="tool__note">{t("subagent.preview.truncated")}</div>} |
| 62 | </div> |
| 63 | ); |
| 64 | } |
| 65 |