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

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -0,0 +1,632 @@
+import type { UIMessage } from "ai";
+import {
+  ArrowDown,
+  Brain,
+  CaretRight,
+  Check,
+  Copy,
+  File as FileIcon,
+  Terminal,
+} from "@phosphor-icons/react";
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { Tooltip } from "../primitives/tooltip";
+import { WorkshopIconButton } from "../primitives/workshop-controls";
+import {
+  MarkdownMessage,
+  type CloudOsUrlResolver,
+} from "./markdown-message";
+import {
+  ApprovalBlock,
+  AskUserBlock,
+  ErrorBlock,
+  ParallelBlock,
+  PlanBlock,
+  ScheduleBlock,
+  SubAgentsBlock,
+  SuggestionsBlock,
+  type ApprovalDecision,
+} from "./rich-blocks";
+import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import { CloudOsActivityIndicator } from "./activity-indicator";
+import {
+  buildCloudOsEntries,
+  deriveTurnActivity,
+  formatClockTime,
+  formatFullTimestamp,
+  rhythmTopClass,
+  type CloudOsEntry,
+} from "./transcript-model";
+
+export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
+
+export interface CloudOsChatMessagesProps {
+  messages: readonly UIMessage[];
+  status: CloudOsChatStatus;
+  isHydrating?: boolean;
+  isRecovering?: boolean;
+  recoveryStatusLabel?: string;
+  /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
+  hasPendingSteer?: boolean;
+  /** 首帧就带着待发消息:此时不显示空会话欢迎语。 */
+  startedWithPending?: boolean;
+  error?: unknown;
+  showThinkingTraces?: boolean;
+  /** 把某个 part 映射成待授权 id;返回 undefined 表示不在此处渲染授权。 */
+  approvalIdOf?: (part: unknown) => string | undefined;
+  approvalsDisabled?: boolean;
+  /**
+   * 用宿主自己的卡片渲染某条待授权。返回 undefined 就退回内置的通用授权行。
+   *
+   * 存在的理由：授权行只认得工具名和入参，说不出「这次要花多少钱、买的是什么」。
+   * 需要在决定之前把这些摆到人面前的宿主，得自己画那张卡。
+   */
+  renderApproval?: (approval: {
+    approvalId: string;
+    toolName: string;
+    input: Record<string, unknown>;
+    disabled: boolean;
+  }) => ReactNode;
+  /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
+  resolveUrl?: CloudOsUrlResolver;
+  /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
+  constrainWidth?: boolean;
+  emptyTitle?: string;
+  onRetry?: () => void;
+  onApprove?: (approvalId: string, decision: ApprovalDecision) => void;
+  onSuggestion?: (text: string) => void;
+  /**
+   * 把交互卡片上的操作回写成那次工具调用的结果(缺省 → 卡片不可操作)。
+   * 卡片不再知道「答案怎么变成消息」—— 它只认自己的 toolCallId。
+   */
+  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
+  /** 点击定时任务卡片:宿主决定跳到哪(缺省 → 卡片不可点)。 */
+  onOpenSchedule?: (scheduleId: string) => void;
+  onCopy?: (text: string) => void;
+}
+
+function useCopyAction(): {
+  copied: string | null;
+  copy: (text: string) => void;
+} {
+  const [copied, setCopied] = useState<string | null>(null);
+  const timerRef = useRef<number | null>(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    },
+    [],
+  );
+  const copy = useCallback((text: string) => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(text);
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+      timerRef.current = window.setTimeout(() => setCopied(null), 1500);
+    });
+  }, []);
+  return { copied, copy };
+}
+
+function UserBubble({
+  entry,
+  onCopy,
+  copied,
+  resolveUrl,
+}: {
+  entry: Extract<CloudOsEntry, { type: "user" }>;
+  onCopy: (text: string) => void;
+  copied: boolean;
+  resolveUrl?: CloudOsUrlResolver;
+}) {
+  return (
+    <div className="group/message relative flex flex-col items-end">
+      {entry.attachments.length > 0 && (
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap justify-end gap-2">
+          {entry.attachments.map((attachment, index) =>
+            attachment.mediaType?.startsWith("image/") ? (
+              <img
+                key={`${attachment.url}:${index}`}
+                src={attachment.url}
+                alt={attachment.filename ?? "Attachment"}
+                className="themed-thumbnail-shadow max-h-52 max-w-64 rounded-xl border border-kumo-line object-cover"
+              />
+            ) : (
+              <span
+                key={`${attachment.url}:${index}`}
+                className="inline-flex items-center gap-1.5 rounded-lg border border-kumo-line bg-kumo-elevated px-2.5 py-1.5 text-[12px] leading-4 text-kumo-subtle"
+              >
+                <FileIcon size={13} className="text-kumo-inactive" />
+                {attachment.filename ?? "Attachment"}
+              </span>
+            ),
+          )}
+        </div>
+      )}
+      {entry.text && (
+        <div className="themed-user-bubble-shadow cos-markdown w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
+          {/* pre-wrap 让用户消息里的单个换行渲染成硬换行 */}
+          <div className="whitespace-pre-wrap">
+            <MarkdownMessage message={entry.text} resolveUrl={resolveUrl} />
+          </div>
+        </div>
+      )}
+      <div className="mt-0.5 flex items-center justify-end gap-2 pr-1 text-[11px] leading-4 text-kumo-inactive opacity-0 transition-opacity duration-150 ease-out group-hover/message:opacity-100 group-focus-within/message:opacity-100">
+        {entry.authorName && <span className="font-medium">{entry.authorName}</span>}
+        {entry.timestamp !== undefined && (
+          <Tooltip content={formatFullTimestamp(entry.timestamp)} asChild>
+            <span className="font-mono">{formatClockTime(entry.timestamp)}</span>
+          </Tooltip>
+        )}
+        {entry.text && (
+          <Tooltip content={copied ? "Copied!" : "Copy message"} asChild>
+            <button
+              type="button"
+              onClick={() => onCopy(entry.text)}
+              className="flex cursor-pointer items-center rounded-md p-1 text-kumo-inactive transition-[color,transform] duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.96]"
+              aria-label={copied ? "Copied!" : "Copy message"}
+            >
+              {copied ? <Check size={13} weight="bold" /> : <Copy size={13} />}
+            </button>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CloudOsChatMessages({
+  messages,
+  status,
+  isHydrating = false,
+  isRecovering = false,
+  recoveryStatusLabel,
+  hasPendingSteer = false,
+  startedWithPending = false,
+  error,
+  showThinkingTraces = true,
+  approvalIdOf,
+  approvalsDisabled = false,
+  renderApproval,
+  resolveUrl,
+  constrainWidth = true,
+  emptyTitle = "What are we working on?",
+  onRetry,
+  onApprove,
+  onSuggestion,
+  onRespond,
+  onOpenSchedule,
+  onCopy,
+}: CloudOsChatMessagesProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  const [expandedCompactions, setExpandedCompactions] = useState<
+    ReadonlySet<string>
+  >(() => new Set());
+  const { copied, copy } = useCopyAction();
+  const isActive = status === "submitted" || status === "streaming";
+
+  const entries = useMemo(
+    () =>
+      buildCloudOsEntries({
+        messages,
+        isActive,
+        showThinkingTraces,
+        approvalIdOf,
+      }),
+    [approvalIdOf, isActive, messages, showThinkingTraces],
+  );
+
+  const entryTopClasses = useMemo(
+    () =>
+      entries.map((entry, index) =>
+        rhythmTopClass(index > 0 ? entries[index - 1] : null, entry),
+      ),
+    [entries],
+  );
+
+  const toggleToolCall = useCallback((key: string) => {
+    setExpandedToolCalls((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const toggleCompaction = useCallback((key: string) => {
+    setExpandedCompactions((current) => {
+      const next = new Set(current);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const syncScrollButton = useCallback(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    const distance =
+      element.scrollHeight - element.scrollTop - element.clientHeight;
+    setShowScrollButton(distance > 120);
+  }, []);
+
+  useEffect(() => {
+    const element = scrollRef.current;
+    if (!element || showScrollButton) return;
+    element.scrollTo({ top: element.scrollHeight });
+  }, [isRecovering, messages, status, showScrollButton]);
+
+  // 判据是「尾巴有没有活口」,不是原文件的「本回合有没有出过内容」——
+  // 后者会让「答完 ask_user 之后到模型下一个 chunk」这段完全没有指示,
+  // 而卡片此时写着 Submitted,读起来就是卡死了。见 deriveTurnActivity。
+  const activity = deriveTurnActivity(entries, { isActive, hasPendingSteer });
+  const copyText = (text: string) => {
+    copy(text);
+    onCopy?.(text);
+  };
+
+  return (
+    <div
+      className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-kumo-base"
+      data-cloud-os-transcript=""
+      data-status={status}
+      aria-busy={isActive || isHydrating}
+    >
+      <div
+        ref={scrollRef}
+        onScroll={syncScrollButton}
+        tabIndex={0}
+        role="region"
+        aria-label="Chat messages"
+        className="cos-chat-panel flex-1 overflow-y-auto"
+      >
+        <div
+          className={`flex flex-col px-6 pb-8 pt-8 ${
+            constrainWidth ? "mx-auto w-full max-w-[920px]" : ""
+          }`}
+        >
+          {entries.length === 0 && !startedWithPending && !isHydrating && (
+            <div className="flex min-h-56 items-center justify-center text-center text-[24px] leading-8 font-semibold tracking-[-0.4px] text-kumo-default">
+              {emptyTitle}
+            </div>
+          )}
+
+          {entries.map((entry, entryIndex) => {
+            const topClass = entryTopClasses[entryIndex] ?? "";
+
+            if (entry.type === "user") {
+              return (
+                <div key={entry.key} className={topClass}>
+                  <UserBubble
+                    entry={entry}
+                    onCopy={copyText}
+                    copied={copied === entry.text}
+                    resolveUrl={resolveUrl}
+                  />
+                </div>
+              );
+            }
+
+            if (entry.type === "slashCommand") {
+              return (
+                <div key={entry.key} className={`${topClass} flex flex-col items-end`}>
+                  <div className="themed-user-bubble-shadow w-fit max-w-[min(680px,78%)] rounded-[24px] rounded-br-lg border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-brand">
+                    <span className="whitespace-pre-wrap font-mono">{entry.text}</span>
+                  </div>
+                </div>
+              );
+            }
+
+            if (entry.type === "localCommandOutput") {
+              return (
+                <div
+                  key={entry.key}
+                  className={`${topClass} max-w-[860px] text-[14px] leading-5 tracking-[-0.25px] text-kumo-subtle`}
+                >
+                  <div className="flex items-center gap-3 px-1.5 py-1">
+                    <span
+                      className="flex h-5 w-5 flex-shrink-0 items-center justify-center text-kumo-inactive"
+                      aria-hidden="true"
+                    >
+                      <Terminal size={16} />
+                    </span>
+                    <span className="min-w-0 truncate font-mono text-[13px]">
+                      {entry.text}
+                    </span>
+                  </div>
+                </div>
+              );
+            }
+
+            if (entry.type === "notice") {
+              return (
+                <div
+                  key={entry.key}
+                  className={`${topClass} max-w-[860px] text-[13px] leading-[19px] tracking-[-0.25px] text-kumo-inactive`}
+                >
+                  <div className="px-1.5 py-1">{entry.text}</div>
+                </div>
+              );
+            }
+
+            if (entry.type === "compactionBoundary") {
+              const expanded = expandedCompactions.has(entry.key);
+              return (
+                <div key={entry.key} className={`${topClass} mb-4 max-w-[860px]`}>
+                  <div
+                    className="flex items-center gap-3"
+                    role="separator"
+                    aria-label="Context compacted"
+                  >
+                    <span className="h-px flex-1 bg-kumo-line" aria-hidden="true" />
+                    <button
+                      type="button"
+                      onClick={() => toggleCompaction(entry.key)}
+                      aria-expanded={expanded}
+                      className="flex flex-shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-1 py-0.5 text-[11px] leading-4 font-medium tracking-[0.6px] text-kumo-inactive uppercase transition-colors duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none"
+                    >
+                      <Brain size={13} aria-hidden="true" />
+                      Context compacted
+                      <CaretRight
+                        size={11}
+                        weight="bold"
+                        className={`transition-transform duration-150 ease-out ${expanded ? "rotate-90" : ""}`}
+                      />
+                    </button>
+                    <span className="h-px flex-1 bg-kumo-line" aria-hidden="true" />
+                  </div>
+                  {expanded && (
+                    <div className="themed-surface-inset cos-markdown mt-3 rounded-2xl border border-kumo-line/70 bg-kumo-elevated/45 p-3.5 text-[13px] leading-[19px]">
+                      <MarkdownMessage
+                        message={entry.summary}
+                        resolveUrl={resolveUrl}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            }
+
+            const hasNarrative = entry.blocks.some(
+              (block) => block.kind === "text",
+            );
+
+            return (
+              <div
+                key={entry.key}
+                className={`${topClass} min-w-0 w-full max-w-[860px] space-y-2`}
+              >
+                <div className="group/agentMessage relative space-y-1.5">
+                  {entry.blocks.map((block) => {
+                    switch (block.kind) {
+                      case "reasoning":
+                        return (
+                          <ThinkingTraceRow key={block.key} reasoning={block.text} />
+                        );
+                      case "text":
+                        return (
+                          <div
+                            key={block.key}
+                            className="cos-markdown text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default"
+                          >
+                            <MarkdownMessage
+                              message={block.text}
+                              resolveUrl={resolveUrl}
+                            />
+                          </div>
+                        );
+                      case "toolGroup":
+                        return (
+                          <ToolGroupRow
+                            key={block.key}
+                            group={block.group}
+                            open={expandedToolCalls.has(block.group.key)}
+                            expandedKeys={expandedToolCalls}
+                            onToggle={toggleToolCall}
+                          />
+                        );
+                      case "plan":
+                        return (
+                          <PlanBlock
+                            key={block.key}
+                            steps={block.steps}
+                            running={block.running}
+                          />
+                        );
+                      case "askUser":
+                        return (
+                          <AskUserBlock
+                            key={block.key}
+                            call={block.call}
+                            onRespond={onRespond}
+                          />
+                        );
+                      case "suggestions":
+                        return (
+                          <SuggestionsBlock
+                            key={block.key}
+                            items={block.items}
+                            onSuggestion={(text) => onSuggestion?.(text)}
+                          />
+                        );
+                      case "schedule":
+                        return (
+                          <ScheduleBlock
+                            key={block.key}
+                            call={block.call}
+                            onOpen={onOpenSchedule}
+                          />
+                        );
+                      case "approval": {
+                        const custom = renderApproval?.({
+                          approvalId: block.approvalId,
+                          toolName: block.call.toolName,
+                          input: block.call.input,
+                          disabled: approvalsDisabled,
+                        });
+                        if (custom !== undefined && custom !== null) {
+                          return (
+                            <Fragment key={block.key}>{custom}</Fragment>
+                          );
+                        }
+                        return (
+                          <ApprovalBlock
+                            key={block.key}
+                            call={block.call}
+                            approvalId={block.approvalId}
+                            disabled={approvalsDisabled}
+                            onApprove={(id, decision) => onApprove?.(id, decision)}
+                          />
+                        );
+                      }
+                      case "parallel":
+                        return (
+                          <ParallelBlock
+                            key={block.key}
+                            label={block.label}
+                            tools={block.tools}
+                          />
+                        );
+                      case "subagents":
+                        return (
+                          <SubAgentsBlock key={block.key} agents={block.agents} />
+                        );
+                      case "image":
+                        return (
+                          <figure key={block.key} className="my-1">
+                            <img
+                              src={resolveUrl?.(block.src) ?? block.src}
+                              alt={block.alt}
+                              className="max-h-[28rem] max-w-full rounded-xl border border-kumo-line object-contain"
+                            />
+                          </figure>
+                        );
+                      case "error":
+                        return (
+                          <ErrorBlock
+                            key={block.key}
+                            title={block.title}
+                            body={block.body}
+                          />
+                        );
+                    }
+                  })}
+
+                  {entry.terminal?.kind === "error" && (
+                    <ErrorBlock
+                      title={entry.terminal.title}
+                      body={entry.terminal.body}
+                      onRetry={onRetry}
+                    />
+                  )}
+
+                  {entry.terminal?.kind === "interrupted" && (
+                    <div
+                      className="px-1.5 py-1 text-[13px] leading-[19px] text-kumo-inactive"
+                      role="status"
+                    >
+                      {entry.terminal.title}
+                    </div>
+                  )}
+
+                  {hasNarrative && entry.timestamp !== undefined && (
+                    <div className="mt-0.5 -ml-1 flex items-center gap-1 opacity-0 transition-opacity duration-150 ease-out group-hover/agentMessage:opacity-100 group-focus-within/agentMessage:opacity-100">
+                      <Tooltip
+                        content={copied === entry.copyText ? "Copied!" : "Copy message"}
+                        asChild
+                      >
+                        <button
+                          type="button"
+                          onClick={() => copyText(entry.copyText)}
+                          className="flex cursor-pointer items-center rounded-md p-1 text-kumo-inactive transition-[color,transform] duration-150 ease-out hover:text-kumo-default focus-visible:text-kumo-default focus-visible:outline-none active:scale-[0.96]"
+                          aria-label="Copy message"
+                        >
+                          {copied === entry.copyText ? (
+                            <Check size={15} weight="bold" />
+                          ) : (
+                            <Copy size={15} />
+                          )}
+                        </button>
+                      </Tooltip>
+                      <Tooltip content={formatFullTimestamp(entry.timestamp)} asChild>
+                        <span className="px-1 font-mono text-[11px] leading-4 text-kumo-inactive">
+                          {formatClockTime(entry.timestamp)}
+                        </span>
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+
+          {isRecovering && (
+            <div className="mt-4 flex max-w-[860px] items-center gap-3 px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
+              <span className="cos-thinking-shimmer">
+                {recoveryStatusLabel ?? "Reconnecting…"}
+              </span>
+            </div>
+          )}
+
+          {activity && (
+            <div className="mt-5 inline-flex px-1.5 py-1 text-[14px] leading-5 tracking-[-0.25px]">
+              <CloudOsActivityIndicator {...activity} />
+            </div>
+          )}
+
+          {error != null && (
+            <div className="mt-4">
+              <ErrorBlock
+                title="Error"
+                body={
+                  error instanceof Error
+                    ? error.message
+                    : typeof error === "string"
+                      ? error
+                      : "Something went wrong"
+                }
+                onRetry={onRetry}
+              />
+            </div>
+          )}
+
+          <div ref={endRef} />
+        </div>
+      </div>
+
+      <WorkshopIconButton
+        aria-label="Scroll to bottom"
+        onClick={() => endRef.current?.scrollIntoView({ behavior: "smooth" })}
+        className={`themed-floating-shadow absolute bottom-3 left-1/2 z-20 -translate-x-1/2 !rounded-full border border-kumo-line bg-kumo-base transition-all duration-200 ${
+          showScrollButton
+            ? "translate-y-0 opacity-100"
+            : "pointer-events-none translate-y-2 opacity-0"
+        }`}
+      >
+        <ArrowDown size={15} />
+      </WorkshopIconButton>
+
+      {isHydrating && (
+        <div className="absolute inset-0 z-30 grid place-items-center bg-kumo-base/90">
+          <div className="flex flex-col items-center gap-3">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-kumo-brand border-t-transparent" />
+            <p className="m-0 text-[13px] leading-[18px] text-kumo-subtle">
+              Loading conversation…
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}