@fe-free/ai 6.0.11 → 6.0.12

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @fe-free/ai
 
+## 6.0.12
+
+### Patch Changes
+
+- ai
+  - @fe-free/core@6.0.12
+  - @fe-free/icons@6.0.12
+  - @fe-free/tool@6.0.12
+
 ## 6.0.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "6.0.11",
+  "version": "6.0.12",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -17,7 +17,7 @@
     "lodash-es": "^4.17.21",
     "uuid": "^13.0.0",
     "zustand": "^4.5.7",
-    "@fe-free/core": "6.0.11"
+    "@fe-free/core": "6.0.12"
   },
   "peerDependencies": {
     "antd": "^6.2.1",
@@ -27,8 +27,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "6.0.11",
-    "@fe-free/tool": "6.0.11"
+    "@fe-free/icons": "6.0.12",
+    "@fe-free/tool": "6.0.12"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/sender/actions.tsx

@@ -3,6 +3,7 @@ import type { UploadFile } from 'antd';
 import { Button } from 'antd';
 import type { TextAreaRef } from 'antd/es/input/TextArea';
 import type { RefObject } from 'react';
+
 import SendIcon from '../svgs/send.svg?react';
 import { FileAction } from './files';
 import { RecordAction } from './record';
@@ -21,6 +22,7 @@ function Actions(
   },
 ) {
   const {
+    value,
     refUpload,
     isUploading,
     fileUrls,
@@ -36,7 +38,7 @@ function Actions(
   return (
     <div className="flex items-center gap-2">
       <div className="flex flex-1 gap-1">
-        {allowUpload && (
+        {allowUpload && !allowUpload.renderUpload && (
           <FileAction
             {...props}
             refUpload={refUpload}
@@ -44,6 +46,12 @@ function Actions(
             setFileUrls={setFileUrls}
           />
         )}
+        {allowUpload &&
+          allowUpload.renderUpload &&
+          allowUpload.renderUpload({
+            value,
+            refUpload,
+          })}
       </div>
       {/* <Divider type="vertical" /> */}
       <div className="flex items-center gap-2">

package/src/sender/files.tsx

@@ -5,6 +5,7 @@ import { App, Button, Dropdown, Input, Modal, Upload } from 'antd';
 import type { RefObject } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { FileView } from '../files';
 import FilesIcon from '../svgs/files.svg?react';
 import type { SenderProps } from './types';
@@ -53,7 +54,10 @@ function FileAction(
           ],
         }}
       >
-        <Button shape="circle" icon={<Icons component={PlusOutlined} className="!text-lg" />} />
+        <Button
+          shape="circle"
+          icon={<Icons component={PlusOutlined} className="h-[28px]! text-lg!" />}
+        />
       </Dropdown>
       {open && (
         <Modal
@@ -96,7 +100,7 @@ function FileUpload(
   },
 ) {
   const { allowUpload, refUpload, fileList, setFileList, uploadMaxCount } = props;
-  const { uploadAction, filesMaxCount } = allowUpload || {};
+  const { uploadAction, filesMaxCount, accept } = allowUpload || {};
 
   const { message } = App.useApp();
   const { t } = useTranslation();
@@ -104,6 +108,7 @@ function FileUpload(
   return (
     <Upload.Dragger
       action={uploadAction}
+      accept={accept}
       fileList={fileList}
       multiple
       pastable
@@ -142,12 +147,12 @@ function UploadFileItem({ file, onDelete }: { file: UploadFile; onDelete: () =>
         <FileView url={file.name} />
       )}
       {!isDone && (
-        <div className="absolute inset-0 flex items-center justify-center bg-01/80">
+        <div className="bg-01/80 absolute inset-0 flex items-center justify-center">
           {(file.percent ?? 0).toFixed(0)}%
         </div>
       )}
       <CloseOutlined
-        className="absolute right-1 top-1 hidden cursor-pointer rounded-full bg-04 text-white group-hover:block"
+        className="bg-04 absolute top-1 right-1 hidden cursor-pointer rounded-full text-white group-hover:block"
         onClick={onDelete}
       />
     </div>
@@ -157,11 +162,11 @@ function UploadFileItem({ file, onDelete }: { file: UploadFile; onDelete: () =>
 function UrlFileItem({ url, onDelete }: { url: string; onDelete: () => void }) {
   return (
     <div className="group relative">
-      <div className="flex h-[60px] w-[250px] items-center rounded bg-01 px-2">
+      <div className="bg-01 flex h-[60px] w-[250px] items-center rounded px-2">
         <div className="line-clamp-2">{url}</div>
       </div>
       <CloseOutlined
-        className="absolute right-1 top-1 hidden cursor-pointer rounded-full bg-04 text-white group-hover:block"
+        className="bg-04 absolute top-1 right-1 hidden cursor-pointer rounded-full text-white group-hover:block"
         onClick={onDelete}
       />
     </div>

package/src/sender/index.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import type { RefObject } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { Actions } from './actions';
 import { FileUpload, Files } from './files';
 import type { SenderProps, SenderRef } from './types';
@@ -28,7 +29,8 @@ function Text(
       // Enter: 提交
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
-        onSubmit?.();
+        // 兼容 onSubmit 返回 Promise 的情况：在 keydown 事件里不需要等待结果
+        void onSubmit?.();
       }
     },
     [onSubmit],
@@ -88,27 +90,27 @@ function Sender(originProps: SenderProps) {
   const [fileList, originSetFileList] = useState<UploadFile[]>([]);
 
   const handleFilesChange = useCallback(
-    ({ fileUrls, fileList }) => {
+    ({ fileUrls: urls, fileList: list }) => {
       onChange?.({
         ...value,
-        files: [...(fileList.map((file) => file.response?.data?.url) || []), ...fileUrls],
+        files: [...(list.map((file) => file.response?.data?.url) || []), ...urls],
       });
     },
     [value, onChange],
   );
 
   const setFileUrls = useCallback(
-    (fileUrls: string[]) => {
-      originSetFileUrls(fileUrls);
-      handleFilesChange({ fileUrls, fileList });
+    (urls: string[]) => {
+      originSetFileUrls(urls);
+      handleFilesChange({ fileUrls: urls, fileList });
     },
     [fileList, handleFilesChange],
   );
 
   const setFileList = useCallback(
-    (fileList: UploadFile[]) => {
-      originSetFileList(fileList);
-      handleFilesChange({ fileUrls, fileList });
+    (list: UploadFile[]) => {
+      originSetFileList(list);
+      handleFilesChange({ fileUrls, fileList: list });
     },
     [fileUrls, handleFilesChange],
   );

package/src/sender/sender.stories.tsx

@@ -1,6 +1,9 @@
 import { Sender } from '@fe-free/ai';
+import Icons, { PlusOutlined } from '@fe-free/icons';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from 'antd';
 import { useState } from 'react';
+
 import type { SenderProps, SenderValue } from './types';
 
 const meta: Meta<typeof Sender> = {
@@ -17,9 +20,9 @@ function Component(props: Omit<SenderProps, 'value' | 'onChange' | 'onSubmit'>)
   return (
     <Sender
       value={v}
-      onChange={(v) => {
-        console.log('newValue', v);
-        setV(v);
+      onChange={(nextValue) => {
+        console.log('newValue', nextValue);
+        setV(nextValue);
       }}
       onSubmit={(value) => {
         console.log('onSubmit', value);
@@ -58,6 +61,34 @@ export const AllowUpload: Story = {
   render: (props) => <Component {...props} />,
 };
 
+export const AllowUploadWithAccept: Story = {
+  args: {
+    allowUpload: {
+      uploadAction: '/api/ai-service/v1/file_upload/upload',
+      filesMaxCount: 3,
+      accept: 'image/*,.pdf',
+    },
+  },
+  render: (props) => <Component {...props} />,
+};
+
+export const RenderUpload: Story = {
+  args: {
+    allowUpload: {
+      uploadAction: '/api/ai-service/v1/file_upload/upload',
+      accept: 'image/*',
+      renderUpload: (props) => (
+        <Button
+          type="text"
+          shape="circle"
+          icon={<Icons component={PlusOutlined} onClick={() => props.refUpload.current?.click()} />}
+        />
+      ),
+    },
+  },
+  render: (props) => <Component {...props} />,
+};
+
 export const AllowSpeech: Story = {
   render: (props) => {
     const [recording, setRecording] = useState(true);

package/src/sender/types.ts

@@ -1,3 +1,6 @@
+import type { ReactNode } from 'react';
+import { RefObject } from 'react';
+
 interface SenderRef {
   focus: () => void;
 }
@@ -19,8 +22,16 @@ interface SenderProps {
   allowUpload?: {
     /** 上传文件的接口地址，约定返回的 {data: {url: string}} */
     uploadAction?: string;
+    /** 限制可上传文件类型，语法同 input.accept，如 image/*,.pdf */
+    accept?: string;
     /** files 最大数量 */
     filesMaxCount?: number;
+    /** 自定义上传按钮 */
+    renderUpload?: (props: {
+      value?: SenderValue;
+      /** refUpload.current?.click() 触发上传 */
+      refUpload: RefObject<HTMLDivElement | null>;
+    }) => ReactNode;
   };
 
   /** 是否允许语音输入 */