refactor: extract common logic for ChatInputEmotion with BaseChatInputButton

client/web/src/components/ChatBox/ChatInputBox/BaseChatInputButton.tsx

@@ -0,0 +1,33 @@
+import { Popover } from 'antd';
+import React, { useState } from 'react';
+import { Icon } from 'tailchat-design';
+
+interface BaseChatInputButtonProps {
+  icon: string;
+  popoverContent: (ctx: { hidePopover: () => void }) => React.ReactElement;
+}
+export const BaseChatInputButton: React.FC<BaseChatInputButtonProps> =
+  React.memo((props) => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+      <Popover
+        open={visible}
+        onOpenChange={setVisible}
+        content={() =>
+          props.popoverContent({
+            hidePopover: () => {
+              setVisible(false);
+            },
+          })
+        }
+        overlayClassName="chat-message-input_action-popover"
+        showArrow={false}
+        placement="topRight"
+        trigger={['click']}
+      >
+        <Icon className="text-2xl cursor-pointer" icon={props.icon} />
+      </Popover>
+    );
+  });
+BaseChatInputButton.displayName = 'BaseChatInputButton';

client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx

@@ -1,41 +1,25 @@
-import { Icon } from 'tailchat-design';
+import React from 'react';
-import { Popover } from 'antd';
-import React, { useCallback, useState } from 'react';
 import { useChatInputActionContext } from './context';
 import { EmojiPanel } from '@/components/Emoji';
+import { BaseChatInputButton } from './BaseChatInputButton';
 import './Emotion.less';
 
 export const ChatInputEmotion: React.FC = React.memo(() => {
   const actionContext = useChatInputActionContext();
   const { appendMsg } = actionContext;
 
-  const [visible, setVisible] = useState(false);
-
-  const handleSelect = useCallback(
-    async (code: string) => {
-      appendMsg(code);
-      setVisible(false);
-    },
-    [appendMsg]
-  );
-
-  const content = <EmojiPanel onSelect={handleSelect} />;
-
   return (
-    <Popover
+    <BaseChatInputButton
-      open={visible}
+      icon="mdi:emoticon-happy-outline"
-      onOpenChange={setVisible}
+      popoverContent={({ hidePopover }) => (
-      content={content}
+        <EmojiPanel
-      overlayClassName="chat-message-input_action-popover"
+          onSelect={(code) => {
-      showArrow={false}
+            appendMsg(code);
-      placement="topRight"
+            hidePopover();
-      trigger={['click']}
+          }}
-    >
+        />
-      <Icon
+      )}
-        className="text-2xl cursor-pointer"
+    />
-        icon="mdi:emoticon-happy-outline"
-      />
-    </Popover>
   );
 });
 ChatInputEmotion.displayName = 'ChatInputEmotion';