diff --git a/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap b/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
index 2edcb32e..ea667427 100644
--- a/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
+++ b/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
@@ -427,12 +427,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -566,12 +561,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -705,12 +695,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -844,12 +829,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -983,12 +963,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -1122,12 +1097,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -1261,12 +1231,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -1400,12 +1365,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -1539,12 +1499,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -1678,12 +1633,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -1787,12 +1737,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -1926,12 +1871,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -2065,12 +2005,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -2204,12 +2139,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -2343,12 +2273,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -2482,12 +2407,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -2621,12 +2541,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -2760,12 +2675,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -2899,12 +2809,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -3038,12 +2943,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -3177,12 +3077,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -3316,12 +3211,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -3455,12 +3345,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -3594,12 +3479,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -3733,12 +3613,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -3872,12 +3747,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4011,12 +3881,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4150,12 +4015,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4289,12 +4149,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4428,12 +4283,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4567,12 +4417,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4706,12 +4551,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4845,12 +4685,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -4984,12 +4819,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -5123,12 +4953,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -5262,12 +5087,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -5401,12 +5221,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -5540,12 +5355,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -5679,12 +5489,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -5818,12 +5623,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -5957,12 +5757,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -6096,12 +5891,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -6235,12 +6025,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -6374,12 +6159,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -6513,12 +6293,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -6652,12 +6427,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -6791,12 +6561,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -6930,12 +6695,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -7069,12 +6829,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -7208,12 +6963,7 @@ exports[`<ProChat /> > renders bigData.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                 </div>
               </div>
@@ -8040,12 +7790,7 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                   <div
                     class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
@@ -11526,11 +11271,48 @@ exports[`<ProChat /> > renders helloMessage.tsx correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
+exports[`<ProChat /> > renders i18n.tsx correctly 1`] = `
 <DocumentFragment>
   <div
     style="background: rgb(245, 245, 245);"
   >
+    <div
+      class="ant-segmented"
+    >
+      <div
+        class="ant-segmented-group"
+      >
+        <label
+          class="ant-segmented-item ant-segmented-item-selected"
+        >
+          <input
+            checked=""
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="en-US"
+          >
+            en-US
+          </div>
+        </label>
+        <label
+          class="ant-segmented-item"
+        >
+          <input
+            class="ant-segmented-item-input"
+            type="radio"
+          />
+          <div
+            class="ant-segmented-item-label"
+            title="zh-CN"
+          >
+            zh-CN
+          </div>
+        </label>
+      </div>
+    </div>
     <div
       class="ant-app"
       style="height: 100%; width: 100%; position: relative;"
@@ -11548,8 +11330,8 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
-              data-id="ZGxiX2p4"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              data-id="default"
             >
               <div
                 class="acss-16a4jh6"
@@ -11566,29 +11348,29 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                       class="acss-1vwqsas"
                       style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
                     >
-                      😀
+                      🤖
                     </div>
                   </span>
                 </span>
               </div>
               <div
-                class="layoutkit-flexbox css-uhomow 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-1uxoxb1 acss-1q9sa2a 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-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
                     class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
-                      id="ZGxiX2p4"
+                      id="default"
                     >
                       <article
                         class="ant-typography"
@@ -11598,400 +11380,98 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                           class="zcss-1hxup8p"
                         >
                           <p>
-                            昨天的当天是明天的什么？
+                            Let us start chatting
                           </p>
                         </div>
                       </article>
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
-                  >
-                    <div
-                      class="ant-editor-action-group-content zcss-t61miv"
-                    >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <div
-                            class="acss-1o4i853"
-                            style="border-radius: 5px; height: 24px; width: 24px;"
-                          >
-                            <span
-                              class="anticon"
-                              role="img"
-                            >
-                              <svg
-                                class="lucide lucide-rotate-cw"
-                                fill="transparent"
-                                focusable="false"
-                                height="14"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                                width="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
-                                />
-                                <path
-                                  d="M21 3v5h-5"
-                                />
-                              </svg>
-                            </span>
-                          </div>
-                        </span>
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <div
-                            class="acss-1o4i853"
-                            style="border-radius: 5px; height: 24px; width: 24px;"
-                          >
-                            <span
-                              class="anticon"
-                              role="img"
-                            >
-                              <svg
-                                class="lucide lucide-pen-square"
-                                fill="transparent"
-                                focusable="false"
-                                height="14"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                                width="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
-                                />
-                                <path
-                                  d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"
-                                />
-                              </svg>
-                            </span>
-                          </div>
-                        </span>
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <span
-                            aria-label="dash"
-                            class="anticon anticon-dash"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="dash"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
+                  />
                 </div>
               </div>
               <div
                 style="flex: 0 0 auto; width: 32px;"
               />
             </div>
+          </div>
+          <div
+            style="height: 1px; width: 100%;"
+          />
+        </div>
+        <button
+          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+          style="bottom: 138px; position: absolute; right: 16px;"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              class="anticon"
+              role="img"
+            >
+              <svg
+                class="lucide lucide-list-end"
+                fill="transparent"
+                focusable="false"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 12H3"
+                />
+                <path
+                  d="M16 6H3"
+                />
+                <path
+                  d="M10 18H3"
+                />
+                <path
+                  d="M21 6v10a2 2 0 0 1-2 2h-5"
+                />
+                <path
+                  d="m16 16-2 2 2 2"
+                />
+              </svg>
+            </span>
+          </span>
+          <span>
+            Back to bottom
+          </span>
+        </button>
+        <div>
+          <div
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+          >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
-              data-id="Sb5pAzLL"
+              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
-              <div
-                class="acss-16a4jh6"
+              <button
+                class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+                type="button"
               >
                 <span
-                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
-                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
-                >
-                  <span
-                    class="ant-avatar-string"
-                    style="transform: scale(1);"
-                  >
-                    <div
-                      class="acss-1vwqsas"
-                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
-                    >
-                      🤖
-                    </div>
-                  </span>
-                </span>
-              </div>
-              <div
-                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
-              >
-                <div
-                  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-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="ant-btn-icon"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    class="acss-1o4i853"
+                    style="border-radius: 5px; height: 36px; width: 36px;"
                   >
-                    <div
-                      id="Sb5pAzLL"
-                    >
-                      <article
-                        class="ant-typography"
-                        style="overflow-x: hidden; overflow-y: auto;"
-                      >
-                        <div
-                          class="zcss-1hxup8p"
-                        >
-                          <p>
-                            昨天的当天是明天的昨天。
-                          </p>
-                        </div>
-                      </article>
-                    </div>
-                    <div
-                      class="acss-0 ant-pro-chat-message-extra"
-                    />
-                  </div>
-                  <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
-                    role="menubar"
-                  >
-                    <div
-                      class="ant-editor-action-group-content zcss-t61miv"
-                    >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <div
-                            class="acss-1o4i853"
-                            style="border-radius: 5px; height: 24px; width: 24px;"
-                          >
-                            <span
-                              class="anticon"
-                              role="img"
-                            >
-                              <svg
-                                class="lucide lucide-rotate-cw"
-                                fill="transparent"
-                                focusable="false"
-                                height="14"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                                width="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
-                                />
-                                <path
-                                  d="M21 3v5h-5"
-                                />
-                              </svg>
-                            </span>
-                          </div>
-                        </span>
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <div
-                            class="acss-1o4i853"
-                            style="border-radius: 5px; height: 24px; width: 24px;"
-                          >
-                            <span
-                              class="anticon"
-                              role="img"
-                            >
-                              <svg
-                                class="lucide lucide-copy"
-                                fill="transparent"
-                                focusable="false"
-                                height="14"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                                width="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <rect
-                                  height="14"
-                                  rx="2"
-                                  ry="2"
-                                  width="14"
-                                  x="8"
-                                  y="8"
-                                />
-                                <path
-                                  d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-                                />
-                              </svg>
-                            </span>
-                          </div>
-                        </span>
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <span
-                            aria-label="dash"
-                            class="anticon anticon-dash"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="dash"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                style="flex: 0 0 auto; width: 32px;"
-              />
-            </div>
-          </div>
-          <div
-            style="height: 1px; width: 100%;"
-          />
-        </div>
-        <button
-          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
-          style="bottom: 138px; position: absolute; right: 16px;"
-          type="button"
-        >
-          <span
-            class="ant-btn-icon"
-          >
-            <span
-              class="anticon"
-              role="img"
-            >
-              <svg
-                class="lucide lucide-list-end"
-                fill="transparent"
-                focusable="false"
-                height="1em"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M16 12H3"
-                />
-                <path
-                  d="M16 6H3"
-                />
-                <path
-                  d="M10 18H3"
-                />
-                <path
-                  d="M21 6v10a2 2 0 0 1-2 2h-5"
-                />
-                <path
-                  d="m16 16-2 2 2 2"
-                />
-              </svg>
-            </span>
-          </span>
-          <span>
-            返回底部
-          </span>
-        </button>
-        <div>
-          <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
-          >
-            <div
-              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"
-                type="button"
-              >
-                <span
-                  class="ant-btn-icon"
-                >
-                  <div
-                    class="acss-1o4i853"
-                    style="border-radius: 5px; height: 36px; width: 36px;"
-                  >
-                    <span
-                      class="anticon"
-                      role="img"
+                    <span
+                      class="anticon"
+                      role="img"
                     >
                       <svg
                         class="lucide lucide-trash2"
@@ -12054,7 +11534,7 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
                       autocomplete="off"
                       class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
                       id="rc_select_TEST_OR_SSR"
-                      placeholder="请输入消息..."
+                      placeholder="Please enter a message..."
                       role="combobox"
                       style="resize: none; height: -152px; max-height: -152px;"
                       type="search"
@@ -12105,36 +11585,11 @@ exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
+exports[`<ProChat /> > renders initialChats.tsx correctly 1`] = `
 <DocumentFragment>
   <div
-    class="layoutkit-flexbox css-1euyney"
     style="background: rgb(245, 245, 245);"
   >
-    <div
-      class="layoutkit-flexbox css-vreggg"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          加载完成
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-          开始加载
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-divider ant-divider-horizontal"
-      role="separator"
-    />
     <div
       class="ant-app"
       style="height: 100%; width: 100%; position: relative;"
@@ -12148,333 +11603,75 @@ exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
           style="height: 100%;"
         >
           <div
-            class="layoutkit-flexbox css-rzsnff"
+            class="acss-pmp369 ant-pro-chat-list"
             style="margin-top: 24px;"
           >
             <div
-              class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active acss-1cyx9n7"
+              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              data-id="ZGxiX2p4"
             >
               <div
-                class="ant-skeleton-header"
+                class="acss-16a4jh6"
               >
                 <span
-                  class="ant-skeleton-avatar ant-skeleton-avatar-circle"
-                  style="width: 40px; height: 40px; line-height: 40px;"
-                />
-              </div>
-              <div
-                class="ant-skeleton-content"
-              >
-                <ul
-                  class="ant-skeleton-paragraph"
+                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
                 >
-                  <li
-                    style="width: 50%;"
-                  />
-                  <li
-                    style="width: 30%;"
-                  />
-                </ul>
-              </div>
-            </div>
-            <div
-              class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
-            >
-              <div
-                class="ant-skeleton-header"
-              >
-                <span
-                  class="ant-skeleton-avatar ant-skeleton-avatar-circle"
-                  style="width: 40px; height: 40px; line-height: 40px;"
-                />
+                  <span
+                    class="ant-avatar-string"
+                    style="transform: scale(1);"
+                  >
+                    <div
+                      class="acss-1vwqsas"
+                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
+                    >
+                      😀
+                    </div>
+                  </span>
+                </span>
               </div>
               <div
-                class="ant-skeleton-content"
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
-                <ul
-                  class="ant-skeleton-paragraph"
+                <div
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1q9sa2a ant-pro-chat-list-item-title"
                 >
-                  <li
-                    style="width: 50%;"
-                  />
-                  <li
-                    style="width: 30%;"
-                  />
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div
-            style="height: 1px; width: 100%;"
-          />
-        </div>
-        <button
-          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
-          style="bottom: 138px; position: absolute; right: 16px;"
-          type="button"
-        >
-          <span
-            class="ant-btn-icon"
-          >
-            <span
-              class="anticon"
-              role="img"
-            >
-              <svg
-                class="lucide lucide-list-end"
-                fill="transparent"
-                focusable="false"
-                height="1em"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M16 12H3"
-                />
-                <path
-                  d="M16 6H3"
-                />
-                <path
-                  d="M10 18H3"
-                />
-                <path
-                  d="M21 6v10a2 2 0 0 1-2 2h-5"
-                />
-                <path
-                  d="m16 16-2 2 2 2"
-                />
-              </svg>
-            </span>
-          </span>
-          <span>
-            返回底部
-          </span>
-        </button>
-        <div>
-          <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
-          >
-            <div
-              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"
-                type="button"
-              >
-                <span
-                  class="ant-btn-icon"
+                  <time>
+                    2024-02-27 17:20:00
+                  </time>
+                </div>
+                <div
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="acss-1o4i853"
-                    style="border-radius: 5px; height: 36px; width: 36px;"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
-                    <span
-                      class="anticon"
-                      role="img"
+                    <div
+                      id="ZGxiX2p4"
                     >
-                      <svg
-                        class="lucide lucide-trash2"
-                        fill="transparent"
-                        focusable="false"
-                        height="20"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        viewBox="0 0 24 24"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <article
+                        class="ant-typography"
+                        style="overflow-x: hidden; overflow-y: auto;"
                       >
-                        <path
-                          d="M3 6h18"
-                        />
-                        <path
-                          d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-                        />
-                        <path
-                          d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
-                        />
-                        <line
-                          x1="10"
-                          x2="10"
-                          y1="11"
-                          y2="17"
-                        />
-                        <line
-                          x1="14"
-                          x2="14"
-                          y1="11"
-                          y2="17"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </span>
-              </button>
-            </div>
-            <div
-              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"
-              >
-                <div
-                  class="ant-select-selector"
-                >
-                  <span
-                    class="ant-select-selection-search"
-                  >
-                    <textarea
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
-                      id="rc_select_TEST_OR_SSR"
-                      placeholder="请输入消息..."
-                      role="combobox"
-                      style="resize: none; height: -152px; max-height: -152px;"
-                      type="search"
+                        <div
+                          class="zcss-1hxup8p"
+                        >
+                          <p>
+                            昨天的当天是明天的什么？
+                          </p>
+                        </div>
+                      </article>
+                    </div>
+                    <div
+                      class="acss-0 ant-pro-chat-message-extra"
                     />
-                  </span>
-                  <span
-                    class="ant-select-selection-placeholder"
-                  />
-                </div>
-              </div>
-              <button
-                class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
-                type="button"
-              >
-                <span
-                  class="ant-btn-icon"
-                >
-                  <span
-                    aria-label="send"
-                    class="anticon anticon-send"
-                    role="img"
+                  </div>
+                  <div
+                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    role="menubar"
                   >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="send"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <defs>
-                        <style />
-                      </defs>
-                      <path
-                        d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
-<DocumentFragment>
-  <div
-    style="background: rgb(245, 245, 245);"
-  >
-    <div
-      class="ant-app"
-      style="height: 100%; width: 100%; position: relative;"
-    >
-      <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
-        style="max-height: 100vh; height: 100%;"
-      >
-        <div
-          class="ant-pro-chat-chat-list-container acss-1v5259w"
-          style="height: 100%;"
-        >
-          <div
-            class="acss-pmp369 ant-pro-chat-list"
-            style="margin-top: 24px;"
-          >
-            <div
-              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
-              data-id="ZGxiX2p4"
-            >
-              <div
-                class="acss-16a4jh6"
-              >
-                <span
-                  class="ant-avatar ant-avatar-circle ant-avatar-image acss-rgbs50"
-                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
-                >
-                  <img
-                    alt="avatar"
-                    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
-                  />
-                </span>
-              </div>
-              <div
-                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
-              >
-                <div
-                  class="layoutkit-flexbox css-1uxoxb1 acss-1df1rs8 ant-pro-chat-list-item-title"
-                >
-                  Ant Design
-                  <time>
-                    2024-02-27 17:20:00
-                  </time>
-                </div>
-                <div
-                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
-                >
-                  <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
-                  >
-                    <div
-                      id="ZGxiX2p4"
-                    >
-                      <article
-                        class="ant-typography"
-                        style="overflow-x: hidden; overflow-y: auto;"
-                      >
-                        <div
-                          class="zcss-1hxup8p"
-                        >
-                          <p>
-                            我对三体世界说话。
-                          </p>
-                        </div>
-                      </article>
-                    </div>
-                    <div
-                      class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
-                    role="menubar"
-                  >
-                    <div
-                      class="ant-editor-action-group-content zcss-t61miv"
+                    <div
+                      class="ant-editor-action-group-content zcss-t61miv"
                     >
                       <button
                         class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
@@ -12598,7 +11795,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                 class="acss-16a4jh6"
               >
                 <span
-                  class="ant-avatar ant-avatar-circle acss-1dw4cqu"
+                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
                   style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
                 >
                   <span
@@ -12609,7 +11806,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                       class="acss-1vwqsas"
                       style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
                     >
-                      🛸
+                      🤖
                     </div>
                   </span>
                 </span>
@@ -12618,9 +11815,8 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                 class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-188cr2a ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
                 >
-                  三体世界
                   <time>
                     2024-02-27 17:20:00
                   </time>
@@ -12642,7 +11838,7 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
                           class="zcss-1hxup8p"
                         >
                           <p>
-                            保持静默，不要回答，不要回答。
+                            昨天的当天是明天的昨天。
                           </p>
                         </div>
                       </article>
@@ -12963,309 +12159,495 @@ exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
+exports[`<ProChat /> > renders loading.tsx correctly 1`] = `
 <DocumentFragment>
   <div
-    class="ant-app"
-    style="height: 100%; width: 100%; position: relative;"
+    class="layoutkit-flexbox css-1euyney"
+    style="background: rgb(245, 245, 245);"
   >
     <div
-      class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
-      style="max-height: 100vh; height: 100%;"
+      class="layoutkit-flexbox css-vreggg"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          加载完成
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+          开始加载
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-divider ant-divider-horizontal"
+      role="separator"
+    />
+    <div
+      class="ant-app"
+      style="height: 100%; width: 100%; position: relative;"
     >
       <div
-        class="ant-pro-chat-chat-list-container acss-1v5259w"
-        style="height: 100%;"
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
+        style="max-height: 100vh; height: 100%;"
       >
         <div
-          class="acss-pmp369 ant-pro-chat-list"
-          style="margin-top: 24px;"
+          class="ant-pro-chat-chat-list-container acss-1v5259w"
+          style="height: 100%;"
         >
           <div
-            class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
-            data-id="default"
+            class="layoutkit-flexbox css-rzsnff"
+            style="margin-top: 24px;"
           >
             <div
-              class="acss-16a4jh6"
+              class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active acss-1cyx9n7"
             >
-              <span
-                class="ant-avatar ant-avatar-circle acss-1fg5txo"
-                style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
+              <div
+                class="ant-skeleton-header"
               >
                 <span
-                  class="ant-avatar-string"
-                  style="transform: scale(1);"
+                  class="ant-skeleton-avatar ant-skeleton-avatar-circle"
+                  style="width: 40px; height: 40px; line-height: 40px;"
+                />
+              </div>
+              <div
+                class="ant-skeleton-content"
+              >
+                <ul
+                  class="ant-skeleton-paragraph"
                 >
-                  <div
-                    class="acss-1vwqsas"
-                    style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
-                  >
-                    🤖
-                  </div>
-                </span>
-              </span>
+                  <li
+                    style="width: 50%;"
+                  />
+                  <li
+                    style="width: 30%;"
+                  />
+                </ul>
+              </div>
             </div>
             <div
-              class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
             >
               <div
-                class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                class="ant-skeleton-header"
               >
-                <time>
-                  2024-02-27 17:20:00
-                </time>
+                <span
+                  class="ant-skeleton-avatar ant-skeleton-avatar-circle"
+                  style="width: 40px; height: 40px; line-height: 40px;"
+                />
               </div>
               <div
-                class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                class="ant-skeleton-content"
               >
-                <div
-                  class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                <ul
+                  class="ant-skeleton-paragraph"
                 >
-                  <div
-                    id="default"
-                  >
-                    <article
-                      class="ant-typography"
-                      style="overflow-x: hidden; overflow-y: auto;"
-                    >
-                      <div
-                        class="zcss-1hxup8p"
-                      >
-                        <p>
-                          让我们开始对话吧
-                        </p>
-                      </div>
-                    </article>
-                  </div>
-                  <div
-                    class="acss-0 ant-pro-chat-message-extra"
+                  <li
+                    style="width: 50%;"
                   />
-                </div>
-                <div
-                  class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
-                  role="menubar"
-                />
+                  <li
+                    style="width: 30%;"
+                  />
+                </ul>
               </div>
             </div>
-            <div
-              style="flex: 0 0 auto; width: 32px;"
-            />
           </div>
+          <div
+            style="height: 1px; width: 100%;"
+          />
         </div>
-        <div
-          style="height: 1px; width: 100%;"
-        />
-      </div>
-      <button
-        class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
-        style="bottom: 138px; position: absolute; right: 16px;"
-        type="button"
-      >
-        <span
-          class="ant-btn-icon"
+        <button
+          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+          style="bottom: 138px; position: absolute; right: 16px;"
+          type="button"
         >
           <span
-            class="anticon"
-            role="img"
+            class="ant-btn-icon"
           >
-            <svg
-              class="lucide lucide-list-end"
-              fill="transparent"
-              focusable="false"
-              height="1em"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="anticon"
+              role="img"
             >
-              <path
-                d="M16 12H3"
-              />
-              <path
-                d="M16 6H3"
-              />
-              <path
-                d="M10 18H3"
-              />
-              <path
-                d="M21 6v10a2 2 0 0 1-2 2h-5"
-              />
-              <path
-                d="m16 16-2 2 2 2"
-              />
-            </svg>
+              <svg
+                class="lucide lucide-list-end"
+                fill="transparent"
+                focusable="false"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 12H3"
+                />
+                <path
+                  d="M16 6H3"
+                />
+                <path
+                  d="M10 18H3"
+                />
+                <path
+                  d="M21 6v10a2 2 0 0 1-2 2h-5"
+                />
+                <path
+                  d="m16 16-2 2 2 2"
+                />
+              </svg>
+            </span>
           </span>
-        </span>
-        <span>
-          返回底部
-        </span>
-      </button>
-      <div>
-        <div
-          class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
-        >
+          <span>
+            返回底部
+          </span>
+        </button>
+        <div>
           <div
-            class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
           >
-            <button
-              class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
-              type="button"
+            <div
+              class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
             >
-              <span
-                class="ant-btn-icon"
+              <button
+                class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <div
+                    class="acss-1o4i853"
+                    style="border-radius: 5px; height: 36px; width: 36px;"
+                  >
+                    <span
+                      class="anticon"
+                      role="img"
+                    >
+                      <svg
+                        class="lucide lucide-trash2"
+                        fill="transparent"
+                        focusable="false"
+                        height="20"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        width="20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3 6h18"
+                        />
+                        <path
+                          d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                        />
+                        <path
+                          d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                        />
+                        <line
+                          x1="10"
+                          x2="10"
+                          y1="11"
+                          y2="17"
+                        />
+                        <line
+                          x1="14"
+                          x2="14"
+                          y1="11"
+                          y2="17"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </span>
+              </button>
+            </div>
+            <div
+              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"
               >
                 <div
-                  class="acss-1o4i853"
-                  style="border-radius: 5px; height: 36px; width: 36px;"
+                  class="ant-select-selector"
                 >
                   <span
-                    class="anticon"
+                    class="ant-select-selection-search"
+                  >
+                    <textarea
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
+                      id="rc_select_TEST_OR_SSR"
+                      placeholder="请输入消息..."
+                      role="combobox"
+                      style="resize: none; height: -152px; max-height: -152px;"
+                      type="search"
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+              </div>
+              <button
+                class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <span
+                    aria-label="send"
+                    class="anticon anticon-send"
                     role="img"
                   >
                     <svg
-                      class="lucide lucide-trash2"
-                      fill="transparent"
+                      aria-hidden="true"
+                      data-icon="send"
+                      fill="currentColor"
                       focusable="false"
-                      height="20"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      viewBox="0 0 24 24"
-                      width="20"
-                      xmlns="http://www.w3.org/2000/svg"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
                     >
+                      <defs>
+                        <style />
+                      </defs>
                       <path
-                        d="M3 6h18"
-                      />
-                      <path
-                        d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-                      />
-                      <path
-                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
-                      />
-                      <line
-                        x1="10"
-                        x2="10"
-                        y1="11"
-                        y2="17"
-                      />
-                      <line
-                        x1="14"
-                        x2="14"
-                        y1="11"
-                        y2="17"
+                        d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
                       />
                     </svg>
                   </span>
-                </div>
-              </span>
-            </button>
+                </span>
+              </button>
+            </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<ProChat /> > renders meta.tsx correctly 1`] = `
+<DocumentFragment>
+  <div
+    style="background: rgb(245, 245, 245);"
+  >
+    <div
+      class="ant-app"
+      style="height: 100%; width: 100%; position: relative;"
+    >
+      <div
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
+        style="max-height: 100vh; height: 100%;"
+      >
+        <div
+          class="ant-pro-chat-chat-list-container acss-1v5259w"
+          style="height: 100%;"
+        >
           <div
-            class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+            class="acss-pmp369 ant-pro-chat-list"
+            style="margin-top: 24px;"
           >
             <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"
+              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              data-id="ZGxiX2p4"
             >
               <div
-                class="ant-select-selector"
+                class="acss-16a4jh6"
               >
                 <span
-                  class="ant-select-selection-search"
+                  class="ant-avatar ant-avatar-circle ant-avatar-image acss-rgbs50"
+                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
                 >
-                  <textarea
-                    aria-autocomplete="list"
-                    aria-controls="rc_select_TEST_OR_SSR_list"
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-owns="rc_select_TEST_OR_SSR_list"
-                    autocomplete="off"
-                    class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
-                    id="rc_select_TEST_OR_SSR"
-                    placeholder="请输入消息..."
-                    role="combobox"
-                    style="resize: none; height: -152px; max-height: -152px;"
-                    type="search"
+                  <img
+                    alt="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
                   />
                 </span>
-                <span
-                  class="ant-select-selection-placeholder"
-                />
               </div>
-            </div>
-            <button
-              class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
-              type="button"
-            >
-              <span
-                class="ant-btn-icon"
+              <div
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
-                <span
-                  aria-label="send"
-                  class="anticon anticon-send"
-                  role="img"
+                <div
+                  class="layoutkit-flexbox css-1uxoxb1 acss-1df1rs8 ant-pro-chat-list-item-title"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="send"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
+                  Ant Design
+                  <time>
+                    2024-02-27 17:20:00
+                  </time>
+                </div>
+                <div
+                  class="layoutkit-flexbox css-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                >
+                  <div
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
-                    <defs>
-                      <style />
-                    </defs>
-                    <path
-                      d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                    <div
+                      id="ZGxiX2p4"
+                    >
+                      <article
+                        class="ant-typography"
+                        style="overflow-x: hidden; overflow-y: auto;"
+                      >
+                        <div
+                          class="zcss-1hxup8p"
+                        >
+                          <p>
+                            我对三体世界说话。
+                          </p>
+                        </div>
+                      </article>
+                    </div>
+                    <div
+                      class="acss-0 ant-pro-chat-message-extra"
                     />
-                  </svg>
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
-<DocumentFragment>
-  <div
-    style="background: rgb(245, 245, 245); height: 100vh;"
-  >
-    <div
-      class="ant-app"
-      style="height: 100%; width: 100%; position: relative;"
-    >
-      <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
-        style="max-height: 100vh; height: 100vh;"
-      >
-        <div
-          class="ant-pro-chat-chat-list-container acss-1v5259w"
-          style="height: 100%;"
-        >
-          <div
-            class="acss-pmp369 ant-pro-chat-list"
-            style="margin-top: 24px;"
-          >
+                  </div>
+                  <div
+                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    role="menubar"
+                  >
+                    <div
+                      class="ant-editor-action-group-content zcss-t61miv"
+                    >
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-rotate-cw"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+                                />
+                                <path
+                                  d="M21 3v5h-5"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-pen-square"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+                                />
+                                <path
+                                  d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <span
+                            aria-label="dash"
+                            class="anticon anticon-dash"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="dash"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                style="flex: 0 0 auto; width: 32px;"
+              />
+            </div>
             <div
               class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
-              data-id="default"
+              data-id="Sb5pAzLL"
             >
               <div
                 class="acss-16a4jh6"
               >
                 <span
-                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                  class="ant-avatar ant-avatar-circle acss-1dw4cqu"
                   style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
                 >
                   <span
@@ -13276,7 +12658,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                       class="acss-1vwqsas"
                       style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
                     >
-                      🤖
+                      🛸
                     </div>
                   </span>
                 </span>
@@ -13285,8 +12667,9 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                 class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
               >
                 <div
-                  class="layoutkit-flexbox css-1qd5nuy acss-1s7pvt5 ant-pro-chat-list-item-title"
+                  class="layoutkit-flexbox css-1qd5nuy acss-188cr2a ant-pro-chat-list-item-title"
                 >
+                  三体世界
                   <time>
                     2024-02-27 17:20:00
                   </time>
@@ -13298,7 +12681,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                     class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
-                      id="default"
+                      id="Sb5pAzLL"
                     >
                       <article
                         class="ant-typography"
@@ -13308,7 +12691,7 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                           class="zcss-1hxup8p"
                         >
                           <p>
-                            让我们开始对话吧
+                            保持静默，不要回答，不要回答。
                           </p>
                         </div>
                       </article>
@@ -13320,25 +12703,141 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
                   <div
                     class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
-                  />
-                </div>
-              </div>
-              <div
-                style="flex: 0 0 auto; width: 32px;"
-              />
-            </div>
-          </div>
-          <div
-            style="height: 1px; width: 100%;"
-          />
-        </div>
-        <button
-          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
-          style="bottom: 138px; position: absolute; right: 16px;"
-          type="button"
-        >
-          <span
-            class="ant-btn-icon"
+                  >
+                    <div
+                      class="ant-editor-action-group-content zcss-t61miv"
+                    >
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-rotate-cw"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+                                />
+                                <path
+                                  d="M21 3v5h-5"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-copy"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <rect
+                                  height="14"
+                                  rx="2"
+                                  ry="2"
+                                  width="14"
+                                  x="8"
+                                  y="8"
+                                />
+                                <path
+                                  d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <span
+                            aria-label="dash"
+                            class="anticon anticon-dash"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="dash"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                style="flex: 0 0 auto; width: 32px;"
+              />
+            </div>
+          </div>
+          <div
+            style="height: 1px; width: 100%;"
+          />
+        </div>
+        <button
+          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+          style="bottom: 138px; position: absolute; right: 16px;"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
           >
             <span
               class="anticon"
@@ -13513,295 +13012,291 @@ exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ProChat /> > renders request.tsx correctly 1`] = `
+exports[`<ProChat /> > renders modal.tsx correctly 1`] = `
 <DocumentFragment>
   <div
