发送图片: 图片+文字

src/lib/msgUtils.js

@@ -67,7 +67,7 @@ export const sentMsgTypeMapped = {
       to: msg.to,
       msgtype: 'image',
       msgcontent: {
-        image: { link: msg.data.uri },
+        image: { link: msg.data.uri, caption: msg.text },
         ...(msg.context ? { context: msg.context, message_origin: msg.message_origin } : {}),
       },
     }),

src/stores/ConversationStore.js

@@ -125,6 +125,11 @@ const referenceMsgSlice = (set) => ({
   setReferenceMsg: (referenceMsg) => set({ referenceMsg }),
 });
 
+const complexMsgSlice = (set) => ({
+  complexMsg: {},
+  setComplexMsg: (complexMsg) => set({ complexMsg }),
+});
+
 const conversationSlice = (set, get) => ({
   conversationsList: [],
   currentConversation: {},
@@ -257,6 +262,7 @@ export const useConversationStore = create(devtools((set, get) => ({
   ...templatesSlice(set, get),
   ...messageSlice(set, get),
   ...referenceMsgSlice(set, get),
+  ...complexMsgSlice(set, get),
 
   // state actions
   addError: (error) => set((state) => ({ errors: [...state.errors, error] })),

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

@@ -14,6 +14,7 @@ import {
   CloseCircleOutlined,
 } from '@ant-design/icons';
 import useConversationStore from '@/stores/ConversationStore';
+import { v4 as uuid } from 'uuid';
 
 const props = {
   name: 'file',
@@ -25,15 +26,17 @@ const props = {
 };
 
 const ImageUpload = ({ disabled, invokeSendMessage }) => {
-  const { currentConversation, referenceMsg, setReferenceMsg } = useConversationStore();
+  const { currentConversation, setComplexMsg } = useConversationStore();
   const [uploading, setUploading] = useState(false);
 
   const handleSendImage = (src) => {
     const msgObj = {
       type: 'photo',
       data: { uri: src, },
+      id: uuid(),
     };
-    invokeSendMessage(msgObj);
+    setComplexMsg(msgObj);
+    // invokeSendMessage(msgObj);
   };
   return (
     <Upload
@@ -47,7 +50,7 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
           // message.success(`${info.file.name} file uploaded successfully`);
           // test: src
           // handleSendImage('blob:https://web.whatsapp.com/bbe878fc-7bde-447f-aa28-a4b929621a50');
-          // handleSendImage('https://images.chinahighlights.com//allpicture/2020/04/9330cd3c78a34c81afd3b1fb.jpg');
+          handleSendImage('https://images.chinahighlights.com//allpicture/2020/04/9330cd3c78a34c81afd3b1fb.jpg');
         } else if (info.file.status === 'error') {
           message.error(`图片添加失败`);
         }

src/views/Conversations/Components/InputComposer.jsx

@@ -1,9 +1,20 @@
 import React, { useState } from 'react';
-import { Input, Flex, Button, } from 'antd';
+import { Input, Flex, Button, Image } from 'antd';
 // import { Input } from 'react-chat-elements';
-import useAuthStore from '@/stores/AuthStore'
+import useAuthStore from '@/stores/AuthStore';
 import useConversationStore from '@/stores/ConversationStore';
-import { SendOutlined, MessageOutlined, SmileOutlined, PictureOutlined, CommentOutlined, UploadOutlined, CloudUploadOutlined, FolderAddOutlined, FilePdfOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import {
+  SendOutlined,
+  MessageOutlined,
+  SmileOutlined,
+  PictureOutlined,
+  CommentOutlined,
+  UploadOutlined,
+  CloudUploadOutlined,
+  FolderAddOutlined,
+  FilePdfOutlined,
+  CloseCircleOutlined,
+} from '@ant-design/icons';
 import { isEmpty } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
 import { sentMsgTypeMapped } from '@/lib/msgUtils';
@@ -15,14 +26,14 @@ const InputBox = () => {
   const { loadUser } = useAuthStore();
   const loginUser = loadUser();
   const { userId } = loginUser;
-  const { websocket, websocketOpened, currentConversation, referenceMsg, setReferenceMsg, sentOrReceivedNewMessage } = useConversationStore();
+  const { websocket, websocketOpened, currentConversation, referenceMsg, setReferenceMsg, complexMsg, setComplexMsg, sentOrReceivedNewMessage } = useConversationStore();
   const [textContent, setTextContent] = useState('');
 
   const talkabled = !isEmpty(currentConversation.sn) && websocketOpened;
 
   const gt24h = currentConversation.last_received_time ? dayjs().diff(dayjs(currentConversation.last_received_time), 'hour') > 24 : true;
 
-  const textabled = (talkabled && !gt24h);
+  const textabled = talkabled && !gt24h;
 
   const invokeSendMessage = (msgObj) => {
     const msgObjMerge = {
@@ -44,13 +55,15 @@ const InputBox = () => {
 
     setTextContent('');
     setReferenceMsg({});
+    setComplexMsg({});
   };
 
   const handleSendText = () => {
-    if (textContent.trim() !== '') {
+    if (textContent.trim() !== '' || !isEmpty(complexMsg) ) {
       const msgObj = {
         type: 'text',
         text: textContent,
+        ...complexMsg,
       };
       invokeSendMessage(msgObj);
     }
@@ -61,8 +74,19 @@ const InputBox = () => {
       {referenceMsg.id && (
         <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
           <div className=' border-l-3 border-y-0 border-r-0 border-slate-300 border-solid pl-2 pr-1 py-1'>
-            <span className=' text-primary pr-1 italic'>{referenceMsg.senderName}</span>{referenceMsg.originText}</div>
-          <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => (setReferenceMsg({}))} />
+            <span className=' text-primary pr-1 italic'>{referenceMsg.senderName}</span>
+            {referenceMsg.originText}
+          </div>
+          <Button type='text' title='取消引用' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setReferenceMsg({})} />
+        </Flex>
+      )}
+      {complexMsg.id && (
+        <Flex justify='space-between' className='reply-to bg-gray-100 p-1 rounded-none text-slate-500'>
+          <div className='pl-2 pr-1 py-1'>
+            <Image width={100} src={complexMsg.data.uri} />
+            <span className=' pl-1 '></span>
+          </div>
+          <Button type='text' title='删除' className=' rounded-none text-slate-500' icon={<CloseCircleOutlined />} size={'middle'} onClick={() => setComplexMsg({})} />
         </Flex>
       )}
       <Input.TextArea
@@ -82,16 +106,14 @@ const InputBox = () => {
         autoSize={{ minRows: 2, maxRows: 6 }}
       />
       <Flex justify={'space-between'} className=' bg-gray-200 p-1 rounded-b'>
-        <Flex gap={4} className='divide-y-0 divide-x divide-solid divide-gray-500 *:text-primary *:rounded-none'>
+        <Flex gap={4} className='*:text-primary *:rounded-none'>
           <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
           {/* <InputImageUpload key={'addNewPic'} disabled={!textabled} invokeSendMessage={invokeSendMessage} /> */}
-          {/* <Button type='text' className='' icon={<FolderAddOutlined />} size={'middle'} /> */}
-          {/* <Button type='text' className='' icon={<CloudUploadOutlined />} size={'middle'} /> */}
-          {/* <Button type='text' className='' icon={<FilePdfOutlined />} size={'middle'} /> */}
+          {/* <Button type='text' className='' icon={<FolderAddOutlined />} size={'middle'} />
+          <Button type='text' className='' icon={<CloudUploadOutlined />} size={'middle'} />
+          <Button type='text' className='' icon={<FilePdfOutlined />} size={'middle'} /> */}
         </Flex>
-        <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />}
-        disabled={!textabled}
-        >
+        <Button key={'send-btn'} onClick={handleSendText} type='primary' size='middle' icon={<SendOutlined />} disabled={!textabled}>
           Send
         </Button>
       </Flex>