diff --git a/packages/x/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap b/packages/x/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
index 72bf19ddad..922ec42028 100644
--- a/packages/x/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/packages/x/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_2p_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  class="ant-flex css-var-_r_3b_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
 >
   <div
-    class="ant-sender css-var-_r_2p_ ant-sender-main"
+    class="ant-sender css-var-_r_3b_ ant-sender-main"
   >
     <div
       class="ant-sender-content"
@@ -112,11 +112,11 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </span>
           </span>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2p_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_3b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2p_ ant-dropdown-css-var css-var-_r_2p_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_3b_ ant-dropdown-css-var css-var-_r_3b_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -135,7 +135,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -166,7 +166,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -197,7 +197,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -255,13 +255,13 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
       class="ant-sender-footer"
     >
       <div
-        class="ant-flex css-var-_r_2p_ ant-flex-align-center ant-flex-justify-space-between"
+        class="ant-flex css-var-_r_3b_ ant-flex-align-center ant-flex-justify-space-between"
       >
         <div
-          class="ant-flex css-var-_r_2p_ ant-flex-align-center ant-flex-gap-small"
+          class="ant-flex css-var-_r_3b_ ant-flex-align-center ant-flex-gap-small"
         >
           <button
-            class="ant-btn css-var-_r_2p_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_3b_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             style="font-size: 16px;"
             type="button"
           >
@@ -290,10 +290,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </span>
           </button>
           <div
-            class="ant-sender ant-sender-switch css-var-_r_2p_ ant-sender-switch-checked"
+            class="ant-sender ant-sender-switch css-var-_r_3b_ ant-sender-switch-checked"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-default ant-btn-color-primary ant-btn-variant-outlined ant-sender-switch-content"
+              class="ant-btn css-var-_r_3b_ ant-btn-default ant-btn-color-primary ant-btn-variant-outlined ant-sender-switch-content"
               type="button"
             >
               <span
@@ -331,10 +331,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </button>
           </div>
           <div
-            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_2p_"
+            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_3b_"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
+              class="ant-btn css-var-_r_3b_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
               type="button"
             >
               <span
@@ -368,11 +368,11 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </button>
           </div>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2p_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_3b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2p_ ant-dropdown-css-var css-var-_r_2p_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_3b_ ant-dropdown-css-var css-var-_r_3b_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -410,7 +410,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -460,7 +460,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -510,7 +510,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -534,10 +534,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             />
           </div>
           <div
-            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_2p_"
+            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_3b_"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
+              class="ant-btn css-var-_r_3b_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
               type="button"
             >
               <span
@@ -571,11 +571,11 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </button>
           </div>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2p_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_3b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2p_ ant-dropdown-css-var css-var-_r_2p_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_3b_ ant-dropdown-css-var css-var-_r_3b_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -613,7 +613,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -638,10 +638,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
           </div>
         </div>
         <div
-          class="ant-flex css-var-_r_2p_ ant-flex-align-center"
+          class="ant-flex css-var-_r_3b_ ant-flex-align-center"
         >
           <button
-            class="ant-btn css-var-_r_2p_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_3b_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             style="font-size: 16px;"
             type="button"
           >
@@ -670,14 +670,14 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </span>
           </button>
           <div
-            class="ant-divider css-var-_r_2p_ ant-divider-vertical ant-divider-rail"
+            class="ant-divider css-var-_r_3b_ ant-divider-vertical ant-divider-rail"
             role="separator"
           />
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_2p_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_3b_"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+              class="ant-btn css-var-_r_3b_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
               type="button"
             >
               <span
@@ -710,7 +710,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
     </div>
   </div>
   <div
-    class="ant-sender css-var-_r_2p_ ant-sender-main"
+    class="ant-sender css-var-_r_3b_ ant-sender-main"
   >
     <div
       class="ant-sender-content"
@@ -817,11 +817,11 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </span>
           </span>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2p_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_3b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2p_ ant-dropdown-css-var css-var-_r_2p_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_3b_ ant-dropdown-css-var css-var-_r_3b_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -840,7 +840,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -871,7 +871,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -902,7 +902,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -960,13 +960,13 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
       class="ant-sender-footer"
     >
       <div
-        class="ant-flex css-var-_r_2p_ ant-flex-align-center ant-flex-justify-space-between"
+        class="ant-flex css-var-_r_3b_ ant-flex-align-center ant-flex-justify-space-between"
       >
         <div
-          class="ant-flex css-var-_r_2p_ ant-flex-align-center ant-flex-gap-small"
+          class="ant-flex css-var-_r_3b_ ant-flex-align-center ant-flex-gap-small"
         >
           <button
-            class="ant-btn css-var-_r_2p_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_3b_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             style="font-size: 16px;"
             type="button"
           >
@@ -995,10 +995,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </span>
           </button>
           <div
-            class="ant-sender ant-sender-switch css-var-_r_2p_ ant-sender-switch-checked"
+            class="ant-sender ant-sender-switch css-var-_r_3b_ ant-sender-switch-checked"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-default ant-btn-color-primary ant-btn-variant-outlined ant-sender-switch-content"
+              class="ant-btn css-var-_r_3b_ ant-btn-default ant-btn-color-primary ant-btn-variant-outlined ant-sender-switch-content"
               type="button"
             >
               <span
@@ -1038,10 +1038,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </button>
           </div>
           <div
-            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_2p_"
+            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_3b_"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
+              class="ant-btn css-var-_r_3b_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
               type="button"
             >
               <span
@@ -1075,11 +1075,11 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </button>
           </div>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2p_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_3b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2p_ ant-dropdown-css-var css-var-_r_2p_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_3b_ ant-dropdown-css-var css-var-_r_3b_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -1117,7 +1117,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -1167,7 +1167,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -1217,7 +1217,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -1241,10 +1241,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             />
           </div>
           <div
-            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_2p_"
+            class="ant-sender ant-sender-switch ant-dropdown-trigger css-var-_r_3b_"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
+              class="ant-btn css-var-_r_3b_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-sender-switch-content"
               type="button"
             >
               <span
@@ -1278,11 +1278,11 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </button>
           </div>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2p_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_3b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2p_ ant-dropdown-css-var css-var-_r_2p_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_3b_ ant-dropdown-css-var css-var-_r_3b_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -1320,7 +1320,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2p_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_3b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -1345,10 +1345,10 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
           </div>
         </div>
         <div
-          class="ant-flex css-var-_r_2p_ ant-flex-align-center"
+          class="ant-flex css-var-_r_3b_ ant-flex-align-center"
         >
           <button
-            class="ant-btn css-var-_r_2p_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_3b_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             style="font-size: 16px;"
             type="button"
           >
@@ -1377,14 +1377,14 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
             </span>
           </button>
           <div
-            class="ant-divider css-var-_r_2p_ ant-divider-vertical ant-divider-rail"
+            class="ant-divider css-var-_r_3b_ ant-divider-vertical ant-divider-rail"
             role="separator"
           />
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_2p_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_3b_"
           >
             <button
