@fe-free/ai 5.0.0 → 6.0.2

package/src/messages/messages.stories.tsx

@@ -0,0 +1,44 @@
+import { MessageThink } from '@fe-free/ai';
+import { CheckCircleOutlined } from '@fe-free/icons';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof MessageThink> = {
+  title: '@fe-free/ai/MessageThink',
+  component: MessageThink,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MessageThink>;
+
+export const Default: Story = {
+  args: {
+    title: '思考',
+    children: '这是 Think 的内容',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    title: '思考中...',
+    loading: true,
+    children: '这是 Think 的内容',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    title: '思考',
+    children: '这是 Think 的内容',
+    icon: <CheckCircleOutlined className="text-green08" />,
+  },
+};
+
+export const DeepSeek: Story = {
+  args: {
+    title: '思考中...',
+    loading: true,
+    children: '这是 Think 的内容',
+  },
+};
+
+export default meta;

package/src/messages/messages.tsx

@@ -0,0 +1,169 @@
+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 { EnumChatMessageType, type ChatMessage } from '../store/types';
+
+interface MessagesProps<UserData, AIData> {
+  refList?: React.RefObject<HTMLDivElement | null>;
+  messages?: ChatMessage<UserData, AIData>[];
+  /** 含所有 */
+  renderMessage?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+  /** 系统消息 */
+  renderMessageOfSystem?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+  /** 用户消息 */
+  renderMessageOfUser?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+  /** AI消息 */
+  renderMessageOfAI?: (props: { message: ChatMessage<UserData, AIData> }) => React.ReactNode;
+}
+
+function useScrollToBottom({ ref }) {
+  const [showScrollBottom, setShowScrollBottom] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!ref.current) {
+        return;
+      }
+
+      const { scrollTop, clientHeight, scrollHeight } = ref.current;
+
+      const 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 showScrollBottom;
+}
+
+function Messages<UserData, AIData>(props: MessagesProps<UserData, AIData>) {
+  const {
+    refList,
+    messages,
+    renderMessage,
+    renderMessageOfSystem,
+    renderMessageOfUser,
+    renderMessageOfAI,
+  } = props;
+
+  const innerRef = useRef<HTMLDivElement>(null);
+  const ref = refList || innerRef;
+
+  const lastMessage = useMemo(() => {
+    return messages?.[messages.length - 1];
+  }, [messages]);
+
+  const scrollToBottom = useMemoizedFn(() => {
+    if (!lastMessage?.uuid) {
+      return;
+    }
+
+    // 延迟下，因为 markdown 可能没渲染出来
+    setTimeout(() => {
+      const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      }
+    }, 100);
+  });
+
+  // 首次和更新时滚动到最新消息
+  useEffect(() => {
+    if (lastMessage?.uuid) {
+      scrollToBottom();
+    }
+  }, [scrollToBottom, lastMessage?.uuid]);
+
+  // 数据更新是，如果 dom 处于可视区域，则滚动
+  useEffect(() => {
+    if (!lastMessage?.updatedAt || !lastMessage?.uuid || !ref.current) {
+      return;
+    }
+
+    // 延迟下，因为 markdown 可能没渲染出来
+    setTimeout(() => {
+      const element = document.querySelector(`[data-uuid="${lastMessage.uuid}"]`);
+      if (!element) {
+        return;
+      }
+
+      const { top: listTop, bottom: listBottom } = ref.current!.getBoundingClientRect();
+      const { top, bottom } = element.getBoundingClientRect();
+
+      // 如果最后一个元素可见，则滚动到底部
+      const isVisible = top < listBottom && bottom > listTop;
+      if (isVisible) {
+        scrollToBottom();
+      }
+    }, 100);
+  }, [lastMessage?.updatedAt, lastMessage?.uuid, ref, scrollToBottom]);
+
+  const showScrollBottom = useScrollToBottom({ ref });
+
+  return (
+    <PageLayout>
+      <ScrollFixed
+        refScroll={ref}
+        className="fea-messages-scroll relative flex h-full flex-col overflow-x-hidden overflow-y-auto"
+        style={{
+          transform: `translateZ(0)`,
+        }}
+      >
+        {messages?.map((message) => {
+          return (
+            <div key={message.uuid} data-uuid={message.uuid} className="flex flex-col">
+              {renderMessage ? (
+                renderMessage?.({ message })
+              ) : (
+                <>
+                  {message.type === EnumChatMessageType.SYSTEM && message.system && (
+                    <div className="flex justify-center">
+                      {renderMessageOfSystem?.({ message })}
+                    </div>
+                  )}
+                  {message.type !== EnumChatMessageType.SYSTEM && message.user && (
+                    <div className="flex justify-end">{renderMessageOfUser?.({ message })}</div>
+                  )}
+                  {message.type !== EnumChatMessageType.SYSTEM && message.ai && (
+                    <div className="flex justify-start">{renderMessageOfAI?.({ message })}</div>
+                  )}
+                </>
+              )}
+            </div>
+          );
+        })}
+        <div className="pointer-events-none sticky bottom-2 mx-auto flex justify-center">
+          <Button
+            shape="circle"
+            icon={<ArrowDownOutlined />}
+            onClick={() => {
+              scrollToBottom();
+            }}
+            className="pointer-events-auto! bg-white! text-2xl! shadow-[0px_1px_12px_0px_#2921391F]!"
+            style={{
+              transform: `translateY(${showScrollBottom ? 0 : 30}px) scale(${showScrollBottom ? 1 : 0})`,
+              width: 44,
+              height: 44,
+            }}
+          />
+        </div>
+      </ScrollFixed>
+    </PageLayout>
+  );
+}
+
+export { Messages };
+export type { MessagesProps };

