wtfai 1.6.8 → 1.7.0

package/README.md

@@ -219,6 +219,49 @@ SDK 会自动将其渲染为一个美观的“药丸状”卡片按钮，包含
 
 点击该卡片会触发 `contentAction` 事件，`type` 为 `'workflow'`。
 
+#### 3. 内容包装器 (contentWrapper)
+
+`WorkflowRegistry` 支持 `contentWrapper` 属性，允许开发者在渲染 Markdown 内容前对其进行包装或增强。目前支持对 `code` 块进行包装。
+
+**配置类型**：
+
+```typescript
+export type ContentWrapperConfig = {
+  code?: (
+    props: ComponentProps, // props 包含 lang, children, streamStatus 等
+  ) => ((children: ReactNode) => ReactNode) | null | undefined | false
+}
+```
+
+**使用示例**：
+
+比如，你想给所有的 `html:run` 类型的代码预览块增加一个自定义的消息提示：
+
+```tsx
+import { WorkflowRegistry } from 'wtfai';
+
+<WorkflowRegistry
+  contentWrapper={{
+    code: (props) => {
+      // 只有特定语言才进行包装
+      if (props.lang === 'html:run') {
+        return (children) => (
+          <div className="my-custom-wrapper">
+            <div className="wrapper-header">这是我自定义加的内容</div>
+            {children}
+          </div>
+        )
+      }
+      return false // 返回 false 表示不包装，由 SDK 按默认方式渲染
+    },
+  }}
+>
+  <ChatPage />
+</WorkflowRegistry>
+```
+
+这种机制非常适合在不修改 SDK 源码的前提下，为特定类型的内容增加业务相关的 UI 装饰（如操作按钮、免责声明、权限校验提示等）。
+
 **最佳实践（推荐组合）**
 
 1. **打字机效果**：使用 `token` 拼接流式内容。

package/dist/iframe-bridge.js

@@ -76,6 +76,9 @@ class IframeBridgeHost {
             } else if ('clearCollection' === method) {
                 const [collection] = params;
                 result = await this.session.clearCollection(collection);
+            } else if ('fetch' === method) {
+                const [url, options] = params;
+                result = await this.session.fetch(url, options);
             } else {
                 const userMethods = this.session.getIframeMethods();
                 const fn = userMethods[method];
@@ -107,7 +110,8 @@ class IframeBridgeHost {
             'updateRecord',
             'deleteRecord',
             'listRecords',
-            'clearCollection'
+            'clearCollection',
+            'fetch'
         ];
         if (builtIns.includes(methodName)) return true;
         const userMethods = this.session.getIframeMethods();

package/dist/session.d.ts

@@ -129,6 +129,12 @@ export declare class WorkflowSession {
      * @returns 执行结果的所有消息
      */
     executeWorkflow(workflowId: string, input: SendInput): Promise<SimpleMessage[]>;
+    /**
+     * 通用的 fetch 方法，支持调用后端 API
+     * @param url 请求地址，如果是相对路径则会自动拼接 baseUrl
+     * @param options 请求配置
+     */
+    fetch(url: string, options?: RequestInit): Promise<any>;
     /**
      * 发送消息执行工作流
      */

package/dist/session.js

@@ -346,6 +346,22 @@ class WorkflowSession {
             }, this.headers).catch(reject);
         });
     }
