@fe-free/ai 4.1.37 → 4.1.38

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @fe-free/ai
 
+## 4.1.38
+
+### Patch Changes
+
+- feat: ai
+- Updated dependencies
+  - @fe-free/core@4.1.38
+  - @fe-free/icons@4.1.38
+  - @fe-free/tool@4.1.38
+
 ## 4.1.37
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.37",
+  "version": "4.1.38",
   "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.37"
+    "@fe-free/core": "4.1.38"
   },
   "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.37",
-    "@fe-free/tool": "4.1.37"
+    "@fe-free/icons": "4.1.38",
+    "@fe-free/tool": "4.1.38"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/helper/index.tsx

@@ -42,24 +42,4 @@ function generateUUID() {
   return uuidv4();
 }
 
-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 };
+export { generateUUID, RecordLoading };

package/src/messages/messages.tsx

@@ -1,30 +1,21 @@
-import { PageLayout } from '@fe-free/core';
+import { PageLayout, ScrollFixed } from '@fe-free/core';
 import { ArrowDownOutlined } 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> {
+interface MessagesProps<UserData, AIData> {
   refList?: React.RefObject<HTMLDivElement | null>;
-  messages?: ChatMessage<AIData>[];
+  messages?: ChatMessage<UserData, AIData>[];
   /** 含所有 */
-  renderMessage?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  renderMessage?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
   /** 系统消息 */
-  renderMessageOfSystem?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  renderMessageOfSystem?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
   /** 用户消息 */
-  renderMessageOfUser?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
+  renderMessageOfUser?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
   /** AI消息 */
-  renderMessageOfAI?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
-}
-
-function useScrollWidth() {
-  const width = useMemo(() => {
-    return getScrollbarWidth();
-  }, []);
-
-  return width;
+  renderMessageOfAI?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
 }
 
 function useScrollToBottom({ ref }) {
@@ -58,7 +49,7 @@ function useScrollToBottom({ ref }) {
   return showScrollBottom;
 }
 
-function Messages<AIData>(props: MessagesProps<AIData>) {
+function Messages<UserData, AIData>(props: MessagesProps<UserData, AIData>) {
   const {
     refList,
     messages,
@@ -120,14 +111,12 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
     }, 100);
   }, [lastMessage?.updatedAt, lastMessage?.uuid, ref, scrollToBottom]);
 
-  const scrollWidth = useScrollWidth();
-
   const showScrollBottom = useScrollToBottom({ ref });
 
   return (
     <PageLayout>
-      <div
-        ref={ref}
+      <ScrollFixed
+        refScroll={ref}
         className="fea-messages-scroll relative flex h-full flex-col overflow-y-auto overflow-x-hidden"
         style={{
           transform: `translateZ(0)`,
@@ -135,14 +124,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
       >
         {messages?.map((message) => {
           return (
-            <div
-              key={message.uuid}
-              data-uuid={message.uuid}
-              className="flex flex-col"
-              style={{
-                marginRight: `-${scrollWidth}px`,
-              }}
-            >
+            <div key={message.uuid} data-uuid={message.uuid} className="flex flex-col">
               {renderMessage ? (
                 renderMessage?.({ message })
               ) : (
@@ -172,13 +154,13 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
             }}
             className="bg-white text-2xl shadow-[0px_1px_12px_0px_#2921391F]"
             style={{
-              transform: `translateY(${showScrollBottom ? 0 : 30}px) scale(${showScrollBottom ? 1 : 0.1})`,
+              transform: `translateY(${showScrollBottom ? 0 : 30}px) scale(${showScrollBottom ? 1 : 0})`,
               width: 44,
               height: 44,
             }}
           />
         </div>
-      </div>
+      </ScrollFixed>
     </PageLayout>
   );
 }

package/src/store/index.ts

@@ -11,6 +11,14 @@ interface ChatStore<
   AIData,
   ContextData extends Record<string, any>,
 > {
+  /** 存放Chat的上下文数据 */
+  contextData?: ContextData;
+  setContextData: (contextData?: ContextData) => void;
+  setContextDataWithField: (
+    field: keyof ContextData,
+    contextDataValue: ContextData[keyof ContextData],
+  ) => void;
+
   senderValue?: UserData;
   setSenderValue: (senderValue?: UserData) => void;
 
@@ -18,10 +26,7 @@ interface ChatStore<
   setMessages: (messages: ChatMessage<UserData, AIData>[]) => void;
   addMessage: (message: ChatMessage<UserData, AIData>) => void;
   updateMessage: (message: ChatMessage<UserData, AIData>) => void;
-
-  /** 存放Chat的上下文数据 */
-  contextData?: ContextData;
-  setContextData: (contextData?: ContextData) => void;
+  setMessagesBefore: (messages: ChatMessage<UserData, AIData>[]) => void;
 
   reset: () => void;
 }
@@ -29,13 +34,27 @@ interface ChatStore<
 function createChatStore<
   UserData extends BaseSenderValue,
   AIData,
-  ContextData extends Record<string, any>,
+  ContextData extends Record<string, any> = any,
 >() {
   const useChatStore = create<ChatStore<UserData, AIData, ContextData>>((set, get, store) => ({
+    contextData: undefined,
+    setContextData: (contextData) => {
+      set({ contextData });
+    },
+    setContextDataWithField: (field, contextDataValue) => {
+      const preContextData = get().contextData;
+      set({
+        contextData: {
+          ...preContextData,
+          [field]: contextDataValue,
+        } as ContextData,
+      });
+    },
     senderValue: undefined,
     setSenderValue: (senderValue) => {
       set(() => ({ senderValue }));
     },
+
     messages: [],
     setMessages: (messages) => {
       set(() => ({
@@ -74,9 +93,19 @@ function createChatStore<
         }),
       }));
     },
-    contextData: undefined,
-    setContextData: (contextData) => {
-      set(() => ({ contextData }));
+    setMessagesBefore: (messagesBefore) => {
+      const messages = get().messages;
+
+      const lastMessageBefore = messagesBefore[messagesBefore.length - 1];
+      const index = messages.findIndex((message) => message.uuid === lastMessageBefore.uuid);
+
+      // 如果 index 非 -1，则合并
+      // 如果 index -1，-1 + 1 为 0，即全取 message，也适用
+      const newMessages = [...messagesBefore, ...messages.slice(index + 1)];
+
+      set({
+        messages: newMessages,
+      });
     },
     reset: () => {
       set(store.getInitialState());