@springbrand/message-panel 0.1.3-alpha.23 → 0.1.3-alpha.25

package/cloud-os/assets/thinking-spark.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" overflow="visible" width="12.2369" height="12.2369" viewBox="0 0 12.2369 12.2369" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.18061 0.652963C5.50276 -0.217655 6.73415 -0.217654 7.05631 0.652964L7.64089 2.23277C8.04603 3.32764 8.90927 4.19089 10.0042 4.59603L11.584 5.18061C12.4546 5.50276 12.4546 6.73415 11.584 7.05631L10.0041 7.64089C8.90927 8.04603 8.04603 8.90927 7.64089 10.0042L7.05631 11.584C6.73415 12.4546 5.50276 12.4546 5.18061 11.584L4.59603 10.0041C4.19089 8.90927 3.32764 8.04603 2.23277 7.64089L0.652963 7.05631C-0.217655 6.73415 -0.217654 5.50276 0.652964 5.18061L2.23277 4.59603C3.32764 4.19089 4.19089 3.32764 4.59603 2.23277L5.18061 0.652963Z" fill="url(#thinking-spark-gradient)"/>
+  <defs>
+    <radialGradient id="thinking-spark-gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.11846 2.11846) rotate(90) scale(12)">
+      <stop stop-color="#FF9938"/>
+      <stop offset="1" stop-color="#FFE46C"/>
+    </radialGradient>
+  </defs>
+</svg>

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

@@ -33,8 +33,14 @@ 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,
@@ -45,8 +51,10 @@ import {
   deriveTurnActivity,
   formatClockTime,
   formatFullTimestamp,
+  partitionAssistantBlocks,
   rhythmTopClass,
   type CloudOsEntry,
+  type CloudOsActionPresentation,
 } from "./transcript-model";
 
 export type CloudOsChatStatus = "ready" | "submitted" | "streaming" | "error";
@@ -100,6 +108,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;
@@ -200,6 +220,83 @@ function UserBubble({
   );
 }
 
+function ActionPresentationBlock({
+  presentation,
+  renderFile,
+  resolveUrl,
+}: {
+  presentation: CloudOsActionPresentation;
+  renderFile?: FileRenderer;
+  resolveUrl?: CloudOsUrlResolver;
+}) {
+  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) => (
+            <Fragment key={`${file.url}:${index}`}>
+              {renderFileView(renderFile, {
+                file: {
+                  ...file,
+                  filename: "Generated file",
+                  url: resolveUrl?.(file.url) ?? file.url,
+                },
+                placement: "assistant-message",
+                variant: "product",
+              })}
+            </Fragment>
+          ))}
+      </div>
+    );
+  }
+
+  const product = presentation.produces;
+  const productName = product?.type ?? "other";
+  const isFileProduct = productName !== "data" && productName !== "other";
+  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."
+      : 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">
+          {state === "failed" ? "Generation failed" : "Status unavailable"}
+        </strong>
+        {body && <span className="block text-kumo-subtle">{body}</span>}
+      </span>
+    </div>
+  );
+}
+
 export function CloudOsChatMessages({
   messages,
   status,
@@ -231,6 +328,9 @@ 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());
@@ -248,6 +348,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(
     () =>
@@ -266,6 +391,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);
@@ -413,7 +547,7 @@ 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}
@@ -424,24 +558,90 @@ 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",
             );
 
             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
+                          <WorkDescriptionRow
                             key={block.key}
-                            reasoning={block.text}
-                            running={block.running}
+                            text={block.text}
+                            resolveUrl={resolveUrl}
                           />
                         );
                       case "text": {
@@ -564,6 +764,15 @@ export function CloudOsChatMessages({
                             })}
                           </Fragment>
                         );
