手动重连; 字母头像

src/views/Conversations/Components/ConversationsList.jsx

@@ -113,12 +113,13 @@ const Conversations = () => {
               {...item}
               key={item.sn}
               id={item.sn}
-              avatar={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name.trim() || item.whatsapp_phone_number}`}
+              // avatar={`https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name.trim() || item.whatsapp_phone_number}`}
+              letterItem={{id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: item.whatsapp_name.trim() || item.whatsapp_phone_number}}
               alt={`${item.whatsapp_name.trim()}`}
               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 underline  bg-whatsapp-me 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-2 border-solid border-whatsapp-me ' : ''}
               onClick={() => onSwitchConversation(item)}
             />
           </Dropdown>

src/views/Conversations/Components/MessagesHeader.jsx

@@ -1,18 +1,30 @@
-import { createContext, useContext, useEffect, useState } from 'react';
 import useConversationStore from '@/stores/ConversationStore';
-
-import { Flex, Typography, Avatar, Alert } from 'antd';
+import useAuthStore from '@/stores/AuthStore'
+import { Flex, Typography, Avatar, Alert, Button, Tooltip } from 'antd';
+import { ReloadOutlined, ApiOutlined } from '@ant-design/icons';
 import { LoadingOutlined } from '@ant-design/icons';
-import LocalTimeClock from './LocalTimeClock';
 
 const MessagesHeader = () => {
-  const {websocketOpened, websocketRetrying, websocketRetrytimes, currentConversation} = useConversationStore();
+  const { loadUser } = useAuthStore();
+  const { userId } = loadUser();
+  const {websocketOpened, websocketRetrying, websocketRetrytimes, currentConversation, connectWebsocket} = useConversationStore();
   return (
     <>
-      {websocketOpened===false && <Alert type='error' message='断开连接' banner />}
+      {websocketOpened === false && (
+        <Alert
+          type='error'
+          message='断开连接'
+          banner
+          action={
+            websocketRetrytimes === -1 ? <Tooltip key={'connect'} title='点击重试'>
+              <Button key={'connect'} type='text' icon={<ApiOutlined />} onClick={() => connectWebsocket(userId)} className=' text-blue-500' />
+            </Tooltip> : null
+          }
+        />
+      )}
       {websocketRetrying && websocketRetrytimes > 0 && <Alert type={'warning'} message={`正在重连, ${websocketRetrytimes}次...`} banner icon={<LoadingOutlined />} />}
       <Flex gap={16} className='p-1 flex-auto'>
-        {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />}
+        {/* {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />} */}
         <Flex flex={'1'} justify='space-between'>
           <Flex vertical={true} justify='space-between'>
             <Typography.Text strong>{currentConversation.customer_name}</Typography.Text>