@fe-free/ai 4.1.20 → 4.1.22

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 4.1.22
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.22
+  - @fe-free/icons@4.1.22
+  - @fe-free/tool@4.1.22
+
+## 4.1.21
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.21
+  - @fe-free/icons@4.1.21
+  - @fe-free/tool@4.1.21
+
 ## 4.1.20
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.20",
+  "version": "4.1.22",
   "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.20"
+    "@fe-free/core": "4.1.22"
   },
   "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.20",
-    "@fe-free/tool": "4.1.20"
+    "@fe-free/icons": "4.1.22",
+    "@fe-free/tool": "4.1.22"
   },
   "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-[500px] w-[500px] border border-red-500">
+      <div className="h-[800px] w-[500px] border border-red-500">
         <Chat
           end={
             <div

package/src/messages/messages.tsx

@@ -28,26 +28,34 @@ function useScrollWidth() {
 }
 
 function useScrollToBottom({ ref }) {
-  const [isNearBottom, setIsNearBottom] = useState(false);
+  const [showScrollBottom, setShowScrollBottom] = useState(false);
 
   useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
     const handleScroll = () => {
+      if (!ref.current) {
+        return;
+      }
+
+      const { scrollTop, clientHeight, scrollHeight } = ref.current;
+
       const isNearBottom =
-        ref.current?.scrollTop + ref.current?.clientHeight >= ref.current?.scrollHeight - 200;
-      setIsNearBottom(isNearBottom);
+        scrollHeight > clientHeight && scrollTop + clientHeight + 200 <= scrollHeight;
+      setShowScrollBottom(isNearBottom);
     };
-    ref.current.addEventListener('scroll', handleScroll);
+
+    if (ref.current) {
+      ref.current.addEventListener('scroll', handleScroll);
+    }
+
+    // first
+    handleScroll();
 
     return () => {
-      ref.current.removeEventListener('scroll', handleScroll);
+      ref.current?.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [ref]);
 
-  return isNearBottom;
+  return showScrollBottom;
 }
 
 function Messages<AIData>(props: MessagesProps<AIData>) {
@@ -83,8 +91,10 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
 
   // 首次和更新时滚动到最新消息
   useEffect(() => {
-    scrollToBottom();
-  }, [scrollToBottom]);
+    if (lastMessage?.uuid) {
+      scrollToBottom();
+    }
+  }, [scrollToBottom, lastMessage?.uuid]);
 
   // 数据更新是，如果 dom 处于可视区域，则滚动
   useEffect(() => {
@@ -112,7 +122,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
 
   const scrollWidth = useScrollWidth();
 
-  const isNearBottom = useScrollToBottom({ ref });
+  const showScrollBottom = useScrollToBottom({ ref });
 
   return (
     <PageLayout>
@@ -153,7 +163,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
             </div>
           );
         })}
-        <div className="sticky bottom-2 left-0 right-0 flex justify-center">
+        <div className="sticky bottom-2 mx-auto flex justify-center">
           <Button
             shape="circle"
             icon={<AngleLeftOutlined rotate={-90} />}
@@ -162,7 +172,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
             }}
             className="bg-white shadow-lg"
             style={{
-              transform: `translateY(${isNearBottom ? 30 : 0}px) scale(${isNearBottom ? 0.1 : 1})`,
+              transform: `translateY(${showScrollBottom ? 0 : 30}px) scale(${showScrollBottom ? 1 : 0.1})`,
             }}
           />
         </div>