@fe-free/ai 4.1.22 → 4.1.24

package/CHANGELOG.md

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

package/package.json

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

package/src/ai.stories.tsx

@@ -5,6 +5,7 @@ import {
   EnumChatMessageStatus,
   EnumChatMessageType,
   generateUUID,
+  Markdown,
   MessageActions,
   Messages,
   MSender,
@@ -121,7 +122,7 @@ function Component() {
           Add New Session
         </Button>
       </div>
-      <div className="h-[800px] w-[500px] border border-red-500">
+      <div className="h-[800px] w-[500px] max-w-full border border-red-500">
         <Chat
           end={
             <div
@@ -160,11 +161,11 @@ function Component() {
             }}
             renderMessageOfAI={({ message }) => {
               return (
-                <div className="p-2">
+                <div className="max-w-full p-2">
                   <div>
                     status: {message.status} session_id: {message.ai?.session_id}
                   </div>
-                  <pre className="whitespace-pre-wrap">{message.ai?.data?.text}</pre>
+                  <Markdown content={message.ai?.data?.text || ''} />
                   <div className="flex gap-2">
                     <MessageActions.Copy value={message.ai?.data?.text || ''} />
                     <MessageActions.Like

package/src/m_sender/actions.tsx

@@ -45,7 +45,9 @@ function Actions(
           type="primary"
           shape="circle"
           icon={<Icons component={IconRecord} />}
-          onClick={() => setType('record')}
+          onClick={() => {
+            setType('record');
+          }}
         />
       ) : (
         <Button

package/src/m_sender/index.tsx

@@ -63,7 +63,7 @@ function MSender(originProps: MSenderProps) {
           <Text {...props} refText={refText} />
         </div>
         <Actions {...props} refText={refText} type={type} setType={setType} />
-        {type === 'record' && <RecordAction {...props} setType={setType} />}
+        {type === 'record' && <RecordAction {...props} refText={refText} setType={setType} />}
       </div>
       {statement && <div className="mt-1 text-center text-xs text-04">*{statement}</div>}
     </div>

package/src/m_sender/record.tsx

@@ -1,13 +1,16 @@
 import Icons from '@fe-free/icons';
 import { Button } from 'antd';
 import classNames from 'classnames';
+import type { RefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { RecordLoading } from '../helper';
 import IconKeyboard from '../svgs/keyboard.svg?react';
 import type { MSenderProps } from './types';
 
-function RecordAction(props: MSenderProps & { setType }) {
-  const { allowSpeech, setType } = props;
+function RecordAction(
+  props: MSenderProps & { setType; refText: RefObject<HTMLTextAreaElement | null> },
+) {
+  const { allowSpeech, setType, refText } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const touchStartYRef = useRef<number>(0);
@@ -126,17 +129,20 @@ function RecordAction(props: MSenderProps & { setType }) {
 
   return (
     <div
-      className={classNames('absolute inset-0 flex items-center justify-center rounded-xl', {
-        'bg-red-500': isCancel,
-        'bg-primary': !isCancel,
-      })}
+      className={classNames(
+        'fea-m-sender-record absolute inset-0 flex items-center justify-center rounded-xl',
+        {
+          'bg-red-500': isCancel,
+          'bg-primary': !isCancel,
+        },
+      )}
     >
       {isRecording ? (
         <>
           <RecordLoading count={30} gap={4} />
           {isCancel && <div className="absolute top-0 -mt-[2.5em] text-red08">松开取消</div>}
           {!isCancel && (
-            <div className="absolute top-0 -mt-[2.5em] text-03">松开发送，上移取消</div>
+            <div className="absolute top-0 -mt-[2.5em] text-03">松开发送&nbsp;&nbsp;上移取消</div>
           )}
         </>
       ) : (
@@ -150,6 +156,8 @@ function RecordAction(props: MSenderProps & { setType }) {
           icon={<Icons component={IconKeyboard} className="!text-xl text-white" />}
           onClick={() => {
             setType('input');
+
+            refText.current?.focus();
           }}
           className="absolute right-4"
         />

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}