@springbrand/message-panel 0.1.3-alpha.19 → 0.1.3-alpha.21

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

@@ -1,14 +1,14 @@
 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;
@@ -25,35 +25,71 @@ 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,
@@ -62,17 +98,23 @@ export const MarkdownMessage = memo(function MarkdownMessage({
   message: string;
   resolveUrl?: CloudOsUrlResolver;
 }): ReactNode {
-  const components = useMemo(
-    () => (resolveUrl ? buildComponents(resolveUrl) : DEFAULT_COMPONENTS),
+  const rehypePlugins = useMemo(
+    () =>
+      resolveUrl
+        ? [resolveUrlsPlugin(resolveUrl), ...STREAMDOWN_REHYPE_PLUGINS]
+        : STREAMDOWN_REHYPE_PLUGINS,
     [resolveUrl],
   );
   return (
-    <ReactMarkdown
+    <Streamdown
+      className="space-y-0"
+      controls={false}
+      mode="static"
+      rehypePlugins={rehypePlugins}
       skipHtml
-      remarkPlugins={REMARK_PLUGINS}
-      components={components}
+      components={DEFAULT_COMPONENTS}
     >
       {message}
-    </ReactMarkdown>
+    </Streamdown>
   );
 });

package/cloud-os/chat/tool-presentation.ts

@@ -298,7 +298,8 @@ export function getToolCallSummary(call: CloudOsToolCall): {
       return { verb: running ? "Editing" : "Edited", target: filename || undefined };
     case "bash": {
       const command =
-        stringField(input, "description") || stringField(input, "command", "cmd");
+        stringField(input, "description") ||
+        stringField(input, "script", "command", "cmd");
       return {
         verb: running ? "Running" : "Ran",
         target: command ? truncate(command, 60) : undefined,

package/cloud-os/chat/transcript-model.ts

@@ -447,6 +447,7 @@ function assistantBlocks(
     }
 
     if (call.kind === "ask-user") {
+      if (call.failed) return;
       flush();
       blocks.push({
         kind: "askUser",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.1.3-alpha.19",
+  "version": "0.1.3-alpha.21",
   "type": "module",
   "files": [
     "src",
@@ -33,8 +33,6 @@
     "lucide-react": "^1.24.0",
     "motion": "^13.1.0",
     "radix-ui": "^1.6.2",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
     "streamdown": "^2.5.0",
     "thinking-orbs": "0.2.0",
     "use-stick-to-bottom": "^1.1.6"

package/src/camel/camel-tool-presentation.tsx

@@ -383,7 +383,7 @@ function summaryFor(
         complete: "Edited",
       });
     case "bash": {
-      const command = stringField(input, "command", "cmd");
+      const command = stringField(input, "script", "command", "cmd");
       const description = stringField(input, "description");
       const label = description || truncate(command || "command", 30);
       return running
@@ -818,7 +818,7 @@ function EditDetails({ presentation }: CamelToolDetailsProps) {
 
 function BashDetails({ presentation }: CamelToolDetailsProps) {
   const { input, output, outputText } = presentation;
-  const command = stringField(input, "command", "cmd");
+  const command = stringField(input, "script", "command", "cmd");
   const outputRecord = recordOf(output);
   const parsedFromText = (() => {
     if (!outputText.trim().startsWith("{")) return {};