wtfai 1.8.6 → 1.8.8

package/README.md

@@ -262,6 +262,76 @@ import { WorkflowRegistry } from 'wtfai';
 
 这种机制非常适合在不修改 SDK 源码的前提下，为特定类型的内容增加业务相关的 UI 装饰（如操作按钮、免责声明、权限校验提示等）。
 
+#### 4. 消息导出
+
+SDK 提供 `exportMessages` 用于导出当前会话消息，并会把 Mermaid 等图表内容导出为图片数据。导出结果不会自动下载文件；如需生成文件内容，可使用 `createExportedMessagesBlob` 得到 `Blob`，后续上传、保存或下载由宿主应用自行决定。
+
+**配置导出上下文**
+
+导出需要知道消息数据和对应的 Markdown 容器 DOM。通常在渲染消息列表的外层传入 `exportConfig`：
+
+```tsx
+import { useRef } from 'react'
+import {
+  WorkflowRegistry,
+  exportMessages,
+  createExportedMessagesBlob,
+  type WorkflowExportConfig,
+} from 'wtfai'
+
+const messageListRef = useRef<HTMLDivElement>(null)
+
+const exportConfig: WorkflowExportConfig = {
+  containerRef: messageListRef,
+  messages,
+}
+
+async function handleExport() {
+  const payload = await exportMessages(exportConfig)
+  const blob = createExportedMessagesBlob(payload)
+
+  // SDK 只返回数据，不假设业务如何消费。
+  // 下面仅演示浏览器下载，实际也可以上传到服务器或写入 IndexedDB。
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `chat-export-${Date.now()}.json`
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+return (
+  <div ref={messageListRef}>
+    <WorkflowRegistry exportConfig={exportConfig}>
+      <MessageList messages={messages} />
+    </WorkflowRegistry>
+  </div>
+)
+```
+
+**导出结果结构**
+
+每条消息会保留原始内容，同时提供一个普通 Markdown 渲染器可直接展示的内容字段：
+
+```typescript
+type ExportedMessage = {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  renderableContent: string
+  attachments?: unknown
+  chartImages: Array<{
+    kind: string
+    format: 'png'
+    dataUrl: string
+  }>
+}
+```
+
+- `content`：原始消息内容，不做修改。
+- `renderableContent`：可直接渲染的 Markdown 内容。SDK 会把已成功导出的 Mermaid 等代码块替换为 Markdown 图片标记，图片地址为 base64 data URL。
+- `chartImages`：结构化的图表图片数据，便于业务侧单独存储、上传或二次处理。
+
 **最佳实践（推荐组合）**
 
 1. **打字机效果**：使用 `token` 拼接流式内容。

package/dist/adapters/mermaid.d.ts

@@ -0,0 +1,2 @@
+import type { ChartExportAdapter } from '../export';
+export declare function createMermaidChartExportAdapter(): ChartExportAdapter;

package/dist/adapters/mermaid.js

