同对话支持多智能体

Author: manerfan

src/components/chat/chat-input/index.tsx

@@ -21,12 +21,12 @@ import {
   Divider,
   Flex,
   Space,
+  Tag,
   Tooltip,
   Typography,
 } from 'antd';
 import _ from 'lodash';
 import {
-  ArrowBigUp,
   AtSign,
   Command,
   CornerDownLeft,
@@ -40,6 +40,7 @@ import {
 
 import type { MESSAGE } from '@/services/message/typings';
 import LexicalTextarea, { LexicalTextareaRefProperty } from '@/components/markdown/lexical/lexical-textarea';
+import { BOT } from '@/services/bot/typings';
 
 const ChatInput: React.FC<{
   onSubmit?: (values: MESSAGE.GenerateCmd) => void;
@@ -49,10 +50,12 @@ const ChatInput: React.FC<{
   className?: string | undefined;
   style?: CSSProperties | undefined;
 }> = ({ onSubmit, onClearMemory, onStop, loading, className, style }) => {
-  const lexicalTextareaRef = useRef<LexicalTextareaRefProperty>();
+  const lexicalTextareaRef = useRef<LexicalTextareaRefProperty>(null);
   const [query, setQuery] = useState('');
 
-  const [clearLoading, setClearLoading] = useState(false);
+  const [mentions, setMentions] = useState<BOT.BotEntity>();
+
+  const [clearMemoryLoading, setClearMemoryLoading] = useState(false);
   const [stopLoading, setStopLoading] = useState(false);
 
   const [inputExpand, setInputExpand] = useState(false);
@@ -61,6 +64,7 @@ const ChatInput: React.FC<{
     const content = markdown || query;
     if (!_.isEmpty(_.trim(content))) {
       onSubmit?.({
+        mentions: mentions?.uid ? [mentions.uid] : undefined,
         query: {
           inputs: [
             {
@@ -96,9 +100,16 @@ const ChatInput: React.FC<{
           align="flex-start"
           style={style}
           className={`flex-auto rounded-xl bg-white py-4 w-full min-h-24`}
+          gap={12}
         >
+          {/* @BOT */}
+          {mentions && <Flex justify="flex-start" align="center" className="w-full px-4" gap={4}>
+            <Tag bordered={false} closeIcon onClose={() => setMentions(undefined)}>@ {mentions.name}</Tag>
+          </Flex>}
+
+          {/* 输入框 */}
           <div
-            className={`w-full min-h-12 px-5 mb-3 overflow-y-scroll transition-all duration-500 ${inputExpand ? 'h-96' : 'max-h-40'}`}
+            className={`w-full min-h-12 px-5 overflow-y-scroll transition-all duration-500 ${inputExpand ? 'h-96' : 'max-h-40'}`}
             onKeyDown={(event) => {
               if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
                 event.preventDefault();
@@ -117,9 +128,7 @@ const ChatInput: React.FC<{
               botMentionOptions={{
                 enable: true,
                 trigger: '@',
-                onSelect: (botFavorite) => {
-                  console.log('===1===', botFavorite);
-                },
+                onSelect: setMentions,
               }}
             />
           </div>
@@ -133,12 +142,12 @@ const ChatInput: React.FC<{
                   type="text"
                   className="p-1"
                   disabled={loading}
-                  loading={clearLoading}
+                  loading={clearMemoryLoading}
                   icon={<SquareSplitVertical size={18} />}
                   onClick={() => {
                     if (!!onClearMemory) {
-                      setClearLoading(true);
-                      onClearMemory().finally(() => setClearLoading(false));
+                      setClearMemoryLoading(true);
+                      onClearMemory().finally(() => setClearMemoryLoading(false));
                     }
                   }}
                 />

src/components/chat/chat-item/index.tsx

@@ -23,6 +23,7 @@ import ChatMarkdown from './chat-markdown';
 import _ from 'lodash';
 import styles from './styles.module.scss';
 import { LoadingOutlined } from '@ant-design/icons';
+import { FluentEmoji, FluentEmojiProps, useControls, useCreateStore } from '@lobehub/ui';
 
 const ChatItem: React.FC<{
   message: MESSAGE.MessageContent;
@@ -34,6 +35,20 @@ const ChatItem: React.FC<{
   const { initialState } = useModel('@@initialState');
   const emptyMessage = _.isEmpty(message?.messages) || _.every(message?.messages, msg => _.isEmpty(msg.content));
 
+  const store = useCreateStore();
+  const control: FluentEmojiProps = useControls(
+    {
+      emoji: '🫠',
+      size: {
+        max: 128,
+        min: 16,
+        step: 1,
+        value: 32,
+      },
+    },
+    { store },
+  );
+
   return (
     <>
       {message.sender_role === 'system' && (
@@ -79,8 +94,9 @@ const ChatItem: React.FC<{
               icon={{
                 ...(message.sender_role === 'user' ? (
                   <Avatar size={32} className={`bg-user-msg font-bold`}>{initialState?.userMe?.name[0]}</Avatar>
-                ) : (
-                  <img src={'/logo.png'} alt="MODU 墨读无界" />
+                ) : (!!message.sender_info
+                  ? <Avatar size={32} icon={<FluentEmoji type={'anim'} {...control} />} />
+                  : <img src={'/logo.png'} alt="MODU 墨读无界" />
                 )),
               }}
             />
@@ -100,9 +116,10 @@ const ChatItem: React.FC<{
               className="w-full mb-2 box-border"
             >
               <Typography.Text type="secondary">
-                {message.sender_role === 'user'
+                {message.sender_info?.name}
+                {!!message.sender_info?.name || (message.sender_role === 'user'
                   ? initialState?.userMe?.name
-                  : 'Assistant'}
+                  : '智能助手')}
                 {message.sender_role !== 'user' && (
                   <Typography.Text
                     type="secondary"

src/components/chat/index.tsx

@@ -150,6 +150,12 @@ const ChatContent: React.FC<{
     const parseMessageEvent = messageParser({
       sender_uid: initialState?.userMe?.uid,
       sender_role: 'user',
+      sender_info: {
+        uid: initialState?.userMe?.uid,
+        name: initialState?.userMe?.name || '用户',
+        avatar: initialState?.userMe?.avatar,
+        role: 'user',
+      },
       message_uid: ulid(),
       message_time: new Date().getTime(),
       messages: [

src/components/markdown/lexical/lexical-textarea.tsx

@@ -40,14 +40,14 @@ export interface LexicalTextareaRefProperty {
 /**
  * 需要保证该组件无状态
  */
-const LexicalTextarea: React.FC<{
+const LexicalTextarea = forwardRef<LexicalTextareaRefProperty, {
     placeholder?: string,
     readOnly?: boolean,
     defaultValue?: string,
     showToolbar?: boolean,
     onChange?: (markdown: string) => void,
     botMentionOptions?: BotMentionOptions,
-}> = forwardRef(({ placeholder, readOnly, defaultValue, showToolbar, onChange, botMentionOptions }, ref) => {
+}>(({ placeholder, readOnly, defaultValue, showToolbar, onChange, botMentionOptions }, ref) => {
     const lexicalInnerEditorPopoverRef = useRef<LexicalInnerEditorRefProperty>(null);
 
     useImperativeHandle(ref, () => ({
@@ -57,7 +57,7 @@ const LexicalTextarea: React.FC<{
             editor?.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
         },
         getMarkdownContent() {
-            return lexicalInnerEditorPopoverRef.current?.getMarkdownContent();
+            return lexicalInnerEditorPopoverRef.current?.getMarkdownContent() || '';
         }
     }));
 
@@ -67,23 +67,23 @@ const LexicalTextarea: React.FC<{
         if (!readOnly) {
             editor?.focus(
                 () => {
-                  // See AutoFocusPlugin
-                  // If we try and move selection to the same point with setBaseAndExtent, it won't
-                  // trigger a re-focus on the element. So in the case this occurs, we'll need to correct it.
-                  // Normally this is fine, Selection API !== Focus API, but fore the intents of the naming
-                  // of this plugin, which should preserve focus too.
-                  const activeElement = document.activeElement;
-                  const rootElement = editor.getRootElement() as HTMLDivElement;
-                  if (
-                    rootElement !== null &&
-                    (activeElement === null || !rootElement.contains(activeElement))
-                  ) {
-                    // Note: preventScroll won't work in Webkit.
-                    rootElement.focus({preventScroll: true});
-                  }
+                    // See AutoFocusPlugin
+                    // If we try and move selection to the same point with setBaseAndExtent, it won't
+                    // trigger a re-focus on the element. So in the case this occurs, we'll need to correct it.
+                    // Normally this is fine, Selection API !== Focus API, but fore the intents of the naming
+                    // of this plugin, which should preserve focus too.
+                    const activeElement = document.activeElement;
+                    const rootElement = editor.getRootElement() as HTMLDivElement;
+                    if (
+                        rootElement !== null &&
+                        (activeElement === null || !rootElement.contains(activeElement))
+                    ) {
+                        // Note: preventScroll won't work in Webkit.
+                        rootElement.focus({ preventScroll: true });
+                    }
                 },
-                {defaultSelection: 'rootStart'}
-              );
+                { defaultSelection: 'rootStart' }
+            );
         }
     }, [readOnly]);
 

src/services/message/parser.ts

@@ -57,6 +57,7 @@ export function messageParser({
       currentMessage = {
         sender_uid: messageEvent.sender_uid,
         sender_role: messageEvent.sender_role,
+        sender_info: messageEvent.sender_info,
         message_uid: messageEvent.message_uid,
         message_time: messageEvent.message_time,
         messages: [messageEvent.message],

src/services/message/typings.d.ts

@@ -17,6 +17,8 @@
 import '@interface/typings';
 
 declare namespace MESSAGE {
+  type SenderRole = "user" | "assistant" | "system";
+  
   type Item = {
     /**
      * 类型
@@ -80,6 +82,28 @@ declare namespace MESSAGE {
     section_uid: string;
   }
 
+  type SenderInfo = {
+    /**
+     * 发送者 ID
+     */
+    uid: string;
+
+    /**
+     * 发送者名称
+     */
+    name: string;
+
+    /**
+     * 发送者头像
+     */
+    avatar?: string;
+
+    /**
+     * 发送者角色
+     */
+    role: string;
+  }
+
   type MessageEvent = {
     /**
      * 会话 ID
@@ -94,7 +118,12 @@ declare namespace MESSAGE {
     /**
      * 发送者角色
      */
-    sender_role: "user" | "assistant" | "system";
+    sender_role: SenderRole;
+
+    /**
+     * 发送者信息
+     */
+    sender_info?: SenderInfo;
 
     /**
      * 消息 ID
@@ -126,7 +155,12 @@ declare namespace MESSAGE {
     /**
      * 发送者角色
      */
-    sender_role: "user" | "assistant" | "system";
+    sender_role: SenderRole;
+
+    /**
+     * 发送者信息
+     */
+    sender_info?: SenderInfo;
 
     /**
      * 消息 ID