From 3ce71706894f6f6b822ec42ab247a126f033a147 Mon Sep 17 00:00:00 2001
From: Shinji-Li <1349021570@qq.com>
Date: Thu, 9 May 2024 11:26:07 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20fix:=20=E5=85=A8=E5=B1=80=20CSS=20?=
 =?UTF-8?q?=E5=BD=B1=E5=93=8D=E9=97=AE=E9=A2=98=E5=8E=BB=E9=99=A4=20(#192)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__test__/__snapshots__/demo.test.tsx.snap | 1652 ++++++++---------
 src/ProChat/container/OverrideStyle/global.ts |   34 -
 2 files changed, 735 insertions(+), 951 deletions(-)

diff --git a/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap b/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
index 515d5f7c..7455448b 100644
--- a/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
+++ b/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<ProChat /> > renders actions.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -22,7 +22,7 @@ exports[`<ProChat /> > renders actions.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -46,20 +46,20 @@ exports[`<ProChat /> > renders actions.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -82,7 +82,7 @@ exports[`<ProChat /> > renders actions.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -145,10 +145,10 @@ exports[`<ProChat /> > renders actions.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1ixin3d acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-q0sdau acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <a>
                 人工服务
@@ -209,7 +209,7 @@ exports[`<ProChat /> > renders actions.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -290,7 +290,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -302,7 +302,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-0"
             >
               <div
@@ -326,7 +326,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -338,10 +338,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-0"
@@ -370,7 +370,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-1"
             >
               <div
@@ -394,20 +394,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-1"
@@ -436,7 +436,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-2"
             >
               <div
@@ -460,7 +460,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -472,10 +472,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-2"
@@ -504,7 +504,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-3"
             >
               <div
@@ -528,20 +528,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-3"
@@ -570,7 +570,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-4"
             >
               <div
@@ -594,7 +594,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -606,10 +606,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-4"
@@ -638,7 +638,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-5"
             >
               <div
@@ -662,20 +662,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-5"
@@ -704,7 +704,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-6"
             >
               <div
@@ -728,7 +728,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -740,10 +740,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-6"
@@ -772,7 +772,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-7"
             >
               <div
@@ -796,20 +796,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-7"
@@ -838,7 +838,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-8"
             >
               <div
@@ -862,7 +862,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -874,10 +874,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-8"
@@ -906,7 +906,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-9"
             >
               <div
@@ -930,20 +930,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-9"
@@ -972,7 +972,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-10"
             >
               <div
@@ -996,7 +996,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -1008,10 +1008,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-10"
@@ -1040,7 +1040,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-11"
             >
               <div
@@ -1064,20 +1064,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-11"
@@ -1106,7 +1106,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-12"
             >
               <div
@@ -1130,7 +1130,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -1142,10 +1142,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-12"
@@ -1174,7 +1174,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-13"
             >
               <div
@@ -1198,20 +1198,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-13"
@@ -1240,7 +1240,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-14"
             >
               <div
@@ -1264,7 +1264,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -1276,10 +1276,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-14"
@@ -1308,7 +1308,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-15"
             >
               <div
@@ -1332,20 +1332,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-15"
@@ -1374,7 +1374,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-16"
             >
               <div
@@ -1398,7 +1398,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -1410,10 +1410,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-16"
@@ -1442,7 +1442,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-17"
             >
               <div
@@ -1466,20 +1466,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-17"
@@ -1508,7 +1508,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-18"
             >
               <div
@@ -1532,7 +1532,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -1544,10 +1544,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-18"
@@ -1576,7 +1576,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-19"
             >
               <div
@@ -1600,20 +1600,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-19"
@@ -1680,7 +1680,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               </div>
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-21"
             >
               <div
@@ -1704,20 +1704,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-21"
@@ -1746,7 +1746,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-22"
             >
               <div
@@ -1770,7 +1770,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -1782,10 +1782,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-22"
@@ -1814,7 +1814,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-23"
             >
               <div
@@ -1838,20 +1838,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-23"
@@ -1880,7 +1880,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-24"
             >
               <div
@@ -1904,7 +1904,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -1916,10 +1916,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-24"
@@ -1948,7 +1948,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-25"
             >
               <div
@@ -1972,20 +1972,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-25"
@@ -2014,7 +2014,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-26"
             >
               <div
@@ -2038,7 +2038,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2050,10 +2050,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-26"
@@ -2082,7 +2082,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-27"
             >
               <div
@@ -2106,20 +2106,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-27"
@@ -2148,7 +2148,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-28"
             >
               <div
@@ -2172,7 +2172,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2184,10 +2184,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-28"
@@ -2216,7 +2216,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-29"
             >
               <div
@@ -2240,20 +2240,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-29"
@@ -2282,7 +2282,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-30"
             >
               <div
@@ -2306,7 +2306,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2318,10 +2318,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-30"
@@ -2350,7 +2350,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-31"
             >
               <div
@@ -2374,20 +2374,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-31"
@@ -2416,7 +2416,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-32"
             >
               <div
@@ -2440,7 +2440,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2452,10 +2452,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-32"
@@ -2484,7 +2484,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-33"
             >
               <div
@@ -2508,20 +2508,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-33"
@@ -2550,7 +2550,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-34"
             >
               <div
@@ -2574,7 +2574,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2586,10 +2586,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-34"
@@ -2618,7 +2618,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-35"
             >
               <div
@@ -2642,20 +2642,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-35"
@@ -2684,7 +2684,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-36"
             >
               <div
@@ -2708,7 +2708,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2720,10 +2720,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-36"
@@ -2752,7 +2752,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-37"
             >
               <div
@@ -2776,20 +2776,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-37"
@@ -2818,7 +2818,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-38"
             >
               <div
@@ -2842,7 +2842,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2854,10 +2854,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-38"
@@ -2886,7 +2886,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-39"
             >
               <div
@@ -2910,20 +2910,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-39"
@@ -2952,7 +2952,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-40"
             >
               <div
@@ -2976,7 +2976,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -2988,10 +2988,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-40"
@@ -3020,7 +3020,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-41"
             >
               <div
@@ -3044,20 +3044,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-41"
@@ -3086,7 +3086,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-42"
             >
               <div
@@ -3110,7 +3110,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -3122,10 +3122,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-42"
@@ -3154,7 +3154,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-43"
             >
               <div
@@ -3178,20 +3178,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-43"
@@ -3220,7 +3220,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-44"
             >
               <div
@@ -3244,7 +3244,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -3256,10 +3256,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-44"
@@ -3288,7 +3288,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-45"
             >
               <div
@@ -3312,20 +3312,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-45"
@@ -3354,7 +3354,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-46"
             >
               <div
@@ -3378,7 +3378,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -3390,10 +3390,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-46"
@@ -3422,7 +3422,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-47"
             >
               <div
@@ -3446,20 +3446,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-47"
@@ -3488,7 +3488,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-48"
             >
               <div
@@ -3512,7 +3512,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -3524,10 +3524,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-48"
@@ -3556,7 +3556,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-49"
             >
               <div
@@ -3580,20 +3580,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-49"
@@ -3622,7 +3622,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-50"
             >
               <div
@@ -3646,7 +3646,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -3658,10 +3658,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-50"
@@ -3690,7 +3690,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-51"
             >
               <div
@@ -3714,20 +3714,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-51"
@@ -3756,7 +3756,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-52"
             >
               <div
@@ -3780,7 +3780,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -3792,10 +3792,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-52"
@@ -3824,7 +3824,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-53"
             >
               <div
@@ -3848,20 +3848,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-53"
@@ -3890,7 +3890,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-54"
             >
               <div
@@ -3914,7 +3914,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -3926,10 +3926,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-54"
@@ -3958,7 +3958,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-55"
             >
               <div
@@ -3982,20 +3982,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-55"
@@ -4024,7 +4024,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-56"
             >
               <div
@@ -4048,7 +4048,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4060,10 +4060,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-56"
@@ -4092,7 +4092,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-57"
             >
               <div
@@ -4116,20 +4116,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-57"
@@ -4158,7 +4158,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-58"
             >
               <div
@@ -4182,7 +4182,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4194,10 +4194,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-58"
@@ -4226,7 +4226,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-59"
             >
               <div
@@ -4250,20 +4250,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-59"
@@ -4292,7 +4292,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-60"
             >
               <div
@@ -4316,7 +4316,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4328,10 +4328,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-60"
@@ -4360,7 +4360,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-61"
             >
               <div
@@ -4384,20 +4384,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-61"
@@ -4426,7 +4426,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-62"
             >
               <div
@@ -4450,7 +4450,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4462,10 +4462,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-62"
@@ -4494,7 +4494,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-63"
             >
               <div
@@ -4518,20 +4518,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-63"
@@ -4560,7 +4560,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-64"
             >
               <div
@@ -4584,7 +4584,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4596,10 +4596,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-64"
@@ -4628,7 +4628,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-65"
             >
               <div
@@ -4652,20 +4652,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-65"
@@ -4694,7 +4694,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-66"
             >
               <div
@@ -4718,7 +4718,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4730,10 +4730,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-66"
@@ -4762,7 +4762,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-67"
             >
               <div
@@ -4786,20 +4786,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-67"
@@ -4828,7 +4828,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-68"
             >
               <div
@@ -4852,7 +4852,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4864,10 +4864,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-68"
@@ -4896,7 +4896,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-69"
             >
               <div
@@ -4920,20 +4920,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-69"
@@ -4962,7 +4962,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-70"
             >
               <div
@@ -4986,7 +4986,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -4998,10 +4998,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-70"
@@ -5030,7 +5030,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-71"
             >
               <div
@@ -5054,20 +5054,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-71"
@@ -5096,7 +5096,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-72"
             >
               <div
@@ -5120,7 +5120,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -5132,10 +5132,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-72"
@@ -5164,7 +5164,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-73"
             >
               <div
@@ -5188,20 +5188,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-73"
@@ -5230,7 +5230,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-74"
             >
               <div
@@ -5254,7 +5254,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -5266,10 +5266,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-74"
@@ -5298,7 +5298,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-75"
             >
               <div
@@ -5322,20 +5322,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-75"
@@ -5364,7 +5364,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-76"
             >
               <div
@@ -5388,7 +5388,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -5400,10 +5400,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-76"
@@ -5432,7 +5432,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-77"
             >
               <div
@@ -5456,20 +5456,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-77"
@@ -5498,7 +5498,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-78"
             >
               <div
@@ -5522,7 +5522,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -5534,10 +5534,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-78"
@@ -5566,7 +5566,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-79"
             >
               <div
@@ -5590,20 +5590,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-79"
@@ -5632,7 +5632,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-80"
             >
               <div
@@ -5656,7 +5656,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -5668,10 +5668,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-80"
@@ -5700,7 +5700,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-81"
             >
               <div
@@ -5724,20 +5724,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-81"
@@ -5766,7 +5766,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-82"
             >
               <div
@@ -5790,7 +5790,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -5802,10 +5802,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-82"
@@ -5834,7 +5834,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-83"
             >
               <div
@@ -5858,20 +5858,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-83"
@@ -5900,7 +5900,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-84"
             >
               <div
@@ -5924,7 +5924,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -5936,10 +5936,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-84"
@@ -5968,7 +5968,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-85"
             >
               <div
@@ -5992,20 +5992,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-85"
@@ -6034,7 +6034,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-86"
             >
               <div
@@ -6058,7 +6058,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -6070,10 +6070,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-86"
@@ -6102,7 +6102,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-87"
             >
               <div
@@ -6126,20 +6126,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-87"
@@ -6168,7 +6168,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-88"
             >
               <div
@@ -6192,7 +6192,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -6204,10 +6204,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-88"
@@ -6236,7 +6236,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-89"
             >
               <div
@@ -6260,20 +6260,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-89"
@@ -6302,7 +6302,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-90"
             >
               <div
@@ -6326,7 +6326,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -6338,10 +6338,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-90"
@@ -6370,7 +6370,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-91"
             >
               <div
@@ -6394,20 +6394,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-91"
@@ -6436,7 +6436,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-92"
             >
               <div
@@ -6460,7 +6460,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -6472,10 +6472,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-92"
@@ -6504,7 +6504,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-93"
             >
               <div
@@ -6528,20 +6528,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-93"
@@ -6570,7 +6570,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-94"
             >
               <div
@@ -6594,7 +6594,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -6606,10 +6606,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-94"
@@ -6638,7 +6638,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-95"
             >
               <div
@@ -6662,20 +6662,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-95"
@@ -6704,7 +6704,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-96"
             >
               <div
@@ -6728,7 +6728,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -6740,10 +6740,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-96"
@@ -6772,7 +6772,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-97"
             >
               <div
@@ -6796,20 +6796,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-97"
@@ -6838,7 +6838,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="chat-98"
             >
               <div
@@ -6862,7 +6862,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
                   style="display: flex; align-items: center; padding: 8px 0px; gap: 8px;"
@@ -6874,10 +6874,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-98"
@@ -6906,7 +6906,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="chat-99"
             >
               <div
@@ -6930,20 +6930,20 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="chat-99"
@@ -7025,10 +7025,10 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -7086,7 +7086,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -7167,7 +7167,7 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -7179,7 +7179,7 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -7203,20 +7203,20 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -7239,7 +7239,7 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -7360,7 +7360,7 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -7384,20 +7384,20 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -7420,7 +7420,7 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -7599,10 +7599,10 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -7660,7 +7660,7 @@ exports[`<ProChat /> > renders control.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -7741,7 +7741,7 @@ exports[`<ProChat /> > renders default.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -7753,7 +7753,7 @@ exports[`<ProChat /> > renders default.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -7777,20 +7777,20 @@ exports[`<ProChat /> > renders default.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -7813,7 +7813,7 @@ exports[`<ProChat /> > renders default.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -7876,10 +7876,10 @@ exports[`<ProChat /> > renders default.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -7937,7 +7937,7 @@ exports[`<ProChat /> > renders default.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -8018,7 +8018,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -8030,7 +8030,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="ZGxiX2p4"
             >
               <div
@@ -8054,20 +8054,20 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -8090,7 +8090,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -8208,7 +8208,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
               </div>
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -8232,20 +8232,20 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -8521,32 +8521,18 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                             <div
                               class="ant-editor-snippet-highlighter zcss-1pqehup"
                             >
-                              <pre
-                                class="zcss-cc2ata"
+                              <div
+                                class="ant-editor-highlight-shiki zcss-3vgo3v"
                               >
-                                <table
-                                  border="0"
-                                  cellpadding="0"
-                                  cellspacing="0"
-                                >
-                                  <tbody>
-                                    <tr>
-                                      <td
-                                        class="ant-editor-highlight-content zcss-1aih96i"
-                                      >
-                                        $ pnpm install
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td
-                                        class="ant-editor-highlight-content zcss-1aih96i"
-                                      />
-                                    </tr>
-                                  </tbody>
-                                </table>
-                              </pre>
+                                <pre>
+                                  <code>
+                                    $ pnpm install
+
+                                  </code>
+                                </pre>
+                              </div>
                               <div
-                                class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
+                                class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
                               >
                                 <span
                                   aria-label="loading-3-quarters"
@@ -8605,7 +8591,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                             class="zcss-vfnw27 acss-tkfyu5"
                           >
                             <div
-                              class="layoutkit-flexbox css-124aswy ant-editor-markdown-header zcss-j9ax4g"
+                              class="layoutkit-flexbox css-1u84j5a ant-editor-markdown-header zcss-j9ax4g"
                             >
                               <button
                                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
@@ -8739,97 +8725,20 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                                 class="ant-editor-highlight-container zcss-ym4i93"
                                 tabindex="-1"
                               >
-                                <pre
-                                  class="zcss-cc2ata"
+                                <div
+                                  class="ant-editor-highlight-shiki zcss-3vgo3v"
                                 >
-                                  <table
-                                    border="0"
-                                    cellpadding="0"
-                                    cellspacing="0"
-                                  >
-                                    <tbody>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        >
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            import
-                                          </span>
-                                           { renderHook } 
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            from
-                                          </span>
-                                           
-                                          <span
-                                            class="hljs-string"
-                                          >
-                                            '@testing-library/react-hooks'
-                                          </span>
-                                          ;
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        >
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            import
-                                          </span>
-                                           { act } 
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            from
-                                          </span>
-                                           
-                                          <span
-                                            class="hljs-string"
-                                          >
-                                            'react-dom/test-utils'
-                                          </span>
-                                          ;
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        >
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            import
-                                          </span>
-                                           { useDropNodeOnCanvas } 
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            from
-                                          </span>
-                                           
-                                          <span
-                                            class="hljs-string"
-                                          >
-                                            './useDropNodeOnCanvas'
-                                          </span>
-                                          ;
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        />
-                                      </tr>
-                                    </tbody>
-                                  </table>
-                                </pre>
+                                  <pre>
+                                    <code>
+                                      import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-dom/test-utils';
+import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
+
+                                    </code>
+                                  </pre>
+                                </div>
                                 <div
-                                  class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
+                                  class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
                                 >
                                   <span
                                     aria-label="loading-3-quarters"
@@ -10398,7 +10307,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -10574,10 +10483,10 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -10635,7 +10544,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -10716,7 +10625,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 500px;"
       >
         <div
@@ -10728,7 +10637,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -10752,20 +10661,20 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -10788,7 +10697,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -10851,10 +10760,10 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -10912,7 +10821,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -10988,7 +10897,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 500px;"
       >
         <div
@@ -11000,7 +10909,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -11024,20 +10933,20 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -11060,7 +10969,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11123,10 +11032,10 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -11184,7 +11093,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -11265,7 +11174,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -11277,7 +11186,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -11301,20 +11210,20 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div>
                       这是一条自定义 ReactNode 消息
@@ -11324,7 +11233,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11387,10 +11296,10 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -11448,7 +11357,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -11520,7 +11429,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -11532,7 +11441,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -11556,20 +11465,20 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -11599,7 +11508,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11662,10 +11571,10 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -11723,7 +11632,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -11841,7 +11750,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -11853,7 +11762,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -11877,20 +11786,20 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -11913,7 +11822,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11976,10 +11885,10 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -12037,7 +11946,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -12118,7 +12027,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -12130,7 +12039,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -12154,20 +12063,20 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -12190,7 +12099,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -12311,7 +12220,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -12335,20 +12244,20 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -12371,7 +12280,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -12550,10 +12459,10 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -12611,7 +12520,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -12685,11 +12594,11 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
 exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
 <DocumentFragment>
   <div
-    class="layoutkit-flexbox css-1euyney"
+    class="layoutkit-flexbox css-o3n4io"
     style="background: rgb(245, 245, 245);"
   >
     <div
-      class="layoutkit-flexbox css-vreggg"
+      class="layoutkit-flexbox css-5mv6hp"
     >
       <button
         class="ant-btn ant-btn-primary"
@@ -12717,7 +12626,7 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -12725,7 +12634,7 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
           style="height: 100%;"
         >
           <div
-            class="layoutkit-flexbox css-rzsnff"
+            class="layoutkit-flexbox css-7c9263"
             style="margin-top: 24px;"
           >
             <div
@@ -12834,10 +12743,10 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -12895,7 +12804,7 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -12976,7 +12885,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -12988,7 +12897,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -13005,10 +12914,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1df1rs8 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1df1rs8 ant-pro-chat-list-item-title"
                 >
                   Ant Design
                   <time>
@@ -13016,10 +12925,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -13042,7 +12951,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -13163,7 +13072,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -13187,10 +13096,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-188cr2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-188cr2a ant-pro-chat-list-item-title"
                 >
                   三体世界
                   <time>
@@ -13198,10 +13107,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -13224,7 +13133,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -13403,10 +13312,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -13464,7 +13373,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -13542,7 +13451,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
     style="height: 100%; width: 100%; position: relative;"
   >
     <div
-      class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+      class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
       style="max-height: 100vh; height: 100%;"
     >
       <div
@@ -13554,7 +13463,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
           style="margin-top: 24px;"
         >
           <div
-            class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+            class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
             data-id="default"
           >
             <div
@@ -13578,20 +13487,20 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
             >
               <div
-                class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
               >
                 <time>
                   2024-02-27 17:20:00
                 </time>
               </div>
               <div
-                class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
               >
                 <div
-                  class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                  class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                 >
                   <div
                     id="default"
@@ -13614,7 +13523,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
                   />
                 </div>
                 <div
-                  class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                  class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                   role="menubar"
                 />
               </div>
@@ -13677,10 +13586,10 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
       </button>
       <div>
         <div
-          class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+          class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
         >
           <div
-            class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+            class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
           >
             <button
               class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -13738,7 +13647,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
             </button>
           </div>
           <div
-            class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+            class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
           >
             <div
               class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -13818,7 +13727,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100vh;"
       >
         <div
@@ -13830,7 +13739,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -13854,20 +13763,20 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -13890,7 +13799,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -13953,10 +13862,10 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -14014,7 +13923,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -14095,7 +14004,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -14107,7 +14016,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -14131,20 +14040,20 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -14167,7 +14076,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -14230,10 +14139,10 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -14291,7 +14200,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -14372,7 +14281,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -14384,7 +14293,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -14408,20 +14317,20 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -14444,7 +14353,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -14507,10 +14416,10 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -14568,7 +14477,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -14649,7 +14558,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 800px;"
       >
         <div
@@ -14661,7 +14570,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -14685,20 +14594,20 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -14721,7 +14630,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -14784,10 +14693,10 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -14845,7 +14754,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -14926,7 +14835,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -14938,7 +14847,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="ZGxiX2p4"
             >
               <div
@@ -14962,20 +14871,20 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -14998,7 +14907,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -15116,7 +15025,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
               </div>
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -15140,20 +15049,20 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -15429,32 +15338,18 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                             <div
                               class="ant-editor-snippet-highlighter zcss-1pqehup"
                             >
-                              <pre
-                                class="zcss-cc2ata"
+                              <div
+                                class="ant-editor-highlight-shiki zcss-3vgo3v"
                               >
-                                <table
-                                  border="0"
-                                  cellpadding="0"
-                                  cellspacing="0"
-                                >
-                                  <tbody>
-                                    <tr>
-                                      <td
-                                        class="ant-editor-highlight-content zcss-1aih96i"
-                                      >
-                                        $ pnpm install
-                                      </td>
-                                    </tr>
-                                    <tr>
-                                      <td
-                                        class="ant-editor-highlight-content zcss-1aih96i"
-                                      />
-                                    </tr>
-                                  </tbody>
-                                </table>
-                              </pre>
+                                <pre>
+                                  <code>
+                                    $ pnpm install
+
+                                  </code>
+                                </pre>
+                              </div>
                               <div
-                                class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
+                                class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
                               >
                                 <span
                                   aria-label="loading-3-quarters"
@@ -15513,7 +15408,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                             class="zcss-vfnw27 acss-tkfyu5"
                           >
                             <div
-                              class="layoutkit-flexbox css-124aswy ant-editor-markdown-header zcss-j9ax4g"
+                              class="layoutkit-flexbox css-1u84j5a ant-editor-markdown-header zcss-j9ax4g"
                             >
                               <button
                                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
@@ -15647,97 +15542,20 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                                 class="ant-editor-highlight-container zcss-ym4i93"
                                 tabindex="-1"
                               >
-                                <pre
-                                  class="zcss-cc2ata"
+                                <div
+                                  class="ant-editor-highlight-shiki zcss-3vgo3v"
                                 >
-                                  <table
-                                    border="0"
-                                    cellpadding="0"
-                                    cellspacing="0"
-                                  >
-                                    <tbody>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        >
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            import
-                                          </span>
-                                           { renderHook } 
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            from
-                                          </span>
-                                           
-                                          <span
-                                            class="hljs-string"
-                                          >
-                                            '@testing-library/react-hooks'
-                                          </span>
-                                          ;
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        >
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            import
-                                          </span>
-                                           { act } 
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            from
-                                          </span>
-                                           
-                                          <span
-                                            class="hljs-string"
-                                          >
-                                            'react-dom/test-utils'
-                                          </span>
-                                          ;
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        >
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            import
-                                          </span>
-                                           { useDropNodeOnCanvas } 
-                                          <span
-                                            class="hljs-keyword"
-                                          >
-                                            from
-                                          </span>
-                                           
-                                          <span
-                                            class="hljs-string"
-                                          >
-                                            './useDropNodeOnCanvas'
-                                          </span>
-                                          ;
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td
-                                          class="ant-editor-highlight-content zcss-1aih96i"
-                                        />
-                                      </tr>
-                                    </tbody>
-                                  </table>
-                                </pre>
+                                  <pre>
+                                    <code>
+                                      import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-dom/test-utils';
+import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
+
+                                    </code>
+                                  </pre>
+                                </div>
                                 <div
-                                  class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
+                                  class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
                                 >
                                   <span
                                     aria-label="loading-3-quarters"
@@ -17306,7 +17124,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -17444,10 +17262,10 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -17505,7 +17323,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -17651,7 +17469,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -17663,7 +17481,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -17687,20 +17505,20 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -17723,7 +17541,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -17844,7 +17662,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -17868,20 +17686,20 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -17904,7 +17722,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -18083,10 +17901,10 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -18144,7 +17962,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
@@ -18233,7 +18051,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-oefsti ant-pro-chat-container"
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -18245,7 +18063,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -18269,20 +18087,20 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -18305,7 +18123,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -18426,7 +18244,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -18450,20 +18268,20 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -18486,7 +18304,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -18665,10 +18483,10 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
               <button
                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
@@ -18726,7 +18544,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
             >
               <div
                 class="ant-select ant-select-outlined ant-select-auto-complete acss-6ckfqf ant-pro-chat-input-area-component ant-select-single ant-select-customize-input ant-select-show-search"
diff --git a/src/ProChat/container/OverrideStyle/global.ts b/src/ProChat/container/OverrideStyle/global.ts
index d4aeb30c..aa190c50 100644
--- a/src/ProChat/container/OverrideStyle/global.ts
+++ b/src/ProChat/container/OverrideStyle/global.ts
@@ -34,38 +34,4 @@ export default (token: FullToken) => css`
     box-sizing: border-box;
     vertical-align: baseline;
   }
-
-  @media only screen and (min-width: 574px) {
-    * {
-      ::-webkit-scrollbar {
-        cursor: pointer;
-        width: 4px;
-        height: 4px;
-        background-color: transparent;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        cursor: pointer;
-        background-color: transparent;
-        border-radius: 2px;
-        transition: background-color 500ms ${token.motionEaseOut};
-
-        &:hover {
-          background-color: ${token.colorText};
-        }
-      }
-
-      ::-webkit-scrollbar-corner {
-        display: none;
-        width: 0;
-        height: 0;
-      }
-
-      &:hover {
-        ::-webkit-scrollbar-thumb {
-          background-color: ${token.colorFill};
-        }
-      }
-    }
-  }
 `;