diff --git a/packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
index e58f3455dc..3e8fc71f2a 100644
--- a/packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -18,6 +18,7 @@ import CodePenIcon from '../../icons/CodePenIcon';
 import CodeSandboxIcon from '../../icons/CodeSandboxIcon';
 import ExternalLinkIcon from '../../icons/ExternalLinkIcon';
 import DemoContext from '../../slots/DemoContext';
+import LiveError from '../../slots/LiveError';
 import SiteContext from '../../slots/SiteContext';
 import CodeBlockButton from './CodeBlockButton';
 import type { AntdPreviewerProps } from './Previewer';
@@ -41,10 +42,12 @@ const track = ({ type, demo }: { type: string; demo: string }) => {
 const useStyle = createStyles(({ token }) => {
   const { borderRadius } = token;
   return {
-    codeHideBtn: css`
+    stickyBox: css`
       position: sticky;
       bottom: 0;
       z-index: 1;
+    `,
+    codeHideBtn: css`
       width: 100%;
       height: 40px;
       display: flex;
@@ -518,18 +521,20 @@ fs.writeFileSync(path.join(dir, 'node.mjs'), content);
             otherCode={otherCodeObject}
             jsxCode={jsx}
             styleCode={style}
-            error={liveDemoError}
             entryName={entryName}
             onSourceChange={setLiveDemoSource}
           />
-          <div
-            tabIndex={0}
-            role="button"
-            className={styles.codeHideBtn}
-            onClick={() => setCodeExpand(false)}
-          >
-            <UpOutlined />
-            <FormattedMessage id="app.demo.code.hide.simplify" />
+          <div className={styles.stickyBox}>
+            <LiveError error={liveDemoError} />
+            <div
+              tabIndex={0}
+              role="button"
+              className={styles.codeHideBtn}
+              onClick={() => setCodeExpand(false)}
+            >
+              <UpOutlined />
+              <FormattedMessage id="app.demo.code.hide.simplify" />
+            </div>
           </div>
         </section>
       )}
diff --git a/packages/x/.dumi/theme/common/CodePreview.tsx b/packages/x/.dumi/theme/common/CodePreview.tsx
index a18c76f108..d490ecf68f 100644
--- a/packages/x/.dumi/theme/common/CodePreview.tsx
+++ b/packages/x/.dumi/theme/common/CodePreview.tsx
@@ -107,7 +107,6 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   styleCode = '',
   entryName,
   onSourceChange,
-  error,
 }) => {
   // 避免 Tabs 数量不稳定的闪动问题
   const initialCodes: Partial<Record<'tsx' | 'jsx' | 'style', string>> = {};
@@ -156,7 +155,6 @@ const CodePreview: React.FC<CodePreviewProps> = ({
           <div className={styles.code}>
             {lang === 'tsx' ? (
               <LiveCode
-                error={error}
                 lang={lang}
                 initialValue={sourceCodes[lang]}
                 onChange={(code: string) => {
@@ -184,7 +182,6 @@ const CodePreview: React.FC<CodePreviewProps> = ({
       children: (
         <div className={styles.code}>
           <LiveCode
-            error={error}
             lang={lang}
             initialValue={codeString}
             onChange={(code: string) => {
@@ -206,7 +203,6 @@ const CodePreview: React.FC<CodePreviewProps> = ({
   if (langList.length === 1) {
     return (
       <LiveCode
-        error={error}
         lang={langList[0]}
         initialValue={sourceCodes[langList[0]]}
         onChange={(code: string) => {
diff --git a/packages/x/.dumi/theme/common/LiveCode.tsx b/packages/x/.dumi/theme/common/LiveCode.tsx
index a43c191335..63d5c70d11 100644
--- a/packages/x/.dumi/theme/common/LiveCode.tsx
+++ b/packages/x/.dumi/theme/common/LiveCode.tsx
@@ -3,8 +3,6 @@ import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor';
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
 
-import LiveError from '../slots/LiveError';
-
 const useStyle = createStyles(({ token, css }) => {
   const { colorBgContainer } = token;
   return {
@@ -51,9 +49,7 @@ const useStyle = createStyles(({ token, css }) => {
 });
 
 const LiveCode: FC<
-  {
-    error: Error | null;
-  } & Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
+  Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
 > = (props) => {
   const { styles } = useStyle();
   return (
@@ -63,7 +59,6 @@ const LiveCode: FC<
         initialValue={props.initialValue}
         onChange={props.onChange}
       />
-      <LiveError error={props.error} />
     </div>
   );
 };
diff --git a/packages/x/.dumirc.ts b/packages/x/.dumirc.ts
index 0d61f1251a..8463059293 100644
--- a/packages/x/.dumirc.ts
+++ b/packages/x/.dumirc.ts
@@ -60,9 +60,9 @@ export default defineConfig({
     '@ant-design/x/lib': path.join(__dirname, 'components'),
     '@ant-design/x/es': path.join(__dirname, 'components'),
     '@ant-design/x': path.join(__dirname, 'components'),
-    '@ant-design/x-markdown': '../x-markdown/src',
-    '@ant-design/x-sdk': '../x-sdk/src',
-    '@ant-design/x-skill': '../x-skill/src',
+    '@ant-design/x-markdown': path.join(__dirname, '../x-markdown/src'),
+    '@ant-design/x-sdk': path.join(__dirname, '../x-sdk/src'),
+    '@ant-design/x-skill': path.join(__dirname, '../x-skill/src'),
     // https://github.com/ant-design/ant-design/issues/46628
     '@ant-design/icons$': '@ant-design/icons/lib',
   },
diff --git a/packages/x/docs/playground/agent-tbox.tsx b/packages/x/docs/playground/agent-tbox.tsx
index a6d7c8440b..46bd5f003c 100644
--- a/packages/x/docs/playground/agent-tbox.tsx
+++ b/packages/x/docs/playground/agent-tbox.tsx
@@ -287,8 +287,9 @@ const useStyle = createStyles(({ token, css }) => {
       }
     `,
     chatList: css`
+      flex: 1;
+      overflow-y: auto;
       display: flex;
-      height: calc(100% - 120px);
       flex-direction: column;
       align-items: center;
       width: 100%;
@@ -296,7 +297,7 @@ const useStyle = createStyles(({ token, css }) => {
     placeholder: css`
       padding-top: 32px;
       width: 100%;
-      padding-inline: ${token.paddingLG}px;
+      padding: ${token.paddingLG}px;
       box-sizing: border-box;
     `,
     // sender 样式
diff --git a/packages/x/docs/playground/copilot.tsx b/packages/x/docs/playground/copilot.tsx
index ce333e4171..a58156b8d1 100644
--- a/packages/x/docs/playground/copilot.tsx
+++ b/packages/x/docs/playground/copilot.tsx
@@ -204,15 +204,17 @@ const useCopilotStyle = createStyles(({ token, css }) => {
     `,
     // chatList 样式
     chatList: css`
+      flex:1;
+      overflow-y: auto;
+      padding-inline: 16px;
       margin-block-start: ${token.margin}px;
       display: flex;
-      height: calc(100% - 194px);
       flex-direction: column;
     `,
     chatWelcome: css`
       margin-inline: ${token.margin}px;
       padding: 12px 16px;
-      border-radius: 2px 12px 12px 12px;
+      border-radius: 12px;
       background: ${token.colorBgTextHover};
       margin-bottom: ${token.margin}px;
     `,
@@ -433,7 +435,6 @@ const Copilot = (props: CopilotProps) => {
         /** 消息列表 */
         <Bubble.List
           ref={listRef}
-          style={{ paddingInline: 16 }}
           items={messages?.map((i) => ({
             ...i.message,
             key: i.id,
@@ -457,9 +458,6 @@ const Copilot = (props: CopilotProps) => {
             title={locale.iCanHelp}
             items={MOCK_QUESTIONS.map((i) => ({ key: i, description: i }))}
             onItemClick={(info) => handleUserSubmit(info?.data?.description as string)}
-            style={{
-              marginInline: 16,
-            }}
             styles={{
               title: { fontSize: 14 },
             }}
diff --git a/packages/x/docs/playground/independent.tsx b/packages/x/docs/playground/independent.tsx
index ae2dfeeb56..2cdd3672c8 100644
--- a/packages/x/docs/playground/independent.tsx
+++ b/packages/x/docs/playground/independent.tsx
@@ -110,7 +110,6 @@ const useStyle = createStyles(({ token, css }) => {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      padding-block: ${token.paddingLG}px;
       justify-content: space-between;
       .ant-bubble-content-updating {
         background-image: linear-gradient(90deg, #ff6b23 0%, #af3cb8 31%, #53b6ff 89%);
@@ -132,16 +131,16 @@ const useStyle = createStyles(({ token, css }) => {
       }
     `,
     chatList: css`
+      flex: 1;
+      overflow-y: auto;
       display: flex;
-      height: calc(100% - 120px);
       flex-direction: column;
       align-items: center;
       width: 100%;
     `,
     placeholder: css`
-      padding-top: 32px;
       width: 100%;
-      padding-inline: ${token.paddingLG}px;
+      padding: ${token.paddingLG}px;
       box-sizing: border-box;
     `,
     // sender 样式
@@ -754,7 +753,7 @@ const Independent: React.FC = () => {
       gap={12}
       align="center"
       style={{
-        marginInline: 24,
+        margin: 8,
       }}
     >
       {/* 🌟 提示词 */}
diff --git a/packages/x/docs/playground/ultramodern.tsx b/packages/x/docs/playground/ultramodern.tsx
index 9a295c9686..bfdb1189c1 100644
--- a/packages/x/docs/playground/ultramodern.tsx
+++ b/packages/x/docs/playground/ultramodern.tsx
@@ -87,9 +87,6 @@ const useStyle = createStyles(({ token, css }) => {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      padding-block: ${token.paddingLG}px;
-      padding-inline: ${token.paddingLG}px;
-      gap: 16px;
       .ant-bubble-content-updating {
         background-image: linear-gradient(90deg, #ff6b23 0%, #af3cb8 31%, #53b6ff 89%);
         background-size: 100% 2px;
@@ -97,10 +94,16 @@ const useStyle = createStyles(({ token, css }) => {
         background-position: bottom;
       }
     `,
+    chatList: css`
+      flex: 1;
+      overflow-y: auto;
+      margin-block-start: ${token.margin}px;
+    `,
+    chatSender: css`
+      padding: ${token.paddingXS}px;
+    `,
     startPage: css`
       display: flex;
-      width: 100%;
-      max-width: 840px;
       flex-direction: column;
       align-items: center;
       height: 100%;
@@ -111,14 +114,6 @@ const useStyle = createStyles(({ token, css }) => {
       margin-block-end: 38px;
       font-weight: 600;
     `,
-    chatList: css`
-      display: flex;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      flex-direction: column;
-      justify-content: space-between;
-    `,
   };
 });
 
@@ -385,7 +380,6 @@ const App = () => {
                   styles={{
                     root: {
                       maxWidth: 940,
-                      height: 'calc(100% - 160px)',
                       marginBlockEnd: 24,
                     },
                   }}
@@ -399,56 +393,51 @@ const App = () => {
                   role={getRole(className)}
                 />
               )}
-              <div
-                style={{ width: '100%', maxWidth: 840 }}
-                className={clsx({ [styles.startPage]: messages.length === 0 })}
-              >
-                {messages.length === 0 && (
-                  <div className={styles.agentName}>{locale.agentName}</div>
-                )}
-                <Sender
-                  suffix={false}
-                  ref={senderRef}
-                  key={curConversation}
-                  slotConfig={slotConfig}
-                  loading={isRequesting}
-                  onSubmit={(val) => {
-                    if (!val) return;
-                    onRequest({
-                      messages: [{ role: 'user', content: val }],
-                      thinking: {
-                        type: 'disabled',
-                      },
-                    });
-                    listRef.current?.scrollTo({ top: 'bottom' });
-                    setActiveConversation(curConversation);
-                    senderRef.current?.clear?.();
-                  }}
-                  onCancel={() => {
-                    abort();
-                  }}
-                  placeholder={locale.placeholder}
-                  footer={(actionNode) => {
-                    return (
-                      <Flex justify="space-between" align="center">
-                        <Flex gap="small" align="center">
-                          <Sender.Switch
-                            value={deepThink}
-                            onChange={(checked: boolean) => {
-                              setDeepThink(checked);
-                            }}
-                            icon={<OpenAIOutlined />}
-                          >
-                            {locale.deepThink}
-                          </Sender.Switch>
-                        </Flex>
-                        <Flex align="center">{actionNode}</Flex>
+            </div>
+            <div className={clsx(styles.chatSender, { [styles.startPage]: messages.length === 0 })}>
+              {messages.length === 0 && <div className={styles.agentName}>{locale.agentName}</div>}
+              <Sender
+                suffix={false}
+                ref={senderRef}
+                key={curConversation}
+                slotConfig={slotConfig}
+                loading={isRequesting}
+                onSubmit={(val) => {
+                  if (!val) return;
+                  onRequest({
+                    messages: [{ role: 'user', content: val }],
+                    thinking: {
+                      type: 'disabled',
+                    },
+                  });
+                  listRef.current?.scrollTo({ top: 'bottom' });
+                  setActiveConversation(curConversation);
+                  senderRef.current?.clear?.();
+                }}
+                onCancel={() => {
+                  abort();
+                }}
+                placeholder={locale.placeholder}
+                footer={(actionNode) => {
+                  return (
+                    <Flex justify="space-between" align="center">
+                      <Flex gap="small" align="center">
+                        <Sender.Switch
+                          value={deepThink}
+                          onChange={(checked: boolean) => {
+                            setDeepThink(checked);
+                          }}
+                          icon={<OpenAIOutlined />}
+                        >
+                          {locale.deepThink}
+                        </Sender.Switch>
                       </Flex>
-                    );
-                  }}
-                  autoSize={{ minRows: 3, maxRows: 6 }}
-                />
-              </div>
+                      <Flex align="center">{actionNode}</Flex>
+                    </Flex>
+                  );
+                }}
+                autoSize={{ minRows: 3, maxRows: 6 }}
+              />
             </div>
           </div>
         </div>