上传图片

src/lib/msgUtils.js

@@ -185,7 +185,8 @@ export const whatsappMsgTypeMapped = {
     type: 'photo',
     data: (msg) => ({
       id: msg.wamid,
-      data: { id: msg.wamid, uri: msg.image.link, width: 200, height: 200, alt: '' },
+      text: msg.image.caption,
+      data: { id: msg.wamid, uri: msg.image.link, width: 200, height: 200, alt: msg.image.caption,  },
       onOpen: () => {
         console.log('Open image', msg.image.link);
       },

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

@@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { Upload, Button, message } from 'antd';
+import {
+  SendOutlined,
+  MessageOutlined,
+  SmileOutlined,
+  PictureOutlined,
+  FileImageOutlined,
+  CommentOutlined,
+  UploadOutlined,
+  CloudUploadOutlined,
+  FolderAddOutlined,
+  FilePdfOutlined,
+  CloseCircleOutlined,
+} from '@ant-design/icons';
+import useConversationStore from '@/stores/ConversationStore';
+
+const props = {
+  name: 'file',
+  action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
+  headers: {
+    authorization: 'authorization-text',
+  },
+  showUploadList: false,
+};
+
+const ImageUpload = ({ disabled, invokeSendMessage }) => {
+  const { currentConversation, referenceMsg, setReferenceMsg } = useConversationStore();
+  const [uploading, setUploading] = useState(false);
+
+  const handleSendImage = (src) => {
+    const msgObj = {
+      type: 'photo',
+      data: { uri: src, },
+    };
+    invokeSendMessage(msgObj);
+  };
+  return (
+    <Upload
+      {...props}
+      onChange={(info) => {
+        setUploading(info.file.status === 'uploading');
+        if (info.file.status !== 'uploading') {
+          console.log(info.file, info.fileList);
+        }
+        if (info.file.status === 'done') {
+          // 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');
+        } else if (info.file.status === 'error') {
+          message.error(`图片添加失败`);
+        }
+      }}>
+      <Button key={'addPic'} type='text' loading={uploading} disabled={disabled} icon={<PictureOutlined />} size={'middle'} className='text-primary rounded-none' />
+    </Upload>
+  );
+};
+export default ImageUpload;

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

@@ -52,12 +52,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
     let valid = true;
     const msgObj = {
       type: 'whatsappTemplate',
-      to: currentConversation.whatsapp_phone_number,
-      id: `${currentConversation.sn}.${uuid()}`,
-      date: new Date(),
-      status: 'waiting',
       // statusTitle: 'Ready to send',
-      sender: 'me',
       template: {
         name: fromTemplate.name,
         language: { code: fromTemplate.language },

src/views/Conversations/Components/InputComposer.jsx

@@ -7,7 +7,8 @@ import { SendOutlined, MessageOutlined, SmileOutlined, PictureOutlined, CommentO
 import { isEmpty } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
 import { sentMsgTypeMapped } from '@/lib/msgUtils';
-import InputTemplate from './InputTemplate';
+import InputTemplate from './Input/Template';
+import InputImageUpload from './Input/ImageUpload';
 import dayjs from 'dayjs';
 
 const InputBox = () => {
@@ -23,13 +24,25 @@ const InputBox = () => {
   const textabled = (talkabled && !gt24h);
 
   const invokeSendMessage = (msgObj) => {
-    console.log('sendMessage------------------', msgObj);
-    const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
+    const msgObjMerge = {
+      id: `${currentConversation.sn}.${uuid()}`,
+      sender: 'me',
+      to: currentConversation.whatsapp_phone_number,
+      date: new Date(),
+      status: 'waiting',
+      ...(referenceMsg.id ? { context: { message_id: referenceMsg.id }, message_origin: referenceMsg } : {}),
+      ...msgObj,
+    };
+    console.log('sendMessage------------------', msgObjMerge);
+    const contentToSend = sentMsgTypeMapped[msgObjMerge.type].contentToSend(msgObjMerge);
     console.log('content to send-------------------------------------', contentToSend);
     websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn });
-    const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj);
+    const contentToRender = sentMsgTypeMapped[msgObjMerge.type].contentToRender(msgObjMerge);
     console.log(contentToRender, 'contentToRender  sendMessage------------------');
     sentOrReceivedNewMessage(contentToRender.conversationid, contentToRender);
+
+    setTextContent('');
+    setReferenceMsg({});
   };
 
   const handleSendText = () => {
@@ -37,35 +50,10 @@ const InputBox = () => {
       const msgObj = {
         type: 'text',
         text: textContent,
-        sender: 'me',
-        to: currentConversation.whatsapp_phone_number,
-        id: `${currentConversation.sn}.${uuid()}`, // Date.now().toString(16),
-        date: new Date(),
-        status: 'waiting',
-        ...(referenceMsg.id ? { context: { message_id: referenceMsg.id, }, message_origin: referenceMsg } : {}),
       };
       invokeSendMessage(msgObj);
-      setTextContent('');
-      setReferenceMsg({});
     }
   };
-  const handleSendImage = () => {
-    if (textContent.trim() !== '') {
-      const msgObj = {
-        type: 'photo',
-        data: { uri: textContent },
-        sender: 'me',
-        to: currentConversation.whatsapp_phone_number,
-        id: `${currentConversation.sn}.${uuid()}`, // Date.now().toString(16),
-        date: new Date(),
-        status: 'waiting',
-        ...(referenceMsg.id ? { context: { message_id: referenceMsg.id }, message_origin: referenceMsg } : {}),
-      };
-      invokeSendMessage(msgObj);
-      setTextContent('');
-      setReferenceMsg({});
-    }
-  }
 
   return (
     <div>
@@ -95,7 +83,7 @@ const InputBox = () => {
       <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'>
           <InputTemplate key='templates' disabled={!talkabled} invokeSendMessage={invokeSendMessage} />
-          <Button key={'addPic'} type='text' disabled={!textabled} className='' icon={<PictureOutlined />} size={'middle'} />
+          {/* <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'} /> */}

src/views/Conversations/Conversations.css

@@ -18,6 +18,9 @@
 .chatwindow-wrapper .rce-mbox-text:after{
     content: none;
 }
+.chatwindow-wrapper .rce-mbox-photo .rce-mbox-text{
+    padding-left: 8px;
+}
 .chatwindow-wrapper .rce-mbox-left-notch {
     width: 10px;
     height: 10px;