From 28c02ecaf4668fc85b509ac96b1c050e913ebdb9 Mon Sep 17 00:00:00 2001
From: LofiSu <linsu269@gmail.com>
Date: Sat, 18 Jan 2025 17:27:57 +0800
Subject: [PATCH 1/2] Fix: Resolve dual scrollbar issue and flickering on
 initial load

---
 components/conversations/demo/infinite-load.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/conversations/demo/infinite-load.tsx b/components/conversations/demo/infinite-load.tsx
index bea56ed7..f08a37b8 100644
--- a/components/conversations/demo/infinite-load.tsx
+++ b/components/conversations/demo/infinite-load.tsx
@@ -16,7 +16,7 @@ const App: React.FC = () => {
     height: 600,
     background: token.colorBgContainer,
     borderRadius: token.borderRadius,
-    overflow: 'scroll',
+    overflow: 'auto',
   };
 
   const loadMoreData = () => {
@@ -59,6 +59,7 @@ const App: React.FC = () => {
         }
         endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
         scrollableTarget="scrollableDiv"
+        style={{ overflow: 'hidden' }}
       >
         <Conversations items={data} defaultActiveKey="demo1" groupable />
       </InfiniteScroll>

From 492191f5fdc12d34717cd1043504fb8fc9313f3f Mon Sep 17 00:00:00 2001
From: LofiSu <163713803+LofiSu@users.noreply.github.com>
Date: Thu, 23 Jan 2025 06:11:38 +0000
Subject: [PATCH 2/2] fix: add snapshot

---
 .../__snapshots__/demo-extend.test.ts.snap    |   9 +-
 .../__snapshots__/demo.test.tsx.snap          |  11 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  92 +++++++-------
 .../__tests__/__snapshots__/demo.test.ts.snap |  92 +++++++-------
 .../__snapshots__/demo-extend.test.ts.snap    |   4 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   4 +-
 .../__snapshots__/index.test.tsx.snap         | 118 +++++++++---------
 .../__snapshots__/demo-extend.test.ts.snap    |   3 +
 .../__tests__/__snapshots__/demo.test.ts.snap |   3 +
 9 files changed, 172 insertions(+), 164 deletions(-)

diff --git a/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0e2bf99e..c332827d 100644
--- a/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -747,8 +747,9 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
     <div
       aria-label="segmented control"
       class="ant-segmented"
-      role="listbox"
+      role="radiogroup"
       style="margin-inline-end: auto;"
+      tabindex="0"
     >
       <div
         class="ant-segmented-group"
@@ -759,12 +760,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
           <input
             checked=""
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="true"
             class="ant-segmented-item-label"
-            role="option"
             title="Wrap"
           >
             Wrap
@@ -775,12 +776,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Scroll X"
           >
             Scroll X
@@ -791,12 +792,12 @@ exports[`renders components/attachments/demo/overflow.tsx extend context correct
         >
           <input
             class="ant-segmented-item-input"
+            name="test-id"
             type="radio"
           />
           <div
             aria-selected="false"
             class="ant-segmented-item-label"
-            role="option"
             title="Scroll Y"
           >
             Scroll Y
diff --git a/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap b/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
index fcd30dba..926721f2 100644
--- a/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/attachments/__tests__/__snapshots__/demo.test.tsx.snap
@@ -677,8 +677,9 @@ Array [
       <div
         aria-label="segmented control"
         class="ant-segmented"
-        role="listbox"
+        role="radiogroup"
         style="margin-inline-end:auto"
+        tabindex="0"
       >
         <div
           class="ant-segmented-group"
@@ -689,12 +690,12 @@ Array [
             <input
               checked=""
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="true"
               class="ant-segmented-item-label"
-              role="option"
               title="Wrap"
             >
               Wrap
@@ -705,12 +706,12 @@ Array [
           >
             <input
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="false"
               class="ant-segmented-item-label"
-              role="option"
               title="Scroll X"
             >
               Scroll X
@@ -721,12 +722,12 @@ Array [
           >
             <input
               class="ant-segmented-item-input"
+              name="test-id"
               type="radio"
             />
             <div
               aria-selected="false"
               class="ant-segmented-item-label"
-              role="option"
               title="Scroll Y"
             >
               Scroll Y
@@ -1905,7 +1906,7 @@ Array [
 exports[`renders components/attachments/demo/placeholder.tsx correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
-  style="padding:16px;background:rgba(0, 0, 0, 0.04)"
+  style="padding:16px;background:rgba(0,0,0,0.04)"
 >
   <div
     style="border-radius:6px;overflow:hidden;background:#ffffff"
diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9b97babf..04321d8e 100644
--- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -442,7 +442,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
     >
       <div
-        class="acss-8wqn66"
+        class="acss-xvmduq"
       >
         block block block block block block block block block block block block block block block block block block block block block block block block block
       </div>
@@ -455,7 +455,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-shadow"
     >
       <div
-        class="acss-13qb3y4"
+        class="acss-56hdzn"
       >
         fixed width content
       </div>
@@ -496,7 +496,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
     >
       <div
-        class="acss-8wqn66"
+        class="acss-xvmduq"
       >
         block block block block block block block block block block block block block block block block block block block block block block block block block
       </div>
@@ -509,7 +509,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content ant-bubble-content-shadow"
     >
       <div
-        class="acss-13qb3y4"
+        class="acss-56hdzn"
       >
         fixed width content
       </div>
@@ -529,7 +529,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -543,7 +543,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -553,7 +553,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         string bubble
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -565,7 +565,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -579,7 +579,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -589,7 +589,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -601,7 +601,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -615,7 +615,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -623,13 +623,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -641,7 +641,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-start"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -655,7 +655,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -663,13 +663,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -691,7 +691,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -705,7 +705,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -715,7 +715,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         string bubble
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -727,7 +727,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -741,7 +741,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -751,7 +751,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -763,7 +763,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -777,7 +777,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -785,13 +785,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -803,7 +803,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
     class="ant-bubble ant-bubble-end"
   >
     <div
-      class="ant-bubble-avatar acss-8wqn66"
+      class="ant-bubble-avatar acss-xvmduq"
     >
       <span
         class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -817,7 +817,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble-content-wrapper"
     >
       <div
-        class="ant-bubble-header acss-8wqn66"
+        class="ant-bubble-header acss-xvmduq"
       >
         header
       </div>
@@ -825,13 +825,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
       </div>
       <div
-        class="ant-bubble-footer acss-8wqn66"
+        class="ant-bubble-footer acss-xvmduq"
       >
         <div>
           footer
@@ -856,7 +856,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -870,7 +870,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -880,7 +880,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           string bubble
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -892,7 +892,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -906,7 +906,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -916,7 +916,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -928,7 +928,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -942,7 +942,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -950,13 +950,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
         >
           <div
-            class="acss-8wqn66"
+            class="acss-xvmduq"
           >
             block block block block block block block block block block block block block block block block block block block block block block block block block
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -968,7 +968,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -982,7 +982,7 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -990,13 +990,13 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
           class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
         >
           <div
-            class="acss-13qb3y4"
+            class="acss-56hdzn"
           >
             fixed width content
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
diff --git a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
index 28f3ea13..823f6ed3 100644
--- a/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/bubble/__tests__/__snapshots__/demo.test.ts.snap
@@ -442,7 +442,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
@@ -455,7 +455,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-shadow"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
@@ -496,7 +496,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round"
       >
         <div
-          class="acss-8wqn66"
+          class="acss-xvmduq"
         >
           block block block block block block block block block block block block block block block block block block block block block block block block block
         </div>
@@ -509,7 +509,7 @@ Array [
         class="ant-bubble-content ant-bubble-content-shadow"
       >
         <div
-          class="acss-13qb3y4"
+          class="acss-56hdzn"
         >
           fixed width content
         </div>
@@ -529,7 +529,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -543,7 +543,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -553,7 +553,7 @@ Array [
           string bubble
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -565,7 +565,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -579,7 +579,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -589,7 +589,7 @@ Array [
           longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -601,7 +601,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -615,7 +615,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -623,13 +623,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
         >
           <div
-            class="acss-8wqn66"
+            class="acss-xvmduq"
           >
             block block block block block block block block block block block block block block block block block block block block block block block block block
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -641,7 +641,7 @@ Array [
       class="ant-bubble ant-bubble-start"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -655,7 +655,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -663,13 +663,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
         >
           <div
-            class="acss-13qb3y4"
+            class="acss-56hdzn"
           >
             fixed width content
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -691,7 +691,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -705,7 +705,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -715,7 +715,7 @@ Array [
           string bubble
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -727,7 +727,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -741,7 +741,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -751,7 +751,7 @@ Array [
           longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -763,7 +763,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -777,7 +777,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -785,13 +785,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
         >
           <div
-            class="acss-8wqn66"
+            class="acss-xvmduq"
           >
             block block block block block block block block block block block block block block block block block block block block block block block block block
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -803,7 +803,7 @@ Array [
       class="ant-bubble ant-bubble-end"
     >
       <div
-        class="ant-bubble-avatar acss-8wqn66"
+        class="ant-bubble-avatar acss-xvmduq"
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -817,7 +817,7 @@ Array [
         class="ant-bubble-content-wrapper"
       >
         <div
-          class="ant-bubble-header acss-8wqn66"
+          class="ant-bubble-header acss-xvmduq"
         >
           header
         </div>
@@ -825,13 +825,13 @@ Array [
           class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
         >
           <div
-            class="acss-13qb3y4"
+            class="acss-56hdzn"
           >
             fixed width content
           </div>
         </div>
         <div
-          class="ant-bubble-footer acss-8wqn66"
+          class="ant-bubble-footer acss-xvmduq"
         >
           <div>
             footer
@@ -856,7 +856,7 @@ Array [
         class="ant-bubble ant-bubble-start"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -870,7 +870,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -880,7 +880,7 @@ Array [
             string bubble
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
@@ -892,7 +892,7 @@ Array [
         class="ant-bubble ant-bubble-end"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -906,7 +906,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -916,7 +916,7 @@ Array [
             longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
@@ -928,7 +928,7 @@ Array [
         class="ant-bubble ant-bubble-start"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -942,7 +942,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -950,13 +950,13 @@ Array [
             class="ant-bubble-content ant-bubble-content-outlined ant-bubble-content-round acss-c2h5kd"
           >
             <div
-              class="acss-8wqn66"
+              class="acss-xvmduq"
             >
               block block block block block block block block block block block block block block block block block block block block block block block block block
             </div>
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
@@ -968,7 +968,7 @@ Array [
         class="ant-bubble ant-bubble-end"
       >
         <div
-          class="ant-bubble-avatar acss-8wqn66"
+          class="ant-bubble-avatar acss-xvmduq"
         >
           <span
             class="ant-avatar ant-avatar-circle ant-avatar-image"
@@ -982,7 +982,7 @@ Array [
           class="ant-bubble-content-wrapper"
         >
           <div
-            class="ant-bubble-header acss-8wqn66"
+            class="ant-bubble-header acss-xvmduq"
           >
             header
           </div>
@@ -990,13 +990,13 @@ Array [
             class="ant-bubble-content ant-bubble-content-shadow acss-c2h5kd"
           >
             <div
-              class="acss-13qb3y4"
+              class="acss-56hdzn"
             >
               fixed width content
             </div>
           </div>
           <div
-            class="ant-bubble-footer acss-8wqn66"
+            class="ant-bubble-footer acss-xvmduq"
           >
             <div>
               footer
diff --git a/components/conversations/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/conversations/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7fa97b5c..a1ee5967 100644
--- a/components/conversations/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/conversations/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -704,14 +704,14 @@ exports[`renders components/conversations/demo/group-sort.tsx extend context cor
 exports[`renders components/conversations/demo/infinite-load.tsx extend context correctly 1`] = `
 <div
   id="scrollableDiv"
-  style="width: 280px; height: 600px; background: #ffffff; border-radius: 6px; overflow: scroll;"
+  style="width: 280px; height: 600px; background: #ffffff; border-radius: 6px; overflow: auto;"
 >
   <div
     class="infinite-scroll-component__outerdiv"
   >
     <div
       class="infinite-scroll-component "
-      style="height: auto; overflow: auto;"
+      style="height: auto; overflow: hidden;"
     >
       <ul
         class="ant-conversations"
diff --git a/components/conversations/__tests__/__snapshots__/demo.test.ts.snap b/components/conversations/__tests__/__snapshots__/demo.test.ts.snap
index c013023a..ec13401a 100644
--- a/components/conversations/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/conversations/__tests__/__snapshots__/demo.test.ts.snap
@@ -356,14 +356,14 @@ exports[`renders components/conversations/demo/group-sort.tsx correctly 1`] = `
 exports[`renders components/conversations/demo/infinite-load.tsx correctly 1`] = `
 <div
   id="scrollableDiv"
-  style="width:280px;height:600px;background:#ffffff;border-radius:6px;overflow:scroll"
+  style="width:280px;height:600px;background:#ffffff;border-radius:6px;overflow:auto"
 >
   <div
     class="infinite-scroll-component__outerdiv"
   >
     <div
       class="infinite-scroll-component "
-      style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
+      style="height:auto;overflow:hidden;-webkit-overflow-scrolling:touch"
     >
       <ul
         class="ant-conversations"
diff --git a/components/sender/__tests__/__snapshots__/index.test.tsx.snap b/components/sender/__tests__/__snapshots__/index.test.tsx.snap
index 01890f12..0e0ad0ee 100644
--- a/components/sender/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/sender/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,77 +3,77 @@
 exports[`Sender Component loading state 1`] = `
 <DocumentFragment>
   <div
-  class="ant-sender"
->
-  <div
-    class="ant-sender-content"
+    class="ant-sender"
   >
-    <textarea
-      class="ant-input ant-input-borderless ant-sender-input"
-      style="overflow-y: hidden; resize: none;"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless ant-sender-input"
+        style="overflow-y: hidden; resize: none;"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex"
+        class="ant-sender-actions-list"
       >
-        <button
-          class="ant-btn ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex"
         >
-          <svg
-            class="ant-sender-actions-btn-loading-icon"
-            color="currentColor"
-            viewBox="0 0 1000 1000"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
+          <button
+            class="ant-btn ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+            type="button"
           >
-            <title>
-              Stop Loading
-            </title>
-            <rect
-              fill="currentColor"
-              height="250"
-              rx="24"
-              ry="24"
-              width="250"
-              x="375"
-              y="375"
-            />
-            <circle
-              cx="500"
-              cy="500"
-              fill="none"
-              opacity="0.45"
-              r="450"
-              stroke="currentColor"
-              stroke-width="100"
-            />
-            <circle
-              cx="500"
-              cy="500"
-              fill="none"
-              r="450"
-              stroke="currentColor"
-              stroke-dasharray="600 9999999"
-              stroke-width="100"
+            <svg
+              class="ant-sender-actions-btn-loading-icon"
+              color="currentColor"
+              viewBox="0 0 1000 1000"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
             >
-              <animatetransform
-                attributeName="transform"
-                dur="1s"
-                from="0 500 500"
-                repeatCount="indefinite"
-                to="360 500 500"
-                type="rotate"
+              <title>
+                Stop Loading
+              </title>
+              <rect
+                fill="currentColor"
+                height="250"
+                rx="24"
+                ry="24"
+                width="250"
+                x="375"
+                y="375"
               />
-            </circle>
-          </svg>
-        </button>
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                opacity="0.45"
+                r="450"
+                stroke="currentColor"
+                stroke-width="100"
+              />
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                r="450"
+                stroke="currentColor"
+                stroke-dasharray="600 9999999"
+                stroke-width="100"
+              >
+                <animatetransform
+                  attributeName="transform"
+                  dur="1s"
+                  from="0 500 500"
+                  repeatCount="indefinite"
+                  to="360 500 500"
+                  type="rotate"
+                />
+              </circle>
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
 </DocumentFragment>
 `;
 
diff --git a/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap
index a418bb4d..7d89de63 100644
--- a/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1403,6 +1403,7 @@ exports[`renders components/thought-chain/demo/size.tsx extend context correctly
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="large"
           />
@@ -1423,6 +1424,7 @@ exports[`renders components/thought-chain/demo/size.tsx extend context correctly
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="middle"
           />
@@ -1442,6 +1444,7 @@ exports[`renders components/thought-chain/demo/size.tsx extend context correctly
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="small"
           />
diff --git a/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap b/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap
index 7d477a51..a1486f4e 100644
--- a/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/thought-chain/__tests__/__snapshots__/demo.test.ts.snap
@@ -980,6 +980,7 @@ exports[`renders components/thought-chain/demo/size.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="large"
           />
@@ -1000,6 +1001,7 @@ exports[`renders components/thought-chain/demo/size.tsx correctly 1`] = `
           <input
             checked=""
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="middle"
           />
@@ -1019,6 +1021,7 @@ exports[`renders components/thought-chain/demo/size.tsx correctly 1`] = `
         >
           <input
             class="ant-radio-button-input"
+            name="test-id"
             type="radio"
             value="small"
           />