custom service-worker

# Conflicts:
#	src/views/Conversations/Components/Input/MediaUpload.jsx

package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.21.1",
     "rxjs": "^7.8.1",
     "uuid": "^9.0.1",
+    "vite-plugin-pwa": "^0.19.6",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

public/service-worker.js

@@ -0,0 +1,39 @@
+function openWebSocket() {
+  console.log('open websocket');
+}
+
+self.addEventListener('install', function(event) {
+  self.skipWaiting();
+  console.log('Installed', event);
+});
+self.addEventListener('activate', (event) => {
+  // event.waitUntil(self.clients.claim());
+  event.waitUntil(openWebSocket());
+  self.clients.claim();
+});
+
+self.addEventListener('push', (event) => {
+  const data = event.data.json();
+
+  const title = data.title || 'New Message';
+  const options = {
+    body: data.body || 'You have a new message',
+    icon: 'path/to/icon.png',
+    badge: 'path/to/badge.png',
+    vibrate: [200, 100, 200], // 振动
+    // Other notification options
+  };
+
+  event.waitUntil(
+    self.registration.showNotification(title, options)
+  );
+});
+
+// Send a message to all clients every minute
+setInterval(function() {
+  self.clients.matchAll().then(function(clients) {
+    clients.forEach(function(client) {
+      client.postMessage('Service worker is still running');
+    });
+  });
+}, 60000); // 60000 ms = 1 minute

src/lib/msgUtils.js

