style: 图片消息样式; 会话列表

src/lib/msgUtils.js

@@ -185,20 +185,20 @@ export const whatsappMsgTypeMapped = {
     data: (msg) => ({
       id: msg.wamid,
       text: msg.image.caption,
-      data: { id: msg.wamid, uri: msg.image.link, width: 200, height: 200, alt: msg.image.caption,  },
+      data: { id: msg.wamid, uri: msg.image.link, width: '100%', height: 200, alt: msg.image.caption,  },
       onOpen: () => {
         console.log('Open image', msg.image.link);
       },
     }),
     renderForReply: (msg) => ({
-      id: msg.wamid, photoURL: msg.image.link, width: 200, height: 200, alt: '',
+      id: msg.wamid, photoURL: msg.image.link, width: '100%', height: 200, alt: '',
     }),
   },
   sticker: {
     type: 'photo',
     data: (msg) => ({
       id: msg.wamid,
-      data: { id: msg.wamid, uri: msg.sticker.link, width: 150, height: 120, alt: '' },
+      data: { id: msg.wamid, uri: msg.sticker.link, width: '100%', height: 120, alt: '' },
     }),
   },
   video: {

src/views/Conversations/Components/ConversationsList.jsx

@@ -118,7 +118,7 @@ const Conversations = () => {
               title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
               date={item.last_received_time}
               unread={item.unread_msg_count}
-              className={String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-2 border-solid border-whatsapp-me ' : ''}
+              className={String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : ''}
               onClick={() => onSwitchConversation(item)}
             />
           </Dropdown>

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

@@ -32,7 +32,7 @@ const ImageUpload = ({ disabled, invokeSendMessage }) => {
   const handleSendImage = (src) => {
     const msgObj = {
       type: 'photo',
-      data: { uri: src, },
+      data: { uri: src, width: '100%', height: 150, },
       id: uuid(),
     };
     setComplexMsg(msgObj);

src/views/Conversations/Components/InputComposer.jsx

@@ -35,13 +35,13 @@ const InputBox = () => {
 
   const invokeSendMessage = (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,
+      id: `${currentConversation.sn}.${uuid()}`,
     };
     console.log('sendMessage------------------', msgObjMerge);
     const contentToSend = sentMsgTypeMapped[msgObjMerge.type].contentToSend(msgObjMerge);
@@ -106,7 +106,7 @@ 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} />
-          {/* <InputImageUpload key={'addNewPic'} disabled={!textabled} 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'} /> */}

src/views/Conversations/Components/Messages.jsx

@@ -56,7 +56,7 @@ const Messages = () => {
           <Dropdown
             key={message.key}
             menu={{
-              items: [{ label: '回复', key: 'reply' }],
+              items: [{ label: '回复', key: 'reply', disabled: !['text'].includes(message.whatsapp_msg_type) }],
               onClick: ({ key, domEvent }) => {
                 domEvent.stopPropagation();
                 switch (key) {

src/views/Conversations/Conversations.css

@@ -11,6 +11,9 @@
 .chatwindow-wrapper .rce-container-mbox .rce-mbox{
     max-width: 400px;
 }
+.chatwindow-wrapper .rce-citem {
+    background: transparent;
+}
 .chatwindow-wrapper .rce-mbox-time-block{
     background: linear-gradient(0deg,#00000014,#0000);
     color: #00000073;
@@ -21,6 +24,9 @@
 .chatwindow-wrapper .rce-mbox-text:after{
     content: none;
 }
+.chatwindow-wrapper .rce-mbox-photo--img img{
+    width: 100%;
+}
 .chatwindow-wrapper .rce-mbox-photo .rce-mbox-text{
     padding-left: 8px;
 }