style: 截断头像上的名称显示

src/views/Conversations/Components/ConversationsList.jsx

@@ -113,7 +113,7 @@ const Conversations = () => {
               key={item.sn}
               id={item.sn}
               // 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}}
+              letterItem={{id: item.whatsapp_name.trim() || item.whatsapp_phone_number, letter: (item.whatsapp_name.trim() || item.whatsapp_phone_number).slice(0, 5)}}
               alt={`${item.whatsapp_name.trim()}`}
               title={item.whatsapp_name.trim() || item.whatsapp_phone_number}
               subtitle={item.whatsapp_phone_number}

src/views/Conversations/Components/MessagesWrapper.jsx

@@ -4,7 +4,7 @@ import { useShallow } from 'zustand/react/shallow';
 import MessagesList from './MessagesList';
 
 const MessagesWrapper = () => {
-  const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn ? state.activeConversations[state.currentConversation.sn] : [])));
+  const activeMessages = useConversationStore(useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn]: [])));
 
   const reference = useRef(null);
   return (

src/views/Conversations/Conversations.css

@@ -84,10 +84,13 @@
 }
 .chatwindow-wrapper .rce-avatar-letter{
     margin-top: 0;
-    margin-left: 5px;
+    /* margin-left: 5px; */
+    padding: 5px;
     justify-content: flex-start;
     font-size: 12px;
-    word-wrap: break-word;
+    /* word-wrap: break-word; */
+    text-wrap: nowrap;
+    word-break: keep-all;
     height: 100%;
 }
 .chatwindow-wrapper .whatsappme-container .rce-mbox{