-    style="background: rgb(245, 245, 245);"
+    class="ant-app"
+    style="height: 100%; width: 100%; position: relative;"
   >
     <div
-      class="ant-app"
-      style="height: 100%; width: 100%; position: relative;"
+      class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
+      style="max-height: 100vh; height: 100%;"
     >
       <div
-        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
-        style="max-height: 100vh; height: 100%;"
+        class="ant-pro-chat-chat-list-container acss-1v5259w"
+        style="height: 100%;"
       >
         <div
-          class="ant-pro-chat-chat-list-container acss-1v5259w"
-          style="height: 100%;"
+          class="acss-pmp369 ant-pro-chat-list"
+          style="margin-top: 24px;"
         >
           <div
-            class="acss-pmp369 ant-pro-chat-list"
-            style="margin-top: 24px;"
+            class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+            data-id="default"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
-              data-id="default"
+              class="acss-16a4jh6"
             >
-              <div
-                class="acss-16a4jh6"
+              <span
+                class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
               >
                 <span
-                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
-                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
+                  class="ant-avatar-string"
+                  style="transform: scale(1);"
                 >
-                  <span
-                    class="ant-avatar-string"
-                    style="transform: scale(1);"
+                  <div
+                    class="acss-1vwqsas"
+                    style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
                   >
