refactor: 增加接口用于增加聊天输入操作

web/src/components/ChatBox/ChatInputBox/Addon.tsx

@@ -0,0 +1,32 @@
+import { chatInputActions } from '@/plugin/common';
+import { Icon } from '@iconify/react';
+import { Dropdown, Menu } from 'antd';
+import React, { useMemo } from 'react';
+
+export const ChatInputAddon: React.FC = React.memo(() => {
+  const menu = useMemo(() => {
+    return (
+      <Menu>
+        {chatInputActions.map((item, i) => (
+          <Menu.Item key={item.label + i} onClick={item.onClick}>
+            {item.label}
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
+  }, []);
+
+  if (chatInputActions.length === 0) {
+    return null;
+  }
+
+  return (
+    <Dropdown overlay={menu} placement="topRight" trigger={['click']}>
+      <Icon
+        className="text-2xl cursor-pointer"
+        icon="mdi:plus-circle-outline"
+      />
+    </Dropdown>
+  );
+});
+ChatInputAddon.displayName = 'ChatInputAddon';

web/src/components/ChatBox/ChatInputBox/index.tsx

@@ -2,6 +2,7 @@ import { isEnterHotkey } from '@/utils/hot-key';
 import { Input } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
 import { t } from 'tailchat-shared';
+import { ChatInputAddon } from './Addon';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string) => void;
@@ -27,14 +28,20 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
 
   return (
     <div className="px-4 py-2">
-      <Input
+      <div className="bg-gray-600 flex rounded-md items-center">
-        ref={inputRef}
+        <Input
-        className="outline-none shadow-none border-0 bg-gray-600 py-2.5 px-4 rounded-md"
+          ref={inputRef}
-        placeholder={t('输入一些什么')}
+          className="outline-none shadow-none border-0 py-2.5 px-4 flex-1"
-        value={message}
+          placeholder={t('输入一些什么')}
-        onChange={(e) => setMessage(e.target.value)}
+          value={message}
-        onKeyDown={handleKeyDown}
+          onChange={(e) => setMessage(e.target.value)}
-      />
+          onKeyDown={handleKeyDown}
+        />
+
+        <div className="px-2">
+          <ChatInputAddon />
+        </div>
+      </div>
     </div>
   );
 });

web/src/plugin/common/reg.ts

@@ -52,3 +52,10 @@ export const [messageInterpreter, regMessageInterpreter] =
 export const [getMessageRender, regMessageRender] = buildRegFn<
   (message: string) => React.ReactNode
 >('message-render', (message) => message);
+
+interface ChatInputAction {
+  label: string;
+  onClick: () => void;
+}
+export const [chatInputActions, regChatInputAction] =
+  buildRegList<ChatInputAction>();