@@ -0,0 +1,101 @@
+const DEFAULT_SVG_WIDTH = 800;
+const DEFAULT_SVG_HEIGHT = 600;
+let mermaidRenderId = 0;
+let mermaidInitialized = false;
+function parseSvgDimension(value) {
+    if (!value) return null;
+    const numeric = Number.parseFloat(value);
+    return Number.isFinite(numeric) && numeric > 0 ? numeric : null;
+}
+function getSvgSize(svg) {
+    const rect = svg.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) return {
+        width: rect.width,
+        height: rect.height
+    };
+    const viewBox = svg.getAttribute('viewBox');
+    if (viewBox) {
+        const parts = viewBox.trim().split(/[\s,]+/).map((part)=>Number.parseFloat(part));
+        if (4 === parts.length && Number.isFinite(parts[2]) && Number.isFinite(parts[3]) && parts[2] > 0 && parts[3] > 0) return {
+            width: parts[2],
+            height: parts[3]
+        };
+    }
+    const width = parseSvgDimension(svg.getAttribute('width'));
+    const height = parseSvgDimension(svg.getAttribute('height'));
+    return {
+        width: null != width ? width : DEFAULT_SVG_WIDTH,
+        height: null != height ? height : DEFAULT_SVG_HEIGHT
+    };
+}
+async function svgToPngDataUrl(svgElement) {
+    const svgString = new XMLSerializer().serializeToString(svgElement);
+    const { width, height } = getSvgSize(svgElement);
+    const dpr = window.devicePixelRatio || 1;
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.floor(width * dpr));
+    canvas.height = Math.max(1, Math.floor(height * dpr));
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('Cannot create 2D canvas context');
+    ctx.scale(dpr, dpr);
+    const img = new Image();
+    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+    await new Promise((resolve, reject)=>{
+        img.onload = ()=>{
+            ctx.drawImage(img, 0, 0, width, height);
+            resolve();
+        };
+        img.onerror = ()=>{
+            reject(new Error('Failed to load SVG data into Image'));
+        };
+        img.src = dataUrl;
+    });
+    return canvas.toDataURL('image/png', 1);
+}
+async function renderMermaidSourceToSvg(source) {
+    var _module_default;
+    const module = await import("mermaid");
+    const mermaid = null != (_module_default = module.default) ? _module_default : module;
+    if (!mermaidInitialized) {
+        var _mermaid_initialize;
+        null == (_mermaid_initialize = mermaid.initialize) || _mermaid_initialize.call(mermaid, {
+            startOnLoad: false
+        });
+        mermaidInitialized = true;
+    }
+    const renderId = `wtfai-mermaid-export-${Date.now()}-${mermaidRenderId++}`;
+    const container = document.createElement('div');
+    container.style.position = 'fixed';
+    container.style.left = '-10000px';
+    container.style.top = '0';
+    container.style.visibility = 'hidden';
+    document.body.appendChild(container);
+    try {
+        const result = await mermaid.render(renderId, source, container);
+        const doc = new DOMParser().parseFromString(result.svg, 'image/svg+xml');
+        const svg = doc.querySelector('svg');
+        if (!svg) throw new Error('Mermaid render result did not include an SVG');
+        return document.importNode(svg, true);
+    } finally{
+        container.remove();
+    }
+}
+function createMermaidChartExportAdapter() {
+    return {
+        kind: 'mermaid',
+        toImage: async ({ block })=>{
+            const source = block.dataset.exportSource;
+            const svg = source ? await renderMermaidSourceToSvg(source) : block.querySelector('svg');
+            if (!svg) return null;
+            const dataUrl = await svgToPngDataUrl(svg);
+            return {
+                kind: 'mermaid',
+                format: 'png',
+                dataUrl
+            };
+        }
+    };
+}
+export { createMermaidChartExportAdapter };

package/dist/export.d.ts

@@ -0,0 +1,51 @@
+export type ChartExportKind = 'mermaid' | 'iframe' | 'html-run' | string;
+import type { WorkflowExportConfig } from './ui/context';
+export { createMermaidChartExportAdapter } from './adapters/mermaid';
+export interface ChartImageExport {
+    kind: ChartExportKind;
+    format: 'png';
+    dataUrl: string;
+}
+export interface ChartExportAdapterContext {
+    block: HTMLElement;
+    messageNode: HTMLElement;
+    messageId: string;
+}
+export interface ChartExportAdapter {
+    kind: ChartExportKind;
+    toImage: ((context: ChartExportAdapterContext) => Promise<ChartImageExport | null>) | ((context: ChartExportAdapterContext) => ChartImageExport | null);
+}
+export interface MessageExportOptions {
+    adapters?: ChartExportAdapter[];
+    includeDefaultAdapters?: boolean;
+    markdownRootSelector?: string;
+    debug?: boolean;
+    logger?: (message: string, extra?: unknown) => void;
+    onAdapterError?: (error: unknown, context: ChartExportAdapterContext, adapter: ChartExportAdapter) => void;
+}
+export interface MessageExportInput {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    attachments?: unknown;
+}
+export interface ExportedMessage<T extends MessageExportInput> {
+    id: string;
+    role: T['role'];
+    content: string;
+    renderableContent: string;
+    attachments: T['attachments'];
+    chartImages: ChartImageExport[];
+}
+export interface ExportedMessagePayload<T extends MessageExportInput> {
+    exportedAt: string;
+    schemaVersion: 1;
+    messages: Array<ExportedMessage<T>>;
+}
+export declare function exportMessagesWithCharts<T extends MessageExportInput>(messages: T[], container: HTMLElement, options?: MessageExportOptions): Promise<ExportedMessagePayload<T>>;
+export declare function exportMessages<T extends MessageExportInput>(exportConfig?: WorkflowExportConfig<T>, overrides?: {
+    messages?: T[];
+    container?: HTMLElement | null;
+    options?: MessageExportOptions;
+}): Promise<ExportedMessagePayload<T>>;
+export declare function createExportedMessagesBlob<T extends MessageExportInput>(payload: ExportedMessagePayload<T>): Blob;

