diff --git a/docs/playground/independent.tsx b/docs/playground/independent.tsx
index 2c374e1e..611dd129 100644
--- a/docs/playground/independent.tsx
+++ b/docs/playground/independent.tsx
@@ -17,13 +17,20 @@ import {
   EllipsisOutlined,
   FireOutlined,
   HeartOutlined,
-  LinkOutlined,
+  PaperClipOutlined,
   PlusOutlined,
   ReadOutlined,
   ShareAltOutlined,
   SmileOutlined,
 } from '@ant-design/icons';
-import { Button, type GetProp, Space } from 'antd';
+import { Badge, Button, type GetProp, Space } from 'antd';
+import { UploadChangeParam } from 'antd/es/upload';
+
+interface AttachedFile {
+  uid: string;
+  name: string;
+  size: number;
+}
 
 const renderTitle = (icon: React.ReactElement, title: string) => (
   <Space align="start">
@@ -194,12 +201,14 @@ const Independent: React.FC = () => {
   const { styles } = useStyle();
 
   // ==================== State ====================
-  const [content, setContent] = React.useState('');
+  const [headerOpen, setHeaderOpen] = React.useState(false);
 
   const [conversationsItems, setConversationsItems] = React.useState(defaultConversationsItems);
 
   const [activeKey, setActiveKey] = React.useState(defaultConversationsItems[0].key);
 
+  const [attachedFiles, setAttachedFiles] = React.useState<AttachedFile[]>([]);
+
   // ==================== Runtime ====================
   const [agent] = useXAgent({
     request: async ({ message }, { onSuccess }) => {
@@ -221,11 +230,6 @@ const Independent: React.FC = () => {
   const onSubmit = (nextContent: string) => {
     if (!nextContent) return;
     onRequest(nextContent);
-    setContent('');
-  };
-
-  const onChange = (nextContent: string) => {
-    setContent(nextContent);
   };
 
   const onPromptsItemClick: GetProp<typeof Prompts, 'onItemClick'> = (info) => {
@@ -286,17 +290,58 @@ const Independent: React.FC = () => {
     </Space>
   );
 
+  const handleFileChange = (info: UploadChangeParam) => {
+    const { file } = info;
+    if (file && !file.status) {
+      setAttachedFiles((prevFiles) => [
+        ...prevFiles,
+        {
+          uid: file.uid,
+          name: file.name,
+          size: file.size ?? 0,
+        },
+      ]);
+    }
+  };
+
   const attachmentsNode = (
-    <Attachments
-      beforeUpload={() => false}
-      placeholder={{
-        icon: <CloudUploadOutlined />,
-        title: 'Drag & Drop files here',
-        description: 'Support file type: image, video, audio, document, etc.',
+    <div>
+      <Badge dot={attachedFiles.length > 0 && !headerOpen}>
+        <Button
+          type="text"
+          icon={<PaperClipOutlined />}
+          onClick={() => setHeaderOpen(!headerOpen)}
+        />
+      </Badge>
+    </div>
+  );
+
+  const senderHeader = (
+    <Sender.Header
+      title="Attachments"
+      open={headerOpen}
+      onOpenChange={setHeaderOpen}
+      styles={{
+        content: {
+          padding: 0,
+        },
       }}
     >
-      <Button type="text" icon={<LinkOutlined />} />
-    </Attachments>
+      <Attachments
+        beforeUpload={() => false}
+        items={attachedFiles}
+        onChange={handleFileChange}
+        placeholder={(type) =>
+          type === 'drop'
+            ? { title: 'Drop file here' }
+            : {
+                icon: <CloudUploadOutlined />,
+                title: 'Upload files',
+                description: 'Click or drag files to this area to upload',
+              }
+        }
+      />
+    </Sender.Header>
   );
 
   const logoNode = (
@@ -342,8 +387,7 @@ const Independent: React.FC = () => {
         <Prompts items={senderPromptsItems} onItemClick={onPromptsItemClick} />
         {/* 🌟 输入框 */}
         <Sender
-          value={content}
-          onChange={onChange}
+          header={senderHeader}
           onSubmit={onSubmit}
           prefix={attachmentsNode}
           loading={agent.isRequesting()}