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

package/src/camel/camel-chat-messages.tsx

@@ -0,0 +1,1435 @@
+import type { UIMessage } from "ai";
+import {
+  ArrowDownIcon,
+  BellIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  GitForkIcon,
+  Loader2Icon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+import {
+  MessageResponse,
+  type MessageUrlResolver,
+} from "../message";
+import {
+  ParallelPart,
+  SubAgentsPart,
+  resolvePartKind,
+  toolNameOfPart,
+  type ParallelTool,
+  type SubAgent,
+} from "../parts";
+import { deriveThinkingActivity, ThinkingIndicator } from "../status";
+import type {
+  ToolApprovalDecision,
+  ToolApprovalView,
+} from "../contracts";
+import { cn } from "../internal/cn";
+import {
+  CamelToolDetails,
+  getCamelToolPresentation,
+} from "./camel-tool-presentation";
+import {
+  camelCompletedAt,
+  camelCreatedAt,
+  camelMessageText,
+  camelMetadata,
+  formatCamelMessageTime,
+  projectCamelMessages,
+  type CamelAssistantTurn,
+  type CamelPartRef,
+  type CamelStandaloneMessage,
+} from "./camel-turn";
+import { TurnSummaryBar } from "./turn-summary-bar";
+
+type ChatStatus = "ready" | "submitted" | "streaming" | "error";
+
+export interface CamelPendingApproval {
+  id: string;
+  action: string;
+  summary: string;
+  executionLevelLabel: string;
+  requiredExecutionLevelLabel: string;
+  disabled?: boolean;
+}
+
+export interface CamelChatMessagesProps {
+  messages: readonly UIMessage[];
+  status: ChatStatus;
+  /** Exact tool names promoted from the collapsible trace to final output. */
+  finalToolNames?: readonly string[];
+  isHydrating?: boolean;
+  isRecovering?: boolean;
+  isServerStreaming?: boolean;
+  /** Show the opt-in activity bar for recovering or server-streaming states. */
+  showActivityStatus?: boolean;
+  activityStatusLabel?: string;
+  hasPendingSteer?: boolean;
+  startedWithPending?: boolean;
+  error?: unknown;
+  onRetry?: () => void;
+  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+  onSuggestion: (text: string) => void;
+  onAnswer: (payload: unknown) => void;
+  onFork?: (messageId: string) => void | Promise<void>;
+  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
+  resolveUrl?: MessageUrlResolver;
+  /** Set false when durable approval actions are rendered outside the trace. */
+  inlineApprovalActions?: boolean;
+}
+
+const pendingSteerActivity = {
+  state: "working" as const,
+  label: "Waiting for the current step to finish…",
+};
+
+type UnknownRecord = Record<string, unknown>;
+
+type CamelButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  size?: "sm" | "icon" | "icon-sm";
+  variant?: "default" | "outline" | "ghost";
+};
+
+function Button({
+  className,
+  size = "sm",
+  variant = "default",
+  type = "button",
+  ...props
+}: CamelButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center gap-1 rounded-md text-xs font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+        variant === "default" &&
+          "bg-primary text-primary-foreground hover:bg-primary/80",
+        variant === "outline" &&
+          "border border-border bg-background hover:bg-muted",
+        variant === "ghost" && "hover:bg-muted hover:text-foreground",
+        size === "sm" && "h-7 px-2",
+        size === "icon" && "size-9 rounded-full",
+        size === "icon-sm" && "size-8 p-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CamelChatError({
+  error,
+  onRetry,
+}: {
+  error: unknown;
+  onRetry?: () => void;
+}) {
+  return (
+    <div
+      className="flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+      data-camel-chat-error=""
+      role="alert"
+    >
+      <TriangleAlertIcon className="size-4 shrink-0" />
+      <span className="min-w-0 flex-1 break-words">
+        {error instanceof Error
+          ? error.message
+          : typeof error === "string"
+            ? error
+            : "Something went wrong"}
+      </span>
+      {onRetry && (
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          className="shrink-0"
+          onClick={onRetry}
+        >
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function CamelApprovalPrompts({
+  approvals,
+  error,
+  onApprove,
+}: {
+  approvals: readonly CamelPendingApproval[];
+  error?: string | null;
+  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+}) {
+  if (approvals.length === 0) return null;
+
+  return (
+    <div className="flex flex-col gap-2" data-camel-approval-prompts="">
+      {approvals.map((approval) => (
+        <section
+          key={approval.id}
+          aria-label="等待审批"
+          className="rounded-xl border border-border bg-background p-3 shadow-sm"
+        >
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <p className="text-xs font-medium text-muted-foreground">
+              需要审批 · {approval.action}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Agent: {approval.executionLevelLabel} · Tool:{" "}
+              {approval.requiredExecutionLevelLabel}
+            </p>
+          </div>
+          <p className="mt-1 text-sm text-foreground">{approval.summary}</p>
+          <div className="mt-2 flex flex-wrap justify-end gap-2">
+            <Button
+              variant="outline"
+              disabled={approval.disabled}
+              onClick={() => onApprove(approval.id, "deny")}
+            >
+              拒绝
+            </Button>
+            <Button
+              variant="outline"
+              disabled={approval.disabled}
+              onClick={() => onApprove(approval.id, "allow_once")}
+            >
+              仅本次允许
+            </Button>
+            <Button
+              disabled={approval.disabled}
+              onClick={() => onApprove(approval.id, "allow_level")}
+            >
+              允许该档位
+            </Button>
+          </div>
+        </section>
+      ))}
+      {error && (
+        <p className="px-1 text-xs text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function Collapsible({
+  open,
+  onOpenChange,
+  disabled = false,
+  trigger,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  disabled?: boolean;
+  trigger: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <div onClick={() => {
+        if (!disabled) onOpenChange(!open);
+      }}>
+        {trigger}
+      </div>
+      <div
+        data-camel-collapsible-content=""
+        data-state={open ? "open" : "closed"}
+        aria-hidden={!open}
+        inert={!open ? true : undefined}
+      >
+        {open && (
+          <div data-camel-collapsible-inner="">
+            {children}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function recordOf(value: unknown): UnknownRecord {
+  return value != null && typeof value === "object"
+    ? (value as UnknownRecord)
+    : {};
+}
+
+function dataOf(part: unknown): UnknownRecord {
+  const record = recordOf(part);
+  return recordOf(record.data ?? record.input ?? record);
+}
+
+function toolApprovalOf(part: unknown): ToolApprovalView | undefined {
+  const approval = recordOf(recordOf(part).approval);
+  return typeof approval.id === "string"
+    ? {
+        id: approval.id,
+        ...(typeof approval.approved === "boolean"
+          ? { approved: approval.approved }
+          : {}),
+      }
+    : undefined;
+}
+
+function normalizedPartType(part: unknown): string {
+  const record = recordOf(part);
+  const rawType = typeof record.type === "string" ? record.type : "unknown";
+  return (
+    resolvePartKind(part) ??
+    (rawType.startsWith("data-")
+      ? rawType.slice(5).replaceAll("-", "_")
+      : rawType)
+  );
+}
+
+function ClipboardAction({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+  const copy = useCallback(() => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+      timerRef.current = window.setTimeout(() => setCopied(false), 1500);
+    });
+  }, [text]);
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      className="size-8 text-muted-foreground"
+      onClick={copy}
+      aria-label={copied ? "Copied!" : "Copy message"}
+      title={copied ? "Copied!" : "Copy message"}
+    >
+      {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
+    </Button>
+  );
+}
+
+function CamelThinking({
+  part,
+  isActive,
+}: {
+  part: unknown;
+  isActive: boolean;
+}) {
+  const record = recordOf(part);
+  const data = dataOf(part);
+  const text = String(record.text ?? data.detail ?? data.text ?? "");
+  const streaming = isActive && record.state === "streaming";
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div data-part-type="reasoning">
+      <Collapsible
+        open={open}
+        onOpenChange={setOpen}
+        trigger={
+          <div
+            role="button"
+            tabIndex={0}
+            className={cn(
+              "thinking-block group/thinking -mx-2 flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1 text-left text-sm text-muted-foreground",
+              "transition-colors duration-150 hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
+            )}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                setOpen((current) => !current);
+              }
+            }}
+          >
+            <span
+              className={cn(
+                "size-1.5 shrink-0 rounded-full",
+                streaming
+                  ? "animate-pulse bg-blue-500 motion-reduce:animate-none"
+                  : "bg-green-500",
+              )}
+            />
+            <span className="min-w-0 flex-1 truncate">
+              {streaming ? "Thinking…" : "Thought"}
+            </span>
+            <ChevronRightIcon
+              className={cn(
+                "size-4 text-muted-foreground/50 opacity-0 transition-all duration-150 group-hover/thinking:opacity-100",
+                open && "rotate-90 opacity-100",
+              )}
+            />
+          </div>
+        }
+      >
+        <div className="ml-1 mt-1 border-l border-border/40 pl-4 text-xs text-muted-foreground/80">
+          <MessageResponse>{text}</MessageResponse>
+        </div>
+      </Collapsible>
+    </div>
+  );
+}
+
+function CamelToolRow({
+  part,
+  isActive,
+  children,
+  onApprove,
+  getToolApproval,
+}: {
+  part: unknown;
+  isActive: boolean;
+  children?: ReactNode;
+  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
+}) {
+  const approval = getToolApproval?.(part) ?? toolApprovalOf(part);
+  const pendingApproval = approval && approval.approved === undefined;
+  const presentation = getCamelToolPresentation(part, isActive);
+  const autoOpen = presentation.running && (
+    presentation.isSubAgent ||
+    presentation.kind === "write" ||
+    presentation.kind === "edit"
+  );
+  const [open, setOpen] = useState(autoOpen);
+  const hasDetails = children != null || presentation.hasDetails;
+  const title = presentation.summary;
+
+  useEffect(() => {
+    if (autoOpen) setOpen(true);
+  }, [autoOpen]);
+
+  return (
+    <div data-part-type={normalizedPartType(part)}>
+      <Collapsible
+        open={open}
+        onOpenChange={setOpen}
+        disabled={!hasDetails}
+        trigger={
+          <div
+            role="button"
+            tabIndex={0}
+            aria-label={title}
+            aria-expanded={hasDetails ? open : undefined}
+            className={cn(
+              "tool-call group/toolcall -mx-2 flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm text-muted-foreground",
+              hasDetails && "cursor-pointer hover:bg-muted/30",
+              "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
+            )}
+            onKeyDown={(event) => {
+              if (hasDetails && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                setOpen((current) => !current);
+              }
+            }}
+          >
+            <span
+              className={cn(
+                "size-1.5 shrink-0 rounded-full",
+                presentation.failed
+                  ? "bg-red-500"
+                  : presentation.running || pendingApproval
+                    ? "animate-pulse bg-blue-500 motion-reduce:animate-none"
+                    : "bg-green-500",
+              )}
+            />
+            <span className="min-w-0 flex-1 truncate">
+              {title}
+            </span>
+            {hasDetails && (
+              <ChevronRightIcon
+                className={cn(
+                  "size-4 text-muted-foreground/50 opacity-0 transition-all duration-150 group-hover/toolcall:opacity-100",
+                  open && "rotate-90 opacity-100",
+                )}
+              />
+            )}
+          </div>
+        }
+      >
+        {hasDetails ? (
+          <div className="group/details ml-1 mt-1 border-l border-border/50 pl-4 text-xs text-muted-foreground/80">
+            {children ?? (
+              <CamelToolDetails presentation={presentation} />
+            )}
+          </div>
+        ) : null}
+      </Collapsible>
+      {pendingApproval && (
+        <div className="ml-1 mt-2 flex flex-wrap items-center gap-2 border-l border-border/50 pl-4">
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() => onApprove(approval.id, "deny")}
+          >
+            Deny
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={() => onApprove(approval.id, "allow_once")}
+          >
+            Allow once
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            onClick={() => onApprove(approval.id, "allow_level")}
+          >
+            Allow this level
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CamelSuggestions({
+  part,
+  onSuggestion,
+}: {
+  part: unknown;
+  onSuggestion: (text: string) => void;
+}) {
+  const data = dataOf(part);
+  const items = Array.isArray(data.items)
+    ? data.items.filter((item): item is string => typeof item === "string")
+    : [];
+  return (
+    <div
+      className="space-y-2 pt-1"
+      data-part-type="suggestions"
+    >
+      <div className="flex items-center gap-2 text-sm text-emerald-600">
+        <CheckIcon className="size-4" />
+        <span>Task complete</span>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {items.map((item) => (
+          <Button
+            key={item}
+            type="button"
+            variant="outline"
+            size="sm"
+            className="rounded-full"
+            onClick={() => onSuggestion(item)}
+          >
+            {item}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function scheduleDuration(seconds: unknown): string {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) {
+    return "";
+  }
+  for (const [size, unit] of [
+    [86_400, "day"],
+    [3_600, "hour"],
+    [60, "minute"],
+  ] as const) {
+    if (seconds % size === 0) {
+      const value = seconds / size;
+      return `${value} ${unit}${value === 1 ? "" : "s"}`;
+    }
+  }
+  return `${seconds} second${seconds === 1 ? "" : "s"}`;
+}
+
+function scheduleCadence(data: UnknownRecord): string {
+  const trigger = recordOf(data.trigger);
+  const kind = trigger.kind;
+  let cadence = "";
+  if (kind === "once-in") {
+    cadence = `In ${scheduleDuration(trigger.seconds)}`;
+  } else if (kind === "once-at" && typeof trigger.at === "string") {
+    cadence = `Once at ${trigger.at}`;
+  } else if (kind === "interval") {
+    cadence = `Every ${scheduleDuration(trigger.seconds)}`;
+  } else if (kind === "cron" && typeof trigger.cron === "string") {
+    cadence = `Cron ${trigger.cron}`;
+  }
+  if (!cadence) {
+    cadence = String(data.cadence ?? data.schedule ?? "Scheduled");
+  }
+  const timezone =
+    typeof data.timezone === "string"
+      ? data.timezone
+      : typeof data.tz === "string"
+        ? data.tz
+        : "";
+  return timezone ? `${cadence} · ${timezone}` : cadence;
+}
+
+function CamelSchedule({
+  part,
+  isActive,
+}: {
+  part: unknown;
+  isActive: boolean;
+}) {
+  const data = dataOf(part);
+  const presentation = getCamelToolPresentation(part, isActive);
+  const state = presentation.failed
+    ? "failed"
+    : presentation.running
+      ? "running"
+      : "scheduled";
+  return (
+    <section
+      className="rounded-xl border border-border bg-muted/20 p-3"
+      data-part-type="schedule"
+      data-state={state}
+    >
+      <div className="flex items-start gap-3">
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+          <BellIcon className="size-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <strong className="block truncate text-sm text-foreground">
+            {String(data.label ?? data.title ?? "Scheduled task")}
+          </strong>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {scheduleCadence(data)}
+          </p>
+        </div>
+        <span
+          className={cn(
+            "flex shrink-0 items-center gap-1 text-xs",
+            state === "failed"
+              ? "text-destructive"
+              : state === "running"
+                ? "text-blue-500"
+                : "text-emerald-600",
+          )}
+        >
+          {state === "failed" ? (
+            <TriangleAlertIcon className="size-3.5" />
+          ) : state === "running" ? (
+            <Loader2Icon className="size-3.5 animate-spin motion-reduce:animate-none" />
+          ) : (
+            <CheckIcon className="size-3.5" />
+          )}
+          {state === "failed"
+            ? "Failed"
+            : state === "running"
+              ? "Scheduling…"
+              : "Scheduled"}
+        </span>
+      </div>
+    </section>
+  );
+}
+
+function CamelAskUser({
+  part,
+  submittedAnswer,
+  onAnswer,
+}: {
+  part: unknown;
+  submittedAnswer?: string;
+  onAnswer: (payload: unknown) => void;
+}) {
+  const record = recordOf(part);
+  const data = dataOf(part);
+  const output = record.output;
+  const questions = Array.isArray(data.questions)
+    ? data.questions.map(recordOf)
+    : typeof data.question === "string"
+      ? [{
+          prompt: data.question,
+          kind: data.multiSelect === true ? "multi" : "single",
+          options: Array.isArray(data.options)
+            ? data.options.filter(
+                (option): option is string => typeof option === "string",
+              )
+            : [],
+        }]
+      : [];
+  const [selections, setSelections] = useState<string[][]>(() =>
+    questions.map(() => []),
+  );
+  const [text, setText] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const outputRecord = recordOf(output);
+  const externalAnswer =
+    submittedAnswer?.trim() ||
+    (typeof output === "string"
+      ? output.trim()
+      : typeof outputRecord.text === "string"
+        ? outputRecord.text.trim()
+        : "");
+  const externalSelections = new Set(
+    externalAnswer
+      .split("、")
+      .map((value) => value.trim())
+      .filter(Boolean),
+  );
+  const resolvedSubmitted = submitted || Boolean(externalAnswer);
+  const valid = questions.every((question, index) => {
+    const options = Array.isArray(question.options) ? question.options : [];
+    return options.length === 0 || (selections[index]?.length ?? 0) > 0;
+  });
+
+  return (
+    <section
+      className="space-y-3 rounded-xl border border-border bg-muted/20 p-3"
+      data-part-type="ask_user"
+      data-state={resolvedSubmitted ? "submitted" : "idle"}
+    >
+      {questions.map((question, questionIndex) => {
+        const prompt = String(question.prompt ?? "Choose an option");
+        const options = Array.isArray(question.options)
+          ? question.options.filter(
+              (option): option is string => typeof option === "string",
+            )
+          : [];
+        const multi = question.kind === "multi";
+        return (
+          <div className="space-y-2" key={`${prompt}:${questionIndex}`}>
+            <p className="text-sm text-foreground">{prompt}</p>
+            <div className="flex flex-wrap gap-2">
+              {options.map((option) => {
+                const selected = externalAnswer
+                  ? externalSelections.has(option)
+                  : selections[questionIndex]?.includes(option);
+                return (
+                  <Button
+                    key={option}
+                    type="button"
+                    size="sm"
+                    variant={selected ? "default" : "outline"}
+                    disabled={resolvedSubmitted}
+                    onClick={() =>
+                      setSelections((current) =>
+                        current.map((values, index) => {
+                          if (index !== questionIndex) return values;
+                          if (!multi) return [option];
+                          return values.includes(option)
+                            ? values.filter((value) => value !== option)
+                            : [...values, option];
+                        }),
+                      )
+                    }
+                  >
+                    {option}
+                  </Button>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+      {typeof data.freeTextPlaceholder === "string" && (
+        <input
+          value={text}
+          disabled={resolvedSubmitted}
+          onChange={(event) => setText(event.currentTarget.value)}
+          placeholder={data.freeTextPlaceholder}
+          className="h-8 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring focus:ring-2 focus:ring-ring/30"
+        />
+      )}
+      <Button
+        type="button"
+        size="sm"
+        disabled={resolvedSubmitted || !valid}
+        onClick={() => {
+          onAnswer({ selections, text });
+          setSubmitted(true);
+        }}
+      >
+        {resolvedSubmitted ? "Submitted" : "Submit"}
+      </Button>
+      {externalAnswer && (
+        <p className="text-xs text-muted-foreground">
+          已回答：{externalAnswer}
+        </p>
+      )}
+    </section>
+  );
+}
+
+function CamelRichPart({
+  part,
+  isActive,
+  onApprove,
+  onSuggestion,
+  onAnswer,
+  replyText,
+  getToolApproval,
+}: {
+  part: unknown;
+  isActive: boolean;
+  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+  onSuggestion: (text: string) => void;
+  onAnswer: (payload: unknown) => void;
+  replyText?: string;
+  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
+}) {
+  const kind = normalizedPartType(part);
+  const data = dataOf(part);
+
+  if (kind === "suggestions") {
+    return <CamelSuggestions part={part} onSuggestion={onSuggestion} />;
+  }
+  if (kind === "schedule") {
+    return <CamelSchedule part={part} isActive={isActive} />;
+  }
+  if (kind === "ask_user") {
+    return (
+      <CamelAskUser
+        part={part}
+        submittedAnswer={replyText}
+        onAnswer={onAnswer}
+      />
+    );
+  }
+  if (kind === "parallel") {
+    const tools = Array.isArray(data.tools)
+      ? (data.tools as ParallelTool[])
+      : [];
+    return (
+      <ParallelPart
+        label={
+          typeof data.label === "string" ? data.label : "Parallel tasks"
+        }
+        tools={tools}
+        isActive={isActive}
+      />
+    );
+  }
+  if (kind === "subagents") {
+    const presentation = getCamelToolPresentation(part, isActive);
+    const toolName = toolNameOfPart(part);
+    const fallbackName =
+      toolName === "run_temporary_agent"
+        ? "Temporary Agent"
+        : toolName === "dispatch_background"
+          ? `${String(data.agentType ?? "Background").replace(/^./, (value) => value.toUpperCase())} Agent`
+          : toolName === "fanout"
+            ? "Fanout Agent"
+            : toolName === "extract"
+              ? "Extract Agent"
+              : "Sub-agent";
+    const agents = Array.isArray(data.agents)
+      ? (data.agents as SubAgent[])
+      : [
+          {
+            name: String(
+              data.subagentName ??
+                data.name ??
+                fallbackName,
+            ),
+            summary:
+              presentation.errorText ||
+              presentation.outputText ||
+              String(data.summary ?? ""),
+            status: presentation.failed
+              ? "failed" as const
+              : presentation.running
+                ? "running" as const
+                : "done" as const,
+          },
+        ];
+    return <SubAgentsPart agents={agents} isActive={isActive} />;
+  }
+  if (kind === "image") {
+    const src = String(data.src ?? data.url ?? "");
+    return (
+      <figure className="my-1" data-part-type="image">
+        <img
+          src={src}
+          alt={String(data.alt ?? data.filename ?? "Generated image")}
+          className="max-h-[28rem] max-w-full rounded-lg border border-border object-contain"
+        />
+      </figure>
+    );
+  }
+  if (kind === "error") {
+    return (
+      <div
+        className="flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+        data-part-type="error"
+        role="alert"
+      >
+        <TriangleAlertIcon className="mt-0.5 size-4 shrink-0" />
+        <div>
+          <div className="font-medium">{String(data.title ?? "Error")}</div>
+          <div className="mt-0.5 text-xs opacity-80">
+            {String(data.body ?? data.message ?? "")}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <CamelToolRow
+      part={part}
+      isActive={isActive}
+      onApprove={onApprove}
+      getToolApproval={getToolApproval}
+    />
+  );
+}
+
+function AssistantPart({
+  part,
+  isActive,
+  onApprove,
+  onSuggestion,
+  onAnswer,
+  replyText,
+  getToolApproval,
+  resolveUrl,
+}: {
+  part: unknown;
+  isActive: boolean;
+  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+  onSuggestion: (text: string) => void;
+  onAnswer: (payload: unknown) => void;
+  replyText?: string;
+  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
+  resolveUrl?: MessageUrlResolver;
+}) {
+  const record = recordOf(part);
+  if (record.type === "step-start") return null;
+  if (record.type === "text") {
+    const text = String(record.text ?? "").trim();
+    if (!text) return null;
+    return (
+      <div data-part-type="text">
+        <MessageResponse streaming={isActive} resolveUrl={resolveUrl}>
+          {text}
+        </MessageResponse>
+      </div>
+    );
+  }
+  if (record.type === "reasoning") {
+    return <CamelThinking part={part} isActive={isActive} />;
+  }
+  return (
+    <CamelRichPart
+      part={part}
+      isActive={isActive}
+      onApprove={onApprove}
+      onSuggestion={onSuggestion}
+      onAnswer={onAnswer}
+      replyText={replyText}
+      getToolApproval={getToolApproval}
+    />
+  );
+}
+
+function ForkAction({
+  messageId,
+  onFork,
+}: {
+  messageId: string;
+  onFork: (messageId: string) => void | Promise<void>;
+}) {
+  const [forking, setForking] = useState(false);
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      className="size-8 text-muted-foreground"
+      disabled={forking}
+      onClick={() => {
+        setForking(true);
+        void Promise.resolve(onFork(messageId)).finally(() => setForking(false));
+      }}
+      aria-label={forking ? "Starting new thread…" : "New thread from here"}
+      title={forking ? "Starting new thread…" : "New thread from here"}
+    >
+      {forking ? (
+        <Loader2Icon className="size-4 animate-spin" />
+      ) : (
+        <GitForkIcon className="size-4" />
+      )}
+    </Button>
+  );
+}
+
+function UserMessage({ message }: { message: UIMessage }) {
+  const text = camelMessageText(message);
+  const files = message.parts.filter((part) => part.type === "file");
+  const metadata = camelMetadata(message);
+  const createdAt = camelCreatedAt(message);
+  const messageTime =
+    createdAt === undefined ? null : formatCamelMessageTime(createdAt);
+  const authorStamp = [metadata.authorDisplayName, messageTime]
+    .filter(Boolean)
+    .join(" ");
+
+  if (!text && files.length === 0) return null;
+
+  return (
+    <div
+      className="group mb-1 mt-6"
+      data-message-id={message.id}
+      data-message-role="user"
+    >
+      <div className="flex flex-col items-end gap-2">
+        {files.length > 0 && (
+          <div className="flex max-w-[85%] flex-wrap justify-end gap-2">
+            {files.map((file, index) =>
+              file.mediaType?.startsWith("image/") ? (
+                <img
+                  key={`${file.url}:${index}`}
+                  src={file.url}
+                  alt={file.filename ?? "Attachment"}
+                  className="max-h-52 max-w-64 rounded-xl border border-border object-cover"
+                />
+              ) : (
+                <span
+                  key={`${file.url}:${index}`}
+                  className="rounded-lg border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground"
+                >
+                  {file.filename ?? "Attachment"}
+                </span>
+              ),
+            )}
+          </div>
+        )}
+        {text && (
+          <div className="camel-user-message max-w-[85%] rounded-3xl border border-border bg-muted/30 px-4 py-3 text-foreground">
+            <MessageResponse>{text}</MessageResponse>
+          </div>
+        )}
+        {text && (
+          <div
+            className="flex items-center justify-end gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 pointer-coarse:opacity-100"
+            role="group"
+            aria-label="Message actions"
+          >
+            {authorStamp && (
+              <span className="mr-1 text-xs text-muted-foreground">
+                {authorStamp}
+              </span>
+            )}
+            <ClipboardAction text={text} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function standaloneText(message: UIMessage): string {
+  const part = message.parts.find((candidate) =>
+    candidate.type.startsWith("data-"),
+  );
+  const data = dataOf(part);
+  return String(data.text ?? data.command ?? data.output ?? "").trim();
+}
+
+function CompactSummary({ message }: { message: UIMessage }) {
+  const text = standaloneText(message);
+  if (!text) return null;
+  return (
+    <details
+      className="my-3 rounded-xl border border-border bg-muted/20 px-3 py-2 text-sm"
+      data-camel-compact-summary=""
+      data-message-id={message.id}
+    >
+      <summary className="cursor-pointer text-xs font-medium text-muted-foreground">
+        Compacted context
+      </summary>
+      <div className="mt-3 border-t border-border/40 pt-3">
+        <MessageResponse>{text}</MessageResponse>
+      </div>
+    </details>
+  );
+}
+
+function StandaloneMessage({ item }: { item: CamelStandaloneMessage }) {
+  const { message, displayKind } = item;
+  if (displayKind === "user") return <UserMessage message={message} />;
+  if (displayKind === "compact-summary") {
+    return <CompactSummary message={message} />;
+  }
+  const text = standaloneText(message);
+  if (!text) return null;
+  if (displayKind === "slash-command") {
+    return (
+      <div
+        className="mt-4 flex justify-end"
+        data-message-id={message.id}
+        data-message-kind="slash-command"
+      >
+        <span className="font-mono text-sm text-foreground">{text}</span>
+      </div>
+    );
+  }
+  if (displayKind === "local-command-output") {
+    return (
+      <div
+        className="mt-4 flex justify-start"
+        data-message-id={message.id}
+        data-message-kind="local-command-output"
+      >
+        <span className="text-sm italic text-muted-foreground">{text}</span>
+      </div>
+    );
+  }
+  return (
+    <div
+      className="my-3 text-sm italic text-muted-foreground"
+      data-message-id={message.id}
+      data-message-kind="notice"
+    >
+      {text}
+    </div>
+  );
+}
+
+function RenderAssistantPart({
+  partRef,
+  isActive,
+  onApprove,
+  onSuggestion,
+  onAnswer,
+  replyText,
+  getToolApproval,
+  resolveUrl,
+}: {
+  partRef: CamelPartRef;
+  isActive: boolean;
+  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+  onSuggestion: (text: string) => void;
+  onAnswer: (payload: unknown) => void;
+  replyText?: string;
+  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
+  resolveUrl?: MessageUrlResolver;
+}) {
+  return (
+    <AssistantPart
+      key={`${partRef.messageId}:${partRef.partIndex}:${String(
+        recordOf(partRef.part).type ?? "part",
+      )}`}
+      part={partRef.part}
+      isActive={isActive}
+      onApprove={onApprove}
+      onSuggestion={onSuggestion}
+      onAnswer={onAnswer}
+      replyText={replyText}
+      getToolApproval={getToolApproval}
+      resolveUrl={resolveUrl}
+    />
+  );
+}
+
+function AssistantTurn({
+  turn,
+  isActive,
+  hasPendingSteer,
+  hasPendingApproval,
+  onFork,
+  onApprove,
+  onSuggestion,
+  onAnswer,
+  getToolApproval,
+  resolveUrl,
+}: {
+  turn: CamelAssistantTurn;
+  isActive: boolean;
+  hasPendingSteer: boolean;
+  hasPendingApproval: boolean;
+  onFork?: (messageId: string) => void | Promise<void>;
+  onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+  onSuggestion: (text: string) => void;
+  onAnswer: (payload: unknown) => void;
+  getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
+  resolveUrl?: MessageUrlResolver;
+}) {
+  const renderPart = (partRef: CamelPartRef, active = false) => (
+    <RenderAssistantPart
+      key={`${partRef.messageId}:${partRef.partIndex}`}
+      partRef={partRef}
+      isActive={active}
+      onApprove={onApprove}
+      onSuggestion={onSuggestion}
+      onAnswer={onAnswer}
+      replyText={turn.replyText}
+      getToolApproval={getToolApproval}
+      resolveUrl={resolveUrl}
+    />
+  );
+  const showWorkInPlace =
+    isActive || hasPendingApproval || turn.terminalState !== undefined;
+  const showSummary = !showWorkInPlace && turn.traceParts.length > 0;
+  const completedAt = turn.completedAt ?? camelCompletedAt(turn.message);
+  const messageTime =
+    completedAt === undefined ? null : formatCamelMessageTime(completedAt);
+  const hasActions =
+    !showWorkInPlace && Boolean(messageTime || turn.copyText || onFork);
+  const thinkingActivity = deriveThinkingActivity(
+    turn.traceParts.at(-1)?.part ?? turn.finalParts.at(-1)?.part,
+  );
+  const hasRunningTool = turn.traceParts.some(
+    ({ part }) =>
+      toolNameOfPart(part) !== null &&
+      getCamelToolPresentation(part, isActive).running,
+  );
+  const activeActivity = hasPendingSteer
+    ? pendingSteerActivity
+    : thinkingActivity;
+
+  return (
+    <div
+      className="group/turn"
+      data-message-id={turn.actionMessageId}
+      data-message-role="assistant"
+      data-turn-step-count={turn.stepCount}
+      translate={showWorkInPlace ? "no" : undefined}
+    >
+      <div className="flex flex-col gap-1">
+        {showSummary && (
+          <TurnSummaryBar
+            durationMs={turn.durationMs}
+            stepCount={turn.stepCount}
+            showSeparator={
+              turn.finalParts.length > 0 || turn.terminalState !== undefined
+            }
+          >
+            {turn.traceParts.map((partRef) => renderPart(partRef))}
+          </TurnSummaryBar>
+        )}
+        {showWorkInPlace && turn.traceParts.length > 0 && (
+          <div className="max-w-none space-y-1" data-camel-turn-trace="">
+            {turn.traceParts.map((partRef) => renderPart(partRef, isActive))}
+          </div>
+        )}
+        {(turn.finalParts.length > 0 ||
+          turn.terminalState?.kind === "error") && (
+          <div className="max-w-none space-y-4" data-camel-final-answer="">
+            {turn.finalParts.map((partRef) => renderPart(partRef, isActive))}
+            {turn.terminalState?.kind === "error" && (
+              <div
+                className="flex items-start gap-2 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+                data-part-type="error"
+                role="alert"
+              >
+                <TriangleAlertIcon className="mt-0.5 size-4 shrink-0" />
+                <div>
+                  <div className="font-medium">
+                    {turn.terminalState.title}
+                  </div>
+                  {turn.terminalState.body && (
+                    <div className="mt-0.5 text-xs opacity-80">
+                      {turn.terminalState.body}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {turn.terminalState?.kind === "interrupted" && (
+          <div
+            className="px-1 py-1 text-xs text-muted-foreground/60"
+            data-camel-turn-status="interrupted"
+            role="status"
+          >
+            {turn.terminalState.title}
+          </div>
+        )}
+        {hasActions && (
+          <div
+            className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover/turn:opacity-100 group-focus-within/turn:opacity-100 pointer-coarse:opacity-100"
+            role="group"
+            aria-label="Message actions"
+          >
+            {messageTime && (
+              <span className="mr-1 text-xs text-muted-foreground">
+                {messageTime}
+              </span>
+            )}
+            {onFork && (
+              <ForkAction messageId={turn.actionMessageId} onFork={onFork} />
+            )}
+            {turn.copyText && <ClipboardAction text={turn.copyText} />}
+          </div>
+        )}
+        {isActive && turn.finalParts.length === 0 && !hasRunningTool && (
+          <ThinkingIndicator {...activeActivity} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CamelChatMessages({
+  messages,
+  status,
+  finalToolNames,
+  isHydrating = false,
+  isRecovering = false,
+  isServerStreaming = false,
+  showActivityStatus = false,
+  activityStatusLabel,
+  hasPendingSteer = false,
+  startedWithPending = false,
+  error,
+  onRetry,
+  onApprove,
+  onSuggestion,
+  onAnswer,
+  onFork,
+  getToolApproval,
+  resolveUrl,
+  inlineApprovalActions = true,
+}: CamelChatMessagesProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const isActive = status === "submitted" || status === "streaming";
+  const items = useMemo(
+    () => projectCamelMessages(messages, finalToolNames),
+    [messages, finalToolNames],
+  );
+  const presentedToolApproval = (part: unknown) => {
+    const approval = getToolApproval?.(part) ?? toolApprovalOf(part);
+    return !inlineApprovalActions && approval?.approved === undefined && approval
+      ? { ...approval, approved: false }
+      : approval;
+  };
+  const lastItem = items.at(-1);
+  const activeAssistantMessageId =
+    isActive && lastItem?.kind === "assistant"
+      ? lastItem.actionMessageId
+      : null;
+
+  const syncScrollButton = useCallback(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const distance =
+      element.scrollHeight - element.scrollTop - element.clientHeight;
+    setShowScrollButton(distance > 120);
+  }, []);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element || showScrollButton) return;
+    element.scrollTo({ top: element.scrollHeight });
+  }, [messages, status, showScrollButton]);
+
+  return (
+    <div
+      className="relative flex min-h-0 flex-1 flex-col overflow-hidden"
+      data-sb-message-panel=""
+      data-camel-chat-transcript=""
+      data-status={status}
+      aria-busy={isActive || isHydrating}
+    >
+      {showActivityStatus && (isRecovering || isServerStreaming) && (
+        <div
+          className="absolute inset-x-0 top-0 z-10 flex h-7 items-center justify-center gap-2 bg-background/85 text-xs text-muted-foreground backdrop-blur-sm"
+          role="status"
+        >
+          <span className="size-1.5 animate-pulse rounded-full bg-blue-500" />
+          {activityStatusLabel ?? (isRecovering ? "Recovering…" : "Running…")}
+        </div>
+      )}
+      <div
+        ref={scrollRef}
+        onScroll={syncScrollButton}
+        tabIndex={0}
+        role="region"
+        aria-label="Chat messages"
+        className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden"
+      >
+        <div className="mx-auto flex w-full max-w-3xl flex-col px-4 pb-6 pt-2 md:px-6">
+          {messages.length === 0 && !startedWithPending && !isHydrating ? (
+            <div className="flex min-h-56 items-center justify-center text-center font-[family-name:var(--font-display)] text-4xl text-foreground">
+              How can I help?
+            </div>
+          ) : null}
+          {items.map((item) =>
+            item.kind === "assistant" ? (
+              <AssistantTurn
+                key={item.key}
+                turn={item}
+                isActive={item.actionMessageId === activeAssistantMessageId}
+                hasPendingSteer={hasPendingSteer}
+                hasPendingApproval={item.parts.some((partRef) => {
+                  const approval =
+                    getToolApproval?.(partRef.part) ??
+                    toolApprovalOf(partRef.part);
+                  return approval != null && approval.approved === undefined;
+                })}
+                onFork={onFork}
+                onApprove={onApprove}
+                onSuggestion={onSuggestion}
+                onAnswer={onAnswer}
+                getToolApproval={presentedToolApproval}
+                resolveUrl={resolveUrl}
+              />
+            ) : (
+              <StandaloneMessage key={item.key} item={item} />
+            ),
+          )}
+          {error != null && <CamelChatError error={error} onRetry={onRetry} />}
+          {isActive && activeAssistantMessageId === null && (
+            <ThinkingIndicator
+              {...(hasPendingSteer ? pendingSteerActivity : {})}
+            />
+          )}
+          <div ref={endRef} />
+        </div>
+      </div>
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-background to-transparent" />
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className={cn(
+          "absolute bottom-3 left-1/2 z-20 -translate-x-1/2 rounded-full border-border/50 bg-background/80 shadow-md backdrop-blur-sm transition-all duration-200",
+          showScrollButton
+            ? "translate-y-0 opacity-100"
+            : "pointer-events-none translate-y-2 opacity-0",
+        )}
+        onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
+        aria-label="Scroll to bottom"
+      >
+        <ArrowDownIcon className="size-4" />
+      </Button>
+      {isHydrating && (
+        <div className="absolute inset-0 z-30 grid place-items-center bg-background/90">
+          <span className="text-sm text-muted-foreground">
+            Loading conversation…
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}