@springbrand/message-panel 0.1.3-alpha.8 → 0.2.0-alpha.37

package/demo/chat-scenarios.ts

@@ -37,6 +37,9 @@ export type DemoScenario =
   | "temporary_agent"
   | "agent_tools"
   | "background_agent"
+  | "action_loading"
+  | "action_files"
+  | "schedule_create"
   | "schedule"
   | "schedule_cancel"
   | "approval"
@@ -118,9 +121,27 @@ export const scenarios: Record<DemoScenario, DemoScenarioMeta> = {
     status: "ready",
     flowStep: 3,
   },
+  action_loading: {
+    label: "Action product loading",
+    description: "Preview loading UI for every Action product type.",
+    status: "streaming",
+    flowStep: 2,
+  },
+  action_files: {
+    label: "Action file results",
+    description: "Preview image, audio, video, document, spreadsheet, archive, and unknown files.",
+    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 +260,84 @@ 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 },
-    },
+function actionUserMessage(prompt: string): UIMessage {
+  const message = userMessage(prompt);
+  return { ...message, parts: message.parts.filter((part) => part.type === "text") };
+}
+
+export interface DemoAskUserResponse {
+  answers: Array<{ selections: string[]; text?: string }>;
+}
+
+export const demoAskUserResponse: DemoAskUserResponse = {
+  answers: [
+    { selections: ["管理层"], text: "" },
+    { selections: ["报告"], text: "" },
   ],
-} as unknown as UIMessage;
+};
 
-function humanReplyMessage(answer: string): UIMessage {
+const askUserQuestions = [
+  {
+    question: "这份建议优先面向哪个读者？",
+    options: ["产品团队", "管理层", "设计团队"],
+  },
+  {
+    question: "需要哪些交付物？",
+    options: ["报告", "演示文稿", "执行清单"],
+    multiSelect: true,
+    allowCustom: true,
+  },
+];
+
+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 +522,115 @@ const backgroundResult = {
   ],
 } as unknown as UIMessage;
 
