@springbrand/message-panel 0.1.2 → 0.1.3-alpha.0

package/demo/fixtures.ts

@@ -0,0 +1,292 @@
+import type {
+  MessageAdapter,
+  MessagePanelStatus,
+} from "../src/contracts";
+
+export interface DemoMessage {
+  id: string;
+  role: "user" | "assistant";
+  parts: Array<Record<string, unknown>>;
+  metadata?: Record<string, unknown>;
+}
+
+export const demoMessageAdapter: MessageAdapter<DemoMessage> = {
+  getId: (message) => message.id,
+  getRole: (message) => message.role,
+  getParts: (message) => message.parts,
+  getMetadata: (message) => message.metadata,
+  getText: (message) =>
+    message.parts
+      .filter((part) => part.type === "text")
+      .map((part) => String(part.text ?? ""))
+      .join("\n"),
+  isPartRenderable: () => true,
+};
+
+const demoImage =
+  "data:image/svg+xml;charset=utf-8," +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="900" height="520"><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#39274f"/><stop offset=".55" stop-color="#e07042"/><stop offset="1" stop-color="#f6c274"/></linearGradient></defs><rect width="900" height="520" fill="url(#g)"/><circle cx="700" cy="125" r="68" fill="#ffe4ad"/><path d="M0 410 190 210 360 410 540 170 900 430V520H0Z" fill="#191e2c"/><path d="M270 435V320l80-58 82 58v115Z" fill="#69432e"/><rect x="324" y="348" width="48" height="52" fill="#ffd47d"/></svg>',
+  );
+
+export const allPartsMessage: DemoMessage = {
+  id: "assistant-all-parts",
+  role: "assistant",
+  parts: [
+    {
+      type: "text",
+      text: "## Message Panel\n\n支持 **GFM Markdown**、真实流式状态与富组件叙事流。",
+    },
+    {
+      type: "reasoning",
+      label: "Thought for 3s",
+      detail: "先理解目标，再安排步骤和并行任务。",
+    },
+    {
+      type: "tool",
+      icon: "web",
+      label: "Searched the web",
+      meta: "2 results",
+      status: "output-available",
+      results: [
+        { title: "AI interface patterns", domain: "example.com" },
+        { title: "Streaming UI guide", domain: "docs.example.com" },
+      ],
+    },
+    {
+      type: "error",
+      title: "一项后台任务已中断",
+      body: "连接恢复后可以安全重试，不会留下无限加载状态。",
+    },
+    {
+      type: "image",
+      src: demoImage,
+      alt: "雪山日落与木屋的示意图",
+    },
+    {
+      type: "chart",
+      title: "Keyword opportunities",
+      unit: "",
+      expandable: true,
+      bars: [
+        { label: "Agent UI", value: 96 },
+        { label: "RAG", value: 78 },
+        { label: "Tools", value: 65 },
+        { label: "Memory", value: 54 },
+      ],
+    },
+    {
+      type: "agent_card",
+      title: "Your agent is ready",
+      agentName: "Research Analyst",
+      agentDesc: "持续调研市场并把结果汇总成结构化报告。",
+    },
+    {
+      type: "plan",
+      title: "任务计划",
+      steps: [
+        { text: "确认目标与边界", status: "done" },
+        { text: "检索并验证资料", status: "in_progress" },
+        { text: "交付报告", status: "pending" },
+      ],
+    },
+    {
+      type: "schedule",
+      title: "每周发送竞品报告",
+      cadence: "Every Monday at 9:00 AM",
+      nextRun: "Mon, Aug 3 · Asia/Shanghai",
+    },
+    {
+      type: "parallel",
+      label: "Parallel research",
+      tools: [
+        { icon: "web", label: "市场调研", status: "done", meta: "8 sources" },
+        { icon: "code", label: "数据分析", status: "running" },
+        { icon: "file", label: "汇总报告", status: "done" },
+      ],
+    },
+    {
+      type: "subagents",
+      agents: [
+        {
+          name: "Research Agent",
+          tint: "#5577cc",
+          summary: "完成 8 个来源的交叉验证。",
+          status: "done",
+        },
+        {
+          name: "Data Agent",
+          tint: "#8f61c7",
+          summary: "正在计算趋势指标。",
+          status: "running",
+        },
+      ],
+    },
+    {
+      type: "confirmation",
+      id: "demo-confirmation",
+      title: "创建每周竞品 Agent？",
+      body: "将按上述计划在每周一运行。",
+      confirmLabel: "创建 Agent",
+      cancelLabel: "暂不",
+    },
+    {
+      type: "file",
+      name: "competitor-report.md",
+      kind: "doc",
+      note: "Markdown · 14 KB",
+    },
+    {
+      type: "dashboard",
+      title: "Agent 运行概览",
+      tiles: [
+        { label: "完成任务", value: "42" },
+        { label: "成功率", value: "98%" },
+        { label: "节省时间", value: "16h" },
+      ],
+      cards: [
+        { icon: "🔎", title: "Research", body: "8 个来源完成验证" },
+        { icon: "📊", title: "Analysis", body: "3 个趋势值得关注" },
+        { icon: "📝", title: "Report", body: "报告已生成" },
+      ],
+      badges: ["实时流式", "可恢复", "工作区联动"],
+      fileNote: {
+        title: "文件已生成",
+        body: "报告已保存到 Workspace。",
+      },
+      table: {
+        columns: ["能力", "状态"],
+        rows: [
+          ["Message", "Ready"],
+          ["Composer", "Ready"],
+        ],
+      },
+    },
+    {
+      type: "ask_user",
+      questions: [
+        {
+          prompt: "报告通过什么渠道发送？",
+          kind: "single",
+          options: ["Email", "Slack", "Both"],
+        },
+        {
+          prompt: "需要包含哪些内容？",
+          kind: "multi",
+          options: ["定价", "功能", "动态"],
+        },
+      ],
+      freeTextPlaceholder: "补充竞争对手名称…",
+    },
+    {
+      type: "suggestions",
+      items: ["立即运行一次", "加入 Slack 通知", "编辑跟踪名单"],
+    },
+  ],
+};
+
+export const basicMessages: DemoMessage[] = [
+  {
+    id: "demo-user",
+    role: "user",
+    parts: [{ type: "text", text: "帮我制作一份竞品周报。" }],
+  },
+  {
+    id: "demo-assistant",
+    role: "assistant",
+    parts: [{ type: "text", text: "好的，我会先做计划，再开始调研。" }],
+  },
+];
+
+export const panelScenarios: Array<{
+  id: string;
+  title: string;
+  messages: DemoMessage[];
+  status: MessagePanelStatus;
+  flags?: {
+    isHydrating?: boolean;
+    isRecovering?: boolean;
+    isServerStreaming?: boolean;
+  };
+  error?: Error;
+}> = [
+  { id: "empty", title: "Empty", messages: [], status: "ready" },
+  {
+    id: "hydrating",
+    title: "Hydrating",
+    messages: basicMessages,
+    status: "ready",
+    flags: { isHydrating: true },
+  },
+  {
+    id: "thinking",
+    title: "Thinking / Submitted",
+    messages: basicMessages.slice(0, 1),
+    status: "submitted",
+  },
+  {
+    id: "streaming",
+    title: "Streaming / Playing",
+    messages: [
+      basicMessages[0],
+      {
+        id: "streaming-assistant",
+        role: "assistant",
+        parts: [{ type: "text", text: "正在检索并交叉验证资料…" }],
+      },
+    ],
+    status: "streaming",
+  },
+  {
+    id: "completed",
+    title: "Completed / Ready",
+    messages: basicMessages,
+    status: "ready",
+  },
+  {
+    id: "error",
+    title: "Error / Interrupted",
+    messages: basicMessages,
+    status: "error",
+    error: new Error("网络连接已中断，可安全重试。"),
+  },
+  {
+    id: "recovering",
+    title: "Recovering / Background",
+    messages: basicMessages,
+    status: "ready",
+    flags: { isRecovering: true, isServerStreaming: true },
+  },
+];
+
+export interface DemoAttachment {
+  id: string;
+  filename: string;
+  status: "uploading" | "ready" | "error";
+  mediaType: string;
+  size: number;
+}
+
+export const readyAttachment: DemoAttachment = {
+  id: "ready-file",
+  filename: "brief.pdf",
+  status: "ready",
+  mediaType: "application/pdf",
+  size: 21840,
+};
+
+export const uploadingAttachment: DemoAttachment = {
+  ...readyAttachment,
+  id: "uploading-file",
+  filename: "research.csv",
+  status: "uploading",
+  mediaType: "text/csv",
+};
+
+export const errorAttachment: DemoAttachment = {
+  ...readyAttachment,
+  id: "error-file",
+  filename: "broken.zip",
+  status: "error",
+  mediaType: "application/zip",
+};

