@springbrand/message-panel 0.1.0 → 0.1.2

package/dist/src/parts/primitives.js

@@ -0,0 +1,153 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BookOpenIcon, BrainIcon, CheckCircle2Icon, ChevronDownIcon, ChevronRightIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from "lucide-react";
+import { createContext, forwardRef, useContext, useMemo, useState, } from "react";
+import { cn } from "../internal/cn";
+import { MessageResponse } from "../message";
+const ReasoningContext = createContext(null);
+export function Reasoning({ isStreaming = false, open, defaultOpen, onOpenChange, duration, className, children, ...props }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen ?? isStreaming);
+    const resolvedOpen = open ?? internalOpen;
+    const toggle = () => {
+        const next = !resolvedOpen;
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    const value = useMemo(() => ({ open: resolvedOpen, toggle, isStreaming, duration }), [resolvedOpen, isStreaming, duration]);
+    return (_jsx(ReasoningContext.Provider, { value: value, children: _jsx("div", { className: cn("sb-reasoning", className), ...props, children: children }) }));
+}
+export function ReasoningTrigger({ children, className, ...props }) {
+    const context = useContext(ReasoningContext);
+    if (!context)
+        throw new Error("ReasoningTrigger must be used within Reasoning");
+    const label = context.isStreaming
+        ? "Thinking…"
+        : context.duration
+            ? `Thought for ${context.duration}s`
+            : "Reasoning";
+    return (_jsx("button", { type: "button", className: cn("sb-reasoning__trigger", className), onClick: context.toggle, "aria-expanded": context.open, ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(BrainIcon, { size: 16 }), _jsx("span", { children: label }), _jsx(ChevronDownIcon, { size: 16, "aria-hidden": "true" })] })) }));
+}
+export function ReasoningContent({ children, className, ...props }) {
+    const context = useContext(ReasoningContext);
+    if (!context)
+        throw new Error("ReasoningContent must be used within Reasoning");
+    if (!context.open)
+        return null;
+    return (_jsx("div", { className: cn("sb-reasoning__content", className), ...props, children: _jsx(MessageResponse, { streaming: context.isStreaming, children: children }) }));
+}
+const toolStatus = {
+    "approval-requested": {
+        label: "Awaiting approval",
+        icon: _jsx(ClockIcon, { size: 14 }),
+        tone: "warning",
+    },
+    "approval-responded": {
+        label: "Responded",
+        icon: _jsx(CheckCircle2Icon, { size: 14 }),
+        tone: "info",
+    },
+    "input-available": {
+        label: "Running",
+        icon: _jsx(ClockIcon, { size: 14 }),
+        tone: "running",
+    },
+    "input-streaming": {
+        label: "Pending",
+        icon: _jsx(CircleIcon, { size: 14 }),
+        tone: "running",
+    },
+    "output-available": {
+        label: "Completed",
+        icon: _jsx(CheckCircle2Icon, { size: 14 }),
+        tone: "success",
+    },
+    "output-denied": {
+        label: "Denied",
+        icon: _jsx(XCircleIcon, { size: 14 }),
+        tone: "warning",
+    },
+    "output-error": {
+        label: "Error",
+        icon: _jsx(XCircleIcon, { size: 14 }),
+        tone: "error",
+    },
+};
+export function getStatusBadge(status) {
+    const value = toolStatus[status];
+    return (_jsxs("span", { className: "sb-tool-line__status", "data-tone": value.tone, children: [value.icon, value.label] }));
+}
+export const Tool = forwardRef(({ className, ...props }, ref) => (_jsx("details", { ref: ref, className: cn("sb-tool-line", className), ...props })));
+Tool.displayName = "Tool";
+export function ToolHeader({ className, title, type, state, toolName, ...props }) {
+    const derived = type === "dynamic-tool"
+        ? toolName ?? "tool"
+        : type.split("-").slice(1).join("-");
+    return (_jsxs("summary", { className: cn("sb-tool-line__trigger", className), ...props, children: [_jsx(WrenchIcon, { size: 16 }), _jsx("span", { children: title ?? derived }), state !== "output-available" && getStatusBadge(state), _jsx(ChevronRightIcon, { size: 16, className: "sb-tool-line__chevron", "aria-hidden": "true" })] }));
+}
+export const ToolContent = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("sb-tool-line__details", className), ...props })));
+ToolContent.displayName = "ToolContent";
+export function ToolInput({ input, className, ...props }) {
+    return (_jsx("pre", { className: cn("sb-terminal", className), ...props, children: JSON.stringify(input, null, 2) }));
+}
+export function ToolOutput({ output, errorText, className, ...props }) {
+    if (output == null && !errorText)
+        return null;
+    const content = typeof output === "string"
+        ? output
+        : output == null
+            ? ""
+            : JSON.stringify(output, null, 2);
+    return (_jsx("pre", { className: cn("sb-terminal", className), "data-error": errorText ? "true" : undefined, ...props, children: errorText || content }));
+}
+const ConfirmationContext = createContext(null);
+export function Confirmation({ state, approval, className, ...props }) {
+    const value = useMemo(() => ({ state, approval }), [state, approval]);
+    return (_jsx(ConfirmationContext.Provider, { value: value, children: _jsx("div", { className: cn("sb-confirmation", className), ...props }) }));
+}
+function useConfirmation() {
+    const context = useContext(ConfirmationContext);
+    if (!context)
+        throw new Error("Confirmation child must be used within Confirmation");
+    return context;
+}
+export const ConfirmationTitle = ({ className, ...props }) => (_jsx("div", { className: cn("sb-confirmation__title", className), ...props }));
+export function ConfirmationRequest({ children }) {
+    const { state } = useConfirmation();
+    return state === "approval-requested" || state === "pending" ? children : null;
+}
+export function ConfirmationAccepted({ children }) {
+    const { state, approval } = useConfirmation();
+    return state === "confirmed" || approval?.approved === true ? children : null;
+}
+export function ConfirmationRejected({ children }) {
+    const { state, approval } = useConfirmation();
+    return state === "cancelled" ||
+        state === "output-denied" ||
+        approval?.approved === false
+        ? children
+        : null;
+}
+export function ConfirmationActions({ className, ...props }) {
+    const { state } = useConfirmation();
+    if (state !== "approval-requested" && state !== "pending")
+        return null;
+    return (_jsx("div", { className: cn("sb-confirmation__actions", className), ...props }));
+}
+export const ConfirmationAction = forwardRef(({ className, ...props }, ref) => (_jsx("button", { ref: ref, type: "button", className: cn("sb-button", className), ...props })));
+ConfirmationAction.displayName = "ConfirmationAction";
+export const Plan = forwardRef(({ className, isStreaming, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("sb-plan", className), "data-streaming": isStreaming ? "true" : undefined, ...props })));
+Plan.displayName = "Plan";
+export const PlanHeader = ({ className, ...props }) => (_jsx("div", { className: cn("sb-plan__header", className), ...props }));
+export const PlanTitle = ({ className, ...props }) => (_jsx("h3", { className: cn("sb-plan__title", className), ...props }));
+export const PlanDescription = ({ className, ...props }) => (_jsx("p", { className: cn("sb-plan__description", className), ...props }));
+export const PlanContent = ({ className, ...props }) => (_jsx("div", { className: cn("sb-plan__content", className), ...props }));
+export const PlanFooter = ({ className, ...props }) => (_jsx("div", { className: cn("sb-plan__footer", className), ...props }));
+export const Sources = forwardRef(({ className, ...props }, ref) => (_jsx("details", { ref: ref, className: cn("sb-sources", className), ...props })));
+Sources.displayName = "Sources";
+export function SourcesTrigger({ count, children, className, ...props }) {
+    return (_jsx("summary", { className: cn("sb-sources__trigger", className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("span", { children: ["\u6765\u6E90 ", count, " \u4E2A"] }), _jsx(ChevronDownIcon, { size: 15 })] })) }));
+}
+export const SourcesContent = ({ className, ...props }) => (_jsx("div", { className: cn("sb-sources__content", className), ...props }));
+export function Source({ title, children, ...props }) {
+    return (_jsx("a", { target: "_blank", rel: "noreferrer", ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(BookOpenIcon, { size: 14 }), _jsx("span", { children: title })] })) }));
+}

