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

package/cloud-os/styles/cloud-os.css

@@ -341,6 +341,54 @@
   display: none;
 }
 
+.cos-model-select {
+  --cos-model-select-bg: #fff;
+  --cos-model-select-border: rgb(0 0 0 / 7%);
+  --cos-model-select-text: #000;
+  --cos-model-select-muted: rgb(0 0 0 / 50%);
+  --cos-model-select-disabled: rgb(0 0 0 / 30%);
+  --cos-model-select-highlight: rgb(0 0 0 / 3%);
+  border-color: var(--cos-model-select-border);
+  background: var(--cos-model-select-bg);
+  box-shadow: 0 8px 14px rgb(0 0 0 / 6%);
+  color: var(--cos-model-select-text);
+  font-family: "Inter Variable", Inter, sans-serif;
+}
+
+.cos-model-select__item[data-highlighted] {
+  background: var(--cos-model-select-highlight);
+}
+
+.cos-model-select__item[data-disabled] {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.cos-model-select__name {
+  color: var(--cos-model-select-text);
+}
+
+.cos-model-select__name[data-muted] {
+  color: var(--cos-model-select-muted);
+}
+
+.cos-model-select__plan {
+  color: var(--cos-model-select-muted);
+}
+
+.cos-model-select__plan[data-disabled] {
+  color: var(--cos-model-select-disabled);
+}
+
+[data-cloud-os-portal][data-mode="dark"].cos-model-select {
+  --cos-model-select-bg: #343434;
+  --cos-model-select-border: rgb(255 255 255 / 10%);
+  --cos-model-select-text: #fff;
+  --cos-model-select-muted: rgb(255 255 255 / 50%);
+  --cos-model-select-disabled: rgb(255 255 255 / 30%);
+  --cos-model-select-highlight: rgb(255 255 255 / 7%);
+}
+
 .cos-chat-panel {
   scrollbar-width: thin;
   scrollbar-color: var(--color-kumo-line) transparent;
@@ -356,23 +404,6 @@
   background: transparent;
 }
 
-/* ── 顶部推进条(isAgentActive)──────────────────────────────────────────── */
-@keyframes cos-thinking {
-  0% {
-    left: -33%;
-  }
-  50% {
-    left: 100%;
-  }
-  100% {
-    left: -33%;
-  }
-}
-
-.cos-progress-sweep {
-  animation: cos-thinking 1.5s ease-in-out infinite;
-}
-
 /* ============================================================================
  * 以下整段来自 ChatInterface.module.css —— CSS Module 类名改成 cos- 全局前缀
  * ========================================================================== */
@@ -382,6 +413,9 @@
   line-height: 1.6;
   overflow-wrap: anywhere;
 }
+.cos-user-markdown :where(p, li) {
+  white-space: pre-wrap;
+}
 .cos-markdown p {
   margin: 0.4em 0;
 }
@@ -505,6 +539,20 @@
   }
 }
 
+/* ── 活动指示:回合在跑但屏幕上没东西在动时 ──────────────────────────────── */
+.cos-activity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 20px;
+  color: var(--text-color-kumo-subtle);
+}
+
+/* 球是固定 20px 的画布,不许被 flex 压扁。 */
+.cos-activity canvas {
+  flex: none;
+}
+
 /* ── 流式占位:Thinking 扫光 ──────────────────────────────────────────────── */
 .cos-thinking-shimmer {
   color: var(--text-color-kumo-inactive);
@@ -536,8 +584,34 @@
     background: none;
     -webkit-text-fill-color: currentColor;
   }
