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

package/src/parts/kind.ts

@@ -0,0 +1,67 @@
+import type { RichPartKind } from "../contracts";
+
+function objectOf(value: unknown): Record<string, unknown> {
+  return value != null && typeof value === "object"
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+export function toolNameOfPart(part: unknown): string | null {
+  const record = objectOf(part);
+  const type = typeof record.type === "string" ? record.type : "";
+  if (type === "toolCall") {
+    return typeof record.name === "string" ? record.name : "tool";
+  }
+  if (type === "dynamic-tool") {
+    return typeof record.toolName === "string" ? record.toolName : "dynamic";
+  }
+  return type.startsWith("tool-") ? type.slice(5) : null;
+}
+
+export function resolvePartKind(part: unknown): RichPartKind | null {
+  const record = objectOf(part);
+  const type = typeof record.type === "string" ? record.type : "";
+  const toolName = toolNameOfPart(part);
+  if (type === "thinking") return "reasoning";
+  if (type === "tool") return "tool";
+  if (toolName === "update_plan") return "plan";
+  if (toolName === "ask_user") return "ask_user";
+  if (toolName === "suggest_followups") return "suggestions";
+  if (toolName === "schedule") return "schedule";
+  if (toolName === "parallel") return "parallel";
+  if (
+    toolName === "subagents" ||
+    toolName === "run_agent" ||
+    toolName === "run_temporary_agent" ||
+    toolName === "fanout" ||
+    toolName === "extract" ||
+    toolName === "dispatch_background"
+  ) {
+    return "subagents";
+  }
+  if (toolName) return "tool";
+  const normalized = type.startsWith("data-")
+    ? type.slice(5).replaceAll("-", "_")
+    : type;
+  return [
+    "text",
+    "reasoning",
+    "error",
+    "image",
+    "chart",
+    "agent_card",
+    "plan",
+    "schedule",
+    "parallel",
+    "subagents",
+    "confirmation",
+    "file",
+    "dashboard",
+    "ask_user",
+    "suggestions",
+  ].includes(normalized)
+    ? (normalized as RichPartKind)
+    : type === "reasoning-file"
+      ? "file"
+      : null;
+}

package/src/parts/plan.ts

@@ -0,0 +1,64 @@
+import { resolvePartKind } from "./kind";
+
+type UnknownRecord = Record<string, unknown>;
+
+export type PlanStepStatus = "pending" | "in_progress" | "done";
+
+export interface PlanStep {
+  text: string;
+  status?: PlanStepStatus;
+}
+
+function recordOf(value: unknown): UnknownRecord {
+  return value != null && typeof value === "object"
+    ? (value as UnknownRecord)
+    : {};
+}
+
+export function planStepsOfPart(part: unknown): PlanStep[] {
+  const record = recordOf(part);
+  const data = recordOf(
+    record.data ?? record.input ?? record.arguments ?? record,
+  );
+  if (!Array.isArray(data.steps)) return [];
+
+  return data.steps.flatMap((step) => {
+    const value = recordOf(step);
+    const text = typeof value.text === "string" ? value.text.trim() : "";
+    if (!text) return [];
+    const status = value.status === "completed"
+      ? "done"
+      : value.status === "in_progress" || value.status === "done"
+        ? value.status
+        : "pending";
+    return [{ text, status }];
+  });
+}
+
+export function projectLatestPlan(
+  messages: readonly {
+    role: string;
+    parts: readonly unknown[];
+  }[],
+): PlanStep[] | null {
+  for (
+    let messageIndex = messages.length - 1;
+    messageIndex >= 0;
+    messageIndex -= 1
+  ) {
+    const message = messages[messageIndex];
+    if (message.role !== "assistant") continue;
+    for (
+      let partIndex = message.parts.length - 1;
+      partIndex >= 0;
+      partIndex -= 1
+    ) {
+      const part = message.parts[partIndex];
+      if (resolvePartKind(part) !== "plan") continue;
+      const steps = planStepsOfPart(part);
+      if (steps.length > 0) return steps;
+      if (recordOf(part).state !== "input-streaming") return null;
+    }
+  }
+  return null;
+}

package/src/parts/primitives.tsx

@@ -0,0 +1,439 @@
+import {
+  BookOpenIcon,
+  BrainIcon,
+  CheckCircle2Icon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon,
+} from "lucide-react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  useState,
+  type ButtonHTMLAttributes,
+  type DetailsHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import type { AIToolPart } from "../contracts";
+import { cn } from "../internal/cn";
+import { MessageResponse } from "../message";
+
+interface ReasoningContextValue {
+  open: boolean;
+  toggle: () => void;
+  isStreaming: boolean;
+  duration?: number;
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export interface ReasoningProps extends HTMLAttributes<HTMLDivElement> {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+}
+
+export function Reasoning({
+  isStreaming = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  duration,
+  className,
+  children,
+  ...props
+}: ReasoningProps) {
+  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 (
+    <ReasoningContext.Provider value={value}>
+      <div className={cn("sb-reasoning", className)} {...props}>
+        {children}
+      </div>
+    </ReasoningContext.Provider>
+  );
+}
+
+export function ReasoningTrigger({
+  children,
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  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 (
+    <button
+      type="button"
+      className={cn("sb-reasoning__trigger", className)}
+      onClick={context.toggle}
+      aria-expanded={context.open}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <BrainIcon size={16} />
+          <span>{label}</span>
+          <ChevronDownIcon size={16} aria-hidden="true" />
+        </>
+      )}
+    </button>
+  );
+}
+
+export function ReasoningContent({
+  children,
+  className,
+  ...props
+}: Omit<HTMLAttributes<HTMLDivElement>, "children"> & { children: string }) {
+  const context = useContext(ReasoningContext);
+  if (!context) throw new Error("ReasoningContent must be used within Reasoning");
+  if (!context.open) return null;
+  return (
+    <div className={cn("sb-reasoning__content", className)} {...props}>
+      <MessageResponse streaming={context.isStreaming}>{children}</MessageResponse>
+    </div>
+  );
+}
+
+type ToolPart = AIToolPart;
+export type ToolState = ToolPart["state"];
+
+const toolStatus: Record<
+  ToolState,
+  { label: string; icon: ReactNode; tone: string }
+> = {
+  "approval-requested": {
+    label: "Awaiting approval",
+    icon: <ClockIcon size={14} />,
+    tone: "warning",
+  },
+  "approval-responded": {
+    label: "Responded",
+    icon: <CheckCircle2Icon size={14} />,
+    tone: "info",
+  },
+  "input-available": {
+    label: "Running",
+    icon: <ClockIcon size={14} />,
+    tone: "running",
+  },
+  "input-streaming": {
+    label: "Pending",
+    icon: <CircleIcon size={14} />,
+    tone: "running",
+  },
+  "output-available": {
+    label: "Completed",
+    icon: <CheckCircle2Icon size={14} />,
+    tone: "success",
+  },
+  "output-denied": {
+    label: "Denied",
+    icon: <XCircleIcon size={14} />,
+    tone: "warning",
+  },
+  "output-error": {
+    label: "Error",
+    icon: <XCircleIcon size={14} />,
+    tone: "error",
+  },
+};
+
+export function getStatusBadge(status: ToolState) {
+  const value = toolStatus[status];
+  return (
+    <span className="sb-tool-line__status" data-tone={value.tone}>
+      {value.icon}
+      {value.label}
+    </span>
+  );
+}
+
+export const Tool = forwardRef<
+  HTMLDetailsElement,
+  DetailsHTMLAttributes<HTMLDetailsElement>
+>(({ className, ...props }, ref) => (
+  <details ref={ref} className={cn("sb-tool-line", className)} {...props} />
+));
+Tool.displayName = "Tool";
+
+type ToolHeaderProps = HTMLAttributes<HTMLElement> & {
+  title?: string;
+  type: ToolPart["type"];
+  state: ToolState;
+  toolName?: string;
+};
+
+export function ToolHeader({
+  className,
+  title,
+  type,
+  state,
+  toolName,
+  ...props
+}: ToolHeaderProps) {
+  const derived =
+    type === "dynamic-tool"
+      ? toolName ?? "tool"
+      : type.split("-").slice(1).join("-");
+  return (
+    <summary className={cn("sb-tool-line__trigger", className)} {...props}>
+      <WrenchIcon size={16} />
+      <span>{title ?? derived}</span>
+      {state !== "output-available" && getStatusBadge(state)}
+      <ChevronRightIcon
+        size={16}
+        className="sb-tool-line__chevron"
+        aria-hidden="true"
+      />
+    </summary>
+  );
+}
+
+export const ToolContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sb-tool-line__details", className)} {...props} />
+));
+ToolContent.displayName = "ToolContent";
+
+export function ToolInput({
+  input,
+  className,
+  ...props
+}: HTMLAttributes<HTMLPreElement> & { input: unknown }) {
+  return (
+    <pre className={cn("sb-terminal", className)} {...props}>
+      {JSON.stringify(input, null, 2)}
+    </pre>
+  );
+}
+
+export function ToolOutput({
+  output,
+  errorText,
+  className,
+  ...props
+}: HTMLAttributes<HTMLPreElement> & {
+  output: unknown;
+  errorText?: string;
+}) {
+  if (output == null && !errorText) return null;
+  const content =
+    typeof output === "string"
+      ? output
+      : output == null
+        ? ""
+        : JSON.stringify(output, null, 2);
+  return (
+    <pre
+      className={cn("sb-terminal", className)}
+      data-error={errorText ? "true" : undefined}
+      {...props}
+    >
+      {errorText || content}
+    </pre>
+  );
+}
+
+interface ConfirmationContextValue {
+  state: ToolState | "pending" | "confirmed" | "cancelled";
+  approval?: { id: string; approved?: boolean };
+}
+
+const ConfirmationContext = createContext<ConfirmationContextValue | null>(null);
+
+export interface ConfirmationProps extends HTMLAttributes<HTMLDivElement> {
+  state: ToolState | "pending" | "confirmed" | "cancelled";
+  approval?: { id: string; approved?: boolean };
+}
+
+export function Confirmation({
+  state,
+  approval,
+  className,
+  ...props
+}: ConfirmationProps) {
+  const value = useMemo(() => ({ state, approval }), [state, approval]);
+  return (
+    <ConfirmationContext.Provider value={value}>
+      <div className={cn("sb-confirmation", className)} {...props} />
+    </ConfirmationContext.Provider>
+  );
+}
+
+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
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("sb-confirmation__title", className)} {...props} />
+);
+
+export function ConfirmationRequest({ children }: { children?: ReactNode }) {
+  const { state } = useConfirmation();
+  return state === "approval-requested" || state === "pending" ? children : null;
+}
+
+export function ConfirmationAccepted({ children }: { children?: ReactNode }) {
+  const { state, approval } = useConfirmation();
+  return state === "confirmed" || approval?.approved === true ? children : null;
+}
+
+export function ConfirmationRejected({ children }: { children?: ReactNode }) {
+  const { state, approval } = useConfirmation();
+  return state === "cancelled" ||
+    state === "output-denied" ||
+    approval?.approved === false
+    ? children
+    : null;
+}
+
+export function ConfirmationActions({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const { state } = useConfirmation();
+  if (state !== "approval-requested" && state !== "pending") return null;
+  return (
+    <div
+      className={cn("sb-confirmation__actions", className)}
+      {...props}
+    />
+  );
+}
+
+export const ConfirmationAction = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={cn("sb-button", className)}
+    {...props}
+  />
+));
+ConfirmationAction.displayName = "ConfirmationAction";
+
+export const Plan = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & {
+    isStreaming?: boolean;
+  }
+>(({ className, isStreaming, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("sb-plan", className)}
+    data-streaming={isStreaming ? "true" : undefined}
+    {...props}
+  />
+));
+Plan.displayName = "Plan";
+
+export const PlanHeader = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("sb-plan__header", className)} {...props} />
+);
+export const PlanTitle = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement>) => (
+  <h3 className={cn("sb-plan__title", className)} {...props} />
+);
+export const PlanDescription = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement>) => (
+  <p className={cn("sb-plan__description", className)} {...props} />
+);
+export const PlanContent = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("sb-plan__content", className)} {...props} />
+);
+export const PlanFooter = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("sb-plan__footer", className)} {...props} />
+);
+
+export const Sources = forwardRef<
+  HTMLDetailsElement,
+  DetailsHTMLAttributes<HTMLDetailsElement>
+>(({ className, ...props }, ref) => (
+  <details ref={ref} className={cn("sb-sources", className)} {...props} />
+));
+Sources.displayName = "Sources";
+
+export function SourcesTrigger({
+  count,
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLElement> & { count: number }) {
+  return (
+    <summary className={cn("sb-sources__trigger", className)} {...props}>
+      {children ?? (
+        <>
+          <span>来源 {count} 个</span>
+          <ChevronDownIcon size={15} />
+        </>
+      )}
+    </summary>
+  );
+}
+export const SourcesContent = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("sb-sources__content", className)} {...props} />
+);
+export function Source({
+  title,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { title?: string }) {
+  return (
+    <a target="_blank" rel="noreferrer" {...props}>
+      {children ?? (
+        <>
+          <BookOpenIcon size={14} />
+          <span>{title}</span>
+        </>
+      )}
+    </a>
+  );
+}

package/src/registry.ts

@@ -0,0 +1,44 @@
+import type {
+  PartRendererComponent,
+  PartRendererDefinition,
+  PartRendererRegistry,
+} from "./contracts";
+import { DefaultPartRenderer } from "./parts";
+
+export function createPartRendererRegistry(
+  definitions: readonly PartRendererDefinition[],
+): PartRendererRegistry {
+  const stable = [...definitions];
+  return {
+    names: stable.map((definition) => definition.name),
+    resolve(part: unknown): PartRendererComponent | undefined {
+      return stable.find((definition) => definition.match(part))?.component;
+    },
+  };
+}
+
+export function mergePartRendererRegistries(
+  ...registries: Array<PartRendererRegistry | undefined>
+): PartRendererRegistry {
+  const resolved = registries.filter(
+    (registry): registry is PartRendererRegistry => registry !== undefined,
+  );
+  return {
+    names: resolved.flatMap((registry) => registry.names),
+    resolve(part: unknown) {
+      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,
+  },
+]);