feat: Emoji

package.json

@@ -14,6 +14,7 @@
     "antd": "^5.14.0",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
+    "emoji-picker-react": "^4.8.0",
     "react": "^18.2.0",
     "react-chat-elements": "^12.0.11",
     "react-dom": "^18.2.0",

src/views/Conversations/Components/Input/Emoji.jsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { Popover, Button } from 'antd';
+import EmojiPicker from 'emoji-picker-react';
+
+const InputTemplate = ({ disabled = false, inputEmoji }) => {
+  const [openPopup, setOpenPopup] = useState(false);
+
+  const handlePickEmoji = (emojiData) => {
+    inputEmoji(emojiData.emoji);
+  };
+
+  return (
+    <>
+      <Popover
+        overlayClassName='p-0'
+        placement={'right'}
+        overlayInnerStyle={{ padding: 0, borderRadius: '8px' }}
+        fresh
+        content={<EmojiPicker skinTonesDisabled={true} emojiStyle='facebook' onEmojiClick={handlePickEmoji} />}
+        // title='😀'
+        trigger='click'
+        open={openPopup}
+        onOpenChange={setOpenPopup}>
+        <Button type='text' className=' px-1' size={'middle'} disabled={disabled}>
+          😀
+        </Button>
+      </Popover>
+    </>
+  );
+};
+export default InputTemplate;

src/views/Conversations/Components/Input/ImageUpload.jsx

@@ -55,7 +55,7 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
           message.error(`图片添加失败`);
         }
       }}>
-      <Button key={'addPic'} type='text' loading={uploading} disabled={disabled} icon={<PictureOutlined />} size={'middle'} className='text-primary rounded-none' />
+      <Button key={'addPic'} type='text' loading={uploading} disabled={disabled} icon={<FileImageOutlined />} size={'middle'} className='text-primary rounded-none' />
     </Upload>
   );
 };

src/views/Conversations/Components/InputComposer.jsx

@@ -19,6 +19,7 @@ import { isEmpty } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
 import { sentMsgTypeMapped } from '@/lib/msgUtils';
 import InputTemplate from './Input/Template';
+import InputEmoji from './Input/Emoji';
 import InputImageUpload from './Input/ImageUpload';
 import dayjs from 'dayjs';
 
@@ -105,7 +106,8 @@ const InputBox = () => {
       />
       <Flex justify={'space-between'} className=' bg-gray-200 p-1 rounded-b'>
         <Flex gap={4} className='*:text-primary *:rounded-none'>
-          <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
+          <InputTemplate key='templates' disabled={textabled} invokeSendMessage={invokeSendMessage} />
+          <InputEmoji key='emoji' disabled={!textabled} inputEmoji={s => setTextContent(`${textContent}${s}`)} />
           <InputImageUpload key={'addNewPic'} disabled={!textabled} invokeSendMessage={invokeSendMessage} />
           {/* <Button type='text' className='' icon={<FolderAddOutlined />} size={'middle'} />
           <Button type='text' className='' icon={<CloudUploadOutlined />} size={'middle'} />