fix: 判断是否支持 window.Notification

perf: 移动端
style: Emoji popover

src/lib/msgUtils.js

@@ -527,6 +527,10 @@ export const whatsappError = {
  * 系统弹窗通知
  */
 export const handleNotification = (title, _options) => {
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+    return false;
+  }
   var notification;
   const options = {
     requireInteraction: true, // 设置手动关闭

src/views/AuthApp.jsx

@@ -26,7 +26,12 @@ function AuthApp() {
     state.disconnectWebsocket,
   ]);
   useEffect(() => {
-    Notification.requestPermission();
+    if (!("Notification" in window)) {
+      alert("This browser does not support desktop notification");
+      return false;
+    } else {
+      Notification.requestPermission();
+    }
     if (loginUser.userId > 0) {
       connectWebsocket(loginUser.userId);
       fetchInitialData(loginUser.userId); // userIdStr

src/views/Conversations/Components/ConversationsList.jsx

@@ -18,8 +18,7 @@ const Conversations = ({ mobile }) => {
   const navigate = useNavigate();
   const userId = useAuthStore((state) => state.loginUser.userId);
   const initialState = useConversationStore((state) => state.initialState);
-  const activeConversations = useConversationStore((state) => state.activeConversations);
-  const [currentConversation, setCurrentConversation, updateCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation, state.updateCurrentConversation]);
+  const [currentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation]);
   const conversationsList = useConversationStore((state) => state.conversationsList);
   const addToConversationList = useConversationStore((state) => state.addToConversationList);
   const delConversationitem = useConversationStore((state) => state.delConversationitem);
@@ -27,6 +26,15 @@ const Conversations = ({ mobile }) => {
   const [tabSelectedConversation, setTabSelectedConversation] = useState({});
   const [tabCnt, setTabCnt] = useState(-1);
 
+  useEffect(() => {
+    if (mobile !== undefined) {
+      setCurrentConversation({});
+    }
+
+    return () => {};
+  }, [])
+
+
   const [dataSource, setDataSource] = useState(conversationsList);
   useEffect(() => {
     setDataSource(conversationsList);

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

@@ -17,12 +17,19 @@ const InputTemplate = ({ mobile, disabled = false, inputEmoji }) => {
         overlayInnerStyle={{ padding: 0, borderRadius: '8px' }}
         forceRender={true}
         content={<EmojiPicker skinTonesDisabled={true} emojiStyle='native' onEmojiClick={handlePickEmoji} className='chatwindow-wrapper' />}
-        // title='😃'
+        title={
+          <div className='flex justify-between p-1 '>
+            <div>Emoji</div>
+            <Button size='small' onClick={() => setOpenPopup(false)}>
+              &times;
+            </Button>
+          </div>
+        }
         trigger='click'
         open={openPopup}
         onOpenChange={setOpenPopup}>
         <Button type='text' className=' px-1' size={'middle'} disabled={disabled}>
-        😃
+          😃
         </Button>
       </Popover>
     </>

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

@@ -126,23 +126,26 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
   return (
     <>
       <Popover
-        overlayClassName={[mobile === undefined ? 'w-3/5' : 'w-full'].join(' ')}
+        overlayClassName={[mobile === undefined ? 'w-3/5' : 'w-full max-h-full'].join(' ')}
         fresh
         forceRender
         destroyTooltipOnHide={true}
         content={
           <>
-            <Input.Search
-              ref={searchInputRef}
-              onSearch={handleSearchTemplates}
-              allowClear
-              value={searchContent}
-              onChange={(e) => {
-                setSearchContent(e.target.value);
-                handleSearchTemplates(e.target.value);
-              }}
-              placeholder='搜索名称'
-            />
+            <div className='flex justify-between mt-2 gap-4 content-center'>
+              <Input.Search prefix={'🙋'}
+                ref={searchInputRef}
+                onSearch={handleSearchTemplates}
+                allowClear
+                value={searchContent}
+                onChange={(e) => {
+                  setSearchContent(e.target.value);
+                  handleSearchTemplates(e.target.value);
+                }}
+                placeholder='搜索名称'
+              />
+              <Button size='small' onClick={() => setOpenTemplates(false)}>&times;</Button>
+            </div>
             <List
               className='h-4/6 overflow-y-auto text-slate-900'
               itemLayout='horizontal'
@@ -163,7 +166,7 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
                     }
                     description={
                       <>
-                        <div className=' max-h-40 overflow-y-auto divide-dashed divide-x-0 divide-y divide-gray-300'>
+                        <div className=' max-h-32 overflow-y-auto divide-dashed divide-x-0 divide-y divide-gray-300'>
                           <div className='text-slate-500'>{renderForm({ tempItem: item })}</div>
                           {item.components?.footer?.[0] ? <div className=''>{item.components.footer[0].text || ''}</div> : null}
                         </div>
@@ -175,7 +178,11 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
             />
           </>
         }
-        title='🙋打招呼'
+        // title={
+        //   <div className='flex justify-between mt-2 '>
+        //     <div>🙋打招呼</div>
+        //     <Button size='small' onClick={() => setOpenTemplates(false)}>&times;</Button>
+        //   </div>}
         trigger='click'
         open={openTemplates}
         onOpenChange={setOpenTemplates}>

src/views/Conversations/Components/MessagesWrapper.jsx

@@ -39,7 +39,7 @@ const MessagesWrapper = () => {
     updateCurrentConversation({ lasttime: thisLastTime, loadNextPage });
 
     return () => {};
-  }, [activeMessages, currentConversation.sn]);
+  }, [currentConversation.sn]);
 
 
   const getFirstPageMessages = async (item) => {

src/views/Conversations/Conversations.css

@@ -178,6 +178,9 @@
 .chatwindow-wrapper .rce-mbox .rce-mbox-reply {
     background-color: rgba(236, 236, 236, 0.7);
 }
+.chatwindow-wrapper.epr-main.EmojiPickerReact{
+    border: none;
+}
 .chatwindow-wrapper .rce-mbox .epr-emoji-img,
 .chatwindow-wrapper .rce-mbox .epr-emoji-native
 {