@fe-free/ai 4.1.19 → 4.1.20

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.19",
+  "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.19"
+    "@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/tool": "4.1.19",
-    "@fe-free/icons": "4.1.19"
+    "@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/messages/messages.tsx

@@ -1,5 +1,9 @@
 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> {
@@ -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;
     }
@@ -45,7 +79,12 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
         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', block: 'end' });
+        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>
   );