@springbrand/message-panel 0.1.0 → 0.1.2

package/demo/message-panel-gallery.tsx

@@ -1,389 +0,0 @@
-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/src/adapters/ai-sdk.ts

@@ -1,32 +0,0 @@
-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";
-  },
-};