-                    <div
-                      class="acss-1vwqsas"
-                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
-                    >
-                      🤖
-                    </div>
-                  </span>
+                    🤖
+                  </div>
                 </span>
+              </span>
+            </div>
+            <div
+              class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+            >
+              <div
+                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-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+                class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
               >
                 <div
-                  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-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                    id="default"
                   >
-                    <div
-                      id="default"
+                    <article
+                      class="ant-typography"
+                      style="overflow-x: hidden; overflow-y: auto;"
                     >
-                      <article
-                        class="ant-typography"
-                        style="overflow-x: hidden; overflow-y: auto;"
+                      <div
+                        class="zcss-1hxup8p"
                       >
-                        <div
-                          class="zcss-1hxup8p"
-                        >
-                          <p>
-                            Let us start chatting
-                          </p>
-                        </div>
-                      </article>
-                    </div>
-                    <div
-                      class="acss-0 ant-pro-chat-message-extra"
-                    />
+                        <p>
+                          让我们开始对话吧
+                        </p>
+                      </div>
+                    </article>
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
-                    role="menubar"
+                    class="acss-0 ant-pro-chat-message-extra"
                   />
                 </div>
+                <div
+                  class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                  role="menubar"
+                />
               </div>
-              <div
-                style="flex: 0 0 auto; width: 32px;"
-              />
             </div>
+            <div
+              style="flex: 0 0 auto; width: 32px;"
+            />
           </div>
-          <div
-            style="height: 1px; width: 100%;"
-          />
         </div>
