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

package/src/camel/camel-turn.ts

@@ -0,0 +1,316 @@
+import type { UIMessage } from "ai";
+import { resolvePartKind, toolNameOfPart } from "../parts/kind";
+
+const USER_STOP_REASON = "Stopped by user";
+
+type UnknownRecord = Record<string, unknown>;
+
+export type CamelPart = UIMessage["parts"][number];
+
+export interface CamelMessageMetadata extends UnknownRecord {
+  authorDisplayName?: string;
+  completedAt?: number;
+  createdAt?: number;
+  error?: string;
+  interruptedByUser?: boolean;
+  messageSource?: string;
+  turnDurationMs?: number;
+  turnStartedAt?: number;
+  turnStatus?: string;
+}
+
+export interface CamelPartRef {
+  messageId: string;
+  partIndex: number;
+  part: CamelPart;
+}
+
+export interface CamelAssistantTurn {
+  kind: "assistant";
+  key: string;
+  message: UIMessage;
+  messages: readonly [UIMessage];
+  actionMessageId: string;
+  parts: readonly CamelPartRef[];
+  traceParts: readonly CamelPartRef[];
+  finalParts: readonly CamelPartRef[];
+  terminalState?: {
+    kind: "interrupted" | "error";
+    title: string;
+    body?: string;
+  };
+  stepCount: number;
+  copyText: string;
+  replyText?: string;
+  durationMs?: number;
+  completedAt?: number;
+}
+
+export type CamelStandaloneKind =
+  | "user"
+  | "notice"
+  | "slash-command"
+  | "local-command-output"
+  | "compact-summary";
+
+export interface CamelStandaloneMessage {
+  kind: "message";
+  key: string;
+  message: UIMessage;
+  displayKind: CamelStandaloneKind;
+}
+
+export type CamelMessageItem = CamelAssistantTurn | CamelStandaloneMessage;
+
+const TRACE_PART_KINDS = new Set(["tool", "parallel", "subagents"]);
+
+function recordOf(value: unknown): UnknownRecord {
+  return value != null && typeof value === "object"
+    ? (value as UnknownRecord)
+    : {};
+}
+
+function nonNegativeNumber(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0
+    ? value
+    : undefined;
+}
+
+export function camelMetadata(message: UIMessage): CamelMessageMetadata {
+  return recordOf(message.metadata) as CamelMessageMetadata;
+}
+
+export const camelMessageMetadata = camelMetadata;
+
+function isVisibleText(
+  part: CamelPart,
+): part is CamelPart & { type: "text"; text: string } {
+  return part.type === "text" && part.text.trim().length > 0;
+}
+
+function isVisibleReasoning(part: CamelPart): boolean {
+  return part.type === "reasoning" && part.text.trim().length > 0;
+}
+
+function standalonePartKind(part: CamelPart): CamelStandaloneKind | null {
+  switch (part.type) {
+    case "data-notice":
+      return "notice";
+    case "data-slash-command":
+      return "slash-command";
+    case "data-local-command-output":
+      return "local-command-output";
+    case "data-compact-summary":
+      return "compact-summary";
+    default:
+      return null;
+  }
+}
+
+function standaloneKind(message: UIMessage): CamelStandaloneKind | null {
+  for (const part of message.parts) {
+    const kind = standalonePartKind(part);
+    if (kind !== null) return kind;
+  }
+  return message.role === "user" ? "user" : null;
+}
+
+function isDirectUserMessage(message: UIMessage): boolean {
+  return message.role === "user" && standaloneKind(message) === "user";
+}
+
+export function camelMessageText(message: UIMessage): string {
+  return message.parts
+    .filter(isVisibleText)
+    .map((part) => part.text)
+    .join("\n");
+}
+
+export function camelCreatedAt(message: UIMessage): number | undefined {
+  return nonNegativeNumber(camelMetadata(message).createdAt);
+}
+
+export function camelCompletedAt(message: UIMessage): number | undefined {
+  return (
+    nonNegativeNumber(camelMetadata(message).completedAt) ??
+    camelCreatedAt(message)
+  );
+}
+
+export function formatCamelMessageTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const isToday =
+    date.getFullYear() === now.getFullYear() &&
+    date.getMonth() === now.getMonth() &&
+    date.getDate() === now.getDate();
+  return date.toLocaleString([], {
+    ...(isToday ? {} : { month: "short", day: "numeric" }),
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
+export function formatCamelTurnDuration(milliseconds: number): string {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return hours > 0
+    ? `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
+    : `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
+function isTraceWork(
+  part: CamelPart,
+  finalToolNames: readonly string[],
+): boolean {
+  if (isVisibleReasoning(part)) return true;
+  const kind = resolvePartKind(part);
+  if (kind === "plan") return false;
+  const toolName = toolNameOfPart(part);
+  if (toolName !== null && finalToolNames.includes(toolName)) return false;
+  return TRACE_PART_KINDS.has(kind ?? "");
+}
+
+function isTraceBoundary(
+  part: CamelPart,
+  finalToolNames: readonly string[],
+): boolean {
+  return part.type === "step-start" || isTraceWork(part, finalToolNames);
+}
+
+function terminalState(
+  message: UIMessage,
+): CamelAssistantTurn["terminalState"] {
+  const metadata = camelMetadata(message);
+  if (metadata.interruptedByUser === true) {
+    return {
+      kind: "interrupted",
+      title: USER_STOP_REASON,
+    };
+  }
+  if (
+    metadata.turnStatus === "aborted" &&
+    metadata.error === USER_STOP_REASON
+  ) return undefined;
+  if (metadata.turnStatus === "error" || metadata.error) {
+    return {
+      kind: "error",
+      title: "Error",
+      body: metadata.error ?? "The response failed.",
+    };
+  }
+  return undefined;
+}
+
+function turnDuration(message: UIMessage): number | undefined {
+  const metadata = camelMetadata(message);
+  const explicit = nonNegativeNumber(metadata.turnDurationMs);
+  if (explicit !== undefined) return explicit;
+  const startedAt = nonNegativeNumber(metadata.turnStartedAt);
+  const completedAt = nonNegativeNumber(metadata.completedAt);
+  return startedAt !== undefined && completedAt !== undefined
+    ? Math.max(0, completedAt - startedAt)
+    : undefined;
+}
+
+export function projectCamelAssistantTurn(
+  message: UIMessage,
+  finalToolNames: readonly string[] = [],
+  replyText?: string,
+): CamelAssistantTurn {
+  const parts = message.parts.map((part, partIndex) => ({
+    messageId: message.id,
+    partIndex,
+    part,
+  }));
+  let lastTraceBoundary = -1;
+  for (let index = parts.length - 1; index >= 0; index -= 1) {
+    if (isTraceBoundary(parts[index].part, finalToolNames)) {
+      lastTraceBoundary = index;
+      break;
+    }
+  }
+
+  const traceParts: CamelPartRef[] = [];
+  const finalParts: CamelPartRef[] = [];
+  for (const partRef of parts) {
+    const { part, partIndex } = partRef;
+    if (part.type === "step-start" || resolvePartKind(part) === "plan") {
+      continue;
+    }
+    if (
+      isTraceWork(part, finalToolNames) ||
+      (isVisibleText(part) && partIndex < lastTraceBoundary)
+    ) {
+      traceParts.push(partRef);
+      continue;
+    }
+    const kind = resolvePartKind(part);
+    if (isVisibleText(part) || (kind !== null && kind !== "reasoning")) {
+      finalParts.push(partRef);
+    }
+  }
+
+  const hasFinalNarrative = finalParts.some(
+    ({ part }) => isVisibleText(part) || resolvePartKind(part) === "error",
+  );
+  const terminal = terminalState(message);
+
+  return {
+    kind: "assistant",
+    key: `assistant-${message.id}`,
+    message,
+    messages: [message],
+    actionMessageId: message.id,
+    parts,
+    traceParts,
+    finalParts,
+    terminalState: terminal?.kind === "interrupted" || !hasFinalNarrative
+      ? terminal
+      : undefined,
+    stepCount: Math.max(
+      1,
+      parts.filter(({ part }) => part.type === "step-start").length,
+    ),
+    copyText: camelMessageText(message),
+    replyText,
+    durationMs: turnDuration(message),
+    completedAt: camelCompletedAt(message),
+  };
+}
+
+export function projectCamelMessages(
+  messages: readonly UIMessage[],
+  finalToolNames: readonly string[] = [],
+): CamelMessageItem[] {
+  const items: CamelMessageItem[] = [];
+  messages.forEach((message, index) => {
+    if (message.role === "system") return;
+    const displayKind = standaloneKind(message);
+    if (message.role === "assistant" && displayKind === null) {
+      const reply = messages
+        .slice(index + 1)
+        .find(isDirectUserMessage);
+      items.push(
+        projectCamelAssistantTurn(
+          message,
+          finalToolNames,
+          reply ? camelMessageText(reply).trim() || undefined : undefined,
+        ),
+      );
+      return;
+    }
+    if (displayKind !== null) {
+      items.push({
+        kind: "message",
+        key: `message-${message.id}`,
+        message,
+        displayKind,
+      });
+    }
+  });
+  return items;
+}

package/src/camel/turn-summary-bar.tsx

@@ -0,0 +1,81 @@
+import { ChevronRightIcon } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { cn } from "../internal/cn";
+import { formatCamelTurnDuration } from "./camel-turn";
+
+export interface TurnSummaryBarProps {
+  durationMs?: number;
+  stepCount: number;
+  children: ReactNode;
+  showSeparator?: boolean;
+}
+
+export function TurnSummaryBar({
+  durationMs,
+  stepCount,
+  children,
+  showSeparator = true,
+}: TurnSummaryBarProps) {
+  const [expanded, setExpanded] = useState(false);
+  const stepLabel = `${stepCount} step${stepCount === 1 ? "" : "s"}`;
+  const showDuration = durationMs !== undefined && durationMs >= 1000;
+  const toggleLabel = expanded ? "hide work" : "show work";
+
+  return (
+    <div data-camel-turn-summary="" data-state={expanded ? "open" : "closed"}>
+      <button
+        type="button"
+        aria-expanded={expanded}
+        aria-label={`${expanded ? "Hide" : "Show"} work, ${stepLabel}${
+          showDuration ? `, ${formatCamelTurnDuration(durationMs)}` : ""
+        }`}
+        className={cn(
+          "group/turn-summary flex w-full cursor-pointer items-center gap-1.5 rounded py-1 text-left",
+          "font-mono text-xs text-muted-foreground/60 transition-colors duration-150",
+          "hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
+        )}
+        onClick={() => setExpanded((current) => !current)}
+      >
+        {showDuration && (
+          <>
+            <span>worked for</span>
+            <span className="text-muted-foreground/80">
+              {formatCamelTurnDuration(durationMs)}
+            </span>
+            <span className="text-muted-foreground/30">·</span>
+          </>
+        )}
+        <span className="text-muted-foreground/80">{stepLabel}</span>
+        <span className="text-muted-foreground/30">·</span>
+        <span>{toggleLabel}</span>
+        <ChevronRightIcon
+          className={cn(
+            "size-3.5 text-muted-foreground/40 transition-transform duration-250",
+            expanded && "rotate-90",
+          )}
+          aria-hidden="true"
+        />
+      </button>
+      <div
+        data-camel-turn-summary-content=""
+        data-camel-collapsible-content=""
+        data-state={expanded ? "open" : "closed"}
+        aria-hidden={!expanded}
+        inert={!expanded ? true : undefined}
+      >
+        {expanded && (
+          <div data-camel-collapsible-inner="">
+            <div
+              className="space-y-1 py-2"
+              data-camel-turn-trace=""
+              data-state="open"
+            >
+              {children}
+            </div>
+          </div>
+        )}
+      </div>
+      {showSeparator && <hr className="my-2 border-t border-border/40" />}
+    </div>
+  );
+}

package/src/chat-summary-panel.tsx

@@ -0,0 +1,229 @@
+import { useState, type ComponentType } from "react";
+import {
+  ActivityIcon,
+  BotIcon,
+  ChevronUpIcon,
+  FileIcon,
+  LinkIcon,
+  ListIcon,
+  MessageSquareIcon,
+  WrenchIcon,
+} from "lucide-react";
+import { cn } from "./internal/cn";
+
+export interface ChatSummarySource {
+  kind: "file" | "link";
+  label: string;
+  href?: string;
+}
+
+export interface ChatSummaryPanelProps {
+  sessionTitle: string;
+  messageCount: number;
+  currentGoal?: string;
+  agentTitle: string;
+  agentValue?: string;
+  stateLabel: string;
+  stateTone: "danger" | "active" | "success";
+  activityCount: number;
+  taskCount: number;
+  runningTaskCount: number;
+  completedTaskCount: number;
+  sources: readonly ChatSummarySource[];
+  defaultExpanded?: boolean;
+  className?: string;
+}
+
+function SummaryRow({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: ComponentType<{ className?: string }>;
+  label: string;
+  value?: string;
+}) {
+  return (
+    <div className="flex w-full min-w-0 items-center gap-2 rounded-md py-1.5 text-left text-sm text-foreground">
+      <Icon className="size-4 shrink-0 text-muted-foreground" />
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {value && (
+        <span className="shrink-0 text-xs text-muted-foreground">{value}</span>
+      )}
+    </div>
+  );
+}
+
+export function ChatSummaryPanel({
+  sessionTitle,
+  messageCount,
+  currentGoal,
+  agentTitle,
+  agentValue,
+  stateLabel,
+  stateTone,
+  activityCount,
+  taskCount,
+  runningTaskCount,
+  completedTaskCount,
+  sources,
+  defaultExpanded = false,
+  className,
+}: ChatSummaryPanelProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const stateColor = {
+    danger: "bg-destructive",
+    active: "bg-primary",
+    success: "bg-success",
+  }[stateTone];
+
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        className={cn(
+          "inline-flex h-8 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-border bg-background/90 px-2.5 text-xs font-medium text-muted-foreground shadow-sm backdrop-blur transition-all outline-none",
+          "hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "animate-in fade-in-0 zoom-in-95 slide-in-from-top-1 duration-150 motion-reduce:animate-none",
+          className,
+        )}
+        onClick={() => setExpanded(true)}
+        aria-expanded={false}
+        aria-label="展开摘要"
+        title="展开摘要"
+        data-message-panel-summary=""
+        data-state="collapsed"
+      >
+        <ListIcon className="size-3.5" />
+        摘要
+      </button>
+    );
+  }
+
+  return (
+    <aside
+      className={cn(
+        "w-[19rem] min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-popover shadow-card",
+        "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200 motion-reduce:animate-none",
+        className,
+      )}
+      data-message-panel-summary=""
+      data-state="expanded"
+    >
+      <header className="flex h-10 items-center border-b border-border px-4">
+        <span className="text-sm font-medium text-muted-foreground">摘要</span>
+        <button
+          type="button"
+          className="group/collapse ml-auto inline-flex size-8 shrink-0 items-center justify-center rounded-md outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4"
+          onClick={() => setExpanded(false)}
+          aria-expanded={true}
+          aria-label="收起摘要"
+          title="收起摘要"
+        >
+          <ChevronUpIcon className="transition-transform duration-200 group-hover/collapse:-translate-y-0.5 motion-reduce:transition-none" />
+        </button>
+      </header>
+      <div className="max-h-[min(31rem,calc(100dvh-8rem))] overflow-y-auto">
+        <div className="px-4 py-3">
+          <section>
+            <p className="mb-2 text-xs font-medium text-muted-foreground">
+              会话
+            </p>
+            <SummaryRow
+              icon={MessageSquareIcon}
+              label={sessionTitle}
+              value={`${messageCount} 条消息`}
+            />
+            {currentGoal && (
+              <p className="mb-1 ml-6 line-clamp-2 text-xs leading-5 text-muted-foreground">
+                {currentGoal}
+              </p>
+            )}
+            <SummaryRow
+              icon={BotIcon}
+              label={agentTitle}
+              value={agentValue}
+            />
+            <div className="flex items-center gap-2 py-1.5 text-sm">
+              <ActivityIcon className="size-4 shrink-0 text-muted-foreground" />
+              <span className="min-w-0 flex-1">状态</span>
+              <span
+                className={cn(
+                  "size-1.5 rounded-full transition-colors duration-200",
+                  stateTone === "active" &&
+                    "animate-pulse motion-reduce:animate-none",
+                  stateColor,
+                )}
+              />
+              <span className="text-xs text-muted-foreground">{stateLabel}</span>
+            </div>
+            <SummaryRow
+              icon={WrenchIcon}
+              label={`${activityCount} 次工具活动`}
+            />
+          </section>
+
+          <section className="mt-3 border-t border-border pt-3">
+            <p className="mb-2 text-xs font-medium text-muted-foreground">
+              子任务
+            </p>
+            <SummaryRow
+              icon={BotIcon}
+              label={
+                taskCount === 0 ? "暂无子任务" : `${runningTaskCount} 个运行中`
+              }
+              value={
+                completedTaskCount > 0
+                  ? `${completedTaskCount} 已完成`
+                  : undefined
+              }
+            />
+          </section>
+
+          <section className="mt-3 border-t border-border pt-3">
+            <p className="mb-2 text-xs font-medium text-muted-foreground">
+              来源
+            </p>
+            {sources.length === 0 ? (
+              <p className="py-1.5 text-xs text-muted-foreground">
+                当前会话还没有附件或引用来源
+              </p>
+            ) : (
+              <div className="space-y-0.5">
+                {sources.map((source) => {
+                  const Icon = source.kind === "file" ? FileIcon : LinkIcon;
+                  const content = (
+                    <>
+                      <Icon className="size-4 shrink-0 text-muted-foreground" />
+                      <span className="min-w-0 flex-1 truncate">
+                        {source.label}
+                      </span>
+                    </>
+                  );
+                  return source.href ? (
+                    <a
+                      key={`${source.kind}:${source.href}`}
+                      href={source.href}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="flex items-center gap-2 rounded-md py-1.5 text-sm text-foreground hover:bg-accent"
+                    >
+                      {content}
+                    </a>
+                  ) : (
+                    <div
+                      key={`${source.kind}:${source.label}`}
+                      className="flex items-center gap-2 py-1.5 text-sm text-foreground"
+                    >
+                      {content}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+    </aside>
+  );
+}