@springbrand/message-panel 0.1.3-alpha.8 → 0.2.0-alpha.37

package/cloud-os/chat/code-runner.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { Loader2Icon, PlayIcon } from "lucide-react";
+import { cn } from "../internal/cn";
+import { codeScroll, codeSurface, ghostButton, mono, paper } from "./surfaces";
+
+export type RunState = "idle" | "running" | "ok" | "error";
+
+export function CodeRunner({
+  language,
+  code,
+  state,
+  output,
+  durationMs,
+  onRun,
+  className,
+  ...props
+}: Omit<
+  ComponentProps<"div">,
+  "children" | "language" | "code" | "state" | "output" | "durationMs" | "onRun"
+> & {
+  language: string;
+  code: string;
+  state: RunState;
+  output: readonly string[];
+  durationMs?: number;
+  onRun?: () => void;
+}) {
+  return (
+    <div
+      data-slot="code-runner"
+      className={cn(
+        paper,
+        "flex w-full max-w-md flex-col overflow-hidden rounded-2xl",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2 px-3.5 py-2">
+        <span className={cn(mono, "text-foreground/35 min-w-0 flex-1")}>
+          {language}
+        </span>
+        {durationMs !== undefined && state !== "running" && (
+          <span
+            className={cn(mono, "text-foreground/30 shrink-0 tabular-nums")}
+          >
+            {durationMs}ms
+          </span>
+        )}
+        {onRun && (
+          <button
+            type="button"
+            aria-label="Run this snippet"
+            onClick={onRun}
+            disabled={state === "running"}
+            className={cn(
+              ghostButton,
+              "size-7 shrink-0 disabled:pointer-events-none",
+            )}
+          >
+            {state === "running" ? (
+              <Loader2Icon className="size-3.5 animate-spin motion-reduce:animate-none" />
+            ) : (
+              <PlayIcon className="size-3.5 translate-x-px" />
+            )}
+          </button>
+        )}
+      </div>
+
+      <pre className={cn(codeScroll, "border-foreground/[0.07] border-t px-3.5 py-2.5 font-mono text-xs leading-relaxed")}>
+        <code className="text-foreground/75">{code}</code>
+      </pre>
+
+      {state !== "idle" && (
+        <div className="border-foreground/[0.07] fade-in animate-in flex flex-col border-t px-3.5 py-2.5 duration-300">
+          <span className={cn(mono, "text-foreground/30 pb-1")}>output</span>
+          <div className={codeScroll}>
+            <div className={cn(codeSurface, "flex flex-col")}>
+              {output.map((line, index) => (
+                <span
+                  key={`${index}-${line}`}
+                  className={cn(
+                    "fade-in animate-in fill-mode-both font-mono text-xs leading-relaxed whitespace-pre",
+                    state === "error"
+                      ? "text-red-600 dark:text-red-400"
+                      : "text-foreground/70",
+                  )}
+                  style={{ animationDelay: `${index * 80}ms` }}
+                >
+                  {line}
+                </span>
+              ))}
+            </div>
+          </div>
+          {state === "running" && (
+            <span
+              aria-hidden
+              className="bg-foreground/40 h-[1em] w-[2px] animate-pulse rounded-full motion-reduce:animate-none"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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,19 +1,30 @@
+import {
+  TextMessagePartProvider,
+  useMessagePartText,
+  useSmooth,
+  type SmoothOptions,
+} from "@assistant-ui/react";
 import { memo, useMemo, type ReactNode } from "react";
-import ReactMarkdown, { type Components } from "react-markdown";
-import remarkGfm from "remark-gfm";
+import {
+  defaultRehypePlugins,
+  Streamdown,
+  type Components,
+  type StreamdownProps,
+} from "streamdown";
 
 /**
- * 从 cloudflare-os-main 的 `MarkdownMessage` 拷来。
- * 删掉的部分:capsule / format 提及的 remark 插件 —— 那是 gadgets 的资源体系,
- * UIMessage 协议里没有对应概念,留着只会是死代码。
- * 保留的部分:skipHtml、remark-gfm、表格外包一层横向滚动、外链白名单 + target=_blank。
- * 加上的部分:resolveUrl —— 本仓的消息里会出现 `sandbox:/workspace/...` 这种
- * 只有宿主知道怎么翻译成可访问 URL 的地址,原来由 camel 的同名钩子负责。
+ * Streamdown 依然使用原生标签,避免它的默认 Tailwind 组件样式覆盖 cloud-os CSS。
+ * resolveUrl 负责把 `sandbox:/workspace/...` 翻译成可访问 URL。
  */
 
 export type CloudOsUrlResolver = (url: string) => string | null | undefined;
+export type CloudOsArtifactResolver = (url: string) => string | undefined;
 
 const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+const SMOOTH_STREAMING = {
+  maxCharsPerFrame: 12,
+  minCommitMs: 32,
+} satisfies SmoothOptions;
 
 export function safeExternalUrl(href: string | undefined): string | undefined {
   if (!href) return undefined;
@@ -25,54 +36,146 @@ export function safeExternalUrl(href: string | undefined): string | undefined {
   }
 }
 
-function buildComponents(resolveUrl?: CloudOsUrlResolver): Components {
-  const resolve = (url: string | undefined): string | undefined => {
-    if (!url) return undefined;
-    return resolveUrl?.(url) ?? url;
-  };
-  return {
-    table: ({ node: _node, children, ...props }) => (
-      <div style={{ maxWidth: "100%", overflowX: "auto" }}>
-        <table {...props}>{children}</table>
-      </div>
-    ),
-    img: ({ node: _node, src, ...props }) => {
-      const resolved = resolve(typeof src === "string" ? src : undefined);
-      return resolved ? <img {...props} src={resolved} /> : null;
-    },
-    a: ({ node: _node, href, children, ...props }) => {
-      const safeHref = safeExternalUrl(resolve(href));
-      if (!safeHref) return <>{children}</>;
-      return (
-        <a {...props} href={safeHref} target="_blank" rel="noopener noreferrer">
-          {children}
-        </a>
-      );
-    },
+const STREAMDOWN_REHYPE_PLUGINS = Object.values(
+  defaultRehypePlugins,
+) as NonNullable<StreamdownProps["rehypePlugins"]>;
+
+type UrlNode = {
+  type?: string;
+  properties?: Record<string, unknown>;
+  children?: UrlNode[];
+};
+
+function resolveUrlsPlugin(resolveUrl: CloudOsUrlResolver) {
+  return () => (tree: UrlNode) => {
+    const visit = (node: UrlNode): void => {
+      if (node.type === "element" && node.properties) {
+        for (const attribute of ["href", "src"]) {
+          const url = node.properties[attribute];
+          if (typeof url !== "string") continue;
+          const resolved = resolveUrl(url);
+          if (resolved === null) delete node.properties[attribute];
+          else if (resolved !== undefined) node.properties[attribute] = resolved;
+        }
+      }
+      node.children?.forEach(visit);
+    };
+    visit(tree);
   };
 }
 
-const REMARK_PLUGINS = [remarkGfm];
-const DEFAULT_COMPONENTS = buildComponents();
+const DEFAULT_COMPONENTS: Components = {
+  blockquote: "blockquote",
+  code: "code",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  hr: "hr",
+  li: "li",
+  ol: "ol",
+  p: "p",
+  pre: "pre",
+  section: "section",
+  strong: "strong",
+  sub: "sub",
+  sup: "sup",
+  table: "table",
+  tbody: "tbody",
+  td: "td",
+  th: "th",
+  thead: "thead",
+  tr: "tr",
+  ul: "ul",
+  img: ({ node: _node, src, ...props }) =>
+    src ? <img {...props} src={src} /> : null,
+  a: ({ node: _node, href, children, ...props }) => {
+    const safeHref = safeExternalUrl(href);
+    if (!safeHref) return <>{children}</>;
+    return (
+      <a {...props} href={safeHref} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    );
+  },
+};
 
 export const MarkdownMessage = memo(function MarkdownMessage({
   message,
   resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
+  streaming = false,
 }: {
   message: string;
   resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
+  streaming?: boolean;
 }): ReactNode {
-  const components = useMemo(
-    () => (resolveUrl ? buildComponents(resolveUrl) : DEFAULT_COMPONENTS),
+  return (
+    <TextMessagePartProvider text={message} isRunning={streaming}>
+      <MarkdownMessageContent
+        resolveUrl={resolveUrl}
+        resolveArtifactId={resolveArtifactId}
+        onOpenArtifact={onOpenArtifact}
+      />
+    </TextMessagePartProvider>
+  );
+});
+
+function MarkdownMessageContent({
+  resolveUrl,
+  resolveArtifactId,
+  onOpenArtifact,
+}: {
+  resolveUrl?: CloudOsUrlResolver;
+  resolveArtifactId?: CloudOsArtifactResolver;
+  onOpenArtifact?: (artifactId: string) => void;
+}) {
+  const part = useSmooth(useMessagePartText(), SMOOTH_STREAMING);
+  const streaming = part.status.type === "running";
+  const rehypePlugins = useMemo(
+    () =>
+      resolveUrl
+        ? [resolveUrlsPlugin(resolveUrl), ...STREAMDOWN_REHYPE_PLUGINS]
+        : STREAMDOWN_REHYPE_PLUGINS,
     [resolveUrl],
   );
+  const components = useMemo<Components>(() => ({
+    ...DEFAULT_COMPONENTS,
+    img: ({ node: _node, src, alt, ...props }) => {
+      if (!src) return null;
+      const image = <img {...props} src={src} alt={alt} />;
+      const artifactId = resolveArtifactId?.(src);
+      return artifactId && onOpenArtifact
+        ? (
+          <button
+            type="button"
+            onClick={() => onOpenArtifact(artifactId)}
+            aria-label={`Open ${alt || "image"} in Creation View`}
+            className="inline-block max-w-full cursor-pointer rounded-xl align-bottom focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
+          >
+            {image}
+          </button>
+        )
+        : image;
+    },
+  }), [onOpenArtifact, resolveArtifactId]);
   return (
-    <ReactMarkdown
+    <Streamdown
+      animated={false}
+      className="space-y-0"
+      controls={false}
+      mode={streaming ? "streaming" : "static"}
+      isAnimating={streaming}
+      rehypePlugins={rehypePlugins}
       skipHtml
-      remarkPlugins={REMARK_PLUGINS}
       components={components}
     >
-      {message}
-    </ReactMarkdown>
+      {part.text}
+    </Streamdown>
   );
-});
+}

package/cloud-os/chat/range.ts

@@ -0,0 +1,8 @@
+export function clamp(value: number, min: number, max: number) {
+  if (Number.isNaN(value)) return min;
+  return Math.min(max, Math.max(min, value));
+}
+
+export function take<T>(items: readonly T[], count: number) {
+  return items.slice(0, Math.floor(clamp(count, 0, items.length)));
+}