wtfai 1.4.4 → 1.5.0

package/README.md

@@ -256,6 +256,143 @@ console.log(state.isExecuting)
 session.abort()
 ```
 
+##### `setWorkflowVariables(values)`
+
+更新服务端会话变量。
+
+```typescript
+await session.setWorkflowVariables({
+  key: 'value',
+  userPreference: { theme: 'dark' }
+})
+```
+
+##### `getWorkflowVariables()`
+
+获取服务端会话变量。
+
+```typescript
+const vars = await session.getWorkflowVariables()
+console.log(vars.userPreference)
+```
+
+##### `registerIframeMethods(methods)`
+
+注册可供 Iframe (Guest) 调用的方法。
+
+```typescript
+session.registerIframeMethods({
+  // 定义一个获取用户信息的方法
+  getUserInfo: async () => {
+    return { name: 'Alice', id: 123 }
+  },
+  
+  // 定义一个打开弹窗的方法
+  openModal: (type) => {
+    setModalVisible(type)
+  }
+})
+```
+
+---
+
+## Iframe SDK (Guest Side)
+
+我们在 `packages/sdk/iframe-sdk.js` 提供了轻量级的 SDK，供嵌入的 HTML 工具使用。
+
+该 SDK 不需要构建工具，直接通过 `<script>` 标签引入即可。
+
+### 引入 SDK
+
+```html
+<script src="/iframe-sdk.js"></script>
+```
+
+### 使用方法
+
+SDK 会在全局挂载 `IframeBridge` 对象。
+
+#### `IframeBridge.call(method, params?)`
+
+调用宿主 (Host) 方法。
+
+```javascript
+// 调用自定义方法
+const userInfo = await IframeBridge.call('getUserInfo');
+
+// 调用宿主方法并传参
+await IframeBridge.call('log', ['Hello from iframe']);
+```
+
+#### `IframeBridge.hasMethod(methodName)`
+
+检查宿主是否支持某个方法。
+
+```javascript
+const supportsLog = await IframeBridge.hasMethod('log');
+if (supportsLog) {
+  // ...
+}
+```
+
+
+#### `IframeBridge.saveData(key, value)`
+
+持久化存储数据（存储在当前工作流会话的 variables 中）。
+
+```javascript
+await IframeBridge.saveData('draft', { content: '...' });
+```
+
+#### `IframeBridge.loadData(key)`
+
+读取持久化数据。
+
+```javascript
+const draft = await IframeBridge.loadData('draft');
+```
+
+#### `IframeBridge.executeWorkflow(workflowId, input)`
+
+临时/嵌套执行另一个工作流。
+
+```javascript
+const result = await IframeBridge.executeWorkflow('target-workflow-id', {
+  parts: [
+    { type: 'image', url: 'https://...' }
+  ]
+});
+console.log(result); // 执行产生的所有消息
+```
+
+#### `IframeBridge.uploadFile(file, options?)`
+
+上传文件到云存储，返回 CDN URL。
+
+```javascript
+// 从 file input 上传
+const fileInput = document.querySelector('input[type="file"]');
+const url = await IframeBridge.uploadFile(fileInput.files[0]);
+console.log('文件 URL:', url);
+
+// 从 canvas 上传截图
+canvas.toBlob(async (blob) => {
+  const file = new File([blob], 'screenshot.png', { type: 'image/png' });
+  const url = await IframeBridge.uploadFile(file);
+  console.log('截图 URL:', url);
+});
+
+// 指定资源类型
+const url = await IframeBridge.uploadFile(file, {
+  resourceType: 'conversation'  // 'conversation' | 'workflow' | 'knowledge-base'
+});
+```
+
+**说明**：
+- 图片类型会自动压缩到 1920px 以内
+- 音视频文件会自动获取时长信息
+- 返回的是可直接访问的 CDN URL
+
 ---
 
 ### UploadService

package/dist/iframe-bridge.d.ts

@@ -0,0 +1,33 @@
+import type { WorkflowSession } from './session';
+/**
+ * Host-side Iframe Bridge
+ * Handles communication between the SDK (Host) and the embedded Iframe (Guest).
+ */
+export declare class IframeBridgeHost {
+    private readonly session;
+    private iframeWindow;
+    private messageHandler;
+    constructor(session: WorkflowSession);
+    /**
+     * Attach the bridge to an iframe element.
+     * Starts listening for messages from the iframe.
+     */
+    attach(iframe: HTMLIFrameElement): void;
+    /**
+     * Detach the bridge.
+     * Stops listening for messages.
+     */
+    detach(): void;
+    /**
+     * Handle an incoming call message from the iframe.
+     */
+    private handleCall;
+    /**
+     * Check if a method is available (built-in or user-defined).
+     */
+    private hasMethod;
+    /**
+     * Send a response message back to the iframe.
+     */
+    private sendResponse;
+}

package/dist/iframe-bridge.js

@@ -0,0 +1,94 @@
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+class IframeBridgeHost {
+    attach(iframe) {
+        if (this.messageHandler) this.detach();
+        this.iframeWindow = iframe.contentWindow;
+        this.messageHandler = async (event)=>{
+            const data = event.data;
+            if (!data || 'iframe-bridge-call' !== data.type) return;
+            await this.handleCall(data);
+        };
+        window.addEventListener('message', this.messageHandler);
+    }
+    detach() {
+        if (this.messageHandler) {
+            window.removeEventListener('message', this.messageHandler);
+            this.messageHandler = null;
+        }
+        this.iframeWindow = null;
+    }
+    async handleCall(message) {
+        const { callId, method, params = [] } = message;
+        let result;
+        let error;
+        try {
+            if ('hasMethod' === method) {
+                const [targetMethod] = params;
+                result = this.hasMethod(targetMethod);
+            } else if ('saveData' === method) {
+                const [key, value] = params;
+                const safeKey = `iframe_data_${key}`;
+                await this.session.setWorkflowVariables({
+                    [safeKey]: value
+                });
+                result = true;
+            } else if ('loadData' === method) {
+                const [key] = params;
+                const variables = await this.session.getWorkflowVariables();
+                result = variables[`iframe_data_${key}`];
+            } else if ('executeWorkflow' === method) {
+                const [workflowId, input] = params;
+                result = await this.session.executeWorkflow(workflowId, input);
+            } else if ('uploadFile' === method) {
+                const [options] = params;
+                result = await this.session.uploadFileFromIframe(options);
+            } else {
+                const userMethods = this.session.getIframeMethods();
+                const fn = userMethods[method];
+                if ('function' == typeof fn) result = await fn(...params);
+                else throw new Error(`Method "${method}" not found or not registered on host.`);
+            }
+        } catch (e) {
+            error = e instanceof Error ? e.message : String(e);
+        }
+        this.sendResponse({
+            type: 'iframe-bridge-response',
+            callId,
+            result,
+            error
+        });
+    }
+    hasMethod(methodName) {
+        const builtIns = [
+            'saveData',
+            'loadData',
+            'hasMethod',
+            'executeWorkflow',
+            'uploadFile'
+        ];
+        if (builtIns.includes(methodName)) return true;
+        const userMethods = this.session.getIframeMethods();
+        return 'function' == typeof userMethods[methodName];
+    }
+    sendResponse(message) {
+        if (this.iframeWindow) this.iframeWindow.postMessage(message, '*');
+    }
+    constructor(session){
+        _define_property(this, "session", void 0);
+        _define_property(this, "iframeWindow", void 0);
+        _define_property(this, "messageHandler", void 0);
+        this.session = session;
+        this.iframeWindow = null;
+        this.messageHandler = null;
+    }
+}
+export { IframeBridgeHost };

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export { WorkflowSession } from './session';
 export { UploadService } from './upload';
 export type { ClientConfig, SessionOptions, SessionState, SessionEventListeners, SendInput, UploadParams, UploadImageParams, CompressOptions, WorkflowInfo, ContentPart, } from './types';
 export type { SimpleMessage, Workflow, WorkflowConfig, } from '@our-llm/shared/types';
-export { Markdown } from './ui/markdown';
+export { Markdown, type MarkdownProps } from './ui/markdown';

package/dist/session.d.ts

@@ -1,3 +1,4 @@
+import type { SimpleMessage } from '@our-llm/shared/types';
 import type { SessionOptions, SessionState, SessionEventListeners, SendInput } from './types';
 import { UploadService } from './upload';
 /**
@@ -13,6 +14,26 @@ export declare class WorkflowSession {
     private listeners;
     private abortController?;
     constructor(workflowId: string, baseUrl: string, uploadService: UploadService, headers?: Record<string, string>, options?: SessionOptions);
+    private iframeMethods;
+    /**
+     * 注册可供 iframe 调用的自定义方法
+     */
+    registerIframeMethods(methods: Record<string, (...args: any[]) => any>): this;
+    /**
+     * 获取已注册的 iframe 方法（供内部使用）
+     */
+    getIframeMethods(): Record<string, (...args: any[]) => any>;
+    /**
+     * 上传文件（供 iframe-bridge 使用）
+     * @param options 上传选项
+     * @returns 文件的 CDN URL
+     */
+    uploadFileFromIframe(options: {
+        base64: string;
+        filename: string;
+        mimeType: string;
+        resourceType?: 'conversation' | 'workflow' | 'knowledge-base';
+    }): Promise<string>;
     /**
      * 监听事件
      */
@@ -37,6 +58,23 @@ export declare class WorkflowSession {
      * 恢复历史会话
      */
     restore(): Promise<void>;
+    /**
+     * 获取工作流变量
+     */
+    getWorkflowVariables(): Promise<Record<string, any>>;
+    /**
+     * 更新会话状态（服务端变量）
+     * @param values 需要更新的变量键值对
+     */
+    setWorkflowVariables(values: Record<string, unknown>): Promise<void>;
+    /**
+     * 执行指定的工作流（临时/嵌套执行）
+     * 不会影响当前会话的状态（messages 等）
+     * @param workflowId 目标工作流 ID
+     * @param input 输入数据（与 send 方法一致）
+     * @returns 执行结果的所有消息
+     */
+    executeWorkflow(workflowId: string, input: SendInput): Promise<SimpleMessage[]>;
     /**
      * 发送消息执行工作流
      */

package/dist/session.js

@@ -11,6 +11,41 @@ function _define_property(obj, key, value) {
     return obj;
 }
 class WorkflowSession {
+    registerIframeMethods(methods) {
+        this.iframeMethods = {
+            ...this.iframeMethods,
+            ...methods
+        };
+        return this;
+    }
+    getIframeMethods() {
+        return this.iframeMethods;
+    }
+    async uploadFileFromIframe(options) {
+        const { base64, filename, mimeType, resourceType = 'conversation' } = options;
+        const byteString = atob(base64);
+        const arrayBuffer = new ArrayBuffer(byteString.length);
+        const uint8Array = new Uint8Array(arrayBuffer);
+        for(let i = 0; i < byteString.length; i++)uint8Array[i] = byteString.charCodeAt(i);
+        const blob = new Blob([
+            uint8Array
+        ], {
+            type: mimeType
+        });
+        const file = new File([
+            blob
+        ], filename, {
+            type: mimeType
+        });
+        if (mimeType.startsWith('image/')) return this.uploadService.uploadImage({
+            file,
+            resourceType
+        });
+        return this.uploadService.uploadFile({
+            file,
+            resourceType
+        });
+    }
     on(event, listener) {
         if (!this.listeners.has(event)) this.listeners.set(event, new Set());
         this.listeners.get(event).add(listener);
@@ -52,6 +87,108 @@ class WorkflowSession {
             messages: data.messages
         });
     }
+    async getWorkflowVariables() {
+        if (!this.state.threadId) throw new Error('No active session (missing threadId)');
+        const response = await fetch(`${this.baseUrl}/workflows/${this.workflowId}/state?threadId=${this.state.threadId}`, {
+            headers: this.headers
+        });
+        if (!response.ok) throw new Error('Failed to get workflow variables');
+        const data = await response.json();
+        return data.variables || {};
+    }
+    async setWorkflowVariables(values) {
+        if (!this.state.threadId || this.state.threadId.startsWith('tmp_')) throw new Error('No active session (missing valid threadId)');
+        const response = await fetch(`${this.baseUrl}/workflows/${this.workflowId}/variables`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...this.headers
+            },
+            body: JSON.stringify({
+                threadId: this.state.threadId,
+                values
+            })
+        });
+        if (!response.ok) throw new Error('Failed to update state');
+    }
+    async executeWorkflow(workflowId, input) {
+        const { parts: inputParts, ...rest } = input;
+        const parts = [];
+        for (const part of inputParts)switch(part.type){
+            case 'text':
+                parts.push({
+                    type: 'text',
+                    text: part.text
+                });
+                break;
+            case 'image':
+                {
+                    const imageUrl = await this.resolveMediaUrl(part, 'image');
+                    parts.push({
+                        type: 'image',
+                        url: imageUrl
+                    });
+                    break;
+                }
+            case 'document':
+                {
+                    const docInfo = await this.resolveDocumentInfo(part);
+                    parts.push({
+                        type: 'document',
+                        url: docInfo.url,
+                        filename: docInfo.filename,
+                        mimeType: docInfo.mimeType
+                    });
+                    break;
+                }
+            case 'video':
+                {
+                    const videoUrl = await this.resolveMediaUrl(part, 'video');
+                    parts.push({
+                        type: 'video',
+                        url: videoUrl
+                    });
+                    break;
+                }
+            case 'audio':
+                {
+                    const audioUrl = await this.resolveMediaUrl(part, 'audio');
+                    parts.push({
+                        type: 'audio',
+                        url: audioUrl
+                    });
+                    break;
+                }
+        }
+        const executionInput = {
+            messages: [
+                {
+                    content: parts
+                }
+            ]
+        };
+        const resultMessages = [];
+        const tempThreadId = v7();
+        return new Promise((resolve, reject)=>{
+            executeWorkflowSSE(`${this.baseUrl}/workflows/${workflowId}/execute`, {
+                input: executionInput,
+                threadId: tempThreadId,
+                ...rest
+            }, {
+                onNodeEnd: (data)=>{
+                    if (data.m && data.m.length > 0) {
+                        for (const msg of data.m)if ('human' !== msg.type) resultMessages.push(msg);
+                    }
+                },
+                onComplete: ()=>{
+                    resolve(resultMessages);
+                },
+                onError: (err)=>{
+                    reject(new Error(err.message));
+                }
+            }, this.headers).catch(reject);
+        });
+    }
     async send({ parts: inputParts, ...rest }) {
         if (this.state.isExecuting) throw new Error('工作流正在执行中');
         this.updateState({
@@ -310,6 +447,7 @@ class WorkflowSession {
         _define_property(this, "state", void 0);
         _define_property(this, "listeners", void 0);
         _define_property(this, "abortController", void 0);
+        _define_property(this, "iframeMethods", void 0);
         this.workflowId = workflowId;
         this.baseUrl = baseUrl;
         this.uploadService = uploadService;
@@ -319,6 +457,7 @@ class WorkflowSession {
             isExecuting: false
         };
         this.listeners = new Map();
+        this.iframeMethods = {};
         if (options.threadId) this.state.threadId = options.threadId;
         else this.state.threadId = v7();
     }

package/dist/ui/code.js

@@ -1,18 +1,36 @@
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { CodeHighlighter, Mermaid } from "@ant-design/x";
 import { jsonrepair } from "jsonrepair";
+import { useWorkflowSession } from "./context.js";
+import { IframeBridgeHost } from "../iframe-bridge.js";
 const Code = (props)=>{
     var _className_match;
     const { className, children } = props;
     const lang = (null == className ? void 0 : null == (_className_match = className.match(/language-(\w+)/)) ? void 0 : _className_match[1]) || '';
+    const session = useWorkflowSession();
+    const iframeRef = useRef(null);
+    const bridgeRef = useRef(null);
+    useEffect(()=>{
+        if (session && iframeRef.current) {
+            if (!bridgeRef.current) bridgeRef.current = new IframeBridgeHost(session);
+            bridgeRef.current.attach(iframeRef.current);
+        }
+        return ()=>{
+            var _bridgeRef_current;
+            null == (_bridgeRef_current = bridgeRef.current) || _bridgeRef_current.detach();
+        };
+    }, [
+        session
+    ]);
     if ('string' != typeof children) return null;
     if ('mermaid' === lang) return /*#__PURE__*/ jsx(Mermaid, {
         children: children
     });
-    console.log(lang);
-    if ('tmpl' === lang) {
+    if ('tmpl' === lang) try {
         const json = JSON.parse(jsonrepair(children));
         if ('iframe' === json.type) return /*#__PURE__*/ jsx("iframe", {
+            ref: iframeRef,
             src: json.data.src,
             width: "100%",
             allow: "clipboard-read; clipboard-write; camera; microphone",
@@ -23,7 +41,7 @@ const Code = (props)=>{
                 display: 'block'
             }
         });
-    }
+    } catch  {}
     return /*#__PURE__*/ jsx(CodeHighlighter, {
         lang: lang,
         children: children

package/dist/ui/context.d.ts

@@ -0,0 +1,3 @@
+import type { WorkflowSession } from '../session';
+export declare const SessionContext: import("react").Context<WorkflowSession | null>;
+export declare const useWorkflowSession: () => WorkflowSession | null;

package/dist/ui/context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const SessionContext = createContext(null);
+const useWorkflowSession = ()=>useContext(SessionContext);
+export { SessionContext, useWorkflowSession };

package/dist/ui/markdown.d.ts

@@ -1,4 +1,8 @@
 import { XMarkdownProps } from '@ant-design/x-markdown';
 import '@ant-design/x-markdown/themes/light.css';
-declare const Markdown: ({ className, streaming, config, components, ...props }: XMarkdownProps) => import("react/jsx-runtime").JSX.Element;
+import type { WorkflowSession } from '../session';
+export interface MarkdownProps extends XMarkdownProps {
+    session?: WorkflowSession;
+}
+declare const Markdown: ({ className, streaming, config, components, session, ...props }: MarkdownProps) => import("react/jsx-runtime").JSX.Element;
 export { Markdown };

package/dist/ui/markdown.js

@@ -6,23 +6,27 @@ import zh_CN from "@ant-design/x/locale/zh_CN";
 import clsx from "clsx";
 import { Code } from "./code.js";
 import { XProvider } from "@ant-design/x";
-const Markdown = ({ className, streaming, config, components, ...props })=>/*#__PURE__*/ jsx(XProvider, {
+import { SessionContext } from "./context.js";
+const Markdown = ({ className, streaming, config, components, session, ...props })=>/*#__PURE__*/ jsx(XProvider, {
         locale: zh_CN,
-        children: /*#__PURE__*/ jsx(XMarkdown, {
-            className: clsx(className, 'x-markdown-light'),
-            streaming: {
-                ...streaming,
-                enableAnimation: true
-            },
-            config: {
-                ...config,
-                extensions: Latex()
-            },
-            components: {
-                ...components,
-                code: Code
-            },
-            ...props
+        children: /*#__PURE__*/ jsx(SessionContext.Provider, {
+            value: session || null,
+            children: /*#__PURE__*/ jsx(XMarkdown, {
+                className: clsx(className, 'x-markdown-light'),
+                streaming: {
+                    ...streaming,
+                    enableAnimation: true
+                },
+                config: {
+                    ...config,
+                    extensions: Latex()
+                },
+                components: {
+                    ...components,
+                    code: Code
+                },
+                ...props
+            })
         })
     });
 export { Markdown };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wtfai",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "type": "module",
   "exports": {
     ".": {
@@ -15,16 +15,16 @@
   "devDependencies": {
     "@eslint/js": "^9.39.2",
     "@rsbuild/plugin-react": "^1.4.3",
-    "@rslib/core": "^0.19.2",
-    "@types/react": "^19.2.8",
+    "@rslib/core": "^0.19.3",
+    "@types/react": "^19.2.9",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "globals": "^17.0.0",
-    "prettier": "^3.8.0",
+    "globals": "^17.1.0",
+    "prettier": "^3.8.1",
     "react": "^19.2.3",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0"
+    "typescript-eslint": "^8.53.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",