| 1 | // Adapted from DeepSeek Harness c291e7961a, ui-chat/TurnProcessNodeView.tsx (MIT). |
| 2 | import { memo } from "react"; |
| 3 | import { ChevronDown } from "lucide-react"; |
| 4 | import type { ChatNode } from "../../lib/chatViewSource"; |
| 5 | import { useT } from "../../lib/i18n"; |
| 6 | import css from "./TurnProcessNodeView.styles"; |
| 7 | |
| 8 | export const TurnProcessNodeView = memo(function TurnProcessNodeView({ node, onToggle }: { |
| 9 | node: Extract<ChatNode, { kind: "process" }>; onToggle: () => void; |
| 10 | }) { |
| 11 | const t = useT(); |
| 12 | if (!node.foldable) return null; |
| 13 | const labels: string[] = []; |
| 14 | if (node.toolCallCount) labels.push(t("chat.process.tools", { count: node.toolCallCount })); |
| 15 | if (node.messageCount) labels.push(t("chat.process.messages", { count: node.messageCount })); |
| 16 | if (node.subagentCount) labels.push(t("chat.process.subagents", { count: node.subagentCount })); |
| 17 | if (node.failureCount) labels.push(t("chat.process.failures", { count: node.failureCount })); |
| 18 | return <button type="button" className={`${css.root} chat-process`} data-open={!node.collapsed || undefined} |
| 19 | data-turn-process={node.turnKey} aria-expanded={!node.collapsed} |
| 20 | onClick={event => { event.currentTarget.focus({ preventScroll: true }); onToggle(); }}> |
| 21 | <span className={css.label}>{labels.length ? labels.join(" · ") : t("chat.process")}</span> |
| 22 | <ChevronDown className={css.chevron} /> |
| 23 | </button>; |
| 24 | }); |
| 25 |