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

package/demo/cloud-os-chat-showcase.tsx

@@ -0,0 +1,470 @@
+import {
+  ArrowsOutSimple,
+  Blueprint,
+  Info,
+  Moon,
+  Pulse,
+  Sun,
+} from "@phosphor-icons/react";
+import { useCallback, useMemo, useState } from "react";
+import {
+  CloudOsChatInput,
+  CloudOsChatMessages,
+  CloudOsRoot,
+  CloudOsWorkspacePanel,
+  CloudOsWorkspaceSplit,
+  WorkshopIconButton,
+  buildCloudOsEntries,
+  type CloudOsAttachmentView,
+  type CloudOsMode,
+} from "../cloud-os";
+import {
+  defaultPrompt,
+  demoModels,
+  flowSteps,
+  messagesForScenario,
+  scenarios,
+  type DemoScenario,
+  type DemoScenarioMeta,
+} from "./chat-scenarios";
+
+/**
+ * cloud-os 版快速预览。场景表和 camel-chat-showcase 共用 `chat-scenarios.ts`,
+ * 所以两边的状态逐条对齐(同样 22 个场景、同样的 7 步流程条、同样的初始 URL 参数)。
+ * 差别只在外壳:这里是 cloudflare-os 的左聊天 / 右工作区双栏。
+ */
+
+const cloudOsModels = demoModels.map((model) => ({
+  id: model.value,
+  name: model.label,
+}));
+
+function initialScenario(): DemoScenario {
+  if (typeof window === "undefined") return "complete";
+  const value = new URLSearchParams(window.location.search).get("scenario");
+  return value && Object.hasOwn(scenarios, value)
+    ? (value as DemoScenario)
+    : "complete";
+}
+
+/** 右栏「Activity」页:把同一份消息流投影成一条工作流水,验证面板确实吃 UIMessage。 */
+function ActivityTab({
+  entries,
+}: {
+  entries: ReturnType<typeof buildCloudOsEntries>;
+}) {
+  const rows = entries.flatMap((entry) =>
+    entry.type === "assistant"
+      ? entry.blocks.flatMap((block) =>
+          block.kind === "toolGroup"
+            ? block.group.calls.map((call) => ({
+                key: `${block.key}-${call.toolCallId}`,
+                name: call.toolName,
+                state: call.failed
+                  ? "failed"
+                  : call.running
+                    ? "running"
+                    : "done",
+              }))
+            : [],
+        )
+      : [],
+  );
+
+  if (rows.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center px-6 text-center">
+        <p className="m-0 max-w-[320px] text-[13px] leading-[19px] text-kumo-subtle">
+          这个场景还没有工具调用。切到「工具执行中」「并行与子 Agent」看活动流水。
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1 p-3">
+      {rows.map((row) => (
+        <div
+          key={row.key}
+          className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-subtle hover:bg-kumo-tint/50"
+        >
+          <span
+            className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${
+              row.state === "failed"
+                ? "bg-kumo-danger"
+                : row.state === "running"
+                  ? "animate-pulse bg-kumo-brand motion-reduce:animate-none"
+                  : "bg-kumo-success"
+            }`}
+            aria-hidden="true"
+          />
+          <span className="min-w-0 flex-1 truncate font-mono text-[12px]">
+            {row.name}
+          </span>
+          <span className="flex-shrink-0 text-[11px] uppercase tracking-[0.06em] text-kumo-inactive">
+            {row.state}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function PartsTab({ messagesJson }: { messagesJson: string }) {
+  return (
+    <pre className="m-0 h-full overflow-auto bg-kumo-base p-3 font-mono text-[11px] leading-[17px] text-kumo-subtle whitespace-pre-wrap">
+      {messagesJson}
+    </pre>
+  );
+}
+
+export function CloudOsChatShowcase() {
+  const [mode, setMode] = useState<CloudOsMode>("light");
+  const [scenario, setScenario] = useState<DemoScenario>(initialScenario);
+  const [prompt, setPrompt] = useState(defaultPrompt);
+  const [humanAnswer, setHumanAnswer] = useState("管理层");
+  const [model, setModel] = useState<string | null>(cloudOsModels[0].id);
+  const [value, setValue] = useState("");
+  const [attachments, setAttachments] = useState<CloudOsAttachmentView[]>([]);
+  const [approval, setApproval] = useState<boolean | undefined>();
+  const [showThinkingTraces, setShowThinkingTraces] = useState(true);
+  const [workspaceOpen, setWorkspaceOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState("activity");
+  const [lastEvent, setLastEvent] = useState("等待交互");
+
+  const selectScenario = useCallback((next: DemoScenario) => {
+    setScenario(next);
+    const url = new URL(window.location.href);
+    url.searchParams.set("scenario", next);
+    window.history.replaceState(window.history.state, "", url);
+  }, []);
+
+  const scenarioMeta: DemoScenarioMeta = scenarios[scenario];
+  const status = scenarioMeta.status;
+  const messages = useMemo(
+    () => messagesForScenario(scenario, prompt, humanAnswer, approval),
+    [approval, humanAnswer, prompt, scenario],
+  );
+
+  // 待授权的 part → 授权 id。和 camel showcase 的 approvalView 判据一致。
+  const approvalIdOf = useCallback((part: unknown): string | undefined => {
+    const record =
+      part && typeof part === "object"
+        ? (part as { type?: unknown; state?: unknown })
+        : {};
+    return (record.type === "tool-write_file" ||
+      record.type === "tool-cancel_schedule") &&
+      record.state === "approval-requested"
+      ? "cloud-os-demo-approval"
+      : undefined;
+  }, []);
+
+  const entries = useMemo(
+    () =>
+      buildCloudOsEntries({
+        messages,
+        isActive: status === "submitted" || status === "streaming",
+        showThinkingTraces,
+        approvalIdOf,
+      }),
+    [approvalIdOf, messages, showThinkingTraces, status],
+  );
+
+  const messagesJson = useMemo(
+    () => JSON.stringify(messages, null, 2),
+    [messages],
+  );
+
+  const statusError = useMemo(
+    () =>
+      scenario === "error"
+        ? new Error("数据源连接中断。已完成步骤仍然保留,请点击 Retry 继续。")
+        : undefined,
+    [scenario],
+  );
+
+  const addFiles = useCallback((files: readonly File[]) => {
+    setAttachments((current) => [
+      ...current,
+      ...files.map((file, index) => ({
+        id: `${file.name}-${file.lastModified}-${index}`,
+        filename: file.name,
+        mediaType: file.type,
+        size: file.size,
+        previewUrl: file.type.startsWith("image/")
+          ? URL.createObjectURL(file)
+          : undefined,
+        status: "ready" as const,
+      })),
+    ]);
+    setLastEvent(`添加了 ${files.length} 个附件`);
+  }, []);
+
+  const removeAttachment = useCallback((id: string) => {
+    setAttachments((current) => {
+      const removed = current.find((attachment) => attachment.id === id);
+      if (removed?.previewUrl?.startsWith("blob:")) {
+        URL.revokeObjectURL(removed.previewUrl);
+      }
+      return current.filter((attachment) => attachment.id !== id);
+    });
+    setLastEvent("移除了附件");
+  }, []);
+
+  return (
+    <CloudOsRoot mode={mode} className="flex h-dvh min-h-0 w-full flex-col overflow-hidden">
+      {/* 顶栏:高度对齐 cloudflare-os 的 h-14 */}
+      <header className="relative z-30 flex flex-shrink-0 flex-wrap items-center gap-2 border-b border-kumo-line bg-kumo-base px-4 py-2">
+        <a
+          href="/"
+          className="rounded-md px-2 py-1 text-[12px] leading-4 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
+        >
+          ← 返回系统
+        </a>
+        <div className="min-w-48 flex-1">
+          <h1 className="m-0 text-[14px] leading-5 font-semibold tracking-[-0.25px] text-kumo-default">
+            cloud-os Chat · 真实回合验收
+          </h1>
+          <p className="m-0 text-[11px] leading-4 text-kumo-inactive">
+            与 camel-chat-showcase 同一份场景表,外壳换成 cloudflare-os 的左聊天 / 右工作区
+          </p>
+        </div>
+        <button
+          type="button"
+          className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-kumo-line bg-kumo-base px-2.5 text-[12px] leading-4 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
+          onClick={() => setMode((current) => (current === "dark" ? "light" : "dark"))}
+          aria-label="切换主题"
+        >
+          {mode === "dark" ? <Sun size={13} /> : <Moon size={13} />}
+          {mode === "dark" ? "浅色" : "深色"}
+        </button>
+        <button
+          type="button"
+          className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-kumo-line bg-kumo-base px-2.5 text-[12px] leading-4 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default"
+          onClick={() => setWorkspaceOpen((open) => !open)}
+        >
+          <ArrowsOutSimple size={13} />
+          {workspaceOpen ? "收起工作区" : "展开工作区"}
+        </button>
+        <div
+          className="order-last flex basis-full flex-wrap items-center gap-1 border-t border-kumo-line/60 pt-2"
+          role="group"
+          aria-label="消息场景"
+        >
+          <span className="mr-1 text-[12px] leading-4 text-kumo-inactive">消息场景</span>
+          {(Object.entries(scenarios) as [DemoScenario, DemoScenarioMeta][]).map(
+            ([option, meta]) => {
+              const selected = scenario === option;
+              return (
+                <button
+                  key={option}
+                  type="button"
+                  data-scenario={option}
+                  aria-pressed={selected}
+                  className={[
+                    "rounded-md border px-2 py-1 text-[11px] leading-4 transition-colors focus-visible:outline-none",
+                    selected
+                      ? "border-kumo-brand/45 bg-kumo-brand/10 text-kumo-default"
+                      : "border-kumo-line text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default",
+                  ].join(" ")}
+                  onClick={() => {
+                    selectScenario(option);
+                    setApproval(undefined);
+                    setLastEvent(`切换到：${meta.label}`);
+                  }}
+                >
+                  {meta.label}
+                </button>
+              );
+            },
+          )}
+        </div>
+      </header>
+
+      <CloudOsWorkspaceSplit
+        workspaceOpen={workspaceOpen}
+        isAgentActive={status === "submitted" || status === "streaming"}
+        chat={
+          <div className="flex h-full min-h-0 flex-col bg-kumo-base">
+            <aside
+              className="flex-shrink-0 border-b border-kumo-line bg-kumo-elevated/60 px-4 py-3"
+              aria-label="消息 UI 验收说明"
+            >
+              <div className="flex items-start gap-2.5">
+                <Info size={15} className="mt-0.5 flex-shrink-0 text-kumo-inactive" />
+                <div className="min-w-0">
+                  <h2 className="m-0 text-[13px] leading-[18px] font-medium tracking-[-0.25px] text-kumo-default">
+                    消息体说明
+                  </h2>
+                  <p className="m-0 mt-0.5 text-[12px] leading-[18px] text-kumo-subtle">
+                    {scenarioMeta.description}
+                    {scenario !== "empty" &&
+                      scenario !== "commands" &&
+                      " 下方始终使用同一个用户问题,便于直接比较状态变化。"}
+                  </p>
+                </div>
+              </div>
+              <ol className="mt-2.5 flex flex-wrap gap-1.5" aria-label="工具收齐流程">
+                {flowSteps.map((step, index) => {
+                  const reached = index <= scenarioMeta.flowStep;
+                  return (
+                    <li
+                      key={`${step.label}-${index}`}
+                      className="min-w-0"
+                      style={{ flex: "1 1 8rem" }}
+                    >
+                      <button
+                        type="button"
+                        className={[
+                          "flex w-full items-center gap-2 rounded-md border px-2 py-1.5 text-left text-[11px] leading-4 transition-colors",
+                          reached
+                            ? "border-kumo-line bg-kumo-tint text-kumo-default"
+                            : "border-kumo-line/60 text-kumo-inactive hover:bg-kumo-tint/50",
+                        ].join(" ")}
+                        onClick={() => {
+                          selectScenario(step.scenario);
+                          setApproval(undefined);
+                          setLastEvent(`查看流程：${step.label}`);
+                        }}
+                      >
+                        <span
+                          className={[
+                            "grid size-4 flex-shrink-0 place-items-center rounded-full font-mono text-[9px]",
+                            reached
+                              ? "bg-kumo-contrast text-kumo-inverse"
+                              : "bg-kumo-fill text-kumo-inactive",
+                          ].join(" ")}
+                        >
+                          {index + 1}
+                        </span>
+                        <span className="truncate">{step.label}</span>
+                      </button>
+                    </li>
+                  );
+                })}
+              </ol>
+            </aside>
+
+            <CloudOsChatMessages
+              messages={messages}
+              status={status}
+              isHydrating={scenario === "hydrating"}
+              isRecovering={scenario === "recovering"}
+              recoveryStatusLabel="模型响应暂时中断,正在重试…"
+              showThinkingTraces={showThinkingTraces}
+              approvalIdOf={approvalIdOf}
+              error={statusError}
+              constrainWidth={!workspaceOpen}
+              onRetry={() => {
+                selectScenario("recovering");
+                setLastEvent("已重试,从失败步骤继续执行");
+              }}
+              onApprove={(_approvalId, decision) => {
+                const approved = decision !== "deny";
+                if (scenario === "schedule_cancel") {
+                  setApproval(approved);
+                  setLastEvent(approved ? "已允许取消定时任务" : "已拒绝取消定时任务");
+                  return;
+                }
+                setApproval(approved);
+                selectScenario(approved ? "collected" : "error");
+                setLastEvent(approved ? "已允许写入报告" : "已拒绝写入报告");
+              }}
+              onSuggestion={(text) => {
+                setPrompt(text);
+                selectScenario("submitted");
+                setValue("");
+                setLastEvent(`已发送后续问题：${text}`);
+              }}
+              onAnswer={(payload) => {
+                const data =
+                  payload && typeof payload === "object"
+                    ? (payload as { selections?: string[][]; text?: string })
+                    : {};
+                const answer = [
+                  ...(data.selections?.flat() ?? []),
+                  data.text?.trim() ?? "",
+                ]
+                  .filter(Boolean)
+                  .join("、");
+                if (answer) setHumanAnswer(answer);
+                selectScenario("planning");
+                setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+              }}
+            />
+
+            <div className="flex-shrink-0 border-t border-kumo-line bg-kumo-base">
+              <CloudOsChatInput
+                value={value}
+                onChange={setValue}
+                status={status}
+                models={cloudOsModels}
+                selectedModel={model}
+                onModelChange={setModel}
+                attachments={attachments}
+                onFilesSelected={addFiles}
+                onAttachmentRemove={removeAttachment}
+                showThinkingTraces={showThinkingTraces}
+                onToggleThinkingTraces={() => {
+                  setShowThinkingTraces((current) => !current);
+                  setLastEvent(
+                    showThinkingTraces ? "已隐藏思考过程" : "已显示思考过程",
+                  );
+                }}
+                placeholder="Ask a follow-up…"
+                onSubmit={() => {
+                  if (value.trim()) setPrompt(value.trim());
+                  selectScenario("submitted");
+                  setApproval(undefined);
+                  setLastEvent(`已提交：${value.trim() || "附件"}`);
+                  setValue("");
+                  setAttachments([]);
+                }}
+                onStop={() => {
+                  selectScenario("interrupted");
+                  setLastEvent("已停止生成,保留当前回合");
+                }}
+                footnote={
+                  <output aria-live="polite" className="truncate">
+                    最近交互：{lastEvent}
+                  </output>
+                }
+              />
+            </div>
+          </div>
+        }
+        workspace={
+          <CloudOsWorkspacePanel
+            title="Agent 工作台"
+            titleIcon={Pulse}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            onClose={() => setWorkspaceOpen(false)}
+            actions={
+              <WorkshopIconButton
+                aria-label="Blueprints"
+                title="Blueprints"
+                onClick={() => setLastEvent("打开 Blueprints(演示占位)")}
+              >
+                <Blueprint size={16} />
+              </WorkshopIconButton>
+            }
+            tabs={[
+              {
+                value: "activity",
+                label: "Activity",
+                count: entries.filter((entry) => entry.type === "assistant").length,
+                content: <ActivityTab entries={entries} />,
+              },
+              {
+                value: "parts",
+                label: "Parts",
+                content: <PartsTab messagesJson={messagesJson} />,
+              },
+            ]}
+          />
+        }
+      />
+    </CloudOsRoot>
+  );
+}

package/demo/index.ts

@@ -1,4 +1,6 @@
 export * from "./camel-chat-showcase";
+export * from "./chat-scenarios";
+export * from "./cloud-os-chat-showcase";
 export * from "./fixtures";
 export * from "./message-panel-chat-showcase";
 export * from "./message-panel-gallery";

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.0",
+  "version": "0.1.3-alpha.2",
   "type": "module",
   "files": [
     "src",
-    "demo"
+    "demo",
+    "cloud-os"
   ],
   "publishConfig": {
     "access": "public"
@@ -13,6 +14,8 @@
     ".": "./src/index.ts",
     "./composer": "./src/composer/index.ts",
     "./styles.css": "./src/styles/index.css",
+    "./cloud-os": "./cloud-os/index.ts",
+    "./cloud-os.css": "./cloud-os/styles/cloud-os.css",
     "./demo": "./demo/index.ts"
   },
   "peerDependencies": {
@@ -22,22 +25,31 @@
   },
   "dependencies": {
     "@assistant-ui/react": "^0.15.1",
+    "@phosphor-icons/react": "^2.1.10",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "lucide-react": "^1.24.0",
     "radix-ui": "^1.6.2",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "streamdown": "^2.5.0",
     "thinking-orbs": "0.1.1",
     "use-stick-to-bottom": "^1.1.6"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "typescript": "^7.0.2"
+    "@vitejs/plugin-react": "^6.0.3",
+    "tailwindcss": "^4.3.2",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.4"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "dev:cloud-os": "vite",
+    "build:cloud-os": "vite build"
   }
 }