@fe-free/ai 4.1.18 → 4.1.19

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @fe-free/ai
 
+## 4.1.19
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.19
+  - @fe-free/icons@4.1.19
+  - @fe-free/tool@4.1.19
+
 ## 4.1.18
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.18",
+  "version": "4.1.19",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -19,7 +19,7 @@
     "lodash-es": "^4.17.21",
     "uuid": "^13.0.0",
     "zustand": "^4.5.7",
-    "@fe-free/core": "4.1.18"
+    "@fe-free/core": "4.1.19"
   },
   "peerDependencies": {
     "antd": "^5.27.1",
@@ -29,8 +29,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "4.1.18",
-    "@fe-free/tool": "4.1.18"
+    "@fe-free/tool": "4.1.19",
+    "@fe-free/icons": "4.1.19"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/m_sender/actions.tsx

@@ -7,7 +7,7 @@ import type { MSenderProps } from './types';
 
 function Actions(
   props: MSenderProps & {
-    refText: RefObject<HTMLTextAreaElement>;
+    refText: RefObject<HTMLTextAreaElement | null>;
     type: 'input' | 'record';
     setType: (type: 'input' | 'record') => void;
   },

package/src/m_sender/index.tsx

@@ -6,7 +6,7 @@ import { Actions } from './actions';
 import { RecordAction } from './record';
 import type { MSenderProps, MSenderRef } from './types';
 
-function Text(props: MSenderProps & { refText: RefObject<HTMLTextAreaElement> }) {
+function Text(props: MSenderProps & { refText: RefObject<HTMLTextAreaElement | null> }) {
   const { value, onChange, placeholder, refText, autoFocus } = props;
 
   return (

package/src/messages/messages.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import { EnumChatMessageType, type ChatMessage } from '../store/types';
 
 interface MessagesProps<AIData> {
-  refList?: React.RefObject<HTMLDivElement>;
+  refList?: React.RefObject<HTMLDivElement | null>;
   messages?: ChatMessage<AIData>[];
   /** 含所有 */
   renderMessage?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
@@ -42,7 +42,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
     setTimeout(() => {
       const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
       if (element) {
-        element.scrollIntoView({ behavior: 'smooth' });
+        element.scrollIntoView({ behavior: 'smooth', block: 'end' });
       }
     }, 100);
   }, [lastMessage?.uuid]);
@@ -66,7 +66,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
       // 如果最后一个元素可见，则滚动到底部
       const isVisible = top < listBottom && bottom > listTop;
       if (isVisible) {
-        element.scrollIntoView({ behavior: 'smooth' });
+        element.scrollIntoView({ behavior: 'smooth', block: 'end' });
       }
     }, 100);
   }, [lastMessage?.updatedAt, lastMessage?.uuid, ref]);

package/src/sender/actions.tsx

@@ -1,7 +1,7 @@
 import Icons from '@fe-free/icons';
 import type { UploadFile } from 'antd';
-import { Button, Divider } from 'antd';
-import { useCallback, type RefObject } from 'react';
+import { Button } from 'antd';
+import type { RefObject } from 'react';
 import SendIcon from '../svgs/send.svg?react';
 import { FileAction } from './files';
 import { RecordAction } from './record';
