@springbrand/message-panel 0.1.0 → 0.1.2

package/dist/demo/fixtures.d.ts

@@ -0,0 +1,32 @@
+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 declare const demoMessageAdapter: MessageAdapter<DemoMessage>;
+export declare const allPartsMessage: DemoMessage;
+export declare const basicMessages: DemoMessage[];
+export declare const panelScenarios: Array<{
+    id: string;
+    title: string;
+    messages: DemoMessage[];
+    status: MessagePanelStatus;
+    flags?: {
+        isHydrating?: boolean;
+        isRecovering?: boolean;
+        isServerStreaming?: boolean;
+    };
+    error?: Error;
+}>;
+export interface DemoAttachment {
+    id: string;
+    filename: string;
+    status: "uploading" | "ready" | "error";
+    mediaType: string;
+    size: number;
+}
+export declare const readyAttachment: DemoAttachment;
+export declare const uploadingAttachment: DemoAttachment;
+export declare const errorAttachment: DemoAttachment;

package/dist/demo/fixtures.js

@@ -0,0 +1,250 @@
+export const demoMessageAdapter = {
+    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 = {
+    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 = [
+    {
+        id: "demo-user",
+        role: "user",
+        parts: [{ type: "text", text: "帮我制作一份竞品周报。" }],
+    },
+    {
+        id: "demo-assistant",
+        role: "assistant",
+        parts: [{ type: "text", text: "好的，我会先做计划，再开始调研。" }],
+    },
+];
+export const panelScenarios = [
+    { 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 const readyAttachment = {
+    id: "ready-file",
+    filename: "brief.pdf",
+    status: "ready",
+    mediaType: "application/pdf",
+    size: 21840,
+};
+export const uploadingAttachment = {
+    ...readyAttachment,
+    id: "uploading-file",
+    filename: "research.csv",
+    status: "uploading",
+    mediaType: "text/csv",
+};
+export const errorAttachment = {
+    ...readyAttachment,
+    id: "error-file",
+    filename: "broken.zip",
+    status: "error",
+    mediaType: "application/zip",
+};

package/dist/demo/index.js

@@ -0,0 +1,4 @@
+export * from "./camel-chat-showcase";
+export * from "./fixtures";
+export * from "./message-panel-chat-showcase";
+export * from "./message-panel-gallery";

package/dist/demo/message-panel-chat-showcase.d.ts

@@ -0,0 +1 @@
+export declare function MessagePanelChatShowcase(): import("react").JSX.Element;

package/dist/demo/message-panel-chat-showcase.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { MessagePanel } from "../src";
+import { Composer, DropOverlay } from "../src/composer";
+import { allPartsMessage, basicMessages, demoMessageAdapter, errorAttachment, panelScenarios, readyAttachment, uploadingAttachment, } from "./fixtures";
+const noOp = () => undefined;
+const composerScenarios = [
+    { 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,
+};
+export function MessagePanelChatShowcase() {
+    const [theme, setTheme] = useState("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 (_jsxs("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)",
+        }, children: [_jsxs("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)",
+                }, children: [_jsx("a", { href: "/", style: {
+                            color: "var(--muted-foreground)",
+                            fontSize: 13,
+                            textDecoration: "none",
+                        }, children: "\u2190 \u8FD4\u56DE\u7CFB\u7EDF" }), _jsxs("div", { style: { minWidth: 190, marginRight: "auto" }, children: [_jsx("h1", { style: { margin: 0, fontSize: 14 }, children: "UI \u5168\u573A\u666F\u9A8C\u6536 Chat" }), _jsx("small", { style: { color: "var(--muted-foreground)" }, children: "16 \u7C7B\u7EC4\u4EF6 \u00B7 7 \u7C7B\u751F\u547D\u5468\u671F \u00B7 7 \u7C7B\u8F93\u5165\u72B6\u6001" })] }), _jsxs("label", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 7,
+                            color: "var(--muted-foreground)",
+                            fontSize: 12,
+                        }, children: ["\u6D88\u606F\u72B6\u6001", _jsx("select", { "aria-label": "\u6D88\u606F\u72B6\u6001", value: panelScenarioId, onChange: (event) => setPanelScenarioId(event.currentTarget.value), style: controlStyle, children: panelScenarios.map((scenario) => (_jsx("option", { value: scenario.id, children: scenario.title }, scenario.id))) })] }), _jsxs("label", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 7,
+                            color: "var(--muted-foreground)",
+                            fontSize: 12,
+                        }, children: ["\u8F93\u5165\u72B6\u6001", _jsx("select", { "aria-label": "\u8F93\u5165\u72B6\u6001", value: composerScenarioId, onChange: (event) => setComposerScenarioId(event.currentTarget.value), style: controlStyle, children: composerScenarios.map((scenario) => (_jsx("option", { value: scenario.id, children: scenario.title }, scenario.id))) })] }), _jsx("button", { type: "button", onClick: () => setTheme((current) => (current === "dark" ? "light" : "dark")), style: controlStyle, children: theme === "dark" ? "浅色" : "深色" })] }), _jsx(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,
+                } }), _jsx("footer", { style: {
+                    position: "relative",
+                    zIndex: 20,
+                    padding: "8px clamp(14px, 4vw, 32px) 18px",
+                    background: "linear-gradient(to top, var(--background) 76%, transparent)",
+                }, children: _jsxs("div", { "data-composer-showcase": composerScenario.id, style: {
+                        position: "relative",
+                        width: "min(100%, 780px)",
+                        marginInline: "auto",
+                    }, children: [_jsx(Composer, { defaultValue: composerScenario.value, status: composerScenario.status, attachments: composerScenario.attachments, onSubmit: noOp, onStop: noOp, onFilesAdded: noOp, onAttachmentRemove: noOp, onAttachmentRetry: noOp, onAttachmentReorder: noOp, placeholder: "\u8FD9\u662F\u9A8C\u6536\u5939\u5177\uFF0C\u4E0D\u4F1A\u53D1\u9001\u6216\u4FDD\u5B58\u6570\u636E" }, composerScenario.id), composerScenario.overlay && _jsx(DropOverlay, {})] }) })] }));
+}

