diff --git a/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap b/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
index 7455448..9cc6c20 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-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo 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-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-q0sdau acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1ixin3d 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-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo 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-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney 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-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu 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-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo 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-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney 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-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo 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-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney 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-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney 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-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo 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-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il 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-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -8521,18 +8521,32 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                             <div
                               class="ant-editor-snippet-highlighter zcss-1pqehup"
                             >
-                              <div
-                                class="ant-editor-highlight-shiki zcss-3vgo3v"
+                              <pre
+                                class="zcss-cc2ata"
                               >
-                                <pre>
-                                  <code>
-                                    $ pnpm install
-
-                                  </code>
-                                </pre>
-                              </div>
+                                <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>
                               <div
-                                class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
+                                class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
                               >
                                 <span
                                   aria-label="loading-3-quarters"
@@ -8591,7 +8605,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                             class="zcss-vfnw27 acss-tkfyu5"
                           >
                             <div
-                              class="layoutkit-flexbox css-1u84j5a ant-editor-markdown-header zcss-j9ax4g"
+                              class="layoutkit-flexbox css-124aswy ant-editor-markdown-header zcss-j9ax4g"
                             >
                               <button
                                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
@@ -8725,20 +8739,97 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                                 class="ant-editor-highlight-container zcss-ym4i93"
                                 tabindex="-1"
                               >
-                                <div
-                                  class="ant-editor-highlight-shiki zcss-3vgo3v"
+                                <pre
+                                  class="zcss-cc2ata"
                                 >
-                                  <pre>
-                                    <code>
-                                      import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-dom/test-utils';
-import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
-
-                                    </code>
-                                  </pre>
-                                </div>
+                                  <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>
                                 <div
-                                  class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
+                                  class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
                                 >
                                   <span
                                     aria-label="loading-3-quarters"
@@ -10307,7 +10398,7 @@ import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -10483,10 +10574,10 @@ import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -10544,7 +10635,7 @@ import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -10625,7 +10716,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 500px;"
       >
         <div
@@ -10637,7 +10728,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -10661,20 +10752,20 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -10697,7 +10788,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -10760,10 +10851,10 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -10821,7 +10912,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -10897,7 +10988,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 500px;"
       >
         <div
