@springbrand/message-panel 0.1.3-alpha.23 → 0.1.3-alpha.25

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,8 @@ export type DemoScenario =
   | "temporary_agent"
   | "agent_tools"
   | "background_agent"
+  | "action_loading"
+  | "action_files"
   | "schedule_create"
   | "schedule"
   | "schedule_cancel"
@@ -119,6 +122,18 @@ 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.",
@@ -246,6 +261,11 @@ function userMessage(prompt: string): UIMessage {
   } as UIMessage;
 }
 
+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 }>;
 }
@@ -503,6 +523,95 @@ 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.",
@@ -636,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",
@@ -663,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",
@@ -698,6 +807,7 @@ const completedResearch = {
 const completedSynthesis = {
   id: "camel-demo-completed-synthesis",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "tool-update_plan",
@@ -729,6 +839,7 @@ const completedSynthesis = {
 const approvalRequest = {
   id: "camel-demo-approval-request",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "tool-write_file",
@@ -744,6 +855,7 @@ const approvalRequest = {
 const collectedAnswer = {
   id: "camel-demo-collected-answer",
   role: "assistant",
+  metadata: { turnId: demoTurnId },
   parts: [
     {
       type: "text",
@@ -760,6 +872,7 @@ const finalAnswer = {
   id: "camel-demo-final-answer",
   role: "assistant",
   metadata: {
+    turnId: demoTurnId,
     createdAt: demoCompletedAt,
     completedAt: demoCompletedAt,
     turnDurationMs: 18_000,
@@ -828,6 +941,7 @@ const interruptedByUser = {
   id: "camel-demo-interrupted",
   role: "assistant",
   metadata: {
+    turnId: demoTurnId,
     createdAt: demoCompletedAt,
     completedAt: demoCompletedAt + 2_000,
     turnDurationMs: 2_000,
@@ -857,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,
     {
@@ -917,6 +1031,12 @@ 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];
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.23",
+  "version": "0.1.3-alpha.25",
   "type": "module",
   "files": [
     "src",