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

package/demo/message-panel-gallery.tsx

@@ -0,0 +1,389 @@
+import { useEffect, useState } from "react";
+import {
+  MessagePanel,
+  UnknownPart,
+  type PartRendererContext,
+} from "../src";
+import {
+  ChatComposer,
+  Composer,
+  DropOverlay,
+} from "../src/composer";
+import {
+  allPartsMessage,
+  basicMessages,
+  demoMessageAdapter,
+  errorAttachment,
+  panelScenarios,
+  readyAttachment,
+  uploadingAttachment,
+  type DemoAttachment,
+} from "./fixtures";
+
+const noOp = () => undefined;
+
+function GalleryHeading({
+  eyebrow,
+  title,
+  description,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <header style={{ display: "grid", gap: 8 }}>
+      <small style={{ color: "var(--primary)", fontWeight: 700 }}>{eyebrow}</small>
+      <h2 style={{ margin: 0, fontSize: 24 }}>{title}</h2>
+      <p style={{ maxWidth: 720, margin: 0, color: "var(--muted-foreground)", lineHeight: 1.6 }}>
+        {description}
+      </p>
+    </header>
+  );
+}
+
+function ComposerScenario({
+  id,
+  title,
+  value,
+  attachments = [],
+  status = "ready",
+  overlay = false,
+}: {
+  id: string;
+  title: string;
+  value?: string;
+  attachments?: DemoAttachment[];
+  status?: "ready" | "submitted" | "streaming" | "error";
+  overlay?: boolean;
+}) {
+  return (
+    <article
+      data-composer-scenario={id}
+      style={{ position: "relative", display: "grid", gap: 8 }}
+    >
+      <strong style={{ fontSize: 13 }}>{title}</strong>
+      <Composer
+        value={value}
+        status={status}
+        attachments={attachments}
+        onValueChange={noOp}
+        onSubmit={noOp}
+        onStop={noOp}
+        onFilesAdded={noOp}
+        onAttachmentRemove={noOp}
+        onAttachmentRetry={noOp}
+        onAttachmentReorder={noOp}
+      />
+      {overlay && <DropOverlay />}
+    </article>
+  );
+}
+
+function ComposerInteractionHarness() {
+  const [value, setValue] = useState("保留中的草稿");
+  const [attachments, setAttachments] = useState<DemoAttachment[]>([
+    {
+      id: "alpha",
+      filename: "alpha.txt",
+      status: "ready",
+      mediaType: "text/plain",
+      size: 12,
+    },
+    {
+      id: "bravo",
+      filename: "bravo.txt",
+      status: "ready",
+      mediaType: "text/plain",
+      size: 12,
+    },
+  ]);
+  const [events, setEvents] = useState<string[]>([]);
+  const record = (event: string) =>
+    setEvents((current) => [...current, event]);
+
+  return (
+    <section
+      data-composer-interaction-harness=""
+      style={{ display: "grid", gap: 16, marginTop: 48 }}
+    >
+      <GalleryHeading
+        eyebrow="INTERACTION CONTRACTS"
+        title="Composer 交互验收"
+        description="这个可操作夹具覆盖受控与非受控输入、三种文件入口、局部拖放隔离、校验、提交、停止、重试、移除和附件重排。"
+      />
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+          gap: 16,
+        }}
+      >
+        <Composer
+          data-harness-composer="primary"
+          value={value}
+          onValueChange={setValue}
+          status="ready"
+          attachments={attachments}
+          accept=".txt,image/png"
+          maxFiles={6}
+          maxFileSize={1024}
+          onFilesAdded={(files) => {
+            record(`add:${files.map((file) => file.name).join(",")}`);
+            setAttachments((current) => [
+              ...current,
+              ...files.map((file, index) => ({
+                id: `${file.name}-${current.length + index}`,
+                filename: file.name,
+                status: "ready" as const,
+                mediaType: file.type,
+                size: file.size,
+              })),
+            ]);
+          }}
+          onAttachmentRemove={(attachment) => {
+            record(`remove:${attachment.filename}`);
+            setAttachments((current) =>
+              current.filter((item) => item.id !== attachment.id),
+            );
+          }}
+          onAttachmentRetry={(attachment) =>
+            record(`retry:${attachment.filename}`)
+          }
+          onAttachmentReorder={(fromIndex, toIndex) => {
+            record(`reorder:${fromIndex}:${toIndex}`);
+            setAttachments((current) => {
+              const next = [...current];
+              const [moved] = next.splice(fromIndex, 1);
+              next.splice(toIndex, 0, moved);
+              return next;
+            });
+          }}
+          onValidationError={(message) => record(`invalid:${message}`)}
+          onSubmit={({ text }) => record(`submit:${text}`)}
+        />
+        <ChatComposer
+          data-harness-composer="secondary"
+          defaultValue=""
+          status="ready"
+          commands={[
+            {
+              name: "plan",
+              description: "先制定计划",
+              prompt: "请先制定计划：\n",
+            },
+            {
+              name: "research",
+              description: "深入调研",
+              prompt: "请深入调研：\n",
+            },
+          ]}
+          onFilesAdded={(files) =>
+            record(`secondary:${files.map((file) => file.name).join(",")}`)
+          }
+          onSubmit={noOp}
+        />
+        <Composer
+          data-harness-composer="uncontrolled"
+          defaultValue="非受控草稿"
+          status="ready"
+          onSubmit={({ text }) => record(`uncontrolled:${text}`)}
+        />
+        <Composer
+          data-harness-composer="streaming"
+          value="生成中"
+          status="streaming"
+          onValueChange={noOp}
+          onSubmit={noOp}
+          onStop={() => record("stop")}
+        />
+        <div data-sb-message-panel="" data-harness-panel-drop="">
+          <Composer
+            data-harness-composer="panel-scope"
+            defaultValue=""
+            status="ready"
+            dropScope="panel"
+            onFilesAdded={(files) =>
+              record(`panel:${files.map((file) => file.name).join(",")}`)
+            }
+            onSubmit={noOp}
+          />
+        </div>
+      </div>
+      <output data-harness-order="">
+        {attachments.map((attachment) => attachment.filename).join(",")}
+      </output>
+      <output data-harness-events="">{events.join("|")}</output>
+    </section>
+  );
+}
+
+export function MessagePanelGallery() {
+  const [theme, setTheme] = useState<"light" | "dark">("dark");
+  const rootClass = theme === "dark" ? "dark" : "";
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }, [theme]);
+  const unknownContext: PartRendererContext = {
+    messageId: "unknown",
+    partIndex: 0,
+    activityId: "unknown:0",
+    isActive: false,
+    isLatestOfKind: true,
+    status: "ready",
+    actions: {},
+  };
+
+  return (
+    <main
+      className={rootClass}
+      data-message-panel-gallery=""
+      style={{
+        minHeight: "100dvh",
+        padding: "32px clamp(16px, 5vw, 72px) 80px",
+        color: "var(--foreground)",
+        background: "var(--background)",
+        fontFamily: "var(--font-sans)",
+      }}
+    >
+      <header
+        style={{
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "space-between",
+          gap: 24,
+          marginBottom: 48,
+        }}
+      >
+        <div>
+          <small style={{ color: "var(--primary)", fontWeight: 700 }}>
+            @springbrand/message-panel
+          </small>
+          <h1 style={{ margin: "8px 0", fontSize: "clamp(30px, 5vw, 52px)" }}>
+            Message Panel Gallery
+          </h1>
+          <p style={{ margin: 0, color: "var(--muted-foreground)" }}>
+            16 类 Part、7 类 Panel 状态和 7 类 Composer 状态的稳定验收展厅。
+          </p>
+        </div>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          <a
+            href="/__message-panel-chat"
+            style={{
+              padding: "8px 12px",
+              border: "1px solid var(--border)",
+              borderRadius: 10,
+              color: "var(--foreground)",
+              background: "var(--card)",
+              fontSize: 13,
+              textDecoration: "none",
+            }}
+          >
+            打开单 Chat 验收
+          </a>
+          <button
+            type="button"
+            onClick={() =>
+              setTheme((current) =>
+                current === "dark" ? "light" : "dark",
+              )
+            }
+            style={{
+              padding: "8px 12px",
+              border: "1px solid var(--border)",
+              borderRadius: 10,
+              color: "var(--foreground)",
+              background: "var(--card)",
+            }}
+          >
+            {theme === "dark" ? "切换浅色" : "切换深色"}
+          </button>
+        </div>
+      </header>
+
+      <section style={{ display: "grid", gap: 20, marginBottom: 56 }}>
+        <GalleryHeading
+          eyebrow="ROLE + PARTS"
+          title="完整叙事流"
+          description="用户与 Assistant 两种角色保持原始 Part 顺序；下方 Assistant 消息覆盖首版全部 16 种展示形态。"
+        />
+        <div style={{ height: 1100, overflow: "hidden", border: "1px solid var(--border)", borderRadius: 18 }}>
+          <MessagePanel
+            messages={[basicMessages[0], allPartsMessage]}
+            status="ready"
+            adapter={demoMessageAdapter}
+            actions={{
+              onSuggestion: noOp,
+              onAnswer: noOp,
+              onApprove: noOp,
+              onPreview: noOp,
+              onDownload: noOp,
+              onRetry: noOp,
+            }}
+          />
+        </div>
+        <div data-scenario="unknown-fallback">
+          <UnknownPart part={{ type: "data-future-component", data: { hello: "world" } }} />
+          <span style={{ display: "none" }}>{unknownContext.activityId}</span>
+        </div>
+      </section>
+
+      <section style={{ display: "grid", gap: 20, marginBottom: 56 }}>
+        <GalleryHeading
+          eyebrow="PANEL STATES"
+          title="7 类消息生命周期"
+          description="Hydrating、Recovering 与 Background 是正交覆盖态；错误和中断不会遗留无限 spinner。"
+        />
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+            gap: 16,
+          }}
+        >
+          {panelScenarios.map((scenario) => (
+            <article key={scenario.id} data-panel-scenario={scenario.id} style={{ display: "grid", gap: 8 }}>
+              <strong style={{ fontSize: 13 }}>{scenario.title}</strong>
+              <div style={{ height: 300, overflow: "hidden", border: "1px solid var(--border)", borderRadius: 16 }}>
+                <MessagePanel
+                  messages={scenario.messages}
+                  status={scenario.status}
+                  isHydrating={scenario.flags?.isHydrating}
+                  isRecovering={scenario.flags?.isRecovering}
+                  isServerStreaming={scenario.flags?.isServerStreaming}
+                  error={scenario.error}
+                  adapter={demoMessageAdapter}
+                  actions={{ onRetry: noOp }}
+                />
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section style={{ display: "grid", gap: 20 }}>
+        <GalleryHeading
+          eyebrow="COMPOSER STATES"
+          title="7 类输入与附件状态"
+          description="选择、粘贴和拖入文件共享一个 callback；上传中阻止发送，失败可重试，附件支持键盘等价重排。"
+        />
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
+            gap: 22,
+          }}
+        >
+          <ComposerScenario id="empty" title="Empty" />
+          <ComposerScenario id="drafting" title="Drafting" value="为这份数据生成报告" />
+          <ComposerScenario id="drag-active" title="Drag active" overlay />
+          <ComposerScenario id="uploading" title="Uploading" attachments={[uploadingAttachment]} />
+          <ComposerScenario id="attachment-error" title="Attachment error" value="不要丢掉这份草稿" attachments={[errorAttachment]} />
+          <ComposerScenario id="ready-with-attachments" title="Ready with attachments" attachments={[readyAttachment]} />
+          <ComposerScenario id="submitted-streaming" title="Submitted / Streaming" value="正在发送…" status="streaming" />
+        </div>
+      </section>
+      <ComposerInteractionHarness />
+    </main>
+  );
+}

