From c6ac1a800de63b9ff37a5b0053c6c71ca00e4eca Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 20 Dec 2022 19:20:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BE=93=E5=85=A5=E6=A1=86addon?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=89=93=E5=BC=80=E5=8A=A8=E7=94=BB=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E7=A7=BB=E9=99=A4=E8=A1=A8=E6=83=85=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E7=9A=84=E5=86=85=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatBox/ChatInputBox/Addon.tsx | 24 ++++++++++++++-----
 .../ChatBox/ChatInputBox/Emotion.less         |  9 +++++++
 .../ChatBox/ChatInputBox/Emotion.tsx          |  9 ++++---
 3 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 client/web/src/components/ChatBox/ChatInputBox/Emotion.less

diff --git a/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx b/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
index 3a00f005..26938c5a 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/Addon.tsx
@@ -5,12 +5,14 @@ import {
 } from '@/plugin/common';
 import { Icon } from 'tailchat-design';
 import { Dropdown, Menu } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 import { t } from 'tailchat-shared';
 import { useChatInputActionContext } from './context';
 import { uploadMessageImage } from './utils';
+import clsx from 'clsx';
 
 export const ChatInputAddon: React.FC = React.memo(() => {
+  const [open, setOpen] = useState(false);
   const actionContext = useChatInputActionContext();
   if (actionContext === null) {
     return null;
@@ -50,11 +52,21 @@ export const ChatInputAddon: React.FC = React.memo(() => {
   );
 
   return (
-    <Dropdown overlay={menu} placement="topRight" trigger={['click']}>
-      <Icon
-        className="text-2xl cursor-pointer"
-        icon="mdi:plus-circle-outline"
-      />
+    <Dropdown
+      overlay={menu}
+      open={open}
+      onOpenChange={setOpen}
+      placement="topRight"
+      trigger={['click']}
+    >
+      <div>
+        <Icon
+          className={clsx('text-2xl cursor-pointer transition transform', {
+            'rotate-45': open,
+          })}
+          icon="mdi:plus-circle-outline"
+        />
+      </div>
     </Dropdown>
   );
 });
diff --git a/client/web/src/components/ChatBox/ChatInputBox/Emotion.less b/client/web/src/components/ChatBox/ChatInputBox/Emotion.less
new file mode 100644
index 00000000..31af5563
--- /dev/null
+++ b/client/web/src/components/ChatBox/ChatInputBox/Emotion.less
@@ -0,0 +1,9 @@
+.chat-message-input_action-popover {
+  .ant-popover-inner {
+    background-color: transparent;
+
+    .ant-popover-inner-content {
+      padding: 0;
+    }
+  }
+}
diff --git a/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx b/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
index 7e80f65d..9d504a0a 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
@@ -1,8 +1,9 @@
 import { Icon } from 'tailchat-design';
-import { Dropdown, Popover } from 'antd';
+import { Popover } from 'antd';
 import React, { useCallback, useState } from 'react';
 import { useChatInputActionContext } from './context';
 import { EmojiPanel } from '@/components/Emoji';
+import './Emotion.less';
 
 export const ChatInputEmotion: React.FC = React.memo(() => {
   const actionContext = useChatInputActionContext();
@@ -18,13 +19,15 @@ export const ChatInputEmotion: React.FC = React.memo(() => {
     [appendMsg]
   );
 
-  const menu = <EmojiPanel onSelect={handleSelect} />;
+  const content = <EmojiPanel onSelect={handleSelect} />;
 
   return (
     <Popover
       open={visible}
       onOpenChange={setVisible}
-      content={menu}
+      content={content}
+      overlayClassName="chat-message-input_action-popover"
+      showArrow={false}
       placement="topRight"
       trigger={['click']}
     >