From 9a4466d8443d35aeab183efbd5bf71b59d83bb33 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 11 Feb 2023 19:29:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=BF=81=E7=A7=BBChatInputAddon?=
 =?UTF-8?q?=E7=9A=84Dropdown=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatBox/ChatInputBox/Addon.tsx | 74 +++++++++++--------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx b/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
index a1e4c331..cb9446f3 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
@@ -1,15 +1,16 @@
-import { FileSelector } from '@/components/FileSelector';
 import {
   getMessageTextDecorators,
   pluginChatInputActions,
 } from '@/plugin/common';
 import { Icon } from 'tailchat-design';
-import { Dropdown, Menu } from 'antd';
+import { Dropdown, MenuProps } from 'antd';
 import React, { useState } from 'react';
 import { t } from 'tailchat-shared';
 import { useChatInputActionContext } from './context';
 import { uploadMessageFile, uploadMessageImage } from './utils';
 import clsx from 'clsx';
+import type { MenuItemType } from 'antd/lib/menu/hooks/useItems';
+import { openFile } from '@/utils/file-helper';
 
 export const ChatInputAddon: React.FC = React.memo(() => {
   const [open, setOpen] = useState(false);
@@ -18,9 +19,9 @@ export const ChatInputAddon: React.FC = React.memo(() => {
     return null;
   }
 
-  const handleSendImage = (files: FileList) => {
+  const handleSendImage = (file: File) => {
     // 发送图片
-    const image = files[0];
+    const image = file;
     if (image) {
       // 发送图片
       uploadMessageImage(image).then(({ url, width, height }) => {
@@ -31,9 +32,8 @@ export const ChatInputAddon: React.FC = React.memo(() => {
     }
   };
 
-  const handleSendFile = (files: FileList) => {
+  const handleSendFile = (file: File) => {
     // 发送文件
-    const file = files[0];
     if (file) {
       // 发送图片
       uploadMessageFile(file).then(({ name, url }) => {
@@ -44,33 +44,47 @@ export const ChatInputAddon: React.FC = React.memo(() => {
     }
   };
 
-  const menu = (
-    <Menu>
-      <FileSelector
-        fileProps={{ accept: 'image/*' }}
-        onSelected={handleSendImage}
-      >
-        <Menu.Item>{t('发送图片')}</Menu.Item>
-      </FileSelector>
-
-      <FileSelector onSelected={handleSendFile}>
-        <Menu.Item>{t('发送文件')}</Menu.Item>
-      </FileSelector>
-
-      {pluginChatInputActions.map((item, i) => (
-        <Menu.Item
-          key={item.label + i}
-          onClick={() => item.onClick(actionContext)}
-        >
-          {item.label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+  const menu: MenuProps = {
+    items: [
+      {
+        key: 'send-image',
+        label: t('发送图片'),
+        onClick: async () => {
+          setOpen(false);
+          const file = await openFile({ accept: 'image/*' });
+          if (file) {
+            handleSendImage(file);
+          }
+        },
+      },
+      {
+        key: 'send-file',
+        label: t('发送文件'),
+        onClick: async () => {
+          setOpen(false);
+          const file = await openFile();
+          if (file) {
+            handleSendFile(file);
+          }
+        },
+      },
+      ...pluginChatInputActions.map(
+        (item, i) =>
+          ({
+            key: item.label + i,
+            label: item.label,
+            onClick: () => {
+              item.onClick(actionContext);
+              setOpen(false);
+            },
+          } as MenuItemType)
+      ),
+    ],
+  };
 
   return (
     <Dropdown
-      overlay={menu}
+      menu={menu}
       open={open}
       onOpenChange={setOpen}
       placement="topRight"