package/src/sender/actions.tsx

@@ -1,74 +1,37 @@
 import Icons from '@fe-free/icons';
 import type { UploadFile } from 'antd';
-import { Button, Divider } from 'antd';
-import { useCallback, type RefObject } from 'react';
+import { Button } from 'antd';
+import type { RefObject } from 'react';
 import SendIcon from '../svgs/send.svg?react';
 import { FileAction } from './files';
 import { RecordAction } from './record';
-import './style.scss';
 import type { SenderProps } from './types';
 
 function Actions(
   props: SenderProps & {
-    refText: RefObject<HTMLTextAreaElement>;
-    refUpload: RefObject<HTMLDivElement>;
+    refText: RefObject<HTMLTextAreaElement | null>;
+    refUpload: RefObject<HTMLDivElement | null>;
     isUploading: boolean;
     fileList: UploadFile[];
     setFileList: (fileList: UploadFile[]) => void;
     fileUrls: string[];
     setFileUrls: (fileUrls: string[]) => void;
+    onSubmit: () => Promise<void>;
   },
 ) {
   const {
-    refText,
-    loading,
-    onSubmit,
-    value,
-    onChange,
     refUpload,
     isUploading,
-    setFileList,
     fileUrls,
     setFileUrls,
     allowUpload,
     allowSpeech,
+    loading,
+    onSubmit,
   } = props;
 
   const isLoading = loading || isUploading;
 
-  const handleSubmit = useCallback(async () => {
-    if (isLoading || allowSpeech?.recording) {
-      return;
-    }
-
-    const newValue = {
-      ...value,
-      text: value?.text?.trim(),
-    };
-
-    // 有内容才提交
-    if (newValue.text || (newValue.files && newValue.files.length > 0)) {
-      await Promise.resolve(onSubmit?.(newValue));
-
-      // reset
-      setFileList([]);
-      setFileUrls([]);
-      onChange?.({});
-
-      // focus
-      refText.current?.focus();
-    }
-  }, [
-    isLoading,
-    allowSpeech?.recording,
-    value,
-    onSubmit,
-    setFileList,
-    setFileUrls,
-    onChange,
-    refText,
-  ]);
-
   return (
     <div className="flex items-center gap-2">
       <div className="flex flex-1 gap-1">
@@ -81,16 +44,16 @@ function Actions(
           />
         )}
       </div>
-      <Divider type="vertical" />
+      {/* <Divider type="vertical" /> */}
       <div className="flex items-center gap-2">
         {allowSpeech && <RecordAction {...props} />}
         <Button
           type="primary"
           shape="circle"
-          icon={<Icons component={SendIcon} className="!text-lg" />}
+          icon={<Icons component={SendIcon} className="h-[28px]! text-lg!" />}
           loading={isLoading}
           // disabled={loading}
-          onClick={handleSubmit}
+          onClick={onSubmit}
         />
       </div>
     </div>

package/src/sender/files.tsx

@@ -5,12 +5,13 @@ import { App, Button, Dropdown, Input, Modal, Upload } from 'antd';
 import type { RefObject } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FileView } from '../files';
 import FilesIcon from '../svgs/files.svg?react';
 import type { SenderProps } from './types';
 
 function FileAction(
   props: SenderProps & {
-    refUpload: RefObject<HTMLDivElement>;
+    refUpload: RefObject<HTMLDivElement | null>;
     fileUrls: string[];
     setFileUrls: (fileUrls: string[]) => void;
   },
@@ -88,7 +89,7 @@ function FileAction(
 
 function FileUpload(
   props: SenderProps & {
-    refUpload: RefObject<HTMLDivElement>;
+    refUpload: RefObject<HTMLDivElement | null>;
     fileList: UploadFile[];
     setFileList: (fileList: UploadFile[]) => void;
     uploadMaxCount?: number;
@@ -136,16 +137,9 @@ function UploadFileItem({ file, onDelete }: { file: UploadFile; onDelete: () =>
   return (
     <div className="group relative">
       {isImage ? (
-        <img
-          src={file.originFileObj && URL.createObjectURL(file.originFileObj)}
-          className="h-[53px] w-[53px] rounded-lg border border-01 bg-01 object-cover"
-        />
+        <FileView url={URL.createObjectURL(file.originFileObj!)} isImage={isImage} />
       ) : (
-        <div className="flex h-[53px] w-[200px] items-center overflow-hidden rounded bg-01 px-1">
-          <div className="min-w-0">
-            <FileCard name={file.name} size={file.size} />
-          </div>
-        </div>
+        <FileView url={file.name} />
       )}
       {!isDone && (
         <div className="absolute inset-0 flex items-center justify-center bg-01/80">
@@ -163,7 +157,7 @@ function UploadFileItem({ file, onDelete }: { file: UploadFile; onDelete: () =>
 function UrlFileItem({ url, onDelete }: { url: string; onDelete: () => void }) {
   return (
     <div className="group relative">
-      <div className="flex h-[53px] w-[200px] items-center rounded bg-01 px-2">
+      <div className="flex h-[60px] w-[250px] items-center rounded bg-01 px-2">
         <div className="line-clamp-2">{url}</div>
       </div>
       <CloseOutlined
@@ -186,7 +180,7 @@ function Files(
 
   return (
     <>
-      {fileList && fileList.length > 0 && (
+      {((fileList && fileList.length > 0) || (fileUrls && fileUrls.length > 0)) && (
         <div className="scrollbar-hide mb-2 flex gap-2 overflow-x-auto">
           {fileList.map((file) => (
             <UploadFileItem

package/src/sender/index.tsx

@@ -7,11 +7,31 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Actions } from './actions';
 import { FileUpload, Files } from './files';
-import './style.scss';
 import type { SenderProps, SenderRef } from './types';
 
-function Text(props: SenderProps & { refText: RefObject<HTMLTextAreaElement> }) {
-  const { value, onChange, placeholder, refText } = props;
+function Text(
+  props: SenderProps & {
+    refText: RefObject<HTMLTextAreaElement | null>;
+    onSubmit?: () => void;
+  },
+) {
+  const { value, onChange, placeholder, refText, onSubmit } = props;
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Shift + Enter: 换行（默认行为）
+      if (e.key === 'Enter' && e.shiftKey) {
+        return;
+      }
+
+      // Enter: 提交
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        onSubmit?.();
+      }
+    },
+    [onSubmit],
+  );
 
   return (
     <Input.TextArea
@@ -20,6 +40,7 @@ function Text(props: SenderProps & { refText: RefObject<HTMLTextAreaElement> })
       onChange={(e) => {
         onChange?.({ ...value, text: e.target.value });
       }}
+      onKeyDown={handleKeyDown}
       placeholder={placeholder}
       autoSize={{ minRows: 2, maxRows: 8 }}
       className="mb-1 px-1 py-0"
@@ -33,21 +54,22 @@ function Sender(originProps: SenderProps) {
   const props = useMemo(() => {
     return {
       placeholder:
-        originProps.placeholder ?? t('@fe-free/ai.sender.describeYourQuestion', '描述你的问题'),
+        originProps.placeholder ??
+        t('@fe-free/ai.sender.describeYourQuestion', '描述你的问题， shift + enter 换行'),
       ...originProps,
     };
   }, [originProps, t]);
 
   const refText = useRef<HTMLTextAreaElement>(null);
 
-  const { value, onChange, allowUpload } = props;
+  const { value, onChange, allowUpload, onSubmit, loading, allowSpeech } = props;
   const { filesMaxCount } = allowUpload || {};
 
   const refContainer = useRef<HTMLDivElement>(null);
   const refUpload = useRef<HTMLDivElement>(null);
   const [dragHover, setDragHover] = useState(false);
 
-  useDrop(refContainer, {
+  useDrop(allowUpload ? refContainer : null, {
     onDragEnter: () => {
       setDragHover(true);
     },
@@ -95,16 +117,54 @@ function Sender(originProps: SenderProps) {
     return fileList.some((file) => !file.response?.data?.url);
   }, [fileList]);
 
+  const handleSubmit = useCallback(async () => {
+    const isLoading = loading || isUploading;
+
+    if (isLoading || allowSpeech?.recording) {
+      return;
+    }
+
+    const newValue = {
+      ...value,
+      text: value?.text?.trim(),
+    };
+
+    // 有内容才提交
+    if (newValue.text || (newValue.files && newValue.files.length > 0)) {
+      await Promise.resolve(onSubmit?.(newValue));
+
+      // reset
+      setFileList([]);
+      setFileUrls([]);
+      onChange?.({});
+
+      // focus
+      refText.current?.focus();
+    }
+  }, [
+    loading,
+    isUploading,
+    allowSpeech?.recording,
+    value,
+    onSubmit,
+    setFileList,
+    setFileUrls,
+    onChange,
+  ]);
+
   return (
     <div className="fea-sender-wrap">
       <div
         ref={refContainer}
         className={classNames(
-          'fea-sender relative flex flex-col rounded-lg border border-01 bg-white p-2',
+          'fea-sender relative flex flex-col rounded-xl border border-01 bg-white p-2',
           {
             'fea-sender-drag-hover': dragHover,
           },
         )}
+        style={{
+          boxShadow: '0px 2px 12px 0px #00000014',
+        }}
       >
         <Files
           {...props}
@@ -114,7 +174,7 @@ function Sender(originProps: SenderProps) {
           setFileUrls={setFileUrls}
         />
         <div className="flex">
-          <Text {...props} refText={refText} />
+          <Text {...props} refText={refText} onSubmit={handleSubmit} />
         </div>
         <Actions
           {...props}
@@ -125,21 +185,19 @@ function Sender(originProps: SenderProps) {
           setFileList={setFileList}
           fileUrls={fileUrls}
           setFileUrls={setFileUrls}
+          onSubmit={handleSubmit}
         />
-        <FileUpload
-          {...props}
-          refUpload={refUpload}
-          fileList={fileList}
-          setFileList={setFileList}
-          uploadMaxCount={filesMaxCount ? filesMaxCount - fileUrls.length : undefined}
-        />
-      </div>
-      <div className="mt-1 text-center text-xs text-03">
-        {t(
-          '@fe-free/ai.sender.aiGeneratedDisclaimer',
-          '内容由 AI 生成，无法确保信息的真实准确，仅供参考',
+        {allowUpload && (
+          <FileUpload
+            {...props}
+            refUpload={refUpload}
+            fileList={fileList}
+            setFileList={setFileList}
+            uploadMaxCount={filesMaxCount ? filesMaxCount - fileUrls.length : undefined}
+          />
         )}
       </div>
+      {props.statement && <div className="mt-1 text-center text-xs text-03">{props.statement}</div>}
     </div>
   );
 }

package/src/sender/record.tsx

@@ -1,5 +1,6 @@
 import { AudioOutlined } from '@fe-free/icons';
 import { Button } from 'antd';
+import { RecordLoading } from '../helper';
 import type { SenderProps } from './types';
 
 function RecordAction(props: SenderProps) {
@@ -9,12 +10,7 @@ function RecordAction(props: SenderProps) {
   if (recording) {
     return (
       <Button type="text" shape="circle" onClick={() => onRecordingChange?.(false)}>
-        <div className="fea-sender-spinner">
-          <div className="fea-sender-spinner-line fea-sender-spinner-line1" />
-          <div className="fea-sender-spinner-line fea-sender-spinner-line2" />
-          <div className="fea-sender-spinner-line fea-sender-spinner-line3" />
-          <div className="fea-sender-spinner-line fea-sender-spinner-line4" />
-        </div>
+        <RecordLoading count={4} color="primary" />
       </Button>
     );
   }
@@ -23,7 +19,7 @@ function RecordAction(props: SenderProps) {
     <Button
       type="text"
       shape="circle"
-      icon={<AudioOutlined className="!text-lg" />}
+      icon={<AudioOutlined className="text-lg!" />}
       onClick={() => onRecordingChange?.(true)}
     />
   );

package/src/sender/sender.stories.tsx

@@ -66,4 +66,11 @@ export const AllowSpeech: Story = {
   },
 };
 
+export const Statement: Story = {
+  args: {
+    statement: '内容由 AI 生成，无法确保信息的真实准确，仅供参考',
+  },
+  render: (props) => <Component {...props} />,
+};
+
 export default meta;

package/src/sender/types.ts

@@ -9,10 +9,10 @@ interface SenderValue {
 
 interface SenderProps {
   value?: SenderValue;
-  onChange: (value?: SenderValue) => void;
+  onChange?: (value?: SenderValue) => void;
 
   loading?: boolean;
-  onSubmit: (value?: SenderValue) => void | Promise<void>;
+  onSubmit?: (value?: SenderValue) => void | Promise<void>;
 
   placeholder?: string;
 
@@ -30,6 +30,8 @@ interface SenderProps {
     /** 录音状态变化时回调 */
     onRecordingChange?: (recording: boolean) => void;
   };
+
+  statement?: string;
 }
 
 export type { SenderProps, SenderRef, SenderValue };