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

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

@@ -5,7 +5,6 @@ import {
   CaretRight,
   Check,
   Copy,
-  File as FileIcon,
   Terminal,
 } from "@phosphor-icons/react";
 import {
@@ -21,6 +20,7 @@ import { Tooltip } from "../primitives/tooltip";
 import { WorkshopIconButton } from "../primitives/workshop-controls";
 import {
   MarkdownMessage,
+  type CloudOsArtifactResolver,
   type CloudOsUrlResolver,
 } from "./markdown-message";
 import {
@@ -34,15 +34,28 @@ import {
   SuggestionsBlock,
   type ApprovalDecision,
 } from "./rich-blocks";
-import { ThinkingTraceRow, ToolGroupRow } from "./tool-rows";
+import {
+  ToolGroupRow,
+  WorkDescriptionRow,
+  WorkTraceDisclosure,
+} from "./tool-rows";
 import { CloudOsActivityIndicator } from "./activity-indicator";
+import { ProductGeneration } from "./image-generation";
+import { GenerationLoader } from "./loading-state";
+import { CapabilityChip } from "../capability-chip";
+import {
+  renderFileView,
+  type FileRenderer,
+} from "../file-view";
 import {
   buildCloudOsEntries,
   deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
+  partitionAssistantBlocks,
   rhythmTopClass,
   type CloudOsEntry,
+  type CloudOsActionPresentation,
 } from "./transcript-model";
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
@@ -50,9 +63,11 @@ export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
 export interface CloudOsChatMessagesProps {
   messages: readonly UIMessage[];
   status: CloudOsChatStatus;
-  isHydrating?: boolean;
+  /** 权威 Turn 生命周期;提供时替代本地 status 推断。 */
+  turnActive?: boolean;
   isRecovering?: boolean;
   recoveryStatusLabel?: string;
+  awaitingApproval?: boolean;
   /** 有 pending steer 时,活动占位说明「正在等当前步骤收尾」。 */
   hasPendingSteer?: boolean;
   /** 首帧就带着待发消息:此时不显示空会话欢迎语。 */
@@ -74,8 +89,14 @@ export interface CloudOsChatMessagesProps {
     input: Record<string, unknown>;
     disabled: boolean;
   }) => ReactNode;
+  /** 接管消息里的文件视图；未提供时使用包内 FileView。 */
+  renderFile?: FileRenderer;
   /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
   resolveUrl?: CloudOsUrlResolver;
+  /** 把图片 URL 关联到宿主的持久产物。 */
+  resolveArtifactId?: CloudOsArtifactResolver;
+  /** 打开宿主拥有的产物视图。 */
+  onOpenArtifact?: (artifactId: string) => void;
   /** 消息区宽度是否收敛到 920px 居中(GadgetEditor 里叫 constrainChatWidth)。 */
   constrainWidth?: boolean;
   emptyTitle?: string;
@@ -92,6 +113,18 @@ export interface CloudOsChatMessagesProps {
   onCopy?: (text: string) => void;
 }
 
+export function collapseEntriesWithNewNarrative(
+  expanded: ReadonlySet<string>,
+  previousNarrativeKeys: ReadonlySet<string>,
+  narrativeKeys: ReadonlySet<string>,
+): ReadonlySet<string> {
+  const next = new Set(expanded);
+  for (const key of narrativeKeys) {
+    if (!previousNarrativeKeys.has(key)) next.delete(key);
+  }
+  return next.size === expanded.size ? expanded : next;
+}
+
 function useCopyAction(): {
   copied: string | null;
   copy: (text: string) => void;
@@ -118,43 +151,63 @@ function UserBubble({
   entry,
   onCopy,
   copied,
+  renderFile,
   resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
 }: {
   entry: Extract<CloudOsEntry, { type: "user" }>;
   onCopy: (text: string) => void;
   copied: boolean;
+  renderFile?: FileRenderer;
   resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
 }) {
   return (
     <div className="group/message relative flex flex-col items-end">
+      {entry.capabilities.length > 0 && (
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap justify-end gap-1.5">
+          {entry.capabilities.map((capability) => (
+            <CapabilityChip
+              key={`${capability.kind}:${capability.name}`}
+              kind={capability.kind}
+              label={capability.label}
+            />
+          ))}
+        </div>
+      )}
       {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"
-              />
+        <div className="mb-1.5 flex max-w-[min(680px,78%)] flex-wrap items-start justify-end gap-2">
+          {entry.attachments.map((attachment, index) => {
+            const view = renderFileView(renderFile, {
+              file: {
+                ...attachment,
+                url: resolveUrl?.(attachment.url) ?? attachment.url,
+              },
+              placement: "user-message",
+            });
+            return attachment.mediaType?.startsWith("image/") ? (
+              <Fragment key={`${attachment.url}:${index}`}>{view}</Fragment>
             ) : (
               <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"
+                className="flex basis-full justify-end"
               >
-                <FileIcon size={13} className="text-kumo-inactive" />
-                {attachment.filename ?? "Attachment"}
+                {view}
               </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 className="themed-user-bubble-shadow cos-markdown cos-user-markdown w-fit max-w-[min(680px,78%)] rounded-[12px] border border-transparent bg-kumo-bubble-user px-4 py-2.5 text-[14px] leading-[22px] tracking-[-0.25px] text-kumo-default">
+          <MarkdownMessage
+            message={entry.text}
+            resolveUrl={resolveUrl}
+            resolveArtifactId={resolveArtifactId}
+            onOpenArtifact={onOpenArtifact}
+          />
         </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">
@@ -181,12 +234,111 @@ function UserBubble({
   );
 }
 
+function ActionPresentationBlock({
+  presentation,
+  failureCount = 1,
+  partial = false,
+  renderFile,
+  resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
+}: {
+  presentation: CloudOsActionPresentation;
+  failureCount?: number;
+  partial?: boolean;
+  renderFile?: FileRenderer;
+  resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
+}) {
+  const { state } = presentation;
+  if (state === "ready") {
+    return (
+      <div
+        data-action-presentation={state}
+        role="status"
+        aria-label="Completed"
+        className="space-y-2"
+      >
+        {presentation.content.length === 0
+          ? <p className="m-0 text-[14px] leading-5 text-kumo-subtle">Completed</p>
+          : presentation.content.map((file, index) => {
+            const url = resolveUrl?.(file.url) ?? file.url;
+            const artifactId = resolveArtifactId?.(url);
+            return (
+              <Fragment key={`${file.url}:${index}`}>
+                {renderFileView(renderFile, {
+                  file: {
+                    ...file,
+                    filename: "Generated file",
+                    url,
+                  },
+                  placement: "assistant-message",
+                  variant: "product",
+                  onOpen: file.mediaType?.startsWith("image/") && artifactId && onOpenArtifact
+                    ? () => onOpenArtifact(artifactId)
+                    : undefined,
+                })}
+              </Fragment>
+            );
+          })}
+      </div>
+    );
+  }
+
+  const product = presentation.produces;
+  const productName = product?.type ?? "other";
+  const isFileProduct = productName !== "data" && productName !== "other";
+  const insufficientCredits = state === "failed" &&
+    presentation.failureCode === "insufficient_credits";
+  const body = state === "running"
+    ? isFileProduct
+      ? `Generating ${productName}${product?.mediaType ? ` (${product.mediaType})` : ""}`
+      : "Generating"
+    : state === "outcome_unknown"
+      ? "The provider may have completed this action. Check the status before trying again."
+      : insufficientCredits
+        ? `${failureCount} API call${failureCount === 1 ? " was" : "s were"} not started because there weren't enough Credits.`
+        : undefined;
+  if (state === "running") {
+    return (
+      <div
+        data-action-presentation={state}
+        data-product-type={productName}
+        role="status"
+        aria-label={body}
+      >
+        {isFileProduct
+          ? <ProductGeneration type={productName} mediaType={product?.mediaType} />
+          : <GenerationLoader />}
+      </div>
+    );
+  }
+  return (
+    <div
+      data-action-presentation={state}
+      role={state === "failed" ? "alert" : "status"}
+      className="inline-flex max-w-72 items-start rounded-xl border border-kumo-line bg-kumo-elevated px-3 py-2 text-[13px] leading-5"
+    >
+      <span>
+        <strong className="block font-medium text-kumo-default">
+          {insufficientCredits
+            ? partial ? "Partially completed" : "Not completed"
+            : state === "failed" ? "Action failed" : "Status unavailable"}
+        </strong>
+        {body && <span className="block text-kumo-subtle">{body}</span>}
+      </span>
+    </div>
+  );
+}
+
 export function CloudOsChatMessages({
   messages,
   status,
-  isHydrating = false,
+  turnActive,
   isRecovering = false,
   recoveryStatusLabel,
+  awaitingApproval = false,
   hasPendingSteer = false,
   startedWithPending = false,
   error,
@@ -194,7 +346,9 @@ export function CloudOsChatMessages({
   approvalIdOf,
   approvalsDisabled = false,
   renderApproval,
+  renderFile,
   resolveUrl,
+  resolveArtifactId,
   constrainWidth = true,
   emptyTitle = "What are we working on?",
   onRetry,
@@ -202,6 +356,7 @@ export function CloudOsChatMessages({
   onSuggestion,
   onRespond,
   onOpenSchedule,
+  onOpenArtifact,
   onCopy,
 }: CloudOsChatMessagesProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -210,11 +365,15 @@ export function CloudOsChatMessages({
   const [expandedToolCalls, setExpandedToolCalls] = useState<ReadonlySet<string>>(
     () => new Set(),
   );
+  const [expandedWorkEntries, setExpandedWorkEntries] = useState<
+    ReadonlySet<string>
+  >(() => new Set());
   const [expandedCompactions, setExpandedCompactions] = useState<
     ReadonlySet<string>
   >(() => new Set());
   const { copied, copy } = useCopyAction();
-  const isActive = status === "submitted" || status === "streaming";
+  const isActive =
+    turnActive ?? (status === "submitted" || status === "streaming");
 
   const entries = useMemo(
     () =>
@@ -226,6 +385,31 @@ export function CloudOsChatMessages({
       }),
     [approvalIdOf, isActive, messages, showThinkingTraces],
   );
+  const narrativeEntryKeys = useMemo(
+    () =>
+      new Set(
+        entries.flatMap((entry) =>
+          entry.type === "assistant" &&
+            partitionAssistantBlocks(entry.blocks).content.some(
+              (block) => block.kind === "text",
+            )
+            ? [entry.key]
+            : [],
+        ),
+      ),
+    [entries],
+  );
+  const previousNarrativeEntryKeys = useRef<ReadonlySet<string>>(
+    narrativeEntryKeys,
+  );
+
+  useEffect(() => {
+    const previous = previousNarrativeEntryKeys.current;
+    previousNarrativeEntryKeys.current = narrativeEntryKeys;
+    setExpandedWorkEntries((expanded) =>
+      collapseEntriesWithNewNarrative(expanded, previous, narrativeEntryKeys),
+    );
+  }, [narrativeEntryKeys]);
 
   const entryTopClasses = useMemo(
     () =>
@@ -244,6 +428,15 @@ export function CloudOsChatMessages({
     });
   }, []);
 
+  const toggleWorkEntry = useCallback((key: string) => {
+    setExpandedWorkEntries((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);
@@ -267,10 +460,13 @@ export function CloudOsChatMessages({
     element.scrollTo({ top: element.scrollHeight });
   }, [isRecovering, messages, status, showScrollButton]);
 
-  // 判据是「尾巴有没有活口」,不是原文件的「本回合有没有出过内容」——
-  // 后者会让「答完 ask_user 之后到模型下一个 chunk」这段完全没有指示,
-  // 而卡片此时写着 Submitted,读起来就是卡死了。见 deriveTurnActivity。
-  const activity = deriveTurnActivity(entries, { isActive, hasPendingSteer });
+  const activity = deriveTurnActivity(entries, {
+    isActive,
+    isRecovering,
+    recoveryStatusLabel,
+    awaitingApproval,
+    hasPendingSteer,
+  });
   const copyText = (text: string) => {
     copy(text);
     onCopy?.(text);
@@ -281,7 +477,7 @@ export function CloudOsChatMessages({
       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}
+      aria-busy={isActive || isRecovering}
     >
       <div
         ref={scrollRef}
@@ -296,7 +492,7 @@ export function CloudOsChatMessages({
             constrainWidth ? "mx-auto w-full max-w-[920px]" : ""
           }`}
         >
-          {entries.length === 0 && !startedWithPending && !isHydrating && (
+          {entries.length === 0 && !startedWithPending && (
             <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>
@@ -312,7 +508,10 @@ export function CloudOsChatMessages({
                     entry={entry}
                     onCopy={copyText}
                     copied={copied === entry.text}
+                    renderFile={renderFile}
                     resolveUrl={resolveUrl}
+                    resolveArtifactId={resolveArtifactId}
+                    onOpenArtifact={onOpenArtifact}
                   />
                 </div>
               );
@@ -321,7 +520,7 @@ export function CloudOsChatMessages({
             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">
+                  <div className="themed-user-bubble-shadow w-fit max-w-[min(680px,78%)] rounded-[12px] 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>
@@ -387,10 +586,12 @@ export function CloudOsChatMessages({
                     <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]">
+                    <div className="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}
+                        resolveArtifactId={resolveArtifactId}
+                        onOpenArtifact={onOpenArtifact}
                       />
                     </div>
                   )}
@@ -398,23 +599,107 @@ export function CloudOsChatMessages({
               );
             }
 
-            const hasNarrative = entry.blocks.some(
+            const { work: workBlocks, content: contentBlocks } =
+              partitionAssistantBlocks(entry.blocks);
+            const workGroups = workBlocks.flatMap((block) =>
+              block.kind === "toolGroup" ? [block.group] : [],
+            );
+            const hasNarrative = contentBlocks.some(
               (block) => block.kind === "text",
             );
+            const insufficientFailures = contentBlocks.filter(
+              (block) => block.kind === "actionPresentation" &&
+                block.presentation.state === "failed" &&
+                block.presentation.failureCode === "insufficient_credits",
+            );
+            const firstInsufficientFailure = insufficientFailures[0];
+            const hasCompletedAction = contentBlocks.some(
+              (block) => block.kind === "actionPresentation" &&
+                block.presentation.state === "ready",
+            );
 
             return (
               <div
                 key={entry.key}
-                className={`${topClass} min-w-0 w-full max-w-[860px] space-y-2`}
+                className={`${topClass} min-w-0 w-full max-w-[860px]`}
               >
-                <div className="group/agentMessage relative space-y-1.5">
-                  {entry.blocks.map((block) => {
+                <div className="group/agentMessage relative space-y-4">
+                  {workBlocks.length > 0 && (
+                    <WorkTraceDisclosure
+                      durationMs={entry.durationMs}
+                      groups={workGroups}
+                      completed={!isActive}
+                      open={expandedWorkEntries.has(entry.key)}
+                      onToggle={() => toggleWorkEntry(entry.key)}
+                    >
+                      {workBlocks.map((block) => {
+                        switch (block.kind) {
+                          case "reasoning":
+                          case "text":
+                            return (
+                              <WorkDescriptionRow
+                                key={block.key}
+                                text={block.text}
+                                resolveUrl={resolveUrl}
+                              />
+                            );
+                          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}
+                                defaultOpen={false}
+                                showCollapsedSummary={false}
+                              />
+                            );
+                          case "parallel":
+                            return (
+                              <ParallelBlock
+                                key={block.key}
+                                label={block.label}
+                                tools={block.tools}
+                              />
+                            );
+                          case "subagents":
+                            return (
+                              <SubAgentsBlock
+                                key={block.key}
+                                agents={block.agents}
+                              />
+                            );
+                          default:
+                            return null;
+                        }
+                      })}
+                    </WorkTraceDisclosure>
+                  )}
+
+                  {contentBlocks.map((block) => {
                     switch (block.kind) {
                       case "reasoning":
                         return (
-                          <ThinkingTraceRow key={block.key} reasoning={block.text} />
+                          <WorkDescriptionRow
+                            key={block.key}
+                            text={block.text}
+                            resolveUrl={resolveUrl}
+                          />
                         );
-                      case "text":
+                      case "text": {
+                        const streaming =
+                          isActive &&
+                          entryIndex === entries.length - 1 &&
+                          block === entry.blocks.at(-1);
                         return (
                           <div
                             key={block.key}
@@ -423,9 +708,13 @@ export function CloudOsChatMessages({
                             <MarkdownMessage
                               message={block.text}
                               resolveUrl={resolveUrl}
+                              resolveArtifactId={resolveArtifactId}
+                              onOpenArtifact={onOpenArtifact}
+                              streaming={streaming}
                             />
                           </div>
                         );
+                      }
                       case "toolGroup":
                         return (
                           <ToolGroupRow
@@ -503,14 +792,54 @@ export function CloudOsChatMessages({
                           <SubAgentsBlock key={block.key} agents={block.agents} />
                         );
                       case "image":
+                        {
+                          const url = resolveUrl?.(block.src) ?? block.src;
+                          const artifactId = resolveArtifactId?.(url);
+                          return (
+                            <Fragment key={block.key}>
+                              {renderFileView(renderFile, {
+                                file: {
+                                  url,
+                                  filename: block.alt,
+                                  mediaType: block.mediaType ?? "image/*",
+                                },
+                                placement: "assistant-message",
+                                onOpen: artifactId && onOpenArtifact
+                                  ? () => onOpenArtifact(artifactId)
+                                  : undefined,
+                              })}
+                            </Fragment>
+                          );
+                        }
+                      case "file":
                         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>
+                          <Fragment key={block.key}>
+                            {renderFileView(renderFile, {
+                              file: {
+                                ...block.file,
+                                url:
+                                  resolveUrl?.(block.file.url) ?? block.file.url,
+                              },
+                              placement: "assistant-message",
+                            })}
+                          </Fragment>
+                        );
+                      case "actionPresentation":
+                        if (
+                          block.presentation.failureCode === "insufficient_credits" &&
+                          block !== firstInsufficientFailure
+                        ) return null;
+                        return (
+                          <ActionPresentationBlock
+                            key={block.key}
+                            presentation={block.presentation}
+                            failureCount={insufficientFailures.length}
+                            partial={hasCompletedAction}
+                            renderFile={renderFile}
+                            resolveUrl={resolveUrl}
+                            resolveArtifactId={resolveArtifactId}
+                            onOpenArtifact={onOpenArtifact}
+                          />
                         );
                       case "error":
                         return (
@@ -571,14 +900,6 @@ export function CloudOsChatMessages({
             );
           })}
 
-          {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} />
@@ -617,16 +938,6 @@ export function CloudOsChatMessages({
         <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>
   );
 }