@baishuyun/chat-sdk 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/chat-sdk",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "",
   "main": "src/index.jsx",
   "module": "dist/chat-sdk.js",

package/src/components/biz-comp/multi-modal-input/index.tsx

@@ -11,7 +11,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { cn } from '@/lib/utils';
+import { cn, uploadFile } from '@/lib/utils';
 import {
   PromptInput,
   PromptInputSubmit,
@@ -154,28 +154,10 @@ function PureMultimodalInput({
 
   const toast = useToast();
 
-  const uploadFile = useCallback(async (file: File, signal?: AbortSignal) => {
-    const formData = new FormData();
-    formData.append('file', file);
-
-    try {
-      const response = await fetch(fileUploadEndpoint, {
-        method: 'POST',
-        body: formData,
-        signal,
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-
-        console.log(data);
-
-        return data;
-      }
-      const { error } = await response.json();
-      console.error('upload error', error);
-    } catch (_error) {}
-  }, []);
+  const upload = useCallback(
+    (file: File, signal?: AbortSignal) => uploadFile(file, fileUploadEndpoint, signal),
+    [fileUploadEndpoint]
+  );
 
   const handleFileChange = useCallback(
     async (event: ChangeEvent<HTMLInputElement>) => {
@@ -208,7 +190,7 @@ function PureMultimodalInput({
         const uploadPromises = files.map((file) => {
           const controller = new AbortController();
           uploadAbortControllers.current.set(file.name, controller);
-          return uploadFile(file, controller.signal);
+          return upload(file, controller.signal);
         });
         const uploadedAttachments = await Promise.all(uploadPromises);
         const successfullyUploadedAttachments = uploadedAttachments.filter(
@@ -228,7 +210,7 @@ function PureMultimodalInput({
         uploadAbortControllers.current.clear();
       }
     },
-    [setAttachments, uploadFile, attachments]
+    [setAttachments, upload, attachments]
   );
 
   const handlePaste = useCallback(
@@ -253,7 +235,7 @@ function PureMultimodalInput({
         const uploadPromises = imageItems
           .map((item) => item.getAsFile())
           .filter((file): file is File => file !== null)
-          .map((file) => uploadFile(file));
+          .map((file) => upload(file));
 
         const uploadedAttachments = await Promise.all(uploadPromises);
         const successfullyUploadedAttachments = uploadedAttachments.filter(
@@ -270,10 +252,19 @@ function PureMultimodalInput({
         setUploadQueue([]);
       }
     },
-    [setAttachments, uploadFile]
+    [setAttachments, upload]
   );
 
-  const accept = useChatPreference()?.acceptAttachmentFileType?.join(',');
+  const accept = (useChatPreference()?.acceptAttachmentFileType || [
+          '.csv',
+          'text/csv',
+          'text/plain',
+          '.txt',
+          'image/*',
+          '.xls',
+          '.xlsx',
+  ])?.join(',');
+
   const hasAcceptableFileType = !!accept;
 
   // Add paste event listener to textarea

package/src/lib/utils.ts

@@ -2,7 +2,7 @@ import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { UIDataTypes, UIMessagePart, UITools } from 'ai';
 import { Field } from '@/plugins/form-builder-base-plugin/types';
-import { IFilledField, IQueryResult } from '@baishuyun/types';
+import { Attachment, IFilledField, IQueryResult } from '@baishuyun/types';
 import { FORM_ICON_OPTIONS } from '@/const/ui';
 
 export function cn(...inputs: ClassValue[]) {
@@ -418,3 +418,72 @@ export const formatJSONIfValid = (str: string): string | null => {
     return null;
   }
 };
+
+/**
+ * 从 URL 下载文件，返回 File 对象
+ */
+export const downloadFile = async (url: string): Promise<File> => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to download file from ${url}: ${response.status}`);
+  }
+  const blob = await response.blob();
+  const contentType = response.headers.get('content-type') || 'application/octet-stream';
+  const filename = new URL(url).pathname.split('/').pop() || 'attachment';
+  return new File([blob], filename, { type: contentType });
+};
+
+/**
+ * 上传文件到指定 endpoint，返回 Attachment 信息
+ */
+export const uploadFile = async (
+  file: File,
+  uploadEndpoint: string,
+  signal?: AbortSignal
+): Promise<Attachment | undefined> => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  try {
+    const response = await fetch(uploadEndpoint, {
+      method: 'POST',
+      body: formData,
+      signal,
+    });
+
+    if (response.ok) {
+      return await response.json();
+    }
+    const { error } = await response.json();
+    console.error('upload error', error);
+    return undefined;
+  } catch (error) {
+    console.error('Error uploading file:', error);
+    return undefined;
+  }
+};
+
+export const urls2fileParts = async (attachmentsUrl: string[], uploadEndpoint: string) => {
+  if (!attachmentsUrl?.length) {
+    return [];
+  }
+
+  const results = await Promise.all(
+    attachmentsUrl.map(async (url) => {
+      const file = await downloadFile(url);
+      return uploadFile(file, uploadEndpoint);
+    })
+  );
+
+  return results
+    .filter((attachment): attachment is Attachment => attachment !== undefined)
+    .map((attachment) => ({
+      type: 'file' as const,
+      url: attachment.url,
+      name: attachment.name,
+      mediaType: attachment.contentType,
+      providerMetadata: {
+        uploadMetadata: attachment,
+      },
+    }));
+};

package/src/sdk.impl.tsx

@@ -13,6 +13,7 @@ import {
 import { EvtBus } from './lib/event-emitter';
 import type { UseChatHelpers } from '@ai-sdk/react';
 import { ChatRequestOptions, JSONValue } from 'ai';
+import { ensureEndSlash, urls2fileParts } from './lib/utils';
 
 export class ChatSDK implements IChatSDK {
   static instances: ChatSDK[] = [];
@@ -116,16 +117,32 @@ export class ChatSDK implements IChatSDK {
     this._appendFakeBotMessage?.(text);
   }
 
-  public sendMessage = async (text: string, customVariable: JSONValue, options: ChatRequestOptions) => {
+  public sendMessage = async (text: string, customVariable: JSONValue, options: ChatRequestOptions & {
+    attachmentsUrl?: string[];
+  } = {}) => {
     await this.whenChatComponentReady();
 
-    // if is streaming, return;
+    const { attachmentsUrl, ...restOptions } = options;
+
+    const uploadEndpoint = `${ensureEndSlash(this.options.backendApiEndpoint!)}form/attachment/upload`;
+    let fileParts: ChatMessage['parts'] = await urls2fileParts(attachmentsUrl || [], uploadEndpoint);
+
+    const msg = fileParts.length > 0
+      ? {
+          role: 'user',
+          parts: [
+            ...fileParts,
+            { type: 'text' as const, text },
+          ],
+        } as ChatMessage
+      : { text };
+
     this._sendMessage?.(
-      { text },           // First arg: message data
-      {                   // Second arg: options
-        ...options,
+      msg,
+      {
+        ...restOptions,
         body: {
-          ...(options?.body || {}),
+          ...(restOptions?.body || {}),
           userVar: customVariable,
         },
       }