-        <button
-          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
-          style="bottom: 138px; position: absolute; right: 16px;"
-          type="button"
-        >
-          <span
-            class="ant-btn-icon"
+        <div
+          style="height: 1px; width: 100%;"
+        />
+      </div>
+      <button
+        class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+        style="bottom: 138px; position: absolute; right: 16px;"
+        type="button"
+      >
+        <span
+          class="ant-btn-icon"
+        >
+          <span
+            class="anticon"
+            role="img"
           >
-            <span
-              class="anticon"
-              role="img"
+            <svg
+              class="lucide lucide-list-end"
+              fill="transparent"
+              focusable="false"
+              height="1em"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                class="lucide lucide-list-end"
-                fill="transparent"
-                focusable="false"
-                height="1em"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M16 12H3"
-                />
-                <path
-                  d="M16 6H3"
-                />
-                <path
-                  d="M10 18H3"
-                />
-                <path
-                  d="M21 6v10a2 2 0 0 1-2 2h-5"
-                />
-                <path
-                  d="m16 16-2 2 2 2"
-                />
-              </svg>
-            </span>
-          </span>
-          <span>
-            Back to bottom
+              <path
+                d="M16 12H3"
+              />
+              <path
+                d="M16 6H3"
+              />
+              <path
+                d="M10 18H3"
+              />
+              <path
+                d="M21 6v10a2 2 0 0 1-2 2h-5"
+              />
+              <path
+                d="m16 16-2 2 2 2"
+              />
+            </svg>
           </span>
-        </button>
-        <div>
+        </span>
+        <span>
+          返回底部
+        </span>
+      </button>
+      <div>
+        <div
+          class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+        >
           <div
-            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+            class="layoutkit-flexbox css-1gzsvii acss-1qxitnl ant-pro-chat-input-area-action-bar"
           >
-            <div
-              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"
-                type="button"
-              >
-                <span
-                  class="ant-btn-icon"
-                >
-                  <div
-                    class="acss-1o4i853"
-                    style="border-radius: 5px; height: 36px; width: 36px;"
-                  >
-                    <span
-                      class="anticon"
-                      role="img"
-                    >
-                      <svg
-                        class="lucide lucide-trash2"
-                        fill="transparent"
-                        focusable="false"
-                        height="20"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        viewBox="0 0 24 24"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M3 6h18"
-                        />
-                        <path
-                          d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-                        />
-                        <path
-                          d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
-                        />
-                        <line
-                          x1="10"
-                          x2="10"
-                          y1="11"
-                          y2="17"
-                        />
-                        <line
-                          x1="14"
-                          x2="14"
-                          y1="11"
-                          y2="17"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </span>
-              </button>
-            </div>
-            <div
-              class="layoutkit-flexbox css-bx6voh acss-p1380z ant-pro-chat-input-area-text-container"
+            <button
+              class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+              type="button"
             >
-              <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"
+              <span
+                class="ant-btn-icon"
               >
                 <div
-                  class="ant-select-selector"
-                >
-                  <span
-                    class="ant-select-selection-search"
-                  >
-                    <textarea
-                      aria-autocomplete="list"
-                      aria-controls="rc_select_TEST_OR_SSR_list"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-owns="rc_select_TEST_OR_SSR_list"
-                      autocomplete="off"
-                      class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
-                      id="rc_select_TEST_OR_SSR"
-                      placeholder="Please enter a message..."
-                      role="combobox"
-                      style="resize: none; height: -152px; max-height: -152px;"
-                      type="search"
-                    />
-                  </span>
-                  <span
-                    class="ant-select-selection-placeholder"
-                  />
-                </div>
-              </div>
-              <button
-                class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
-                type="button"
-              >
-                <span
-                  class="ant-btn-icon"
+                  class="acss-1o4i853"
+                  style="border-radius: 5px; height: 36px; width: 36px;"
                 >
                   <span
-                    aria-label="send"
-                    class="anticon anticon-send"
+                    class="anticon"
                     role="img"
                   >
                     <svg
-                      aria-hidden="true"
-                      data-icon="send"
-                      fill="currentColor"
+                      class="lucide lucide-trash2"
+                      fill="transparent"
                       focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
+                      height="20"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <defs>
-                        <style />
-                      </defs>
                       <path
-                        d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                        d="M3 6h18"
+                      />
+                      <path
+                        d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                      />
+                      <path
+                        d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                      />
+                      <line
+                        x1="10"
+                        x2="10"
+                        y1="11"
+                        y2="17"
+                      />
+                      <line
+                        x1="14"
+                        x2="14"
+                        y1="11"
+                        y2="17"
                       />
                     </svg>
                   </span>
-                </span>
-              </button>
-            </div>
+                </div>
+              </span>
+            </button>
           </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
-<DocumentFragment>
-  <div
-    style="background: rgb(245, 245, 245);"
-  >
-    <div
-      class="ant-app"
-      style="height: 100%; width: 100%; position: relative;"
+          <div
+            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"
+            >
+              <div
+                class="ant-select-selector"
+              >
+                <span
+                  class="ant-select-selection-search"
+                >
+                  <textarea
+                    aria-autocomplete="list"
+                    aria-controls="rc_select_TEST_OR_SSR_list"
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
+                    aria-owns="rc_select_TEST_OR_SSR_list"
+                    autocomplete="off"
+                    class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
+                    id="rc_select_TEST_OR_SSR"
+                    placeholder="请输入消息..."
+                    role="combobox"
+                    style="resize: none; height: -152px; max-height: -152px;"
+                    type="search"
+                  />
+                </span>
+                <span
+                  class="ant-select-selection-placeholder"
+                />
+              </div>
+            </div>
+            <button
+              class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
+              type="button"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="send"
+                  class="anticon anticon-send"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="send"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <defs>
+                      <style />
+                    </defs>
+                    <path
+                      d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<ProChat /> > renders no-stream.tsx correctly 1`] = `
+<DocumentFragment>
+  <div
+    style="background: rgb(245, 245, 245); height: 100vh;"
+  >
+    <div
+      class="ant-app"
+      style="height: 100%; width: 100%; position: relative;"
     >
       <div
         class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
-        style="max-height: 100vh; height: 100%;"
+        style="max-height: 100vh; height: 100vh;"
       >
         <div
           class="ant-pro-chat-chat-list-container acss-1v5259w"
