@springbrand/message-panel 0.1.3-alpha.2 → 0.1.3-alpha.22

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,54 +25,99 @@ 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,
+  streaming = false,
 }: {
   message: string;
   resolveUrl?: CloudOsUrlResolver;
+  streaming?: boolean;
 }): 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={streaming ? "streaming" : "static"}
+      isAnimating={streaming}
+      rehypePlugins={rehypePlugins}
       skipHtml
-      remarkPlugins={REMARK_PLUGINS}
-      components={components}
+      components={DEFAULT_COMPONENTS}
     >
       {message}
-    </ReactMarkdown>
+    </Streamdown>
   );
 });