-              class="ant-btn css-var-_r_2p_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+              class="ant-btn css-var-_r_3b_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
               type="button"
             >
               <span
@@ -1423,19 +1423,19 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 2`] =
 
 exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-_r_2l_"
+  class="ant-app css-var-_r_37_"
 >
   <div
-    class="ant-flex css-var-_r_2l_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+    class="ant-flex css-var-_r_37_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   >
     <div
-      class="ant-sender css-var-_r_2l_ ant-sender-main"
+      class="ant-sender css-var-_r_37_ ant-sender-main"
     >
       <div
         class="ant-sender-content"
       >
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_2l_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_37_ ant-input-css-var ant-sender-input"
           style="overflow-y: hidden; resize: none;"
         >
           Hello? this is X!
@@ -1444,10 +1444,10 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
           class="ant-sender-actions-list"
         >
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_2l_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_37_"
           >
             <button
-              class="ant-btn css-var-_r_2l_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+              class="ant-btn css-var-_r_37_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
               type="button"
             >
               <span
@@ -1479,13 +1479,13 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
       </div>
     </div>
     <div
-      class="ant-sender css-var-_r_2l_ ant-sender-main"
+      class="ant-sender css-var-_r_37_ ant-sender-main"
     >
       <div
         class="ant-sender-content"
       >
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_2l_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_37_ ant-input-css-var ant-sender-input"
           readonly=""
           style="resize: none;"
         >
@@ -1495,10 +1495,10 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
           class="ant-sender-actions-list"
         >
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_2l_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_37_"
           >
             <button
-              class="ant-btn css-var-_r_2l_ ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+              class="ant-btn css-var-_r_37_ ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-loading-button"
               type="button"
             >
               <span
@@ -1557,13 +1557,13 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
       </div>
     </div>
     <div
-      class="ant-sender css-var-_r_2l_ ant-sender-main ant-sender-disabled"
+      class="ant-sender css-var-_r_37_ ant-sender-main ant-sender-disabled"
     >
       <div
         class="ant-sender-content"
       >
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_2l_ ant-input-css-var ant-sender-input ant-input-disabled"
+          class="ant-input ant-input-borderless css-var-_r_37_ ant-input-css-var ant-sender-input ant-input-disabled"
           disabled=""
           style="overflow-y: hidden; resize: none;"
         >
@@ -1573,10 +1573,10 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
           class="ant-sender-actions-list"
         >
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_2l_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_37_"
           >
             <button
-              class="ant-btn css-var-_r_2l_ ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              class="ant-btn css-var-_r_37_ ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
               disabled=""
               type="button"
             >
@@ -1608,7 +1608,7 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
               </span>
             </button>
             <button
-              class="ant-btn css-var-_r_2l_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              class="ant-btn css-var-_r_37_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
               disabled=""
               type="button"
             >
@@ -1648,11 +1648,11 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 2`] =
 
 exports[`renders components/sender/demo/disable-ctrl.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_29_ ant-flex-align-end"
+  class="ant-flex css-var-_r_2r_ ant-flex-align-end"
   style="height: 350px;"
 >
   <div
-    class="ant-sender css-var-_r_29_ ant-sender-main"
+    class="ant-sender css-var-_r_2r_ ant-sender-main"
   >
     <div
       class="ant-sender-content"
@@ -1661,10 +1661,10 @@ exports[`renders components/sender/demo/disable-ctrl.tsx extend context correctl
         class="ant-sender-prefix"
       >
         <span
-          class="ant-badge css-var-_r_29_"
+          class="ant-badge css-var-_r_2r_"
         >
           <button
-            class="ant-btn css-var-_r_29_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_2r_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             type="button"
           >
             <span
@@ -1695,7 +1695,7 @@ exports[`renders components/sender/demo/disable-ctrl.tsx extend context correctl
         </span>
       </div>
       <textarea
-        class="ant-input ant-input-borderless css-var-_r_29_ ant-input-css-var ant-sender-input"
+        class="ant-input ant-input-borderless css-var-_r_2r_ ant-input-css-var ant-sender-input"
         placeholder="Enter to send message"
         style="overflow-y: hidden; resize: none;"
       />
@@ -1703,7 +1703,7 @@ exports[`renders components/sender/demo/disable-ctrl.tsx extend context correctl
         class="ant-sender-actions-list"
       >
         <button
-          class="ant-btn css-var-_r_29_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+          class="ant-btn css-var-_r_2r_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
           disabled=""
           type="button"
         >
@@ -1741,11 +1741,11 @@ exports[`renders components/sender/demo/disable-ctrl.tsx extend context correctl
 
 exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_2b_ ant-flex-align-end"
+  class="ant-flex css-var-_r_2t_ ant-flex-align-end"
   style="height: 350px;"
 >
   <div
-    class="ant-sender css-var-_r_2b_ ant-sender-main"
+    class="ant-sender css-var-_r_2t_ ant-sender-main"
   >
     <div
       class="ant-sender-content"
@@ -1754,10 +1754,10 @@ exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context cor
         class="ant-sender-prefix"
       >
         <span
-          class="ant-badge css-var-_r_2b_"
+          class="ant-badge css-var-_r_2t_"
         >
           <button
-            class="ant-btn css-var-_r_2b_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_2t_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             type="button"
           >
             <span
@@ -1835,11 +1835,11 @@ exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context cor
             </span>
           </span>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_2t_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2b_ ant-dropdown-css-var css-var-_r_2b_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_2t_ ant-dropdown-css-var css-var-_r_2t_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -1858,7 +1858,7 @@ exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context cor
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2t_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -1889,7 +1889,7 @@ exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context cor
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2t_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -1920,7 +1920,7 @@ exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context cor
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_2t_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -1953,7 +1953,7 @@ exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context cor
         class="ant-sender-actions-list"
       >
         <button
-          class="ant-btn css-var-_r_2b_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+          class="ant-btn css-var-_r_2t_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
           type="button"
         >
           <span
@@ -1990,13 +1990,13 @@ exports[`renders components/sender/demo/disable-ctrl-slot.tsx extend context cor
 
 exports[`renders components/sender/demo/footer.tsx extend context correctly 1`] = `
 <div
-  class="ant-sender css-var-_r_27_ ant-sender-main"
+  class="ant-sender css-var-_r_2p_ ant-sender-main"
 >
   <div
     class="ant-sender-content"
   >
     <textarea
-      class="ant-input ant-input-borderless css-var-_r_27_ ant-input-css-var ant-sender-input"
+      class="ant-input ant-input-borderless css-var-_r_2p_ ant-input-css-var ant-sender-input"
       placeholder="Press Enter to send message"
       style="overflow-y: hidden; resize: none;"
     />
@@ -2005,13 +2005,13 @@ exports[`renders components/sender/demo/footer.tsx extend context correctly 1`]
     class="ant-sender-footer"
   >
     <div
-      class="ant-flex css-var-_r_27_ ant-flex-align-center ant-flex-justify-space-between"
+      class="ant-flex css-var-_r_2p_ ant-flex-align-center ant-flex-justify-space-between"
     >
       <div
-        class="ant-flex css-var-_r_27_ ant-flex-align-center ant-flex-gap-small"
+        class="ant-flex css-var-_r_2p_ ant-flex-align-center ant-flex-gap-small"
       >
         <button
-          class="ant-btn css-var-_r_27_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+          class="ant-btn css-var-_r_2p_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
           style="font-size: 18px; color: rgba(0, 0, 0, 0.88);"
           type="button"
         >
@@ -2040,13 +2040,13 @@ exports[`renders components/sender/demo/footer.tsx extend context correctly 1`]
           </span>
         </button>
         <div
-          class="ant-divider css-var-_r_27_ ant-divider-vertical ant-divider-rail"
+          class="ant-divider css-var-_r_2p_ ant-divider-vertical ant-divider-rail"
           role="separator"
         />
         Deep Thinking
         <button
           aria-checked="false"
-          class="ant-switch ant-switch-small css-var-_r_27_"
+          class="ant-switch ant-switch-small css-var-_r_2p_"
           role="switch"
           type="button"
         >
@@ -2065,11 +2065,11 @@ exports[`renders components/sender/demo/footer.tsx extend context correctly 1`]
           </span>
         </button>
         <div
-          class="ant-divider css-var-_r_27_ ant-divider-vertical ant-divider-rail"
+          class="ant-divider css-var-_r_2p_ ant-divider-vertical ant-divider-rail"
           role="separator"
         />
         <button
-          class="ant-btn css-var-_r_27_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+          class="ant-btn css-var-_r_2p_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
           type="button"
         >
           <span
@@ -2101,10 +2101,10 @@ exports[`renders components/sender/demo/footer.tsx extend context correctly 1`]
         </button>
       </div>
       <div
-        class="ant-flex css-var-_r_27_ ant-flex-align-center"
+        class="ant-flex css-var-_r_2p_ ant-flex-align-center"
       >
         <button
-          class="ant-btn css-var-_r_27_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+          class="ant-btn css-var-_r_2p_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
           style="font-size: 18px; color: rgba(0, 0, 0, 0.88);"
           type="button"
         >
@@ -2133,11 +2133,11 @@ exports[`renders components/sender/demo/footer.tsx extend context correctly 1`]
           </span>
         </button>
         <div
-          class="ant-divider css-var-_r_27_ ant-divider-vertical ant-divider-rail"
+          class="ant-divider css-var-_r_2p_ ant-divider-vertical ant-divider-rail"
           role="separator"
         />
         <button
-          class="ant-btn css-var-_r_27_ ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+          class="ant-btn css-var-_r_2p_ ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
           disabled=""
           style="font-size: 18px; color: rgba(0, 0, 0, 0.88);"
           type="button"
@@ -2170,11 +2170,11 @@ exports[`renders components/sender/demo/footer.tsx extend context correctly 1`]
           </span>
         </button>
         <div
-          class="ant-divider css-var-_r_27_ ant-divider-vertical ant-divider-rail"
+          class="ant-divider css-var-_r_2p_ ant-divider-vertical ant-divider-rail"
           role="separator"
         />
         <button
-          class="ant-btn css-var-_r_27_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+          class="ant-btn css-var-_r_2p_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
           type="button"
         >
           <span
@@ -2211,14 +2211,14 @@ exports[`renders components/sender/demo/footer.tsx extend context correctly 2`]
 
 exports[`renders components/sender/demo/header.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-_r_23_"
+  class="ant-app css-var-_r_2l_"
 >
   <div
-    class="ant-flex css-var-_r_23_ ant-flex-align-end"
+    class="ant-flex css-var-_r_2l_ ant-flex-align-end"
     style="height: 350px;"
   >
     <div
-      class="ant-sender css-var-_r_23_ ant-sender-main"
+      class="ant-sender css-var-_r_2l_ ant-sender-main"
     >
       <div
         class="ant-sender-content"
@@ -2227,7 +2227,7 @@ exports[`renders components/sender/demo/header.tsx extend context correctly 1`]
           class="ant-sender-prefix"
         >
           <button
-            class="ant-btn css-var-_r_23_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_2l_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             style="font-size: 16px;"
             type="button"
           >
@@ -2257,7 +2257,7 @@ exports[`renders components/sender/demo/header.tsx extend context correctly 1`]
           </button>
         </div>
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_23_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_2l_ ant-input-css-var ant-sender-input"
           placeholder="← Click to open"
           style="overflow-y: hidden; resize: none;"
         />
@@ -2265,10 +2265,10 @@ exports[`renders components/sender/demo/header.tsx extend context correctly 1`]
           class="ant-sender-actions-list"
         >
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_23_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_2l_"
           >
             <button
-              class="ant-btn css-var-_r_23_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              class="ant-btn css-var-_r_2l_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
               disabled=""
               type="button"
             >
@@ -2308,14 +2308,14 @@ exports[`renders components/sender/demo/header.tsx extend context correctly 2`]
 
 exports[`renders components/sender/demo/header-fixed.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-_r_25_"
+  class="ant-app css-var-_r_2n_"
 >
   <div
-    class="ant-flex css-var-_r_25_ ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
+    class="ant-flex css-var-_r_2n_ ant-flex-align-flex-start ant-flex-gap-middle ant-flex-vertical"
   >
     <button
       aria-checked="true"
-      class="ant-switch css-var-_r_25_ ant-switch-checked"
+      class="ant-switch css-var-_r_2n_ ant-switch-checked"
       role="switch"
       type="button"
     >
@@ -2338,7 +2338,7 @@ exports[`renders components/sender/demo/header-fixed.tsx extend context correctl
       </span>
     </button>
     <div
-      class="ant-sender css-var-_r_25_ ant-sender-main"
+      class="ant-sender css-var-_r_2n_ ant-sender-main"
     >
       <div
         class="ant-sender ant-sender-header ant-sender-header-motion-appear ant-sender-header-motion-appear-start ant-sender-header-motion"
@@ -2350,7 +2350,7 @@ exports[`renders components/sender/demo/header-fixed.tsx extend context correctl
             class="ant-sender-header-title"
           >
             <div
-              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-_r_25_"
+              class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-_r_2n_"
             >
               <div
                 class="ant-space-item"
@@ -2379,7 +2379,7 @@ exports[`renders components/sender/demo/header-fixed.tsx extend context correctl
                 class="ant-space-item"
               >
                 <span
-                  class="ant-typography ant-typography-secondary css-var-_r_25_"
+                  class="ant-typography ant-typography-secondary css-var-_r_2n_"
                 >
                   "Tell more about Ant Design X"
                 </span>
@@ -2390,7 +2390,7 @@ exports[`renders components/sender/demo/header-fixed.tsx extend context correctl
             class="ant-sender-header-close"
           >
             <button
-              class="ant-btn css-var-_r_25_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn css-var-_r_2n_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
               type="button"
             >
               <span
@@ -2425,17 +2425,17 @@ exports[`renders components/sender/demo/header-fixed.tsx extend context correctl
         class="ant-sender-content"
       >
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_25_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_2n_ ant-input-css-var ant-sender-input"
           style="overflow-y: hidden; resize: none;"
         />
         <div
           class="ant-sender-actions-list"
         >
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_25_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_2n_"
           >
             <button
-              class="ant-btn css-var-_r_25_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              class="ant-btn css-var-_r_2n_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
               disabled=""
               type="button"
             >
@@ -2475,14 +2475,14 @@ exports[`renders components/sender/demo/header-fixed.tsx extend context correctl
 
 exports[`renders components/sender/demo/paste-image.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-_r_21_"
+  class="ant-app css-var-_r_2j_"
 >
   <div
-    class="ant-flex css-var-_r_21_ ant-flex-align-end"
+    class="ant-flex css-var-_r_2j_ ant-flex-align-end"
     style="height: 220px;"
   >
     <div
-      class="ant-sender css-var-_r_21_ ant-sender-main"
+      class="ant-sender css-var-_r_2j_ ant-sender-main"
     >
       <div
         class="ant-sender ant-sender-header"
@@ -2500,7 +2500,7 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
             class="ant-sender-header-close"
           >
             <button
-              class="ant-btn css-var-_r_21_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+              class="ant-btn css-var-_r_2j_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
               type="button"
             >
               <span
@@ -2535,18 +2535,18 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
           style="padding: 0px;"
         >
           <div
-            class="ant-attachment css-var-_r_21_"
+            class="ant-attachment css-var-_r_2j_"
             dir="ltr"
           >
             <div
-              class="ant-file-card-list ant-attachment-list css-var-_r_21_"
+              class="ant-file-card-list ant-attachment-list css-var-_r_2j_"
             >
               <div
                 class="ant-file-card-list-content"
                 style="display: none;"
               >
                 <span
-                  class="ant-upload-wrapper css-var-_r_21_"
+                  class="ant-upload-wrapper css-var-_r_2j_"
                 >
                   <div
                     class="ant-upload ant-upload-select"
@@ -2561,7 +2561,7 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
                         type="file"
                       />
                       <button
-                        class="ant-btn css-var-_r_21_ ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-attachment-list-upload-btn"
+                        class="ant-btn css-var-_r_2j_ ant-btn-dashed ant-btn-color-default ant-btn-variant-dashed ant-attachment-list-upload-btn"
                         type="button"
                       >
                         <span
@@ -2596,7 +2596,7 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
               class="ant-attachment-placeholder"
             >
               <span
-                class="ant-upload-wrapper css-var-_r_21_"
+                class="ant-upload-wrapper css-var-_r_2j_"
               >
                 <div
                   class="ant-upload ant-upload-drag"
@@ -2617,10 +2617,10 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
                       class="ant-upload-drag-container"
                     >
                       <div
-                        class="ant-attachment-placeholder-inner ant-flex css-var-_r_21_ ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
+                        class="ant-attachment-placeholder-inner ant-flex css-var-_r_2j_ ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
                       >
                         <span
-                          class="ant-typography ant-attachment-placeholder-icon css-var-_r_21_"
+                          class="ant-typography ant-attachment-placeholder-icon css-var-_r_2j_"
                         >
                           <span
                             aria-label="cloud-upload"
@@ -2646,12 +2646,12 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
                           </span>
                         </span>
                         <h5
-                          class="ant-typography ant-attachment-placeholder-title css-var-_r_21_"
+                          class="ant-typography ant-attachment-placeholder-title css-var-_r_2j_"
                         >
                           Upload files
                         </h5>
                         <span
-                          class="ant-typography ant-typography-secondary ant-attachment-placeholder-description css-var-_r_21_"
+                          class="ant-typography ant-typography-secondary ant-attachment-placeholder-description css-var-_r_2j_"
                         >
                           Click or drag files to this area to upload
                         </span>
@@ -2671,7 +2671,7 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
           class="ant-sender-prefix"
         >
           <button
-            class="ant-btn css-var-_r_21_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
+            class="ant-btn css-var-_r_2j_ ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             style="font-size: 16px;"
             type="button"
           >
@@ -2701,17 +2701,17 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
           </button>
         </div>
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_21_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_2j_ ant-input-css-var ant-sender-input"
           style="overflow-y: hidden; resize: none;"
         />
         <div
           class="ant-sender-actions-list"
         >
           <div
-            class="ant-sender-actions-list-presets ant-flex css-var-_r_21_"
+            class="ant-sender-actions-list-presets ant-flex css-var-_r_2j_"
           >
             <button
-              class="ant-btn css-var-_r_21_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+              class="ant-btn css-var-_r_2j_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
               disabled=""
               type="button"
             >
@@ -2743,14 +2743,14 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
         </div>
       </div>
       <div
-        class="ant-attachment-drop-area css-var-_r_21_"
+        class="ant-attachment-drop-area css-var-_r_2j_"
         style="display: none;"
       >
         <div
           class="ant-attachment-placeholder"
         >
           <span
-            class="ant-upload-wrapper css-var-_r_21_"
+            class="ant-upload-wrapper css-var-_r_2j_"
           >
             <div
               class="ant-upload ant-upload-drag"
@@ -2771,18 +2771,18 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
                   class="ant-upload-drag-container"
                 >
                   <div
-                    class="ant-attachment-placeholder-inner ant-flex css-var-_r_21_ ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
+                    class="ant-attachment-placeholder-inner ant-flex css-var-_r_2j_ ant-flex-align-center ant-flex-justify-center ant-flex-vertical"
                   >
                     <span
-                      class="ant-typography ant-attachment-placeholder-icon css-var-_r_21_"
+                      class="ant-typography ant-attachment-placeholder-icon css-var-_r_2j_"
                     />
                     <h5
-                      class="ant-typography ant-attachment-placeholder-title css-var-_r_21_"
+                      class="ant-typography ant-attachment-placeholder-title css-var-_r_2j_"
                     >
                       Drop file here
                     </h5>
                     <span
-                      class="ant-typography ant-typography-secondary ant-attachment-placeholder-description css-var-_r_21_"
+                      class="ant-typography ant-typography-secondary ant-attachment-placeholder-description css-var-_r_2j_"
                     />
                   </div>
                 </div>
@@ -2800,11 +2800,11 @@ exports[`renders components/sender/demo/paste-image.tsx extend context correctly
 
 exports[`renders components/sender/demo/ref-action.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_1v_ ant-flex-wrap-wrap"
+  class="ant-flex css-var-_r_2h_ ant-flex-wrap-wrap"
   style="gap: 12px;"
 >
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2812,7 +2812,7 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2820,7 +2820,7 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2828,7 +2828,7 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2836,7 +2836,7 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2844,7 +2844,7 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2852,7 +2852,7 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2860,7 +2860,7 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <button
-    class="ant-btn css-var-_r_1v_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+    class="ant-btn css-var-_r_2h_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
     type="button"
   >
     <span>
@@ -2868,13 +2868,13 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
     </span>
   </button>
   <div
-    class="ant-sender css-var-_r_1v_ ant-sender-main"
+    class="ant-sender css-var-_r_2h_ ant-sender-main"
   >
     <div
       class="ant-sender-content"
     >
       <textarea
-        class="ant-input ant-input-borderless css-var-_r_1v_ ant-input-css-var ant-sender-input"
+        class="ant-input ant-input-borderless css-var-_r_2h_ ant-input-css-var ant-sender-input"
         style="overflow-y: hidden; resize: none;"
       >
         Hello, welcome to use Ant Design X!
@@ -2883,10 +2883,10 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
         class="ant-sender-actions-list"
       >
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-_r_1v_"
+          class="ant-sender-actions-list-presets ant-flex css-var-_r_2h_"
         >
           <button
-            class="ant-btn css-var-_r_1v_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-_r_2h_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
             type="button"
           >
             <span
@@ -2924,19 +2924,19 @@ exports[`renders components/sender/demo/ref-action.tsx extend context correctly
 
 exports[`renders components/sender/demo/send-style.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-_r_1n_"
+  class="ant-app css-var-_r_29_"
 >
   <div
-    class="ant-flex css-var-_r_1n_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+    class="ant-flex css-var-_r_29_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   >
     <div
-      class="ant-sender css-var-_r_1n_ ant-sender-main"
+      class="ant-sender css-var-_r_29_ ant-sender-main"
     >
       <div
         class="ant-sender-content"
       >
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_1n_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_29_ ant-input-css-var ant-sender-input"
           placeholder="Change button border radius"
           style="overflow-y: hidden; resize: none;"
         >
@@ -2947,7 +2947,7 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
         >
           <button
             aria-describedby="test-id"
-            class="ant-btn css-var-_r_1n_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-_r_29_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
             style="border-radius: 12px;"
             type="button"
           >
@@ -2976,7 +2976,7 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
             </span>
           </button>
           <div
-            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1n_ ant-tooltip-placement-top"
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_29_ ant-tooltip-placement-top"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <div
@@ -2999,13 +2999,13 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
       </div>
     </div>
     <div
-      class="ant-sender css-var-_r_1n_ ant-sender-main"
+      class="ant-sender css-var-_r_29_ ant-sender-main"
     >
       <div
         class="ant-sender-content"
       >
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_1n_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_29_ ant-input-css-var ant-sender-input"
           placeholder="Change button icon"
           style="overflow-y: hidden; resize: none;"
         >
@@ -3016,7 +3016,7 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
         >
           <button
             aria-describedby="test-id"
-            class="ant-btn css-var-_r_1n_ ant-btn-primary ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-_r_29_ ant-btn-primary ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
             type="button"
           >
             <span
@@ -3044,7 +3044,7 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
             </span>
           </button>
           <div
-            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1n_ ant-tooltip-placement-top"
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_29_ ant-tooltip-placement-top"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <div
@@ -3067,13 +3067,13 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
       </div>
     </div>
     <div
-      class="ant-sender css-var-_r_1n_ ant-sender-main"
+      class="ant-sender css-var-_r_29_ ant-sender-main"
     >
       <div
         class="ant-sender-content"
       >
         <textarea
-          class="ant-input ant-input-borderless css-var-_r_1n_ ant-input-css-var ant-sender-input"
+          class="ant-input ant-input-borderless css-var-_r_29_ ant-input-css-var ant-sender-input"
           placeholder="Loading not change button"
           style="overflow-y: hidden; resize: none;"
         >
@@ -3083,7 +3083,7 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
           class="ant-sender-actions-list"
         >
           <button
-            class="ant-btn css-var-_r_1n_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-_r_29_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
             type="button"
           >
             <span
@@ -3121,15 +3121,15 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
 
 exports[`renders components/sender/demo/slot-filling.tsx extend context correctly 1`] = `
 <div
-  class="ant-flex css-var-_r_1a_ ant-flex-align-stretch ant-flex-vertical"
+  class="ant-flex css-var-_r_1s_ ant-flex-align-stretch ant-flex-vertical"
   style="gap: 16px;"
 >
   <div
-    class="ant-flex css-var-_r_1a_ ant-flex-wrap-wrap"
+    class="ant-flex css-var-_r_1s_ ant-flex-wrap-wrap"
     style="gap: 8px;"
   >
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3137,7 +3137,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3145,7 +3145,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3153,7 +3153,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3161,7 +3161,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3169,7 +3169,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3177,7 +3177,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3185,7 +3185,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3193,7 +3193,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3201,7 +3201,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3209,7 +3209,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3217,7 +3217,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3225,7 +3225,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3233,7 +3233,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3241,7 +3241,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3249,7 +3249,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3257,7 +3257,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       </span>
     </button>
     <button
-      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      class="ant-btn css-var-_r_1s_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
       type="button"
     >
       <span>
@@ -3266,7 +3266,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
     </button>
   </div>
   <div
-    class="ant-sender css-var-_r_1b_ ant-sender-main"
+    class="ant-sender css-var-_r_1t_ ant-sender-main"
   >
     <div
       class="ant-sender-content"
@@ -3306,7 +3306,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
                   Travel Planner
                 </span>
                 <div
-                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1b_ ant-tooltip-placement-top"
+                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1t_ ant-tooltip-placement-top"
                   style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
                 >
                   <div
@@ -3422,11 +3422,11 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
             </span>
           </span>
           <div
-            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_1b_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_1t_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
             style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
           >
             <ul
-              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_1b_ ant-dropdown-css-var css-var-_r_1b_ ant-dropdown-menu-css-var"
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_1t_ ant-dropdown-css-var css-var-_r_1t_ ant-dropdown-menu-css-var"
               data-menu-list="true"
               role="menu"
               tabindex="0"
@@ -3445,7 +3445,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1t_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -3476,7 +3476,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1t_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -3507,7 +3507,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
                 </span>
               </li>
               <div
-                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1b_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1t_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
                 style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
               >
                 <div
@@ -3541,7 +3541,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
             style="width: 200px; display: inline-block; align-items: center;"
           >
             <div
-              class="ant-slider css-var-_r_1b_ ant-slider-horizontal"
+              class="ant-slider css-var-_r_1t_ ant-slider-horizontal"
               style="margin: 0px;"
             >
               <div
@@ -3598,7 +3598,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
           data-slot-key="account"
         >
           <input
-            class="ant-input ant-input-sm ant-input-borderless ant-sender-slot-input css-var-_r_1b_ ant-input-css-var"
+            class="ant-input ant-input-sm ant-input-borderless ant-sender-slot-input css-var-_r_1t_ ant-input-css-var"
             data-slot-input="account"
             placeholder="Please enter a account"
             spellcheck="false"
@@ -3617,10 +3617,10 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
         class="ant-sender-actions-list"
       >
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-_r_1b_"
+          class="ant-sender-actions-list-presets ant-flex css-var-_r_1t_"
         >
           <button
-            class="ant-btn css-var-_r_1b_ ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+            class="ant-btn css-var-_r_1t_ ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
             disabled=""
             type="button"
           >
@@ -3652,7 +3652,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
             </span>
           </button>
           <button
-            class="ant-btn css-var-_r_1b_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-_r_1t_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
             type="button"
           >
             <span
@@ -3684,7 +3684,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
     </div>
   </div>
   <div
-    class="ant-flex css-var-_r_1a_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+    class="ant-flex css-var-_r_1s_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   >
     <div>
     </div>
@@ -3698,6 +3698,416 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
 
 exports[`renders components/sender/demo/slot-filling.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/sender/demo/slot-format-result.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex css-var-_r_1a_ ant-flex-align-stretch ant-flex-vertical"
+  style="gap: 16px;"
+>
+  <div
+    class="ant-flex css-var-_r_1a_ ant-flex-wrap-wrap"
+    style="gap: 8px;"
+  >
+    <button
+      class="ant-btn css-var-_r_1a_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        Get Value
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-sender css-var-_r_1a_ ant-sender-main"
+  >
+    <div
+      class="ant-sender-content"
+    >
+      <div
+        class="ant-sender-input ant-sender-input-slot"
+        contenteditable="true"
+        data-placeholder="Enter to send"
+        role="textbox"
+        spellcheck="false"
+        style="min-height: 11.842858px; max-height: 23.685716px; overflow-y: auto;"
+        tabindex="0"
+        value="Translate \\" [Hello World] \\" from {English} to {Chinese}."
+      >
+        Translate "
+        <span
+          class="ant-sender-slot-before ant-sender-slot-no-width"
+          contenteditable="false"
+          data-node-type="nbsp"
+          data-slot-key="text"
+        >
+        </span>
+        <span
+          class="ant-sender-slot ant-sender-slot-content"
+          contenteditable="true"
+          data-placeholder="Enter text"
+          data-slot-key="text"
+        >
+          Hello World
+        </span>
+        <span
+          class="ant-sender-slot-after ant-sender-slot-no-width"
+          contenteditable="false"
+          data-node-type="nbsp"
+          data-slot-key="text"
+        >
+        </span>
+        " from 
+        <span
+          class="ant-sender-slot"
+          contenteditable="false"
+          data-slot-key="sourceLang"
+        >
+          <span
+            class="ant-dropdown-trigger ant-sender-slot-select ant-sender-slot-select-selector-value"
+          >
+            <span
+              class="ant-sender-slot-select-value"
+              data-placeholder="Select language"
+            >
+              English
+            </span>
+            <span
+              class="ant-sender-slot-select-arrow"
+            >
+              <span
+                aria-label="caret-down"
+                class="anticon anticon-caret-down"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="caret-down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+          <div
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_1a_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+          >
+            <ul
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_1a_ ant-dropdown-css-var css-var-_r_1a_ ant-dropdown-menu-css-var"
+              data-menu-list="true"
+              role="menu"
+              tabindex="0"
+            >
+              <li
+                aria-describedby="test-id"
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-selected ant-dropdown-menu-item-only-child"
+                data-menu-id="rc-menu-uuid-English"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  English
+                </span>
+              </li>
+              <div
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1a_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+              >
+                <div
+                  class="ant-tooltip-arrow"
+                  style="position: absolute; top: 0px; left: 0px;"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-container"
+                  id="test-id"
+                  role="tooltip"
+                />
+              </div>
+              <li
+                aria-describedby="test-id"
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                data-menu-id="rc-menu-uuid-Chinese"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  Chinese
+                </span>
+              </li>
+              <div
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1a_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+              >
+                <div
+                  class="ant-tooltip-arrow"
+                  style="position: absolute; top: 0px; left: 0px;"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-container"
+                  id="test-id"
+                  role="tooltip"
+                />
+              </div>
+              <li
+                aria-describedby="test-id"
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                data-menu-id="rc-menu-uuid-Japanese"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  Japanese
+                </span>
+              </li>
+              <div
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1a_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+              >
+                <div
+                  class="ant-tooltip-arrow"
+                  style="position: absolute; top: 0px; left: 0px;"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-container"
+                  id="test-id"
+                  role="tooltip"
+                />
+              </div>
+            </ul>
+            <div
+              aria-hidden="true"
+              style="display: none;"
+            />
+          </div>
+        </span>
+         to 
+        <span
+          class="ant-sender-slot"
+          contenteditable="false"
+          data-slot-key="targetLang"
+        >
+          <span
+            class="ant-dropdown-trigger ant-sender-slot-select ant-sender-slot-select-selector-value"
+          >
+            <span
+              class="ant-sender-slot-select-value"
+              data-placeholder="Select language"
+            >
+              Chinese
+            </span>
+            <span
+              class="ant-sender-slot-select-arrow"
+            >
+              <span
+                aria-label="caret-down"
+                class="anticon anticon-caret-down"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="caret-down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="0 0 1024 1024"
+                  width="1em"
+                >
+                  <path
+                    d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+          <div
+            class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up css-var-_r_1a_ ant-dropdown-css-var ant-dropdown-placement-bottomLeft"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+          >
+            <ul
+              class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light css-var-_r_1a_ ant-dropdown-css-var css-var-_r_1a_ ant-dropdown-menu-css-var"
+              data-menu-list="true"
+              role="menu"
+              tabindex="0"
+            >
+              <li
+                aria-describedby="test-id"
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                data-menu-id="rc-menu-uuid-English"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  English
+                </span>
+              </li>
+              <div
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1a_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+              >
+                <div
+                  class="ant-tooltip-arrow"
+                  style="position: absolute; top: 0px; left: 0px;"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-container"
+                  id="test-id"
+                  role="tooltip"
+                />
+              </div>
+              <li
+                aria-describedby="test-id"
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-selected ant-dropdown-menu-item-only-child"
+                data-menu-id="rc-menu-uuid-Chinese"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  Chinese
+                </span>
+              </li>
+              <div
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1a_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+              >
+                <div
+                  class="ant-tooltip-arrow"
+                  style="position: absolute; top: 0px; left: 0px;"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-container"
+                  id="test-id"
+                  role="tooltip"
+                />
+              </div>
+              <li
+                aria-describedby="test-id"
+                class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                data-menu-id="rc-menu-uuid-Japanese"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-dropdown-menu-title-content"
+                >
+                  Japanese
+                </span>
+              </li>
+              <div
+                class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-_r_1a_ ant-dropdown-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
+              >
+                <div
+                  class="ant-tooltip-arrow"
+                  style="position: absolute; top: 0px; left: 0px;"
+                >
+                  <span
+                    class="ant-tooltip-arrow-content"
+                  />
+                </div>
+                <div
+                  class="ant-tooltip-container"
+                  id="test-id"
+                  role="tooltip"
+                />
+              </div>
+            </ul>
+            <div
+              aria-hidden="true"
+              style="display: none;"
+            />
+          </div>
+        </span>
+        .
+      </div>
+      <div
+        id="ant-sender-slot-placeholders"
+        style="display: none;"
+      />
+      <div
+        class="ant-sender-actions-list"
+      >
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-_r_1a_"
+        >
+          <button
+            class="ant-btn css-var-_r_1a_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="arrow-up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <strong>
+      getValue() result:
+    </strong>
+     (click "Get Value" to see formatted result)
+  </div>
+</div>
+`;
+
+exports[`renders components/sender/demo/slot-format-result.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/sender/demo/slot-with-suggestion.tsx extend context correctly 1`] = `
 <div
   class="ant-flex css-var-_r_f_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
diff --git a/packages/x/components/sender/__tests__/__snapshots__/demo.test.ts.snap b/packages/x/components/sender/__tests__/__snapshots__/demo.test.ts.snap
index f6aabf93a0..53487ea192 100644
--- a/packages/x/components/sender/__tests__/__snapshots__/demo.test.ts.snap
+++ b/packages/x/components/sender/__tests__/__snapshots__/demo.test.ts.snap
@@ -1924,6 +1924,93 @@ exports[`renders components/sender/demo/slot-filling.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/sender/demo/slot-format-result.tsx correctly 1`] = `
+<div
+  class="ant-flex css-var-_R_0_ ant-flex-align-stretch ant-flex-vertical"
+  style="gap:16px"
+>
+  <div
+    class="ant-flex css-var-_R_0_ ant-flex-wrap-wrap"
+    style="gap:8px"
+  >
+    <button
+      class="ant-btn css-var-_R_0_ ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
+      type="button"
+    >
+      <span>
+        Get Value
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-sender css-var-_R_0_ ant-sender-main"
+  >
+    <div
+      class="ant-sender-content"
+    >
+      <div
+        class="ant-sender-input ant-sender-input-slot"
+        contenteditable="true"
+        data-placeholder="Enter to send"
+        role="textbox"
+        spellcheck="false"
+        style="min-height:52.7px;max-height:105.4px;overflow-y:auto"
+        tabindex="0"
+        value=""
+      />
+      <div
+        id="ant-sender-slot-placeholders"
+        style="display:none"
+      />
+      <div
+        class="ant-sender-actions-list"
+      >
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-_R_0_"
+        >
+          <button
+            class="ant-btn css-var-_R_0_ ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+            disabled=""
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="arrow-up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <strong>
+      getValue() result:
+    </strong>
+    <!-- -->
+    (click "Get Value" to see formatted result)
+  </div>
+</div>
+`;
+
 exports[`renders components/sender/demo/slot-with-suggestion.tsx correctly 1`] = `
 <div
   class="ant-flex css-var-_R_0_ ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
diff --git a/packages/x/components/sender/__tests__/slot.test.tsx b/packages/x/components/sender/__tests__/slot.test.tsx
index e1cff6a5cd..1dfa46c1c8 100644
--- a/packages/x/components/sender/__tests__/slot.test.tsx
+++ b/packages/x/components/sender/__tests__/slot.test.tsx
@@ -61,6 +61,13 @@ const customSlotConfig: SlotConfigType = {
   formatResult: (v: any) => `[${v}]`,
 };
 
+const contentSlotConfigWithFormat: SlotConfigType = {
+  type: 'content',
+  key: 'content_fmt',
+  props: { defaultValue: 'Content Value', placeholder: 'Enter content' },
+  formatResult: (v: any) => `[formatted:${v}]`,
+};
+
 const errorTypeSlotConfig: any = {
   type: 'error',
   key: 'error1',
@@ -784,4 +791,36 @@ describe('Sender Slot Component', () => {
       });
     });
   });
+  describe('content slot formatResult', () => {
+    it('should apply formatResult to content slot value in getValue()', () => {
+      const ref = createRef<SenderRef>();
+      render(
+        <Sender
+          ref={ref}
+          slotConfig={[
+            contentSlotConfigWithFormat,
+            { type: 'text', value: ' ' },
+            {
+              type: 'input',
+              key: 'input_fmt',
+              props: { defaultValue: 'InputVal' },
+              formatResult: (v: any) => `[formatted:${v}]`,
+            },
+          ]}
+        />,
+      );
+      const fullValue = ref.current?.getValue();
+      // Both content and input slots should go through formatResult
+      expect(fullValue?.value).toContain('[formatted:Content Value]');
+      expect(fullValue?.value).toContain('[formatted:InputVal]');
+    });
+
+    it('should return raw value when content slot has no formatResult', () => {
+      const ref = createRef<SenderRef>();
+      render(<Sender ref={ref} slotConfig={[contentSlotConfigWithValue]} />);
+      const fullValue = ref.current?.getValue();
+      expect(fullValue?.value).toContain('Content Value');
+      expect(fullValue?.value).not.toContain('[formatted:');
+    });
+  });
 });
diff --git a/packages/x/components/sender/__tests__/use-slot-config-state.test.ts b/packages/x/components/sender/__tests__/use-slot-config-state.test.ts
index 4e0e3ae55d..5af48446ad 100644
--- a/packages/x/components/sender/__tests__/use-slot-config-state.test.ts
+++ b/packages/x/components/sender/__tests__/use-slot-config-state.test.ts
@@ -122,4 +122,64 @@ describe('useSlotConfigState', () => {
     rerender({ slotConfig: [] });
     expect(result.current[0].get('x')).toBeDefined();
   });
+
+  describe('getNodeTextValue – content type with formatResult', () => {
+    it('applies formatResult to content slot value', () => {
+      const contentConfig: SlotConfigType = {
+        type: 'content',
+        key: 'c1',
+        props: { defaultValue: 'hello' },
+        formatResult: (v: any) => `[${v}]`,
+      };
+      const { result } = renderHook(({ slotConfig }) => useSlotConfigState(slotConfig), {
+        initialProps: { slotConfig: [contentConfig] },
+      });
+
+      // Build a DOM element that mimics a content slot span
+      const span = document.createElement('span');
+      span.dataset.slotKey = 'c1';
+      span.innerText = 'hello';
+
+      const { getNodeTextValue } = result.current[1];
+      expect(getNodeTextValue(span)).toBe('[hello]');
+    });
+
+    it('returns raw textContent when content slot has no formatResult', () => {
+      const contentConfig: SlotConfigType = {
+        type: 'content',
+        key: 'c2',
+        props: { defaultValue: 'plain' },
+      };
+      const { result } = renderHook(({ slotConfig }) => useSlotConfigState(slotConfig), {
+        initialProps: { slotConfig: [contentConfig] },
+      });
+
+      const span = document.createElement('span');
+      span.dataset.slotKey = 'c2';
+      span.innerText = 'plain';
+
+      const { getNodeTextValue } = result.current[1];
+      expect(getNodeTextValue(span)).toBe('plain');
+    });
+
+    it('uses DOM textContent (not state) as the value for content type', () => {
+      const contentConfig: SlotConfigType = {
+        type: 'content',
+        key: 'c3',
+        props: { defaultValue: 'initial' },
+        formatResult: (v: any) => `<${v}>`,
+      };
+      const { result } = renderHook(({ slotConfig }) => useSlotConfigState(slotConfig), {
+        initialProps: { slotConfig: [contentConfig] },
+      });
+
+      // User edits the contenteditable area — DOM text differs from state
+      const span = document.createElement('span');
+      span.dataset.slotKey = 'c3';
+      span.innerText = 'user-edited';
+
+      const { getNodeTextValue } = result.current[1];
+      expect(getNodeTextValue(span)).toBe('<user-edited>');
+    });
+  });
 });
diff --git a/packages/x/components/sender/demo/slot-format-result.md b/packages/x/components/sender/demo/slot-format-result.md
new file mode 100644
index 0000000000..aa214124e6
--- /dev/null
+++ b/packages/x/components/sender/demo/slot-format-result.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+`formatResult` 可对所有词槽类型（包含 `content`）的值进行格式化，统一控制最终输出。
+
+## en-US
+
+`formatResult` can format the value of all slot types (including `content`), providing unified control over the final output.
diff --git a/packages/x/components/sender/demo/slot-format-result.tsx b/packages/x/components/sender/demo/slot-format-result.tsx
new file mode 100644
index 0000000000..900527a771
--- /dev/null
+++ b/packages/x/components/sender/demo/slot-format-result.tsx
@@ -0,0 +1,73 @@
+import { Sender, type SenderProps } from '@ant-design/x';
+import { Button, Flex, GetRef, message } from 'antd';
+import React, { useRef, useState } from 'react';
+
+const slotConfig: SenderProps['slotConfig'] = [
+  { type: 'text', value: 'Translate "' },
+  {
+    type: 'content',
+    key: 'text',
+    props: { defaultValue: 'Hello World', placeholder: 'Enter text' },
+    formatResult: (value: any) => `[${value}]`,
+  },
+  { type: 'text', value: '" from ' },
+  {
+    type: 'select',
+    key: 'sourceLang',
+    props: {
+      defaultValue: 'English',
+      options: ['English', 'Chinese', 'Japanese'],
+      placeholder: 'Select language',
+    },
+    formatResult: (value: any) => `{${value}}`,
+  },
+  { type: 'text', value: ' to ' },
+  {
+    type: 'select',
+    key: 'targetLang',
+    props: {
+      defaultValue: 'Chinese',
+      options: ['English', 'Chinese', 'Japanese'],
+      placeholder: 'Select language',
+    },
+    formatResult: (value: any) => `{${value}}`,
+  },
+  { type: 'text', value: '.' },
+];
+
+const App: React.FC = () => {
+  const [messageApi, contextHolder] = message.useMessage();
+  const senderRef = useRef<GetRef<typeof Sender>>(null);
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <Flex vertical gap={16}>
+      {contextHolder}
+      <Flex wrap gap={8}>
+        <Button
+          onClick={() => {
+            const val = senderRef.current?.getValue?.();
+            setValue(val?.value ?? '');
+          }}
+        >
+          Get Value
+        </Button>
+      </Flex>
+      <Sender
+        autoSize={{ minRows: 2, maxRows: 4 }}
+        placeholder="Enter to send"
+        onSubmit={(v) => {
+          setValue(v);
+          messageApi.open({ type: 'success', content: `Sent: ${v}` });
+        }}
+        slotConfig={slotConfig}
+        ref={senderRef}
+      />
+      <div>
+        <strong>getValue() result:</strong> {value || '(click "Get Value" to see formatted result)'}
+      </div>
+    </Flex>
+  );
+};
+
+export default () => <App />;
diff --git a/packages/x/components/sender/hooks/use-slot-config-state.ts b/packages/x/components/sender/hooks/use-slot-config-state.ts
index a399e1aecc..a2484a003a 100644
--- a/packages/x/components/sender/hooks/use-slot-config-state.ts
+++ b/packages/x/components/sender/hooks/use-slot-config-state.ts
@@ -168,10 +168,13 @@ const useSlotConfigState = (
       if (infoNodeType === 'nbsp') {
         return ' ';
       }
-      if (!slotConfig || slotConfig.type === 'content') {
+      if (!slotConfig) {
         return textContent;
       }
-      const slotValue = stateRef.current[slotKey] ?? '';
+      // content 类型的值来自 DOM 文本（用户可在 contenteditable 区域直接编辑），
+      // 其他类型的值来自 state。
+      const slotValue =
+        slotConfig.type === 'content' ? textContent : (stateRef.current[slotKey] ?? '');
       return slotConfig.formatResult?.(slotValue) ?? slotValue;
     }
 
diff --git a/packages/x/components/sender/index.en-US.md b/packages/x/components/sender/index.en-US.md
index 88c657671d..d7c34a2385 100644
--- a/packages/x/components/sender/index.en-US.md
+++ b/packages/x/components/sender/index.en-US.md
@@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cOfrS4fVkOMAAA
 <code src="./demo/basic.tsx">Basic Usage</code>
 <code src="./demo/switch.tsx">Feature Toggle</code>
 <code src="./demo/slot-filling.tsx">Slot Mode</code>
+<code src="./demo/slot-format-result.tsx">Slot Format Result</code>
 <code src="./demo/ref-action.tsx">Instance Methods</code>
 <code src="./demo/submitType.tsx">Submit Methods</code>
 <code src="./demo/speech.tsx">Voice Input</code>
@@ -120,7 +121,7 @@ type ActionsComponents = {
 | --- | --- | --- | --- | --- |
 | type | Node type, determines the rendering component type, required | 'text' \| 'input' \| 'select' \| 'tag' \| 'content' \| 'custom' | - | 2.0.0 |
 | key | Unique identifier, can be omitted when type is text | string | - | - |
-| formatResult | Format the final result | (value: any) => string | - | 2.0.0 |
+| formatResult | Format the final result, applies to all slot types (including `content`) | (value: any) => string | - | 2.0.0 |
 
 ##### text node properties
 
diff --git a/packages/x/components/sender/index.zh-CN.md b/packages/x/components/sender/index.zh-CN.md
index 3bbee14237..73d1cef948 100644
--- a/packages/x/components/sender/index.zh-CN.md
+++ b/packages/x/components/sender/index.zh-CN.md
@@ -21,6 +21,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cOfrS4fVkOMAAA
 <code src="./demo/basic.tsx">基本用法</code>
 <code src="./demo/switch.tsx">功能开关</code>
 <code src="./demo/slot-filling.tsx">词槽模式</code>
+<code src="./demo/slot-format-result.tsx">词槽格式化</code>
 <code src="./demo/ref-action.tsx">实例方法</code>
 <code src="./demo/submitType.tsx">提交方式</code>
 <code src="./demo/speech.tsx">语音输入</code>
@@ -122,7 +123,7 @@ type ActionsComponents = {
 | --- | --- | --- | --- | --- |
 | type | 节点类型，决定渲染组件类型，必填 | 'text' \| 'input' \| 'select' \| 'tag' \| 'content' \| 'custom' | - | 2.0.0 |
 | key | 唯一标识，type 为 text 时可省略 | string | - | - |
-| formatResult | 格式化最终结果 | (value: any) => string | - | 2.0.0 |
+| formatResult | 格式化最终结果，对所有词槽类型（含 `content`）生效 | (value: any) => string | - | 2.0.0 |
 
 ##### text 节点属性