package/demo/message-panel-chat-showcase.tsx

@@ -0,0 +1,250 @@
+import { useMemo, useState } from "react";
+import { MessagePanel, type MessagePanelStatus } from "../src";
+import { Composer, DropOverlay } from "../src/composer";
+import {
+  allPartsMessage,
+  basicMessages,
+  demoMessageAdapter,
+  errorAttachment,
+  panelScenarios,
+  readyAttachment,
+  uploadingAttachment,
+  type DemoAttachment,
+} from "./fixtures";
+
+const noOp = () => undefined;
+
+interface ComposerScenario {
+  id: string;
+  title: string;
+  value?: string;
+  attachments?: DemoAttachment[];
+  status: MessagePanelStatus;
+  overlay?: boolean;
+}
+
+const composerScenarios: ComposerScenario[] = [
+  { id: "empty", title: "Empty", status: "ready" },
+  {
+    id: "drafting",
+    title: "Drafting",
+    value: "为这份数据生成报告",
+    status: "ready",
+  },
+  { id: "drag-active", title: "Drag active", status: "ready", overlay: true },
+  {
+    id: "uploading",
+    title: "Uploading",
+    attachments: [uploadingAttachment],
+    status: "ready",
+  },
+  {
+    id: "attachment-error",
+    title: "Attachment error",
+    value: "不要丢掉这份草稿",
+    attachments: [errorAttachment],
+    status: "ready",
+  },
+  {
+    id: "ready-with-attachments",
+    title: "Ready with attachments",
+    attachments: [readyAttachment],
+    status: "ready",
+  },
+  {
+    id: "submitted-streaming",
+    title: "Submitted / Streaming",
+    value: "正在发送…",
+    status: "streaming",
+  },
+];
+
+const controlStyle = {
+  minHeight: 34,
+  padding: "6px 10px",
+  border: "1px solid var(--border)",
+  borderRadius: 9,
+  color: "var(--foreground)",
+  background: "var(--card)",
+  font: "inherit",
+  fontSize: 12,
+} as const;
+
+export function MessagePanelChatShowcase() {
+  const [theme, setTheme] = useState<"light" | "dark">("dark");
+  const [panelScenarioId, setPanelScenarioId] = useState("completed");
+  const [composerScenarioId, setComposerScenarioId] = useState("empty");
+  const panelScenario =
+    panelScenarios.find((scenario) => scenario.id === panelScenarioId) ??
+    panelScenarios[4];
+  const composerScenario =
+    composerScenarios.find(
+      (scenario) => scenario.id === composerScenarioId,
+    ) ?? composerScenarios[0];
+  const messages = useMemo(
+    () =>
+      panelScenario.id === "completed"
+        ? [basicMessages[0], allPartsMessage]
+        : panelScenario.messages,
+    [panelScenario],
+  );
+
+  return (
+    <main
+      className={theme === "dark" ? "dark" : ""}
+      data-message-panel-chat-showcase=""
+      style={{
+        display: "grid",
+        height: "100dvh",
+        minHeight: 0,
+        gridTemplateRows: "auto minmax(0, 1fr) auto",
+        overflow: "hidden",
+        color: "var(--foreground)",
+        background: "var(--background)",
+        fontFamily: "var(--font-sans)",
+      }}
+    >
+      <header
+        style={{
+          zIndex: 30,
+          display: "flex",
+          minWidth: 0,
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: 10,
+          padding: "10px clamp(12px, 2vw, 24px)",
+          borderBottom: "1px solid var(--border)",
+          background: "var(--background)",
+        }}
+      >
+        <a
+          href="/"
+          style={{
+            color: "var(--muted-foreground)",
+            fontSize: 13,
+            textDecoration: "none",
+          }}
+        >
+          ← 返回系统
+        </a>
+        <div style={{ minWidth: 190, marginRight: "auto" }}>
+          <h1 style={{ margin: 0, fontSize: 14 }}>
+            UI 全场景验收 Chat
+          </h1>
+          <small style={{ color: "var(--muted-foreground)" }}>
+            16 类组件 · 7 类生命周期 · 7 类输入状态
+          </small>
+        </div>
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 7,
+            color: "var(--muted-foreground)",
+            fontSize: 12,
+          }}
+        >
+          消息状态
+          <select
+            aria-label="消息状态"
+            value={panelScenarioId}
+            onChange={(event) => setPanelScenarioId(event.currentTarget.value)}
+            style={controlStyle}
+          >
+            {panelScenarios.map((scenario) => (
+              <option key={scenario.id} value={scenario.id}>
+                {scenario.title}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 7,
+            color: "var(--muted-foreground)",
+            fontSize: 12,
+          }}
+        >
+          输入状态
+          <select
+            aria-label="输入状态"
+            value={composerScenarioId}
+            onChange={(event) =>
+              setComposerScenarioId(event.currentTarget.value)
+            }
+            style={controlStyle}
+          >
+            {composerScenarios.map((scenario) => (
+              <option key={scenario.id} value={scenario.id}>
+                {scenario.title}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button
+          type="button"
+          onClick={() =>
+            setTheme((current) => (current === "dark" ? "light" : "dark"))
+          }
+          style={controlStyle}
+        >
+          {theme === "dark" ? "浅色" : "深色"}
+        </button>
+      </header>
+
+      <MessagePanel
+        messages={messages}
+        status={panelScenario.status}
+        isHydrating={panelScenario.flags?.isHydrating}
+        isRecovering={panelScenario.flags?.isRecovering}
+        isServerStreaming={panelScenario.flags?.isServerStreaming}
+        error={panelScenario.error}
+        adapter={demoMessageAdapter}
+        actions={{
+          onSuggestion: noOp,
+          onAnswer: noOp,
+          onApprove: noOp,
+          onPreview: noOp,
+          onDownload: noOp,
+          onRetry: noOp,
+        }}
+      />
+
+      <footer
+        style={{
+          position: "relative",
+          zIndex: 20,
+          padding: "8px clamp(14px, 4vw, 32px) 18px",
+          background:
+            "linear-gradient(to top, var(--background) 76%, transparent)",
+        }}
+      >
+        <div
+          data-composer-showcase={composerScenario.id}
+          style={{
+            position: "relative",
+            width: "min(100%, 780px)",
+            marginInline: "auto",
+          }}
+        >
+          <Composer
+            key={composerScenario.id}
+            defaultValue={composerScenario.value}
+            status={composerScenario.status}
+            attachments={composerScenario.attachments}
+            onSubmit={noOp}
+            onStop={noOp}
+            onFilesAdded={noOp}
+            onAttachmentRemove={noOp}
+            onAttachmentRetry={noOp}
+            onAttachmentReorder={noOp}
+            placeholder="这是验收夹具，不会发送或保存数据"
+          />
+          {composerScenario.overlay && <DropOverlay />}
+        </div>
+      </footer>
+    </main>
+  );
+}