@@ -9,65 +9,29 @@ import type { SenderProps } from './types';
 
 function Actions(
   props: SenderProps & {
-    refText: RefObject<HTMLTextAreaElement>;
-    refUpload: RefObject<HTMLDivElement>;
+    refText: RefObject<HTMLTextAreaElement | null>;
+    refUpload: RefObject<HTMLDivElement | null>;
     isUploading: boolean;
     fileList: UploadFile[];
     setFileList: (fileList: UploadFile[]) => void;
     fileUrls: string[];
     setFileUrls: (fileUrls: string[]) => void;
+    onSubmit: () => Promise<void>;
   },
 ) {
   const {
-    refText,
-    loading,
-    onSubmit,
-    value,
-    onChange,
     refUpload,
     isUploading,
-    setFileList,
     fileUrls,
     setFileUrls,
     allowUpload,
     allowSpeech,
+    loading,
+    onSubmit,
   } = props;
 
   const isLoading = loading || isUploading;
 
-  const handleSubmit = useCallback(async () => {
-    if (isLoading || allowSpeech?.recording) {
-      return;
-    }
-
-    const newValue = {
-      ...value,
-      text: value?.text?.trim(),
-    };
-
-    // 有内容才提交
-    if (newValue.text || (newValue.files && newValue.files.length > 0)) {
-      await Promise.resolve(onSubmit?.(newValue));
-
-      // reset
-      setFileList([]);
-      setFileUrls([]);
-      onChange?.({});
-
-      // focus
-      refText.current?.focus();
-    }
-  }, [
-    isLoading,
-    allowSpeech?.recording,
-    value,
-    onSubmit,
-    setFileList,
-    setFileUrls,
-    onChange,
-    refText,
-  ]);
-
   return (
     <div className="flex items-center gap-2">
       <div className="flex flex-1 gap-1">
@@ -80,7 +44,7 @@ function Actions(
           />
         )}
       </div>
-      <Divider type="vertical" />
+      {/* <Divider type="vertical" /> */}
       <div className="flex items-center gap-2">
         {allowSpeech && <RecordAction {...props} />}
         <Button
@@ -89,7 +53,7 @@ function Actions(
           icon={<Icons component={SendIcon} className="!text-lg" />}
           loading={isLoading}
           // disabled={loading}
-          onClick={handleSubmit}
+          onClick={onSubmit}
         />
       </div>
     </div>

package/src/sender/files.tsx

@@ -11,7 +11,7 @@ import type { SenderProps } from './types';
 
 function FileAction(
   props: SenderProps & {
-    refUpload: RefObject<HTMLDivElement>;
+    refUpload: RefObject<HTMLDivElement | null>;
     fileUrls: string[];
     setFileUrls: (fileUrls: string[]) => void;
   },
@@ -89,7 +89,7 @@ function FileAction(
 
 function FileUpload(
   props: SenderProps & {
-    refUpload: RefObject<HTMLDivElement>;
+    refUpload: RefObject<HTMLDivElement | null>;
     fileList: UploadFile[];
     setFileList: (fileList: UploadFile[]) => void;
     uploadMaxCount?: number;

package/src/sender/index.tsx

@@ -9,8 +9,29 @@ import { Actions } from './actions';
 import { FileUpload, Files } from './files';
 import type { SenderProps, SenderRef } from './types';
 
-function Text(props: SenderProps & { refText: RefObject<HTMLTextAreaElement> }) {
-  const { value, onChange, placeholder, refText } = props;
+function Text(
+  props: SenderProps & {
+    refText: RefObject<HTMLTextAreaElement | null>;
+    onSubmit?: () => void;
+  },
+) {
+  const { value, onChange, placeholder, refText, onSubmit } = props;
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Shift + Enter: 换行（默认行为）
+      if (e.key === 'Enter' && e.shiftKey) {
+        return;
+      }
+
+      // Enter: 提交
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        onSubmit?.();
+      }
+    },
+    [onSubmit],
+  );
 
   return (
     <Input.TextArea
@@ -19,6 +40,7 @@ function Text(props: SenderProps & { refText: RefObject<HTMLTextAreaElement> })
       onChange={(e) => {
         onChange?.({ ...value, text: e.target.value });
       }}
+      onKeyDown={handleKeyDown}
       placeholder={placeholder}
       autoSize={{ minRows: 2, maxRows: 8 }}
       className="mb-1 px-1 py-0"
@@ -32,21 +54,22 @@ function Sender(originProps: SenderProps) {
   const props = useMemo(() => {
     return {
       placeholder:
-        originProps.placeholder ?? t('@fe-free/ai.sender.describeYourQuestion', '描述你的问题'),
+        originProps.placeholder ??
+        t('@fe-free/ai.sender.describeYourQuestion', '描述你的问题， shift + enter 换行'),
       ...originProps,
     };
   }, [originProps, t]);
 
   const refText = useRef<HTMLTextAreaElement>(null);
 
-  const { value, onChange, allowUpload } = props;
+  const { value, onChange, allowUpload, onSubmit, loading, allowSpeech } = props;
   const { filesMaxCount } = allowUpload || {};
 
   const refContainer = useRef<HTMLDivElement>(null);
   const refUpload = useRef<HTMLDivElement>(null);
   const [dragHover, setDragHover] = useState(false);
 
-  useDrop(refContainer, {
+  useDrop(allowUpload ? refContainer : null, {
     onDragEnter: () => {
       setDragHover(true);
     },
@@ -94,6 +117,41 @@ function Sender(originProps: SenderProps) {
     return fileList.some((file) => !file.response?.data?.url);
   }, [fileList]);
 
+  const handleSubmit = useCallback(async () => {
+    const isLoading = loading || isUploading;
+
+    if (isLoading || allowSpeech?.recording) {
+      return;
+    }
+
+    const newValue = {
+      ...value,
+      text: value?.text?.trim(),
+    };
+
+    // 有内容才提交
+    if (newValue.text || (newValue.files && newValue.files.length > 0)) {
+      await Promise.resolve(onSubmit?.(newValue));
+
+      // reset
+      setFileList([]);
+      setFileUrls([]);
+      onChange?.({});
+
+      // focus
+      refText.current?.focus();
+    }
+  }, [
+    loading,
+    isUploading,
+    allowSpeech?.recording,
+    value,
+    onSubmit,
+    setFileList,
+    setFileUrls,
+    onChange,
+  ]);
+
   return (
     <div className="fea-sender-wrap">
       <div
@@ -116,7 +174,7 @@ function Sender(originProps: SenderProps) {
           setFileUrls={setFileUrls}
         />
         <div className="flex">
-          <Text {...props} refText={refText} />
+          <Text {...props} refText={refText} onSubmit={handleSubmit} />
         </div>
         <Actions
           {...props}
@@ -127,14 +185,17 @@ function Sender(originProps: SenderProps) {
           setFileList={setFileList}
           fileUrls={fileUrls}
           setFileUrls={setFileUrls}
+          onSubmit={handleSubmit}
         />
-        <FileUpload
-          {...props}
-          refUpload={refUpload}
-          fileList={fileList}
-          setFileList={setFileList}
-          uploadMaxCount={filesMaxCount ? filesMaxCount - fileUrls.length : undefined}
-        />
+        {allowUpload && (
+          <FileUpload
+            {...props}
+            refUpload={refUpload}
+            fileList={fileList}
+            setFileList={setFileList}
+            uploadMaxCount={filesMaxCount ? filesMaxCount - fileUrls.length : undefined}
+          />
+        )}
       </div>
       <div className="mt-1 text-center text-xs text-03">
         {t(