@fe-free/ai 4.1.15 → 4.1.17

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 4.1.17
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.17
+  - @fe-free/icons@4.1.17
+  - @fe-free/tool@4.1.17
+
+## 4.1.16
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.16
+  - @fe-free/icons@4.1.16
+  - @fe-free/tool@4.1.16
+
 ## 4.1.15
 
 ### Patch Changes

package/package.json

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

package/src/files/index.tsx

@@ -1,12 +1,23 @@
 import { FileCard } from '@fe-free/core';
-import { Image } from 'antd';
+import { Image, Typography } from 'antd';
+import classNames from 'classnames';
 import './style.scss';
 
 function isUrl(url: string) {
   return url.startsWith('http') || url.startsWith('https');
 }
 
-function FileView({ url, isImage: propsIsImage }: { url: string; isImage?: boolean }) {
+function FileView({
+  url,
+  isImage: propsIsImage,
+  size,
+  className,
+}: {
+  url: string;
+  size?: number;
+  isImage?: boolean;
+  className?: string;
+}) {
   const isImage = propsIsImage ?? FileCard.isImage(url);
 
   // 判断是 url 才 decodeURIComponent
@@ -14,13 +25,17 @@ function FileView({ url, isImage: propsIsImage }: { url: string; isImage?: boole
   const name = decodedUrl.split('/').pop() || decodedUrl;
 
   return (
-    <div className="fea-file-view">
+    <div className={classNames('fea-file-view bg-01', className)}>
       {isImage ? (
         <Image width={60} height={60} src={url} />
       ) : (
-        <div className="flex h-[60px] w-[250px] items-center rounded bg-01 px-1">
-          <div className="min-w-0">
-            <FileCard name={name} />
+        <div className="flex h-[60px] w-[250px] items-center rounded px-1">
+          <div className="flex min-w-0 items-center gap-1">
+            <FileCard.FileIcon name={name} className="text-4xl" />
+            <div className="flex flex-1 flex-col overflow-hidden">
+              {name && <Typography.Text ellipsis={{ tooltip: name }}>{name}</Typography.Text>}
+              {size && <div className="text-sm text-03">{FileCard.getFileSize(size)}</div>}
+            </div>
           </div>
         </div>
       )}

package/src/markdown/custom_markdown.stories.tsx

@@ -11,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof CustomMarkdown>;
 
-export const Default: Story = {
+export const CustomThink: Story = {
   args: {
     content: `<think>
 好的，我现在需要处理用户的问题。用户一开始用中文打招呼“你好”，然后我的回应应该遵循之前设定的角色和技能。首先，我需要确认用户是否是前端工程师求职者，或者他们需要哪方面的帮助。根据角色设定，我应该先了解他们的具体情况，比如技术栈、工作年限、项目经验和目标城市。

package/src/messages/message_actions.tsx

@@ -8,7 +8,7 @@ import {
   LikeOutlined,
 } from '@fe-free/icons';
 import { App, Button, Tooltip } from 'antd';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 function MessageActionOfCopy({ value, onCopied }: { value: string; onCopied?: () => void }) {
   const [active, setActive] = useState(false);
@@ -44,6 +44,10 @@ function MessageActionOfLike({
   const { message } = App.useApp();
   const [active, setActive] = useState(propsActive || false);
 
+  useEffect(() => {
+    setActive(!!propsActive);
+  }, [propsActive]);
+
   const handleClick = useCallback(async () => {
     await Promise.resolve(onClick?.(!active));
     setActive(!active);
@@ -73,6 +77,10 @@ function MessageActionOfDislike({
   const [active, setActive] = useState(propsActive || false);
   const { message } = App.useApp();
 
+  useEffect(() => {
+    setActive(!!propsActive);
+  }, [propsActive]);
+
   const handleClick = useCallback(async () => {
     await Promise.resolve(onClick?.(!active));
     setActive(!active);
@@ -92,10 +100,46 @@ function MessageActionOfDislike({
   );
 }
 
+function MessageActionOfLinkAndDislike({
+  value: propsValue,
+  onChange,
+}: {
+  value?: -1 | 0 | 1;
+  onChange?: (value: -1 | 0 | 1) => void;
+}) {
+  const [value, setValue] = useState<(-1 | 0 | 1) | undefined>(propsValue);
+
+  useEffect(() => {
+    setValue(propsValue);
+  }, [propsValue]);
+
+  return (
+    <>
+      <MessageActionOfLike
+        active={value === 1}
+        onClick={async () => {
+          const newValue = value === 1 ? 0 : 1;
+          await Promise.resolve(onChange?.(newValue));
+          setValue(newValue);
+        }}
+      />
+      <MessageActionOfDislike
+        active={value === -1}
+        onClick={async () => {
+          const newValue = value === -1 ? 0 : -1;
+          await Promise.resolve(onChange?.(newValue));
+          setValue(newValue);
+        }}
+      />
+    </>
+  );
+}
+
 const MessageActions = {
   Copy: MessageActionOfCopy,
   Like: MessageActionOfLike,
   Dislike: MessageActionOfDislike,
+  LinkAndDislike: MessageActionOfLinkAndDislike,
 };
 
 export { MessageActions };

package/src/messages/messages.stories.tsx

@@ -38,7 +38,6 @@ export const DeepSeek: Story = {
     title: '思考中...',
     loading: true,
     children: '这是 Think 的内容',
-    type: 'deepSeek',
   },
 };
 

package/src/messages/messages.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import { EnumChatMessageType, type ChatMessage } from '../store/types';
 
 interface MessagesProps<AIData> {
+  refList?: React.RefObject<HTMLDivElement>;
   messages?: ChatMessage<AIData>[];
   /** 含所有 */
   renderMessage?: (props: { message: ChatMessage<AIData> }) => React.ReactNode;
@@ -15,10 +16,17 @@ interface MessagesProps<AIData> {
 }
 
 function Messages<AIData>(props: MessagesProps<AIData>) {
-  const { messages, renderMessage, renderMessageOfSystem, renderMessageOfUser, renderMessageOfAI } =
-    props;
+  const {
+    refList,
+    messages,
+    renderMessage,
+    renderMessageOfSystem,
+    renderMessageOfUser,
+    renderMessageOfAI,
+  } = props;
 
-  const ref = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const ref = refList || innerRef;
 
   const lastMessage = useMemo(() => {
     return messages?.[messages.length - 1];
@@ -55,7 +63,7 @@ function Messages<AIData>(props: MessagesProps<AIData>) {
     if (isVisible) {
       element.scrollIntoView({ behavior: 'smooth' });
     }
-  }, [lastMessage?.updatedAt, lastMessage?.uuid]);
+  }, [lastMessage?.updatedAt, lastMessage?.uuid, ref]);
 
   return (
     <PageLayout>

package/src/store/types.ts

@@ -20,6 +20,7 @@ interface ChatMessageOfUser {
 
 interface ChatMessageOfAI<AIData> {
   data?: AIData;
+  error?: any;
   // 其他字段，根据业务需要使用
   session_id?: string;
 }

package/src/style.scss

@@ -10,6 +10,10 @@
     }
   }
 
+  .ant-codeHighlighter-header {
+    padding: 8px 12px;
+  }
+
   &.x-markdown-light pre code:not([class$='-highlightCode-code'] pre code) {
     padding: 0 !important;
     background-color: transparent !important;