From 4b6377771938abf98dce83de076d9c19ca57c231 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 1 Sep 2021 23:03:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E7=94=A8=E4=BA=8E=E5=A2=9E=E5=8A=A0=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatBox/ChatInputBox/Addon.tsx | 32 +++++++++++++++++++
 .../components/ChatBox/ChatInputBox/index.tsx | 23 ++++++++-----
 web/src/plugin/common/reg.ts                  |  7 ++++
 3 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 web/src/components/ChatBox/ChatInputBox/Addon.tsx

diff --git a/web/src/components/ChatBox/ChatInputBox/Addon.tsx b/web/src/components/ChatBox/ChatInputBox/Addon.tsx
new file mode 100644
index 00000000..30756653
--- /dev/null
+++ b/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';
diff --git a/web/src/components/ChatBox/ChatInputBox/index.tsx b/web/src/components/ChatBox/ChatInputBox/index.tsx
index 8ad0cfc3..a832d1cf 100644
--- a/web/src/components/ChatBox/ChatInputBox/index.tsx
+++ b/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
-        ref={inputRef}
-        className="outline-none shadow-none border-0 bg-gray-600 py-2.5 px-4 rounded-md"
-        placeholder={t('输入一些什么')}
-        value={message}
-        onChange={(e) => setMessage(e.target.value)}
-        onKeyDown={handleKeyDown}
-      />
+      <div className="bg-gray-600 flex rounded-md items-center">
+        <Input
+          ref={inputRef}
+          className="outline-none shadow-none border-0 py-2.5 px-4 flex-1"
+          placeholder={t('输入一些什么')}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+
+        <div className="px-2">
+          <ChatInputAddon />
+        </div>
+      </div>
     </div>
   );
 });
diff --git a/web/src/plugin/common/reg.ts b/web/src/plugin/common/reg.ts
index 64f94fde..0e45f890 100644
--- a/web/src/plugin/common/reg.ts
+++ b/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>();