config; 右键菜单选项; 图片消息样式; 发送表情

2 years ago · 8e0751fe26
parent 5ab038957b
commit 8e0751fe26
13 changed files with 105 additions and 16 deletions
--- a/contacts.sql
+++ b/contacts.sql
@ -0,0 +1,50 @@
+
+-- 601	王露加(AH) Ann Wang
+UPDATE WhatsApp_Session
+SET opi_sn =601
+WHERE opi_sn is null and whatsapp_phone_number IN ('600123021806', '919421671750', '61438817779', '393406100983', '12032531996', '60197799795', '447788271298', '6598239020', '4407788271298', '6584686731', '60123075151', '60194903126', '13238286927', '6596966465', '6598267067', '14048496022', '6598809877', '628111663399', '60166268901', '19376202088', '62811907069', '61402445619', '393343998897', '6589475894', '41768308393', '1919324583030', '6598410895', '6593838816', '610402445619', '6592707262', '610431280050', '62811265987', '447702101254', '4407702101254', '85295012200', '10438012756', '15127570944', '13038837142', '6594890344', '13053353222');
+
+UPDATE WhatsApp_InboundMessage
+SET opi_sn =601
+WHERE froms IN ('600123021806', '919421671750', '61438817779', '393406100983', '12032531996', '60197799795', '447788271298', '6598239020', '4407788271298', '6584686731', '60123075151', '60194903126', '13238286927', '6596966465', '6598267067', '14048496022', '6598809877', '628111663399', '60166268901', '19376202088', '62811907069', '61402445619', '393343998897', '6589475894', '41768308393', '1919324583030', '6598410895', '6593838816', '610402445619', '6592707262', '610431280050', '62811265987', '447702101254', '4407702101254', '85295012200', '10438012756', '15127570944', '13038837142', '6594890344', '13053353222');
+
+
+-- 487	杨新玲(AH) COCO
+UPDATE WhatsApp_Session
+SET opi_sn =487
+WHERE opi_sn is null and whatsapp_phone_number IN (
+'12103817205','17758484963','60149483183','6281510103434','628119782869','447752219225','12084122282','15083266574','14402632632','918178744977','12106891804','573206915405','12035084239','6591793713','6596303740','16507507777','13146235967','610402933421','19738008090','16025109980','14156139002','85569570025','23052514484','16135487944','18052166879','972522554653','270824611177','34651307209','41796154103','393421384738','19084563966','971568748804','84979380502','491785727904','4901785727904','6598227132','16179352409','4915122297678','15163772972','447539174554','447539174554','16025109980','19166276277','610415682199','447766318643','4407766318643','8201068091987','41796154103','918587901086','918587901086');
+
+UPDATE WhatsApp_InboundMessage
+SET opi_sn =487
+WHERE froms IN (
+'12103817205','17758484963','60149483183','6281510103434','628119782869','447752219225','12084122282','15083266574','14402632632','918178744977','12106891804','573206915405','12035084239','6591793713','6596303740','16507507777','13146235967','610402933421','19738008090','16025109980','14156139002','85569570025','23052514484','16135487944','18052166879','972522554653','270824611177','34651307209','41796154103','393421384738','19084563966','971568748804','84979380502','491785727904','4901785727904','6598227132','16179352409','4915122297678','15163772972','447539174554','447539174554','16025109980','19166276277','610415682199','447766318643','4407766318643','8201068091987','41796154103','918587901086','918587901086');
+
+-- 603	秦雯萱(AH) Dora
+UPDATE WhatsApp_Session
+SET opi_sn =603
+WHERE opi_sn is null and whatsapp_phone_number IN ('19013561781','6285811111175','62889692159816','60162185779','6287888722293','60126518499','60126183248','17789950848','610455289205','60123152286','6060126518499','15185983270','6594319127','19013561781','14104266170','16174120590','6597969282','6591714969','18476483195','6592976545','6590095741','66818890118','447545084704','6596921770','447917350605','4407917350605');
+
+UPDATE WhatsApp_InboundMessage
+SET opi_sn =603
+WHERE froms IN ('19013561781','6285811111175','62889692159816','60162185779','6287888722293','60126518499','60126183248','17789950848','610455289205','60123152286','6060126518499','15185983270','6594319127','19013561781','14104266170','16174120590','6597969282','6591714969','18476483195','6592976545','6590095741','66818890118','447545084704','6596921770','447917350605','4407917350605');
+
+
+-- 606	莫梦瑶 Glory
+UPDATE WhatsApp_Session
+SET opi_sn =606
+WHERE opi_sn is null and whatsapp_phone_number IN ('6285762428379');
+
+UPDATE WhatsApp_InboundMessage
+SET opi_sn =606
+WHERE froms IN ('6285762428379');
+
+-- 	586	秦宇尘 Jimmy
+UPDATE WhatsApp_Session
+SET opi_sn =606
+WHERE opi_sn is null and whatsapp_phone_number IN ('17736215303');
+
+UPDATE WhatsApp_InboundMessage
+SET opi_sn =606
+WHERE froms IN ('17736215303');
+
--- a/package.json
+++ b/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",
--- a/src/actions/ConversationActions.js
+++ b/src/actions/ConversationActions.js
@ -2,8 +2,7 @@
 import { groupBy } from '@/utils/utils';
 import { fetchJSON, postJSON } from '@/utils/request'
 import { parseRenderMessageList } from '@/lib/msgUtils';