@@ -14067,10 +13562,10 @@ exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
+exports[`<ProChat /> > renders request.tsx correctly 1`] = `
 <DocumentFragment>
   <div
-    style="background: rgb(245, 245, 245); height: 800px;"
+    style="background: rgb(245, 245, 245);"
   >
     <div
       class="ant-app"
@@ -14089,8 +13584,8 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
             style="margin-top: 24px;"
           >
             <div
-              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
-              data-id="ZGxiX2p4"
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              data-id="default"
             >
               <div
                 class="acss-16a4jh6"
@@ -14107,7 +13602,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                       class="acss-1vwqsas"
                       style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
                     >
-                      😀
+                      🤖
                     </div>
                   </span>
                 </span>
@@ -14123,13 +13618,13 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
-                      id="ZGxiX2p4"
+                      id="default"
                     >
                       <article
                         class="ant-typography"
@@ -14139,146 +13634,240 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                           class="zcss-1hxup8p"
                         >
                           <p>
-                            请展示完整的会话高亮效果？
+                            Let us start chatting
                           </p>
                         </div>
                       </article>
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
-                  >
-                    <div
-                      class="ant-editor-action-group-content zcss-t61miv"
-                    >
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <div
-                            class="acss-1o4i853"
-                            style="border-radius: 5px; height: 24px; width: 24px;"
-                          >
-                            <span
-                              class="anticon"
-                              role="img"
-                            >
-                              <svg
-                                class="lucide lucide-rotate-cw"
-                                fill="transparent"
-                                focusable="false"
-                                height="14"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                                width="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
-                                />
-                                <path
-                                  d="M21 3v5h-5"
-                                />
-                              </svg>
-                            </span>
-                          </div>
-                        </span>
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <div
-                            class="acss-1o4i853"
-                            style="border-radius: 5px; height: 24px; width: 24px;"
-                          >
-                            <span
-                              class="anticon"
-                              role="img"
-                            >
-                              <svg
-                                class="lucide lucide-pen-square"
-                                fill="transparent"
-                                focusable="false"
-                                height="14"
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="1.5"
-                                viewBox="0 0 24 24"
-                                width="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
-                                />
-                                <path
-                                  d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"
-                                />
-                              </svg>
-                            </span>
-                          </div>
-                        </span>
-                      </button>
-                      <button
-                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
-                        type="button"
-                      >
-                        <span
-                          class="ant-btn-icon"
-                        >
-                          <span
-                            aria-label="dash"
-                            class="anticon anticon-dash"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="dash"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
+                  />
                 </div>
               </div>
+              <div
+                style="flex: 0 0 auto; width: 32px;"
+              />
             </div>
-            <div
-              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
-              data-id="Sb5pAzLL"
+          </div>
+          <div
+            style="height: 1px; width: 100%;"
+          />
+        </div>
+        <button
+          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+          style="bottom: 138px; position: absolute; right: 16px;"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              class="anticon"
+              role="img"
             >
-              <div
-                class="acss-16a4jh6"
+              <svg
+                class="lucide lucide-list-end"
+                fill="transparent"
+                focusable="false"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <span
+                <path
+                  d="M16 12H3"
+                />
+                <path
+                  d="M16 6H3"
+                />
+                <path
+                  d="M10 18H3"
+                />
+                <path
+                  d="M21 6v10a2 2 0 0 1-2 2h-5"
+                />
+                <path
+                  d="m16 16-2 2 2 2"
+                />
+              </svg>
+            </span>
+          </span>
+          <span>
+            Back to bottom
+          </span>
+        </button>
+        <div>
+          <div
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+          >
+            <div
+              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"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <div
+                    class="acss-1o4i853"
+                    style="border-radius: 5px; height: 36px; width: 36px;"
+                  >
+                    <span
+                      class="anticon"
+                      role="img"
+                    >
+                      <svg
+                        class="lucide lucide-trash2"
+                        fill="transparent"
+                        focusable="false"
+                        height="20"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        width="20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3 6h18"
+                        />
+                        <path
+                          d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                        />
+                        <path
+                          d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                        />
+                        <line
+                          x1="10"
+                          x2="10"
+                          y1="11"
+                          y2="17"
+                        />
+                        <line
+                          x1="14"
+                          x2="14"
+                          y1="11"
+                          y2="17"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </span>
+              </button>
+            </div>
+            <div
+              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"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <textarea
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
+                      id="rc_select_TEST_OR_SSR"
+                      placeholder="Please enter a message..."
+                      role="combobox"
+                      style="resize: none; height: -152px; max-height: -152px;"
+                      type="search"
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+              </div>
+              <button
+                class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <span
+                    aria-label="send"
+                    class="anticon anticon-send"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="send"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <defs>
+                        <style />
+                      </defs>
+                      <path
+                        d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<ProChat /> > renders sse.tsx correctly 1`] = `
+<DocumentFragment>
+  <div
+    style="background: rgb(245, 245, 245);"
+  >
+    <div
+      class="ant-app"
+      style="height: 100%; width: 100%; position: relative;"
+    >
+      <div
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
+        style="max-height: 100vh; height: 100%;"
+      >
+        <div
+          class="ant-pro-chat-chat-list-container acss-1v5259w"
+          style="height: 100%;"
+        >
+          <div
+            class="acss-pmp369 ant-pro-chat-list"
+            style="margin-top: 24px;"
+          >
+            <div
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              data-id="default"
+            >
+              <div
+                class="acss-16a4jh6"
+              >
+                <span
                   class="ant-avatar ant-avatar-circle acss-1fg5txo"
                   style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
                 >
@@ -14306,13 +13895,13 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                   </time>
                 </div>
                 <div
-                  class="layoutkit-flexbox css-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                  class="layoutkit-flexbox css-d8kryp acss-j11nrd ant-pro-chat-message-content"
                 >
                   <div
-                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
                   >
                     <div
-                      id="Sb5pAzLL"
+                      id="default"
                     >
                       <article
                         class="ant-typography"
@@ -14321,72 +13910,527 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                         <div
                           class="zcss-1hxup8p"
                         >
-                          <h1>
-                            This is an H1
-                          </h1>
-                          
-
-                          <h2>
-                            This is an H2
-                          </h2>
-                          
-
-                          <h3>
-                            This is an H3
-                          </h3>
-                          
-
-                          <h4>
-                            This is an H4
-                          </h4>
-                          
-
-                          <h5>
-                            This is an H5
-                          </h5>
-                          
-
                           <p>
-                            The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw 
-                            <code>
-                              HTML
-                            </code>
-                            , it’s 234 characters. In the raw 
-                            <code>
-                              HTML
-                            </code>
-                            , there’s more markup than there is text.
+                            让我们开始对话吧
                           </p>
-                          
-
-                          <div
-                            class="ant-divider ant-divider-horizontal"
-                            node="[object Object]"
-                            role="separator"
-                            style="margin-bottom: 1em; margin-top: 0px;"
-                          />
-                          
-
-                          <blockquote>
-                            
-
-                            <p>
-                              This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.
-                            </p>
-                            
-
-                          </blockquote>
-                          
-
-                          <div
-                            class="ant-divider ant-divider-horizontal"
-                            node="[object Object]"
-                            role="separator"
-                            style="margin-bottom: 1em; margin-top: 0px;"
-                          />
-                          
-
-                          <p>
+                        </div>
+                      </article>
+                    </div>
+                    <div
+                      class="acss-0 ant-pro-chat-message-extra"
+                    />
+                  </div>
+                  <div
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
+                    role="menubar"
+                  />
+                </div>
+              </div>
+              <div
+                style="flex: 0 0 auto; width: 32px;"
+              />
+            </div>
+          </div>
+          <div
+            style="height: 1px; width: 100%;"
+          />
+        </div>
+        <button
+          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+          style="bottom: 138px; position: absolute; right: 16px;"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              class="anticon"
+              role="img"
+            >
+              <svg
+                class="lucide lucide-list-end"
+                fill="transparent"
+                focusable="false"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 12H3"
+                />
+                <path
+                  d="M16 6H3"
+                />
+                <path
+                  d="M10 18H3"
+                />
+                <path
+                  d="M21 6v10a2 2 0 0 1-2 2h-5"
+                />
+                <path
+                  d="m16 16-2 2 2 2"
+                />
+              </svg>
+            </span>
+          </span>
+          <span>
+            返回底部
+          </span>
+        </button>
+        <div>
+          <div
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+          >
+            <div
+              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"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <div
+                    class="acss-1o4i853"
+                    style="border-radius: 5px; height: 36px; width: 36px;"
+                  >
+                    <span
+                      class="anticon"
+                      role="img"
+                    >
+                      <svg
+                        class="lucide lucide-trash2"
+                        fill="transparent"
+                        focusable="false"
+                        height="20"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        width="20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3 6h18"
+                        />
+                        <path
+                          d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                        />
+                        <path
+                          d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                        />
+                        <line
+                          x1="10"
+                          x2="10"
+                          y1="11"
+                          y2="17"
+                        />
+                        <line
+                          x1="14"
+                          x2="14"
+                          y1="11"
+                          y2="17"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </span>
+              </button>
+            </div>
+            <div
+              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"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <textarea
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
+                      id="rc_select_TEST_OR_SSR"
+                      placeholder="请输入消息..."
+                      role="combobox"
+                      style="resize: none; height: -152px; max-height: -152px;"
+                      type="search"
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+              </div>
+              <button
+                class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <span
+                    aria-label="send"
+                    class="anticon anticon-send"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="send"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <defs>
+                        <style />
+                      </defs>
+                      <path
+                        d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
+<DocumentFragment>
+  <div
+    style="background: rgb(245, 245, 245); height: 800px;"
+  >
+    <div
+      class="ant-app"
+      style="height: 100%; width: 100%; position: relative;"
+    >
+      <div
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
+        style="max-height: 100vh; height: 100%;"
+      >
+        <div
+          class="ant-pro-chat-chat-list-container acss-1v5259w"
+          style="height: 100%;"
+        >
+          <div
+            class="acss-pmp369 ant-pro-chat-list"
+            style="margin-top: 24px;"
+          >
+            <div
+              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              data-id="ZGxiX2p4"
+            >
+              <div
+                class="acss-16a4jh6"
+              >
+                <span
+                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
+                >
+                  <span
+                    class="ant-avatar-string"
+                    style="transform: scale(1);"
+                  >
+                    <div
+                      class="acss-1vwqsas"
+                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
+                    >
+                      😀
+                    </div>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              >
+                <div
+                  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-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                >
+                  <div
+                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                  >
+                    <div
+                      id="ZGxiX2p4"
+                    >
+                      <article
+                        class="ant-typography"
+                        style="overflow-x: hidden; overflow-y: auto;"
+                      >
+                        <div
+                          class="zcss-1hxup8p"
+                        >
+                          <p>
+                            请展示完整的会话高亮效果？
+                          </p>
+                        </div>
+                      </article>
+                    </div>
+                    <div
+                      class="acss-0 ant-pro-chat-message-extra"
+                    />
+                  </div>
+                  <div
+                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    role="menubar"
+                  >
+                    <div
+                      class="ant-editor-action-group-content zcss-t61miv"
+                    >
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-rotate-cw"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+                                />
+                                <path
+                                  d="M21 3v5h-5"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-pen-square"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+                                />
+                                <path
+                                  d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <span
+                            aria-label="dash"
+                            class="anticon anticon-dash"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="dash"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="layoutkit-flexbox css-14n32il acss-4rcaee ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              data-id="Sb5pAzLL"
+            >
+              <div
+                class="acss-16a4jh6"
+              >
+                <span
+                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
+                >
+                  <span
+                    class="ant-avatar-string"
+                    style="transform: scale(1);"
+                  >
+                    <div
+                      class="acss-1vwqsas"
+                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
+                    >
+                      🤖
+                    </div>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              >
+                <div
+                  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-14jdfs3 acss-j11nrd ant-pro-chat-message-content"
+                >
+                  <div
+                    class="layoutkit-flexbox css-1euyney acss-yb6bwp ant-pro-chat-list-item-message-content"
+                  >
+                    <div
+                      id="Sb5pAzLL"
+                    >
+                      <article
+                        class="ant-typography"
+                        style="overflow-x: hidden; overflow-y: auto;"
+                      >
+                        <div
+                          class="zcss-1hxup8p"
+                        >
+                          <h1>
+                            This is an H1
+                          </h1>
+                          
+
+                          <h2>
+                            This is an H2
+                          </h2>
+                          
+
+                          <h3>
+                            This is an H3
+                          </h3>
+                          
+
+                          <h4>
+                            This is an H4
+                          </h4>
+                          
+
+                          <h5>
+                            This is an H5
+                          </h5>
+                          
+
+                          <p>
+                            The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw 
+                            <code>
+                              HTML
+                            </code>
+                            , it’s 234 characters. In the raw 
+                            <code>
+                              HTML
+                            </code>
+                            , there’s more markup than there is text.
+                          </p>
+                          
+
+                          <div
+                            class="ant-divider ant-divider-horizontal"
+                            node="[object Object]"
+                            role="separator"
+                            style="margin-bottom: 1em; margin-top: 0px;"
+                          />
+                          
+
+                          <blockquote>
+                            
+
+                            <p>
+                              This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.
+                            </p>
+                            
+
+                          </blockquote>
+                          
+
+                          <div
+                            class="ant-divider ant-divider-horizontal"
+                            node="[object Object]"
+                            role="separator"
+                            style="margin-bottom: 1em; margin-top: 0px;"
+                          />
+                          
+
+                          <p>
                             an example | 
                             <em>
                               an example
@@ -16143,10 +16187,213 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                                           >
                                             <span
                                               class="vlist"
-                                              style="height: 0.8641em;"
+                                              style="height: 0.8641em;"
+                                            >
+                                              <span
+                                                style="top: -3.113em; margin-right: 0.05em;"
+                                              >
+                                                <span
+                                                  class="pstrut"
+                                                  style="height: 2.7em;"
+                                                />
+                                                <span
+                                                  class="sizing reset-size6 size3 mtight"
+                                                >
+                                                  <span
+                                                    class="mord mtight"
+                                                  >
+                                                    <span
+                                                      class="mord mtight"
+                                                    >
+                                                      2
+                                                    </span>
+                                                  </span>
+                                                </span>
+                                              </span>
+                                            </span>
+                                          </span>
+                                        </span>
+                                      </span>
+                                    </span>
+                                    <span
+                                      class="mspace"
+                                      style="margin-right: 0.2778em;"
+                                    />
+                                    <span
+                                      class="mrel"
+                                    >
+                                      =
+                                    </span>
+                                    <span
+                                      class="mspace"
+                                      style="margin-right: 0.2778em;"
+                                    />
+                                  </span>
+                                  <span
+                                    class="base"
+                                  >
+                                    <span
+                                      class="strut"
+                                      style="height: 0.8641em;"
+                                    />
+                                    <span
+                                      class="mord"
+                                    >
+                                      <span
+                                        class="mord mathnormal"
+                                        style="margin-right: 0.02778em;"
+                                      >
+                                        r
+                                      </span>
+                                      <span
+                                        class="msupsub"
+                                      >
+                                        <span
+                                          class="vlist-t"
+                                        >
+                                          <span
+                                            class="vlist-r"
+                                          >
+                                            <span
+                                              class="vlist"
+                                              style="height: 0.8641em;"
+                                            >
+                                              <span
+                                                style="top: -3.113em; margin-right: 0.05em;"
+                                              >
+                                                <span
+                                                  class="pstrut"
+                                                  style="height: 2.7em;"
+                                                />
+                                                <span
+                                                  class="sizing reset-size6 size3 mtight"
+                                                >
+                                                  <span
+                                                    class="mord mtight"
+                                                  >
+                                                    <span
+                                                      class="mord mtight"
+                                                    >
+                                                      2
+                                                    </span>
+                                                  </span>
+                                                </span>
+                                              </span>
+                                            </span>
+                                          </span>
+                                        </span>
+                                      </span>
+                                    </span>
+                                  </span>
+                                </span>
+                              </span>
+                            </span>
+                          </div>
+                          
+
+                          <p>
+                            我是一个带有积分符号的公式：
+                          </p>
+                          
+
+                          <div
+                            class="math math-display"
+                          >
+                            <span
+                              class="katex-display"
+                            >
+                              <span
+                                class="katex"
+                              >
+                                <span
+                                  class="katex-mathml"
+                                >
+                                  <math
+                                    display="block"
+                                    xmlns="http://www.w3.org/1998/Math/MathML"
+                                  >
+                                    <semantics>
+                                      <mrow>
+                                        <msubsup>
+                                          <mo>
+                                            ∫
+                                          </mo>
+                                          <mi>
+                                            a
+                                          </mi>
+                                          <mi>
+                                            b
+                                          </mi>
+                                        </msubsup>
+                                        <mi>
+                                          f
+                                        </mi>
+                                        <mo
+                                          stretchy="false"
+                                        >
+                                          (
+                                        </mo>
+                                        <mi>
+                                          x
+                                        </mi>
+                                        <mo
+                                          stretchy="false"
+                                        >
+                                          )
+                                        </mo>
+                                        <mtext>
+                                           
+                                        </mtext>
+                                        <mi>
+                                          d
+                                        </mi>
+                                        <mi>
+                                          x
+                                        </mi>
+                                      </mrow>
+                                      <annotation
+                                        encoding="application/x-tex"
+                                      >
+                                        \\int_{a}^{b} f(x) \\, dx
+                                      </annotation>
+                                    </semantics>
+                                  </math>
+                                </span>
+                                <span
+                                  aria-hidden="true"
+                                  class="katex-html"
+                                >
+                                  <span
+                                    class="base"
+                                  >
+                                    <span
+                                      class="strut"
+                                      style="height: 2.511em; vertical-align: -0.9119em;"
+                                    />
+                                    <span
+                                      class="mop"
+                                    >
+                                      <span
+                                        class="mop op-symbol large-op"
+                                        style="margin-right: 0.44445em; position: relative; top: -0.0011em;"
+                                      >
+                                        ∫
+                                      </span>
+                                      <span
+                                        class="msupsub"
+                                      >
+                                        <span
+                                          class="vlist-t vlist-t2"
+                                        >
+                                          <span
+                                            class="vlist-r"
+                                          >
+                                            <span
+                                              class="vlist"
+                                              style="height: 1.599em;"
                                             >
                                               <span
-                                                style="top: -3.113em; margin-right: 0.05em;"
+                                                style="top: -1.7881em; margin-left: -0.4445em; margin-right: 0.05em;"
                                               >
                                                 <span
                                                   class="pstrut"
@@ -16159,63 +16406,15 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                                                     class="mord mtight"
                                                   >
                                                     <span
-                                                      class="mord mtight"
+                                                      class="mord mathnormal mtight"
                                                     >
-                                                      2
+                                                      a
                                                     </span>
                                                   </span>
                                                 </span>
                                               </span>
-                                            </span>
-                                          </span>
-                                        </span>
-                                      </span>
-                                    </span>
-                                    <span
-                                      class="mspace"
-                                      style="margin-right: 0.2778em;"
-                                    />
-                                    <span
-                                      class="mrel"
-                                    >
-                                      =
-                                    </span>
-                                    <span
-                                      class="mspace"
-                                      style="margin-right: 0.2778em;"
-                                    />
-                                  </span>
-                                  <span
-                                    class="base"
-                                  >
-                                    <span
-                                      class="strut"
-                                      style="height: 0.8641em;"
-                                    />
-                                    <span
-                                      class="mord"
-                                    >
-                                      <span
-                                        class="mord mathnormal"
-                                        style="margin-right: 0.02778em;"
-                                      >
-                                        r
-                                      </span>
-                                      <span
-                                        class="msupsub"
-                                      >
-                                        <span
-                                          class="vlist-t"
-                                        >
-                                          <span
-                                            class="vlist-r"
-                                          >
-                                            <span
-                                              class="vlist"
-                                              style="height: 0.8641em;"
-                                            >
                                               <span
-                                                style="top: -3.113em; margin-right: 0.05em;"
+                                                style="top: -3.8129em; margin-right: 0.05em;"
                                               >
                                                 <span
                                                   class="pstrut"
@@ -16228,232 +16427,675 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                                                     class="mord mtight"
                                                   >
                                                     <span
-                                                      class="mord mtight"
+                                                      class="mord mathnormal mtight"
                                                     >
-                                                      2
+                                                      b
                                                     </span>
                                                   </span>
                                                 </span>
                                               </span>
                                             </span>
+                                            <span
+                                              class="vlist-s"
+                                            >
+                                              ​
+                                            </span>
+                                          </span>
+                                          <span
+                                            class="vlist-r"
+                                          >
+                                            <span
+                                              class="vlist"
+                                              style="height: 0.9119em;"
+                                            >
+                                              <span />
+                                            </span>
                                           </span>
                                         </span>
                                       </span>
                                     </span>
+                                    <span
+                                      class="mspace"
+                                      style="margin-right: 0.1667em;"
+                                    />
+                                    <span
+                                      class="mord mathnormal"
+                                      style="margin-right: 0.10764em;"
+                                    >
+                                      f
+                                    </span>
+                                    <span
+                                      class="mopen"
+                                    >
+                                      (
+                                    </span>
+                                    <span
+                                      class="mord mathnormal"
+                                    >
+                                      x
+                                    </span>
+                                    <span
+                                      class="mclose"
+                                    >
+                                      )
+                                    </span>
+                                    <span
+                                      class="mspace"
+                                      style="margin-right: 0.1667em;"
+                                    />
+                                    <span
+                                      class="mord mathnormal"
+                                    >
+                                      d
+                                    </span>
+                                    <span
+                                      class="mord mathnormal"
+                                    >
+                                      x
+                                    </span>
                                   </span>
                                 </span>
                               </span>
                             </span>
                           </div>
-                          
+                        </div>
+                      </article>
+                    </div>
+                    <div
+                      class="acss-0 ant-pro-chat-message-extra"
+                    />
+                  </div>
+                  <div
+                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    role="menubar"
+                  >
+                    <div
+                      class="ant-editor-action-group-content zcss-t61miv"
+                    >
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-rotate-cw"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+                                />
+                                <path
+                                  d="M21 3v5h-5"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-copy"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <rect
+                                  height="14"
+                                  rx="2"
+                                  ry="2"
+                                  width="14"
+                                  x="8"
+                                  y="8"
+                                />
+                                <path
+                                  d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <span
+                            aria-label="dash"
+                            class="anticon anticon-dash"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="dash"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="height: 1px; width: 100%;"
+          />
+        </div>
+        <button
+          class="ant-btn ant-btn-primary"
+          style="align-self: flex-end; width: 200px; margin-right: 18px;"
+          type="button"
+        >
+          <span>
+            Scroll To Bottom
+          </span>
+        </button>
+        <div>
+          <div
+            class="layoutkit-flexbox css-1r7zaxo acss-1ckeg12 ant-pro-chat-input-area"
+          >
+            <div
+              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"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <div
+                    class="acss-1o4i853"
+                    style="border-radius: 5px; height: 36px; width: 36px;"
+                  >
+                    <span
+                      class="anticon"
+                      role="img"
+                    >
+                      <svg
+                        class="lucide lucide-trash2"
+                        fill="transparent"
+                        focusable="false"
+                        height="20"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        width="20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3 6h18"
+                        />
+                        <path
+                          d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                        />
+                        <path
+                          d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                        />
+                        <line
+                          x1="10"
+                          x2="10"
+                          y1="11"
+                          y2="17"
+                        />
+                        <line
+                          x1="14"
+                          x2="14"
+                          y1="11"
+                          y2="17"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                </span>
+              </button>
+            </div>
+            <div
+              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"
+              >
+                <div
+                  class="ant-select-selector"
+                >
+                  <span
+                    class="ant-select-selection-search"
+                  >
+                    <textarea
+                      aria-autocomplete="list"
+                      aria-controls="rc_select_TEST_OR_SSR_list"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-owns="rc_select_TEST_OR_SSR_list"
+                      autocomplete="off"
+                      class="ant-input ant-input-lg ant-input-outlined ant-select-selection-search-input acss-6ckfqf ant-pro-chat-input-area-component-textarea"
+                      id="rc_select_TEST_OR_SSR"
+                      placeholder="请输入消息..."
+                      role="combobox"
+                      style="resize: none; height: -152px; max-height: -152px;"
+                      type="search"
+                    />
+                  </span>
+                  <span
+                    class="ant-select-selection-placeholder"
+                  />
+                </div>
+              </div>
+              <button
+                class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <span
+                    aria-label="send"
+                    class="anticon anticon-send"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="send"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <defs>
+                        <style />
+                      </defs>
+                      <path
+                        d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 
+exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="ant-flex ant-flex-justify-space-between"
+    style="padding: 24px; gap: 8px;"
+  >
+    <div
+      class="ant-flex"
+      style="gap: 8px;"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span>
+          发送一条消息
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default"
+        type="button"
+      >
+        <span>
+          获取最新会话消息
+        </span>
+      </button>
+    </div>
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        修改首条消息，添加表情：👋
+      </span>
+    </button>
+    <div
+      class="ant-flex"
+      style="gap: 8px;"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-dangerous"
+        type="button"
+      >
+        <span>
+          删除第一条消息
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-dangerous"
+        type="button"
+      >
+        <span>
+          清空消息
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      🔼 程序化控制 | 🔽 用户控制
+    </span>
+  </div>
+  <div
+    style="background: rgb(245, 245, 245);"
+  >
+    <div
+      class="ant-app"
+      style="height: 100%; width: 100%; position: relative;"
+    >
+      <div
+        class="layoutkit-flexbox css-1euyney ant-pro-chat acss-zi4bjt ant-pro-chat-container"
+        style="max-height: 100vh; height: 100%;"
+      >
+        <div
+          class="ant-pro-chat-chat-list-container acss-1v5259w"
+          style="height: 100%;"
+        >
+          <div
+            class="acss-pmp369 ant-pro-chat-list"
+            style="margin-top: 24px;"
+          >
+            <div
+              class="layoutkit-flexbox css-1sfjazu acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-right"
+              data-id="ZGxiX2p4"
+            >
+              <div
+                class="acss-16a4jh6"
+              >
+                <span
+                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
+                >
+                  <span
+                    class="ant-avatar-string"
+                    style="transform: scale(1);"
+                  >
+                    <div
+                      class="acss-1vwqsas"
+                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
+                    >
+                      😀
+                    </div>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="layoutkit-flexbox css-uhomow acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              >
+                <div
+                  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-1g62d18 acss-j11nrd ant-pro-chat-message-content"
+                >
+                  <div
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                  >
+                    <div
+                      id="ZGxiX2p4"
+                    >
+                      <article
+                        class="ant-typography"
+                        style="overflow-x: hidden; overflow-y: auto;"
+                      >
+                        <div
+                          class="zcss-1hxup8p"
+                        >
                           <p>
-                            我是一个带有积分符号的公式：
+                            昨天的当天是明天的什么？
                           </p>
-                          
-
+                        </div>
+                      </article>
+                    </div>
+                    <div
+                      class="acss-0 ant-pro-chat-message-extra"
+                    />
+                  </div>
+                  <div
+                    class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
+                    role="menubar"
+                  >
+                    <div
+                      class="ant-editor-action-group-content zcss-t61miv"
+                    >
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
                           <div
-                            class="math math-display"
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
                           >
                             <span
-                              class="katex-display"
+                              class="anticon"
+                              role="img"
                             >
-                              <span
-                                class="katex"
+                              <svg
+                                class="lucide lucide-rotate-cw"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
                               >
-                                <span
-                                  class="katex-mathml"
-                                >
-                                  <math
-                                    display="block"
-                                    xmlns="http://www.w3.org/1998/Math/MathML"
-                                  >
-                                    <semantics>
-                                      <mrow>
-                                        <msubsup>
-                                          <mo>
-                                            ∫
-                                          </mo>
-                                          <mi>
-                                            a
-                                          </mi>
-                                          <mi>
-                                            b
-                                          </mi>
-                                        </msubsup>
-                                        <mi>
-                                          f
-                                        </mi>
-                                        <mo
-                                          stretchy="false"
-                                        >
-                                          (
-                                        </mo>
-                                        <mi>
-                                          x
-                                        </mi>
-                                        <mo
-                                          stretchy="false"
-                                        >
-                                          )
-                                        </mo>
-                                        <mtext>
-                                           
-                                        </mtext>
-                                        <mi>
-                                          d
-                                        </mi>
-                                        <mi>
-                                          x
-                                        </mi>
-                                      </mrow>
-                                      <annotation
-                                        encoding="application/x-tex"
-                                      >
-                                        \\int_{a}^{b} f(x) \\, dx
-                                      </annotation>
-                                    </semantics>
-                                  </math>
-                                </span>
-                                <span
-                                  aria-hidden="true"
-                                  class="katex-html"
-                                >
-                                  <span
-                                    class="base"
-                                  >
-                                    <span
-                                      class="strut"
-                                      style="height: 2.511em; vertical-align: -0.9119em;"
-                                    />
-                                    <span
-                                      class="mop"
-                                    >
-                                      <span
-                                        class="mop op-symbol large-op"
-                                        style="margin-right: 0.44445em; position: relative; top: -0.0011em;"
-                                      >
-                                        ∫
-                                      </span>
-                                      <span
-                                        class="msupsub"
-                                      >
-                                        <span
-                                          class="vlist-t vlist-t2"
-                                        >
-                                          <span
-                                            class="vlist-r"
-                                          >
-                                            <span
-                                              class="vlist"
-                                              style="height: 1.599em;"
-                                            >
-                                              <span
-                                                style="top: -1.7881em; margin-left: -0.4445em; margin-right: 0.05em;"
-                                              >
-                                                <span
-                                                  class="pstrut"
-                                                  style="height: 2.7em;"
-                                                />
-                                                <span
-                                                  class="sizing reset-size6 size3 mtight"
-                                                >
-                                                  <span
-                                                    class="mord mtight"
-                                                  >
-                                                    <span
-                                                      class="mord mathnormal mtight"
-                                                    >
-                                                      a
-                                                    </span>
-                                                  </span>
-                                                </span>
-                                              </span>
-                                              <span
-                                                style="top: -3.8129em; margin-right: 0.05em;"
-                                              >
-                                                <span
-                                                  class="pstrut"
-                                                  style="height: 2.7em;"
-                                                />
-                                                <span
-                                                  class="sizing reset-size6 size3 mtight"
-                                                >
-                                                  <span
-                                                    class="mord mtight"
-                                                  >
-                                                    <span
-                                                      class="mord mathnormal mtight"
-                                                    >
-                                                      b
-                                                    </span>
-                                                  </span>
-                                                </span>
-                                              </span>
-                                            </span>
-                                            <span
-                                              class="vlist-s"
-                                            >
-                                              ​
-                                            </span>
-                                          </span>
-                                          <span
-                                            class="vlist-r"
-                                          >
-                                            <span
-                                              class="vlist"
-                                              style="height: 0.9119em;"
-                                            >
-                                              <span />
-                                            </span>
-                                          </span>
-                                        </span>
-                                      </span>
-                                    </span>
-                                    <span
-                                      class="mspace"
-                                      style="margin-right: 0.1667em;"
-                                    />
-                                    <span
-                                      class="mord mathnormal"
-                                      style="margin-right: 0.10764em;"
-                                    >
-                                      f
-                                    </span>
-                                    <span
-                                      class="mopen"
-                                    >
-                                      (
-                                    </span>
-                                    <span
-                                      class="mord mathnormal"
-                                    >
-                                      x
-                                    </span>
-                                    <span
-                                      class="mclose"
-                                    >
-                                      )
-                                    </span>
-                                    <span
-                                      class="mspace"
-                                      style="margin-right: 0.1667em;"
-                                    />
-                                    <span
-                                      class="mord mathnormal"
-                                    >
-                                      d
-                                    </span>
-                                    <span
-                                      class="mord mathnormal"
-                                    >
-                                      x
-                                    </span>
-                                  </span>
-                                </span>
-                              </span>
+                                <path
+                                  d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+                                />
+                                <path
+                                  d="M21 3v5h-5"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-97l1ue"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <div
+                            class="acss-1o4i853"
+                            style="border-radius: 5px; height: 24px; width: 24px;"
+                          >
+                            <span
+                              class="anticon"
+                              role="img"
+                            >
+                              <svg
+                                class="lucide lucide-pen-square"
+                                fill="transparent"
+                                focusable="false"
+                                height="14"
+                                stroke="currentColor"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                                width="14"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+                                />
+                                <path
+                                  d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z"
+                                />
+                              </svg>
                             </span>
                           </div>
+                        </span>
+                      </button>
+                      <button
+                        class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1jqu9f1 ant-dropdown-trigger"
+                        type="button"
+                      >
+                        <span
+                          class="ant-btn-icon"
+                        >
+                          <span
+                            aria-label="dash"
+                            class="anticon anticon-dash"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="dash"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="64 64 896 896"
+                              width="1em"
+                            >
+                              <path
+                                d="M112 476h160v72H112zm320 0h160v72H432zm320 0h160v72H752z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                style="flex: 0 0 auto; width: 32px;"
+              />
+            </div>
+            <div
+              class="layoutkit-flexbox css-14n32il acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              data-id="Sb5pAzLL"
+            >
+              <div
+                class="acss-16a4jh6"
+              >
+                <span
+                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
+                >
+                  <span
+                    class="ant-avatar-string"
+                    style="transform: scale(1);"
+                  >
+                    <div
+                      class="acss-1vwqsas"
+                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
+                    >
+                      🤖
+                    </div>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="layoutkit-flexbox css-7vjqoo acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              >
+                <div
+                  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-d8kryp acss-j11nrd ant-pro-chat-message-content"
+                >
+                  <div
+                    class="layoutkit-flexbox css-1euyney acss-1aas3xx ant-pro-chat-list-item-message-content"
+                  >
+                    <div
+                      id="Sb5pAzLL"
+                    >
+                      <article
+                        class="ant-typography"
+                        style="overflow-x: hidden; overflow-y: auto;"
+                      >
+                        <div
+                          class="zcss-1hxup8p"
+                        >
+                          <p>
+                            昨天的当天是明天的昨天。
+                          </p>
                         </div>
                       </article>
                     </div>
@@ -16462,7 +17104,7 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                     />
                   </div>
                   <div
-                    class="layoutkit-flexbox css-7vjqoo acss-13ms7ma ant-pro-chat-list-item-actions"
+                    class="layoutkit-flexbox css-7vjqoo acss-1eio0fa ant-pro-chat-list-item-actions"
                     role="menubar"
                   >
                     <div
@@ -16583,6 +17225,9 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
                   </div>
                 </div>
               </div>
+              <div
+                style="flex: 0 0 auto; width: 32px;"
+              />
             </div>
           </div>
           <div
@@ -16590,12 +17235,50 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
           />
         </div>
         <button
-          class="ant-btn ant-btn-primary"
-          style="align-self: flex-end; width: 200px; margin-right: 18px;"
+          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+          style="bottom: 138px; position: absolute; right: 16px;"
           type="button"
         >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              class="anticon"
+              role="img"
+            >
+              <svg
+                class="lucide lucide-list-end"
+                fill="transparent"
+                focusable="false"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 12H3"
+                />
+                <path
+                  d="M16 6H3"
+                />
+                <path
+                  d="M10 18H3"
+                />
+                <path
+                  d="M21 6v10a2 2 0 0 1-2 2h-5"
+                />
+                <path
+                  d="m16 16-2 2 2 2"
+                />
+              </svg>
+            </span>
+          </span>
           <span>
-            Scroll To Bottom
+            返回底部
           </span>
         </button>
         <div>
@@ -16732,76 +17415,19 @@ exports[`<ProChat /> > renders toBottomConfig.tsx correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
+exports[`<ProChat /> > renders use-pro-chat.tsx correctly 2`] = `
 <DocumentFragment>
   <div
-    class="ant-flex ant-flex-justify-space-between"
-    style="padding: 24px; gap: 8px;"
+    style="background: rgb(245, 245, 245);"
   >
-    <div
-      class="ant-flex"
-      style="gap: 8px;"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          发送一条消息
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-          获取最新会话消息
-        </span>
-      </button>
-    </div>
     <button
-      class="ant-btn ant-btn-default"
+      class="ant-btn ant-btn-primary"
       type="button"
     >
       <span>
         修改首条消息，添加表情：👋
       </span>
     </button>
-    <div
-      class="ant-flex"
-      style="gap: 8px;"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-dangerous"
-        type="button"
-      >
-        <span>
-          删除第一条消息
-        </span>
-      </button>
-      <button
-        class="ant-btn ant-btn-primary ant-btn-dangerous"
-        type="button"
-      >
-        <span>
-          清空消息
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
-    role="separator"
-  >
-    <span
-      class="ant-divider-inner-text"
-    >
-      🔼 程序化控制 | 🔽 用户控制
-    </span>
-  </div>
-  <div
-    style="background: rgb(245, 245, 245);"
-  >
     <div
       class="ant-app"
       style="height: 100%; width: 100%; position: relative;"
@@ -16876,12 +17502,7 @@ exports[`<ProChat /> > renders use-pro-chat.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                   <div
                     class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