@@ -10909,7 +11000,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -10933,20 +11024,20 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -10969,7 +11060,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11032,10 +11123,10 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -11093,7 +11184,7 @@ exports[`<ProChat /> > renders error.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -11174,7 +11265,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -11186,7 +11277,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -11210,20 +11301,20 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div>
                       这是一条自定义 ReactNode 消息
@@ -11233,7 +11324,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11296,10 +11387,10 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -11357,7 +11448,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -11429,7 +11520,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -11441,7 +11532,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -11465,20 +11556,20 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -11508,7 +11599,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11571,10 +11662,10 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -11632,7 +11723,7 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -11743,6 +11834,20 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
             zh-CN
           </div>
         </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="zh-HK"
+          >
+            zh-HK
+          </div>
+        </label>
       </div>
     </div>
     <div
@@ -11750,7 +11855,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -11762,7 +11867,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -11786,20 +11891,20 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -11822,7 +11927,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -11885,10 +11990,10 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -11946,7 +12051,7 @@ exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -12027,7 +12132,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -12039,7 +12144,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -12063,20 +12168,20 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -12099,7 +12204,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -12220,7 +12325,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -12244,20 +12349,20 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -12280,7 +12385,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -12459,10 +12564,10 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -12520,7 +12625,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -12594,11 +12699,11 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
 exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
 <DocumentFragment>
   <div
-    class="layoutkit-flexbox css-o3n4io"
+    class="layoutkit-flexbox css-1euyney"
     style="background: rgb(245, 245, 245);"
   >
     <div
-      class="layoutkit-flexbox css-5mv6hp"
+      class="layoutkit-flexbox css-vreggg"
     >
       <button
         class="ant-btn ant-btn-primary"
@@ -12626,7 +12731,7 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -12634,7 +12739,7 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
           style="height: 100%;"
         >
           <div
-            class="layoutkit-flexbox css-7c9263"
+            class="layoutkit-flexbox css-rzsnff"
             style="margin-top: 24px;"
           >
             <div
@@ -12743,10 +12848,10 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -12804,7 +12909,7 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -12885,7 +12990,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -12897,7 +13002,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -12914,10 +13019,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1df1rs8 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1df1rs8 ant-pro-chat-list-item-title"
                 >
                   Ant Design
                   <time>
@@ -12925,10 +13030,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -12951,7 +13056,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -13072,7 +13177,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -13096,10 +13201,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-188cr2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-188cr2a ant-pro-chat-list-item-title"
                 >
                   三体世界
                   <time>
@@ -13107,10 +13212,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -13133,7 +13238,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -13312,10 +13417,10 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -13373,7 +13478,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -13451,7 +13556,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
     style="height: 100%; width: 100%; position: relative;"
   >
     <div
-      class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+      class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
       style="max-height: 100vh; height: 100%;"
     >
       <div
@@ -13463,7 +13568,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
           style="margin-top: 24px;"
         >
           <div
-            class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+            class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
             data-id="default"
           >
             <div
@@ -13487,20 +13592,20 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
               </span>
             </div>
             <div
-              class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
             >
               <div
-                class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
               >
                 <time>
                   2024-02-27 17:20:00
                 </time>
               </div>
               <div
-                class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
               >
                 <div
-                  class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                  class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                 >
                   <div
                     id="default"
@@ -13523,7 +13628,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
                   />
                 </div>
                 <div
-                  class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                  class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                   role="menubar"
                 />
               </div>
@@ -13586,10 +13691,10 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
       </button>
       <div>
         <div
-          class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+          class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
         >
           <div
-            class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+            class="layoutkit-flexbox css-1gzsvii 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"
@@ -13647,7 +13752,7 @@ exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
             </button>
           </div>
           <div
-            class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+            class="layoutkit-flexbox css-bx6voh 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"
@@ -13727,7 +13832,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100vh;"
       >
         <div
@@ -13739,7 +13844,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -13763,20 +13868,20 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -13799,7 +13904,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -13862,10 +13967,10 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -13923,7 +14028,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -14004,7 +14109,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -14016,7 +14121,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -14040,20 +14145,20 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -14076,7 +14181,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -14139,10 +14244,10 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -14200,7 +14305,7 @@ exports[`<ProChat /> > renders request.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -14281,7 +14386,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -14293,7 +14398,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -14317,20 +14422,20 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -14353,7 +14458,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -14416,10 +14521,10 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -14477,7 +14582,7 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -14558,7 +14663,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 800px;"
       >
         <div
@@ -14570,7 +14675,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="default"
             >
               <div
@@ -14594,20 +14699,20 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="default"
@@ -14630,7 +14735,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   />
                 </div>
@@ -14693,10 +14798,10 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -14754,7 +14859,7 @@ exports[`<ProChat /> > renders sse-trans.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -14835,7 +14940,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -14847,7 +14952,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="ZGxiX2p4"
             >
               <div
@@ -14871,20 +14976,20 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -14907,7 +15012,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -15025,7 +15130,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
               </div>
             </div>
             <div
-              class="layoutkit-flexbox css-vwb4od acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -15049,20 +15154,20 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-xaaduu acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -15338,18 +15443,32 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                             <div
                               class="ant-editor-snippet-highlighter zcss-1pqehup"
                             >
-                              <div
-                                class="ant-editor-highlight-shiki zcss-3vgo3v"
+                              <pre
+                                class="zcss-cc2ata"
                               >
-                                <pre>
-                                  <code>
-                                    $ pnpm install
-
-                                  </code>
-                                </pre>
-                              </div>
+                                <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>
                               <div
-                                class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
+                                class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
                               >
                                 <span
                                   aria-label="loading-3-quarters"
@@ -15408,7 +15527,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                             class="zcss-vfnw27 acss-tkfyu5"
                           >
                             <div
-                              class="layoutkit-flexbox css-1u84j5a ant-editor-markdown-header zcss-j9ax4g"
+                              class="layoutkit-flexbox css-124aswy ant-editor-markdown-header zcss-j9ax4g"
                             >
                               <button
                                 class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
@@ -15542,20 +15661,97 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                                 class="ant-editor-highlight-container zcss-ym4i93"
                                 tabindex="-1"
                               >
-                                <div
-                                  class="ant-editor-highlight-shiki zcss-3vgo3v"
+                                <pre
+                                  class="zcss-cc2ata"
                                 >
-                                  <pre>
-                                    <code>
-                                      import { renderHook } from '@testing-library/react-hooks';
-import { act } from 'react-dom/test-utils';
-import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
-
-                                    </code>
-                                  </pre>
-                                </div>
+                                  <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>
                                 <div
-                                  class="layoutkit-center css-lzsi9u zcss-1tyo0s1"
+                                  class="layoutkit-center css-pz2xlh zcss-1tyo0s1"
                                 >
                                   <span
                                     aria-label="loading-3-quarters"
@@ -17124,7 +17320,7 @@ import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -17262,10 +17458,10 @@ import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -17323,7 +17519,7 @@ import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -17469,7 +17665,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -17481,7 +17677,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -17505,20 +17701,20 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -17541,7 +17737,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -17662,7 +17858,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -17686,20 +17882,20 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -17722,7 +17918,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -17901,10 +18097,10 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -17962,7 +18158,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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"
@@ -18051,7 +18247,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
       style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-5rxe8i ant-pro-chat-container"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-5rxe8i ant-pro-chat-container"
         style="max-height: 100vh; height: 100%;"
       >
         <div
@@ -18063,7 +18259,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1xn0kxa acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
               data-id="ZGxiX2p4"
             >
               <div
@@ -18087,20 +18283,20 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-ojglte acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-12x47oo acss-1q9sa2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-4preuj acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="ZGxiX2p4"
@@ -18123,7 +18319,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -18244,7 +18440,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
               />
             </div>
             <div
-              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
               data-id="Sb5pAzLL"
             >
               <div
@@ -18268,20 +18464,20 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
                   <time>
                     2024-02-27 17:20:00
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
                       id="Sb5pAzLL"
@@ -18304,7 +18500,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -18483,10 +18679,10 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
         </button>
         <div>
           <div
-            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
             <div
-              class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              class="layoutkit-flexbox css-1gzsvii 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"
@@ -18544,7 +18740,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
               </button>
             </div>
             <div
-              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+              class="layoutkit-flexbox css-bx6voh 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/components/InputArea/ActionBar.tsx b/src/ProChat/components/InputArea/ActionBar.tsx
index 2461163..12b1fff 100644
--- a/src/ProChat/components/InputArea/ActionBar.tsx
+++ b/src/ProChat/components/InputArea/ActionBar.tsx
@@ -29,6 +29,7 @@ export const ActionBar = ({ className }: { className?: string }) => {
       title={localeObject.clearModalTitle}
       okButtonProps={{ danger: true }}
       okText={localeObject.clearDialogue}
+      cancelText={localeObject.cancel}
       key={'clear'}
       onConfirm={() => {
         clearMessage();
diff --git a/src/ProChat/demos/i18n.tsx b/src/ProChat/demos/i18n.tsx
index 897de00..c4c9105 100644
--- a/src/ProChat/demos/i18n.tsx
+++ b/src/ProChat/demos/i18n.tsx
@@ -9,7 +9,7 @@ export default () => {
   return (
     <div style={{ background: theme.colorBgLayout }}>
       <Segmented<Locale>
-        options={['en-US', 'zh-CN']}
+        options={['en-US', 'zh-CN', 'zh-HK']}
         defaultValue="en-US"
         onChange={(v) => {
           setLanguage(v);
diff --git a/src/locale/index.ts b/src/locale/index.ts
index 30a5c9f..44419b1 100644
--- a/src/locale/index.ts
+++ b/src/locale/index.ts
@@ -1,14 +1,16 @@
 import { LocaleProps } from '@/types/locale';
 import enUSLocal from './en-US';
 import zhCNLocal from './zh-CN';
-export type Locale = 'zh-CN' | 'en-US';
+import zhHKLocal from './zh-HK';
+export type Locale = 'zh-CN' | 'en-US' | 'zh-HK';
 
 const locales = {
   'en-US': enUSLocal,
   'zh-CN': zhCNLocal,
+  'zh-HK': zhHKLocal,
   en: enUSLocal,
 };
 
-export const gLocaleObject = (glocale: Locale): LocaleProps => {
-  return locales[glocale as 'zh-CN'] || locales['zh-CN'];
+export const gLocaleObject = (gLocale: Locale): LocaleProps => {
+  return locales[gLocale as 'zh-CN'] || locales['zh-CN'];
 };
diff --git a/src/locale/zh-HK.ts b/src/locale/zh-HK.ts
new file mode 100644
index 0000000..e3ba0d1
--- /dev/null
+++ b/src/locale/zh-HK.ts
@@ -0,0 +1,16 @@
+export default {
+  placeholder: '請輸入訊息...',
+  backToBottom: '回到底部',
+  clearCurrentDialogue: '清除當前對話',
+  clearDialogue: '清除對話',
+  clearModalTitle: '您即將清除會話，清除後將無法恢復。您確定要清除當前會話嗎？',
+  defaultHelloMessage: '讓我們開始聊天吧',
+  cancel: '取消',
+  confirm: '確認',
+  copy: '複製',
+  copySuccess: '複製成功',
+  delete: '刪除',
+  edit: '編輯',
+  history: '歷史',
+  regenerate: '重新生成',
+};