@springbrand/message-panel 0.1.1 → 0.1.2

package/dist/src/message.d.ts

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes } from "react";
+import { type StreamdownProps } from "streamdown";
+import type { MessageRole } from "./contracts";
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+    from: MessageRole;
+};
+export declare const Message: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    from: MessageRole;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MessageContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MessageActions: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type MessageActionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    tooltip?: string;
+    label?: string;
+};
+export declare const MessageAction: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    tooltip?: string;
+    label?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export type MessageResponseProps = StreamdownProps & {
+    streaming?: boolean;
+    resolveUrl?: MessageUrlResolver;
+};
+export type MessageUrlResolver = (url: string) => string | null | undefined;
+export declare const MessageResponse: import("react").MemoExoticComponent<({ className, streaming, resolveUrl, rehypePlugins, ...props }: MessageResponseProps) => import("react").JSX.Element>;
+export declare function AssistantMessageActions({ text, messageId, canRetry, onCopy, onRetry, onFork, }: {
+    text: string;
+    messageId: string;
+    canRetry: boolean;
+    onCopy?: (text: string) => void | Promise<void>;
+    onRetry?: (messageId: string) => void | Promise<void>;
+    onFork?: (messageId: string) => void | Promise<void>;
+}): import("react").JSX.Element | null;
+export declare function BrandMark({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/src/message.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { CheckIcon, CopyIcon, GitForkIcon, Loader2Icon, RefreshCcwIcon, } from "lucide-react";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState, } from "react";
+import { defaultRehypePlugins, Streamdown, } from "streamdown";
+import { cn } from "./internal/cn";
+export const Message = forwardRef(({ className, from, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("sb-message", from === "user" ? "sb-message--user" : "sb-message--assistant", className), "data-role": from, ...props })));
+Message.displayName = "Message";
+export const MessageContent = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("sb-message__content", className), ...props })));
+MessageContent.displayName = "MessageContent";
+export const MessageActions = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("sb-message__actions", className), ...props })));
+MessageActions.displayName = "MessageActions";
+export const MessageAction = forwardRef(({ className, tooltip, label, children, ...props }, ref) => (_jsx("button", { ref: ref, type: "button", className: cn("sb-message__action", className), title: tooltip, "aria-label": label ?? tooltip, ...props, children: children })));
+MessageAction.displayName = "MessageAction";
+const streamdownPlugins = { cjk, code, math, mermaid };
+const streamAnimation = {
+    animation: "fadeIn",
+    sep: "word",
+    duration: 260,
+    stagger: 14,
+};
+const streamdownRehypePlugins = Object.values(defaultRehypePlugins);
+function resolveUrlsPlugin(resolveUrl) {
+    return () => (tree) => {
+        const visit = (node) => {
+            if (node.type === "element" && node.properties) {
+                const url = node.properties.href;
+                if (typeof url === "string") {
+                    const resolved = resolveUrl(url);
+                    if (resolved === null)
+                        delete node.properties.href;
+                    else if (resolved !== undefined)
+                        node.properties.href = resolved;
+                }
+            }
+            node.children?.forEach(visit);
+        };
+        visit(tree);
+    };
+}
+export const MessageResponse = memo(({ className, streaming = false, resolveUrl, rehypePlugins, ...props }) => (_jsx(Streamdown, { className: cn("sb-message-response", className), plugins: streamdownPlugins, rehypePlugins: resolveUrl
+        ? [resolveUrlsPlugin(resolveUrl), ...(rehypePlugins ?? streamdownRehypePlugins)]
+        : rehypePlugins, ...(streaming
+        ? {
+            mode: "streaming",
+            isAnimating: true,
+            animated: streamAnimation,
+        }
+        : { mode: "static" }), ...props })), (previous, next) => previous.children === next.children &&
+    previous.streaming === next.streaming &&
+    previous.resolveUrl === next.resolveUrl);
+MessageResponse.displayName = "MessageResponse";
+export function AssistantMessageActions({ text, messageId, canRetry, onCopy, onRetry, onFork, }) {
+    const [copied, setCopied] = useState(false);
+    const [forking, setForking] = useState(false);
+    const timer = useRef(null);
+    useEffect(() => () => {
+        if (timer.current !== null)
+            window.clearTimeout(timer.current);
+    }, []);
+    const copy = useCallback(async () => {
+        if (onCopy)
+            await onCopy(text);
+        else if (typeof navigator !== "undefined")
+            await navigator.clipboard.writeText(text);
+        setCopied(true);
+        if (timer.current !== null)
+            window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => setCopied(false), 1500);
+    }, [onCopy, text]);
+    if (!text && (!canRetry || !onRetry) && !onFork)
+        return null;
+    return (_jsxs(MessageActions, { children: [text && (_jsx(MessageAction, { tooltip: copied ? "已复制" : "复制", label: "\u590D\u5236", onClick: () => void copy(), children: copied ? _jsx(CheckIcon, { size: 15 }) : _jsx(CopyIcon, { size: 15 }) })), canRetry && onRetry && (_jsx(MessageAction, { tooltip: "\u91CD\u8BD5", label: "\u91CD\u8BD5", onClick: () => void onRetry(messageId), children: _jsx(RefreshCcwIcon, { size: 15 }) })), onFork && (_jsx(MessageAction, { tooltip: forking ? "正在创建新会话…" : "从这里创建新会话", label: forking ? "正在创建新会话" : "从这里创建新会话", disabled: forking, onClick: () => {
+                    setForking(true);
+                    void Promise.resolve(onFork(messageId)).finally(() => setForking(false));
+                }, children: forking ? (_jsx(Loader2Icon, { size: 15, className: "sb-spin" })) : (_jsx(GitForkIcon, { size: 15 })) }))] }));
+}
+export function BrandMark({ className }) {
+    return (_jsx("span", { className: cn("sb-brand-mark", className), "aria-hidden": "true", children: _jsx("svg", { width: "17", height: "17", viewBox: "0 0 28 28", fill: "none", children: _jsx("path", { d: "M14 14 C 11.5 10.5, 6.5 10.5, 6.5 14 C 6.5 17.5, 11.5 17.5, 14 14 C 16.5 10.5, 21.5 10.5, 21.5 14 C 21.5 17.5, 16.5 17.5, 14 14 Z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", className: "sb-brand-mark__loop" }) }) }));
+}