+const actionProductHints = [
+  { type: "image", mediaType: "image/png" },
+  { type: "audio", mediaType: "audio/mpeg" },
+  { type: "video", mediaType: "video/mp4" },
+  { type: "document", mediaType: "application/pdf" },
+  { type: "archive", mediaType: "application/zip" },
+  { type: "data", mediaType: "application/json" },
+  { type: "other" },
+] as const;
+
+function demoExecutionId(index: number) {
+  return `00000000-0000-4000-8000-${String(index + 1).padStart(12, "0")}`;
+}
+
+const actionProductLoading = {
+  id: "camel-demo-action-product-loading",
+  role: "assistant",
+  parts: actionProductHints.map((produces, index) => ({
+    type: "dynamic-tool",
+    toolCallId: `camel-demo-action-loading-${index}`,
+    toolName: `action_generate_${produces.type}`,
+    state: "output-available",
+    input: {},
+    output: {
+      status: "running",
+      executionId: demoExecutionId(index),
+      presentation: {
+        type: "action-execution",
+        executionId: demoExecutionId(index),
+        state: "running",
+        produces,
+        content: [],
+      },
+    },
+  })),
+} as unknown as UIMessage;
+
+const actionFileFixtures = [
+  {
+    name: "image",
+    mediaType: "image/png",
+    url: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1024&q=80",
+  },
+  { name: "audio", mediaType: "audio/mpeg", url: "https://files.example/action-demo/audio.mp3" },
+  { name: "video", mediaType: "video/mp4", url: "https://files.example/action-demo/video.mp4" },
+  { name: "pdf", mediaType: "application/pdf", url: "https://files.example/action-demo/report.pdf" },
+  { name: "markdown", mediaType: "text/markdown", url: "https://files.example/action-demo/report.md" },
+  {
+    name: "spreadsheet",
+    mediaType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    url: "https://files.example/action-demo/data.xlsx",
+  },
+  { name: "archive", mediaType: "application/zip", url: "https://files.example/action-demo/files.zip" },
+  {
+    name: "unknown",
+    mediaType: "application/octet-stream",
+    url: "https://files.example/action-demo/result.bin",
+  },
+] as const;
+
+const actionFileResults = {
+  id: "camel-demo-action-file-results",
+  role: "assistant",
+  parts: [
+    ...actionFileFixtures.map((file, index) => ({
+      type: "dynamic-tool",
+      toolCallId: `camel-demo-action-file-${index}`,
+      toolName: `action_generate_${file.name}`,
+      state: "output-available",
+      input: {},
+      output: {
+        status: "succeeded",
+        executionId: demoExecutionId(index + actionProductHints.length),
+        result: { kind: "file", content_type: file.mediaType, url: file.url },
+        presentation: {
+          type: "action-execution",
+          executionId: demoExecutionId(index + actionProductHints.length),
+          state: "ready",
+          content: [{ type: "file", url: file.url, mediaType: file.mediaType }],
+        },
+      },
+    })),
+    {
+      type: "text",
+      text: "All Action file result types are rendered above from structured output.",
+    },
+  ],
+} 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 +639,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 +994,7 @@ const failedWork = {
 export function messagesForScenario(
   scenario: DemoScenario,
   prompt: string,
-  humanAnswer: string,
+  humanAnswer: DemoAskUserResponse,
   approval: boolean | undefined,
 ): UIMessage[] {
   if (scenario === "empty") return [];
@@ -835,15 +1002,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 +1025,15 @@ export function messagesForScenario(
   if (scenario === "background_agent") {
     return [...conversation, backgroundDispatch, backgroundResult];
   }
+  if (scenario === "action_loading") {
+    return [noticeMessage(scenario), actionUserMessage(prompt), actionProductLoading];
+  }
+  if (scenario === "action_files") {
+    return [noticeMessage(scenario), actionUserMessage(prompt), actionFileResults];
+  }
+  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,6 +287,7 @@ export function CloudOsChatShowcase() {
 
       <CloudOsWorkspaceSplit
         workspaceOpen={workspaceOpen}
+        isLoading={scenario === "hydrating"}
         chat={
           <div className="flex h-full min-h-0 flex-col bg-kumo-base">
             <aside
@@ -351,18 +356,36 @@ export function CloudOsChatShowcase() {
                 status === "submitted" ||
                 status === "streaming" ||
                 scenario === "ask" ||
+                scenario === "schedule_create" ||
                 ((scenario === "approval" || scenario === "schedule_cancel") &&
                   approval === undefined)
               }
-              isHydrating={scenario === "hydrating"}
               isRecovering={scenario === "recovering"}
-              recoveryStatusLabel="模型响应暂时中断,正在重试…"
+              recoveryStatusLabel="Model response interrupted. Retrying…"
               awaitingApproval={
-                (scenario === "approval" || scenario === "schedule_cancel") &&
+                (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={() => {
@@ -389,17 +412,17 @@ export function CloudOsChatShowcase() {
               onRespond={async (_toolCallId, response) => {
                 const data =
                   response && typeof response === "object"
-                    ? (response as { selections?: string[]; text?: string })
-                    : {};
-                const answer = [
-                  ...(data.selections ?? []),
-                  data.text?.trim() ?? "",
-                ]
+                    ? (response 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}`);
                 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,11 +1,12 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.8",
+  "version": "0.2.0-alpha.37",
   "type": "module",
   "files": [
     "src",
     "demo",
-    "cloud-os"
+    "cloud-os",
+    "springbrand-pet"
   ],
   "publishConfig": {
     "access": "public"
@@ -16,6 +17,7 @@
     "./styles.css": "./src/styles/index.css",
     "./cloud-os": "./cloud-os/index.ts",
     "./cloud-os.css": "./cloud-os/styles/cloud-os.css",
+    "./springbrand-pet": "./springbrand-pet/index.tsx",
     "./demo": "./demo/index.ts"
   },
   "peerDependencies": {
@@ -25,15 +27,15 @@
   },
   "dependencies": {
     "@assistant-ui/react": "^0.15.1",
+    "@base-ui/react": "^1.7.0",
     "@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",
+    "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.2.0",
     "use-stick-to-bottom": "^1.1.6"
@@ -44,11 +46,13 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
     "tailwindcss": "^4.3.2",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^7.0.2",
     "vite": "^8.1.4"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "test:springbrand-pet": "vitest run --config springbrand-pet/vitest.config.ts",
     "dev:cloud-os": "vite",
     "build:cloud-os": "vite build"
   }

package/springbrand-pet/LICENSE.bloub

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jérémy Perret
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.