package/dist/src/registry.d.ts

@@ -0,0 +1,4 @@
+import type { PartRendererDefinition, PartRendererRegistry } from "./contracts";
+export declare function createPartRendererRegistry(definitions: readonly PartRendererDefinition[]): PartRendererRegistry;
+export declare function mergePartRendererRegistries(...registries: Array<PartRendererRegistry | undefined>): PartRendererRegistry;
+export declare const defaultPartRendererRegistry: PartRendererRegistry;

package/dist/src/registry.js

@@ -0,0 +1,31 @@
+import { DefaultPartRenderer } from "./parts";
+export function createPartRendererRegistry(definitions) {
+    const stable = [...definitions];
+    return {
+        names: stable.map((definition) => definition.name),
+        resolve(part) {
+            return stable.find((definition) => definition.match(part))?.component;
+        },
+    };
+}
+export function mergePartRendererRegistries(...registries) {
+    const resolved = registries.filter((registry) => registry !== undefined);
+    return {
+        names: resolved.flatMap((registry) => registry.names),
+        resolve(part) {
+            for (const registry of resolved) {
+                const component = registry.resolve(part);
+                if (component)
+                    return component;
+            }
+            return undefined;
+        },
+    };
+}
+export const defaultPartRendererRegistry = createPartRendererRegistry([
+    {
+        name: "default",
+        match: () => true,
+        component: DefaultPartRenderer,
+    },
+]);

package/dist/src/status.d.ts