package/dist/src/parts/index.d.ts

@@ -0,0 +1,187 @@
+import { type ReactNode } from "react";
+import type { PartRendererContext, RichPartKind, AIToolPart } from "../contracts";
+import { type PlanStep, type PlanStepStatus } from "./plan";
+export { resolvePartKind, toolNameOfPart } from "./kind";
+export { planStepsOfPart, projectLatestPlan, type PlanStep, type PlanStepStatus, } from "./plan";
+export interface TextPartProps {
+    text: string;
+    streaming?: boolean;
+}
+export declare const OUT_OF_BAND_PREFIX = "[Delivered to the user out of band]";
+export declare function stripNoticePrefix(text: string): string;
+export declare function TextPart({ text, streaming }: TextPartProps): import("react").JSX.Element | null;
+export interface ReasoningPartProps {
+    text: string;
+    label?: string;
+    streaming?: boolean;
+    duration?: number;
+}
+export declare function ReasoningPart({ text, label, streaming, duration, }: ReasoningPartProps): import("react").JSX.Element | null;
+type ToolIcon = "web" | "news" | "code" | "image" | "file" | "terminal";
+export interface ToolPartProps {
+    name: string;
+    state: AIToolPart["state"] | "interrupted";
+    input?: unknown;
+    output?: unknown;
+    errorText?: string;
+    icon?: ToolIcon;
+    label?: string;
+    meta?: string;
+    results?: Array<{
+        title: string;
+        domain: string;
+    }>;
+    command?: string;
+    isActive?: boolean;
+    activityId?: string;
+    onNavigate?: (target: string) => void;
+}
+export type ToolPart = AIToolPart;
+export declare function ToolPart({ name, state, input, output, errorText, icon, label, meta, results, command, activityId, onNavigate, }: ToolPartProps): import("react").JSX.Element;
+export declare function ErrorPart({ title, body, onRetry, }: {
+    title?: string;
+    body: string;
+    onRetry?: () => void;
+}): import("react").JSX.Element;
+export declare function ImagePart({ src, alt, onPreview, }: {
+    src: string;
+    alt: string;
+    onPreview?: () => void;
+}): import("react").JSX.Element;
+export interface ChartBar {
+    label: string;
+    value: number;
+}
+export declare function ChartPart({ title, unit, bars, expandable, onPreview, }: {
+    title: string;
+    unit?: string;
+    bars: readonly ChartBar[];
+    expandable?: boolean;
+    onPreview?: () => void;
+}): import("react").JSX.Element;
+export declare function AgentCardPart({ title, agentName, agentDesc, onNavigate, }: {
+    title: string;
+    agentName: string;
+    agentDesc: string;
+    onNavigate?: () => void;
+}): import("react").JSX.Element;
+export declare function StepStatusIcon({ status, animated, }: {
+    status: PlanStepStatus;
+    animated?: boolean;
+}): import("react").JSX.Element;
+export declare function PlanPart({ title, steps, streaming, }: {
+    title: string;
+    steps: readonly PlanStep[];
+    streaming?: boolean;
+}): import("react").JSX.Element;
+export declare function SchedulePart({ title, cadence, nextRun, scheduled, onSchedule, }: {
+    title: string;
+    cadence: string;
+    nextRun: string;
+    scheduled?: boolean;
+    onSchedule?: () => void;
+}): import("react").JSX.Element;
+export interface ParallelTool {
+    icon?: Exclude<ToolIcon, "image" | "terminal">;
+    label: string;
+    meta?: string;
+    status?: "running" | "done" | "failed";
+    results?: Array<{
+        title: string;
+        domain: string;
+    }>;
+}
+export declare function RunningRow({ tool }: {
+    tool: ParallelTool;
+}): import("react").JSX.Element;
+export declare function CollapsedRow({ tool }: {
+    tool: ParallelTool;
+}): import("react").JSX.Element;
+export declare function ParallelPart({ label, tools, isActive, }: {
+    label?: string;
+    tools: readonly ParallelTool[];
+    isActive?: boolean;
+}): import("react").JSX.Element;
+export interface SubAgent {
+    name: string;
+    tint?: string;
+    summary: string;
+    status?: "running" | "done" | "failed";
+}
+export declare function SubAgentsPart({ agents, isActive, }: {
+    agents: readonly SubAgent[];
+    isActive?: boolean;
+}): import("react").JSX.Element;
+export declare function ConfirmationPart({ id, title, body, confirmLabel, cancelLabel, state, onConfirm, }: {
+    id?: string;
+    title: string;
+    body?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    state?: "pending" | "confirmed" | "cancelled";
+    onConfirm?: (confirmed: boolean) => void | Promise<void>;
+}): import("react").JSX.Element;
+export type FileKind = "doc" | "image" | "html" | "audio" | "csv" | "code";
+export declare function FilePart({ name, kind, note, url, artifact, onPreview, onDownload, }: {
+    name: string;
+    kind?: FileKind;
+    note?: string;
+    url?: string;
+    artifact?: unknown;
+    onPreview?: (artifact: unknown) => void;
+    onDownload?: (artifact: unknown) => void;
+}): import("react").JSX.Element;
+export interface DashboardData {
+    title: string;
+    cards?: Array<{
+        icon?: string;
+        title: string;
+        body: string;
+    }>;
+    tiles?: Array<{
+        label: string;
+        value: string;
+    }>;
+    badges?: string[];
+    fileNote?: {
+        title: string;
+        body: string;
+    };
+    table?: {
+        columns: string[];
+        rows: string[][];
+    };
+}
+export declare function DashboardPart(data: DashboardData): import("react").JSX.Element;
+export interface AskQuestion {
+    prompt: string;
+    kind: "single" | "multi";
+    options: string[];
+}
+export declare function AskUserPart({ questions, freeTextPlaceholder, submittedAnswer, onSubmit, }: {
+    questions: readonly AskQuestion[];
+    freeTextPlaceholder?: string;
+    submittedAnswer?: string;
+    onSubmit?: (payload: {
+        selections: string[][];
+        text: string;
+    }) => void | Promise<void>;
+}): import("react").JSX.Element;
+export declare function Suggestions({ items, onPick, }: {
+    items: readonly string[];
+    onPick?: (text: string) => void | Promise<void>;
+}): import("react").JSX.Element;
+export declare function InlineText({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function PartLoading({ kind, label, }: {
+    kind: RichPartKind;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function UnknownPart({ part }: {
+    part: unknown;
+}): import("react").JSX.Element;
+export declare function DefaultPartRenderer({ part, context, }: {
+    part: unknown;
+    context: PartRendererContext;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;