@springbrand/message-panel 0.1.2 → 0.1.3-alpha.1

package/src/parts/index.tsx

@@ -0,0 +1,1149 @@
+import {
+  AlertCircleIcon,
+  ArrowRightIcon,
+  AtomIcon,
+  BarChart3Icon,
+  BellIcon,
+  BlocksIcon,
+  BotIcon,
+  BrainCircuitIcon,
+  CheckCircle2Icon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CircleDotIcon,
+  CircleIcon,
+  Code2Icon,
+  DownloadIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  FileAudioIcon,
+  FileCodeIcon,
+  FileImageIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  GlobeIcon,
+  ImageIcon,
+  Loader2Icon,
+  ListTodoIcon,
+  Maximize2Icon,
+  NewspaperIcon,
+  OrbitIcon,
+  RefreshCcwIcon,
+  SparklesIcon,
+  TerminalIcon,
+  TriangleAlertIcon,
+  WrenchIcon,
+  XIcon,
+} from "lucide-react";
+import {
+  useMemo,
+  useState,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import type {
+  MessagePanelActions,
+  PartRendererContext,
+  RichPartKind,
+  AIToolPart,
+} from "../contracts";
+import { cn } from "../internal/cn";
+import { MessageResponse } from "../message";
+import { ThinkingIndicator } from "../status";
+import { resolvePartKind, toolNameOfPart } from "./kind";
+import {
+  planStepsOfPart,
+  type PlanStep,
+  type PlanStepStatus,
+} from "./plan";
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+  Plan,
+  PlanContent,
+  PlanHeader,
+  PlanTitle,
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from "./primitives";
+
+export { resolvePartKind, toolNameOfPart } from "./kind";
+export {
+  planStepsOfPart,
+  projectLatestPlan,
+  type PlanStep,
+  type PlanStepStatus,
+} from "./plan";
+
+export interface TextPartProps {
+  text: string;
+  streaming?: boolean;
+}
+
+export const OUT_OF_BAND_PREFIX = "[Delivered to the user out of band]";
+
+export function stripNoticePrefix(text: string): string {
+  const trimmed = text.trimStart();
+  return trimmed.startsWith(OUT_OF_BAND_PREFIX)
+    ? trimmed.slice(OUT_OF_BAND_PREFIX.length).trim()
+    : text.trim();
+}
+
+export function TextPart({ text, streaming = false }: TextPartProps) {
+  if (!text.trim()) return null;
+  if (text.trimStart().startsWith(OUT_OF_BAND_PREFIX)) {
+    return <div className="sb-notice-line">{stripNoticePrefix(text)}</div>;
+  }
+  return (
+    <div data-part-type="text">
+      <MessageResponse streaming={streaming}>{text}</MessageResponse>
+    </div>
+  );
+}
+
+export interface ReasoningPartProps {
+  text: string;
+  label?: string;
+  streaming?: boolean;
+  duration?: number;
+}
+
+export function ReasoningPart({
+  text,
+  label,
+  streaming = false,
+  duration,
+}: ReasoningPartProps) {
+  if (!text.trim()) return null;
+  return (
+    <div data-part-type="reasoning">
+      <Reasoning isStreaming={streaming} defaultOpen={streaming} duration={duration}>
+        <ReasoningTrigger>{label}</ReasoningTrigger>
+        <ReasoningContent>{text}</ReasoningContent>
+      </Reasoning>
+    </div>
+  );
+}
+
+type ToolIcon = "web" | "news" | "code" | "image" | "file" | "terminal";
+const toolIcons = {
+  web: GlobeIcon,
+  news: NewspaperIcon,
+  code: Code2Icon,
+  image: ImageIcon,
+  file: FileTextIcon,
+  terminal: TerminalIcon,
+} as const;
+
+function humanizeToolName(name: string): string {
+  return name
+    .replace(/^tool-/, "")
+    .replace(/[_-]+/g, " ")
+    .replace(/\b\w/g, (character) => character.toUpperCase());
+}
+
+export interface ToolPartProps {
+  name: string;
+  state: AIToolPart["state"] | "interrupted";
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  icon?: ToolIcon;
+  label?: string;
+  meta?: string;
+  results?: Array<{ title: string; domain: string }>;
+  command?: string;
+  isActive?: boolean;
+  activityId?: string;
+  onNavigate?: (target: string) => void;
+}
+
+export type ToolPart = AIToolPart;
+
+export function ToolPart({
+  name,
+  state,
+  input,
+  output,
+  errorText,
+  icon,
+  label,
+  meta,
+  results,
+  command,
+  activityId,
+  onNavigate,
+}: ToolPartProps) {
+  const Icon = icon ? toolIcons[icon] : WrenchIcon;
+  const [open, setOpen] = useState(false);
+  const title = label ?? humanizeToolName(name);
+  const running = state === "input-streaming" || state === "input-available";
+  const hasDetails =
+    input != null ||
+    output != null ||
+    Boolean(errorText || command || results?.length);
+
+  if (state === "interrupted") {
+    return (
+      <div className="sb-tool-failed" data-part-type="tool">
+        <TriangleAlertIcon size={16} />
+        <span>Interrupted</span>
+        <small>{title}</small>
+      </div>
+    );
+  }
+
+  if (state === "output-error") {
+    return (
+      <div className="sb-tool-failed" data-part-type="tool">
+        <TriangleAlertIcon size={16} />
+        <span>Failed</span>
+        <small>{errorText || title}</small>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sb-tool-line" data-part-type="tool">
+      <button
+        type="button"
+        className="sb-tool-line__trigger"
+        aria-expanded={open}
+        onClick={() => {
+          if (hasDetails) setOpen((current) => !current);
+          if (activityId) onNavigate?.(activityId);
+        }}
+      >
+        <Icon size={16} />
+        <span>{running ? `${title}…` : title}</span>
+        {meta && <small>{meta}</small>}
+        {running ? (
+          <Loader2Icon size={14} className="sb-spin" />
+        ) : (
+          hasDetails && (
+            <ChevronRightIcon
+              size={15}
+              className={cn("sb-tool-line__chevron", open && "is-open")}
+            />
+          )
+        )}
+      </button>
+      {open && (
+        <div className="sb-tool-line__details">
+          {results?.length ? (
+            <ul className="sb-tool-results">
+              {results.map((result, index) => (
+                <li key={`${result.domain}:${result.title}`}>
+                  <i data-index={index % 2} />
+                  <span>{result.title}</span>
+                  <small>{result.domain}</small>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+          {command && (
+            <div className="sb-terminal">
+              <code>$ {command}</code>
+              {typeof output === "string" && <pre>{output}</pre>}
+            </div>
+          )}
+          {!command && input != null && (
+            <pre>{JSON.stringify(input, null, 2)}</pre>
+          )}
+          {!command && output != null && (
+            <pre>
+              {typeof output === "string"
+                ? output
+                : JSON.stringify(output, null, 2)}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ErrorPart({
+  title = "Error",
+  body,
+  onRetry,
+}: {
+  title?: string;
+  body: string;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="sb-error-part" data-part-type="error" role="alert">
+      <AlertCircleIcon size={18} />
+      <div>
+        <strong>{title}</strong>
+        <p>{body}</p>
+        {onRetry && (
+          <button type="button" className="sb-link-button" onClick={onRetry}>
+            <RefreshCcwIcon size={14} />
+            重试
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ImagePart({
+  src,
+  alt,
+  onPreview,
+}: {
+  src: string;
+  alt: string;
+  onPreview?: () => void;
+}) {
+  return (
+    <figure className="sb-image-part" data-part-type="image">
+      <button type="button" onClick={onPreview} aria-label={`预览图片：${alt}`}>
+        <img src={src} alt={alt} />
+        {onPreview && <Maximize2Icon size={17} />}
+      </button>
+      <figcaption>{alt}</figcaption>
+    </figure>
+  );
+}
+
+export interface ChartBar {
+  label: string;
+  value: number;
+}
+
+export function ChartPart({
+  title,
+  unit,
+  bars,
+  expandable,
+  onPreview,
+}: {
+  title: string;
+  unit?: string;
+  bars: readonly ChartBar[];
+  expandable?: boolean;
+  onPreview?: () => void;
+}) {
+  const max = Math.max(...bars.map((bar) => bar.value), 1);
+  return (
+    <section className="sb-chart" data-part-type="chart" aria-label={title}>
+      <header>
+        <span>
+          <BarChart3Icon size={17} />
+          <strong>{title}</strong>
+        </span>
+        {expandable && (
+          <button type="button" onClick={onPreview} aria-label="展开图表">
+            <Maximize2Icon size={16} />
+          </button>
+        )}
+      </header>
+      <div className="sb-chart__plot">
+        {bars.map((bar) => (
+          <div key={bar.label} className="sb-chart__bar-group">
+            <span>{bar.value}{unit}</span>
+            <i style={{ "--sb-bar-height": `${(bar.value / max) * 100}%` } as CSSProperties} />
+            <small>{bar.label}</small>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function AgentCardPart({
+  title,
+  agentName,
+  agentDesc,
+  onNavigate,
+}: {
+  title: string;
+  agentName: string;
+  agentDesc: string;
+  onNavigate?: () => void;
+}) {
+  return (
+    <section className="sb-agent-card" data-part-type="agent_card">
+      <small>{title}</small>
+      <div>
+        <span className="sb-agent-card__icon"><BotIcon size={20} /></span>
+        <div>
+          <strong>{agentName}</strong>
+          <p>{agentDesc}</p>
+        </div>
+        {onNavigate && (
+          <button type="button" onClick={onNavigate} aria-label={`打开 ${agentName}`}>
+            <ArrowRightIcon size={17} />
+          </button>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function StepStatusIcon({
+  status,
+  animated = false,
+}: {
+  status: PlanStepStatus;
+  animated?: boolean;
+}) {
+  if (status === "done") return <CheckCircle2Icon size={16} data-tone="success" />;
+  if (status === "in_progress") {
+    return animated ? (
+      <Loader2Icon size={16} className="sb-spin" data-tone="active" />
+    ) : (
+      <CircleDotIcon size={16} data-tone="muted" />
+    );
+  }
+  return <CircleIcon size={16} data-tone="muted" />;
+}
+
+export function PlanPart({
+  title,
+  steps,
+  streaming = false,
+}: {
+  title: string;
+  steps: readonly PlanStep[];
+  streaming?: boolean;
+}) {
+  const done = steps.filter((step) => step.status === "done").length;
+  const allDone = steps.length > 0 && done === steps.length;
+  const animated = streaming && !allDone;
+  return (
+    <Plan
+      className="sb-plan-card"
+      data-part-type="plan"
+      isStreaming={animated}
+    >
+      <PlanHeader>
+        <div className="sb-plan__heading">
+          <ListTodoIcon size={18} />
+          <PlanTitle>{title}</PlanTitle>
+        </div>
+        {steps.length > 0 && (
+          <span
+            className="sb-plan__badge"
+            data-state={allDone ? "done" : animated ? "running" : "paused"}
+          >
+            {allDone && <CheckCircle2Icon size={13} />}
+            {allDone
+              ? "Done"
+              : `${animated ? "Running · " : ""}${done}/${steps.length}`}
+          </span>
+        )}
+      </PlanHeader>
+      <PlanContent>
+        {steps.length > 0 ? (
+          <ol className="sb-plan__steps">
+            {steps.map((step, index) => {
+              const status =
+                step.status ??
+                (animated && index === done ? "in_progress" : "pending");
+              return (
+                <li key={`${index}:${step.text}`} data-status={status}>
+                  <StepStatusIcon
+                    status={status}
+                    animated={animated && status === "in_progress"}
+                  />
+                  <span>{step.text}</span>
+                </li>
+              );
+            })}
+          </ol>
+        ) : animated ? (
+          <div className="sb-plan__skeleton" role="status" aria-label="正在生成计划">
+            {[72, 56, 40].map((width) => (
+              <span key={width}>
+                <i />
+                <b style={{ width: `${width}%` }} />
+              </span>
+            ))}
+          </div>
+        ) : (
+          <p className="sb-plan__empty">(空计划)</p>
+        )}
+      </PlanContent>
+    </Plan>
+  );
+}
+
+export function SchedulePart({
+  title,
+  cadence,
+  nextRun,
+  scheduled = false,
+  onSchedule,
+}: {
+  title: string;
+  cadence: string;
+  nextRun: string;
+  scheduled?: boolean;
+  onSchedule?: () => void;
+}) {
+  return (
+    <section className="sb-schedule" data-part-type="schedule">
+      <BellIcon size={18} />
+      <div>
+        <strong>{title}</strong>
+        <p>{cadence}</p>
+        <small>{nextRun}</small>
+      </div>
+      <button type="button" className="sb-button" onClick={onSchedule} disabled={scheduled}>
+        {scheduled ? "已安排" : "安排"}
+      </button>
+    </section>
+  );
+}
+
+export interface ParallelTool {
+  icon?: Exclude<ToolIcon, "image" | "terminal">;
+  label: string;
+  meta?: string;
+  status?: "running" | "done" | "failed";
+  results?: Array<{ title: string; domain: string }>;
+}
+
+export function RunningRow({ tool }: { tool: ParallelTool }) {
+  const Icon = tool.icon ? toolIcons[tool.icon] : WrenchIcon;
+  return (
+    <div className="sb-running-row">
+      <Icon size={15} />
+      <span>{tool.label}</span>
+      <Loader2Icon size={14} className="sb-spin" />
+    </div>
+  );
+}
+
+export function CollapsedRow({ tool }: { tool: ParallelTool }) {
+  const Icon = tool.icon ? toolIcons[tool.icon] : WrenchIcon;
+  return (
+    <div className="sb-collapsed-row">
+      <Icon size={15} />
+      <span>{tool.label}</span>
+      <small>{tool.meta}</small>
+      {tool.status === "failed" ? <XIcon size={14} /> : <CheckIcon size={14} />}
+    </div>
+  );
+}
+
+export function ParallelPart({
+  label = "Parallel tasks",
+  tools,
+  isActive = true,
+}: {
+  label?: string;
+  tools: readonly ParallelTool[];
+  isActive?: boolean;
+}) {
+  const active = isActive && tools.some((tool) => tool.status === "running");
+  return (
+    <details className="sb-parallel" data-part-type="parallel" open={active}>
+      <summary>
+        <strong>{label}</strong>
+        <span>{tools.filter((tool) => tool.status === "done").length}/{tools.length}</span>
+        <ChevronDownIcon size={16} />
+      </summary>
+      <div>
+        {tools.map((tool, index) =>
+          tool.status === "running" && isActive ? (
+            <RunningRow key={`${index}:${tool.label}`} tool={tool} />
+          ) : (
+            <CollapsedRow
+              key={`${index}:${tool.label}`}
+              tool={
+                tool.status === "running"
+                  ? { ...tool, status: "failed" }
+                  : tool
+              }
+            />
+          ),
+        )}
+      </div>
+    </details>
+  );
+}
+
+export interface SubAgent {
+  name: string;
+  tint?: string;
+  summary: string;
+  status?: "running" | "done" | "failed";
+}
+
+const SUBAGENT_VISUALS = [
+  { icon: SparklesIcon, name: "sparkles", color: "#e59a45" },
+  { icon: AtomIcon, name: "atom", color: "#9b7bd1" },
+  { icon: BrainCircuitIcon, name: "brain", color: "#9b7bd1" },
+  { icon: OrbitIcon, name: "orbit", color: "#e59a45" },
+  { icon: BlocksIcon, name: "blocks", color: "#e59a45" },
+] as const;
+
+function subAgentVisual(name: string) {
+  let hash = 0;
+  for (const character of name) {
+    hash = (hash * 31 + (character.codePointAt(0) ?? 0)) >>> 0;
+  }
+  return SUBAGENT_VISUALS[hash % SUBAGENT_VISUALS.length] ?? SUBAGENT_VISUALS[0];
+}
+
+export function SubAgentsPart({
+  agents,
+  isActive = true,
+}: {
+  agents: readonly SubAgent[];
+  isActive?: boolean;
+}) {
+  return (
+    <div className="sb-subagents" data-part-type="subagents">
+      {agents.map((agent, index) => {
+        const visual = subAgentVisual(agent.name);
+        const AgentIcon = visual.icon;
+        return (
+          <article key={`${index}:${agent.name}`} data-state={agent.status ?? "done"}>
+            <span
+              data-subagent-icon={visual.name}
+              style={{ color: agent.tint ?? visual.color }}
+              aria-hidden="true"
+            >
+              <AgentIcon size={14} strokeWidth={2.25} />
+            </span>
+            <div>
+              <strong>{agent.name}</strong>
+              {agent.status === "running" && isActive ? (
+                <small><Loader2Icon size={12} className="sb-spin" />Running…</small>
+              ) : (
+                <p>{agent.summary || (agent.status === "running" ? "Interrupted" : "")}</p>
+              )}
+            </div>
+          </article>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ConfirmationPart({
+  id = "confirmation",
+  title,
+  body,
+  confirmLabel = "确认",
+  cancelLabel = "取消",
+  state,
+  onConfirm,
+}: {
+  id?: string;
+  title: string;
+  body?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  state?: "pending" | "confirmed" | "cancelled";
+  onConfirm?: (confirmed: boolean) => void | Promise<void>;
+}) {
+  const [internalState, setInternalState] = useState(state ?? "pending");
+  const resolvedState = state ?? internalState;
+  const decide = async (confirmed: boolean) => {
+    await onConfirm?.(confirmed);
+    if (state === undefined) setInternalState(confirmed ? "confirmed" : "cancelled");
+  };
+  return (
+    <div data-part-type="confirmation">
+      <Confirmation state={resolvedState} approval={{ id, approved: resolvedState === "pending" ? undefined : resolvedState === "confirmed" }}>
+        <ConfirmationTitle>
+          <AlertCircleIcon size={18} />
+          <span>
+            <ConfirmationRequest>{title}</ConfirmationRequest>
+            <ConfirmationAccepted>已确认：{title}</ConfirmationAccepted>
+            <ConfirmationRejected>已取消：{title}</ConfirmationRejected>
+          </span>
+        </ConfirmationTitle>
+        {body && <p>{body}</p>}
+        <ConfirmationActions>
+          <ConfirmationAction className="sb-button--secondary" onClick={() => void decide(false)}>
+            {cancelLabel}
+          </ConfirmationAction>
+          <ConfirmationAction onClick={() => void decide(true)}>
+            {confirmLabel}
+          </ConfirmationAction>
+        </ConfirmationActions>
+      </Confirmation>
+    </div>
+  );
+}
+
+function ToolApprovalPresentation({
+  children,
+  toolName,
+  state,
+  context,
+}: {
+  children: ReactNode;
+  toolName: string;
+  state: AIToolPart["state"];
+  context: PartRendererContext;
+}) {
+  const approval = context.approval;
+  if (!approval) return <>{children}</>;
+  return (
+    <div className="sb-tool-stack">
+      {children}
+      <Confirmation approval={approval} state={state}>
+        <ConfirmationTitle>
+          <ConfirmationRequest>
+            <strong>{humanizeToolName(toolName)}</strong> 请求执行，需要你的批准。
+          </ConfirmationRequest>
+          <ConfirmationAccepted>
+            已批准 {humanizeToolName(toolName)}，继续执行。
+          </ConfirmationAccepted>
+          <ConfirmationRejected>
+            已拒绝 {humanizeToolName(toolName)}。
+          </ConfirmationRejected>
+        </ConfirmationTitle>
+        <ConfirmationActions>
+          <ConfirmationAction
+            className="sb-button--secondary"
+            onClick={() => void context.actions.onApprove?.(approval.id, "deny")}
+          >
+            拒绝
+          </ConfirmationAction>
+          <ConfirmationAction
+            className="sb-button--secondary"
+            onClick={() => void context.actions.onApprove?.(approval.id, "allow_once")}
+          >
+            仅本次允许
+          </ConfirmationAction>
+          <ConfirmationAction
+            onClick={() => void context.actions.onApprove?.(approval.id, "allow_level")}
+          >
+            允许该档位
+          </ConfirmationAction>
+        </ConfirmationActions>
+      </Confirmation>
+    </div>
+  );
+}
+
+export type FileKind = "doc" | "image" | "html" | "audio" | "csv" | "code";
+const fileIcons = {
+  doc: FileTextIcon,
+  image: FileImageIcon,
+  html: Code2Icon,
+  audio: FileAudioIcon,
+  csv: FileSpreadsheetIcon,
+  code: FileCodeIcon,
+} as const;
+
+export function FilePart({
+  name,
+  kind = "doc",
+  note,
+  url,
+  artifact,
+  onPreview,
+  onDownload,
+}: {
+  name: string;
+  kind?: FileKind;
+  note?: string;
+  url?: string;
+  artifact?: unknown;
+  onPreview?: (artifact: unknown) => void;
+  onDownload?: (artifact: unknown) => void;
+}) {
+  const Icon = fileIcons[kind];
+  const payload = artifact ?? { name, kind, note, url };
+  return (
+    <div className="sb-file-part" data-part-type="file">
+      <span><Icon size={19} /></span>
+      <div>
+        <strong>{name}</strong>
+        {note && <small>{note}</small>}
+      </div>
+      <div>
+        {onPreview && (
+          <button type="button" onClick={() => onPreview(payload)} aria-label={`预览 ${name}`}>
+            <EyeIcon size={16} />
+          </button>
+        )}
+        {onDownload ? (
+          <button type="button" onClick={() => onDownload(payload)} aria-label={`下载 ${name}`}>
+            <DownloadIcon size={16} />
+          </button>
+        ) : url ? (
+          <a href={url} target="_blank" rel="noreferrer" download={name} aria-label={`打开 ${name}`}>
+            <ExternalLinkIcon size={16} />
+          </a>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export interface DashboardData {
+  title: string;
+  cards?: Array<{ icon?: string; title: string; body: string }>;
+  tiles?: Array<{ label: string; value: string }>;
+  badges?: string[];
+  fileNote?: { title: string; body: string };
+  table?: { columns: string[]; rows: string[][] };
+}
+
+export function DashboardPart(data: DashboardData) {
+  return (
+    <section className="sb-dashboard" data-part-type="dashboard">
+      <h3>{data.title}</h3>
+      {data.tiles?.length ? (
+        <div className="sb-dashboard__tiles">
+          {data.tiles.map((tile) => (
+            <article key={tile.label}><strong>{tile.value}</strong><small>{tile.label}</small></article>
+          ))}
+        </div>
+      ) : null}
+      {data.cards?.length ? (
+        <div className="sb-dashboard__cards">
+          {data.cards.map((card) => (
+            <article key={card.title}><span>{card.icon}</span><strong>{card.title}</strong><p>{card.body}</p></article>
+          ))}
+        </div>
+      ) : null}
+      {data.badges?.length ? <div className="sb-dashboard__badges">{data.badges.map((badge) => <span key={badge}>{badge}</span>)}</div> : null}
+      {data.fileNote && <aside><strong>{data.fileNote.title}</strong><p>{data.fileNote.body}</p></aside>}
+      {data.table && (
+        <div className="sb-table-scroll">
+          <table>
+            <thead><tr>{data.table.columns.map((column) => <th key={column}>{column}</th>)}</tr></thead>
+            <tbody>{data.table.rows.map((row, index) => <tr key={index}>{row.map((cell, cellIndex) => <td key={cellIndex}>{cell}</td>)}</tr>)}</tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}
+
+export interface AskQuestion {
+  prompt: string;
+  kind: "single" | "multi";
+  options: string[];
+}
+
+export function AskUserPart({
+  questions,
+  freeTextPlaceholder,
+  submittedAnswer,
+  onSubmit,
+}: {
+  questions: readonly AskQuestion[];
+  freeTextPlaceholder?: string;
+  submittedAnswer?: string;
+  onSubmit?: (payload: { selections: string[][]; text: string }) => void | Promise<void>;
+}) {
+  const [selections, setSelections] = useState<string[][]>(() => questions.map(() => []));
+  const [text, setText] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const externalAnswer = submittedAnswer?.trim() ?? "";
+  const externalSelections = useMemo(
+    () =>
+      new Set(
+        externalAnswer
+          ? externalAnswer.split("、").map((item) => item.trim()).filter(Boolean)
+          : [],
+      ),
+    [externalAnswer],
+  );
+  const resolvedSubmitted = submitted || Boolean(externalAnswer);
+  const valid = questions.every(
+    (question, index) => question.kind !== "single" || selections[index].length === 1,
+  );
+  const toggle = (questionIndex: number, option: string) => {
+    if (resolvedSubmitted) return;
+    setSelections((current) =>
+      current.map((selected, index) => {
+        if (index !== questionIndex) return selected;
+        if (questions[index].kind === "single") return [option];
+        return selected.includes(option)
+          ? selected.filter((item) => item !== option)
+          : [...selected, option];
+      }),
+    );
+  };
+  const submit = async () => {
+    if (!valid || resolvedSubmitted) return;
+    await onSubmit?.({ selections, text: text.trim() });
+    setSubmitted(true);
+  };
+  const resolvedAnswer =
+    externalAnswer ||
+    [...selections.flat(), text.trim()].filter(Boolean).join("、");
+  return (
+    <section
+      className="sb-ask-user"
+      data-part-type="ask_user"
+      data-state={resolvedSubmitted ? "submitted" : "pending"}
+    >
+      {questions.map((question, questionIndex) => (
+        <fieldset
+          key={`${questionIndex}:${question.prompt}`}
+          disabled={resolvedSubmitted}
+        >
+          <legend>{question.prompt}</legend>
+          <div>
+            {question.options.map((option) => {
+              const selected = externalAnswer
+                ? externalSelections.has(option)
+                : selections[questionIndex].includes(option);
+              return (
+                <button
+                  key={option}
+                  type="button"
+                  aria-pressed={selected}
+                  onClick={() => toggle(questionIndex, option)}
+                >
+                  {question.kind === "multi" && <span>{selected && <CheckIcon size={12} />}</span>}
+                  {selected && question.kind === "single" && <CheckIcon size={14} />}
+                  {option}
+                </button>
+              );
+            })}
+          </div>
+        </fieldset>
+      ))}
+      {freeTextPlaceholder && !resolvedSubmitted && (
+        <textarea value={text} onChange={(event) => setText(event.currentTarget.value)} placeholder={freeTextPlaceholder} />
+      )}
+      {resolvedSubmitted ? (
+        <div className="sb-ask-user__submitted">
+          <CheckIcon size={15} />
+          <span>Submitted</span>
+          {resolvedAnswer && <small>{resolvedAnswer}</small>}
+        </div>
+      ) : (
+        <button type="button" className="sb-button" disabled={!valid} onClick={() => void submit()}>
+          提交<ArrowRightIcon size={15} />
+        </button>
+      )}
+    </section>
+  );
+}
+
+export function Suggestions({
+  items,
+  onPick,
+}: {
+  items: readonly string[];
+  onPick?: (text: string) => void | Promise<void>;
+}) {
+  return (
+    <div className="sb-suggestions" data-part-type="suggestions">
+      {items.map((item) => (
+        <button type="button" key={item} onClick={() => void onPick?.(item)}>
+          <ArrowRightIcon size={15} />
+          <span>{item}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function InlineText({ children }: { children: ReactNode }) {
+  return <span className="sb-inline-text">{children}</span>;
+}
+
+export function PartLoading({
+  kind,
+  label,
+}: {
+  kind: RichPartKind;
+  label?: string;
+}) {
+  if (kind === "reasoning") return <ThinkingIndicator />;
+  if (kind === "tool") return <RunningRow tool={{ label: label ?? "Running tool", status: "running" }} />;
+  return (
+    <div className="sb-part-loading" data-kind={kind} role="status">
+      <span />
+      <span />
+      <span />
+    </div>
+  );
+}
+
+export function UnknownPart({ part }: { part: unknown }) {
+  const type =
+    part && typeof part === "object" && typeof (part as { type?: unknown }).type === "string"
+      ? (part as { type: string }).type
+      : "unknown";
+  return (
+    <div className="sb-unknown-part" data-part-type="unknown" data-unknown-type={type}>
+      <AlertCircleIcon size={15} />
+      <span>暂不支持的消息组件：{type}</span>
+    </div>
+  );
+}
+
+function objectOf(value: unknown): Record<string, unknown> {
+  return value != null && typeof value === "object"
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+function strings(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string")
+    : [];
+}
+
+function dataOf(part: unknown): Record<string, unknown> {
+  const record = objectOf(part);
+  return objectOf(record.data ?? record.input ?? record.arguments ?? record);
+}
+
+function fileKind(mediaType: unknown, filename: unknown): FileKind {
+  const value = `${String(mediaType ?? "")} ${String(filename ?? "")}`;
+  if (/image/i.test(value)) return "image";
+  if (/audio/i.test(value)) return "audio";
+  if (/csv|sheet|excel/i.test(value)) return "csv";
+  if (/html/i.test(value)) return "html";
+  if (/code|javascript|typescript|json|xml/i.test(value)) return "code";
+  return "doc";
+}
+
+export function DefaultPartRenderer({
+  part,
+  context,
+}: {
+  part: unknown;
+  context: PartRendererContext;
+}) {
+  const record = objectOf(part);
+  if (record.type === "step-start") return null;
+  const data = dataOf(part);
+  const kind = resolvePartKind(part);
+  const toolName = toolNameOfPart(part);
+  const toolState = String(
+    record.state ?? data.state ?? "output-available",
+  ) as AIToolPart["state"];
+  const withToolApproval = (children: ReactNode) =>
+    toolName ? (
+      <ToolApprovalPresentation
+        toolName={toolName}
+        state={toolState}
+        context={context}
+      >
+        {children}
+      </ToolApprovalPresentation>
+    ) : (
+      children
+    );
+  if (kind === "text") {
+    return <TextPart text={String(record.text ?? data.text ?? "")} streaming={context.isActive} />;
+  }
+  if (kind === "reasoning") {
+    return (
+      <ReasoningPart
+        text={String(
+          record.thinking ?? record.text ?? data.detail ?? data.text ?? "",
+        )}
+        label={typeof data.label === "string" ? data.label : undefined}
+        streaming={context.isActive && record.state === "streaming"}
+      />
+    );
+  }
+  if (kind === "tool") {
+    const name = toolName ?? String(data.name ?? "tool");
+    const state = toolState;
+    const pending = state === "input-available" || state === "input-streaming";
+    return withToolApproval(
+      <ToolPart
+        name={name}
+        label={typeof data.label === "string" ? data.label : undefined}
+        icon={typeof data.icon === "string" && data.icon in toolIcons ? data.icon as ToolIcon : undefined}
+        state={pending && !context.isActive ? "interrupted" : state}
+        input={record.input ?? record.arguments}
+        output={record.output ?? data.output}
+        errorText={typeof record.errorText === "string" ? record.errorText : undefined}
+        command={typeof data.command === "string" ? data.command : undefined}
+        meta={typeof data.meta === "string" ? data.meta : undefined}
+        results={Array.isArray(data.results) ? data.results as Array<{ title: string; domain: string }> : undefined}
+        activityId={context.activityId}
+        onNavigate={context.actions.onNavigate}
+      />
+    );
+  }
+  if (kind === "error") {
+    return <ErrorPart title={String(data.title ?? "Error")} body={String(data.body ?? data.message ?? "请求失败")} />;
+  }
+  if (kind === "image") {
+    return <ImagePart src={String(record.src ?? record.url ?? data.src ?? data.url ?? "")} alt={String(record.alt ?? record.filename ?? data.alt ?? data.filename ?? "图片")} onPreview={() => context.actions.onPreview?.(part)} />;
+  }
+  if (kind === "chart") {
+    return <ChartPart title={String(data.title ?? "Chart")} unit={typeof data.unit === "string" ? data.unit : undefined} bars={Array.isArray(data.bars) ? data.bars as ChartBar[] : []} expandable={Boolean(data.expandable)} onPreview={() => context.actions.onPreview?.(part)} />;
+  }
+  if (kind === "agent_card") {
+    return <AgentCardPart title={String(data.title ?? "Agent")} agentName={String(data.agentName ?? data.name ?? "Agent")} agentDesc={String(data.agentDesc ?? data.description ?? "")} onNavigate={() => context.actions.onNavigate?.(String(data.target ?? "agents"))} />;
+  }
+  if (kind === "plan") {
+    if (!context.isLatestOfKind) return null;
+    const steps = planStepsOfPart(part);
+    return withToolApproval(
+      <PlanPart
+        title={String(data.title ?? "任务计划")}
+        steps={steps}
+        streaming={context.isActive && context.status === "streaming"}
+      />,
+    );
+  }
+  if (kind === "schedule") {
+    return withToolApproval(<SchedulePart title={String(data.title ?? "安排任务")} cadence={String(data.cadence ?? data.schedule ?? "")} nextRun={String(data.nextRun ?? data.next_run ?? "")} scheduled={Boolean(data.scheduled)} onSchedule={() => context.actions.onAnswer?.({ type: "schedule", data })} />);
+  }
+  if (kind === "parallel") {
+    return withToolApproval(<ParallelPart label={typeof data.label === "string" ? data.label : undefined} tools={Array.isArray(data.tools) ? data.tools as ParallelTool[] : []} isActive={context.isActive} />);
+  }
+  if (kind === "subagents") {
+    const agents = Array.isArray(data.agents)
+      ? data.agents as SubAgent[]
+      : [{ name: String(data.name ?? "Sub-agent"), summary: String(data.summary ?? ""), status: context.isActive ? "running" as const : "done" as const }];
+    return withToolApproval(<SubAgentsPart agents={agents} isActive={context.isActive} />);
+  }
+  if (kind === "confirmation") {
+    return <ConfirmationPart id={String(data.id ?? context.activityId)} title={String(data.title ?? "确认操作？")} body={typeof data.body === "string" ? data.body : undefined} confirmLabel={String(data.confirmLabel ?? "确认")} cancelLabel={String(data.cancelLabel ?? "取消")} onConfirm={(confirmed) => context.actions.onApprove?.(String(data.id ?? context.activityId), confirmed ? "allow_once" : "deny")} />;
+  }
+  if (kind === "file") {
+    const filename = String(record.filename ?? data.name ?? data.filename ?? record.mediaType ?? "附件");
+    return <FilePart name={filename} kind={fileKind(record.mediaType ?? data.mediaType, filename)} note={typeof data.note === "string" ? data.note : undefined} url={typeof record.url === "string" ? record.url : typeof data.url === "string" ? data.url : undefined} artifact={part} onPreview={context.actions.onPreview} onDownload={context.actions.onDownload} />;
+  }
+  if (kind === "dashboard") {
+    return <DashboardPart {...data as unknown as DashboardData} title={String(data.title ?? "Dashboard")} />;
+  }
+  if (kind === "ask_user") {
+    const questions: AskQuestion[] = Array.isArray(data.questions)
+      ? data.questions as AskQuestion[]
+      : [{
+          prompt: String(data.question ?? "请选择"),
+          kind: data.multiSelect === true ? "multi" : "single",
+          options: strings(data.options),
+        }];
+    return withToolApproval(
+      <AskUserPart
+        questions={questions}
+        freeTextPlaceholder={typeof data.freeTextPlaceholder === "string" ? data.freeTextPlaceholder : undefined}
+        submittedAnswer={context.replyText}
+        onSubmit={(payload) => context.actions.onAnswer?.(payload)}
+      />,
+    );
+  }
+  if (kind === "suggestions") {
+    return withToolApproval(<Suggestions items={strings(data.items)} onPick={context.actions.onSuggestion} />);
+  }
+  return <UnknownPart part={part} />;
+}