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

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

@@ -0,0 +1,471 @@
+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}`);
+              }}
+              onRespond={async (_toolCallId, response) => {
+                const data =
+                  response && typeof response === "object"
+                    ? (response as { selections?: string[]; text?: string })
+                    : {};
+                const answer = [
+                  ...(data.selections ?? []),
+                  data.text?.trim() ?? "",
+                ]
+                  .filter(Boolean)
+                  .join(" / ");
+                if (answer) setHumanAnswer(answer);
+                selectScenario("planning");
+                setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+                return true;
+              }}
+            />
+
+            <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.1",
+  "version": "0.1.3-alpha.3",
   "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"
   }
 }

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

@@ -1,3 +1,8 @@
+// camel 是 dev-only 的展示变体(App.tsx 的 `/__camel-chat` 路由),没有接生产宿主。
+// 它的交互卡片仍用旧的 `onAnswer(payload)` 回调,**没有**迁到 client-settled tool 的
+// `onRespond(toolCallId, response)` —— 生产聊天面板走的是 cloud-os,已经迁完。
+// 哪天 camel 要上生产,这里必须一起改,否则卡片点了不会把答案回写给那次工具调用。
+
 import type { UIMessage } from "ai";
 import {
   ArrowDownIcon,
@@ -71,10 +76,7 @@ export interface CamelChatMessagesProps {
   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;
+  recoveryStatusLabel?: string;
   hasPendingSteer?: boolean;
   startedWithPending?: boolean;
   error?: unknown;
@@ -164,6 +166,23 @@ export function CamelChatError({
   );
 }
 
+export function CamelChatRecovery({
+  label = "模型响应暂时中断，正在重试…",
+}: {
+  label?: string;
+}) {
+  return (
+    <div
+      className="mt-4 flex items-center gap-2 rounded-lg border border-border/70 bg-muted/40 px-3 py-2 text-sm text-muted-foreground"
+      data-camel-chat-recovery=""
+      role="status"
+    >
+      <Loader2Icon className="size-4 shrink-0 animate-spin" aria-hidden="true" />
+      <span>{label}</span>
+    </div>
+  );
+}
+
 export function CamelApprovalPrompts({
   approvals,
   error,
@@ -1151,6 +1170,7 @@ function RenderAssistantPart({
 function AssistantTurn({
   turn,
   isActive,
+  keepTraceExpanded,
   hasPendingSteer,
   hasPendingApproval,
   onFork,
@@ -1162,6 +1182,7 @@ function AssistantTurn({
 }: {
   turn: CamelAssistantTurn;
   isActive: boolean;
+  keepTraceExpanded: boolean;
   hasPendingSteer: boolean;
   hasPendingApproval: boolean;
   onFork?: (messageId: string) => void | Promise<void>;
@@ -1185,7 +1206,10 @@ function AssistantTurn({
     />
   );
   const showWorkInPlace =
-    isActive || hasPendingApproval || turn.terminalState !== undefined;
+    isActive ||
+    keepTraceExpanded ||
+    hasPendingApproval ||
+    turn.terminalState !== undefined;
   const showSummary = !showWorkInPlace && turn.traceParts.length > 0;
   const completedAt = turn.completedAt ?? camelCompletedAt(turn.message);
   const messageTime =
@@ -1294,9 +1318,7 @@ export function CamelChatMessages({
   finalToolNames,
   isHydrating = false,
   isRecovering = false,
-  isServerStreaming = false,
-  showActivityStatus = false,
-  activityStatusLabel,
+  recoveryStatusLabel,
   hasPendingSteer = false,
   startedWithPending = false,
   error,
@@ -1328,6 +1350,10 @@ export function CamelChatMessages({
     isActive && lastItem?.kind === "assistant"
       ? lastItem.actionMessageId
       : null;
+  const recoveringAssistantMessageId =
+    isRecovering && lastItem?.kind === "assistant"
+      ? lastItem.actionMessageId
+      : null;
 
   const syncScrollButton = useCallback(() => {
     const element = scrollRef.current;
@@ -1341,7 +1367,7 @@ export function CamelChatMessages({
     const element = scrollRef.current;
     if (!element || showScrollButton) return;
     element.scrollTo({ top: element.scrollHeight });
-  }, [messages, status, showScrollButton]);
+  }, [isRecovering, messages, status, showScrollButton]);
 
   return (
     <div
@@ -1351,15 +1377,6 @@ export function CamelChatMessages({
       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}
@@ -1380,6 +1397,9 @@ export function CamelChatMessages({
                 key={item.key}
                 turn={item}
                 isActive={item.actionMessageId === activeAssistantMessageId}
+                keepTraceExpanded={
+                  item.actionMessageId === recoveringAssistantMessageId
+                }
                 hasPendingSteer={hasPendingSteer}
                 hasPendingApproval={item.parts.some((partRef) => {
                   const approval =
@@ -1398,6 +1418,9 @@ export function CamelChatMessages({
               <StandaloneMessage key={item.key} item={item} />
             ),
           )}
+          {isRecovering && (
+            <CamelChatRecovery label={recoveryStatusLabel} />
+          )}
           {error != null && <CamelChatError error={error} onRetry={onRetry} />}
           {isActive && activeAssistantMessageId === null && (
             <ThinkingIndicator

package/src/camel/camel-prompt-input.tsx

@@ -39,6 +39,7 @@ import {
   type ReactNode,
 } from "react";
 import { ComposerTriggerPopover } from "../composer/composer-trigger-popover";
+import { isComposingKeyEvent } from "../composer/key-rules";
 import type { ComposerCommand } from "../composer/types";
 import { cn } from "../internal/cn";
 
@@ -345,7 +346,7 @@ function CamelPromptInputContent({
     if (
       event.key === "Enter" &&
       !event.shiftKey &&
-      !event.nativeEvent.isComposing
+      !isComposingKeyEvent(event.nativeEvent)
     ) {
       event.preventDefault();
       submit();