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

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

@@ -0,0 +1,78 @@
+import { memo, useMemo, type ReactNode } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+/**
+ * 从 cloudflare-os-main 的 `MarkdownMessage` 拷来。
+ * 删掉的部分:capsule / format 提及的 remark 插件 —— 那是 gadgets 的资源体系,
+ * UIMessage 协议里没有对应概念,留着只会是死代码。
+ * 保留的部分:skipHtml、remark-gfm、表格外包一层横向滚动、外链白名单 + target=_blank。
+ * 加上的部分:resolveUrl —— 本仓的消息里会出现 `sandbox:/workspace/...` 这种
+ * 只有宿主知道怎么翻译成可访问 URL 的地址,原来由 camel 的同名钩子负责。
+ */
+
+export type CloudOsUrlResolver = (url: string) => string | null | undefined;
+
+const ALLOWED_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+
+export function safeExternalUrl(href: string | undefined): string | undefined {
+  if (!href) return undefined;
+  try {
+    const url = new URL(href, "https://cloud-os.invalid");
+    return ALLOWED_PROTOCOLS.has(url.protocol) ? href : undefined;
+  } catch {
+    return 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 REMARK_PLUGINS = [remarkGfm];
+const DEFAULT_COMPONENTS = buildComponents();
+
+export const MarkdownMessage = memo(function MarkdownMessage({
+  message,
+  resolveUrl,
+}: {
+  message: string;
+  resolveUrl?: CloudOsUrlResolver;
+}): ReactNode {
+  const components = useMemo(
+    () => (resolveUrl ? buildComponents(resolveUrl) : DEFAULT_COMPONENTS),
+    [resolveUrl],
+  );
+  return (
+    <ReactMarkdown
+      skipHtml
+      remarkPlugins={REMARK_PLUGINS}
+      components={components}
+    >
+      {message}
+    </ReactMarkdown>
+  );
+});