+                      case "actionPresentation":
+                        return (
+                          <ActionPresentationBlock
+                            key={block.key}
+                            presentation={block.presentation}
+                            renderFile={renderFile}
+                            resolveUrl={resolveUrl}
+                          />
+                        );
                       case "error":
                         return (
                           <ErrorBlock

package/cloud-os/chat/image-generation.tsx

@@ -0,0 +1,76 @@
+import type { CloudOsActionPresentation } from "./transcript-model";
+
+export type ProductType = NonNullable<CloudOsActionPresentation["produces"]>["type"];
+
+export const PRODUCT_PRESETS = {
+  image: { frame: "aspect-square w-52", columns: 6, rows: 6 },
+  video: { frame: "aspect-video w-64", columns: 8, rows: 4 },
+  audio: { frame: "h-24 w-64", columns: 9, rows: 2 },
+  document: { frame: "aspect-[4/5] w-44", columns: 5, rows: 7 },
+  archive: { frame: "h-28 w-44", columns: 5, rows: 3 },
+  data: { frame: "h-32 w-52", columns: 6, rows: 3 },
+  other: { frame: "h-28 w-44", columns: 5, rows: 3 },
+} satisfies Record<ProductType, { frame: string; columns: number; rows: number }>;
+
+export function productTypeForMediaType(mediaType?: string): ProductType {
+  const type = mediaType?.toLowerCase() ?? "";
+  if (type.startsWith("image/")) return "image";
+  if (type.startsWith("audio/")) return "audio";
+  if (type.startsWith("video/")) return "video";
+  if (/zip|archive|compressed|gzip|tar/.test(type)) return "archive";
+  if (/json|csv|spreadsheet|excel|parquet|sql/.test(type)) return "data";
+  if (type.startsWith("text/") || /pdf|document|word|rtf|presentation/.test(type)) {
+    return "document";
+  }
+  return "other";
+}
+
+/** Product-aware adaptation of https://www.assistant-ui.com/elements/image-generation. */
+export function ProductGeneration({
+  type,
+  mediaType,
+}: {
+  type: ProductType;
+  mediaType?: string;
+}) {
+  const { frame, columns, rows } = PRODUCT_PRESETS[type];
+  const dots = Array.from({ length: columns * rows }, (_, index) => index);
+  return (
+    <div className="flex w-fit max-w-full flex-col gap-2.5" data-product-generation={type}>
+      <div className={`themed-thumbnail-shadow relative max-w-full overflow-hidden rounded-2xl border border-kumo-line bg-kumo-elevated ${frame}`}>
+        <div
+          className="absolute inset-0 grid place-items-center p-5"
+          data-generation-grid={`${columns}x${rows}`}
+          style={{
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+          }}
+          aria-hidden="true"
+        >
+          {dots.map((dot) => {
+            const row = Math.floor(dot / columns);
+            const column = dot % columns;
+            return (
+              <span
+                key={dot}
+                data-generation-dot=""
+                className="size-1 rounded-full bg-kumo-fill-hover animate-pulse motion-reduce:animate-none"
+                style={{ animationDelay: `${(row + column) * 90}ms` }}
+              />
+            );
+          })}
+        </div>
+        {mediaType && (
+          <span className="absolute end-2.5 top-2.5 font-mono text-[10px] text-kumo-inactive">
+            {mediaType}
+          </span>
+        )}
+      </div>
+      <p className="m-0 min-w-0 truncate text-xs text-kumo-inactive">
+        <span className="capitalize text-kumo-subtle">{type}</span>
+        <span aria-hidden="true"> · </span>
+        <span className="cos-thinking-shimmer motion-reduce:animate-none">Generating</span>
+      </p>
+    </div>
+  );
+}

package/cloud-os/chat/loading-state.tsx

@@ -0,0 +1,25 @@
+const CELLS = Array.from({ length: 9 }, (_, index) => index);
+
+/** CSS-driven adaptation of https://www.assistant-ui.com/elements/loading-state. */
+export function GenerationLoader() {
+  return (
+    <div
+      data-slot="generation-loader"
+      className="inline-flex flex-col items-center gap-3 py-2"
+    >
+      <div aria-hidden="true" className="grid grid-cols-3 gap-1">
+        {CELLS.map((cell) => (
+          <span
+            key={cell}
+            data-loading-cell=""
+            className="size-2 animate-pulse rounded-full bg-[var(--text-color-kumo-default)] motion-reduce:animate-none"
+            style={{ animationDelay: `${cell * 100}ms` }}
+          />
+        ))}
+      </div>
+      <span className="cos-thinking-shimmer text-sm text-kumo-inactive motion-reduce:animate-none">
+        Generating
+      </span>
+    </div>
+  );
+}

package/cloud-os/chat/markdown-message.tsx

@@ -1,3 +1,9 @@
+import {
+  TextMessagePartProvider,
+  useMessagePartText,
+  useSmooth,
+  type SmoothOptions,
+} from "@assistant-ui/react";
 import { memo, useMemo, type ReactNode } from "react";
 import {
   defaultRehypePlugins,
@@ -14,7 +20,10 @@ import {
 export type CloudOsUrlResolver = (url: string) => string | null | undefined;
 
 const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
-const CJK_TEXT = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+const SMOOTH_STREAMING = {
+  maxCharsPerFrame: 12,
+  minCommitMs: 32,
+} satisfies SmoothOptions;
 
 export function safeExternalUrl(href: string | undefined): string | undefined {
   if (!href) return undefined;
@@ -101,6 +110,20 @@ export const MarkdownMessage = memo(function MarkdownMessage({
   resolveUrl?: CloudOsUrlResolver;
   streaming?: boolean;
 }): ReactNode {
+  return (
+    <TextMessagePartProvider text={message} isRunning={streaming}>
+      <MarkdownMessageContent resolveUrl={resolveUrl} />
+    </TextMessagePartProvider>
+  );
+});
+
+function MarkdownMessageContent({
+  resolveUrl,
+}: {
+  resolveUrl?: CloudOsUrlResolver;
+}) {
+  const part = useSmooth(useMessagePartText(), SMOOTH_STREAMING);
+  const streaming = part.status.type === "running";
   const rehypePlugins = useMemo(
     () =>
       resolveUrl
@@ -110,13 +133,7 @@ export const MarkdownMessage = memo(function MarkdownMessage({
   );
   return (
     <Streamdown
-      animated={
-        streaming
-          ? CJK_TEXT.test(message)
-            ? { sep: "char", duration: 100, stagger: 5 }
-            : true
-          : false
-      }
+      animated={false}
       className="space-y-0"
       controls={false}
       mode={streaming ? "streaming" : "static"}
@@ -125,7 +142,7 @@ export const MarkdownMessage = memo(function MarkdownMessage({
       skipHtml
       components={DEFAULT_COMPONENTS}
     >
-      {message}
+      {part.text}
     </Streamdown>
   );
-});
+}