@@ -185,6 +185,26 @@ export const sentMsgTypeMapped = {
       // const footer = msg.template_origin.components?.footer?.[0]?.text || '';
       return {
         ...msg,
+        template: {
+          ...msg.template,
+          components: [
+            ...msg.template.components.filter((com) => !['footer', 'buttons', 'header'].includes(com.type.toLowerCase())),
+            ...(msg.template.components.filter((com) => 'header' === com.type.toLowerCase()).length > 0
+              ? msg.template.components
+                  .filter((com) => 'header' === com.type.toLowerCase())
+                  .map((ele) => ({ type: 'header', parameters: [{ text: ele.text, type: ele.format.toLowerCase(), [ele.format.toLowerCase()]: { link: ele.example.header_url[0] } }] }))
+              : []),
+            ...(msg.template.components.filter((com) => 'buttons' === com.type.toLowerCase()).length > 0
+              ? msg.template.components
+                  .filter((com) => 'buttons' === com.type.toLowerCase())[0]
+                  // .buttons.filter((btns) => ! ['phone_number', 'url'].includes( btns.type.toLowerCase()))
+                  .buttons.filter((btns) => ! isEmpty(btns.example)) // 静态按钮不发
+                  .map((btn, btnI) => ({ type: 'button', sub_type: btn.type.toLowerCase(), index: btnI,
+                  // parameters: [{ text: 'lq1FTtA8', type: 'text' }]
+                }))
+              : []),
+          ],
+        },
         actionId: msg.id,
         conversationid: msg.id.split('.')[0],
         type: 'text',

src/main.jsx

@@ -74,3 +74,36 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   </ThemeContext.Provider>
   // </React.StrictMode>
 );
+
+if ('serviceWorker' in navigator) {
+  const wb = import.meta.env.VITE_SERVICE_WORKER_ENTRY;
+  console.log('if service worker', wb);
+  window.addEventListener('load', () => {
+  console.log('listen load');
+    navigator.serviceWorker.register('/service-worker.js').then(
+      (registration) => {
+        console.log('Service Worker registered:', registration);
+      },
+      (error) => {
+        console.error('Service Worker registration failed:', error);
+      }, () => {
+        console.log('final');
+      }
+    );
+
+//     navigator.serviceWorker.register(wb).then(
+//       (registration) => {
+//         console.log('vite-plugin-pwa Service Worker registered:', registration);
+//       },
+//       (error) => {
+//         console.error('vite-plugin-pwa Service Worker registration failed:', error);
+//       }
+//     );
+  });
+
+
+  // Listen for messages from the service worker
+  navigator.serviceWorker.addEventListener('message', function(event) {
+    console.log('Received message from service worker:', event.data);
+  });
+}

src/views/AuthApp.jsx

@@ -8,6 +8,7 @@ import 'dayjs/locale/zh-cn'
 import { useEffect, useState } from 'react'
 import { Outlet, useHref, useNavigate } from 'react-router-dom'
 
+import AppLogo from '@/assets/logo-gh.png'
 import '@/assets/App.css'
 import 'react-chat-elements/dist/main.css'
 
@@ -20,12 +21,33 @@ function AuthApp() {
 
   const href = useHref()
 
+  // Whether we are running as an installed PWA or not.
+  const isInstalledPWA = window.matchMedia('(display-mode: window-controls-overlay)').matches ||
+                          window.matchMedia('(display-mode: standalone)').matches;
   const [connectWebsocket, fetchInitialData, disconnectWebsocket ] = useConversationStore((state) => [
     state.connectWebsocket,
     state.fetchInitialData,
     state.disconnectWebsocket,
   ]);
   useEffect(() => {
+    if (! isInstalledPWA) {
+      document.getElementById('about-dialog').showModal();
+    }
+    if (!isInstalledPWA ) {
+      window.addEventListener('beforeinstallprompt', e => {
+        // Don't let the default prompt go.
+        e.preventDefault();
+
+        // Instead, wait for the user to click the install button.
+        document.getElementById('about-dialog').addEventListener('close', () => {
+          if (document.getElementById('about-dialog').returnValue === "install") {
+            e.prompt();
+          }
+        });
+      });
+    } else {
+      document.getElementById('install-button').disabled = true;
+    }
     if (!("Notification" in window)) {
       alert("This browser does not support desktop notification");
     } else {
@@ -57,20 +79,34 @@ function AuthApp() {
         token: {
           colorPrimary: colorPrimary,
           borderRadius: borderRadius,
-          fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",
+          fontFamily:
+            "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",
         },
         algorithm: theme.defaultAlgorithm,
       }}
       locale={zhLocale}
-      renderEmpty={() => <Empty description={false} />}
+      renderEmpty={() => <Empty description={false} />}>
-    >
       <AntApp>
         <ErrorBoundary>
           <Outlet />
+          <dialog id='about-dialog' className='border-0'>
+            <img className='logo' src={AppLogo} alt='logo' />
+            <section className='about'>
+              <h1>销售平台</h1>
+              <h2>Sales CRM</h2>
+              <p>Haina travel global sales CRM system</p>
+            </section>
+            <form className='actions flex gap-1' method='dialog'>
+              <button value='cancel' className='px-4 py-2 rounded-full border-0'>Close</button>
+              <button value='install' id='install-button' className='px-4 py-2 rounded-full border-0 border-transparent bg-indigo-500 text-white'>
+                Install app
+              </button>
+            </form>
+          </dialog>
         </ErrorBoundary>
       </AntApp>
     </ConfigProvider>
-  )
+  );
 }
 
 export default AuthApp

src/views/Conversations/Components/ConversationsList.jsx

@@ -1,11 +1,13 @@
 import { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
-import { Dropdown, Input } from 'antd';
+import { Dropdown, Input, Button, } from 'antd';
-import { fetchOrderConversationsList, fetchConversationItemClose, } from '@/actions/ConversationActions';
+import { PlusOutlined, WhatsAppOutlined, } from '@ant-design/icons';
+import { fetchOrderConversationsList, fetchConversationItemClose, postNewConversationItem } from '@/actions/ConversationActions';
 import { ChatItem } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';
 import useAuthStore from '@/stores/AuthStore';
+import ConversationsNewItem from './ConversationsNewItem';
 
 /**
  * []
@@ -127,9 +129,22 @@ const Conversations = ({ mobile }) => {
     setDataSource(conversationsList);
   };
 
+  const [newChatModalVisible, setNewChatModalVisible] = useState(false);
+  const [newChatFormValues, setNewChatFormValues] = useState();
+  const handleNewChat = async (values) => {
+    console.log(values);
+    const newItem = await postNewConversationItem({...values, opi_sn: userId });
+    if ( ! isEmpty(newItem)) {
+      addToConversationList(newItem);
+      setCurrentConversation(newItem);
+    }
+    // setNewChatFormValues(values);
+  }
+
   return (
     <div className='flex flex-col h-inherit'>
-      <div className=''>
+      <div className='flex gap-1'>
+        <Button onClick={() => setNewChatModalVisible(true)} icon={<PlusOutlined />} type={'primary'} />
         <Input.Search
           className=''
           ref={searchInputRef}
@@ -142,10 +157,10 @@ const Conversations = ({ mobile }) => {
             setTabCnt(-1);
             setTabSelectedConversation({});
           }}
-          onKeyDown={e => {
+          onKeyDown={(e) => {
             if (e.key === 'Tab') {
               e.preventDefault();
-              const _this = tabCnt >= dataSource.length-1 ? 0 : tabCnt + 1
+              const _this = tabCnt >= dataSource.length - 1 ? 0 : tabCnt + 1;
               setTabCnt(_this);
               setTabSelectedConversation(dataSource[_this]);
             }
@@ -153,12 +168,12 @@ const Conversations = ({ mobile }) => {
           onPressEnter={(e) => {
             handleSearchConversations(e.target.value);
             searchInputRef.current.blur();
-            onSwitchConversation(dataSource[(tabCnt < 0 ? 0 : tabCnt)]);
+            onSwitchConversation(dataSource[tabCnt < 0 ? 0 : tabCnt]);
             setTabCnt(-1);
             setTabSelectedConversation({});
             return false;
           }}
-          placeholder='搜索名称'
+          placeholder='搜索名称/号码/订单号'
         />
       </div>
       <div className='flex-1 overflow-x-hidden overflow-y-auto relative'>
@@ -189,16 +204,18 @@ const Conversations = ({ mobile }) => {
               subtitle={item.coli_id}
               date={item.last_received_time}
               unread={item.unread_msg_count}
-              className={
+              className={[
-                [String(item.sn) === String(currentConversation.sn) ? '__active text-primary  bg-whatsapp-bg' : '',
+                String(item.sn) === String(currentConversation.sn) ? '__active text-primary  bg-whatsapp-bg' : '',
-                String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : ''
+                String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : '',
-              ].join(' ')
+              ].join(' ')}
-              }
+              statusText={<WhatsAppOutlined key={'channel'} className='text-whatsapp' />}
+              statusColor={'#fff'}
               onClick={() => onSwitchConversation(item)}
             />
           </Dropdown>
         ))}
       </div>
+      <ConversationsNewItem open={newChatModalVisible} onCreate={handleNewChat} onCancel={() => setNewChatModalVisible(false)} />
     </div>
   );
 };

src/views/Conversations/Components/ConversationsNewItem.jsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { Form, Input, Modal } from 'antd';
+
+export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) => {
+  const [form] = Form.useForm();
+  useEffect(() => {
+    onFormInstanceReady(form);
+  }, []);
+  return (
+    <Form layout='horizontal' form={form} name='form_in_modal' initialValues={initialValues}>
+      <Form.Item name={'phone_number'} label='WhatsApp号码' rules={[{ required: true, message: '请输入联系人手机号' }]}>
+        <Input placeholder='请输入联系人手机号' />
+      </Form.Item>
+      <Form.Item name={'name'} label='联系人名称' rules={[{ required: true, message: '请输入联系人名称' }]}>
+        <Input placeholder='请输入联系人名称' />
+      </Form.Item>
+    </Form>
+  );
+};
+export const ConversationItemFormModal = ({ open, onCreate, onCancel, initialValues }) => {
+  const [formInstance, setFormInstance] = useState();
+  return (
+    <Modal
+      open={open}
+      title='新建会话'
+      okText='创建'
+      // cancelText='Cancel'
+      okButtonProps={{
+        autoFocus: true,
+      }}
+      onCancel={() => { onCancel(); formInstance?.resetFields();}}
+      destroyOnClose
+      onOk={async () => {
+        try {
+          const values = await formInstance?.validateFields();
+          // formInstance?.resetFields();
+          onCreate(values);
+        } catch (error) {
+          console.log('Failed:', error);
+        }
+      }}>
+      <ConversationItemForm
+        initialValues={initialValues}
+        onFormInstanceReady={(instance) => {
+          setFormInstance(instance);
+        }}
+      />
+    </Modal>
+  );
+};
+export default ConversationItemFormModal;

src/views/Conversations/Components/InputComposer.jsx

@@ -28,24 +28,6 @@ import ExpireTimeClock from './ExpireTimeClock';
 import dayjs from 'dayjs';
 
 const aliOSSHost = `https://haina-sale-system.oss-cn-shenzhen.aliyuncs.com/WAMedia/`;
-/**
- * image
- * ext: ani;bmp;gif;ico;jpe;jpeg;jpg;pcx;png;psd;tga;tif;tiff;wmf
- *
- * audio
- * ext: aac;ac3;aif;aifc;aiff;au;cda;dts;fla;flac;it;m1a;m2a;m3u;m4a;mid;midi;mka;mod;mp2;mp3;mpa;ogg;ra;rmi;spc;rmi;snd;umx;voc;wav;wma;xm
- *
- * video
- * ext: 3g2;3gp;3gp2;3gpp;amr;amv;asf;avi;bdmv;bik;d2v;divx;drc;dsa;dsm;dss;dsv;evo;f4v;flc;fli;flic;flv;hdmov;ifo;ivf;m1v;m2p;m2t;m2ts;m2v;m4b;m4p;m4v;mkv;mp2v;mp4;mp4v;mpe;mpeg;mpg;mpls;mpv2;mpv4;mov;mts;ogm;ogv;pss;pva;qt;ram;ratdvd;rm;rmm;rmvb;roq;rpm;smil;smk;swf;tp;tpr;ts;vob;vp6;webm;wm;wmp;wmv
- *
- */
-const fileTypesExt = {
-  sticker: ['webp'],
-  photo: ['jpeg', 'jpg', 'png'],
-  video: ['gif', 'mp4', '3gp'],
-  document: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'csv'],
-  audio: ['aac', 'mp4', 'm4a', 'mp3', 'amr', 'ogg'],
-};
 
 const InputComposer = ({ mobile }) => {
   const userId = useAuthStore((state) => state.loginUser.userId);
@@ -266,7 +248,7 @@ const InputComposer = ({ mobile }) => {
         maxLength={2000}
         showCount={textabled}
         placeholder={
-          gt24h
+          !textabled
             ? '会话已过期. 请发送打招呼消息激活对话💬.'
             : mobile === undefined
             ? 'Enter 发送, Shift+Enter 换行\n支持复制粘贴 [截图/文件] 以备发送'

src/views/Conversations/Components/MessagesList.jsx

@@ -60,11 +60,11 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
       <span className={`text-sm leading-5 emoji-text whitespace-pre-wrap ${className} ${extraClass}`} key={'msg-text'}>
         {headerObj ? (
           <div className='text-neutral-500 text-center'>
-            {'text' === headerObj.format.toLowerCase() && <div>{headerObj.text}</div>}
+            {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <div>{headerObj.text}</div>}
-            {'image' === headerObj.format.toLowerCase() && <img src={headerObj.example.header_url} height={100}></img>}
+            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <img src={headerObj.parameters[0].image.link} height={100}></img>}
-            {['document', 'video'].includes(headerObj.format.toLowerCase()) && (
+            {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
-              <a href={headerObj.example.header_url} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
+              <a href={headerObj.parameters[0][headerObj.parameters[0].type].link} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
-                [&nbsp;{headerObj.format}&nbsp;]
+                [&nbsp;{headerObj.parameters[0].type}&nbsp;]
               </a>
             )}
           </div>

src/views/Conversations/Conversations.css

@@ -217,9 +217,9 @@
 .chatwindow-wrapper .message-box-focus {
     animation-iteration-count: 2;
     -webkit-animation-iteration-count: 2;
-    -webkit-animation-duration: 1s;
+    -webkit-animation-duration: 2s;
     animation-name: message-box-default-focus-x;
-    animation-duration: 1s;
+    animation-duration: 2s;
 }
 
 

vite.config.js

@@ -1,31 +1,73 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
-import WindiCSS from 'vite-plugin-windicss'
+import WindiCSS from 'vite-plugin-windicss';
+import { VitePWA } from 'vite-plugin-pwa';
 
 const buildDatePlugin = () => {
   return {
     transformIndexHtml(html) {
-      const dataString = new Date().toISOString()
+      const dataString = new Date().toISOString();
-      return html.replace(
+      return html.replace(/%BUILD_DATE%/, `${dataString}`);
-        /%BUILD_DATE%/,
-        `${dataString}`,
-      )
     },
-  }
+  };
-}
+};
-
+// PWA plugin
+const manifestForPlugIn = {
+  // registerType: 'prompt',
+  // registerType: 'autoUpdate',
+  registerType: 'none',
+  // includeAssests: ['/src/assets/logo-gh.png'],
+  workbox: {
+    globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
+  },
+  manifest: {
+    name: 'Sales CRM',
+    short_name: 'Sales CRM',
+    description: 'Haina travel global sales CRM system',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: '32x32',
+      },
+      {
+        src: '/s-launchericon-192-192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/s-launchericon-144-144.png',
+        sizes: '144x144',
+        type: 'image/png',
+      },
+      {
+        src: '/s-launchericon-512-512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+    theme_color: '#171717',
+    background_color: '#ccd5ae',
+    display: 'standalone',
+    display_override: ['window-controls-overlay'],
+    scope: '/',
+    start_url: '.',
+    orientation: 'portrait',
+  },
+};
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), WindiCSS(), buildDatePlugin()],
+  plugins: [react(), WindiCSS(), buildDatePlugin(), ],
   server: {
-    host: "0.0.0.0",
+    host: '0.0.0.0',
   },
   resolve: {
     alias: {
-      "@": "/src",
+      '@': '/src',
     },
   },
   build: {
+    // outDir: 'distTTT',
+    emptyOutDir: true,
     sourcemap: true,
     manifest: true,
     chunkSizeWarningLimit: 555,
@@ -44,6 +86,6 @@ export default defineConfig({
     // }
   },
   terserOptions: {
-    maxWorkers: 4
+    maxWorkers: 4,
-  }
+  },
-})
+});