From e4da66d1a9eec39000ca1c24484871565005b488 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Tue, 5 Mar 2024 15:25:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=88=AA=E6=96=AD=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E4=B8=8A=E7=9A=84=E5=90=8D=E7=A7=B0=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Conversations/Components/ConversationsList.jsx | 2 +-
 src/views/Conversations/Components/MessagesWrapper.jsx   | 2 +-
 src/views/Conversations/Conversations.css                | 7 +++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/Conversations/Components/ConversationsList.jsx b/src/views/Conversations/Components/ConversationsList.jsx
index 689fedf..98889c0 100644
--- a/src/views/Conversations/Components/ConversationsList.jsx
+++ b/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}
diff --git a/src/views/Conversations/Components/MessagesWrapper.jsx b/src/views/Conversations/Components/MessagesWrapper.jsx
index c1da2c8..362bbbe 100644
--- a/src/views/Conversations/Components/MessagesWrapper.jsx
+++ b/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 (
diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css
index 8cf27d4..8478a44 100644
--- a/src/views/Conversations/Conversations.css
+++ b/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{