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

package/cloud-os/chat/rich-blocks.tsx

@@ -0,0 +1,640 @@
+import {
+  Bell,
+  CaretRight,
+  Check,
+  CircleNotch,
+  ListChecks,
+  ShieldCheck,
+  UsersThree,
+  WarningCircle,
+} from "@phosphor-icons/react";
+import { useState } from "react";
+import { Tooltip } from "../primitives/tooltip";
+import { WorkshopButton } from "../primitives/workshop-controls";
+import { MarkdownMessage } from "./markdown-message";
+import { WorkIcon } from "./tool-rows";
+import type {
+  ParallelTool,
+  PlanStep,
+  SubAgentView,
+} from "./transcript-model";
+import type { CloudOsToolCall } from "./tool-presentation";
+
+/**
+ * UIMessage 协议里存在、gadgets 那套没有的几类 part —— 计划快照、原位提问、
+ * 后续建议、定时任务、并行/子 Agent、原位授权。视觉语言全部沿用 cloud-os:
+ * 折叠工作行用 `px-1.5 py-1` 的行式布局,卡片用
+ * `themed-surface-inset rounded-2xl border-kumo-line/70 bg-kumo-elevated/45 p-3`,
+ * 授权卡沿用 renderActionCard 的 blocking callout(brand/40 边 + brand/10 底)。
+ */
+
+// ── 计划快照 ────────────────────────────────────────────────────────────────
+
+export function PlanBlock({
+  steps,
+  running,
+}: {
+  steps: PlanStep[];
+  running: boolean;
+}) {
+  const done = steps.filter((step) => step.status === "done").length;
+  const current = steps.find((step) => step.status === "in_progress");
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div className="group -ml-0.5">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full cursor-pointer items-center gap-3 rounded-xl px-1.5 py-1 text-left text-kumo-subtle transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.995]"
+        aria-expanded={open}
+      >
+        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+          <WorkIcon Icon={ListChecks} />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="flex min-w-0 items-center gap-2 text-[14px] leading-5 tracking-[-0.25px]">
+            <span className={`min-w-0 truncate ${running ? "cos-thinking-shimmer" : ""}`}>
+              Plan · {done}/{steps.length}
+            </span>
+            <CaretRight
+              size={13}
+              weight="bold"
+              className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${open ? "rotate-90" : ""}`}
+            />
+          </span>
+          {!open && current && (
+            <span className="mt-1 block truncate font-mono text-[12px] leading-4 text-kumo-inactive">
+              {current.text}
+            </span>
+          )}
+        </span>
+      </button>
+      {open && (
+        <div className="themed-surface-inset ml-8 mt-1 space-y-1.5 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3">
+          {steps.map((step, index) => (
+            <div
+              key={`${step.text}-${index}`}
+              className="flex items-start gap-2.5 text-[13px] leading-[19px] tracking-[-0.25px]"
+            >
+              <span
+                className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center"
+                aria-hidden="true"
+              >
+                {step.status === "done" ? (
+                  <Check size={12} weight="bold" className="text-kumo-success" />
+                ) : step.status === "in_progress" ? (
+                  <CircleNotch
+                    size={12}
+                    weight="bold"
+                    className="animate-spin text-kumo-brand motion-reduce:animate-none"
+                  />
+                ) : (
+                  <span className="h-1.5 w-1.5 rounded-full bg-kumo-fill" />
+                )}
+              </span>
+              <span
+                className={
+                  step.status === "done"
+                    ? "min-w-0 flex-1 text-kumo-inactive line-through"
+                    : step.status === "in_progress"
+                      ? "min-w-0 flex-1 font-medium text-kumo-default"
+                      : "min-w-0 flex-1 text-kumo-subtle"
+                }
+              >
+                {step.text}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── 原位提问 ────────────────────────────────────────────────────────────────
+
+interface AskQuestion {
+  prompt: string;
+  options: string[];
+  multi: boolean;
+}
+
+function questionsOf(input: Record<string, unknown>): AskQuestion[] {
+  if (Array.isArray(input.questions)) {
+    return input.questions.map((item) => {
+      const question = (item ?? {}) as Record<string, unknown>;
+      return {
+        prompt: String(question.prompt ?? question.question ?? "Choose an option"),
+        options: Array.isArray(question.options)
+          ? question.options.filter((o): o is string => typeof o === "string")
+          : [],
+        multi: question.kind === "multi" || question.multiSelect === true,
+      };
+    });
+  }
+  if (typeof input.question === "string") {
+    return [
+      {
+        prompt: input.question,
+        options: Array.isArray(input.options)
+          ? input.options.filter((o): o is string => typeof o === "string")
+          : [],
+        multi: input.multiSelect === true,
+      },
+    ];
+  }
+  return [];
+}
+
+export function AskUserBlock({
+  call,
+  answeredText,
+  onAnswer,
+}: {
+  call: CloudOsToolCall;
+  answeredText?: string;
+  onAnswer: (payload: unknown) => void;
+}) {
+  const questions = questionsOf(call.input);
+  const [selections, setSelections] = useState<string[][]>(() =>
+    questions.map(() => []),
+  );
+  const [submitted, setSubmitted] = useState(false);
+  const external = answeredText?.trim() ?? "";
+  const externalSelections = new Set(
+    external.split("、").map((value) => value.trim()).filter(Boolean),
+  );
+  const resolved = submitted || Boolean(external);
+  const valid = questions.every(
+    (question, index) =>
+      question.options.length === 0 || (selections[index]?.length ?? 0) > 0,
+  );
+
+  return (
+    <div className="max-w-[860px]">
+      <div className="rounded-2xl border border-kumo-line bg-kumo-base px-4 py-3">
+        {/* 同 ApprovalBlock:窄栏下让提交按钮整体换行,别把问题正文挤没。 */}
+        <div className="flex flex-wrap items-start gap-3">
+          <span
+            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-kumo-tint text-kumo-brand"
+            aria-hidden="true"
+          >
+            <Bell size={18} weight="fill" />
+          </span>
+          <div className="min-w-[12rem] flex-1 space-y-2.5">
+            {questions.map((question, questionIndex) => (
+              <div key={`${question.prompt}:${questionIndex}`} className="space-y-1.5">
+                <p className="m-0 text-[14px] leading-5 font-medium tracking-[-0.25px] text-kumo-default">
+                  {question.prompt}
+                </p>
+                <div className="flex flex-wrap gap-1.5">
+                  {question.options.map((option) => {
+                    const selected = external
+                      ? externalSelections.has(option)
+                      : selections[questionIndex]?.includes(option);
+                    return (
+                      <button
+                        key={option}
+                        type="button"
+                        disabled={resolved}
+                        onClick={() =>
+                          setSelections((current) =>
+                            current.map((values, index) => {
+                              if (index !== questionIndex) return values;
+                              if (!question.multi) return [option];
+                              return values.includes(option)
+                                ? values.filter((value) => value !== option)
+                                : [...values, option];
+                            }),
+                          )
+                        }
+                        className={`inline-flex h-7 cursor-pointer items-center rounded-lg border px-2.5 text-[13px] leading-none tracking-[-0.25px] transition-colors duration-150 ease-out disabled:cursor-default ${
+                          selected
+                            ? "border-kumo-brand/45 bg-kumo-brand/10 text-kumo-default"
+                            : "border-kumo-line bg-kumo-base text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
+                        }`}
+                      >
+                        {option}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="ml-auto flex flex-shrink-0 items-center self-center">
+            <WorkshopButton
+              tone="primary"
+              disabled={resolved || !valid}
+              onClick={() => {
+                onAnswer({ selections, text: "" });
+                setSubmitted(true);
+              }}
+              className="!h-8 gap-1 !rounded-lg text-[12px]"
+            >
+              {resolved ? "Submitted" : "Submit"}
+            </WorkshopButton>
+          </div>
+        </div>
+        {external && (
+          <p className="mt-2 mb-0 pl-12 text-[12px] leading-4 text-kumo-inactive">
+            Answered: {external}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── 后续建议 ────────────────────────────────────────────────────────────────
+
+export function SuggestionsBlock({
+  items,
+  onSuggestion,
+}: {
+  items: string[];
+  onSuggestion: (text: string) => void;
+}) {
+  return (
+    <div className="max-w-[860px] space-y-2 pt-1">
+      <div className="flex items-center gap-2 px-1.5 text-[13px] leading-[18px] text-kumo-success">
+        <Check size={14} weight="bold" />
+        <span>Task complete</span>
+      </div>
+      <div className="flex flex-wrap gap-1.5 px-1.5">
+        {items.map((item) => (
+          <button
+            key={item}
+            type="button"
+            onClick={() => onSuggestion(item)}
+            className="inline-flex h-7 cursor-pointer items-center rounded-full border border-kumo-line bg-kumo-base px-3 text-[13px] leading-none tracking-[-0.25px] text-kumo-subtle transition-colors duration-150 ease-out hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none active:scale-[0.98]"
+          >
+            {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(input: Record<string, unknown>): string {
+  const trigger = (input.trigger ?? {}) as Record<string, unknown>;
+  let cadence = "";
+  if (trigger.kind === "once-in") cadence = `In ${scheduleDuration(trigger.seconds)}`;
+  else if (trigger.kind === "once-at" && typeof trigger.at === "string") {
+    cadence = `Once at ${trigger.at}`;
+  } else if (trigger.kind === "interval") {
+    cadence = `Every ${scheduleDuration(trigger.seconds)}`;
+  } else if (trigger.kind === "cron" && typeof trigger.cron === "string") {
+    cadence = `Cron ${trigger.cron}`;
+  }
+  if (!cadence) cadence = String(input.cadence ?? input.schedule ?? "Scheduled");
+  const timezone =
+    typeof input.timezone === "string"
+      ? input.timezone
+      : typeof input.tz === "string"
+        ? input.tz
+        : "";
+  return timezone ? `${cadence} · ${timezone}` : cadence;
+}
+
+/** `schedule` 工具的 details 是 `{ scheduled: true, id }`,id 即任务在 SchedulerAgent 里的主键。 */
+function scheduleIdOf(output: unknown): string {
+  if (typeof output !== "object" || output === null) return "";
+  const id = (output as Record<string, unknown>).id;
+  return typeof id === "string" ? id : "";
+}
+
+export function ScheduleBlock({
+  call,
+  onOpen,
+}: {
+  call: CloudOsToolCall;
+  /** 有 id 且宿主给了回调时,整张卡变成跳到「已安排」详情的按钮。 */
+  onOpen?: (scheduleId: string) => void;
+}) {
+  const state = call.failed ? "failed" : call.running ? "running" : "scheduled";
+  const scheduleId = state === "scheduled" ? scheduleIdOf(call.output) : "";
+  const clickable = Boolean(scheduleId && onOpen);
+  const Card = clickable ? "button" : "div";
+  return (
+    <div className="max-w-[860px]">
+      <Card
+        {...(clickable
+          ? {
+              type: "button" as const,
+              onClick: () => onOpen?.(scheduleId),
+              "aria-label": `Open scheduled task: ${String(call.input.label ?? call.input.title ?? "Scheduled task")}`,
+            }
+          : {})}
+        className={`w-full rounded-2xl border border-kumo-line bg-kumo-base px-4 py-3 text-left${
+          clickable
+            ? " cursor-pointer transition-colors duration-150 ease-out hover:bg-kumo-tint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/50"
+            : ""
+        }`}
+      >
+        <div className="flex flex-wrap items-start gap-3">
+          <span
+            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-kumo-tint text-kumo-subtle"
+            aria-hidden="true"
+          >
+            <Bell size={18} />
+          </span>
+          <div className="min-w-[10rem] flex-1">
+            <span className="block truncate text-[14px] leading-5 font-medium tracking-[-0.25px] text-kumo-default">
+              {String(call.input.label ?? call.input.title ?? "Scheduled task")}
+            </span>
+            <p className="mt-1 mb-0 text-[12px] leading-4 text-kumo-inactive">
+              {scheduleCadence(call.input)}
+            </p>
+          </div>
+          <span
+            className={`ml-auto flex flex-shrink-0 items-center gap-1 self-center text-[12px] leading-4 font-medium ${
+              state === "failed"
+                ? "text-kumo-danger"
+                : state === "running"
+                  ? "text-kumo-brand"
+                  : "text-kumo-success"
+            }`}
+          >
+            {state === "failed" ? (
+              <WarningCircle size={13} weight="fill" />
+            ) : state === "running" ? (
+              <CircleNotch
+                size={13}
+                weight="bold"
+                className="animate-spin motion-reduce:animate-none"
+              />
+            ) : (
+              <Check size={13} weight="bold" />
+            )}
+            {state === "failed"
+              ? "Failed"
+              : state === "running"
+                ? "Scheduling…"
+                : "Scheduled"}
+          </span>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+// ── 原位授权(照搬 renderActionCard 的 blocking callout)────────────────────
+
+export type ApprovalDecision = "deny" | "allow_once" | "allow_level";
+
+export function ApprovalBlock({
+  call,
+  approvalId,
+  disabled = false,
+  onApprove,
+}: {
+  call: CloudOsToolCall;
+  approvalId: string;
+  disabled?: boolean;
+  onApprove: (approvalId: string, decision: ApprovalDecision) => void;
+}) {
+  const title = `${call.toolName} needs approval`;
+  const description =
+    Object.keys(call.input).length > 0
+      ? "```json\n" + JSON.stringify(call.input, null, 2) + "\n```"
+      : "This action pauses the turn until you decide.";
+
+  return (
+    <div className="group/work max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+      {/* 原文件的 blocking callout 是「图标 + 正文 + 右侧动作」一行到底。聊天栏默认
+          只有 420px 宽,一行放不下三段,正文会被挤成 0 宽 —— 所以外层允许换行,
+          动作组在挤不下时整体落到下一行右对齐。 */}
+      <div className="rounded-2xl border border-kumo-brand/40 bg-kumo-brand/10 px-4 py-3">
+        <div className="flex flex-wrap items-start gap-3">
+          <span
+            className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-kumo-tint text-kumo-brand"
+            aria-hidden="true"
+          >
+            <ShieldCheck size={20} weight="fill" />
+          </span>
+          <div className="min-w-[12rem] flex-1">
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+              <span className="min-w-0 truncate font-medium text-kumo-default">
+                {title}
+              </span>
+            </div>
+            <div className="cos-chat-panel cos-markdown mt-1 max-h-[200px] overflow-y-auto pr-1 text-[13px] leading-[18px] text-kumo-subtle">
+              <MarkdownMessage message={description} />
+            </div>
+          </div>
+          <div className="ml-auto flex flex-wrap items-center justify-end gap-1 self-center">
+            <Tooltip content="Reject this action and let the agent continue without it." asChild>
+              <WorkshopButton
+                tone="secondary"
+                disabled={disabled}
+                onClick={() => onApprove(approvalId, "deny")}
+                className="!h-8 !rounded-lg text-[12px]"
+              >
+                Deny
+              </WorkshopButton>
+            </Tooltip>
+            <Tooltip content="Allow just this call." asChild>
+              <WorkshopButton
+                tone="secondary"
+                disabled={disabled}
+                onClick={() => onApprove(approvalId, "allow_once")}
+                className="!h-8 !rounded-lg text-[12px]"
+              >
+                Allow once
+              </WorkshopButton>
+            </Tooltip>
+            <Tooltip content="Allow every action at this execution level, without future prompts." asChild>
+              <WorkshopButton
+                tone="primary"
+                disabled={disabled}
+                onClick={() => onApprove(approvalId, "allow_level")}
+                className="!h-8 gap-1 !rounded-lg text-[12px]"
+              >
+                <Check size={11} weight="bold" />
+                Allow level
+              </WorkshopButton>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── 并行 / 子 Agent ─────────────────────────────────────────────────────────
+
+function StatusDot({ status }: { status: ParallelTool["status"] }) {
+  return (
+    <span
+      className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${
+        status === "failed"
+          ? "bg-kumo-danger"
+          : status === "running"
+            ? "animate-pulse bg-kumo-brand motion-reduce:animate-none"
+            : status === "done"
+              ? "bg-kumo-success"
+              : "bg-kumo-fill"
+      }`}
+      aria-hidden="true"
+    />
+  );
+}
+
+export function ParallelBlock({
+  label,
+  tools,
+}: {
+  label: string;
+  tools: ParallelTool[];
+}) {
+  const done = tools.filter((tool) => tool.status === "done").length;
+  return (
+    <div className="max-w-[860px]">
+      <div className="flex items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+          <WorkIcon Icon={ListChecks} />
+        </span>
+        <span className="min-w-0 truncate">
+          {label} · {done}/{tools.length}
+        </span>
+      </div>
+      <div className="ml-8 mt-1 space-y-1">
+        {tools.map((tool, index) => (
+          <div
+            key={`${tool.label}-${index}`}
+            className="flex items-center gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-subtle"
+          >
+            <StatusDot status={tool.status} />
+            <span className="min-w-0 flex-1 truncate">{tool.label}</span>
+            {tool.meta && (
+              <span className="flex-shrink-0 font-mono text-[11px] leading-4 text-kumo-inactive">
+                {tool.meta}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function SubAgentsBlock({ agents }: { agents: SubAgentView[] }) {
+  return (
+    <div className="max-w-[860px]">
+      <div className="flex items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+        <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+          <WorkIcon Icon={UsersThree} />
+        </span>
+        <span className="min-w-0 truncate">
+          {agents.length === 1 ? "Sub-agent" : `${agents.length} sub-agents`}
+        </span>
+      </div>
+      <div className="ml-8 mt-1 space-y-1">
+        {agents.map((agent, index) => (
+          <div
+            key={`${agent.name}-${index}`}
+            className="flex items-start gap-2 px-1.5 text-[13px] leading-[19px] tracking-[-0.25px]"
+          >
+            <span className="mt-1.5 flex">
+              <StatusDot status={agent.status} />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block truncate font-medium text-kumo-default">
+                {agent.name}
+              </span>
+              {agent.summary && (
+                <span className="block text-kumo-subtle">{agent.summary}</span>
+              )}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── 错误行(照搬 msg.type === "error" 分支)─────────────────────────────────
+
+export function ErrorBlock({
+  title,
+  body,
+  onRetry,
+}: {
+  title: string;
+  body?: string;
+  onRetry?: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div className="group/work max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle">
+      <div className="flex w-full items-center gap-2 px-1.5 py-1">
+        <button
+          type="button"
+          onClick={() => setExpanded((value) => !value)}
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 rounded-md text-left transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.995]"
+          aria-expanded={expanded}
+        >
+          <span
+            className="flex h-5 w-5 flex-shrink-0 items-center justify-center text-kumo-danger"
+            aria-hidden="true"
+          >
+            <WarningCircle size={16} weight="fill" />
+          </span>
+          <span className="flex min-w-0 flex-1 items-center gap-1">
+            <span className="min-w-0 truncate">
+              <span className="font-medium text-kumo-danger">{title}: </span>
+              <span className="text-kumo-subtle">{body}</span>
+            </span>
+            {body && (
+              <CaretRight
+                size={13}
+                weight="bold"
+                className={`flex-shrink-0 text-kumo-inactive transition-transform duration-150 ease-out ${expanded ? "rotate-90" : ""}`}
+              />
+            )}
+          </span>
+        </button>
+        {onRetry && (
+          <Tooltip content="Retry the last action." asChild>
+            <button
+              type="button"
+              onClick={onRetry}
+              className="flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-md px-1 py-0.5 text-[13px] leading-4 font-medium text-kumo-default transition-[color,opacity,transform] duration-150 ease-out hover:text-kumo-default-hover focus-visible:text-kumo-default-hover focus-visible:outline-none active:scale-[0.98]"
+            >
+              Retry
+            </button>
+          </Tooltip>
+        )}
+      </div>
+      {expanded && body && (
+        <div className="ml-8 mt-1">
+          <pre className="max-h-48 overflow-auto rounded-xl border border-kumo-line/70 bg-kumo-base p-3 font-mono text-[12px] leading-[18px] text-kumo-subtle whitespace-pre-wrap">
+            {body}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}