@@ -0,0 +1,26 @@
+import { type OrbState } from "thinking-orbs";
+import type { MessagePanelStatus } from "./contracts";
+export type PanelVisualState = "empty" | "hydrating" | "thinking" | "streaming" | "ready" | "error" | "recovering" | "background";
+export declare function derivePanelVisualState({ messageCount, status, isHydrating, isRecovering, isServerStreaming, }: {
+    messageCount: number;
+    status: MessagePanelStatus;
+    isHydrating?: boolean;
+    isRecovering?: boolean;
+    isServerStreaming?: boolean;
+}): PanelVisualState;
+export declare function ThinkingIndicator({ label, state, className, }: {
+    label?: string;
+    state?: OrbState;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function deriveThinkingActivity(part?: unknown): {
+    state: OrbState;
+    label: string;
+};
+export declare function TopLoadingBar({ status }: {
+    status: MessagePanelStatus;
+}): import("react").JSX.Element | null;
+export declare function PanelStatus({ kind, children, }: {
+    kind: "hydrating" | "recovering" | "background" | "error";
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/src/status.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ThinkingOrb } from "thinking-orbs";
+import { cn } from "./internal/cn";
+import { resolvePartKind, toolNameOfPart } from "./parts/kind";
+export function derivePanelVisualState({ messageCount, status, isHydrating = false, isRecovering = false, isServerStreaming = false, }) {
+    if (isHydrating)
+        return "hydrating";
+    if (status === "error")
+        return "error";
+    if (isRecovering)
+        return "recovering";
+    if (isServerStreaming)
+        return "background";
+    if (status === "submitted")
+        return "thinking";
+    if (status === "streaming")
+        return "streaming";
+    return messageCount === 0 ? "empty" : "ready";
+}
+export function ThinkingIndicator({ label = "Thinking…", state = "solving", className, }) {
+    return (_jsxs("div", { className: cn("sb-thinking", className), role: "status", "aria-label": label, children: [_jsx(ThinkingOrb, { state: state, size: 20, "aria-hidden": "true" }), _jsx("span", { children: label })] }));
+}
+export function deriveThinkingActivity(part) {
+    const kind = resolvePartKind(part);
+    const toolName = toolNameOfPart(part);
+    if (kind === "reasoning")
+        return { state: "solving", label: "Reasoning…" };
+    if (kind === "text")
+        return { state: "composing", label: "Composing answer…" };
+    if (["plan", "image", "chart", "dashboard"].includes(kind ?? "") ||
+        (toolName != null &&
+            /(?:^|[_-])(?:image|chart|artifact|render|write_file)(?:$|[_-])/i.test(toolName))) {
+        return { state: "shaping", label: "Shaping result…" };
+    }
+    if (toolName != null &&
+        /(?:^|[_-])(?:search|fetch|browse|browser|web)(?:$|[_-])/i.test(toolName)) {
+        return { state: "searching", label: "Searching…" };
+    }
+    if (toolName != null) {
+        return {
+            state: "working",
+            label: `Running ${toolName.replaceAll("_", " ")}…`,
+        };
+    }
+    return part === undefined
+        ? { state: "solving", label: "Thinking…" }
+        : { state: "working", label: "Working…" };
+}
+export function TopLoadingBar({ status }) {
+    const [phase, setPhase] = useState("idle");
+    const previous = useRef(status);
+    useEffect(() => {
+        const before = previous.current;
+        previous.current = status;
+        if (status === "submitted") {
+            setPhase("loading");
+            return;
+        }
+        if (before === "submitted" && status === "streaming") {
+            setPhase("done");
+            const timeout = window.setTimeout(() => setPhase("idle"), 500);
+            return () => window.clearTimeout(timeout);
+        }
+        if (status !== "streaming")
+            setPhase("idle");
+    }, [status]);
+    if (phase === "idle")
+        return null;
+    return (_jsx("div", { className: "sb-top-loading", role: "progressbar", "aria-label": "\u7B49\u5F85\u54CD\u5E94", children: _jsx("span", { "data-phase": phase }) }));
+}
+export function PanelStatus({ kind, children, }) {
+    return (_jsxs("div", { className: "sb-panel-status", "data-kind": kind, role: kind === "error" ? "alert" : "status", children: [_jsx("span", { "aria-hidden": "true" }), children] }));
+}

package/package.json

@@ -1,19 +1,28 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
-    "demo",
-    "src"
+    "dist",
+    "src/styles"
   ],
   "publishConfig": {
     "access": "public"
   },
   "exports": {
-    ".": "./src/index.ts",
-    "./composer": "./src/composer/index.ts",
+    ".": {
+      "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"
+    },
     "./styles.css": "./src/styles/index.css",
-    "./demo": "./demo/index.ts"
+    "./demo": {
+      "types": "./dist/demo/index.d.ts",
+      "import": "./dist/demo/index.js"
+    }
   },
   "peerDependencies": {
     "ai": "^7.0.0",
@@ -30,8 +39,7 @@
     "radix-ui": "^1.6.2",
     "streamdown": "^2.5.0",
     "thinking-orbs": "0.1.1",
-    "use-stick-to-bottom": "^1.1.6",
-    "@springbrand/agent-runtime": "0.1.0"
+    "use-stick-to-bottom": "^1.1.6"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",
@@ -39,6 +47,7 @@
     "typescript": "^7.0.2"
   },
   "scripts": {
+    "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit"
   }
 }