-  .cos-progress-sweep {
-    animation: none;
+}
+
+/* ── 原位提问:逐题横向切换 ─────────────────────────────────────────────── */
+.cos-ask-user-question[data-direction="forward"] {
+  animation: cos-ask-user-forward 180ms ease-out;
+}
+
+.cos-ask-user-question[data-direction="back"] {
+  animation: cos-ask-user-back 180ms ease-out;
+}
+
+@keyframes cos-ask-user-forward {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+}
+
+@keyframes cos-ask-user-back {
+  from {
+    opacity: 0;
+    transform: translateX(-24px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cos-ask-user-question {
+    animation: none !important;
   }
 }
 

package/demo/camel-chat-showcase.tsx

@@ -15,11 +15,13 @@ import {
 import {
   commands as sharedCommands,
   defaultPrompt,
+  demoAskUserResponse,
   demoModels,
   finalToolNames,
   flowSteps,
   messagesForScenario,
   scenarios,
+  type DemoAskUserResponse,
   type DemoScenario,
   type DemoScenarioMeta,
 } from "./chat-scenarios";
@@ -42,7 +44,7 @@ export function CamelChatShowcase() {
   const [theme, setTheme] = useState<"light" | "dark">("dark");
   const [scenario, setScenario] = useState<DemoScenario>(initialScenario);
   const [prompt, setPrompt] = useState(defaultPrompt);
-  const [humanAnswer, setHumanAnswer] = useState("管理层");
+  const [humanAnswer, setHumanAnswer] = useState(demoAskUserResponse);
   const [model, setModel] = useState<string>(demoModels[0].value);
   const [value, setValue] = useState("");
   const [attachments, setAttachments] =
@@ -70,7 +72,8 @@ export function CamelChatShowcase() {
           : {};
       return (
         record.type === "tool-write_file" ||
-        record.type === "tool-cancel_schedule"
+        record.type === "tool-cancel_schedule" ||
+        record.type === "tool-schedule"
       ) &&
         record.state === "approval-requested"
         ? { id: "camel-demo-approval", approved: approval }
@@ -254,6 +257,14 @@ export function CamelChatShowcase() {
             }}
             onApprove={(_approvalId, decision) => {
               const approved = decision !== "deny";
+              if (scenario === "schedule_create") {
+                setApproval(approved);
+                selectScenario(approved ? "schedule" : "submitted");
+                setLastEvent(approved
+                  ? "Scheduled task created"
+                  : "Schedule creation cancelled");
+                return;
+              }
               if (scenario === "schedule_cancel") {
                 setApproval(approved);
                 setLastEvent(
@@ -274,20 +285,17 @@ export function CamelChatShowcase() {
             onAnswer={(payload) => {
               const data =
                 payload && typeof payload === "object"
-                  ? (payload as {
-                      selections?: string[][];
-                      text?: string;
-                    })
-                  : {};
-              const answer = [
-                ...(data.selections?.flat() ?? []),
-                data.text?.trim() ?? "",
-              ]
+                  ? (payload as DemoAskUserResponse)
+                  : { answers: [] };
+              const answer = data.answers.flatMap((item) => [
+                ...item.selections,
+                item.text?.trim() ?? "",
+              ])
                 .filter(Boolean)
                 .join("、");
-              if (answer) setHumanAnswer(answer);
+              if (data.answers.length > 0) setHumanAnswer(data);
               selectScenario("planning");
-              setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+              setLastEvent(`已回答并继续：${answer}`);
             }}
             getToolApproval={approvalView}
           />

package/demo/chat-scenarios.ts

@@ -37,6 +37,7 @@ export type DemoScenario =
   | "temporary_agent"
   | "agent_tools"
   | "background_agent"
+  | "schedule_create"
   | "schedule"
   | "schedule_cancel"
   | "approval"
@@ -118,9 +119,15 @@ export const scenarios: Record<DemoScenario, DemoScenarioMeta> = {
     status: "ready",
     flowStep: 3,
   },
+  schedule_create: {
+    label: "Create scheduled task",
+    description: "Review the task, cadence, and timezone before creating the schedule.",
+    status: "ready",
+    flowStep: 2,
+  },
   schedule: {
-    label: "定时任务已创建",
-    description: "schedule 执行成功后展示任务名称、触发规则、时区和已安排状态。",
+    label: "Scheduled task created",
+    description: "A completed schedule shows its task, cadence, timezone, and final status.",
     status: "ready",
     flowStep: 3,
   },
@@ -239,42 +246,79 @@ function userMessage(prompt: string): UIMessage {
   } as UIMessage;
 }
 
-const askUserRequest = {
-  id: "camel-demo-ask-user",
-  role: "assistant",
-  parts: [
-    {
-      type: "tool-ask_user",
-      toolCallId: "camel-demo-ask-user-1",
-      state: "output-available",
-      input: {
-        question: "这份建议优先面向哪个读者？",
-        options: ["产品团队", "管理层", "设计团队"],
-        multiSelect: false,
-      },
-      output: { asked: true },
-    },
+export interface DemoAskUserResponse {
+  answers: Array<{ selections: string[]; text?: string }>;
+}
+
+export const demoAskUserResponse: DemoAskUserResponse = {
+  answers: [
+    { selections: ["管理层"], text: "" },
+    { selections: ["报告"], text: "" },
   ],
-} as unknown as UIMessage;
+};
+
+const askUserQuestions = [
+  {
+    question: "这份建议优先面向哪个读者？",
+    options: ["产品团队", "管理层", "设计团队"],
+  },
+  {
+    question: "需要哪些交付物？",
+    options: ["报告", "演示文稿", "执行清单"],
+    multiSelect: true,
+    allowCustom: true,
+  },
+];
 
-function humanReplyMessage(answer: string): UIMessage {
+function askUserRequest(response?: DemoAskUserResponse): UIMessage {
   return {
-    id: "camel-demo-human-reply",
-    role: "user",
-    metadata: {
-      authorDisplayName: "You",
-      createdAt: demoTurnStartedAt + 2_000,
-      messageSource: "Web",
-    },
-    parts: [{ type: "text", text: answer }],
-  } as UIMessage;
+    id: "camel-demo-ask-user",
+    role: "assistant",
+    parts: [
+      {
+        type: "tool-ask_user",
+        toolCallId: "camel-demo-ask-user-1",
+        state: response ? "output-available" : "input-available",
+        input: { questions: askUserQuestions },
+        ...(response
+          ? {
+              output: {
+                answers: response.answers.map((answer, index) => ({
+                  question: askUserQuestions[index]!.question,
+                  selections: answer.selections,
+                  text: answer.text?.trim() ?? "",
+                })),
+              },
+            }
+          : {}),
+      },
+    ],
+  } as unknown as UIMessage;
 }
 
 const planningWork = {
   id: "camel-demo-planning-work",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt + 3_000 },
+  metadata: {
+    turnStartedAt: demoTurnStartedAt + 3_000,
+    turnDurationMs: 18_000,
+  },
   parts: [
+    {
+      type: "reasoning",
+      text: `先确认受众和交付范围，再验证产品案例。
+
+用户选择的读者是管理层，交付物是报告。因此内容不能只罗列界面趋势，还需要把每项趋势连接到业务价值、落地成本和潜在风险，帮助管理层判断优先级。
+
+接下来会分三步推进：
+
+1. 检索 2025–2026 年主流 AI Agent 产品，优先采集官方发布说明、产品文档和可验证的真实界面。
+2. 对比任务规划、工具调用、人工确认、后台执行和结果交付等关键交互，区分普遍模式与单个产品的特色设计。
+3. 把证据整理成可执行建议，并为每条建议标注适用场景、实现复杂度和预期收益。
+
+第一轮检索先覆盖通用 Agent、开发者 Agent 与企业自动化产品。如果不同来源对同一趋势的描述冲突，会保留分歧并继续寻找一手证据，而不是直接下结论。`,
+      state: "done",
+    },
     {
       type: "tool-update_plan",
       state: "output-available",
@@ -459,6 +503,26 @@ const backgroundResult = {
   ],
 } as unknown as UIMessage;
 
+export const demoScheduleInput = {
+  label: "Weekly competitor report",
+  prompt: "Generate and send this week's competitor report.",
+  trigger: { kind: "cron", cron: "0 9 * * 1" },
+  timezone: "Asia/Shanghai",
+};
+
+const scheduleRequest = {
+  id: "camel-demo-schedule-request",
+  role: "assistant",
+  parts: [
+    {
+      type: "tool-schedule",
+      toolCallId: "camel-demo-schedule-request-1",
+      state: "approval-requested",
+      input: demoScheduleInput,
+    },
+  ],
+} as unknown as UIMessage;
+
 const scheduledTask = {
   id: "camel-demo-schedule",
   role: "assistant",
@@ -467,12 +531,7 @@ const scheduledTask = {
       type: "tool-schedule",
       toolCallId: "camel-demo-schedule-1",
       state: "output-available",
-      input: {
-        label: "每周发送竞品报告",
-        prompt: "生成并发送本周竞品报告。",
-        trigger: { kind: "cron", cron: "0 9 * * 1" },
-        timezone: "Asia/Shanghai",
-      },
+      input: demoScheduleInput,
       output: { scheduled: true, id: "schedule-1" },
     },
   ],
@@ -827,7 +886,7 @@ const failedWork = {
 export function messagesForScenario(
   scenario: DemoScenario,
   prompt: string,
-  humanAnswer: string,
+  humanAnswer: DemoAskUserResponse,
   approval: boolean | undefined,
 ): UIMessage[] {
   if (scenario === "empty") return [];
@@ -835,15 +894,13 @@ export function messagesForScenario(
     return [noticeMessage(scenario), ...commandMessages];
   }
   const conversation = [noticeMessage(scenario), userMessage(prompt)];
-  const answer = humanAnswer || "管理层";
   const decidedConversation = [
     ...conversation,
-    askUserRequest,
-    humanReplyMessage(answer),
+    askUserRequest(humanAnswer),
   ];
   if (scenario === "hydrating") return conversation;
   if (scenario === "submitted") return conversation;
-  if (scenario === "ask") return [...conversation, askUserRequest];
+  if (scenario === "ask") return [...conversation, askUserRequest()];
   if (scenario === "planning") {
     return [...decidedConversation, planningWork];
   }
@@ -860,6 +917,9 @@ export function messagesForScenario(
   if (scenario === "background_agent") {
     return [...conversation, backgroundDispatch, backgroundResult];
   }
+  if (scenario === "schedule_create") {
+    return [...conversation, scheduleRequest];
+  }
   if (scenario === "schedule") {
     return [...conversation, scheduledTask];
   }

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

@@ -13,6 +13,7 @@ import {
   CloudOsRoot,
   CloudOsWorkspacePanel,
   CloudOsWorkspaceSplit,
+  ScheduleConfirmation,
   WorkshopIconButton,
   buildCloudOsEntries,
   type CloudOsAttachmentView,
@@ -20,17 +21,19 @@ import {
 } from "../cloud-os";
 import {
   defaultPrompt,
+  demoAskUserResponse,
   demoModels,
   flowSteps,
   messagesForScenario,
   scenarios,
   type DemoScenario,
+  type DemoAskUserResponse,
   type DemoScenarioMeta,
 } from "./chat-scenarios";
 
 /**
  * cloud-os 版快速预览。场景表和 camel-chat-showcase 共用 `chat-scenarios.ts`,
- * 所以两边的状态逐条对齐(同样 22 个场景、同样的 7 步流程条、同样的初始 URL 参数)。
+ * 所以两边的状态逐条对齐(同样 23 个场景、同样的 7 步流程条、同样的初始 URL 参数)。
  * 差别只在外壳:这里是 cloudflare-os 的左聊天 / 右工作区双栏。
  */
 
@@ -122,7 +125,7 @@ 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 [humanAnswer, setHumanAnswer] = useState(demoAskUserResponse);
   const [model, setModel] = useState<string | null>(cloudOsModels[0].id);
   const [value, setValue] = useState("");
   const [attachments, setAttachments] = useState<CloudOsAttachmentView[]>([]);
@@ -153,7 +156,8 @@ export function CloudOsChatShowcase() {
         ? (part as { type?: unknown; state?: unknown })
         : {};
     return (record.type === "tool-write_file" ||
-      record.type === "tool-cancel_schedule") &&
+      record.type === "tool-cancel_schedule" ||
+      record.type === "tool-schedule") &&
       record.state === "approval-requested"
       ? "cloud-os-demo-approval"
       : undefined;
@@ -283,7 +287,7 @@ export function CloudOsChatShowcase() {
 
       <CloudOsWorkspaceSplit
         workspaceOpen={workspaceOpen}
-        isAgentActive={status === "submitted" || status === "streaming"}
+        isLoading={scenario === "hydrating"}
         chat={
           <div className="flex h-full min-h-0 flex-col bg-kumo-base">
             <aside
@@ -348,11 +352,40 @@ export function CloudOsChatShowcase() {
             <CloudOsChatMessages
               messages={messages}
               status={status}
-              isHydrating={scenario === "hydrating"}
+              turnActive={
+                status === "submitted" ||
+                status === "streaming" ||
+                scenario === "ask" ||
+                scenario === "schedule_create" ||
+                ((scenario === "approval" || scenario === "schedule_cancel") &&
+                  approval === undefined)
+              }
               isRecovering={scenario === "recovering"}
-              recoveryStatusLabel="模型响应暂时中断,正在重试…"
+              recoveryStatusLabel="Model response interrupted. Retrying…"
+              awaitingApproval={
+                (scenario === "approval" ||
+                  scenario === "schedule_cancel" ||
+                  scenario === "schedule_create") &&
+                approval === undefined
+              }
               showThinkingTraces={showThinkingTraces}
               approvalIdOf={approvalIdOf}
+              renderApproval={({ toolName, input }) =>
+                toolName === "schedule"
+                  ? (
+                      <ScheduleConfirmation
+                        input={input}
+                        onCancel={() => {
+                          selectScenario("submitted");
+                          setLastEvent("Schedule creation cancelled");
+                        }}
+                        onConfirm={() => {
+                          selectScenario("schedule");
+                          setLastEvent("Scheduled task created");
+                        }}
+                      />
+                    )
+                  : undefined}
               error={statusError}
               constrainWidth={!workspaceOpen}
               onRetry={() => {
@@ -376,20 +409,21 @@ export function CloudOsChatShowcase() {
                 setValue("");
                 setLastEvent(`已发送后续问题：${text}`);
               }}
-              onAnswer={(payload) => {
+              onRespond={async (_toolCallId, response) => {
                 const data =
-                  payload && typeof payload === "object"
-                    ? (payload as { selections?: string[][]; text?: string })
-                    : {};
-                const answer = [
-                  ...(data.selections?.flat() ?? []),
-                  data.text?.trim() ?? "",
-                ]
+                  response && typeof response === "object"
+                    ? (response as DemoAskUserResponse)
+                    : { answers: [] };
+                const answer = data.answers.flatMap((item) => [
+                  ...item.selections,
+                  item.text?.trim() ?? "",
+                ])
                   .filter(Boolean)
-                  .join("、");
-                if (answer) setHumanAnswer(answer);
+                  .join(" / ");
+                if (data.answers.length > 0) setHumanAnswer(data);
                 selectScenario("planning");
-                setLastEvent(`已回答并继续：${answer || humanAnswer}`);
+                setLastEvent(`已回答并继续：${answer}`);
+                return true;
               }}
             />
 

package/demo/fixtures.ts

@@ -166,17 +166,16 @@ export const allPartsMessage: DemoMessage = {
       type: "ask_user",
       questions: [
         {
-          prompt: "报告通过什么渠道发送？",
-          kind: "single",
+          question: "报告通过什么渠道发送？",
           options: ["Email", "Slack", "Both"],
         },
         {
-          prompt: "需要包含哪些内容？",
-          kind: "multi",
+          question: "需要包含哪些内容？",
           options: ["定价", "功能", "动态"],
+          multiSelect: true,
+          allowCustom: true,
         },
       ],
-      freeTextPlaceholder: "补充竞争对手名称…",
     },
     {
       type: "suggestions",

package/demo/message-panel-gallery.tsx

@@ -220,6 +220,7 @@ function ComposerInteractionHarness() {
 
 export function MessagePanelGallery() {
   const [theme, setTheme] = useState<"light" | "dark">("dark");
+  const [askUserOutput, setAskUserOutput] = useState<unknown>();
   const rootClass = theme === "dark" ? "dark" : "";
   useEffect(() => {
     document.documentElement.classList.toggle("dark", theme === "dark");
@@ -309,12 +310,25 @@ export function MessagePanelGallery() {
         />
         <div style={{ height: 1100, overflow: "hidden", border: "1px solid var(--border)", borderRadius: 18 }}>
           <MessagePanel
-            messages={[basicMessages[0], allPartsMessage]}
+            messages={[
+              basicMessages[0],
+              {
+                ...allPartsMessage,
+                parts: allPartsMessage.parts.map((part) =>
+                  part.type === "ask_user" && askUserOutput
+                    ? { ...part, output: askUserOutput }
+                    : part
+                ),
+              },
+            ]}
             status="ready"
             adapter={demoMessageAdapter}
             actions={{
               onSuggestion: noOp,
-              onAnswer: noOp,
+              onAnswer: async (output) => {
+                await new Promise((resolve) => setTimeout(resolve, 250));
+                setAskUserOutput(output);
+              },
               onApprove: noOp,
               onPreview: noOp,
               onDownload: noOp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.2",
+  "version": "0.1.3-alpha.21",
   "type": "module",
   "files": [
     "src",
@@ -31,11 +31,10 @@
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "lucide-react": "^1.24.0",
+    "motion": "^13.1.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",
+    "thinking-orbs": "0.2.0",
     "use-stick-to-bottom": "^1.1.6"
   },
   "devDependencies": {