+    async fetch(url, options = {}) {
+        this.assertNotDisposed();
+        const fullUrl = url.startsWith('http') ? url : `${this.baseUrl}${url}`;
+        const response = await fetch(fullUrl, {
+            ...options,
+            headers: {
+                ...this.headers,
+                ...options.headers
+            }
+        });
+        if (!response.ok) {
+            const errorData = await response.json().catch(()=>({}));
+            throw new Error(errorData.message || errorData.error || `Fetch failed with status ${response.status}`);
+        }
+        return response.json();
+    }
     async send({ parts: inputParts, ...rest }) {
         this.assertNotDisposed();
         if (this.state.isExecuting) throw new Error('工作流正在执行中');

package/dist/ui/code.css

@@ -1,51 +1,7 @@
-.iframe-code {
+.iframe-code, .html-preview-iframe {
   aspect-ratio: 16 / 9;
   border: none;
   min-width: 50vw;
   display: block;
 }
 
-.html-preview-container {
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  width: 100%;
-  min-width: min(900px, 100%);
-  margin: 20px 0;
-  transition: all .3s cubic-bezier(.4, 0, .2, 1);
-  overflow: hidden;
-  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
-}
-
-.html-preview-container:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
-}
-
-.html-preview-header {
-  color: #374151;
-  background: #fdfdfd;
-  border-bottom: 1px solid #f3f4f6;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  display: flex;
-}
-
-.html-preview-header .preview-label {
-  color: #2563eb;
-  align-items: center;
-  gap: 8px;
-  display: flex;
-}
-
-.html-preview-iframe {
-  background: #fff;
-  border: none;
-  width: 100%;
-  min-height: 500px;
-  display: block;
-}
-

package/dist/ui/code.js

@@ -1,19 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { CodeHighlighter, Mermaid } from "@ant-design/x";
-import { EyeOutlined, LoadingOutlined } from "@ant-design/icons";
 import { jsonrepair } from "jsonrepair";
-import { useWorkflowSession } from "./context.js";
+import { useWorkflowRegistry, useWorkflowSession } from "./context.js";
 import { IframeBridgeHost } from "../iframe-bridge.js";
 import "./code.css";
+import clsx from "clsx";
 const Code = (props)=>{
-    var _className_match;
-    const { className, children, streamStatus, lang: infoString } = props;
-    const fullLang = infoString || (null == className ? void 0 : null == (_className_match = className.match(/language-([\w:-]+)/)) ? void 0 : _className_match[1]) || '';
-    const lang = fullLang.split(':')[0];
+    const { children, streamStatus, lang } = props;
     const session = useWorkflowSession();
     const iframeRef = useRef(null);
     const bridgeRef = useRef(null);
+    const { contentWrapper } = useWorkflowRegistry();
     useEffect(()=>{
         if (session && iframeRef.current) {
             if (!bridgeRef.current) bridgeRef.current = new IframeBridgeHost(session);
@@ -26,13 +24,14 @@ const Code = (props)=>{
     }, [
         session
     ]);
-    if ('string' != typeof children) return null;
-    if ('mermaid' === lang) return /*#__PURE__*/ jsx(Mermaid, {
+    let node = null;
+    if ('string' != typeof children) node = null;
+    else if ('mermaid' === lang) node = /*#__PURE__*/ jsx(Mermaid, {
         children: children
     });
-    if ('tmpl' === lang) try {
+    else if ('tmpl' === lang) try {
         const json = JSON.parse(jsonrepair(children));
-        if ('iframe' === json.type) return /*#__PURE__*/ jsx("iframe", {
+        if ('iframe' === json.type) node = /*#__PURE__*/ jsx("iframe", {
             ref: iframeRef,
             src: json.data.src,
             className: "iframe-code",
@@ -40,44 +39,24 @@ const Code = (props)=>{
             allow: "clipboard-read; clipboard-write; camera; microphone"
         });
     } catch  {}
-    if ('html:run' === fullLang) {
+    else if ('html:run' === lang) {
         const isLoading = 'loading' === streamStatus;
-        return /*#__PURE__*/ jsxs("div", {
-            className: "html-preview-container",
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: "html-preview-header",
-                    children: [
-                        /*#__PURE__*/ jsxs("div", {
-                            className: "preview-label",
-                            children: [
-                                /*#__PURE__*/ jsx(EyeOutlined, {}),
-                                /*#__PURE__*/ jsx("span", {
-                                    children: "预览"
-                                })
-                            ]
-                        }),
-                        isLoading && /*#__PURE__*/ jsx(LoadingOutlined, {
-                            spin: true,
-                            className: "loading-icon",
-                            style: {
-                                color: '#3b82f6'
-                            }
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx("iframe", {
-                    srcDoc: children,
-                    className: "html-preview-iframe",
-                    title: "HTML Preview",
-                    sandbox: "allow-scripts allow-forms allow-popups"
-                })
-            ]
+        node = /*#__PURE__*/ jsx("iframe", {
+            srcDoc: children,
+            className: clsx('html-preview-iframe', {
+                'html-preview-iframe-loading': isLoading
+            }),
+            title: "HTML Preview",
+            sandbox: "allow-scripts allow-forms allow-popups"
         });
-    }
-    return /*#__PURE__*/ jsx(CodeHighlighter, {
+    } else node = /*#__PURE__*/ jsx(CodeHighlighter, {
         lang: lang,
         children: children
     });
+    if (null == contentWrapper ? void 0 : contentWrapper.code) {
+        const result = contentWrapper.code(props);
+        if (false !== result && null != result) return result(node);
+    }
+    return node;
 };
 export { Code };

package/dist/ui/context.d.ts

@@ -1,17 +1,28 @@
+import { ReactNode } from 'react';
 import type { WorkflowSession } from '../session';
+import { type ComponentProps } from '@ant-design/x-markdown';
 export interface WorkflowInfoMapping {
     name: string;
     icon?: React.ReactNode;
     /** 额外的信息，会在点击的时候透传给调用方，方便使用 */
     extra?: Record<string, any>;
 }
+export type ContentWrapperConfig = {
+    code?: (props: ComponentProps) => ((children: ReactNode) => ReactNode) | null | undefined | false;
+};
 export declare const SessionContext: import("react").Context<WorkflowSession | null>;
-export declare const WorkflowRegistryContext: import("react").Context<Record<string, WorkflowInfoMapping>>;
+export declare const WorkflowRegistryContext: import("react").Context<{
+    mapping?: Record<string, WorkflowInfoMapping>;
+    contentWrapper?: ContentWrapperConfig;
+}>;
 export declare const MarkdownContext: import("react").Context<{
     isStreaming?: boolean;
 }>;
 export declare const useWorkflowSession: () => WorkflowSession | null;
-export declare const useWorkflowRegistry: () => Record<string, WorkflowInfoMapping>;
+export declare const useWorkflowRegistry: () => {
+    mapping?: Record<string, WorkflowInfoMapping>;
+    contentWrapper?: ContentWrapperConfig;
+};
 export declare const useMarkdownContext: () => {
     isStreaming?: boolean;
 };

package/dist/ui/context.js

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
-const SessionContext = createContext(null);
-const WorkflowRegistryContext = createContext({});
-const MarkdownContext = createContext({
+const SessionContext = /*#__PURE__*/ createContext(null);
+const WorkflowRegistryContext = /*#__PURE__*/ createContext({});
+const MarkdownContext = /*#__PURE__*/ createContext({
     isStreaming: false
 });
 const useWorkflowSession = ()=>useContext(SessionContext);

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 } from './context';
+import { WorkflowInfoMapping, ContentWrapperConfig } from './context';
 import type { WorkflowSession } from '../session';
 export interface MarkdownProps extends XMarkdownProps {
     session?: WorkflowSession;
@@ -9,8 +9,15 @@ export interface MarkdownProps extends XMarkdownProps {
 /**
  * 工作流信息注册表提供者
  */
-export declare const WorkflowRegistry: ({ children, mapping, }: {
+export declare const WorkflowRegistry: ({ children, mapping, contentWrapper, }: {
     children: React.ReactNode;
-    mapping: Record<string, WorkflowInfoMapping>;
+    /**
+     * 工作流信息映射，控制工作流跳转 a 标签的样式
+     */
+    mapping?: Record<string, WorkflowInfoMapping>;
+    /**
+     * 内容包装器，对渲染的内容进行包装
+     */
+    contentWrapper?: ContentWrapperConfig;
 }) => 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,16 +9,23 @@ 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 })=>{
+const WorkflowRegistry = ({ children, mapping, contentWrapper })=>{
     const parentRegistry = useWorkflowRegistry();
     const mergedRegistry = {
-        ...parentRegistry,
+        ...parentRegistry.mapping,
         ...mapping
     };
+    const mergedContentWrapper = {
+        ...parentRegistry.contentWrapper,
+        ...contentWrapper
+    };
     return /*#__PURE__*/ jsx(SessionContext.Provider, {
         value: null,
         children: /*#__PURE__*/ jsx(WorkflowRegistryContext.Provider, {
-            value: mergedRegistry,
+            value: {
+                mapping: mergedRegistry,
+                contentWrapper: mergedContentWrapper
+            },
             children: children
         })
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wtfai",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "type": "module",
   "exports": {
     ".": {
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
-    "@ant-design/x": "^2.3.0",
-    "@ant-design/x-markdown": "^2.3.0",
+    "@ant-design/x": "^2.4.0",
+    "@ant-design/x-markdown": "^2.4.0",
     "@microsoft/fetch-event-source": "^2.0.1",
     "clsx": "^2.1.1",
     "compressorjs": "^1.2.1",