suzmii
a0f6b7c67d
思考展开复用安全Markdown渲染，折叠显示浅色单行纯文本预览与右侧箭头。 共享过程摘要组件，执行过程按真实操作数显示统计并保留各组独立计时。 工具、整轮、生成任务和策划耗时统一为中文时分秒格式。 补齐格式与Markdown回归、更新已有界面断言并验证窄屏键盘操作。
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import './AgentProcessSummary.css';
|
|
|
|
import type { ReactNode } from 'react';
|
|
|
|
/**
|
|
* 过程区单行摘要的**纯展示**骨架：`icon + 预览文字 + 右对齐 meta + chevron`。
|
|
*
|
|
* 它只负责视觉，不含状态、不含业务规则，也不渲染任何交互元素：宿主决定外层是可点的
|
|
* `button`（工具组）还是 `<details><summary>`（思考过程 / 外层执行过程），并把展开态交给宿主。
|
|
* 视觉上固定一行：预览过长省略，chevron 永远贴右，展开时由 `.agent-process-summary` 的
|
|
* `[aria-expanded='true']` / `details[open]` 规则旋转。
|
|
*/
|
|
export function AgentProcessSummary({
|
|
icon,
|
|
preview,
|
|
meta,
|
|
chevron,
|
|
}: {
|
|
/** 行首图标（通常由宿主传入 lucide 图标）。 */
|
|
icon?: ReactNode;
|
|
/** 单行预览文字；调用方负责先把它压成一行（Markdown 预览模型）。 */
|
|
preview: string;
|
|
/** 右侧补充信息（耗时 / 状态），可为空。 */
|
|
meta?: ReactNode;
|
|
/** 右端 chevron。 */
|
|
chevron?: ReactNode;
|
|
}) {
|
|
return (
|
|
<span className="agent-process-summary" data-agent-process-summary="">
|
|
{icon ? (
|
|
<span className="agent-process-summary-icon" aria-hidden="true">
|
|
{icon}
|
|
</span>
|
|
) : null}
|
|
<span className="agent-process-summary-preview">
|
|
{preview}
|
|
{meta ? (
|
|
<span className="agent-process-summary-meta">{meta}</span>
|
|
) : null}
|
|
</span>
|
|
{chevron ? (
|
|
<span className="agent-process-summary-chevron" aria-hidden="true">
|
|
{chevron}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
);
|
|
}
|