@springbrand/message-panel 0.1.0 → 0.1.2

package/demo/fixtures.ts

@@ -1,292 +0,0 @@
-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

@@ -1,250 +0,0 @@
-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>
-  );
-}