wtfai 1.2.1 → 1.3.0

package/README.md

@@ -169,35 +169,63 @@ session.off('token', onToken)
 发送消息执行工作流。
 
 ```typescript
-// 发送纯文本
+// 基础用法：纯文本
 await session.send({
-  content: '你好',
+  parts: [
+    { type: 'text', text: '你好' }
+  ]
 })
 
-// 发送带图片的消息（自动压缩上传）
+// 图片 + 文本（使用 File）
 await session.send({
-  content: '请分析这张图片',
-  images: [imageFile],  // File[]
+  parts: [
+    { type: 'text', text: '请分析下面的图片：' },
+    { type: 'image', file: imageFile },
+    { type: 'text', text: '说明这张图的内容' }
+  ]
 })
 
-// 发送带文档的消息（自动上传）
+// 图片 + 文本（使用 URL）
 await session.send({
-  content: '请总结这份文档',
-  documents: [pdfFile],  // File[]
+  parts: [
+    { type: 'text', text: '请对比这两张图片：' },
+    { type: 'image', url: 'https://example.com/img1.jpg' },
+    { type: 'image', url: 'https://example.com/img2.jpg' }
+  ]
 })
 
-// 使用已上传的 URL
+// 完整示例：文本 + 图片 + 文档
 await session.send({
-  content: '你好',
-  imageUrls: ['https://example.com/image.jpg'],
-  documentInfos: [{
-    url: 'https://example.com/doc.pdf',
-    filename: 'document.pdf',
-    mimeType: 'application/pdf',
-  }],
+  parts: [
+    { type: 'text', text: '请对比下面两张图片：' },
+    { type: 'image', file: imageFile1 },
+    { type: 'image', file: imageFile2 },
+    { type: 'text', text: '然后参考这份报告：' },
+    { 
+      type: 'document',
+      file: pdfFile,
+      filename: 'report.pdf'
+    },
+    { type: 'text', text: '说明第一张图的问题在哪里' }
+  ]
+})
+
+// 使用 blob URL
+await session.send({
+  parts: [
+    { type: 'text', text: '分析这张图：' },
+    { type: 'image', url: blobUrl },  // 会自动上传
+  ]
 })
 ```
 
+**说明**：
+- `parts` 数组中的元素会按顺序传递给 LLM，使大模型能准确理解位置指代（如"下面的图片"、"第一张图"）
+- `image` 和 `document` 类型必须提供 `file` 或 `url` 之一
+- 图片 File 会自动压缩到 1920px 以内，质量 0.8
+- blob URL 会自动上传到服务器
+
+
 ##### `restore()`
 
 恢复历史会话（需要在创建 session 时传入 threadId）。