package/package.json

@@ -1,28 +1,19 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.2",
+  "version": "0.1.3-alpha.1",
   "type": "module",
   "files": [
-    "dist",
-    "src/styles"
+    "src",
+    "demo"
   ],
   "publishConfig": {
     "access": "public"
   },
   "exports": {
-    ".": {
-      "types": "./dist/src/index.d.ts",
-      "import": "./dist/src/index.js"
-    },
-    "./composer": {
-      "types": "./dist/src/composer/index.d.ts",
-      "import": "./dist/src/composer/index.js"
-    },
+    ".": "./src/index.ts",
+    "./composer": "./src/composer/index.ts",
     "./styles.css": "./src/styles/index.css",
-    "./demo": {
-      "types": "./dist/demo/index.d.ts",
-      "import": "./dist/demo/index.js"
-    }
+    "./demo": "./demo/index.ts"
   },
   "peerDependencies": {
     "ai": "^7.0.0",
@@ -47,7 +38,6 @@
     "typescript": "^7.0.2"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/adapters/ai-sdk.ts

@@ -0,0 +1,32 @@
+import type { UIMessage } from "ai";
+import type { MessageAdapter } from "../contracts";
+import { resolvePartKind } from "../parts/kind";
+
+export function uiMessageText(message: UIMessage): string {
+  return message.parts
+    .filter(
+      (part): part is Extract<UIMessage["parts"][number], { type: "text" }> =>
+        part.type === "text",
+    )
+    .map((part) => part.text)
+    .join("\n");
+}
+
+export const aiSdkMessageAdapter: MessageAdapter<UIMessage> = {
+  getId: (message, index) => message.id || `message-${index}`,
+  getRole: (message) => message.role,
+  getParts: (message) => message.parts,
+  getMetadata: (message) => message.metadata,
+  getText: uiMessageText,
+  isPartRenderable: (part) => {
+    const record =
+      part != null && typeof part === "object"
+        ? (part as Record<string, unknown>)
+        : {};
+    if (record.type === "step-start") return false;
+    if (record.type === "text" || record.type === "reasoning") {
+      return typeof record.text === "string" && record.text.trim().length > 0;
+    }
+    return resolvePartKind(part) !== null || typeof record.type === "string";
+  },
+};