diff --git a/components/sender/StopLoading.tsx b/components/sender/StopLoading.tsx
index f06ddfe5..623d8c26 100644
--- a/components/sender/StopLoading.tsx
+++ b/components/sender/StopLoading.tsx
@@ -1,37 +1,47 @@
 import React, { memo } from 'react';
-import useToken from '../theme/useToken';
 
-const StopLoadingIcon = memo(() => {
-  const { token } = useToken();
+const StopLoadingIcon = memo((props: { className?: string }) => {
+  const { className } = props;
+
   return (
     <svg
       color="currentColor"
-      height={16}
-      viewBox="0 0 1024 1024"
-      width={16}
+      viewBox="0 0 1000 1000"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={className}
     >
       <title>Stop Loading Icon</title>
-      <g fill="none">
-        <circle cx="512" cy="512" fill="none" r="426" stroke={token.colorBgBase} strokeWidth="72" />
-        <rect fill="currentColor" height="252" rx="24" ry="24" width="252" x="386" y="386" />
-        <path
-          d="M938.667 512C938.667 276.359 747.64 85.333 512 85.333"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeWidth="73"
-        >
-          <animateTransform
-            attributeName="transform"
-            dur="1s"
-            from="0 512 512"
-            repeatCount="indefinite"
-            to="360 512 512"
-            type="rotate"
-          />
-        </path>
-      </g>
+      <rect fill="currentColor" height="250" rx="24" ry="24" width="250" x="375" y="375" />
+
+      <circle
+        cx="500"
+        cy="500"
+        fill="none"
+        r="450"
+        stroke="currentColor"
+        strokeWidth="100"
+        opacity="0.45"
+      />
+
+      <circle
+        cx="500"
+        cy="500"
+        fill="none"
+        r="450"
+        stroke="currentColor"
+        strokeWidth="100"
+        strokeDasharray="600 9999999"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          from="0 500 500"
+          repeatCount="indefinite"
+          to="360 500 500"
+          type="rotate"
+        />
+      </circle>
     </svg>
   );
 });
diff --git a/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9affa077..9e95ea1e 100644
--- a/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,26 +2,26 @@
 
 exports[`renders components/sender/demo/actions.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-r5"
+  class="ant-app css-var-rb"
 >
   <div
-    class="ant-sender css-var-r5"
+    class="ant-sender css-var-rb"
   >
     <textarea
-      class="ant-input ant-input-outlined css-var-r5 ant-input-css-var ant-sender-input"
-      style="resize: none; height: -110px; max-height: -110px;"
+      class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input"
+      style="overflow-y: hidden; resize: none;"
     />
     <div
       class="ant-sender-actions-list"
     >
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-r5"
+        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-rb"
       >
         <div
           class="ant-space-item"
         >
           <span
-            class="ant-typography ant-typography-secondary css-var-r5"
+            class="ant-typography ant-typography-secondary css-var-rb"
           >
             <small>
               \`Shift + Enter\` to submit
@@ -32,7 +32,42 @@ exports[`renders components/sender/demo/actions.tsx extend context correctly 1`]
           class="ant-space-item"
         >
           <button
-            class="ant-btn css-var-r5 ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-rb ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+            type="button"
+          >
+            <span
+              class="ant-btn-icon"
+            >
+              <span
+                aria-label="clear"
+                class="anticon anticon-clear"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="clear"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs>
+                    <style />
+                  </defs>
+                  <path
+                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+        <div
+          class="ant-space-item"
+        >
+          <button
+            class="ant-btn css-var-rb 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
@@ -71,87 +106,167 @@ exports[`renders components/sender/demo/actions.tsx extend context correctly 2`]
 
 exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-r3"
+  class="ant-app css-var-r9"
 >
   <div
-    class="ant-sender css-var-r3"
+    class="ant-flex css-var-r9 ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   >
-    <textarea
-      class="ant-input ant-input-outlined css-var-r3 ant-input-css-var ant-sender-input"
-      style="resize: none; height: -110px; max-height: -110px;"
-    >
-      Hello? this is X!
-    </textarea>
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender css-var-r9"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-r9 ant-input-css-var ant-sender-input"
+        style="overflow-y: hidden; resize: none;"
+      >
+        Hello? this is X!
+      </textarea>
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-r3"
+        class="ant-sender-actions-list"
       >
         <div
-          class="ant-space-item"
+          class="ant-sender-actions-list-presets ant-flex css-var-r9"
         >
           <button
-            class="ant-btn css-var-r3 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-r9 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="clear"
-                class="anticon anticon-clear"
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
                 role="img"
               >
                 <svg
                   aria-hidden="true"
-                  data-icon="clear"
+                  data-icon="arrow-up"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
+                    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
+      class="ant-sender css-var-r9"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-r9 ant-input-css-var ant-sender-input"
+        readonly=""
+        style="overflow-y: hidden; resize: none;"
+      >
+        Force as loading
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
         <div
-          class="ant-space-item"
+          class="ant-sender-actions-list-presets ant-flex css-var-r9"
         >
           <button
-            class="ant-btn css-var-r3 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-r9 ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+            type="button"
+          >
+            <svg
+              class="ant-sender-actions-btn-loading-icon"
+              color="currentColor"
+              viewBox="0 0 1000 1000"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>
+                Stop Loading Icon
+              </title>
+              <rect
+                fill="currentColor"
+                height="250"
+                rx="24"
+                ry="24"
+                width="250"
+                x="375"
+                y="375"
+              />
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                opacity="0.45"
+                r="450"
+                stroke="currentColor"
+                stroke-width="100"
+              />
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                r="450"
+                stroke="currentColor"
+                stroke-dasharray="600 9999999"
+                stroke-width="100"
+              >
+                <animatetransform
+                  attributeName="transform"
+                  dur="1s"
+                  from="0 500 500"
+                  repeatCount="indefinite"
+                  to="360 500 500"
+                  type="rotate"
+                />
+              </circle>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-sender css-var-r9 ant-sender-disabled"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-r9 ant-input-css-var ant-sender-input ant-input-disabled"
+        disabled=""
+        style="overflow-y: hidden; resize: none;"
+      >
+        Set to disabled
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-r9"
+        >
+          <button
+            class="ant-btn css-var-r9 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"
             type="button"
           >
             <span
               class="ant-btn-icon"
             >
               <span
-                aria-label="send"
-                class="anticon anticon-send"
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
                 role="img"
               >
                 <svg
                   aria-hidden="true"
-                  data-icon="send"
+                  data-icon="arrow-up"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                    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>
@@ -166,100 +281,244 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
 
 exports[`renders components/sender/demo/basic.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/sender/demo/submitType.tsx extend context correctly 1`] = `
+exports[`renders components/sender/demo/send-style.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-r1"
+  class="ant-app css-var-r3"
 >
   <div
-    class="ant-sender css-var-r1"
+    class="ant-flex css-var-r3 ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   >
-    <textarea
-      class="ant-input ant-input-outlined css-var-r1 ant-input-css-var ant-sender-input"
-      placeholder="Press Shift + Enter to send message"
-      style="resize: none; height: -110px; max-height: -110px;"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender css-var-r3"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-r3 ant-input-css-var ant-sender-input"
+        placeholder="Change button border radius"
+        style="overflow-y: hidden; resize: none;"
+      >
+        Ask something?
+      </textarea>
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-r1"
+        class="ant-sender-actions-list"
       >
-        <div
-          class="ant-space-item"
+        <button
+          class="ant-btn css-var-r3 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"
         >
-          <button
-            class="ant-btn css-var-r1 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
+          <span
+            class="ant-btn-icon"
           >
             <span
-              class="ant-btn-icon"
+              aria-label="arrow-up"
+              class="anticon anticon-arrow-up"
+              role="img"
             >
-              <span
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
+              <svg
+                aria-hidden="true"
+                data-icon="arrow-up"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                  />
-                </svg>
-              </span>
+                <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>
-          </button>
-        </div>
+          </span>
+        </button>
         <div
-          class="ant-space-item"
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast css-var-r3 ant-tooltip-placement-top"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
         >
-          <button
-            class="ant-btn css-var-r1 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
+          <div
+            class="ant-tooltip-arrow"
+            style="position: absolute; bottom: 0px; left: 0px;"
+          />
+          <div
+            class="ant-tooltip-content"
+          >
+            <div
+              class="ant-tooltip-inner"
+              role="tooltip"
+            >
+              Send ↵
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-sender css-var-r3"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-r3 ant-input-css-var ant-sender-input"
+        placeholder="Change button icon"
+        style="overflow-y: hidden; resize: none;"
+      >
+        Ask something?
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
+        <button
+          class="ant-btn css-var-r3 ant-btn-primary ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
           >
             <span
-              class="ant-btn-icon"
+              aria-label="send"
+              class="anticon anticon-send"
+              role="img"
             >
-              <span
-                aria-label="send"
-                class="anticon anticon-send"
-                role="img"
+              <svg
+                aria-hidden="true"
+                data-icon="send"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="send"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                  />
-                </svg>
-              </span>
+                <defs>
+                  <style />
+                </defs>
+                <path
+                  d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                />
+              </svg>
             </span>
-          </button>
+          </span>
+        </button>
+        <div
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast css-var-r3 ant-tooltip-placement-top"
+          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; bottom: 0px; left: 0px;"
+          />
+          <div
+            class="ant-tooltip-content"
+          >
+            <div
+              class="ant-tooltip-inner"
+              role="tooltip"
+            >
+              Send ↵
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <div
+      class="ant-sender css-var-r3"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-r3 ant-input-css-var ant-sender-input"
+        placeholder="Loading not change button"
+        style="overflow-y: hidden; resize: none;"
+      >
+        Ask something?
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
+        <button
+          class="ant-btn css-var-r3 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>
 `;
 
-exports[`renders components/sender/demo/submitType.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/sender/demo/send-style.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/sender/demo/submitType.tsx extend context correctly 1`] = `
+<div
+  class="ant-app css-var-r1"
+>
+  <div
+    class="ant-sender css-var-r1"
+  >
+    <textarea
+      class="ant-input ant-input-borderless css-var-r1 ant-input-css-var ant-sender-input"
+      placeholder="Press Shift + Enter to send message"
+      style="overflow-y: hidden; resize: none;"
+    />
+    <div
+      class="ant-sender-actions-list"
+    >
+      <div
+        class="ant-sender-actions-list-presets ant-flex css-var-r1"
+      >
+        <button
+          class="ant-btn css-var-r1 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"
+          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>
+`;
+
+exports[`renders components/sender/demo/submitType.tsx extend context correctly 2`] = `
+[
+  "Warning: \`NaN\` is an invalid value for the \`%s\` css style property.%s",
+]
+`;
diff --git a/components/sender/__tests__/__snapshots__/demo.test.ts.snap b/components/sender/__tests__/__snapshots__/demo.test.ts.snap
index 1d9b2ca1..c96bab94 100644
--- a/components/sender/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/sender/__tests__/__snapshots__/demo.test.ts.snap
@@ -8,7 +8,7 @@ exports[`renders components/sender/demo/actions.tsx correctly 1`] = `
     class="ant-sender css-var-R0"
   >
     <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
+      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
     />
     <div
       class="ant-sender-actions-list"
@@ -31,64 +31,7 @@ exports[`renders components/sender/demo/actions.tsx correctly 1`] = `
           class="ant-space-item"
         >
           <button
-            class="ant-btn css-var-R0 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="open-a-i"
-                class="anticon anticon-open-a-i"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="open-a-i"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M482.88 128c-84.35 0-156.58 52.8-185.68 126.98-60.89 8.13-115.3 43.63-146.6 97.84-42.16 73-32.55 161.88 17.14 224.16-23.38 56.75-19.85 121.6 11.42 175.78 42.18 73.02 124.1 109.15 202.94 97.23C419.58 898.63 477.51 928 540.12 928c84.35 0 156.58-52.8 185.68-126.98 60.89-8.13 115.3-43.62 146.6-97.84 42.16-73 32.55-161.88-17.14-224.16 23.38-56.75 19.85-121.6-11.42-175.78-42.18-73.02-124.1-109.15-202.94-97.23C603.42 157.38 545.49 128 482.88 128m0 61.54c35.6 0 68.97 13.99 94.22 37.74-1.93 1.03-3.92 1.84-5.83 2.94l-136.68 78.91a46.11 46.11 0 00-23.09 39.78l-.84 183.6-65.72-38.34V327.4c0-76 61.9-137.86 137.94-137.86m197.7 75.9c44.19 3.14 86.16 27.44 109.92 68.57 17.8 30.8 22.38 66.7 14.43 100.42-1.88-1.17-3.6-2.49-5.53-3.6l-136.73-78.91a46.23 46.23 0 00-46-.06l-159.47 91.1.36-76.02 144.5-83.41a137.19 137.19 0 0178.53-18.09m-396.92 55.4c-.07 2.2-.3 4.35-.3 6.56v157.75a46.19 46.19 0 0022.91 39.9l158.68 92.5-66.02 37.67-144.55-83.35c-65.86-38-88.47-122.53-50.45-188.34 17.78-30.78 46.55-52.69 79.73-62.68m340.4 79.93l144.54 83.35c65.86 38 88.47 122.53 50.45 188.34-17.78 30.78-46.55 52.69-79.73 62.68.07-2.19.3-4.34.3-6.55V570.85a46.19 46.19 0 00-22.9-39.9l-158.69-92.5zM511.8 464.84l54.54 31.79-.3 63.22-54.84 31.31-54.54-31.85.3-63.16zm100.54 58.65l65.72 38.35V728.6c0 76-61.9 137.86-137.94 137.86-35.6 0-68.97-13.99-94.22-37.74 1.93-1.03 3.92-1.84 5.83-2.94l136.68-78.9a46.11 46.11 0 0023.09-39.8zm-46.54 89.55l-.36 76.02-144.5 83.41c-65.85 38-150.42 15.34-188.44-50.48-17.8-30.8-22.38-66.7-14.43-100.42 1.88 1.17 3.6 2.5 5.53 3.6l136.74 78.91a46.23 46.23 0 0046 .06z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders components/sender/demo/basic.tsx correctly 1`] = `
-<div
-  class="ant-app css-var-R0"
->
-  <div
-    class="ant-sender css-var-R0"
-  >
-    <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
-    >
-      Hello? this is X!
-    </textarea>
-    <div
-      class="ant-sender-actions-list"
-    >
-      <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
-      >
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
             type="button"
           >
             <span
@@ -123,31 +66,29 @@ exports[`renders components/sender/demo/basic.tsx correctly 1`] = `
           class="ant-space-item"
         >
           <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+            class="ant-btn css-var-R0 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="send"
-                class="anticon anticon-send"
+                aria-label="open-a-i"
+                class="anticon anticon-open-a-i"
                 role="img"
               >
                 <svg
                   aria-hidden="true"
-                  data-icon="send"
+                  data-icon="open-a-i"
                   fill="currentColor"
+                  fill-rule="evenodd"
                   focusable="false"
                   height="1em"
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                    d="M482.88 128c-84.35 0-156.58 52.8-185.68 126.98-60.89 8.13-115.3 43.63-146.6 97.84-42.16 73-32.55 161.88 17.14 224.16-23.38 56.75-19.85 121.6 11.42 175.78 42.18 73.02 124.1 109.15 202.94 97.23C419.58 898.63 477.51 928 540.12 928c84.35 0 156.58-52.8 185.68-126.98 60.89-8.13 115.3-43.62 146.6-97.84 42.16-73 32.55-161.88-17.14-224.16 23.38-56.75 19.85-121.6-11.42-175.78-42.18-73.02-124.1-109.15-202.94-97.23C603.42 157.38 545.49 128 482.88 128m0 61.54c35.6 0 68.97 13.99 94.22 37.74-1.93 1.03-3.92 1.84-5.83 2.94l-136.68 78.91a46.11 46.11 0 00-23.09 39.78l-.84 183.6-65.72-38.34V327.4c0-76 61.9-137.86 137.94-137.86m197.7 75.9c44.19 3.14 86.16 27.44 109.92 68.57 17.8 30.8 22.38 66.7 14.43 100.42-1.88-1.17-3.6-2.49-5.53-3.6l-136.73-78.91a46.23 46.23 0 00-46-.06l-159.47 91.1.36-76.02 144.5-83.41a137.19 137.19 0 0178.53-18.09m-396.92 55.4c-.07 2.2-.3 4.35-.3 6.56v157.75a46.19 46.19 0 0022.91 39.9l158.68 92.5-66.02 37.67-144.55-83.35c-65.86-38-88.47-122.53-50.45-188.34 17.78-30.78 46.55-52.69 79.73-62.68m340.4 79.93l144.54 83.35c65.86 38 88.47 122.53 50.45 188.34-17.78 30.78-46.55 52.69-79.73 62.68.07-2.19.3-4.34.3-6.55V570.85a46.19 46.19 0 00-22.9-39.9l-158.69-92.5zM511.8 464.84l54.54 31.79-.3 63.22-54.84 31.31-54.54-31.85.3-63.16zm100.54 58.65l65.72 38.35V728.6c0 76-61.9 137.86-137.94 137.86-35.6 0-68.97-13.99-94.22-37.74 1.93-1.03 3.92-1.84 5.83-2.94l136.68-78.9a46.11 46.11 0 0023.09-39.8zm-46.54 89.55l-.36 76.02-144.5 83.41c-65.85 38-150.42 15.34-188.44-50.48-17.8-30.8-22.38-66.7-14.43-100.42 1.88 1.17 3.6 2.5 5.53 3.6l136.74 78.91a46.23 46.23 0 0046 .06z"
                   />
                 </svg>
               </span>
@@ -160,89 +101,166 @@ exports[`renders components/sender/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders components/sender/demo/submitType.tsx correctly 1`] = `
+exports[`renders components/sender/demo/basic.tsx correctly 1`] = `
 <div
   class="ant-app css-var-R0"
 >
   <div
-    class="ant-sender css-var-R0"
+    class="ant-flex css-var-R0 ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   >
-    <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
-      placeholder="Press Shift + Enter to send message"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender css-var-R0"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+      >
+        Hello? this is X!
+      </textarea>
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
+        class="ant-sender-actions-list"
       >
         <div
-          class="ant-space-item"
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
           <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
+            class="ant-btn css-var-R0 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="clear"
-                class="anticon anticon-clear"
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
                 role="img"
               >
                 <svg
                   aria-hidden="true"
-                  data-icon="clear"
+                  data-icon="arrow-up"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
+                    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
+      class="ant-sender css-var-R0"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+        readonly=""
+      >
+        Force as loading
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
         <div
-          class="ant-space-item"
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
+        >
+          <button
+            class="ant-btn css-var-R0 ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+            type="button"
+          >
+            <svg
+              class="ant-sender-actions-btn-loading-icon"
+              color="currentColor"
+              viewBox="0 0 1000 1000"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <title>
+                Stop Loading Icon
+              </title>
+              <rect
+                fill="currentColor"
+                height="250"
+                rx="24"
+                ry="24"
+                width="250"
+                x="375"
+                y="375"
+              />
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                opacity="0.45"
+                r="450"
+                stroke="currentColor"
+                stroke-width="100"
+              />
+              <circle
+                cx="500"
+                cy="500"
+                fill="none"
+                r="450"
+                stroke="currentColor"
+                stroke-dasharray="600 9999999"
+                stroke-width="100"
+              >
+                <animatetransform
+                  attributeName="transform"
+                  dur="1s"
+                  from="0 500 500"
+                  repeatCount="indefinite"
+                  to="360 500 500"
+                  type="rotate"
+                />
+              </circle>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-sender css-var-R0 ant-sender-disabled"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input ant-input-disabled"
+        disabled=""
+      >
+        Set to disabled
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
           <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
+            class="ant-btn css-var-R0 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"
             type="button"
           >
             <span
               class="ant-btn-icon"
             >
               <span
-                aria-label="send"
-                class="anticon anticon-send"
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
                 role="img"
               >
                 <svg
                   aria-hidden="true"
-                  data-icon="send"
+                  data-icon="arrow-up"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
                   viewBox="64 64 896 896"
                   width="1em"
                 >
-                  <defs>
-                    <style />
-                  </defs>
                   <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                    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>
@@ -254,3 +272,195 @@ exports[`renders components/sender/demo/submitType.tsx correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders components/sender/demo/send-style.tsx correctly 1`] = `
+<div
+  class="ant-app css-var-R0"
+>
+  <div
+    class="ant-flex css-var-R0 ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+  >
+    <div
+      class="ant-sender css-var-R0"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+        placeholder="Change button border radius"
+      >
+        Ask something?
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
+        <button
+          class="ant-btn css-var-R0 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"
+        >
+          <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
+      class="ant-sender css-var-R0"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+        placeholder="Change button icon"
+      >
+        Ask something?
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
+        <button
+          class="ant-btn css-var-R0 ant-btn-primary ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              aria-label="send"
+              class="anticon anticon-send"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="send"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <defs>
+                  <style />
+                </defs>
+                <path
+                  d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="ant-sender css-var-R0"
+    >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+        placeholder="Loading not change button"
+      >
+        Ask something?
+      </textarea>
+      <div
+        class="ant-sender-actions-list"
+      >
+        <button
+          class="ant-btn css-var-R0 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>
+`;
+
+exports[`renders components/sender/demo/submitType.tsx correctly 1`] = `
+<div
+  class="ant-app css-var-R0"
+>
+  <div
+    class="ant-sender css-var-R0"
+  >
+    <textarea
+      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+      placeholder="Press Shift + Enter to send message"
+    />
+    <div
+      class="ant-sender-actions-list"
+    >
+      <div
+        class="ant-sender-actions-list-presets ant-flex css-var-R0"
+      >
+        <button
+          class="ant-btn css-var-R0 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"
+          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>
+`;
diff --git a/components/sender/__tests__/__snapshots__/index.test.tsx.snap b/components/sender/__tests__/__snapshots__/index.test.tsx.snap
index af265867..0a00230f 100644
--- a/components/sender/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/sender/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,49 +6,68 @@ exports[`Sender Component loading state 1`] = `
   class="ant-sender"
 >
   <textarea
-    class="ant-input ant-input-outlined ant-sender-input"
+    class="ant-input ant-input-borderless ant-sender-input"
     readonly=""
-    style="resize: none; height: -54px; max-height: -54px;"
+    style="overflow-y: hidden; resize: none;"
   />
   <div
     class="ant-sender-actions-list"
   >
     <div
-      class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+      class="ant-sender-actions-list-presets ant-flex"
     >
-      <div
-        class="ant-space-item"
+      <button
+        class="ant-btn ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+        type="button"
       >
-        <button
-          class="ant-btn ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-          disabled=""
-          type="button"
+        <svg
+          class="ant-sender-actions-btn-loading-icon"
+          color="currentColor"
+          viewBox="0 0 1000 1000"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
         >
-          <span
-            class="ant-btn-icon"
+          <title>
+            Stop Loading Icon
+          </title>
+          <rect
+            fill="currentColor"
+            height="250"
+            rx="24"
+            ry="24"
+            width="250"
+            x="375"
+            y="375"
+          />
+          <circle
+            cx="500"
+            cy="500"
+            fill="none"
+            opacity="0.45"
+            r="450"
+            stroke="currentColor"
+            stroke-width="100"
+          />
+          <circle
+            cx="500"
+            cy="500"
+            fill="none"
+            r="450"
+            stroke="currentColor"
+            stroke-dasharray="600 9999999"
+            stroke-width="100"
           >
-            <span
-              aria-label="clear"
-              class="anticon anticon-clear"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="clear"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs>
-                  <style />
-                </defs>
-              </svg>
-            </span>
-          </span>
-        </button>
-      </div>
+            <animatetransform
+              attributeName="transform"
+              dur="1s"
+              from="0 500 500"
+              repeatCount="indefinite"
+              to="360 500 500"
+              type="rotate"
+            />
+          </circle>
+        </svg>
+      </button>
     </div>
   </div>
 </div>
@@ -60,87 +79,43 @@ exports[`Sender Component rtl render component should be rendered correctly in R
   class="ant-sender css-var-r1 ant-sender-rtl"
 >
   <textarea
-    class="ant-input ant-input-outlined css-var-r1 ant-input-css-var ant-sender-input"
-    style="resize: none; height: -110px; max-height: -110px;"
+    class="ant-input ant-input-borderless css-var-r1 ant-input-css-var ant-sender-input"
+    style="overflow-y: hidden; resize: none;"
   />
   <div
     class="ant-sender-actions-list"
   >
     <div
-      class="ant-space ant-space-horizontal ant-space-rtl ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-r1"
+      class="ant-sender-actions-list-presets ant-flex css-var-r1 ant-flex-rtl"
     >
-      <div
-        class="ant-space-item"
-      >
-        <button
-          class="ant-btn css-var-r1 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-btn-rtl ant-sender-actions-btn"
-          disabled=""
-          type="button"
-        >
-          <span
-            class="ant-btn-icon"
-          >
-            <span
-              aria-label="clear"
-              class="anticon anticon-clear"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="clear"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs>
-                  <style />
-                </defs>
-                <path
-                  d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                />
-              </svg>
-            </span>
-          </span>
-        </button>
-      </div>
-      <div
-        class="ant-space-item"
+      <button
+        class="ant-btn css-var-r1 ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-btn-rtl ant-sender-actions-btn ant-sender-actions-btn-disabled"
+        type="button"
       >
-        <button
-          class="ant-btn css-var-r1 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-btn-rtl ant-sender-actions-btn"
-          disabled=""
-          type="button"
+        <span
+          class="ant-btn-icon"
         >
           <span
-            class="ant-btn-icon"
+            aria-label="arrow-up"
+            class="anticon anticon-arrow-up"
+            role="img"
           >
-            <span
-              aria-label="send"
-              class="anticon anticon-send"
-              role="img"
+            <svg
+              aria-hidden="true"
+              data-icon="arrow-up"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="send"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <defs>
-                  <style />
-                </defs>
-                <path
-                  d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                />
-              </svg>
-            </span>
+              <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>
-        </button>
-      </div>
+        </span>
+      </button>
     </div>
   </div>
 </div>
diff --git a/components/sender/__tests__/index.test.tsx b/components/sender/__tests__/index.test.tsx
index 0bef2928..1190aa60 100644
--- a/components/sender/__tests__/index.test.tsx
+++ b/components/sender/__tests__/index.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { fireEvent, render } from '@testing-library/react';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Sender from '../index';
-import { fireEvent, render } from '@testing-library/react';
 
 describe('Sender Component', () => {
   mountTest(() => <Sender />);
@@ -61,20 +61,25 @@ describe('Sender Component', () => {
   it('onSubmit', () => {
     const onSubmit = jest.fn();
     const { container } = render(<Sender value="bamboo" onSubmit={onSubmit} />);
-    fireEvent.click(container.querySelectorAll('button')[1]);
+    fireEvent.click(container.querySelector('button')!);
     expect(onSubmit).toHaveBeenCalledWith('bamboo');
   });
 
   it('onCancel', () => {
     const onCancel = jest.fn();
     const { container } = render(<Sender loading onCancel={onCancel} />);
-    fireEvent.click(container.querySelectorAll('button')[1]);
+    fireEvent.click(container.querySelector('button')!);
     expect(onCancel).toHaveBeenCalled();
   });
 
   it('onClear', () => {
     const onChange = jest.fn();
-    const { container } = render(<Sender onChange={onChange} />);
+    const { container } = render(
+      <Sender
+        onChange={onChange}
+        actions={(_, { components: { ClearButton } }) => <ClearButton />}
+      />,
+    );
 
     fireEvent.change(container.querySelector('textarea')!, { target: { value: 'bamboo' } });
     expect(onChange).toHaveBeenCalledWith('bamboo');
diff --git a/components/sender/components/ActionButton.tsx b/components/sender/components/ActionButton.tsx
index 8851309d..2c3f30d3 100644
--- a/components/sender/components/ActionButton.tsx
+++ b/components/sender/components/ActionButton.tsx
@@ -10,6 +10,7 @@ export interface ActionButtonContextProps {
   onClearDisabled?: boolean;
   onCancel?: VoidFunction;
   onCancelDisabled?: boolean;
+  disabled?: boolean;
 }
 
 export const ActionButtonContext = React.createContext<ActionButtonContextProps>(null!);
@@ -18,26 +19,34 @@ export interface ActionButtonProps extends ButtonProps {
   action: 'onSend' | 'onClear' | 'onCancel';
 }
 
-export default function ActionButton(props: ActionButtonProps) {
+export function ActionButton(props: ActionButtonProps, ref: React.Ref<HTMLButtonElement>) {
   const { className, action, onClick: outClick, ...restProps } = props;
   const context = React.useContext(ActionButtonContext);
+  const { prefixCls, disabled: rootDisabled } = context;
 
   const onClick = context[action];
-  const disabled = context[`${action}Disabled`];
+  const mergedDisabled = rootDisabled ?? restProps.disabled ?? context[`${action}Disabled`];
+
   return (
     <Button
       type="text"
-      disabled={disabled}
       {...restProps}
+      ref={ref}
       onClick={(e) => {
-        if (onClick) {
-          onClick();
-        }
-        if (outClick) {
-          outClick(e);
+        if (!mergedDisabled) {
+          if (onClick) {
+            onClick();
+          }
+          if (outClick) {
+            outClick(e);
+          }
         }
       }}
-      className={classNames(context.prefixCls, className)}
+      className={classNames(prefixCls, className, {
+        [`${prefixCls}-disabled`]: mergedDisabled,
+      })}
     />
   );
 }
+
+export default React.forwardRef(ActionButton);
diff --git a/components/sender/components/ClearButton.tsx b/components/sender/components/ClearButton.tsx
index 62d2d86b..44d3ddfa 100644
--- a/components/sender/components/ClearButton.tsx
+++ b/components/sender/components/ClearButton.tsx
@@ -1,8 +1,10 @@
-import * as React from 'react';
-import ActionButton from './ActionButton';
 import { ClearOutlined } from '@ant-design/icons';
 import type { ButtonProps } from 'antd';
+import * as React from 'react';
+import ActionButton from './ActionButton';
 
-export default function ClearButton(props: ButtonProps) {
-  return <ActionButton icon={<ClearOutlined />} {...props} action="onClear" />;
+export function ClearButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
+  return <ActionButton icon={<ClearOutlined />} {...props} action="onClear" ref={ref} />;
 }
+
+export default React.forwardRef(ClearButton);
diff --git a/components/sender/components/LoadingButton.tsx b/components/sender/components/LoadingButton.tsx
index 0917191d..17cac5fb 100644
--- a/components/sender/components/LoadingButton.tsx
+++ b/components/sender/components/LoadingButton.tsx
@@ -1,8 +1,27 @@
-import * as React from 'react';
-import ActionButton from './ActionButton';
 import type { ButtonProps } from 'antd';
+import classNames from 'classnames';
+import * as React from 'react';
 import StopLoadingIcon from '../StopLoading';
+import ActionButton, { ActionButtonContext } from './ActionButton';
 
-export default function LoadingButton(props: ButtonProps) {
-  return <ActionButton icon={<StopLoadingIcon />} {...props} action="onCancel" />;
+export function LoadingButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
+  const { prefixCls } = React.useContext(ActionButtonContext);
+  const { className } = props;
+
+  return (
+    <ActionButton
+      icon={null}
+      color="primary"
+      variant="text"
+      shape="circle"
+      {...props}
+      className={classNames(className, `${prefixCls}-loading-button`)}
+      action="onCancel"
+      ref={ref}
+    >
+      <StopLoadingIcon className={`${prefixCls}-loading-icon`} />
+    </ActionButton>
+  );
 }
+
+export default React.forwardRef(LoadingButton);
diff --git a/components/sender/components/SendButton.tsx b/components/sender/components/SendButton.tsx
index 781daaa9..24e07db3 100644
--- a/components/sender/components/SendButton.tsx
+++ b/components/sender/components/SendButton.tsx
@@ -1,8 +1,19 @@
+import { ArrowUpOutlined } from '@ant-design/icons';
+import type { ButtonProps } from 'antd';
 import * as React from 'react';
 import ActionButton from './ActionButton';
-import { SendOutlined } from '@ant-design/icons';
-import type { ButtonProps } from 'antd';
 
-export default function SendButton(props: ButtonProps) {
-  return <ActionButton icon={<SendOutlined />} {...props} action="onSend" />;
+export function SendButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
+  return (
+    <ActionButton
+      icon={<ArrowUpOutlined />}
+      type="primary"
+      shape="circle"
+      {...props}
+      action="onSend"
+      ref={ref}
+    />
+  );
 }
+
+export default React.forwardRef(SendButton);
diff --git a/components/sender/demo/actions.tsx b/components/sender/demo/actions.tsx
index c9bca3b9..a99acbb5 100644
--- a/components/sender/demo/actions.tsx
+++ b/components/sender/demo/actions.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { OpenAIOutlined } from '@ant-design/icons';
 import { Sender } from '@ant-design/x';
 import { App, Space, Spin, Typography } from 'antd';
-import { OpenAIOutlined } from '@ant-design/icons';
+import React from 'react';
 
 const Demo: React.FC = () => {
   const [loading, setLoading] = React.useState(false);
@@ -35,13 +35,14 @@ const Demo: React.FC = () => {
         setLoading(false);
       }}
       actions={(_, info) => {
-        const { SendButton, LoadingButton } = info.components;
+        const { SendButton, LoadingButton, ClearButton } = info.components;
 
         return (
           <Space size="small">
             <Typography.Text type="secondary">
               <small>`Shift + Enter` to submit</small>
             </Typography.Text>
+            <ClearButton />
             {loading ? (
               <LoadingButton type="default" icon={<Spin size="small" />} disabled />
             ) : (
diff --git a/components/sender/demo/basic.tsx b/components/sender/demo/basic.tsx
index 9972a66d..c121cde2 100644
--- a/components/sender/demo/basic.tsx
+++ b/components/sender/demo/basic.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import { Sender } from '@ant-design/x';
-import { App } from 'antd';
+import { App, Flex } from 'antd';
+import React, { useState } from 'react';
 
 const Demo: React.FC = () => {
   const [value, setValue] = useState<string>('Hello? this is X!');
@@ -22,22 +22,26 @@ const Demo: React.FC = () => {
   }, [loading]);
 
   return (
-    <Sender
-      loading={loading}
-      value={value}
-      onChange={(v) => {
-        setValue(v);
-      }}
-      onSubmit={() => {
-        setValue('');
-        setLoading(true);
-        message.info('Send message!');
-      }}
-      onCancel={() => {
-        setLoading(false);
-        message.error('Cancel sending!');
-      }}
-    />
+    <Flex vertical gap="middle">
+      <Sender
+        loading={loading}
+        value={value}
+        onChange={(v) => {
+          setValue(v);
+        }}
+        onSubmit={() => {
+          setValue('');
+          setLoading(true);
+          message.info('Send message!');
+        }}
+        onCancel={() => {
+          setLoading(false);
+          message.error('Cancel sending!');
+        }}
+      />
+      <Sender value="Force as loading" loading />
+      <Sender disabled value="Set to disabled" />
+    </Flex>
   );
 };
 
diff --git a/components/sender/demo/send-style.md b/components/sender/demo/send-style.md
new file mode 100644
index 00000000..3b3d310d
--- /dev/null
+++ b/components/sender/demo/send-style.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过 `actions` 属性，调整默认样式。
+
+## en-US
+
+Customize the default style through the `actions` property.
diff --git a/components/sender/demo/send-style.tsx b/components/sender/demo/send-style.tsx
new file mode 100644
index 00000000..a0b9cd0e
--- /dev/null
+++ b/components/sender/demo/send-style.tsx
@@ -0,0 +1,91 @@
+import { SendOutlined } from '@ant-design/icons';
+import { Sender } from '@ant-design/x';
+import { App, type ButtonProps, Flex, Tooltip } from 'antd';
+import React from 'react';
+
+const Demo: React.FC = () => {
+  const [value, setValue] = React.useState('Ask something?');
+  const [loading, setLoading] = React.useState(false);
+
+  const { message } = App.useApp();
+
+  React.useEffect(() => {
+    if (loading) {
+      const timer = setTimeout(() => {
+        setLoading(false);
+      }, 3000);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [loading]);
+
+  const renderSend = (
+    props: ButtonProps & { ignoreLoading?: boolean; placeholder?: string } = {},
+  ) => {
+    const { ignoreLoading, placeholder, ...btnProps } = props;
+
+    return (
+      <Sender
+        value={value}
+        onChange={setValue}
+        loading={loading}
+        onSubmit={(msg) => {
+          message.success(`Send: ${msg}`);
+          setValue('');
+          setLoading(true);
+        }}
+        placeholder={placeholder}
+        onCancel={() => {
+          setLoading(false);
+        }}
+        actions={(_, info) => {
+          const { SendButton, LoadingButton } = info.components;
+
+          if (!ignoreLoading && loading) {
+            return (
+              <Tooltip title="Click to cancel">
+                <LoadingButton />
+              </Tooltip>
+            );
+          }
+
+          let node = <SendButton {...btnProps} />;
+
+          if (!ignoreLoading) {
+            node = (
+              <Tooltip title={value ? 'Send \u21B5' : 'Please type something'}>{node}</Tooltip>
+            );
+          }
+
+          return node;
+        }}
+      />
+    );
+  };
+
+  return (
+    <Flex vertical gap="middle">
+      {renderSend({
+        shape: 'default',
+        placeholder: 'Change button border radius',
+        style: { borderRadius: 12 },
+      })}
+      {renderSend({
+        variant: 'text',
+        placeholder: 'Change button icon',
+        color: 'primary',
+        icon: <SendOutlined />,
+        shape: 'default',
+      })}
+      {renderSend({ ignoreLoading: true, placeholder: 'Loading not change button' })}
+    </Flex>
+  );
+};
+
+export default () => (
+  <App>
+    <Demo />
+  </App>
+);
diff --git a/components/sender/index.en-US.md b/components/sender/index.en-US.md
index b4724193..a5bcb588 100644
--- a/components/sender/index.en-US.md
+++ b/components/sender/index.en-US.md
@@ -17,6 +17,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/submitType.tsx">Submit type</code>
 <code src="./demo/actions.tsx">Custom actions</code>
+<code src="./demo/send-style.tsx">Adjust style</code>
 
 ## API
 
diff --git a/components/sender/index.tsx b/components/sender/index.tsx
index 1eb8d23a..c2ed914d 100644
--- a/components/sender/index.tsx
+++ b/components/sender/index.tsx
@@ -1,4 +1,4 @@
-import { type ButtonProps, type GetProps, Input, Space } from 'antd';
+import { type ButtonProps, Flex, type GetProps, Input } from 'antd';
 import classnames from 'classnames';
 
 import { useMergedState } from 'rc-util';
@@ -84,6 +84,7 @@ const Sender: React.FC<SenderProps> = (props) => {
     actions,
     onKeyPress,
     onKeyDown,
+    disabled,
     ...rest
   } = props;
 
@@ -91,14 +92,13 @@ const Sender: React.FC<SenderProps> = (props) => {
   const { direction, getPrefixCls } = useXProviderContext();
   const prefixCls = getPrefixCls('sender', customizePrefixCls);
 
-  const domProps = pickAttrs(rest, {
-    attr: true,
-    aria: true,
-    data: true,
-  });
+  // ============================= Refs =============================
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
 
   // ===================== Component Config =========================
   const contextConfig = useXComponentConfig('sender');
+  const inputCls = `${prefixCls}-input`;
 
   // ============================ Styles ============================
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -111,10 +111,12 @@ const Sender: React.FC<SenderProps> = (props) => {
     cssVarCls,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-disabled`]: disabled,
     },
   );
 
   const actionBtnCls = `${prefixCls}-actions-btn`;
+  const actionListCls = `${prefixCls}-actions-list`;
 
   // ============================ Value =============================
   const [innerValue, setInnerValue] = useMergedState(defaultValue || '', {
@@ -132,6 +134,17 @@ const Sender: React.FC<SenderProps> = (props) => {
   // ========================== Components ==========================
   const InputTextArea = getComponent(components, ['input'], Input.TextArea);
 
+  const domProps = pickAttrs(rest, {
+    attr: true,
+    aria: true,
+    data: true,
+  });
+
+  const inputProps: typeof domProps = {
+    ...domProps,
+    ref: inputRef,
+  };
+
   // ============================ Events ============================
   const triggerSend = () => {
     if (innerValue && onSubmit) {
@@ -143,18 +156,31 @@ const Sender: React.FC<SenderProps> = (props) => {
     triggerValueChange('');
   };
 
+  // ============================ Submit ============================
+  const isCompositionRef = React.useRef(false);
+
+  const onInternalCompositionStart = () => {
+    isCompositionRef.current = true;
+  };
+
+  const onInternalCompositionEnd = () => {
+    isCompositionRef.current = false;
+  };
+
   const onInternalKeyPress: TextareaProps['onKeyPress'] = (e) => {
+    const canSubmit = e.key === 'Enter' && !isCompositionRef.current;
+
     // Check for `submitType` to submit
     switch (submitType) {
       case 'enter':
-        if (e.key === 'Enter' && !e.shiftKey) {
+        if (canSubmit && !e.shiftKey) {
           e.preventDefault();
           triggerSend();
         }
         break;
 
       case 'shiftEnter':
-        if (e.key === 'Enter' && e.shiftKey) {
+        if (canSubmit && e.shiftKey) {
           e.preventDefault();
           triggerSend();
         }
@@ -166,15 +192,24 @@ const Sender: React.FC<SenderProps> = (props) => {
     }
   };
 
+  // ============================ Focus =============================
+  const onInternalMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    // If input focused but click on the container,
+    // input will lose focus.
+    // We call `preventDefault` to prevent this behavior
+    if (e.target !== containerRef.current?.querySelector(`.${inputCls}`)) {
+      e.preventDefault();
+    }
+
+    inputRef.current?.focus();
+  };
+
   // ============================ Action ============================
   let actionNode: React.ReactNode = (
-    <Space>
-      {/* Clear */}
-      <ClearButton />
-
+    <Flex className={`${actionListCls}-presets`}>
       {/* Loading or Send */}
       {loading ? <LoadingButton /> : <SendButton />}
-    </Space>
+    </Flex>
   );
 
   // Custom actions
@@ -192,32 +227,33 @@ const Sender: React.FC<SenderProps> = (props) => {
 
   // ============================ Render ============================
   return wrapCSSVar(
-    <div className={mergedCls} style={{ ...contextConfig.style, ...style }}>
+    <div
+      ref={containerRef}
+      className={mergedCls}
+      style={{ ...contextConfig.style, ...style }}
+      onMouseDown={onInternalMouseDown}
+    >
       <InputTextArea
-        {...domProps}
+        {...inputProps}
+        disabled={disabled}
         style={{ ...contextConfig.styles.input, ...styles.input }}
-        className={classnames(
-          `${prefixCls}-input`,
-          contextConfig.classNames.input,
-          classNames.input,
-        )}
+        className={classnames(inputCls, contextConfig.classNames.input, classNames.input)}
         autoSize={{ maxRows: 8 }}
         value={innerValue}
         onChange={(e) => {
           triggerValueChange((e.target as HTMLTextAreaElement).value);
         }}
         onPressEnter={onInternalKeyPress}
+        onCompositionStart={onInternalCompositionStart}
+        onCompositionEnd={onInternalCompositionEnd}
         onKeyDown={onKeyDown}
         readOnly={loading}
+        variant="borderless"
       />
 
       {/* Action List */}
       <div
-        className={classnames(
-          `${prefixCls}-actions-list`,
-          contextConfig.classNames.actions,
-          classNames.actions,
-        )}
+        className={classnames(actionListCls, contextConfig.classNames.actions, classNames.actions)}
         style={{ ...contextConfig.styles.actions, ...styles.actions }}
       >
         <ActionButtonContext.Provider
@@ -229,6 +265,7 @@ const Sender: React.FC<SenderProps> = (props) => {
             onClearDisabled: !innerValue,
             onCancel,
             onCancelDisabled: !loading,
+            disabled,
           }}
         >
           {actionNode}
diff --git a/components/sender/index.zh-CN.md b/components/sender/index.zh-CN.md
index 4cdf7dc8..9e053e42 100644
--- a/components/sender/index.zh-CN.md
+++ b/components/sender/index.zh-CN.md
@@ -18,6 +18,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 <code src="./demo/basic.tsx">基本用法</code>
 <code src="./demo/submitType.tsx">提交模式</code>
 <code src="./demo/actions.tsx">自定义按钮</code>
+<code src="./demo/send-style.tsx">调整样式</code>
 
 ## API
 
diff --git a/components/sender/style/index.ts b/components/sender/style/index.ts
index 61caffaa..77231b90 100644
--- a/components/sender/style/index.ts
+++ b/components/sender/style/index.ts
@@ -11,32 +11,101 @@ interface SenderToken extends FullToken<'Sender'> {
 }
 
 const genSenderStyle: GenerateStyle<SenderToken> = (token) => {
-  const { componentCls, paddingXS, paddingXXS, boxShadowSecondary, calc } = token;
+  const { componentCls, padding, paddingSM, paddingXS, lineWidth, lineWidthBold, calc } = token;
+
   return {
     [componentCls]: {
       position: 'relative',
       display: 'flex',
+      gap: paddingXS,
       width: '100%',
 
+      paddingBlock: paddingSM,
+      paddingInlineStart: padding,
+      paddingInlineEnd: paddingSM,
+      boxSizing: 'border-box',
+      alignItems: 'flex-end',
+      boxShadow: `${token.boxShadowTertiary}`,
+      transition: `background ${token.motionDurationSlow}`,
+
+      // Border
+      borderRadius: {
+        _skip_check_: true,
+        value: calc(token.borderRadius).mul(2).equal(),
+      },
+      borderColor: token.colorBorder,
+      borderWidth: 0,
+      borderStyle: 'solid',
+
+      // Border
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        transition: `border-color ${token.motionDurationSlow}`,
+
+        borderRadius: {
+          _skip_check_: true,
+          value: 'inherit',
+        },
+        borderStyle: 'inherit',
+        borderColor: 'inherit',
+        borderWidth: lineWidth,
+      },
+
+      // Focus
+      '&:focus-within': {
+        boxShadow: `${token.boxShadowSecondary}`,
+        borderColor: token.colorPrimary,
+
+        '&:after': {
+          borderWidth: lineWidthBold,
+        },
+      },
+
+      '&-disabled': {
+        background: token.colorBgContainerDisabled,
+      },
+
+      // ============================== RTL ==============================
       [`&${componentCls}-rtl`]: {
         direction: 'rtl',
       },
 
+      // ============================= Input =============================
+      [`& ${componentCls}-input`]: {
+        padding: 0,
+        borderRadius: 0,
+        flex: 'auto',
+        alignSelf: 'center',
+        minHeight: 'auto',
+      },
+
+      // ============================ Actions ============================
       [`& ${componentCls}-actions-list`]: {
-        position: 'absolute',
-        zIndex: 1,
-        insetInlineEnd: paddingXXS,
-        bottom: calc(paddingXS).sub(paddingXXS).equal(),
+        flex: 'none',
+        display: 'flex',
+
+        '&-presets': {
+          gap: token.paddingXS,
+        },
       },
 
-      [`& ${componentCls}-actions-btn`]: {},
-      [`& ${componentCls}-input`]: {
-        position: 'sticky',
-        fontSize: token.fontSize,
-        bottom: 0,
-        boxShadow: boxShadowSecondary,
-        paddingTop: paddingXS,
-        paddingBottom: paddingXS,
+      [`& ${componentCls}-actions-btn`]: {
+        '&-disabled': {
+          opacity: 0.45,
+        },
+
+        '&-loading-button': {
+          padding: 0,
+          border: 0,
+        },
+
+        '&-loading-icon': {
+          height: token.controlHeight,
+          width: token.controlHeight,
+        },
       },
     },
   };
diff --git a/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3f401078..d9e95966 100644
--- a/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -9,88 +9,44 @@ Array [
       class="ant-sender css-var-rb"
     >
       <textarea
-        class="ant-input ant-input-outlined css-var-rb ant-input-css-var ant-sender-input"
+        class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input"
         placeholder="输入 / 获取建议"
-        style="resize: none; height: -110px; max-height: -110px;"
+        style="overflow-y: hidden; resize: none;"
       />
       <div
         class="ant-sender-actions-list"
       >
         <div
-          class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-rb"
+          class="ant-sender-actions-list-presets ant-flex css-var-rb"
         >
-          <div
-            class="ant-space-item"
+          <button
+            class="ant-btn css-var-rb 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"
+            type="button"
           >
-            <button
-              class="ant-btn css-var-rb ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-              disabled=""
-              type="button"
+            <span
+              class="ant-btn-icon"
             >
               <span
-                class="ant-btn-icon"
-              >
-                <span
-                  aria-label="clear"
-                  class="anticon anticon-clear"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="clear"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <defs>
-                      <style />
-                    </defs>
-                    <path
-                      d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </button>
-          </div>
-          <div
-            class="ant-space-item"
-          >
-            <button
-              class="ant-btn css-var-rb ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-              disabled=""
-              type="button"
-            >
-              <span
-                class="ant-btn-icon"
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <span
-                  aria-label="send"
-                  class="anticon anticon-send"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="arrow-up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="send"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <defs>
-                      <style />
-                    </defs>
-                    <path
-                      d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                    />
-                  </svg>
-                </span>
+                  <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>
-            </button>
-          </div>
+            </span>
+          </button>
         </div>
       </div>
     </div>
@@ -223,88 +179,44 @@ Array [
       class="ant-sender css-var-r7"
     >
       <textarea
-        class="ant-input ant-input-outlined css-var-r7 ant-input-css-var ant-sender-input"
+        class="ant-input ant-input-borderless css-var-r7 ant-input-css-var ant-sender-input"
         placeholder="输入 / 获取建议"
-        style="resize: none; height: -110px; max-height: -110px;"
+        style="overflow-y: hidden; resize: none;"
       />
       <div
         class="ant-sender-actions-list"
       >
         <div
-          class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-r7"
+          class="ant-sender-actions-list-presets ant-flex css-var-r7"
         >
-          <div
-            class="ant-space-item"
+          <button
+            class="ant-btn css-var-r7 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"
+            type="button"
           >
-            <button
-              class="ant-btn css-var-r7 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-              disabled=""
-              type="button"
+            <span
+              class="ant-btn-icon"
             >
               <span
-                class="ant-btn-icon"
-              >
-                <span
-                  aria-label="clear"
-                  class="anticon anticon-clear"
-                  role="img"
-                >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="clear"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <defs>
-                      <style />
-                    </defs>
-                    <path
-                      d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                    />
-                  </svg>
-                </span>
-              </span>
-            </button>
-          </div>
-          <div
-            class="ant-space-item"
-          >
-            <button
-              class="ant-btn css-var-r7 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-              disabled=""
-              type="button"
-            >
-              <span
-                class="ant-btn-icon"
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <span
-                  aria-label="send"
-                  class="anticon anticon-send"
-                  role="img"
+                <svg
+                  aria-hidden="true"
+                  data-icon="arrow-up"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
-                    aria-hidden="true"
-                    data-icon="send"
-                    fill="currentColor"
-                    focusable="false"
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <defs>
-                      <style />
-                    </defs>
-                    <path
-                      d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                    />
-                  </svg>
-                </span>
+                  <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>
-            </button>
-          </div>
+            </span>
+          </button>
         </div>
       </div>
     </div>
@@ -384,7 +296,11 @@ Array [
 ]
 `;
 
-exports[`renders components/suggestion/demo/block.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/suggestion/demo/block.tsx extend context correctly 2`] = `
+[
+  "Warning: \`NaN\` is an invalid value for the \`%s\` css style property.%s",
+]
+`;
 
 exports[`renders components/suggestion/demo/trigger.tsx extend context correctly 1`] = `
 Array [
diff --git a/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap b/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap
index 7d496f60..49136d3c 100644
--- a/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap
@@ -8,87 +8,43 @@ exports[`renders components/suggestion/demo/basic.tsx correctly 1`] = `
     class="ant-sender css-var-R0"
   >
     <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
+      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
       placeholder="输入 / 获取建议"
     />
     <div
       class="ant-sender-actions-list"
     >
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
+        class="ant-sender-actions-list-presets ant-flex css-var-R0"
       >
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="ant-btn-icon"
-            >
-              <span
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-        <div
-          class="ant-space-item"
+        <button
+          class="ant-btn css-var-R0 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"
+          type="button"
         >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
+          <span
+            class="ant-btn-icon"
           >
             <span
-              class="ant-btn-icon"
+              aria-label="arrow-up"
+              class="anticon anticon-arrow-up"
+              role="img"
             >
-              <span
-                aria-label="send"
-                class="anticon anticon-send"
-                role="img"
+              <svg
+                aria-hidden="true"
+                data-icon="arrow-up"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="send"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                  />
-                </svg>
-              </span>
+                <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>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -103,87 +59,43 @@ exports[`renders components/suggestion/demo/block.tsx correctly 1`] = `
     class="ant-sender css-var-R0"
   >
     <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
+      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
       placeholder="输入 / 获取建议"
     />
     <div
       class="ant-sender-actions-list"
     >
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
+        class="ant-sender-actions-list-presets ant-flex css-var-R0"
       >
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="ant-btn-icon"
-            >
-              <span
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-        <div
-          class="ant-space-item"
+        <button
+          class="ant-btn css-var-R0 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"
+          type="button"
         >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
+          <span
+            class="ant-btn-icon"
           >
             <span
-              class="ant-btn-icon"
+              aria-label="arrow-up"
+              class="anticon anticon-arrow-up"
+              role="img"
             >
-              <span
-                aria-label="send"
-                class="anticon anticon-send"
-                role="img"
+              <svg
+                aria-hidden="true"
+                data-icon="arrow-up"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="send"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                  />
-                </svg>
-              </span>
+                <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>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>
diff --git a/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap b/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
index 184826b5..258ab4e4 100644
--- a/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
@@ -12,86 +12,42 @@ exports[`renders components/useXChat/demo/basic.tsx correctly 1`] = `
     class="ant-sender css-var-R0"
   >
     <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
+      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
     />
     <div
       class="ant-sender-actions-list"
     >
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
+        class="ant-sender-actions-list-presets ant-flex css-var-R0"
       >
-        <div
-          class="ant-space-item"
+        <button
+          class="ant-btn css-var-R0 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"
+          type="button"
         >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
+          <span
+            class="ant-btn-icon"
           >
             <span
-              class="ant-btn-icon"
+              aria-label="arrow-up"
+              class="anticon anticon-arrow-up"
+              role="img"
             >
-              <span
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
+              <svg
+                aria-hidden="true"
+                data-icon="arrow-up"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                  />
-                </svg>
-              </span>
+                <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>
-          </button>
-        </div>
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="ant-btn-icon"
-            >
-              <span
-                aria-label="send"
-                class="anticon anticon-send"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="send"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -110,86 +66,42 @@ exports[`renders components/useXChat/demo/stream.tsx correctly 1`] = `
     class="ant-sender css-var-R0"
   >
     <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
+      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
     />
     <div
       class="ant-sender-actions-list"
     >
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
+        class="ant-sender-actions-list-presets ant-flex css-var-R0"
       >
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="ant-btn-icon"
-            >
-              <span
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-        <div
-          class="ant-space-item"
+        <button
+          class="ant-btn css-var-R0 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"
+          type="button"
         >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
+          <span
+            class="ant-btn-icon"
           >
             <span
-              class="ant-btn-icon"
+              aria-label="arrow-up"
+              class="anticon anticon-arrow-up"
+              role="img"
             >
-              <span
-                aria-label="send"
-                class="anticon anticon-send"
-                role="img"
+              <svg
+                aria-hidden="true"
+                data-icon="arrow-up"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="send"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                  />
-                </svg>
-              </span>
+                <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>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -219,86 +131,42 @@ exports[`renders components/useXChat/demo/suggestions.tsx correctly 1`] = `
     class="ant-sender css-var-R0"
   >
     <textarea
-      class="ant-input ant-input-outlined css-var-R0 ant-input-css-var ant-sender-input"
+      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
     />
     <div
       class="ant-sender-actions-list"
     >
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
+        class="ant-sender-actions-list-presets ant-flex css-var-R0"
       >
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
-          >
-            <span
-              class="ant-btn-icon"
-            >
-              <span
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </button>
-        </div>
-        <div
-          class="ant-space-item"
+        <button
+          class="ant-btn css-var-R0 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"
+          type="button"
         >
-          <button
-            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-            disabled=""
-            type="button"
+          <span
+            class="ant-btn-icon"
           >
             <span
-              class="ant-btn-icon"
+              aria-label="arrow-up"
+              class="anticon anticon-arrow-up"
+              role="img"
             >
-              <span
-                aria-label="send"
-                class="anticon anticon-send"
-                role="img"
+              <svg
+                aria-hidden="true"
+                data-icon="arrow-up"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="send"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs>
-                    <style />
-                  </defs>
-                  <path
-                    d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
-                  />
-                </svg>
-              </span>
+                <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>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>