@fe-free/ai 4.1.18 → 4.1.20

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 4.1.20
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.20
+  - @fe-free/icons@4.1.20
+  - @fe-free/tool@4.1.20
+
+## 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.20",
   "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.20"
   },
   "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/icons": "4.1.20",
+    "@fe-free/tool": "4.1.20"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/ai.stories.tsx

@@ -121,7 +121,7 @@ function Component() {
           Add New Session
         </Button>
       </div>
-      <div className="h-[800px] w-[500px] border border-red-500">
+      <div className="h-[500px] w-[500px] border border-red-500">
         <Chat
           end={
             <div

package/src/helper.tsx

@@ -42,4 +42,24 @@ function generateUUID() {
   return uuidv4();
 }
 
-export { generateUUID, RecordLoading };
+function getScrollbarWidth() {
+  // 创建一个不可见的 div 元素
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // 强制显示滚动条
+  document.body.appendChild(outer);
+
+  // 创建一个内部 div，宽度为 100%
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // 滚动条宽度 = 外部容器的宽度 - 内部内容的宽度
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+
+  // 清理 DOM
+  document.body.removeChild(outer);
+
+  return scrollbarWidth;
+}
+
+export { generateUUID, getScrollbarWidth, RecordLoading };

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

@@ -1,9 +1,13 @@
 import { PageLayout } from '@fe-free/core';
-import { useEffect, useMemo, useRef } from 'react';
+import { AngleLeftOutlined } from '@fe-free/icons';
+import { useMemoizedFn } from 'ahooks';
+import { Button } from 'antd';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getScrollbarWidth } from '../helper';
 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;
@@ -15,6 +19,37 @@ interface MessagesProps<AIData> {
   renderMessageOfAI?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
 }
 
+function useScrollWidth() {
+  const width = useMemo(() => {
+    return getScrollbarWidth();
+  }, []);
+
+  return width;
+}
+
+function useScrollToBottom({ ref }) {
+  const [isNearBottom, setIsNearBottom] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const handleScroll = () => {
+      const isNearBottom =
+        ref.current?.scrollTop + ref.current?.clientHeight >= ref.current?.scrollHeight - 200;
+      setIsNearBottom(isNearBottom);
+    };
+    ref.current.addEventListener('scroll', handleScroll);
+
+    return () => {
+      ref.current.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return isNearBottom;
+}
+
 function Messages<AIData>(props: MessagesProps<AIData>) {
   const {
     refList,
@@ -32,8 +67,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
     return messages?.[messages.length - 1];
   }, [messages]);
 
-  // 首次和更新时滚动到最新消息
-  useEffect(() => {
+  const scrollToBottom = useMemoizedFn(() => {
     if (!lastMessage?.uuid) {
       return;
     }
@@ -42,10 +76,15 @@ 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]);
+  });
+
+  // 首次和更新时滚动到最新消息
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
 
   // 数据更新是，如果 dom 处于可视区域，则滚动
   useEffect(() => {
@@ -66,17 +105,34 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
       // 如果最后一个元素可见，则滚动到底部
       const isVisible = top < listBottom && bottom > listTop;
       if (isVisible) {
-        element.scrollIntoView({ behavior: 'smooth' });
+        scrollToBottom();
       }
     }, 100);
-  }, [lastMessage?.updatedAt, lastMessage?.uuid, ref]);
+  }, [lastMessage?.updatedAt, lastMessage?.uuid, ref, scrollToBottom]);
+
+  const scrollWidth = useScrollWidth();
+
+  const isNearBottom = useScrollToBottom({ ref });
 
   return (
     <PageLayout>
-      <div ref={ref} className="flex h-full flex-col overflow-y-auto">
+      <div
+        ref={ref}
+        className="fea-messages-scroll relative flex h-full flex-col overflow-y-auto overflow-x-hidden"
+        style={{
+          transform: `translateZ(0)`,
+        }}
+      >
         {messages?.map((message) => {
           return (
-            <div key={message.uuid} data-uuid={message.uuid} className="flex flex-col">
+            <div
+              key={message.uuid}
+              data-uuid={message.uuid}
+              className="flex flex-col"
+              style={{
+                marginRight: `-${scrollWidth}px`,
+              }}
+            >
               {renderMessage ? (
                 renderMessage?.({ message })
               ) : (
@@ -97,6 +153,19 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
             </div>
           );
         })}
+        <div className="sticky bottom-2 left-0 right-0 flex justify-center">
+          <Button
+            shape="circle"
+            icon={<AngleLeftOutlined rotate={-90} />}
+            onClick={() => {
+              scrollToBottom();
+            }}
+            className="bg-white shadow-lg"
+            style={{
+              transform: `translateY(${isNearBottom ? 30 : 0}px) scale(${isNearBottom ? 0.1 : 1})`,
+            }}
+          />
+        </div>
       </div>
     </PageLayout>
   );

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(