package/dist/export.js

@@ -0,0 +1,160 @@
+import { createMermaidChartExportAdapter } from "./adapters/mermaid.js";
+const DEFAULT_MARKDOWN_ROOT_SELECTOR = '.sdk-markdown-root';
+const defaultAdapters = [
+    createMermaidChartExportAdapter()
+];
+function createAdapterMap(options) {
+    var _options_adapters;
+    const map = new Map();
+    if ((null == options ? void 0 : options.includeDefaultAdapters) !== false) defaultAdapters.forEach((adapter)=>{
+        map.set(adapter.kind, adapter);
+    });
+    null == options || null == (_options_adapters = options.adapters) || _options_adapters.forEach((adapter)=>{
+        map.set(adapter.kind, adapter);
+    });
+    return map;
+}
+function logExport(options, message, extra) {
+    if (!(null == options ? void 0 : options.debug)) return;
+    if (options.logger) return void options.logger(message, extra);
+    if (void 0 !== extra) console.log(`[wtfai/export] ${message}`, extra);
+    else console.log(`[wtfai/export] ${message}`);
+}
+function buildAssistantMessageNodeQueue(container, selector) {
+    return Array.from(container.querySelectorAll(selector));
+}
+function normalizeCodeBlockKind(info) {
+    const lang = info.trim().split(/\s+/)[0];
+    if (!lang) return null;
+    if ('html:run' === lang) return 'html-run';
+    return lang;
+}
+function chartKindToAlt(kind) {
+    if ('mermaid' === kind) return 'Mermaid chart';
+    return `${kind} chart`;
+}
+function createMarkdownImage(image) {
+    return `![${chartKindToAlt(image.kind)}](${image.dataUrl})`;
+}
+function createRenderableContent(content, chartImages) {
+    if (0 === chartImages.length) return content;
+    let imageIndex = 0;
+    return content.replace(/(^|\n)([ \t]*)(`{3,}|~{3,})([^\r\n]*)\r?\n[\s\S]*?\r?\n[ \t]*\3[ \t]*(?=\r?\n|$)/g, (match, prefix, indent, _fence, info)=>{
+        const kind = normalizeCodeBlockKind(info);
+        if (!kind) return match;
+        const nextImageIndex = chartImages.findIndex((image, index)=>index >= imageIndex && image.kind === kind);
+        if (nextImageIndex < 0) return match;
+        const image = chartImages[nextImageIndex];
+        imageIndex = nextImageIndex + 1;
+        return `${prefix}${indent}${createMarkdownImage(image)}`;
+    });
+}
+async function exportChartsFromMessageNode(messageNode, messageId, adapterMap, options) {
+    const blocks = Array.from(messageNode.querySelectorAll('[data-export-block="true"]'));
+    logExport(options, 'scan export blocks', {
+        messageId,
+        blockCount: blocks.length
+    });
+    const images = await Promise.all(blocks.map(async (block)=>{
+        const kind = block.dataset.exportKind;
+        if (!kind) {
+            logExport(options, 'skip block without export kind', {
+                messageId
+            });
+            return null;
+        }
+        const adapter = adapterMap.get(kind);
+        if (!adapter) {
+            logExport(options, 'skip block without adapter', {
+                messageId,
+                kind
+            });
+            return null;
+        }
+        const context = {
+            block,
+            messageNode,
+            messageId
+        };
+        try {
+            const result = await adapter.toImage(context);
+            logExport(options, 'adapter execution completed', {
+                messageId,
+                kind,
+                success: !!result
+            });
+            return result;
+        } catch (error) {
+            var _options_onAdapterError;
+            logExport(options, 'adapter execution failed', {
+                messageId,
+                kind,
+                error
+            });
+            null == options || null == (_options_onAdapterError = options.onAdapterError) || _options_onAdapterError.call(options, error, context, adapter);
+            return null;
+        }
+    }));
+    return images.filter((item)=>null !== item);
+}
+async function exportMessagesWithCharts(messages, container, options) {
+    var _ref, _ref1;
+    const adapterMap = createAdapterMap(options);
+    logExport(options, 'start export messages', {
+        messageCount: messages.length,
+        adapterKinds: Array.from(adapterMap.keys())
+    });
+    const assistantMessageNodeQueue = buildAssistantMessageNodeQueue(container, null != (_ref = null == options ? void 0 : options.markdownRootSelector) ? _ref : DEFAULT_MARKDOWN_ROOT_SELECTOR);
+    logExport(options, 'assistant markdown roots found', {
+        count: assistantMessageNodeQueue.length,
+        selector: null != (_ref1 = null == options ? void 0 : options.markdownRootSelector) ? _ref1 : DEFAULT_MARKDOWN_ROOT_SELECTOR
+    });
+    let assistantNodeIndex = 0;
+    const exportedMessages = await Promise.all(messages.map(async (message)=>{
+        let messageNode;
+        if ('assistant' === message.role) {
+            messageNode = assistantMessageNodeQueue[assistantNodeIndex];
+            logExport(options, 'match assistant message to markdown root', {
+                messageId: message.id,
+                assistantNodeIndex,
+                matched: !!messageNode
+            });
+            assistantNodeIndex += 1;
+        } else logExport(options, 'skip non-assistant message for chart export', {
+            messageId: message.id,
+            role: message.role
+        });
+        const chartImages = messageNode ? await exportChartsFromMessageNode(messageNode, message.id, adapterMap, options) : [];
+        return {
+            id: message.id,
+            role: message.role,
+            content: message.content,
+            renderableContent: createRenderableContent(message.content, chartImages),
+            attachments: message.attachments,
+            chartImages
+        };
+    }));
+    return {
+        exportedAt: new Date().toISOString(),
+        schemaVersion: 1,
+        messages: exportedMessages
+    };
+}
+async function exportMessages(exportConfig, overrides) {
+    var _ref, _ref1, _ref2;
+    var _exportConfig_containerRef;
+    const messages = null != (_ref = null == overrides ? void 0 : overrides.messages) ? _ref : null == exportConfig ? void 0 : exportConfig.messages;
+    const container = null != (_ref1 = null == overrides ? void 0 : overrides.container) ? _ref1 : null == exportConfig ? void 0 : null == (_exportConfig_containerRef = exportConfig.containerRef) ? void 0 : _exportConfig_containerRef.current;
+    const options = null != (_ref2 = null == overrides ? void 0 : overrides.options) ? _ref2 : null == exportConfig ? void 0 : exportConfig.options;
+    if (!messages) throw new Error('Messages are required for export');
+    if (!container) throw new Error('Export container is required for export');
+    return exportMessagesWithCharts(messages, container, options);
+}
+function createExportedMessagesBlob(payload) {
+    return new Blob([
+        JSON.stringify(payload, null, 2)
+    ], {
+        type: 'application/json;charset=utf-8'
+    });
+}
+export { createExportedMessagesBlob, createMermaidChartExportAdapter, exportMessages, exportMessagesWithCharts };

package/dist/index.d.ts

@@ -6,4 +6,5 @@ export { RealtimeService } from './realtime';
 export type { ClientConfig, SessionOptions, SessionState, SessionEventListeners, SendInput, UploadParams, UploadImageParams, CompressOptions, WorkflowInfo, ContentPart, ContentAction, } from './types';
 export type { SimpleMessage, Workflow, WorkflowConfig, RealtimeEvent, RealtimePresence, RealtimePushDto, } from '@our-llm/shared/types';
 export { Markdown, type MarkdownProps, WorkflowRegistry } from './ui/markdown';
-export type { WorkflowInfoMapping } from './ui/context';
+export type { WorkflowInfoMapping, WorkflowExportConfig } from './ui/context';
+export { exportMessages, createExportedMessagesBlob, createMermaidChartExportAdapter, type ChartImageExport, type ChartExportKind, type ChartExportAdapter, type ChartExportAdapterContext, type MessageExportInput, type MessageExportOptions, type ExportedMessage, type ExportedMessagePayload, } from './export';

package/dist/index.js

@@ -4,4 +4,5 @@ export { WorkflowSession } from "./session.js";
 export { UploadService } from "./upload.js";
 export { RealtimeService } from "./realtime.js";
 export { Markdown, WorkflowRegistry } from "./ui/markdown.js";
+export { createExportedMessagesBlob, createMermaidChartExportAdapter, exportMessages } from "./export.js";
 export default src;

package/dist/realtime.js

@@ -10,6 +10,7 @@ function _define_property(obj, key, value) {
     else obj[key] = value;
     return obj;
 }
+const REALTIME_RECONNECT_INTERVAL = 1000;
 class RealtimeService {
     async subscribe(topic, onEvent) {
         const deviceId = await getFingerprint();
@@ -35,6 +36,10 @@ class RealtimeService {
             },
             onerror (err) {
                 console.error('[SDK Realtime] Connection error', err);
+                return REALTIME_RECONNECT_INTERVAL;
+            },
+            onclose () {
+                throw new Error('[SDK Realtime] Connection closed; reconnecting');
             }
         });
         return {

package/dist/ui/code.js

@@ -25,22 +25,31 @@ const Code = (props)=>{
         session
     ]);
     let node = null;
+    let exportKind = null;
+    let exportSource = null;
     if ('string' != typeof children) node = null;
-    else if ('mermaid' === lang) node = /*#__PURE__*/ jsx(Mermaid, {
-        children: children
-    });
-    else if ('tmpl' === lang) try {
-        const json = JSON.parse(jsonrepair(children));
-        if ('iframe' === json.type) node = /*#__PURE__*/ jsx("iframe", {
-            ref: iframeRef,
-            src: json.data.src,
-            className: "iframe-code",
-            width: "100%",
-            allow: "clipboard-read; clipboard-write; camera; microphone"
+    else if ('mermaid' === lang) {
+        exportKind = 'mermaid';
+        exportSource = children;
+        node = /*#__PURE__*/ jsx(Mermaid, {
+            children: children
         });
+    } else if ('tmpl' === lang) try {
+        const json = JSON.parse(jsonrepair(children));
+        if ('iframe' === json.type) {
+            exportKind = 'iframe';
+            node = /*#__PURE__*/ jsx("iframe", {
+                ref: iframeRef,
+                src: json.data.src,
+                className: "iframe-code",
+                width: "100%",
+                allow: "clipboard-read; clipboard-write; camera; microphone"
+            });
+        }
     } catch  {}
     else if ('html:run' === lang) {
         const isLoading = 'loading' === streamStatus;
+        exportKind = 'html-run';
         node = /*#__PURE__*/ jsx("iframe", {
             srcDoc: children,
             className: clsx('html-preview-iframe', {
@@ -54,10 +63,17 @@ const Code = (props)=>{
         prismLightMode: true,
         children: children
     });
+    let renderedNode = node;
     if (null == contentWrapper ? void 0 : contentWrapper.code) {
         const result = contentWrapper.code(props);
-        if (false !== result && null != result) return result(node);
+        if (false !== result && null != result) renderedNode = result(node);
     }
-    return node;
+    if (exportKind) return /*#__PURE__*/ jsx("div", {
+        "data-export-block": "true",
+        "data-export-kind": exportKind,
+        "data-export-source": null != exportSource ? exportSource : void 0,
+        children: renderedNode
+    });
+    return renderedNode;
 };
 export { Code };

package/dist/ui/context.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import type { WorkflowSession } from '../session';
 import { type ComponentProps } from '@ant-design/x-markdown';
+import type { MessageExportInput, MessageExportOptions } from '../export';
 export interface WorkflowInfoMapping {
     name: string;
     icon?: React.ReactNode;
@@ -10,10 +11,16 @@ export interface WorkflowInfoMapping {
 export type ContentWrapperConfig = {
     code?: (props: ComponentProps) => ((children: ReactNode) => ReactNode) | null | undefined | false;
 };
+export interface WorkflowExportConfig<T extends MessageExportInput = MessageExportInput> {
+    containerRef?: React.RefObject<HTMLElement | null>;
+    messages?: T[];
+    options?: MessageExportOptions;
+}
 export declare const SessionContext: import("react").Context<WorkflowSession | null>;
 export declare const WorkflowRegistryContext: import("react").Context<{
     mapping?: Record<string, WorkflowInfoMapping>;
     contentWrapper?: ContentWrapperConfig;
+    exportConfig?: WorkflowExportConfig;
 }>;
 export declare const MarkdownContext: import("react").Context<{
     isStreaming?: boolean;
@@ -22,6 +29,7 @@ export declare const useWorkflowSession: () => WorkflowSession | null;
 export declare const useWorkflowRegistry: () => {
     mapping?: Record<string, WorkflowInfoMapping>;
     contentWrapper?: ContentWrapperConfig;
+    exportConfig?: WorkflowExportConfig;
 };
 export declare const useMarkdownContext: () => {
     isStreaming?: boolean;

package/dist/ui/markdown.d.ts

@@ -1,7 +1,7 @@
 import { XMarkdownProps } from '@ant-design/x-markdown';
 import '@ant-design/x-markdown/themes/light.css';
 import './markdown.css';
-import { WorkflowInfoMapping, ContentWrapperConfig } from './context';
+import { WorkflowInfoMapping, ContentWrapperConfig, WorkflowExportConfig } from './context';
 import type { WorkflowSession } from '../session';
 export interface MarkdownProps extends XMarkdownProps {
     session?: WorkflowSession;
@@ -9,7 +9,7 @@ export interface MarkdownProps extends XMarkdownProps {
 /**
  * 工作流信息注册表提供者
  */
-export declare const WorkflowRegistry: ({ children, mapping, contentWrapper, }: {
+export declare const WorkflowRegistry: ({ children, mapping, contentWrapper, exportConfig, }: {
     children: React.ReactNode;
     /**
      * 工作流信息映射，控制工作流跳转 a 标签的样式
@@ -19,5 +19,9 @@ export declare const WorkflowRegistry: ({ children, mapping, contentWrapper, }:
      * 内容包装器，对渲染的内容进行包装
      */
     contentWrapper?: ContentWrapperConfig;
+    /**
+     * 导出配置，可用于在 SDK 内统一管理导出参数
+     */
+    exportConfig?: WorkflowExportConfig;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const Markdown: ({ className, streaming, config, components, session, ...props }: MarkdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/markdown.js

@@ -9,7 +9,7 @@ import { Code } from "./code.js";
 import { XProvider } from "@ant-design/x";
 import "./markdown.css";
 import { MarkdownContext, SessionContext, WorkflowRegistryContext, useWorkflowRegistry } from "./context.js";
-const WorkflowRegistry = ({ children, mapping, contentWrapper })=>{
+const WorkflowRegistry = ({ children, mapping, contentWrapper, exportConfig })=>{
     const parentRegistry = useWorkflowRegistry();
     const mergedRegistry = {
         ...parentRegistry.mapping,
@@ -19,12 +19,17 @@ const WorkflowRegistry = ({ children, mapping, contentWrapper })=>{
         ...parentRegistry.contentWrapper,
         ...contentWrapper
     };
+    const mergedExportConfig = {
+        ...parentRegistry.exportConfig,
+        ...exportConfig
+    };
     return /*#__PURE__*/ jsx(SessionContext.Provider, {
         value: null,
         children: /*#__PURE__*/ jsx(WorkflowRegistryContext.Provider, {
             value: {
                 mapping: mergedRegistry,
-                contentWrapper: mergedContentWrapper
+                contentWrapper: mergedContentWrapper,
+                exportConfig: mergedExportConfig
             },
             children: children
         })
@@ -41,7 +46,7 @@ const Markdown = ({ className, streaming, config, components, session, ...props
                     isStreaming: !!(null == streaming ? void 0 : streaming.hasNextChunk)
                 },
                 children: /*#__PURE__*/ jsx(XMarkdown, {
-                    className: clsx(className, 'x-markdown-light'),
+                    className: clsx(className, 'x-markdown-light', 'sdk-markdown-root'),
                     streaming: {
                         ...streaming,
                         enableAnimation: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wtfai",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "type": "module",
   "exports": {
     ".": {
@@ -39,6 +39,7 @@
     "compressorjs": "^1.3.0",
     "cos-js-sdk-v5": "^1.10.1",
     "jsonrepair": "^3.14.0",
+    "mermaid": "^11.12.2",
     "uuid": "^13.0.2",
     "@our-llm/shared": "3.0.2"
   },