-
-const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server';
+import { API_HOST } from '@/config';

 export const fetchTemplates = async () => {
  const data = await fetchJSON(`${API_HOST}/listtemplates`);
--- a/src/config.js
+++ b/src/config.js
@ -1,2 +1,3 @@
 export const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server'
+export const WS_URL = 'wss://p9axztuwd7x8a7.mycht.cn/whatsapp_server'; // prod:
 export const DATE_FORMAT = 'YYYY-MM-DD'
--- a/src/lib/msgUtils.js
+++ b/src/lib/msgUtils.js
@ -14,7 +14,7 @@ export const replaceTemplateString = (str, replacements) => {
  return result;
 }

-const autoLinkText = (text) => {
+export const autoLinkText = (text) => {
  let regex = /(https?:\/\/[^\s]+)/g;

  let newText = text.replace(regex, '<a href="$1" target="_blank">$1</a>');
@ -85,7 +85,6 @@ export const sentMsgTypeMapped = {
  whatsappTemplate: {
    contentToSend: (msg) => ({ action: 'message', actionId: msg.id, renderId: msg.id, to: msg.to, msgtype: 'template', msgcontent: msg.template }),
    contentToRender: (msg) => {
-      console.log(msg);
      const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({ ...r, [v.type]: v }), {}) : null;
      // const templateParam = (templateDataMapped?.body?.parameters || []).map(e => e.text);
      // const fillTemplate = templateParam.length ? replaceTemplateString(msg.template_origin.components.body?.[0]?.text || '', templateParam) : (msg.template_origin.components.body?.[0]?.text || '');
@ -186,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: {
--- a/src/stores/ConversationStore.js
+++ b/src/stores/ConversationStore.js
@ -4,10 +4,10 @@ import { olog, isEmpty } from '@/utils/utils';
 import { receivedMsgTypeMapped } from '@/lib/msgUtils';
 import { fetchConversationsList, fetchTemplates } from '@/actions/ConversationActions';
 import { devtools } from 'zustand/middleware';
+import { WS_URL } from '@/config';

 // const WS_URL = 'ws://202.103.68.144:8888/whatever/';
 // const WS_URL = 'ws://120.79.9.217:10022/whatever/';
-const WS_URL = 'wss://p9axztuwd7x8a7.mycht.cn/whatsapp_server'; // prod:

 const initialConversationState = {
  // websocket: null,
--- a/src/views/Conversations/Components/ConversationsList.jsx
+++ b/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>
--- a/src/views/Conversations/Components/Input/Emoji.jsx
+++ b/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;
--- a/src/views/Conversations/Components/Input/ImageUpload.jsx
+++ b/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);
@ -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>
  );
 };
--- a/src/views/Conversations/Components/Input/Template.jsx
+++ b/src/views/Conversations/Components/Input/Template.jsx
@ -118,7 +118,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
  };
  return (
    <>
-      <Popover
+      <Popover overlayClassName='w-3/5'
        fresh
        content={
          <>
@ -134,7 +134,7 @@ const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
              placeholder='搜索名称'
            />
            <List
-              className='h-4/6 overflow-y-auto text-slate-900' style={{width: '600px'}}
+              className='h-4/6 overflow-y-auto text-slate-900'
              itemLayout='horizontal'
              dataSource={dataSource}
              rowKey={'name'}
--- a/src/views/Conversations/Components/InputComposer.jsx
+++ b/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';

@ -35,13 +36,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);
@ -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'} />
--- a/src/views/Conversations/Components/Messages.jsx
+++ b/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) {
--- a/src/views/Conversations/Conversations.css
+++ b/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;
 }