diff --git a/client/web/src/components/ChatBox/ChatInputBox/BaseChatInputButton.tsx b/client/web/src/components/ChatBox/ChatInputBox/BaseChatInputButton.tsx
new file mode 100644
index 00000000..1c7927b5
--- /dev/null
+++ b/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';
diff --git a/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx b/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
index 9d504a0a..d58ab269 100644
--- a/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
+++ b/client/web/src/components/ChatBox/ChatInputBox/Emotion.tsx
@@ -1,41 +1,25 @@
-import { Icon } from 'tailchat-design';
-import { Popover } from 'antd';
-import React, { useCallback, useState } from 'react';
+import React 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
-      open={visible}
-      onOpenChange={setVisible}
-      content={content}
-      overlayClassName="chat-message-input_action-popover"
-      showArrow={false}
-      placement="topRight"
-      trigger={['click']}
-    >
-      <Icon
-        className="text-2xl cursor-pointer"
-        icon="mdi:emoticon-happy-outline"
-      />
-    </Popover>
+    <BaseChatInputButton
+      icon="mdi:emoticon-happy-outline"
+      popoverContent={({ hidePopover }) => (
+        <EmojiPanel
+          onSelect={(code) => {
+            appendMsg(code);
+            hidePopover();
+          }}
+        />
+      )}
+    />
   );
 });
 ChatInputEmotion.displayName = 'ChatInputEmotion';