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

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

@@ -51,6 +51,8 @@
   --color-kumo-success: oklch(72.3% 0.219 149.579);
   --color-kumo-success-tint: oklch(92% 0.08 150);
 
+  --color-operation-base: #ffffff;
+
   --color-kumo-tip-shadow: #14111014;
   --color-kumo-tip-stroke: transparent;
 
@@ -73,6 +75,10 @@
   --color-cos-status-live: oklch(72.3% 0.219 149.579);
   --color-cos-status-draft: oklch(68.1% 0.162 75.834);
   --color-cos-status-building: oklch(62.3% 0.214 259.815);
+  --text-color-cos-work-description: rgba(0, 0, 0, 0.5);
+  --text-color-cos-work-description-subtle: rgba(0, 0, 0, 0.7);
+  --text-color-cos-tool-group: rgba(0, 0, 0, 0.5);
+  --text-color-cos-output: #000000b3;
 }
 
 /* ── 作用域根:通用 token 只在 cloud-os 子树内生效 ─────────────────────────── */
@@ -152,6 +158,8 @@
   --color-kumo-success: oklch(52.7% 0.154 150.069);
   --color-kumo-success-tint: oklch(0.25 0.06 150.069);
 
+  --color-operation-base: var(--color-kumo-base);
+
   --color-kumo-tip-shadow: #00000066;
   --color-kumo-tip-stroke: oklch(0.34 0.022 285);
 
@@ -172,6 +180,10 @@
   --color-cos-status-live: oklch(79.2% 0.209 151.711);
   --color-cos-status-draft: oklch(82.8% 0.189 84.429);
   --color-cos-status-building: oklch(74% 0.16 250);
+  --text-color-cos-work-description: var(--text-color-kumo-subtle);
+  --text-color-cos-work-description-subtle: var(--text-color-kumo-subtle);
+  --text-color-cos-tool-group: var(--text-color-kumo-inactive);
+  --text-color-cos-output: var(--text-color-kumo-subtle);
 
   --color-selection-bg: color-mix(in srgb, var(--color-kumo-brand) 28%, transparent);
   --color-selection-text: oklch(0.97 0.006 285);
@@ -341,6 +353,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 +416,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 +425,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;
 }
@@ -486,8 +532,12 @@
   font-weight: 600;
 }
 .cos-markdown img {
-  max-width: 100%;
+  max-width: min(100%, 16rem);
+  max-height: 13rem;
+  width: auto;
   height: auto;
+  border-radius: 0.75rem;
+  object-fit: contain;
 }
 
 /* ── 输入框容器(container query 决定「添加资源」标签是否显示)─────────────── */
@@ -545,13 +595,43 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  [data-sd-animate] {
+    animation: none !important;
+  }
+
   .cos-thinking-shimmer {
     animation: none;
     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

@@ -18,6 +18,7 @@ export interface ComposerCommandLike {
 }
 const demoCompletedAt = Date.now() - 1_000;
 const demoTurnStartedAt = demoCompletedAt - 18_000;
+const demoTurnId = "camel-demo-research-turn";
 export const defaultPrompt =
   "请调研 2026 年 AI Agent 产品的交互趋势，并给出可落地的消息 UI 建议。";
 export const demoModels = [
@@ -37,6 +38,9 @@ export type DemoScenario =
   | "temporary_agent"
   | "agent_tools"
   | "background_agent"
+  | "action_loading"
+  | "action_files"
+  | "schedule_create"
   | "schedule"
   | "schedule_cancel"
   | "approval"
@@ -118,9 +122,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 +261,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 +523,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 +640,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" },
     },
   ],
@@ -577,7 +745,7 @@ const commandMessages = [
 const runningWork = {
   id: "camel-demo-running-work",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt },
+  metadata: { turnId: demoTurnId, turnStartedAt: demoTurnStartedAt },
   parts: [
     {
       type: "reasoning",
@@ -604,7 +772,7 @@ const runningWork = {
 const completedResearch = {
   id: "camel-demo-completed-research",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt },
+  metadata: { turnId: demoTurnId, turnStartedAt: demoTurnStartedAt },
   parts: [
     {
       type: "reasoning",
@@ -639,6 +807,7 @@ const completedResearch = {
 const completedSynthesis = {
   id: "camel-demo-completed-synthesis",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "tool-update_plan",
@@ -670,6 +839,7 @@ const completedSynthesis = {
 const approvalRequest = {
   id: "camel-demo-approval-request",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "tool-write_file",
@@ -685,6 +855,7 @@ const approvalRequest = {
 const collectedAnswer = {
   id: "camel-demo-collected-answer",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "text",
@@ -701,6 +872,7 @@ const finalAnswer = {
   id: "camel-demo-final-answer",
   role: "assistant",
   metadata: {
+    turnId: demoTurnId,
     createdAt: demoCompletedAt,
     completedAt: demoCompletedAt,
     turnDurationMs: 18_000,
@@ -769,6 +941,7 @@ const interruptedByUser = {
   id: "camel-demo-interrupted",
   role: "assistant",
   metadata: {
+    turnId: demoTurnId,
     createdAt: demoCompletedAt,
     completedAt: demoCompletedAt + 2_000,
     turnDurationMs: 2_000,
@@ -798,7 +971,7 @@ const compactSummary = {
 const failedWork = {
   id: "camel-demo-failed-work",
   role: "assistant",
-  metadata: { turnStartedAt: demoTurnStartedAt },
+  metadata: { turnId: demoTurnId, turnStartedAt: demoTurnStartedAt },
   parts: [
     ...completedResearch.parts,
     {
@@ -827,7 +1000,7 @@ const failedWork = {
 export function messagesForScenario(
   scenario: DemoScenario,
   prompt: string,
-  humanAnswer: string,
+  humanAnswer: DemoAskUserResponse,
   approval: boolean | undefined,
 ): UIMessage[] {
   if (scenario === "empty") return [];
@@ -835,15 +1008,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 +1031,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];
   }