@fe-free/ai 4.1.21 → 4.1.23

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 4.1.23
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.23
+  - @fe-free/icons@4.1.23
+  - @fe-free/tool@4.1.23
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.21",
+  "version": "4.1.23",
   "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.21"
+    "@fe-free/core": "4.1.23"
   },
   "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.21",
-    "@fe-free/tool": "4.1.21"
+    "@fe-free/icons": "4.1.23",
+    "@fe-free/tool": "4.1.23"
   },
   "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/message_think.tsx

@@ -1,6 +1,7 @@
 import { Think } from '@ant-design/x';
 import Icons from '@fe-free/icons';
 import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
 import ThinkIcon from '../svgs/think.svg?react';
 
 interface MessageThinkProps {
@@ -18,10 +19,28 @@ function MessageThink({
   icon,
   loading,
   children,
-  expanded,
+  expanded: propsExpanded,
   onClick,
   className,
 }: MessageThinkProps) {
+  const [expanded, setExpanded] = useState(propsExpanded || false);
+
+  useEffect(() => {
+    setExpanded(propsExpanded || false);
+  }, [propsExpanded]);
+
+  useEffect(() => {
+    // 如果 propsExpanded 未定义，则根据 loading 状态设置 expanded
+    if (propsExpanded === undefined && loading !== undefined) {
+      setExpanded(loading ? true : false);
+    }
+  }, [propsExpanded, loading]);
+
+  const handleClick = useCallback(() => {
+    setExpanded(!expanded);
+    onClick?.();
+  }, [expanded, onClick]);
+
   return (
     <Think
       title={title}
@@ -29,7 +48,7 @@ function MessageThink({
       loading={loading}
       blink={loading}
       expanded={expanded}
-      onClick={onClick}
+      onClick={handleClick}
       className={classNames('fea-message-think', className)}
     >
       {children}

package/src/messages/messages.tsx

@@ -28,25 +28,34 @@ function useScrollWidth() {
 }
 
 function useScrollToBottom({ ref }) {
-  const [isNearBottom, setIsNearBottom] = useState(false);
+  const [showScrollBottom, setShowScrollBottom] = useState(false);
 
   useEffect(() => {
     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);
     };
 
     if (ref.current) {
       ref.current.addEventListener('scroll', handleScroll);
     }
 
+    // first
+    handleScroll();
+
     return () => {
       ref.current?.removeEventListener('scroll', handleScroll);
     };
   }, [ref]);
 
-  return isNearBottom;
+  return showScrollBottom;
 }
 
 function Messages<AIData>(props: MessagesProps<AIData>) {
@@ -113,7 +122,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
 
   const scrollWidth = useScrollWidth();
 
-  const isNearBottom = useScrollToBottom({ ref });
+  const showScrollBottom = useScrollToBottom({ ref });
 
   return (
     <PageLayout>
@@ -163,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>