@@ -17463,12 +18084,7 @@ exports[`<ProChat /> > renders use-ref.tsx correctly 1`] = `
                     </div>
                     <div
                       class="acss-0 ant-pro-chat-message-extra"
-                    >
-                      <div
-                        class="layoutkit-flexbox css-1yd7uym"
-                        style="margin-top: 0px;"
-                      />
-                    </div>
+                    />
                   </div>
                   <div
                     class="layoutkit-flexbox css-7vjqoo acss-1baikiv ant-pro-chat-list-item-actions"
diff --git a/src/ProChat/components/ChatList/index.tsx b/src/ProChat/components/ChatList/index.tsx
index 77111ca8..64c213ce 100644
--- a/src/ProChat/components/ChatList/index.tsx
+++ b/src/ProChat/components/ChatList/index.tsx
@@ -6,8 +6,8 @@ import { useStore } from '@/ProChat/store';
 import { chatSelectors } from '@/ProChat/store/selectors';
 
 import { ChatListItemProps } from '@/ChatList/ChatListItem';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
 import { useRefFunction } from '@/ProChat/hooks/useRefFunction';
-import { gLocaleObject } from '@/locale';
 import { renderActions } from './Actions';
 import { renderMessagesExtra } from './Extras';
 import { renderMessages } from './Messages';
@@ -21,7 +21,7 @@ interface ListProps extends Partial<ChatListProps> {
 const List = memo<ListProps>(
   ({ showTitle, itemShouldUpdate, chatItemRenderConfig, markdownProps }) => {
     const data = useStore(chatSelectors.currentChatsWithGuideMessage, isEqual);
-    const locale = useStore((s) => s.locale);
+    const { localeObject: localeObj } = useProChatLocale();
 
     const [
       init,
@@ -70,7 +70,6 @@ const List = memo<ListProps>(
     );
 
     const textObj = useMemo(() => {
-      const localeObj = gLocaleObject(locale);
       return {
         cancel: localeObj.cancel,
         confirm: localeObj.confirm,
diff --git a/src/ProChat/components/InputArea/ActionBar.tsx b/src/ProChat/components/InputArea/ActionBar.tsx
index c160d202..24611630 100644
--- a/src/ProChat/components/InputArea/ActionBar.tsx
+++ b/src/ProChat/components/InputArea/ActionBar.tsx
@@ -5,7 +5,7 @@ import ActionIcon from '@/ActionIcon';
 import { ConfigProvider, Popconfirm } from 'antd';
 import { Trash2 } from 'lucide-react';
 
-import { gLocaleObject } from '@/locale';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
 import { useStore } from '../../store';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -15,25 +15,26 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 export const ActionBar = ({ className }: { className?: string }) => {
-  const [clearMessage, actionsRender, flexConfig, locale] = useStore((s) => [
+  const [clearMessage, actionsRender, flexConfig] = useStore((s) => [
     s.clearMessage,
     s.actions?.render,
     s.actions?.flexConfig,
-    s.locale,
   ]);
 
+  const { localeObject } = useProChatLocale();
+
   const { styles, theme } = useStyles();
   const defaultDoms = [
     <Popconfirm
-      title={gLocaleObject(locale).clearModalTitle}
+      title={localeObject.clearModalTitle}
       okButtonProps={{ danger: true }}
-      okText={gLocaleObject(locale).clearDialogue}
+      okText={localeObject.clearDialogue}
       key={'clear'}
       onConfirm={() => {
         clearMessage();
       }}
     >
-      <ActionIcon title={gLocaleObject(locale).clearCurrentDialogue} icon={Trash2} />
+      <ActionIcon title={localeObject.clearCurrentDialogue} icon={Trash2} />
     </Popconfirm>,
   ];
 
diff --git a/src/ProChat/components/InputArea/index.tsx b/src/ProChat/components/InputArea/index.tsx
index c7b95f37..67d84f60 100644
--- a/src/ProChat/components/InputArea/index.tsx
+++ b/src/ProChat/components/InputArea/index.tsx
@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useStore } from '../../store';
 
-import { gLocaleObject } from '@/locale';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
 import { TextAreaProps } from 'antd/es/input';
 import ActionBar from './ActionBar';
 import { AutoCompleteTextArea } from './AutoCompleteTextArea';
@@ -72,27 +72,20 @@ export type ChatInputAreaProps = {
 
 export const ChatInputArea = (props: ChatInputAreaProps) => {
   const { className, onSend, inputAreaRender, inputRender, sendButtonRender } = props || {};
-  const [
-    sendMessage,
-    isLoading,
-    placeholder,
-    inputAreaProps,
-    locale,
-    clearMessage,
-    stopGenerateMessage,
-  ] = useStore((s) => [
-    s.sendMessage,
-    !!s.chatLoadingId,
-    s.placeholder,
-    s.inputAreaProps,
-    s.locale,
-    s.clearMessage,
-    s.stopGenerateMessage,
-  ]);
+  const [sendMessage, isLoading, placeholder, inputAreaProps, clearMessage, stopGenerateMessage] =
+    useStore((s) => [
+      s.sendMessage,
+      !!s.chatLoadingId,
+      s.placeholder,
+      s.inputAreaProps,
+      s.clearMessage,
+      s.stopGenerateMessage,
+    ]);
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const [message, setMessage] = useState('');
   const isChineseInput = useRef(false);
   const { styles, theme } = useStyles();
+  const { localeObject } = useProChatLocale();
 
   const send = async () => {
     if (onSend) {
@@ -126,7 +119,7 @@ export const ChatInputArea = (props: ChatInputAreaProps) => {
    */
 
   const defaultAutoCompleteTextAreaProps = {
-    placeholder: placeholder || gLocaleObject(locale).placeholder,
+    placeholder: placeholder || localeObject.placeholder,
     ...inputAreaProps,
     className: cx(styles.input, inputAreaProps?.className, `${prefixClass}-component`),
     value: message,
diff --git a/src/ProChat/container/App.tsx b/src/ProChat/container/App.tsx
index 38cdcca0..2e60040b 100644
--- a/src/ProChat/container/App.tsx
+++ b/src/ProChat/container/App.tsx
@@ -4,12 +4,11 @@ import RcResizeObserver from 'rc-resize-observer';
 import { CSSProperties, memo, useContext, useEffect, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useStore } from '@/ProChat/store';
-import { gLocaleObject } from '@/locale';
 import { ConfigProvider } from 'antd';
 import ChatList from '../components/ChatList';
 import ChatInputArea, { ChatInputAreaProps } from '../components/InputArea';
 import ChatScrollAnchor from '../components/ScrollAnchor';
+import useProChatLocale from '../hooks/useProChatLocale';
 import { useOverrideStyles } from './OverrideStyle';
 import { ProChatChatReference } from './StoreUpdater';
 import { ProChatProps } from './index';
@@ -91,7 +90,7 @@ const App = memo<ConversationProps>(
     const [isRender, setIsRender] = useState(false);
     const [height, setHeight] = useState('100%' as string | number);
     const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-    const locale = useStore((s) => s.locale);
+    const { localeObject } = useProChatLocale();
 
     useEffect(() => {
       // 保证 ref 永远存在
@@ -146,7 +145,7 @@ const App = memo<ConversationProps>(
                   bottom: 138,
                 }}
                 target={ref}
-                text={gLocaleObject(locale).backToBottom}
+                text={localeObject.backToBottom}
                 {...backToBottomConfig}
               />
             ) : null}
diff --git a/src/ProChat/container/Provider.tsx b/src/ProChat/container/Provider.tsx
index 349c7bcd..6259c668 100644
--- a/src/ProChat/container/Provider.tsx
+++ b/src/ProChat/container/Provider.tsx
@@ -21,6 +21,7 @@ export const ProChatProvider = memo<ProChatProviderProps<any>>(
     userMeta,
     assistantMeta,
     request,
+    locale,
     ...props
   }) => {
     let isWrapped = true;
@@ -37,6 +38,7 @@ export const ProChatProvider = memo<ProChatProviderProps<any>>(
           request={request}
           assistantMeta={assistantMeta}
           onChatsChange={onChatsChange}
+          locale={locale}
         />
       </>
     );
diff --git a/src/ProChat/container/StoreUpdater.tsx b/src/ProChat/container/StoreUpdater.tsx
index f20eaf78..d68cd79e 100644
--- a/src/ProChat/container/StoreUpdater.tsx
+++ b/src/ProChat/container/StoreUpdater.tsx
@@ -8,7 +8,10 @@ export type ProChatChatReference = MutableRefObject<ProChatInstance | undefined>
 
 export interface StoreUpdaterProps
   extends Partial<
-      Pick<ChatState, 'chats' | 'config' | 'init' | 'onChatsChange' | 'helloMessage' | 'request'>
+      Pick<
+        ChatState,
+        'chats' | 'config' | 'init' | 'onChatsChange' | 'helloMessage' | 'request' | 'locale'
+      >
     >,
     Pick<ChatProps, 'userMeta' | 'assistantMeta'> {
   chatRef?: ProChatChatReference;
@@ -25,6 +28,7 @@ const StoreUpdater = memo<StoreUpdaterProps>(
     helloMessage,
     chats,
     config,
+    locale,
   }) => {
     const storeApi = useStoreApi();
     const useStoreUpdater = createStoreUpdater(storeApi);
@@ -42,6 +46,7 @@ const StoreUpdater = memo<StoreUpdaterProps>(
 
     useStoreUpdater('request', request);
 
+    useStoreUpdater('locale', locale);
     const instance = useProChat();
     useImperativeHandle(chatRef, () => instance);
 
diff --git a/src/ProChat/demos/i18n.tsx b/src/ProChat/demos/i18n.tsx
new file mode 100644
index 00000000..897de007
--- /dev/null
+++ b/src/ProChat/demos/i18n.tsx
@@ -0,0 +1,26 @@
+import { ProChat, type Locale } from '@ant-design/pro-chat';
+import { Segmented } from 'antd';
+import { useTheme } from 'antd-style';
+import React from 'react';
+
+export default () => {
+  const theme = useTheme();
+  const [language, setLanguage] = React.useState<Locale>('en-US');
+  return (
+    <div style={{ background: theme.colorBgLayout }}>
+      <Segmented<Locale>
+        options={['en-US', 'zh-CN']}
+        defaultValue="en-US"
+        onChange={(v) => {
+          setLanguage(v);
+        }}
+      />
+      <ProChat
+        locale={language}
+        request={async () => {
+          return new Response('this is mock data');
+        }}
+      />
+    </div>
+  );
+};
diff --git a/src/ProChat/hooks/useProChatLocale.ts b/src/ProChat/hooks/useProChatLocale.ts
new file mode 100644
index 00000000..f5a5d2ed
--- /dev/null
+++ b/src/ProChat/hooks/useProChatLocale.ts
@@ -0,0 +1,18 @@
+import { Locale, gLocaleObject } from '@/locale';
+import { useMemo } from 'react';
+import { useStore } from '../store';
+
+const useProChatLocale = () => {
+  const locale = useStore((s) => s.locale);
+
+  const localeObject = useMemo(() => {
+    return gLocaleObject(locale as Locale);
+  }, [locale]);
+
+  return {
+    locale,
+    localeObject,
+  };
+};
+
+export default useProChatLocale;
diff --git a/src/ProChat/index.en-US.md b/src/ProChat/index.en-US.md
index ccb91248..1fa78fb1 100644
--- a/src/ProChat/index.en-US.md
+++ b/src/ProChat/index.en-US.md
@@ -118,6 +118,10 @@ All initialization props such as `initialChats` need to be moved from `ProChat`
 
 :::
 
+## International
+
+<code src="./demos/i18n.tsx"></code>
+
 ## APIs
 
 | Parameter | description | type | default |
diff --git a/src/ProChat/index.md b/src/ProChat/index.md
index 64b26b6d..4d20f4ae 100644
--- a/src/ProChat/index.md
+++ b/src/ProChat/index.md
@@ -118,6 +118,10 @@ useProChat hooks 必须在包裹 `ProChatProvider` 后方可使用。
 
 :::
 
+## 国际化
+
+<code src="./demos/i18n.tsx"></code>
+
 ## APIs
 
 | 参数 | 说明 | 类型 | 默认值 |
diff --git a/src/ProChat/index.tsx b/src/ProChat/index.tsx
index 3afffbda..803ca80c 100644
--- a/src/ProChat/index.tsx
+++ b/src/ProChat/index.tsx
@@ -1,5 +1,6 @@
 export * from '../types/message';
 
+export { type Locale } from '../locale';
 export { ProChat } from './container';
 export { ProChatProvider } from './container/Provider';
 export { useProChat, type ProChatInstance } from './hooks/useProChat';
diff --git a/src/ProChat/store/selectors/chat.ts b/src/ProChat/store/selectors/chat.ts
index c1dc7308..f250c1e0 100644
--- a/src/ProChat/store/selectors/chat.ts
+++ b/src/ProChat/store/selectors/chat.ts
@@ -75,9 +75,7 @@ export const currentChats = (s: ChatStore): ChatMessage[] => {
 export const currentChatsWithGuideMessage = (s: ChatStore): ChatMessage[] => {
   const data = currentChats(s);
   // TODO: need topic inject
-
   const isBrandNewChat = data.length === 0;
-
   if (!isBrandNewChat) return data;
 
   const emptyInboxGuideMessage = {
diff --git a/src/locale/index.ts b/src/locale/index.ts
index a8b9526f..30a5c9f2 100644
--- a/src/locale/index.ts
+++ b/src/locale/index.ts
@@ -6,6 +6,7 @@ export type Locale = 'zh-CN' | 'en-US';
 const locales = {
   'en-US': enUSLocal,
   'zh-CN': zhCNLocal,
+  en: enUSLocal,
 };
 
 export const gLocaleObject = (glocale: Locale): LocaleProps => {