package/dist/demo/message-panel-gallery.d.ts

@@ -0,0 +1 @@
+export declare function MessagePanelGallery(): import("react").JSX.Element;

package/dist/demo/message-panel-gallery.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { MessagePanel, UnknownPart, } from "../src";
+import { ChatComposer, Composer, DropOverlay, } from "../src/composer";
+import { allPartsMessage, basicMessages, demoMessageAdapter, errorAttachment, panelScenarios, readyAttachment, uploadingAttachment, } from "./fixtures";
+const noOp = () => undefined;
+function GalleryHeading({ eyebrow, title, description, }) {
+    return (_jsxs("header", { style: { display: "grid", gap: 8 }, children: [_jsx("small", { style: { color: "var(--primary)", fontWeight: 700 }, children: eyebrow }), _jsx("h2", { style: { margin: 0, fontSize: 24 }, children: title }), _jsx("p", { style: { maxWidth: 720, margin: 0, color: "var(--muted-foreground)", lineHeight: 1.6 }, children: description })] }));
+}
+function ComposerScenario({ id, title, value, attachments = [], status = "ready", overlay = false, }) {
+    return (_jsxs("article", { "data-composer-scenario": id, style: { position: "relative", display: "grid", gap: 8 }, children: [_jsx("strong", { style: { fontSize: 13 }, children: title }), _jsx(Composer, { value: value, status: status, attachments: attachments, onValueChange: noOp, onSubmit: noOp, onStop: noOp, onFilesAdded: noOp, onAttachmentRemove: noOp, onAttachmentRetry: noOp, onAttachmentReorder: noOp }), overlay && _jsx(DropOverlay, {})] }));
+}
+function ComposerInteractionHarness() {
+    const [value, setValue] = useState("保留中的草稿");
+    const [attachments, setAttachments] = useState([
+        {
+            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([]);
+    const record = (event) => setEvents((current) => [...current, event]);
+    return (_jsxs("section", { "data-composer-interaction-harness": "", style: { display: "grid", gap: 16, marginTop: 48 }, children: [_jsx(GalleryHeading, { eyebrow: "INTERACTION CONTRACTS", title: "Composer \u4EA4\u4E92\u9A8C\u6536", description: "\u8FD9\u4E2A\u53EF\u64CD\u4F5C\u5939\u5177\u8986\u76D6\u53D7\u63A7\u4E0E\u975E\u53D7\u63A7\u8F93\u5165\u3001\u4E09\u79CD\u6587\u4EF6\u5165\u53E3\u3001\u5C40\u90E8\u62D6\u653E\u9694\u79BB\u3001\u6821\u9A8C\u3001\u63D0\u4EA4\u3001\u505C\u6B62\u3001\u91CD\u8BD5\u3001\u79FB\u9664\u548C\u9644\u4EF6\u91CD\u6392\u3002" }), _jsxs("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+                    gap: 16,
+                }, children: [_jsx(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",
+                                    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}`) }), _jsx(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 }), _jsx(Composer, { "data-harness-composer": "uncontrolled", defaultValue: "\u975E\u53D7\u63A7\u8349\u7A3F", status: "ready", onSubmit: ({ text }) => record(`uncontrolled:${text}`) }), _jsx(Composer, { "data-harness-composer": "streaming", value: "\u751F\u6210\u4E2D", status: "streaming", onValueChange: noOp, onSubmit: noOp, onStop: () => record("stop") }), _jsx("div", { "data-sb-message-panel": "", "data-harness-panel-drop": "", children: _jsx(Composer, { "data-harness-composer": "panel-scope", defaultValue: "", status: "ready", dropScope: "panel", onFilesAdded: (files) => record(`panel:${files.map((file) => file.name).join(",")}`), onSubmit: noOp }) })] }), _jsx("output", { "data-harness-order": "", children: attachments.map((attachment) => attachment.filename).join(",") }), _jsx("output", { "data-harness-events": "", children: events.join("|") })] }));
+}
+export function MessagePanelGallery() {
+    const [theme, setTheme] = useState("dark");
+    const rootClass = theme === "dark" ? "dark" : "";
+    useEffect(() => {
+        document.documentElement.classList.toggle("dark", theme === "dark");
+    }, [theme]);
+    const unknownContext = {
+        messageId: "unknown",
+        partIndex: 0,
+        activityId: "unknown:0",
+        isActive: false,
+        isLatestOfKind: true,
+        status: "ready",
+        actions: {},
+    };
+    return (_jsxs("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)",
+        }, children: [_jsxs("header", { style: {
+                    display: "flex",
+                    alignItems: "flex-start",
+                    justifyContent: "space-between",
+                    gap: 24,
+                    marginBottom: 48,
+                }, children: [_jsxs("div", { children: [_jsx("small", { style: { color: "var(--primary)", fontWeight: 700 }, children: "@springbrand/message-panel" }), _jsx("h1", { style: { margin: "8px 0", fontSize: "clamp(30px, 5vw, 52px)" }, children: "Message Panel Gallery" }), _jsx("p", { style: { margin: 0, color: "var(--muted-foreground)" }, children: "16 \u7C7B Part\u30017 \u7C7B Panel \u72B6\u6001\u548C 7 \u7C7B Composer \u72B6\u6001\u7684\u7A33\u5B9A\u9A8C\u6536\u5C55\u5385\u3002" })] }), _jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: [_jsx("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",
+                                }, children: "\u6253\u5F00\u5355 Chat \u9A8C\u6536" }), _jsx("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)",
+                                }, children: theme === "dark" ? "切换浅色" : "切换深色" })] })] }), _jsxs("section", { style: { display: "grid", gap: 20, marginBottom: 56 }, children: [_jsx(GalleryHeading, { eyebrow: "ROLE + PARTS", title: "\u5B8C\u6574\u53D9\u4E8B\u6D41", description: "\u7528\u6237\u4E0E Assistant \u4E24\u79CD\u89D2\u8272\u4FDD\u6301\u539F\u59CB Part \u987A\u5E8F\uFF1B\u4E0B\u65B9 Assistant \u6D88\u606F\u8986\u76D6\u9996\u7248\u5168\u90E8 16 \u79CD\u5C55\u793A\u5F62\u6001\u3002" }), _jsx("div", { style: { height: 1100, overflow: "hidden", border: "1px solid var(--border)", borderRadius: 18 }, children: _jsx(MessagePanel, { messages: [basicMessages[0], allPartsMessage], status: "ready", adapter: demoMessageAdapter, actions: {
+                                onSuggestion: noOp,
+                                onAnswer: noOp,
+                                onApprove: noOp,
+                                onPreview: noOp,
+                                onDownload: noOp,
+                                onRetry: noOp,
+                            } }) }), _jsxs("div", { "data-scenario": "unknown-fallback", children: [_jsx(UnknownPart, { part: { type: "data-future-component", data: { hello: "world" } } }), _jsx("span", { style: { display: "none" }, children: unknownContext.activityId })] })] }), _jsxs("section", { style: { display: "grid", gap: 20, marginBottom: 56 }, children: [_jsx(GalleryHeading, { eyebrow: "PANEL STATES", title: "7 \u7C7B\u6D88\u606F\u751F\u547D\u5468\u671F", description: "Hydrating\u3001Recovering \u4E0E Background \u662F\u6B63\u4EA4\u8986\u76D6\u6001\uFF1B\u9519\u8BEF\u548C\u4E2D\u65AD\u4E0D\u4F1A\u9057\u7559\u65E0\u9650 spinner\u3002" }), _jsx("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+                            gap: 16,
+                        }, children: panelScenarios.map((scenario) => (_jsxs("article", { "data-panel-scenario": scenario.id, style: { display: "grid", gap: 8 }, children: [_jsx("strong", { style: { fontSize: 13 }, children: scenario.title }), _jsx("div", { style: { height: 300, overflow: "hidden", border: "1px solid var(--border)", borderRadius: 16 }, children: _jsx(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 } }) })] }, scenario.id))) })] }), _jsxs("section", { style: { display: "grid", gap: 20 }, children: [_jsx(GalleryHeading, { eyebrow: "COMPOSER STATES", title: "7 \u7C7B\u8F93\u5165\u4E0E\u9644\u4EF6\u72B6\u6001", description: "\u9009\u62E9\u3001\u7C98\u8D34\u548C\u62D6\u5165\u6587\u4EF6\u5171\u4EAB\u4E00\u4E2A callback\uFF1B\u4E0A\u4F20\u4E2D\u963B\u6B62\u53D1\u9001\uFF0C\u5931\u8D25\u53EF\u91CD\u8BD5\uFF0C\u9644\u4EF6\u652F\u6301\u952E\u76D8\u7B49\u4EF7\u91CD\u6392\u3002" }), _jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
+                            gap: 22,
+                        }, children: [_jsx(ComposerScenario, { id: "empty", title: "Empty" }), _jsx(ComposerScenario, { id: "drafting", title: "Drafting", value: "\u4E3A\u8FD9\u4EFD\u6570\u636E\u751F\u6210\u62A5\u544A" }), _jsx(ComposerScenario, { id: "drag-active", title: "Drag active", overlay: true }), _jsx(ComposerScenario, { id: "uploading", title: "Uploading", attachments: [uploadingAttachment] }), _jsx(ComposerScenario, { id: "attachment-error", title: "Attachment error", value: "\u4E0D\u8981\u4E22\u6389\u8FD9\u4EFD\u8349\u7A3F", attachments: [errorAttachment] }), _jsx(ComposerScenario, { id: "ready-with-attachments", title: "Ready with attachments", attachments: [readyAttachment] }), _jsx(ComposerScenario, { id: "submitted-streaming", title: "Submitted / Streaming", value: "\u6B63\u5728\u53D1\u9001\u2026", status: "streaming" })] })] }), _jsx(ComposerInteractionHarness, {})] }));
+}

package/dist/src/adapters/ai-sdk.d.ts

@@ -0,0 +1,4 @@
+import type { UIMessage } from "ai";
+import type { MessageAdapter } from "../contracts";
+export declare function uiMessageText(message: UIMessage): string;
+export declare const aiSdkMessageAdapter: MessageAdapter<UIMessage>;

package/dist/src/adapters/ai-sdk.js

@@ -0,0 +1,25 @@
+import { resolvePartKind } from "../parts/kind";
+export function uiMessageText(message) {
+    return message.parts
+        .filter((part) => part.type === "text")
+        .map((part) => part.text)
+        .join("\n");
+}
+export const aiSdkMessageAdapter = {
+    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
+            : {};
+        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";
+    },
+};

package/dist/src/camel/camel-chat-messages.d.ts

@@ -0,0 +1,44 @@
+import type { UIMessage } from "ai";
+import { type MessageUrlResolver } from "../message";
+import type { ToolApprovalDecision, ToolApprovalView } from "../contracts";
+type ChatStatus = "ready" | "submitted" | "streaming" | "error";
+export interface CamelPendingApproval {
+    id: string;
+    action: string;
+    summary: string;
+    executionLevelLabel: string;
+    requiredExecutionLevelLabel: string;
+    disabled?: boolean;
+}
+export interface CamelChatMessagesProps {
+    messages: readonly UIMessage[];
+    status: ChatStatus;
+    /** Exact tool names promoted from the collapsible trace to final output. */
+    finalToolNames?: readonly string[];
+    isHydrating?: boolean;
+    isRecovering?: boolean;
+    isServerStreaming?: boolean;
+    hasPendingSteer?: boolean;
+    startedWithPending?: boolean;
+    error?: unknown;
+    onRetry?: () => void;
+    onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+    onSuggestion: (text: string) => void;
+    onAnswer: (payload: unknown) => void;
+    onFork?: (messageId: string) => void | Promise<void>;
+    getToolApproval?: (part: unknown) => ToolApprovalView | undefined;
+    resolveUrl?: MessageUrlResolver;
+    /** Set false when durable approval actions are rendered outside the trace. */
+    inlineApprovalActions?: boolean;
+}
+export declare function CamelChatError({ error, onRetry, }: {
+    error: unknown;
+    onRetry?: () => void;
+}): import("react").JSX.Element;
+export declare function CamelApprovalPrompts({ approvals, error, onApprove, }: {
+    approvals: readonly CamelPendingApproval[];
+    error?: string | null;
+    onApprove: (approvalId: string, decision: ToolApprovalDecision) => void;
+}): import("react").JSX.Element | null;
+export declare function CamelChatMessages({ messages, status, finalToolNames, isHydrating, isRecovering, isServerStreaming, hasPendingSteer, startedWithPending, error, onRetry, onApprove, onSuggestion, onAnswer, onFork, getToolApproval, resolveUrl, inlineApprovalActions, }: CamelChatMessagesProps): import("react").JSX.Element;
+export {};