diff --git a/.dumi/components/SemanticPreview.tsx b/.dumi/components/SemanticPreview.tsx
index 00efb5b7..5e0a95c3 100644
--- a/.dumi/components/SemanticPreview.tsx
+++ b/.dumi/components/SemanticPreview.tsx
@@ -67,7 +67,7 @@ const useStyle = createStyles(({ token }, markPos: [number, number, number, numb
 
 export interface SemanticPreviewProps {
   semantics: { name: string; desc: string; version?: string }[];
-  children: React.ReactElement;
+  children: React.ReactElement | ((injectProps: any) => React.ReactElement);
   height?: number;
 }
 
@@ -91,9 +91,14 @@ const SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {
     return classNames;
   }, [semantics]);
 
-  const cloneNode = React.cloneElement(children, {
+  const injectProps = {
     classNames: semanticClassNames,
-  });
+  };
+
+  const cloneNode =
+    typeof children === 'function'
+      ? children(injectProps)
+      : React.cloneElement(children, injectProps);
 
   // ======================== Hover =========================
   const containerRef = React.useRef<HTMLDivElement>(null);
diff --git a/components/sender/SenderHeader.tsx b/components/sender/SenderHeader.tsx
new file mode 100644
index 00000000..604add33
--- /dev/null
+++ b/components/sender/SenderHeader.tsx
@@ -0,0 +1,115 @@
+import { CloseOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import classNames from 'classnames';
+import CSSMotion, { type MotionEventHandler } from 'rc-motion';
+import * as React from 'react';
+
+export interface SendHeaderContextProps {
+  prefixCls: string;
+}
+
+export const SendHeaderContext = React.createContext<SendHeaderContextProps>({} as any);
+
+export type SemanticType = 'header' | 'content';
+
+export interface SenderHeaderProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  classNames?: Partial<Record<SemanticType, string>>;
+  styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+  closable?: boolean;
+}
+
+const collapseHeight: MotionEventHandler = () => ({
+  height: 0,
+});
+const expandedHeight: MotionEventHandler = (ele) => ({
+  height: ele.scrollHeight,
+});
+
+export default function SenderHeader(props: SenderHeaderProps) {
+  const {
+    title,
+    onOpenChange,
+    open,
+    children,
+    className,
+    style,
+    classNames: classes = {},
+    styles = {},
+    closable,
+  } = props;
+
+  const { prefixCls } = React.useContext(SendHeaderContext);
+
+  const headerCls = `${prefixCls}-header`;
+
+  return (
+    <CSSMotion
+      motionEnter
+      motionLeave
+      motionName={`${headerCls}-motion`}
+      leavedClassName={`${headerCls}-motion-hidden`}
+      onEnterStart={collapseHeight}
+      onEnterActive={expandedHeight}
+      onLeaveStart={expandedHeight}
+      onLeaveActive={collapseHeight}
+      visible={open}
+    >
+      {({ className: motionClassName, style: motionStyle }) => {
+        return (
+          <div
+            className={classNames(headerCls, motionClassName, className)}
+            style={{
+              ...motionStyle,
+              ...style,
+            }}
+          >
+            {/* Header */}
+            {closable !== false && (
+              <div
+                className={
+                  // We follow antd naming standard here.
+                  // So the header part is use `-header` suffix.
+                  // Though its little bit weird for double `-header`.
+                  classNames(`${headerCls}-header`, classes.header)
+                }
+                style={{
+                  ...styles.header,
+                }}
+              >
+                <div className={`${headerCls}-title`}>{title}</div>
+                <div className={`${headerCls}-close`}>
+                  <Button
+                    type="text"
+                    icon={<CloseOutlined />}
+                    size="small"
+                    onClick={() => {
+                      onOpenChange?.(!open);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Content */}
+            {children && (
+              <div
+                className={classNames(`${headerCls}-content`, classes.content)}
+                style={{
+                  ...styles.content,
+                }}
+              >
+                {children}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    </CSSMotion>
+  );
+}
diff --git a/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0cbd7754..2188cd24 100644
--- a/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,99 +2,103 @@
 
 exports[`renders components/sender/demo/actions.tsx extend context correctly 1`] = `
 <div
-  class="ant-app css-var-rd"
+  class="ant-app css-var-rf"
 >
   <div
-    class="ant-sender css-var-rd"
+    class="ant-sender css-var-rf"
   >
-    <textarea
-      class="ant-input ant-input-borderless css-var-rd ant-input-css-var ant-sender-input"
-      style="overflow-y: hidden; resize: none;"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-rf ant-input-css-var ant-sender-input"
+        style="overflow-y: hidden; resize: none;"
+      />
       <div
-        class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-rd"
+        class="ant-sender-actions-list"
       >
         <div
-          class="ant-space-item"
+          class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-rf"
         >
-          <span
-            class="ant-typography ant-typography-secondary css-var-rd"
-          >
-            <small>
-              \`Shift + Enter\` to submit
-            </small>
-          </span>
-        </div>
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-rd 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"
+          <div
+            class="ant-space-item"
           >
             <span
-              class="ant-btn-icon"
+              class="ant-typography ant-typography-secondary css-var-rf"
+            >
+              <small>
+                \`Shift + Enter\` to submit
+              </small>
+            </span>
+          </div>
+          <div
+            class="ant-space-item"
+          >
+            <button
+              class="ant-btn css-var-rf 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
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
+                class="ant-btn-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="clear"
+                  class="anticon anticon-clear"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </span>
-          </button>
-        </div>
-        <div
-          class="ant-space-item"
-        >
-          <button
-            class="ant-btn css-var-rd ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
-            type="button"
+            </button>
+          </div>
+          <div
+            class="ant-space-item"
           >
-            <span
-              class="ant-btn-icon"
+            <button
+              class="ant-btn css-var-rf 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
-                aria-label="open-a-i"
-                class="anticon anticon-open-a-i"
-                role="img"
+                class="ant-btn-icon"
               >
-                <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"
+                <span
+                  aria-label="open-a-i"
+                  class="anticon anticon-open-a-i"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -106,159 +110,225 @@ 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-rb"
+  class="ant-app css-var-rd"
 >
   <div
-    class="ant-flex css-var-rb ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
+    class="ant-flex css-var-rd ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
   >
     <div
-      class="ant-sender css-var-rb"
+      class="ant-sender css-var-rd"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input"
-        style="overflow-y: hidden; resize: none;"
-      >
-        Hello? this is X!
-      </textarea>
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
+        <textarea
+          class="ant-input ant-input-borderless css-var-rd ant-input-css-var ant-sender-input"
+          style="overflow-y: hidden; resize: none;"
+        >
+          Hello? this is X!
+        </textarea>
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-rb"
+          class="ant-sender-actions-list"
         >
-          <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"
+          <div
+            class="ant-sender-actions-list-presets ant-flex css-var-rd"
           >
-            <span
-              class="ant-btn-icon"
+            <button
+              class="ant-btn css-var-rd 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
-                aria-label="arrow-up"
-                class="anticon anticon-arrow-up"
-                role="img"
+                class="ant-btn-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="arrow-up"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="arrow-up"
+                  class="anticon anticon-arrow-up"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-sender css-var-rb"
+      class="ant-sender css-var-rd"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input"
-        readonly=""
-        style="overflow-y: hidden; resize: none;"
-      >
-        Force as loading
-      </textarea>
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
+        <textarea
+          class="ant-input ant-input-borderless css-var-rd ant-input-css-var ant-sender-input"
+          readonly=""
+          style="overflow-y: hidden; resize: none;"
+        >
+          Force as loading
+        </textarea>
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-rb"
+          class="ant-sender-actions-list"
         >
-          <button
-            class="ant-btn css-var-rb ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
-            type="button"
+          <div
+            class="ant-sender-actions-list-presets ant-flex css-var-rd"
           >
-            <svg
-              class="ant-sender-actions-btn-loading-icon"
-              color="currentColor"
-              viewBox="0 0 1000 1000"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
+            <button
+              class="ant-btn css-var-rd ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+              type="button"
             >
-              <title>
-                Stop Loading
-              </title>
-              <rect
-                fill="currentColor"
-                height="250"
-                rx="24"
-                ry="24"
-                width="250"
-                x="375"
-                y="375"
-              />
-              <circle
-                cx="500"
-                cy="500"
-                fill="none"
-                opacity="0.45"
-                r="450"
-                stroke="currentColor"
-                stroke-width="100"
-              />
-              <circle
-                cx="500"
-                cy="500"
-                fill="none"
-                r="450"
-                stroke="currentColor"
-                stroke-dasharray="600 9999999"
-                stroke-width="100"
+              <svg
+                class="ant-sender-actions-btn-loading-icon"
+                color="currentColor"
+                viewBox="0 0 1000 1000"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                <animatetransform
-                  attributeName="transform"
-                  dur="1s"
-                  from="0 500 500"
-                  repeatCount="indefinite"
-                  to="360 500 500"
-                  type="rotate"
+                <title>
+                  Stop Loading
+                </title>
+                <rect
+                  fill="currentColor"
+                  height="250"
+                  rx="24"
+                  ry="24"
+                  width="250"
+                  x="375"
+                  y="375"
                 />
-              </circle>
-            </svg>
-          </button>
+                <circle
+                  cx="500"
+                  cy="500"
+                  fill="none"
+                  opacity="0.45"
+                  r="450"
+                  stroke="currentColor"
+                  stroke-width="100"
+                />
+                <circle
+                  cx="500"
+                  cy="500"
+                  fill="none"
+                  r="450"
+                  stroke="currentColor"
+                  stroke-dasharray="600 9999999"
+                  stroke-width="100"
+                >
+                  <animatetransform
+                    attributeName="transform"
+                    dur="1s"
+                    from="0 500 500"
+                    repeatCount="indefinite"
+                    to="360 500 500"
+                    type="rotate"
+                  />
+                </circle>
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="ant-sender css-var-rb ant-sender-disabled"
+      class="ant-sender css-var-rd ant-sender-disabled"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input ant-input-disabled"
-        disabled=""
-        style="overflow-y: hidden; resize: none;"
+      <div
+        class="ant-sender-content"
       >
-        Set to disabled
-      </textarea>
+        <textarea
+          class="ant-input ant-input-borderless css-var-rd 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-rd"
+          >
+            <button
+              class="ant-btn css-var-rd 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>
+  </div>
+</div>
+`;
+
+exports[`renders components/sender/demo/basic.tsx extend context correctly 2`] = `[]`;
+
+exports[`renders components/sender/demo/header.tsx extend context correctly 1`] = `
+<div
+  class="ant-app css-var-rb"
+>
+  <div
+    class="ant-flex css-var-rb ant-flex-align-end"
+    style="height: 350px;"
+  >
+    <div
+      class="ant-sender css-var-rb"
+    >
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-rb"
+          class="ant-sender-prefix"
         >
           <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"
+            class="ant-btn css-var-rb ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             type="button"
           >
             <span
               class="ant-btn-icon"
             >
               <span
-                aria-label="arrow-up"
-                class="anticon anticon-arrow-up"
+                aria-label="link"
+                class="anticon anticon-link"
                 role="img"
               >
                 <svg
                   aria-hidden="true"
-                  data-icon="arrow-up"
+                  data-icon="link"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -266,20 +336,61 @@ exports[`renders components/sender/demo/basic.tsx extend context correctly 1`] =
                   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"
+                    d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
                   />
                 </svg>
               </span>
             </span>
           </button>
         </div>
+        <textarea
+          class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input"
+          placeholder="← Click to open"
+          style="overflow-y: hidden; resize: none;"
+        />
+        <div
+          class="ant-sender-actions-list"
+        >
+          <div
+            class="ant-sender-actions-list-presets ant-flex css-var-rb"
+          >
+            <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"
+            >
+              <span
+                class="ant-btn-icon"
+              >
+                <span
+                  aria-label="arrow-up"
+                  class="anticon anticon-arrow-up"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="arrow-up"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`renders components/sender/demo/basic.tsx extend context correctly 2`] = `[]`;
+exports[`renders components/sender/demo/header.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/sender/demo/send-style.tsx extend context correctly 1`] = `
 <div
@@ -291,61 +402,65 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
     <div
       class="ant-sender css-var-r5"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-r5 ant-input-css-var ant-sender-input"
-        placeholder="Change button border radius"
-        style="overflow-y: hidden; resize: none;"
-      >
-        Ask something?
-      </textarea>
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
-        <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"
-          style="border-radius: 12px;"
-          type="button"
+        <textarea
+          class="ant-input ant-input-borderless css-var-r5 ant-input-css-var ant-sender-input"
+          placeholder="Change button border radius"
+          style="overflow-y: hidden; resize: none;"
         >
-          <span
-            class="ant-btn-icon"
+          Ask something?
+        </textarea>
+        <div
+          class="ant-sender-actions-list"
+        >
+          <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"
+            style="border-radius: 12px;"
+            type="button"
           >
             <span
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
-        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast css-var-r5 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;"
-          />
+          </button>
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast css-var-r5 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-inner"
-              role="tooltip"
+              class="ant-tooltip-arrow"
+              style="position: absolute; bottom: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
             >
-              Send ↵
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                Send ↵
+              </div>
             </div>
           </div>
         </div>
@@ -354,63 +469,67 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
     <div
       class="ant-sender css-var-r5"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-r5 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"
+        class="ant-sender-content"
       >
-        <button
-          class="ant-btn css-var-r5 ant-btn-primary ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
-          type="button"
+        <textarea
+          class="ant-input ant-input-borderless css-var-r5 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"
         >
-          <span
-            class="ant-btn-icon"
+          <button
+            class="ant-btn css-var-r5 ant-btn-primary ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn"
+            type="button"
           >
             <span
-              aria-label="send"
-              class="anticon anticon-send"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="send"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="send"
+                class="anticon anticon-send"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
-        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast css-var-r5 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;"
-          />
+          </button>
           <div
-            class="ant-tooltip-content"
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast css-var-r5 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-inner"
-              role="tooltip"
+              class="ant-tooltip-arrow"
+              style="position: absolute; bottom: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
             >
-              Send ↵
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              >
+                Send ↵
+              </div>
             </div>
           </div>
         </div>
@@ -419,44 +538,48 @@ exports[`renders components/sender/demo/send-style.tsx extend context correctly
     <div
       class="ant-sender css-var-r5"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-r5 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"
+        class="ant-sender-content"
       >
-        <button
-          class="ant-btn css-var-r5 ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn"
-          type="button"
+        <textarea
+          class="ant-input ant-input-borderless css-var-r5 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"
         >
-          <span
-            class="ant-btn-icon"
+          <button
+            class="ant-btn css-var-r5 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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -472,78 +595,82 @@ exports[`renders components/sender/demo/speech.tsx extend context correctly 1`]
   <div
     class="ant-sender css-var-r3"
   >
-    <textarea
-      class="ant-input ant-input-borderless css-var-r3 ant-input-css-var ant-sender-input"
-      style="overflow-y: hidden; resize: none;"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-r3 ant-input-css-var ant-sender-input"
+        style="overflow-y: hidden; resize: none;"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex css-var-r3"
+        class="ant-sender-actions-list"
       >
-        <button
-          class="ant-btn css-var-r3 ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-r3"
         >
-          <span
-            class="ant-btn-icon"
+          <button
+            class="ant-btn css-var-r3 ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+            type="button"
           >
             <span
-              aria-label="audio-muted"
-              class="anticon anticon-audio-muted"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="audio-muted"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="audio-muted"
+                class="anticon anticon-audio-muted"
+                role="img"
               >
-                <defs>
-                  <style />
-                </defs>
-                <path
-                  d="M682 455V311l-76 76v68c-.1 50.7-42 92.1-94 92a95.8 95.8 0 01-52-15l-54 55c29.1 22.4 65.9 36 106 36 93.8 0 170-75.1 170-168z"
-                />
-                <path
-                  d="M833 446h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254-63 0-120.7-23-165-61l-54 54a334.01 334.01 0 00179 81v102H326c-13.9 0-24.9 14.3-25 32v36c.1 4.4 2.9 8 6 8h408c3.2 0 6-3.6 6-8v-36c0-17.7-11-32-25-32H547V782c165.3-17.9 294-157.9 294-328 0-4.4-3.6-8-8-8zm13.1-377.7l-43.5-41.9a8 8 0 00-11.2.1l-129 129C634.3 101.2 577 64 511 64c-93.9 0-170 75.3-170 168v224c0 6.7.4 13.3 1.2 19.8l-68 68A252.33 252.33 0 01258 454c-.2-4.4-3.8-8-8-8h-60c-4.4 0-8 3.6-8 8 0 53 12.5 103 34.6 147.4l-137 137a8.03 8.03 0 000 11.3l42.7 42.7c3.1 3.1 8.2 3.1 11.3 0L846.2 79.8l.1-.1c3.1-3.2 3-8.3-.2-11.4zM417 401V232c0-50.6 41.9-92 94-92 46 0 84.1 32.3 92.3 74.7L417 401z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="audio-muted"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs>
+                    <style />
+                  </defs>
+                  <path
+                    d="M682 455V311l-76 76v68c-.1 50.7-42 92.1-94 92a95.8 95.8 0 01-52-15l-54 55c29.1 22.4 65.9 36 106 36 93.8 0 170-75.1 170-168z"
+                  />
+                  <path
+                    d="M833 446h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254-63 0-120.7-23-165-61l-54 54a334.01 334.01 0 00179 81v102H326c-13.9 0-24.9 14.3-25 32v36c.1 4.4 2.9 8 6 8h408c3.2 0 6-3.6 6-8v-36c0-17.7-11-32-25-32H547V782c165.3-17.9 294-157.9 294-328 0-4.4-3.6-8-8-8zm13.1-377.7l-43.5-41.9a8 8 0 00-11.2.1l-129 129C634.3 101.2 577 64 511 64c-93.9 0-170 75.3-170 168v224c0 6.7.4 13.3 1.2 19.8l-68 68A252.33 252.33 0 01258 454c-.2-4.4-3.8-8-8-8h-60c-4.4 0-8 3.6-8 8 0 53 12.5 103 34.6 147.4l-137 137a8.03 8.03 0 000 11.3l42.7 42.7c3.1 3.1 8.2 3.1 11.3 0L846.2 79.8l.1-.1c3.1-3.2 3-8.3-.2-11.4zM417 401V232c0-50.6 41.9-92 94-92 46 0 84.1 32.3 92.3 74.7L417 401z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-        </button>
-        <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 ant-sender-actions-btn-disabled"
-          type="button"
-        >
-          <span
-            class="ant-btn-icon"
+          </button>
+          <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 ant-sender-actions-btn-disabled"
+            type="button"
           >
             <span
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -559,45 +686,49 @@ exports[`renders components/sender/demo/submitType.tsx extend context correctly
   <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"
+      class="ant-sender-content"
     >
+      <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-presets ant-flex css-var-r1"
+        class="ant-sender-actions-list"
       >
-        <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"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-r1"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/components/sender/__tests__/__snapshots__/demo.test.ts.snap b/components/sender/__tests__/__snapshots__/demo.test.ts.snap
index 6a787df2..ec0dcca7 100644
--- a/components/sender/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/sender/__tests__/__snapshots__/demo.test.ts.snap
@@ -7,93 +7,97 @@ exports[`renders components/sender/demo/actions.tsx correctly 1`] = `
   <div
     class="ant-sender css-var-R0"
   >
-    <textarea
-      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+      />
       <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-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-R0"
         >
-          <span
-            class="ant-typography ant-typography-secondary css-var-R0"
-          >
-            <small>
-              \`Shift + Enter\` to submit
-            </small>
-          </span>
-        </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 ant-sender-actions-btn-disabled"
-            type="button"
+          <div
+            class="ant-space-item"
           >
             <span
-              class="ant-btn-icon"
+              class="ant-typography ant-typography-secondary css-var-R0"
+            >
+              <small>
+                \`Shift + Enter\` to submit
+              </small>
+            </span>
+          </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 ant-sender-actions-btn-disabled"
+              type="button"
             >
               <span
-                aria-label="clear"
-                class="anticon anticon-clear"
-                role="img"
+                class="ant-btn-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="clear"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="clear"
+                  class="anticon anticon-clear"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </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"
-            type="button"
+            </button>
+          </div>
+          <div
+            class="ant-space-item"
           >
-            <span
-              class="ant-btn-icon"
+            <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
-                aria-label="open-a-i"
-                class="anticon anticon-open-a-i"
-                role="img"
+                class="ant-btn-icon"
               >
-                <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"
+                <span
+                  aria-label="open-a-i"
+                  class="anticon anticon-open-a-i"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -111,148 +115,212 @@ exports[`renders components/sender/demo/basic.tsx correctly 1`] = `
     <div
       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-sender-actions-list"
+        class="ant-sender-content"
       >
+        <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-sender-actions-list-presets ant-flex css-var-R0"
+          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"
+          <div
+            class="ant-sender-actions-list-presets ant-flex css-var-R0"
           >
-            <span
-              class="ant-btn-icon"
+            <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
-                aria-label="arrow-up"
-                class="anticon anticon-arrow-up"
-                role="img"
+                class="ant-btn-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="arrow-up"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="arrow-up"
+                  class="anticon anticon-arrow-up"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </span>
-          </button>
+            </button>
+          </div>
         </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"
+        class="ant-sender-content"
       >
+        <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-presets ant-flex css-var-R0"
+          class="ant-sender-actions-list"
         >
-          <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"
+          <div
+            class="ant-sender-actions-list-presets ant-flex css-var-R0"
           >
-            <svg
-              class="ant-sender-actions-btn-loading-icon"
-              color="currentColor"
-              viewBox="0 0 1000 1000"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
+            <button
+              class="ant-btn 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"
             >
-              <title>
-                Stop Loading
-              </title>
-              <rect
-                fill="currentColor"
-                height="250"
-                rx="24"
-                ry="24"
-                width="250"
-                x="375"
-                y="375"
-              />
-              <circle
-                cx="500"
-                cy="500"
-                fill="none"
-                opacity="0.45"
-                r="450"
-                stroke="currentColor"
-                stroke-width="100"
-              />
-              <circle
-                cx="500"
-                cy="500"
-                fill="none"
-                r="450"
-                stroke="currentColor"
-                stroke-dasharray="600 9999999"
-                stroke-width="100"
+              <svg
+                class="ant-sender-actions-btn-loading-icon"
+                color="currentColor"
+                viewBox="0 0 1000 1000"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
               >
-                <animatetransform
-                  attributeName="transform"
-                  dur="1s"
-                  from="0 500 500"
-                  repeatCount="indefinite"
-                  to="360 500 500"
-                  type="rotate"
+                <title>
+                  Stop Loading
+                </title>
+                <rect
+                  fill="currentColor"
+                  height="250"
+                  rx="24"
+                  ry="24"
+                  width="250"
+                  x="375"
+                  y="375"
                 />
-              </circle>
-            </svg>
-          </button>
+                <circle
+                  cx="500"
+                  cy="500"
+                  fill="none"
+                  opacity="0.45"
+                  r="450"
+                  stroke="currentColor"
+                  stroke-width="100"
+                />
+                <circle
+                  cx="500"
+                  cy="500"
+                  fill="none"
+                  r="450"
+                  stroke="currentColor"
+                  stroke-dasharray="600 9999999"
+                  stroke-width="100"
+                >
+                  <animatetransform
+                    attributeName="transform"
+                    dur="1s"
+                    from="0 500 500"
+                    repeatCount="indefinite"
+                    to="360 500 500"
+                    type="rotate"
+                  />
+                </circle>
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>
     <div
       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=""
+      <div
+        class="ant-sender-content"
       >
-        Set to disabled
-      </textarea>
+        <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-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>
+  </div>
+</div>
+`;
+
+exports[`renders components/sender/demo/header.tsx correctly 1`] = `
+<div
+  class="ant-app css-var-R0"
+>
+  <div
+    class="ant-flex css-var-R0 ant-flex-align-end"
+    style="height:350px"
+  >
+    <div
+      class="ant-sender css-var-R0"
+    >
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-R0"
+          class="ant-sender-prefix"
         >
           <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"
+            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-icon-only"
             type="button"
           >
             <span
               class="ant-btn-icon"
             >
               <span
-                aria-label="arrow-up"
-                class="anticon anticon-arrow-up"
+                aria-label="link"
+                class="anticon anticon-link"
                 role="img"
               >
                 <svg
                   aria-hidden="true"
-                  data-icon="arrow-up"
+                  data-icon="link"
                   fill="currentColor"
                   focusable="false"
                   height="1em"
@@ -260,13 +328,53 @@ exports[`renders components/sender/demo/basic.tsx correctly 1`] = `
                   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"
+                    d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
                   />
                 </svg>
               </span>
             </span>
           </button>
         </div>
+        <textarea
+          class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+          placeholder="← Click to open"
+        />
+        <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>
   </div>
@@ -283,131 +391,143 @@ exports[`renders components/sender/demo/send-style.tsx correctly 1`] = `
     <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"
+        class="ant-sender-content"
       >
-        <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"
+        <textarea
+          class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+          placeholder="Change button border radius"
         >
-          <span
-            class="ant-btn-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-solid ant-btn-icon-only ant-sender-actions-btn"
+            style="border-radius:12px"
+            type="button"
           >
             <span
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </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"
-        placeholder="Change button icon"
-      >
-        Ask something?
-      </textarea>
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
-        <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"
+        <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"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="send"
-              class="anticon anticon-send"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="send"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="send"
+                class="anticon anticon-send"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </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"
-        placeholder="Loading not change button"
-      >
-        Ask something?
-      </textarea>
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
-        <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"
+        <textarea
+          class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+          placeholder="Loading not change button"
         >
-          <span
-            class="ant-btn-icon"
+          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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -421,77 +541,81 @@ exports[`renders components/sender/demo/speech.tsx correctly 1`] = `
   <div
     class="ant-sender css-var-R0"
   >
-    <textarea
-      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex css-var-R0"
+        class="ant-sender-actions-list"
       >
-        <button
-          class="ant-btn css-var-R0 ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
-          <span
-            class="ant-btn-icon"
+          <button
+            class="ant-btn css-var-R0 ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
+            type="button"
           >
             <span
-              aria-label="audio-muted"
-              class="anticon anticon-audio-muted"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="audio-muted"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="audio-muted"
+                class="anticon anticon-audio-muted"
+                role="img"
               >
-                <defs>
-                  <style />
-                </defs>
-                <path
-                  d="M682 455V311l-76 76v68c-.1 50.7-42 92.1-94 92a95.8 95.8 0 01-52-15l-54 55c29.1 22.4 65.9 36 106 36 93.8 0 170-75.1 170-168z"
-                />
-                <path
-                  d="M833 446h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254-63 0-120.7-23-165-61l-54 54a334.01 334.01 0 00179 81v102H326c-13.9 0-24.9 14.3-25 32v36c.1 4.4 2.9 8 6 8h408c3.2 0 6-3.6 6-8v-36c0-17.7-11-32-25-32H547V782c165.3-17.9 294-157.9 294-328 0-4.4-3.6-8-8-8zm13.1-377.7l-43.5-41.9a8 8 0 00-11.2.1l-129 129C634.3 101.2 577 64 511 64c-93.9 0-170 75.3-170 168v224c0 6.7.4 13.3 1.2 19.8l-68 68A252.33 252.33 0 01258 454c-.2-4.4-3.8-8-8-8h-60c-4.4 0-8 3.6-8 8 0 53 12.5 103 34.6 147.4l-137 137a8.03 8.03 0 000 11.3l42.7 42.7c3.1 3.1 8.2 3.1 11.3 0L846.2 79.8l.1-.1c3.1-3.2 3-8.3-.2-11.4zM417 401V232c0-50.6 41.9-92 94-92 46 0 84.1 32.3 92.3 74.7L417 401z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  data-icon="audio-muted"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs>
+                    <style />
+                  </defs>
+                  <path
+                    d="M682 455V311l-76 76v68c-.1 50.7-42 92.1-94 92a95.8 95.8 0 01-52-15l-54 55c29.1 22.4 65.9 36 106 36 93.8 0 170-75.1 170-168z"
+                  />
+                  <path
+                    d="M833 446h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254-63 0-120.7-23-165-61l-54 54a334.01 334.01 0 00179 81v102H326c-13.9 0-24.9 14.3-25 32v36c.1 4.4 2.9 8 6 8h408c3.2 0 6-3.6 6-8v-36c0-17.7-11-32-25-32H547V782c165.3-17.9 294-157.9 294-328 0-4.4-3.6-8-8-8zm13.1-377.7l-43.5-41.9a8 8 0 00-11.2.1l-129 129C634.3 101.2 577 64 511 64c-93.9 0-170 75.3-170 168v224c0 6.7.4 13.3 1.2 19.8l-68 68A252.33 252.33 0 01258 454c-.2-4.4-3.8-8-8-8h-60c-4.4 0-8 3.6-8 8 0 53 12.5 103 34.6 147.4l-137 137a8.03 8.03 0 000 11.3l42.7 42.7c3.1 3.1 8.2 3.1 11.3 0L846.2 79.8l.1-.1c3.1-3.2 3-8.3-.2-11.4zM417 401V232c0-50.6 41.9-92 94-92 46 0 84.1 32.3 92.3 74.7L417 401z"
+                  />
+                </svg>
+              </span>
             </span>
-          </span>
-        </button>
-        <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"
+          </button>
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -505,44 +629,48 @@ exports[`renders components/sender/demo/submitType.tsx correctly 1`] = `
   <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"
+      class="ant-sender-content"
     >
+      <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-presets ant-flex css-var-R0"
+        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 ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </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 d646f309..be8b4bb6 100644
--- a/components/sender/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/sender/__tests__/__snapshots__/index.test.tsx.snap
@@ -5,69 +5,73 @@ exports[`Sender Component loading state 1`] = `
   <div
   class="ant-sender"
 >
-  <textarea
-    class="ant-input ant-input-borderless ant-sender-input"
-    readonly=""
-    style="overflow-y: hidden; resize: none;"
-  />
   <div
-    class="ant-sender-actions-list"
+    class="ant-sender-content"
   >
+    <textarea
+      class="ant-input ant-input-borderless ant-sender-input"
+      readonly=""
+      style="overflow-y: hidden; resize: none;"
+    />
     <div
-      class="ant-sender-actions-list-presets ant-flex"
+      class="ant-sender-actions-list"
     >
-      <button
-        class="ant-btn ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
-        type="button"
+      <div
+        class="ant-sender-actions-list-presets ant-flex"
       >
-        <svg
-          class="ant-sender-actions-btn-loading-icon"
-          color="currentColor"
-          viewBox="0 0 1000 1000"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
+        <button
+          class="ant-btn ant-btn-circle ant-btn-text ant-btn-color-primary ant-btn-variant-text ant-sender-actions-btn ant-sender-actions-btn-loading-button"
+          type="button"
         >
-          <title>
-            Stop Loading
-          </title>
-          <rect
-            fill="currentColor"
-            height="250"
-            rx="24"
-            ry="24"
-            width="250"
-            x="375"
-            y="375"
-          />
-          <circle
-            cx="500"
-            cy="500"
-            fill="none"
-            opacity="0.45"
-            r="450"
-            stroke="currentColor"
-            stroke-width="100"
-          />
-          <circle
-            cx="500"
-            cy="500"
-            fill="none"
-            r="450"
-            stroke="currentColor"
-            stroke-dasharray="600 9999999"
-            stroke-width="100"
+          <svg
+            class="ant-sender-actions-btn-loading-icon"
+            color="currentColor"
+            viewBox="0 0 1000 1000"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
           >
-            <animatetransform
-              attributeName="transform"
-              dur="1s"
-              from="0 500 500"
-              repeatCount="indefinite"
-              to="360 500 500"
-              type="rotate"
+            <title>
+              Stop Loading
+            </title>
+            <rect
+              fill="currentColor"
+              height="250"
+              rx="24"
+              ry="24"
+              width="250"
+              x="375"
+              y="375"
+            />
+            <circle
+              cx="500"
+              cy="500"
+              fill="none"
+              opacity="0.45"
+              r="450"
+              stroke="currentColor"
+              stroke-width="100"
             />
-          </circle>
-        </svg>
-      </button>
+            <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>
@@ -78,44 +82,48 @@ exports[`Sender Component rtl render component should be rendered correctly in R
 <div
   class="ant-sender css-var-r1 ant-sender-rtl"
 >
-  <textarea
-    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"
+    class="ant-sender-content"
   >
+    <textarea
+      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-presets ant-flex css-var-r1 ant-flex-rtl"
+      class="ant-sender-actions-list"
     >
-      <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"
+      <div
+        class="ant-sender-actions-list-presets ant-flex css-var-r1 ant-flex-rtl"
       >
-        <span
-          class="ant-btn-icon"
+        <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"
         >
           <span
-            aria-label="arrow-up"
-            class="anticon anticon-arrow-up"
-            role="img"
+            class="ant-btn-icon"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="arrow-up"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="arrow-up"
+              class="anticon anticon-arrow-up"
+              role="img"
             >
-              <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>
+              <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>
-        </span>
-      </button>
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/components/sender/demo/_semantic.tsx b/components/sender/demo/_semantic.tsx
index 13fa90aa..988bd2c2 100644
--- a/components/sender/demo/_semantic.tsx
+++ b/components/sender/demo/_semantic.tsx
@@ -1,27 +1,71 @@
+import { SmileOutlined } from '@ant-design/icons';
+import { Sender } from '@ant-design/x';
+import { Button, Divider, Flex } from 'antd';
 import React from 'react';
 import SemanticPreview from '../../../.dumi/components/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
-import { Sender } from '@ant-design/x';
 
 const locales = {
-  cn: { input: '输入框', actions: '操作列表' },
+  cn: {
+    prefix: '前缀',
+    input: '输入框',
+    actions: '操作列表',
+  },
   en: {
+    prefix: 'Prefix',
     input: 'Input',
     actions: 'Action List',
   },
 };
 
+const headerLocales = {
+  cn: {
+    header: '头部',
+    content: '内容',
+  },
+  en: {
+    header: 'Header',
+    content: 'Content',
+  },
+};
+
 const App: React.FC = () => {
   const [locale] = useLocale(locales);
+  const [headerLocale] = useLocale(headerLocales);
+
   return (
-    <SemanticPreview
-      semantics={[
-        { name: 'input', desc: locale.input },
-        { name: 'actions', desc: locale.actions },
-      ]}
-    >
-      <Sender />
-    </SemanticPreview>
+    <Flex vertical>
+      {/* Basic */}
+      <SemanticPreview
+        semantics={[
+          { name: 'prefix', desc: locale.prefix },
+          { name: 'input', desc: locale.input },
+          { name: 'actions', desc: locale.actions },
+        ]}
+      >
+        <Sender prefix={<Button type="text" icon={<SmileOutlined />} />} />
+      </SemanticPreview>
+
+      <Divider style={{ margin: 0, padding: 0 }} />
+
+      {/* With Header */}
+      <SemanticPreview
+        semantics={[
+          { name: 'header', desc: headerLocale.header },
+          { name: 'content', desc: headerLocale.content },
+        ]}
+      >
+        {(injectProps) => (
+          <Sender
+            header={
+              <Sender.Header open title="Header" {...injectProps}>
+                Content
+              </Sender.Header>
+            }
+          />
+        )}
+      </SemanticPreview>
+    </Flex>
   );
 };
 
diff --git a/components/sender/demo/header.md b/components/sender/demo/header.md
new file mode 100644
index 00000000..13980158
--- /dev/null
+++ b/components/sender/demo/header.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+使用 `header` 自定义文件上传示例。
+
+## en-US
+
+Use `header` to customize the file upload example.
diff --git a/components/sender/demo/header.tsx b/components/sender/demo/header.tsx
new file mode 100644
index 00000000..e4b870cb
--- /dev/null
+++ b/components/sender/demo/header.tsx
@@ -0,0 +1,59 @@
+import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons';
+import { Sender } from '@ant-design/x';
+import { App, Button, Flex, Typography, theme } from 'antd';
+import React from 'react';
+
+const Demo: React.FC = () => {
+  const { message } = App.useApp();
+  const { token } = theme.useToken();
+
+  const [open, setOpen] = React.useState(false);
+
+  const headerNode = (
+    <Sender.Header title="Upload Sample" open={open} onOpenChange={setOpen}>
+      <Flex vertical align="center" gap="small" style={{ marginBlock: token.paddingLG }}>
+        <CloudUploadOutlined style={{ fontSize: '4em' }} />
+        <Typography.Title level={5} style={{ margin: 0 }}>
+          Drag file here (just demo)
+        </Typography.Title>
+        <Typography.Text type="secondary">
+          Support pdf, doc, xlsx, ppt, txt, image file types
+        </Typography.Text>
+        <Button
+          onClick={() => {
+            message.info('Mock select file');
+          }}
+        >
+          Select File
+        </Button>
+      </Flex>
+    </Sender.Header>
+  );
+
+  return (
+    <Flex style={{ height: 350 }} align="end">
+      <Sender
+        header={headerNode}
+        prefix={
+          <Button
+            type="text"
+            icon={<LinkOutlined />}
+            onClick={() => {
+              setOpen(!open);
+            }}
+          />
+        }
+        placeholder="← Click to open"
+        onSubmit={() => {
+          message.success('Send message successfully!');
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default () => (
+  <App>
+    <Demo />
+  </App>
+);
diff --git a/components/sender/index.en-US.md b/components/sender/index.en-US.md
index 5954a083..ebfbddde 100644
--- a/components/sender/index.en-US.md
+++ b/components/sender/index.en-US.md
@@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 <code src="./demo/submitType.tsx">Submit type</code>
 <code src="./demo/speech.tsx">Speech input</code>
 <code src="./demo/actions.tsx">Custom actions</code>
+<code src="./demo/header.tsx">Header panel</code>
 <code src="./demo/send-style.tsx">Adjust style</code>
 
 ## API
@@ -37,6 +38,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | defaultValue | Default value of input | string | - | - |
 | disabled | Whether to disable | boolean | false | - |
 | loading | Whether it is loading | boolean | false | - |
+| header | Header panel | ReactNode | - | - |
+| prefix | Prefix content | ReactNode | - | - |
 | rootClassName | Root element class name | string | - | - |
 | styles | Semantic DOM style | [See below](#semantic-dom) | - | - |
 | submitType | Submit type | SubmitType | `enter` \| `shiftEnter` | - |
@@ -45,6 +48,16 @@ Common props ref：[Common props](/docs/react/common-props)
 | onChange | Callback when input value changes | (value: string) => void | - | - |
 | onCancel | Callback when click cancel button | () => void | - | - |
 
+### Sender.Header
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| children | Panel content | ReactNode | - | - |
+| closable | Whether to close | boolean | true | - |
+| open | Whether to expand | boolean | - | - |
+| title | Title content | ReactNode | - | - |
+| onOpenChange | Callback when the expansion state changes | (open: boolean) => void | - | - |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
diff --git a/components/sender/index.tsx b/components/sender/index.tsx
index c7eab27a..2a825301 100644
--- a/components/sender/index.tsx
+++ b/components/sender/index.tsx
@@ -7,6 +7,7 @@ import getValue from 'rc-util/lib/utils/get';
 import React from 'react';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import { useXProviderContext } from '../x-provider';
+import SenderHeader, { SendHeaderContext } from './SenderHeader';
 import { ActionButtonContext } from './components/ActionButton';
 import ClearButton from './components/ClearButton';
 import LoadingButton from './components/LoadingButton';
@@ -46,11 +47,13 @@ export interface SenderProps extends Pick<TextareaProps, 'placeholder' | 'onKeyP
   onKeyDown?: React.KeyboardEventHandler<any>;
   components?: SenderComponents;
   styles?: {
+    prefix?: React.CSSProperties;
     input?: React.CSSProperties;
     actions?: React.CSSProperties;
   };
   rootClassName?: string;
   classNames?: {
+    prefix?: string;
     input?: string;
     actions?: string;
   };
@@ -58,6 +61,8 @@ export interface SenderProps extends Pick<TextareaProps, 'placeholder' | 'onKeyP
   className?: string;
   actions?: React.ReactNode | ActionsRender;
   allowSpeech?: boolean;
+  prefix?: React.ReactNode;
+  header?: React.ReactNode;
 }
 
 function getComponent<T>(
@@ -68,7 +73,9 @@ function getComponent<T>(
   return getValue(components, path) || defaultComponent;
 }
 
-const Sender: React.FC<SenderProps> = (props) => {
+const Sender: React.FC<SenderProps> & {
+  Header: typeof SenderHeader;
+} = (props) => {
   const {
     prefixCls: customizePrefixCls,
     styles = {},
@@ -89,6 +96,8 @@ const Sender: React.FC<SenderProps> = (props) => {
     onKeyDown,
     disabled,
     allowSpeech,
+    prefix,
+    header,
     ...rest
   } = props;
 
@@ -243,46 +252,72 @@ const Sender: React.FC<SenderProps> = (props) => {
       style={{ ...contextConfig.style, ...style }}
       onMouseDown={onInternalMouseDown}
     >
-      <InputTextArea
-        {...inputProps}
-        disabled={disabled}
-        style={{ ...contextConfig.styles.input, ...styles.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(actionListCls, contextConfig.classNames.actions, classNames.actions)}
-        style={{ ...contextConfig.styles.actions, ...styles.actions }}
-      >
-        <ActionButtonContext.Provider
-          value={{
-            prefixCls: actionBtnCls,
-            onSend: triggerSend,
-            onSendDisabled: !innerValue,
-            onClear: triggerClear,
-            onClearDisabled: !innerValue,
-            onCancel,
-            onCancelDisabled: !loading,
-            onSpeech: triggerSpeech,
-            onSpeechDisabled: !speechPermission,
-            speechRecording,
-            disabled,
+      {/* Header */}
+      {header && (
+        <SendHeaderContext.Provider value={{ prefixCls }}>{header}</SendHeaderContext.Provider>
+      )}
+
+      <div className={`${prefixCls}-content`}>
+        {/* Prefix */}
+        {prefix && (
+          <div
+            className={classnames(
+              `${prefixCls}-prefix`,
+              contextConfig.classNames.prefix,
+              classNames.prefix,
+            )}
+            style={{ ...contextConfig.styles.prefix, ...styles.prefix }}
+          >
+            {prefix}
+          </div>
+        )}
+
+        {/* Input */}
+        <InputTextArea
+          {...inputProps}
+          disabled={disabled}
+          style={{ ...contextConfig.styles.input, ...styles.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(
+            actionListCls,
+            contextConfig.classNames.actions,
+            classNames.actions,
+          )}
+          style={{ ...contextConfig.styles.actions, ...styles.actions }}
         >
-          {actionNode}
-        </ActionButtonContext.Provider>
+          <ActionButtonContext.Provider
+            value={{
+              prefixCls: actionBtnCls,
+              onSend: triggerSend,
+              onSendDisabled: !innerValue,
+              onClear: triggerClear,
+              onClearDisabled: !innerValue,
+              onCancel,
+              onCancelDisabled: !loading,
+              onSpeech: triggerSpeech,
+              onSpeechDisabled: !speechPermission,
+              speechRecording,
+              disabled,
+            }}
+          >
+            {actionNode}
+          </ActionButtonContext.Provider>
+        </div>
       </div>
     </div>,
   );
@@ -292,4 +327,6 @@ if (process.env.NODE_ENV !== 'production') {
   Sender.displayName = 'Sender';
 }
 
+Sender.Header = SenderHeader;
+
 export default Sender;
diff --git a/components/sender/index.zh-CN.md b/components/sender/index.zh-CN.md
index 4539a29c..679395c2 100644
--- a/components/sender/index.zh-CN.md
+++ b/components/sender/index.zh-CN.md
@@ -21,6 +21,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 <code src="./demo/submitType.tsx">提交模式</code>
 <code src="./demo/speech.tsx">语音输入</code>
 <code src="./demo/actions.tsx">自定义按钮</code>
+<code src="./demo/header.tsx">展开面板</code>
 <code src="./demo/send-style.tsx">调整样式</code>
 
 ## API
@@ -38,6 +39,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 | defaultValue | 输入框默认值 | string | - | - |
 | disabled | 是否禁用 | boolean | false | - |
 | loading | 是否加载中 | boolean | false | - |
+| header | 头部面板 | ReactNode | - | - |
+| prefix | 前缀内容 | ReactNode | - | - |
 | rootClassName | 根元素样式类 | string | - | - |
 | styles | 语义化定义样式 | [见下](#semantic-dom) | - | - |
 | submitType | 提交模式 | SubmitType | `enter` \| `shiftEnter` | - |
@@ -46,6 +49,16 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
 | onChange | 输入框值改变的回调 | (value: string) => void | - | - |
 | onCancel | 点击取消按钮的回调 | () => void | - | - |
 
+### Sender.Header
+
+| 属性         | 说明               | 类型                    | 默认值 | 版本 |
+| ------------ | ------------------ | ----------------------- | ------ | ---- |
+| children     | 面板内容           | ReactNode               | -      | -    |
+| closable     | 是否可关闭         | boolean                 | true   | -    |
+| open         | 是否展开           | boolean                 | -      | -    |
+| title        | 标题               | ReactNode               | -      | -    |
+| onOpenChange | 展开状态改变的回调 | (open: boolean) => void | -      | -    |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
diff --git a/components/sender/style/header.ts b/components/sender/style/header.ts
new file mode 100644
index 00000000..8552eabd
--- /dev/null
+++ b/components/sender/style/header.ts
@@ -0,0 +1,56 @@
+import type { SenderToken } from '.';
+import type { GenerateStyle } from '../../theme/cssinjs-utils';
+
+const genSenderHeaderStyle: GenerateStyle<SenderToken> = (token) => {
+  const { componentCls, calc } = token;
+
+  const headerCls = `${componentCls}-header`;
+
+  return {
+    [componentCls]: {
+      [headerCls]: {
+        borderBottomWidth: token.lineWidth,
+        borderBottomStyle: 'solid',
+        borderBottomColor: token.colorBorder,
+
+        // ======================== Header ========================
+        '&-header': {
+          background: token.colorFillAlter,
+          fontSize: token.fontSize,
+          lineHeight: token.lineHeight,
+          paddingBlock: calc(token.paddingSM).sub(token.lineWidthBold).equal(),
+          paddingInlineStart: token.padding,
+          paddingInlineEnd: token.paddingXS,
+          display: 'flex',
+
+          [`${headerCls}-title`]: {
+            flex: 'auto',
+          },
+        },
+
+        // ======================= Content ========================
+        '&-content': {
+          padding: token.padding,
+        },
+
+        // ======================== Motion ========================
+        '&-motion': {
+          transition: ['height', 'border']
+            .map((prop) => `${prop} ${token.motionDurationSlow}`)
+            .join(','),
+          overflow: 'hidden',
+
+          '&-enter-start, &-leave-active': {
+            borderBottomColor: 'transparent',
+          },
+
+          '&-hidden': {
+            display: 'none',
+          },
+        },
+      },
+    },
+  };
+};
+
+export default genSenderHeaderStyle;
diff --git a/components/sender/style/index.ts b/components/sender/style/index.ts
index 4413f5c1..08756fee 100644
--- a/components/sender/style/index.ts
+++ b/components/sender/style/index.ts
@@ -2,11 +2,12 @@ import { unit } from '@ant-design/cssinjs';
 import { mergeToken } from '@ant-design/cssinjs-utils';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/cssinjs-utils';
 import { genStyleHooks } from '../../theme/genStyleUtils';
+import genSenderHeaderStyle from './header';
 
 // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
 export interface ComponentToken {}
 
-interface SenderToken extends FullToken<'Sender'> {
+export interface SenderToken extends FullToken<'Sender'> {
   SenderContentMaxWidth: number | string;
 }
 
@@ -16,15 +17,9 @@ const genSenderStyle: GenerateStyle<SenderToken> = (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}`,
 
@@ -73,8 +68,26 @@ const genSenderStyle: GenerateStyle<SenderToken> = (token) => {
         direction: 'rtl',
       },
 
+      // ============================ Content ============================
+      [`${componentCls}-content`]: {
+        display: 'flex',
+        gap: paddingXS,
+        width: '100%',
+
+        paddingBlock: paddingSM,
+        paddingInlineStart: padding,
+        paddingInlineEnd: paddingSM,
+        boxSizing: 'border-box',
+        alignItems: 'flex-end',
+      },
+
+      // ============================ Prefix =============================
+      [`${componentCls}-prefix`]: {
+        flex: 'none',
+      },
+
       // ============================= Input =============================
-      [`& ${componentCls}-input`]: {
+      [`${componentCls}-input`]: {
         padding: 0,
         borderRadius: 0,
         flex: 'auto',
@@ -83,7 +96,7 @@ const genSenderStyle: GenerateStyle<SenderToken> = (token) => {
       },
 
       // ============================ Actions ============================
-      [`& ${componentCls}-actions-list`]: {
+      [`${componentCls}-actions-list`]: {
         flex: 'none',
         display: 'flex',
 
@@ -92,7 +105,7 @@ const genSenderStyle: GenerateStyle<SenderToken> = (token) => {
         },
       },
 
-      [`& ${componentCls}-actions-btn`]: {
+      [`${componentCls}-actions-btn`]: {
         '&-disabled': {
           opacity: 0.45,
         },
@@ -126,7 +139,7 @@ export default genStyleHooks<'Sender'>(
     const SenderToken = mergeToken<SenderToken>(token, {
       SenderContentMaxWidth: `calc(100% - ${unit(calc(paddingXS).add(32).equal())})`,
     });
-    return genSenderStyle(SenderToken);
+    return [genSenderStyle(SenderToken), genSenderHeaderStyle(SenderToken)];
   },
   prepareComponentToken,
 );
diff --git a/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap
index d9e95966..97f42997 100644
--- a/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -8,45 +8,49 @@ Array [
     <div
       class="ant-sender css-var-rb"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input"
-        placeholder="输入 / 获取建议"
-        style="overflow-y: hidden; resize: none;"
-      />
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
+        <textarea
+          class="ant-input ant-input-borderless css-var-rb ant-input-css-var ant-sender-input"
+          placeholder="输入 / 获取建议"
+          style="overflow-y: hidden; resize: none;"
+        />
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-rb"
+          class="ant-sender-actions-list"
         >
-          <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"
+          <div
+            class="ant-sender-actions-list-presets ant-flex css-var-rb"
           >
-            <span
-              class="ant-btn-icon"
+            <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"
             >
               <span
-                aria-label="arrow-up"
-                class="anticon anticon-arrow-up"
-                role="img"
+                class="ant-btn-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="arrow-up"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="arrow-up"
+                  class="anticon anticon-arrow-up"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -178,45 +182,49 @@ Array [
     <div
       class="ant-sender css-var-r7"
     >
-      <textarea
-        class="ant-input ant-input-borderless css-var-r7 ant-input-css-var ant-sender-input"
-        placeholder="输入 / 获取建议"
-        style="overflow-y: hidden; resize: none;"
-      />
       <div
-        class="ant-sender-actions-list"
+        class="ant-sender-content"
       >
+        <textarea
+          class="ant-input ant-input-borderless css-var-r7 ant-input-css-var ant-sender-input"
+          placeholder="输入 / 获取建议"
+          style="overflow-y: hidden; resize: none;"
+        />
         <div
-          class="ant-sender-actions-list-presets ant-flex css-var-r7"
+          class="ant-sender-actions-list"
         >
-          <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"
+          <div
+            class="ant-sender-actions-list-presets ant-flex css-var-r7"
           >
-            <span
-              class="ant-btn-icon"
+            <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"
             >
               <span
-                aria-label="arrow-up"
-                class="anticon anticon-arrow-up"
-                role="img"
+                class="ant-btn-icon"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="arrow-up"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="arrow-up"
+                  class="anticon anticon-arrow-up"
+                  role="img"
                 >
-                  <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>
+                  <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>
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap b/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap
index 49136d3c..ebe8a55f 100644
--- a/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap
@@ -7,44 +7,48 @@ exports[`renders components/suggestion/demo/basic.tsx correctly 1`] = `
   <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="输入 / 获取建议"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+        placeholder="输入 / 获取建议"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex css-var-R0"
+        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 ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -58,44 +62,48 @@ exports[`renders components/suggestion/demo/block.tsx correctly 1`] = `
   <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="输入 / 获取建议"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+        placeholder="输入 / 获取建议"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex css-var-R0"
+        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 ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap b/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
index 258ab4e4..bdc05c6b 100644
--- a/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/useXChat/__tests__/__snapshots__/demo.test.ts.snap
@@ -11,43 +11,47 @@ exports[`renders components/useXChat/demo/basic.tsx correctly 1`] = `
   <div
     class="ant-sender css-var-R0"
   >
-    <textarea
-      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex css-var-R0"
+        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 ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -65,43 +69,47 @@ exports[`renders components/useXChat/demo/stream.tsx correctly 1`] = `
   <div
     class="ant-sender css-var-R0"
   >
-    <textarea
-      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex css-var-R0"
+        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 ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -130,43 +138,47 @@ exports[`renders components/useXChat/demo/suggestions.tsx correctly 1`] = `
   <div
     class="ant-sender css-var-R0"
   >
-    <textarea
-      class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
-    />
     <div
-      class="ant-sender-actions-list"
+      class="ant-sender-content"
     >
+      <textarea
+        class="ant-input ant-input-borderless css-var-R0 ant-input-css-var ant-sender-input"
+      />
       <div
-        class="ant-sender-actions-list-presets ant-flex css-var-R0"
+        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 ant-sender-actions-btn-disabled"
-          type="button"
+        <div
+          class="ant-sender-actions-list-presets ant-flex css-var-R0"
         >
-          <span
-            class="ant-btn-icon"
+          <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
-              aria-label="arrow-up"
-              class="anticon anticon-arrow-up"
-              role="img"
+              class="ant-btn-icon"
             >
-              <svg
-                aria-hidden="true"
-                data-icon="arrow-up"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
+              <span
+                aria-label="arrow-up"
+                class="anticon anticon-arrow-up"
+                role="img"
               >
-                <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>
+                <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>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/mako.config.json b/mako.config.json
index cf29921a..bf1f7489 100644
--- a/mako.config.json
+++ b/mako.config.json
@@ -5,6 +5,5 @@
   },
   "codeSplitting": {
     "strategy": "auto"
-  },
-  "moduleIdStrategy": "hashed"
+  }
 }