@@ -302,16 +330,24 @@ interface SessionState {
 
 ```typescript
 interface SendInput {
-  content?: string
-  images?: File[]
-  imageUrls?: string[]
-  documents?: File[]
-  documentInfos?: Array<{
-    url: string
-    filename: string
-    mimeType: string
-  }>
+  /** 内容部件数组，按顺序传递给 LLM */
+  parts: ContentPart[]
 }
+
+type ContentPart =
+  | { type: 'text'; text: string }
+  | {
+      type: 'image'
+      file?: File      // 图片文件（会自动压缩并上传）
+      url?: string     // 图片 URL（支持 blob URL 和普通 URL）
+    }
+  | {
+      type: 'document'
+      file?: File      // 文档文件（会自动上传）
+      url?: string     // 文档 URL（支持 blob URL 和普通 URL）
+      filename: string // 文件名
+      mimeType?: string // MIME 类型
+    }
 ```
 
 ---
@@ -356,7 +392,9 @@ function ChatComponent({ workflowId }: { workflowId: string }) {
     })
 
     try {
-      await session.send({ content: input })
+      await session.send({
+        parts: [{ type: 'text', text: input }]
+      })
       setInput('')
     } catch (error) {
       console.error(error)
@@ -390,7 +428,8 @@ function ChatComponent({ workflowId }: { workflowId: string }) {
 
 ## 注意事项
 
-1. **图片自动压缩**：通过 `session.send({ images: [...] })` 上传的图片会自动压缩到 1920px 以内，质量 0.8
-2. **会话管理**：每次调用 `send()` 都会更新 `threadId`，如需保存会话请在 `start` 事件中获取
-3. **错误处理**：建议始终监听 `error` 事件处理异常情况
-4. **资源清理**：组件卸载时调用 `session.abort()` 避免内存泄漏
+1. **顺序保持**：`parts` 数组中的元素会按顺序传递给 LLM，确保大模型能理解位置指代
+2. **图片自动压缩**：通过 File 上传的图片会自动压缩到 1920px 以内，质量 0.8
+3. **会话管理**：每次调用 `send()` 都会更新 `threadId`，如需保存会话请在 `start` 事件中获取
+4. **错误处理**：建议始终监听 `error` 事件处理异常情况
+5. **资源清理**：组件卸载时调用 `session.abort()` 避免内存泄漏

package/dist/session.d.ts

@@ -41,6 +41,14 @@ export declare class WorkflowSession {
      * 发送消息执行工作流
      */
     send(input: SendInput): Promise<void>;
+    /**
+     * 解析图片 URL（支持 File 和 URL）
+     */
+    private resolveImageUrl;
+    /**
+     * 解析文档信息（支持 File 和 URL）
+     */
+    private resolveDocumentInfo;
     /**
      * 中止执行
      */

package/dist/session.js

@@ -60,89 +60,33 @@ class WorkflowSession {
         });
         try {
             const contentParts = [];
-            if (input.content) contentParts.push({
-                type: 'text',
-                text: input.content
-            });
-            if (input.images && input.images.length > 0) {
-                const imageUrls = await Promise.all(input.images.map((file)=>this.uploadService.uploadImage({
-                        file,
-                        resourceType: 'conversation'
-                    })));
-                for (const url of imageUrls)contentParts.push({
-                    type: 'image',
-                    url
-                });
-            }
-            if (input.imageUrls && input.imageUrls.length > 0) {
-                const resolvedUrls = await Promise.all(input.imageUrls.map(async (url)=>{
-                    if (url.startsWith('blob:')) {
-                        const response = await fetch(url);
-                        const blob = await response.blob();
-                        const filename = `image_${Date.now()}.${blob.type.split('/')[1] || 'png'}`;
-                        const file = new File([
-                            blob
-                        ], filename, {
-                            type: blob.type
-                        });
-                        return this.uploadService.uploadImage({
-                            file,
-                            resourceType: 'conversation'
-                        });
-                    }
-                    return url;
-                }));
-                for (const url of resolvedUrls)contentParts.push({
-                    type: 'image',
-                    url
-                });
-            }
-            if (input.documents && input.documents.length > 0) {
-                const docInfos = await Promise.all(input.documents.map(async (file)=>{
-                    const url = await this.uploadService.uploadFile({
-                        file,
-                        resourceType: 'conversation'
+            for (const part of input.parts)switch(part.type){
+                case 'text':
+                    contentParts.push({
+                        type: 'text',
+                        text: part.text
                     });
-                    return {
-                        url,
-                        filename: file.name,
-                        mimeType: file.type
-                    };
-                }));
-                for (const doc of docInfos)contentParts.push({
-                    type: 'document',
-                    url: doc.url,
-                    filename: doc.filename,
-                    mimeType: doc.mimeType
-                });
-            }
-            if (input.documentInfos && input.documentInfos.length > 0) {
-                const resolvedDocs = await Promise.all(input.documentInfos.map(async (doc)=>{
-                    if (doc.url.startsWith('blob:')) {
-                        const response = await fetch(doc.url);
-                        const blob = await response.blob();
-                        const file = new File([
-                            blob
-                        ], doc.filename, {
-                            type: doc.mimeType || blob.type
+                    break;
+                case 'image':
+                    {
+                        const imageUrl = await this.resolveImageUrl(part);
+                        contentParts.push({
+                            type: 'image',
+                            url: imageUrl
                         });
-                        const uploadedUrl = await this.uploadService.uploadFile({
-                            file,
-                            resourceType: 'conversation'
+                        break;
+                    }
+                case 'document':
+                    {
+                        const docInfo = await this.resolveDocumentInfo(part);
+                        contentParts.push({
+                            type: 'document',
+                            url: docInfo.url,
+                            filename: docInfo.filename,
+                            mimeType: docInfo.mimeType
                         });
-                        return {
-                            ...doc,
-                            url: uploadedUrl
-                        };
+                        break;
                     }
-                    return doc;
-                }));
-                for (const doc of resolvedDocs)contentParts.push({
-                    type: 'document',
-                    url: doc.url,
-                    filename: doc.filename,
-                    mimeType: doc.mimeType
-                });
             }
             const executionInput = {
                 messages: [
@@ -151,16 +95,31 @@ class WorkflowSession {
                     }
                 ]
             };
-            const uploadedImages = contentParts.filter((p)=>'image' === p.type && 'url' in p).map((p)=>p.url);
-            const uploadedDocs = contentParts.filter((p)=>'document' === p.type).map((p)=>({
-                    filename: p.filename,
-                    url: p.url || '#'
-                }));
+            const parts = contentParts.map((part)=>{
+                switch(part.type){
+                    case 'text':
+                        return {
+                            type: 'text',
+                            text: part.text
+                        };
+                    case 'image':
+                        return {
+                            type: 'image',
+                            url: part.url
+                        };
+                    case 'document':
+                        return {
+                            type: 'document',
+                            filename: part.filename,
+                            url: part.url
+                        };
+                    default:
+                        throw new Error(`Unknown part type: ${part.type}`);
+                }
+            });
             const userMessage = {
                 type: 'human',
-                content: input.content || '',
-                images: uploadedImages.length > 0 ? uploadedImages : void 0,
-                documents: uploadedDocs.length > 0 ? uploadedDocs : void 0
+                parts
             };
             this.updateState({
                 messages: [
@@ -213,7 +172,12 @@ class WorkflowSession {
                     if (!currentAiMessage) {
                         currentAiMessage = {
                             type: 'ai',
-                            content: ''
+                            parts: [
+                                {
+                                    type: 'text',
+                                    text: ''
+                                }
+                            ]
                         };
                         const newMessages = [
                             ...this.state.messages,
@@ -224,7 +188,8 @@ class WorkflowSession {
                             messages: newMessages
                         });
                     }
-                    currentAiMessage.content = currentAiMessage.content + data.c;
+                    const textPart = currentAiMessage.parts.find((p)=>'text' === p.type);
+                    if (textPart && 'text' === textPart.type) textPart.text += data.c;
                     const updatedMessages = [
                         ...this.state.messages
                     ];
@@ -277,6 +242,69 @@ class WorkflowSession {
             throw error;
         }
     }
+    async resolveImageUrl(part) {
+        if (part.file) return this.uploadService.uploadImage({
+            file: part.file,
+            resourceType: 'conversation'
+        });
+        if (part.url) {
+            if (part.url.startsWith('blob:')) {
+                const response = await fetch(part.url);
+                const blob = await response.blob();
+                const filename = `image_${Date.now()}.${blob.type.split('/')[1] || 'png'}`;
+                const file = new File([
+                    blob
+                ], filename, {
+                    type: blob.type
+                });
+                return this.uploadService.uploadImage({
+                    file,
+                    resourceType: 'conversation'
+                });
+            }
+            return part.url;
+        }
+        throw new Error('Image part must have either file or url');
+    }
+    async resolveDocumentInfo(part) {
+        if (part.file) {
+            const url = await this.uploadService.uploadFile({
+                file: part.file,
+                resourceType: 'conversation'
+            });
+            return {
+                url,
+                filename: part.filename,
+                mimeType: part.mimeType || part.file.type
+            };
+        }
+        if (part.url) {
+            if (part.url.startsWith('blob:')) {
+                const response = await fetch(part.url);
+                const blob = await response.blob();
+                const file = new File([
+                    blob
+                ], part.filename, {
+                    type: part.mimeType || blob.type
+                });
+                const url = await this.uploadService.uploadFile({
+                    file,
+                    resourceType: 'conversation'
+                });
+                return {
+                    url,
+                    filename: part.filename,
+                    mimeType: part.mimeType || blob.type
+                };
+            }
+            return {
+                url: part.url,
+                filename: part.filename,
+                mimeType: part.mimeType || 'application/octet-stream'
+            };
+        }
+        throw new Error('Document part must have either file or url');
+    }
     abort() {
         if (this.abortController) {
             this.abortController.abort();

package/dist/types.d.ts

@@ -49,24 +49,43 @@ export interface CompressOptions {
     /** 超过此大小（字节）的图片会被转换为 JPEG，默认 1MB */
     convertSize?: number;
 }
+/**
+ * 内容部件类型
+ */
+export type ContentPart = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'image';
+    /** 图片文件（会自动压缩并上传） */
+    file: File;
+} | {
+    type: 'image';
+    /** 图片 URL（支持 blob URL 和普通 URL） */
+    url: string;
+} | {
+    type: 'document';
+    /** 文档 URL（支持 blob URL 和普通 URL） */
+    url: string;
+    /** 文件名 */
+    filename: string;
+    /** MIME 类型 */
+    mimeType: string;
+} | {
+    type: 'document';
+    /** 文档文件（会自动上传） */
+    file: File;
+    /** 文件名 */
+    filename: string;
+    /** MIME 类型 */
+    mimeType: string;
+};
 /**
  * 发送消息的输入
  */
 export interface SendInput {
-    /** 文本内容 */
-    content?: string;
-    /** 图片文件列表（会自动压缩并上传） */
-    images?: File[];
-    /** 已上传的图片 URL 列表 */
-    imageUrls?: string[];
-    /** 文档文件列表（会自动上传） */
-    documents?: File[];
-    /** 已上传的文档信息列表 */
-    documentInfos?: Array<{
-        url: string;
-        filename: string;
-        mimeType: string;
-    }>;
+    /** 内容部件数组，按顺序传递给 LLM */
+    parts: ContentPart[];
 }
 /**
  * 上传临时凭证

package/dist/ui/code.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from '@ant-design/x-markdown';
+export declare const Code: React.FC<ComponentProps>;

package/dist/ui/code.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { CodeHighlighter, Mermaid } from "@ant-design/x";
+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]) || '';
+    if ('string' != typeof children) return null;
+    if ('mermaid' === lang) return /*#__PURE__*/ jsx(Mermaid, {
+        children: children
+    });
+    return /*#__PURE__*/ jsx(CodeHighlighter, {
+        lang: lang,
+        children: children
+    });
+};
+export { Code };

package/dist/ui/markdown.d.ts

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

package/dist/ui/markdown.js

@@ -1,13 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { XMarkdown } from "@ant-design/x-markdown";
 import "@ant-design/x-markdown/themes/light.css";
+import Latex from "@ant-design/x-markdown/plugins/Latex";
+import zh_CN from "@ant-design/x/locale/zh_CN";
 import clsx from "clsx";
-const Markdown = ({ className, streaming, ...props })=>/*#__PURE__*/ jsx(XMarkdown, {
-        className: clsx(className, 'x-markdown-light'),
-        streaming: {
-            ...streaming,
-            enableAnimation: true
-        },
-        ...props
+import { Code } from "./code.js";
+import { XProvider } from "@ant-design/x";
+const Markdown = ({ className, streaming, config, components, ...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
+        })
     });
 export { Markdown };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wtfai",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "exports": {
     ".": {