diff --git a/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap b/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
index afe0649d..844af43a 100644
--- a/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
+++ b/src/ProChat/__test__/__snapshots__/demo.test.tsx.snap
@@ -11090,6 +11090,450 @@ exports[`<ProChat /> > renders doc-mode.tsx correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<ProChat /> > renders elegy.tsx correctly 1`] = `
+<DocumentFragment>
+  <div
+    style="background: rgb(245, 245, 245);"
+  >
+    <div
+      class="ant-app"
+      style="height: 100%; width: 100%; position: relative;"
+    >
+      <div
+        class="layoutkit-flexbox css-o3n4io ant-pro-chat acss-l5x2r3 ant-pro-chat-container"
+        style="max-height: 100vh; height: 100%;"
+      >
+        <div
+          class="ant-pro-chat-chat-list-container acss-1v5259w"
+          style="height: 100%;"
+        >
+          <div
+            class="acss-pmp369 ant-pro-chat-list"
+            style="margin-top: 24px;"
+          >
+            <div
+              class="layoutkit-flexbox css-vwb4od acss-1orhs6m ant-pro-chat-list-item ant-pro-chat-list-item-left"
+              data-id="default"
+            >
+              <div
+                class="acss-16a4jh6"
+              >
+                <span
+                  class="ant-avatar ant-avatar-circle acss-1fg5txo"
+                  style="width: 32px; height: 32px; font-size: 18px; cursor: default;"
+                >
+                  <span
+                    class="ant-avatar-string"
+                    style="transform: scale(1);"
+                  >
+                    <div
+                      class="acss-1vwqsas"
+                      style="font-size: 23.040000000000003px; height: 25.6px; width: 25.6px;"
+                    >
+                      🤖
+                    </div>
+                  </span>
+                </span>
+              </div>
+              <div
+                class="layoutkit-flexbox css-9pyqzz acss-hc6lm9 ant-pro-chat-list-item-message-container"
+              >
+                <div
+                  class="layoutkit-flexbox css-16o88vh acss-1s7pvt5 ant-pro-chat-list-item-title"
+                >
+                  <time>
+                    2024-02-27 17:20:00
+                  </time>
+                </div>
+                <div
+                  class="layoutkit-flexbox css-roa2v7 acss-j11nrd ant-pro-chat-message-content"
+                >
+                  <div
+                    class="layoutkit-flexbox css-o3n4io acss-1aas3xx ant-pro-chat-list-item-message-content"
+                  >
+                    <div
+                      id="default"
+                    >
+                      <article
+                        class="ant-typography"
+                        style="overflow-x: hidden; overflow-y: auto;"
+                      >
+                        <div
+                          class="zcss-1hxup8p"
+                        >
+                          <p>
+                            让我们开始对话吧
+                          </p>
+                        </div>
+                      </article>
+                    </div>
+                    <div
+                      class="acss-0 ant-pro-chat-message-extra"
+                    />
+                  </div>
+                  <div
+                    class="layoutkit-flexbox css-9pyqzz acss-1eio0fa ant-pro-chat-list-item-actions"
+                    role="menubar"
+                  />
+                </div>
+              </div>
+              <div
+                style="flex: 0 0 auto; width: 32px;"
+              />
+            </div>
+          </div>
+          <div
+            style="height: 1px; width: 100%;"
+          />
+        </div>
+        <button
+          class="ant-btn ant-btn-default ant-btn-sm acss-1nxnbtq"
+          style="bottom: 138px; position: absolute; right: 16px;"
+          type="button"
+        >
+          <span
+            class="ant-btn-icon"
+          >
+            <span
+              class="anticon"
+              role="img"
+            >
+              <svg
+                class="lucide lucide-list-end"
+                fill="transparent"
+                focusable="false"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 12H3"
+                />
+                <path
+                  d="M16 6H3"
+                />
+                <path
+                  d="M10 18H3"
+                />
+                <path
+                  d="M21 6v10a2 2 0 0 1-2 2h-5"
+                />
+                <path
+                  d="m16 16-2 2 2 2"
+                />
+              </svg>
+            </span>
+          </span>
+          <span>
+            返回底部
+          </span>
+        </button>
+        <div>
+          <div
+            class="layoutkit-flexbox css-19iopuf acss-1ckeg12 ant-pro-chat-input-area"
+          >
+            <div
+              class="layoutkit-flexbox css-1sqt55j"
+            >
+              <div
+                class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-extra"
+              >
+                <button
+                  class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <div
+                      class="acss-1o4i853"
+                      style="border-radius: 5px; height: 36px; width: 36px;"
+                    >
+                      <span
+                        class="anticon"
+                        role="img"
+                      >
+                        <svg
+                          class="lucide lucide-audio-lines"
+                          fill="none"
+                          height="24"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M2 10v3"
+                          />
+                          <path
+                            d="M6 6v11"
+                          />
+                          <path
+                            d="M10 3v18"
+                          />
+                          <path
+                            d="M14 8v7"
+                          />
+                          <path
+                            d="M18 5v13"
+                          />
+                          <path
+                            d="M22 10v3"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <div
+                      class="acss-1o4i853"
+                      style="border-radius: 5px; height: 36px; width: 36px;"
+                    >
+                      <span
+                        class="anticon"
+                        role="img"
+                      >
+                        <svg
+                          class="lucide lucide-image"
+                          fill="transparent"
+                          focusable="false"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <rect
+                            height="18"
+                            rx="2"
+                            ry="2"
+                            width="18"
+                            x="3"
+                            y="3"
+                          />
+                          <circle
+                            cx="9"
+                            cy="9"
+                            r="2"
+                          />
+                          <path
+                            d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="layoutkit-flexbox css-e0bvmz acss-1qxitnl ant-pro-chat-input-area-action-bar"
+              >
+                <button
+                  class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <div
+                      class="acss-1o4i853"
+                      style="border-radius: 5px; height: 36px; width: 36px;"
+                    >
+                      <span
+                        class="anticon"
+                        role="img"
+                      >
+                        <svg
+                          class="lucide lucide-trash2"
+                          fill="transparent"
+                          focusable="false"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M3 6h18"
+                          />
+                          <path
+                            d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                          />
+                          <path
+                            d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+                          />
+                          <line
+                            x1="10"
+                            x2="10"
+                            y1="11"
+                            y2="17"
+                          />
+                          <line
+                            x1="14"
+                            x2="14"
+                            y1="11"
+                            y2="17"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <div
+                      class="acss-1o4i853"
+                      style="border-radius: 5px; height: 36px; width: 36px;"
+                    >
+                      <span
+                        class="anticon"
+                        role="img"
+                      >
+                        <svg
+                          class="lucide lucide-rotate-cw"
+                          fill="transparent"
+                          focusable="false"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"
+                          />
+                          <path
+                            d="M21 3v5h-5"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-text ant-btn-icon-only ant-editor-icon zcss-1lwi3pj"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <div
+                      class="acss-1o4i853"
+                      style="border-radius: 5px; height: 36px; width: 36px;"
+                    >
+                      <span
+                        class="anticon"
+                        role="img"
+                      >
+                        <svg
+                          class="lucide lucide-globe"
+                          fill="transparent"
+                          focusable="false"
+                          height="20"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            cx="12"
+                            cy="12"
+                            r="10"
+                          />
+                          <path
+                            d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+                          />
+                          <path
+                            d="M2 12h20"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="layoutkit-flexbox css-1lumxev acss-p1380z ant-pro-chat-input-area-text-container"
+            >
+              <textarea
+                autocompleteprops="[object Object]"
+                class="ant-input ant-input-lg ant-input-outlined acss-6ckfqf ant-pro-chat-input-area-component-textarea"
+                placeholder="输入 / 查看推荐问题，或者直接输入你的问题"
+                style="resize: none; height: -152px; max-height: -152px;"
+              />
+              <button
+                class="ant-btn ant-btn-text ant-btn-icon-only acss-b9746z"
+                type="button"
+              >
+                <span
+                  class="ant-btn-icon"
+                >
+                  <span
+                    aria-label="send"
+                    class="anticon anticon-send"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="send"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <defs>
+                        <style />
+                      </defs>
+                      <path
+                        d="M931.4 498.9L94.9 79.5c-3.4-1.7-7.3-2.1-11-1.2a15.99 15.99 0 00-11.7 19.3l86.2 352.2c1.3 5.3 5.2 9.6 10.4 11.3l147.7 50.7-147.6 50.7c-5.2 1.8-9.1 6-10.3 11.3L72.2 926.5c-.9 3.7-.5 7.6 1.2 10.9 3.9 7.9 13.5 11.1 21.5 7.2l836.5-417c3.1-1.5 5.6-4.1 7.2-7.1 3.9-8 .7-17.6-7.2-21.6zM170.8 826.3l50.3-205.6 295.2-101.3c2.3-.8 4.2-2.6 5-5 1.4-4.2-.8-8.7-5-10.2L221.1 403 171 198.2l628 314.9-628.2 313.2z"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<ProChat /> > renders error.tsx correctly 1`] = `
 <DocumentFragment>
   <div
diff --git a/src/ProChat/container/App.tsx b/src/ProChat/container/App.tsx
index d568dbbf..76a4bbdb 100644
--- a/src/ProChat/container/App.tsx
+++ b/src/ProChat/container/App.tsx
@@ -5,11 +5,12 @@ import { CSSProperties, memo, useContext, useEffect, useRef, useState } from 're
 import { Flexbox } from 'react-layout-kit';
 
 import { ChatListItemProps } from '@/ChatList/ChatListItem';
+import { ProInputArea, ProInputAreaProps } from '@ant-design/pro-chat';
 import { ConfigProvider } from 'antd';
 import ChatList from '../components/ChatList';
-import ChatInputArea, { ChatInputAreaProps } from '../components/InputArea';
 import ChatScrollAnchor from '../components/ScrollAnchor';
 import useProChatLocale from '../hooks/useProChatLocale';
+import { useStore } from '../store';
 import { useOverrideStyles } from './OverrideStyle';
 import { ProChatChatReference } from './StoreUpdater';
 import { ProChatProps } from './index';
@@ -52,21 +53,21 @@ export interface ConversationProps extends ProChatProps<any> {
    * @param onClearAllHistory 清除所有历史记录的回调函数
    * @returns 渲染的 React 元素
    */
-  inputAreaRender?: ChatInputAreaProps['inputAreaRender'];
+  inputAreaRender?: ProInputAreaProps['inputAreaRender'];
   /**
    * 输入框的渲染函数
    * @param defaultDom 默认的 DOM 元素
    * @param onMessageSend 发送消息的回调函数
    * @param props 输入框的属性
    */
-  inputRender: ChatInputAreaProps['inputRender'];
+  inputRender: ProInputAreaProps['inputRender'];
 
   /**
    * 聊天发送按钮的渲染配置
    * @param defaultDom 默认的 DOM 元素
    * @param defaultProps 默认的属性
    */
-  sendButtonRender?: ChatInputAreaProps['sendButtonRender'];
+  sendButtonRender?: ProInputAreaProps['sendButtonRender'];
 
   /**
    * 滚动时候的监听方法
@@ -101,6 +102,7 @@ const App = memo<ConversationProps>(
     const [height, setHeight] = useState('100%' as string | number);
     const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
     const { localeObject } = useProChatLocale();
+    const [sendMessage, clearMessage] = useStore((s) => [s.sendMessage, s.clearMessage]);
 
     useEffect(() => {
       // 保证 ref 永远存在
@@ -170,10 +172,17 @@ const App = memo<ConversationProps>(
           {renderInputArea !== null && inputAreaRender !== null && (
             <div ref={areaHtml}>
               {
-                <ChatInputArea
+                <ProInputArea
                   sendButtonRender={sendButtonRender}
                   inputAreaRender={inputAreaRender || renderInputArea}
                   inputRender={inputRender}
+                  sendMessage={sendMessage}
+                  sendShortcutKey="enter"
+                  clearMessage={clearMessage}
+                  stopGenerateMessage={function (): void {
+                    throw new Error('Function not implemented.');
+                  }}
+                  isLoading={false}
                 />
               }
             </div>
diff --git a/src/ProChat/container/AppNew.tsx b/src/ProChat/container/AppNew.tsx
new file mode 100644
index 00000000..6e334699
--- /dev/null
+++ b/src/ProChat/container/AppNew.tsx
@@ -0,0 +1,184 @@
+import BackBottom from '@/BackBottom';
+import { createStyles } from 'antd-style';
+import RcResizeObserver from 'rc-resize-observer';
+import { CSSProperties, memo, useContext, useEffect, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { ChatListItemProps } from '@/ChatList/ChatListItem';
+import { ConfigProvider } from 'antd';
+import ProInputArea, { ProInputAreaProps } from '../../ProInputArea';
+import ChatList from '../components/ChatList';
+import ChatScrollAnchor from '../components/ScrollAnchor';
+import useProChatLocale from '../hooks/useProChatLocale';
+import { useOverrideStyles } from './OverrideStyle';
+import { ProChatChatReference } from './StoreUpdater';
+import { ProChatProps } from './index';
+
+const useStyles = createStyles(
+  ({ css, responsive, stylish }) => css`
+    overflow: hidden scroll;
+    height: 100%;
+    ${responsive.mobile} {
+      ${stylish.noScrollbar}
+      width: 100%;
+    }
+  `,
+);
+
+/**
+ * 对话组件的属性接口
+ */
+export interface ConversationProps extends ProChatProps<any> {
+  /**
+   * 是否显示标题
+   */
+  showTitle?: boolean;
+  /**
+   * 样式对象
+   */
+  style?: CSSProperties;
+  /**
+   * CSS类名
+   */
+  className?: string;
+  /**
+   * 聊天引用
+   */
+  chatRef?: ProChatChatReference;
+  /**
+   * 输入区域的渲染函数
+   * @param defaultDom 默认的 DOM 元素
+   * @param onMessageSend 发送消息的回调函数
+   * @param onClearAllHistory 清除所有历史记录的回调函数
+   * @returns 渲染的 React 元素
+   */
+  inputAreaRender?: ProInputAreaProps['inputAreaRender'];
+  /**
+   * 输入框的渲染函数
+   * @param defaultDom 默认的 DOM 元素
+   * @param onMessageSend 发送消息的回调函数
+   * @param props 输入框的属性
+   */
+  inputRender: ProInputAreaProps['inputRender'];
+
+  /**
+   * 聊天发送按钮的渲染配置
+   * @param defaultDom 默认的 DOM 元素
+   * @param defaultProps 默认的属性
+   */
+  sendButtonRender?: ProInputAreaProps['sendButtonRender'];
+
+  /**
+   * 滚动时候的监听方法
+   */
+  onScroll?: (e: Event) => void;
+
+  renderErrorMessages?: ChatListItemProps['renderErrorMessages'];
+}
+
+const App = memo<ConversationProps>(
+  ({
+    renderInputArea,
+    inputAreaRender,
+    className,
+    style,
+    showTitle,
+    chatRef,
+    itemShouldUpdate,
+    inputRender,
+    chatItemRenderConfig,
+    backToBottomConfig,
+    renderErrorMessages,
+    sendButtonRender,
+    onScroll,
+    markdownProps,
+  }) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const areaHtml = useRef<HTMLDivElement>(null);
+    const { styles, cx } = useStyles();
+    const { styles: override } = useOverrideStyles();
+    const [isRender, setIsRender] = useState(false);
+    const [height, setHeight] = useState('100%' as string | number);
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const { localeObject } = useProChatLocale();
+
+    useEffect(() => {
+      // 保证 ref 永远存在
+      setIsRender(true);
+      if (chatRef?.current) {
+        chatRef.current.scrollToBottom = () => {
+          (ref as any)?.current?.scrollTo({
+            behavior: 'smooth',
+            left: 0,
+            top: ref.current?.scrollHeight || 99999,
+          });
+        };
+      }
+    }, []);
+
+    const prefixClass = getPrefixCls('pro-chat');
+    return (
+      <RcResizeObserver
+        onResize={(e) => {
+          if (e.height !== height) {
+            setHeight(e.height);
+          }
+        }}
+      >
+        <Flexbox
+          className={cx(override.container, className, `${prefixClass}-container`)}
+          style={{
+            maxHeight: '100vh',
+            height: '100%',
+            ...style,
+          }}
+        >
+          <>
+            <div
+              ref={ref}
+              className={cx(`${prefixClass}-chat-list-container`, styles)}
+              style={{
+                height: (height as number) - (areaHtml.current?.clientHeight || 0) || '100%',
+              }}
+            >
+              <ChatList
+                showTitle={showTitle}
+                itemShouldUpdate={itemShouldUpdate}
+                chatItemRenderConfig={chatItemRenderConfig}
+                markdownProps={markdownProps}
+                renderErrorMessages={renderErrorMessages}
+              />
+              {ref?.current && <ChatScrollAnchor target={ref} />}
+            </div>
+            {isRender && ref?.current ? (
+              <BackBottom
+                style={{
+                  bottom: 138,
+                }}
+                onScroll={onScroll}
+                target={ref}
+                text={localeObject.backToBottom}
+                {...backToBottomConfig}
+              />
+            ) : null}
+          </>
+          {renderInputArea !== null && inputAreaRender !== null && (
+            <div ref={areaHtml}>
+              {
+                <ProInputArea
+                  sendButtonRender={sendButtonRender}
+                  inputAreaRender={inputAreaRender || renderInputArea}
+                  inputRender={inputRender}
+                  sendShortcutKey="enter"
+                  extra={['image', 'audio']}
+                />
+              }
+            </div>
+          )}
+        </Flexbox>
+      </RcResizeObserver>
+    );
+  },
+);
+
+export default App;
diff --git a/src/ProInputArea/components/ControlPanel.tsx b/src/ProInputArea/components/ControlPanel.tsx
new file mode 100644
index 00000000..c2dad2bd
--- /dev/null
+++ b/src/ProInputArea/components/ControlPanel.tsx
@@ -0,0 +1,62 @@
+import ActionIcon from '@/ActionIcon';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
+import { ConfigProvider, Popconfirm } from 'antd';
+import { createStyles, cx } from 'antd-style';
+import { Trash2 } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+// import { useStore } from '../ProChat/store';
+
+const useStyles = createStyles(({ css, token }) => ({
+  extra: css`
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+interface ControlPanelProps {
+  className?: string;
+  clearMessage?: () => void;
+  actionsRender?: (defaultDoms: React.ReactNode[]) => React.ReactNode;
+  flexConfig?: Record<string, any>;
+}
+
+export const ActionBar = ({
+  className,
+  clearMessage,
+  actionsRender,
+  flexConfig,
+}: ControlPanelProps) => {
+  const { localeObject } = useProChatLocale();
+
+  const { styles, theme } = useStyles();
+  const defaultDoms = [
+    <Popconfirm
+      title={localeObject.clearModalTitle}
+      okButtonProps={{ danger: true }}
+      okText={localeObject.clearDialogue}
+      cancelText={localeObject.cancel}
+      key={'clear'}
+      onConfirm={() => {
+        clearMessage();
+      }}
+    >
+      <ActionIcon title={localeObject.clearCurrentDialogue} icon={Trash2} />
+    </Popconfirm>,
+  ];
+
+  return (
+    <ConfigProvider theme={{ token: { colorText: theme.colorTextSecondary } }}>
+      <Flexbox
+        align={'center'}
+        direction={'horizontal-reverse'}
+        paddingInline={12}
+        className={cx(styles.extra, className)}
+        gap={8}
+        {...flexConfig}
+      >
+        {actionsRender?.(defaultDoms) ?? defaultDoms}
+      </Flexbox>
+    </ConfigProvider>
+  );
+};
+
+export default ActionBar;
diff --git a/src/ProInputArea/components/ExtraModel.tsx b/src/ProInputArea/components/ExtraModel.tsx
new file mode 100644
index 00000000..cb645250
--- /dev/null
+++ b/src/ProInputArea/components/ExtraModel.tsx
@@ -0,0 +1,86 @@
+import ActionIcon from '@/ActionIcon';
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
+import { ConfigProvider } from 'antd';
+import { createStyles, cx } from 'antd-style';
+import { isObject, isString } from 'lodash-es';
+import { FileVideo, Image } from 'lucide-react';
+import { Flexbox } from 'react-layout-kit';
+import AudioIcon from '../icons/AudioLines';
+
+const useStyles = createStyles(({ css, token }) => ({
+  extra: css`
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+export type ExtraType = 'image' | 'audio' | 'video';
+export interface ExtraItem {
+  type: ExtraType;
+  onChange?: () => void;
+  onFinish?: () => void;
+  render: () => JSX.Element;
+}
+export type ExtraModelProps = {
+  className?: string;
+  extra?: Array<ExtraItem | ExtraType>;
+};
+
+export const ExtraModel = (props: ExtraModelProps) => {
+  const { className, extra } = props;
+
+  const { localeObject } = useProChatLocale();
+
+  const defaultDoms = [
+    {
+      type: 'video',
+      render: <ActionIcon key={'video'} title={localeObject.video} icon={FileVideo} />,
+    },
+    {
+      type: 'audio',
+      render: <ActionIcon key={'audio'} title={localeObject.audio} icon={AudioIcon} />,
+    },
+    {
+      type: 'image',
+      render: <ActionIcon key={'image'} title={localeObject.image} icon={Image} />,
+    },
+  ];
+
+  const { styles, theme } = useStyles();
+
+  const renderContent = () => {
+    if (!extra || extra.length === 0) {
+      return null;
+    }
+
+    const getDefaultRender = (type: ExtraType) => {
+      const defaultComponent = defaultDoms.find((dom) => dom.type === type);
+      return defaultComponent ? defaultComponent.render : null;
+    };
+
+    return extra.reverse().map((item) => {
+      if (isString(item)) {
+        return getDefaultRender(item as ExtraType);
+      } else if (isObject(item) && 'type' in item && 'render' in item) {
+        return item.render();
+      } else {
+        return null;
+      }
+    });
+  };
+  renderContent();
+  return (
+    <ConfigProvider theme={{ token: { colorText: theme.colorTextSecondary } }}>
+      <Flexbox
+        align={'center'}
+        direction={'horizontal-reverse'}
+        paddingInline={12}
+        className={cx(styles.extra, className)}
+        gap={8}
+      >
+        {renderContent()}
+      </Flexbox>
+    </ConfigProvider>
+  );
+};
+
+export default ExtraModel;
diff --git a/src/ProInputArea/components/ProTextArea.tsx b/src/ProInputArea/components/ProTextArea.tsx
new file mode 100644
index 00000000..7ed412d1
--- /dev/null
+++ b/src/ProInputArea/components/ProTextArea.tsx
@@ -0,0 +1,26 @@
+import { Input } from 'antd';
+import { TextAreaProps } from 'antd/es/input';
+import { TextAreaRef } from 'antd/es/input/TextArea';
+import React from 'react';
+
+export const ProTextArea: React.FC<TextAreaProps> = React.forwardRef<TextAreaRef, TextAreaProps>(
+  (props, ref) => {
+    const { disabled, ...rest } = props;
+
+    return (
+      <Input.TextArea
+        size="large"
+        ref={ref}
+        disabled={disabled}
+        className={`${props.className}-textarea`}
+        onFocus={(e) => {
+          props.onFocus?.(e);
+        }}
+        onPressEnter={(e) => {
+          props.onPressEnter?.(e);
+        }}
+        {...rest}
+      />
+    );
+  },
+);
diff --git a/src/ProInputArea/icons/AudioLines.tsx b/src/ProInputArea/icons/AudioLines.tsx
new file mode 100644
index 00000000..41ba9332
--- /dev/null
+++ b/src/ProInputArea/icons/AudioLines.tsx
@@ -0,0 +1,26 @@
+import { memo } from 'react';
+
+const AudioIcon = memo(() => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-audio-lines"
+    >
+      <path d="M2 10v3" />
+      <path d="M6 6v11" />
+      <path d="M10 3v18" />
+      <path d="M14 8v7" />
+      <path d="M18 5v13" />
+      <path d="M22 10v3" />
+    </svg>
+  );
+});
+export default AudioIcon;
diff --git a/src/ProInputArea/icons/StopLoading.tsx b/src/ProInputArea/icons/StopLoading.tsx
new file mode 100644
index 00000000..450b9820
--- /dev/null
+++ b/src/ProInputArea/icons/StopLoading.tsx
@@ -0,0 +1,38 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+const StopLoadingIcon = memo(() => {
+  const theme = useTheme();
+  return (
+    <svg
+      className={'anticon'}
+      color="currentColor"
+      height={16}
+      viewBox="0 0 1024 1024"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g fill="none">
+        <circle cx="512" cy="512" fill="none" r="426" stroke={theme.colorBorder} strokeWidth="72" />
+        <rect fill="currentColor" height="252" rx="24" ry="24" width="252" x="386" y="386" />
+        <path
+          d="M938.667 512C938.667 276.359 747.64 85.333 512 85.333"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeWidth="73"
+        >
+          <animateTransform
+            attributeName="transform"
+            dur="1s"
+            from="0 512 512"
+            repeatCount="indefinite"
+            to="360 512 512"
+            type="rotate"
+          />
+        </path>
+      </g>
+    </svg>
+  );
+});
+export default StopLoadingIcon;
diff --git a/src/ProInputArea/index.tsx b/src/ProInputArea/index.tsx
new file mode 100644
index 00000000..5b3e3422
--- /dev/null
+++ b/src/ProInputArea/index.tsx
@@ -0,0 +1,338 @@
+import useProChatLocale from '@/ProChat/hooks/useProChatLocale';
+import { SendOutlined } from '@ant-design/icons';
+import { Button, ButtonProps, ConfigProvider } from 'antd';
+import { createStyles, cx } from 'antd-style';
+import { TextAreaProps } from 'antd/es/input';
+import { ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ControlPanel from './components/ControlPanel';
+import ExtraModel, { ExtraItem, ExtraType } from './components/ExtraModel';
+import { ProTextArea } from './components/ProTextArea';
+import StopLoadingIcon from './icons/StopLoading';
+
+const ENTER = 'enter';
+const SHIFT_ENTER = 'shiftEnter';
+
+const useStyles = createStyles(({ css, responsive, token }) => ({
+  container: css`
+    position: sticky;
+    z-index: ${token.zIndexPopupBase};
+    bottom: 0;
+    padding-top: 12px;
+    padding-bottom: 24px;
+    background-image: linear-gradient(to top, ${token.colorBgLayout} 88%, transparent 100%);
+    ${responsive.mobile} {
+      width: 100%;
+    }
+  `,
+  boxShadow: css`
+    position: relative;
+    border-radius: 8px;
+    box-shadow: ${token.boxShadowSecondary};
+  `,
+  input: css`
+    width: 100%;
+    border: none;
+    outline: none;
+    border-radius: 8px;
+  `,
+  btn: css`
+    position: absolute;
+    z-index: 10;
+    right: 8px;
+    bottom: 6px;
+    color: ${token.colorTextTertiary};
+    &:hover {
+      color: ${token.colorTextSecondary};
+    }
+  `,
+  extra: css`
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+export type ProInputAreaProps = {
+  /**
+   * @description 组件的类名，用于自定义样式
+   */
+  className?: string;
+
+  /**
+   * @description 左侧多模态功能区
+   * @type Array<ExtraItem | ExtraType>
+   */
+  extra?: Array<ExtraItem | ExtraType>;
+
+  /**
+   * @description 消息发送的快捷键，支持 'enter' 或 'shiftEnter'
+   * @type 'enter' | 'shiftEnter'
+   * @default 'enter'
+   */
+  sendShortcutKey?: 'enter' | 'shiftEnter';
+
+  /**
+   * @description 发送消息的回调函数，返回布尔值或 Promise 布尔值表示是否发送成功
+   * @param message - 需要发送的消息内容
+   * @returns {boolean | Promise<boolean>}
+   */
+  onSend?: (message: string) => boolean | Promise<boolean>;
+
+  /**
+   * @description 输入框内容变化的回调函数
+   * @param message - 输入框的内容
+   * @returns {void}
+   */
+  onChange?: (message: string) => void;
+
+  /**
+   * @description 清除消息的回调函数
+   */
+  onClearMessage?: () => void;
+
+  /**
+   * @description 更改网络状态的回调函数
+   */
+  onChangeNetwork?: () => void;
+
+  /**
+   * @description 重新生成消息的回调函数，支持返回 Promise 对象
+   * @returns {void | Promise<void>}
+   */
+  onRegenerate?: () => void | Promise<void>;
+
+  /**
+   * @description 发送消息的函数
+   * @param message - 需要发送的消息内容
+   * @returns {void | Promise<void>}
+   */
+  sendMessage?: (message: string) => void | Promise<void>;
+
+  /**
+   * @description 停止生成消息的函数
+   */
+  stopGenerateMessage?: () => void;
+
+  /**
+   * @description 清除所有消息的回调函数
+   */
+  clearMessage?: () => void;
+
+  /**
+   * @description 消息发送状态，表示是否正在发送中
+   * @type boolean
+   */
+  isLoading: boolean;
+
+  /**
+   * @description 输入框的占位符
+   * @type string
+   */
+  placeholder?: string;
+
+  /**
+   * @description 输入框的属性配置
+   * @type TextAreaProps
+   */
+  inputAreaProps?: TextAreaProps;
+
+  /**
+   * @description 自定义发送按钮的渲染函数
+   * @param defaultDom - 默认的发送按钮 DOM
+   * @param defaultProps - 默认的发送按钮属性
+   * @returns {ReactNode}
+   */
+  sendButtonRender?: (defaultDom: ReactNode, defaultProps: ButtonProps) => ReactNode;
+
+  /**
+   * @description 自定义输入框的渲染函数
+   * @param defaultDom - 默认的输入框 DOM
+   * @param onMessageSend - 消息发送处理函数
+   * @param defaultProps - 默认的输入框属性
+   * @returns {ReactNode}
+   */
+  inputRender?: (
+    defaultDom: ReactNode,
+    onMessageSend: (message: string) => void | Promise<any>,
+    defaultProps: TextAreaProps,
+  ) => ReactNode;
+
+  /**
+   * @description 自定义输入区域的渲染函数
+   * @param defaultDom - 默认的输入区域 DOM
+   * @param onMessageSend - 消息发送处理函数
+   * @param onClearAllHistory - 清除所有历史记录的处理函数
+   * @returns {ReactNode}
+   */
+  inputAreaRender?: (
+    defaultDom: ReactNode,
+    onMessageSend: (message: string) => void | Promise<any>,
+    onClearAllHistory: () => void,
+  ) => ReactNode;
+  /**
+   * @description 其他属性，透传至源组件
+   */
+  [key: string]: any;
+};
+
+export const ProInputArea = ({
+  className,
+  sendMessage,
+  stopGenerateMessage,
+  isLoading,
+  placeholder,
+  inputAreaProps,
+  sendShortcutKey = 'enter',
+  extra,
+  value,
+  onSend,
+  onChange,
+  clearMessage,
+  sendButtonRender,
+  inputRender,
+  inputAreaRender,
+  ...rest
+}: ProInputAreaProps) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const isChineseInput = useRef(false);
+  const { styles, theme } = useStyles();
+  const { localeObject } = useProChatLocale();
+  const [message, setMessage] = useState('');
+  const [currentShortcutKey] = useState(sendShortcutKey);
+
+  useEffect(() => {
+    if (!isChineseInput.current && onChange) {
+      onChange(message);
+    }
+  }, [message]);
+
+  useEffect(() => {
+    if (value) {
+      setMessage(value);
+    }
+  }, [value]);
+
+  const send = async () => {
+    if (onSend) {
+      const success = await onSend(message);
+      if (success) {
+        sendMessage(message);
+        setMessage('');
+      }
+    } else {
+      sendMessage(message);
+      setMessage('');
+    }
+  };
+
+  const prefixClass = getPrefixCls('pro-chat-input-area');
+
+  const defaultProTextAreaProps = {
+    placeholder: placeholder || localeObject.placeholder,
+    ...inputAreaProps,
+    className: cx(styles.input, inputAreaProps?.className, `${prefixClass}-component`),
+    value: message,
+    onChange: (e) => {
+      setMessage(e.target.value);
+    },
+    autoSize: { maxRows: 8 },
+    onCompositionStart: () => {
+      isChineseInput.current = true;
+    },
+    onCompositionEnd: (e) => {
+      isChineseInput.current = false;
+      setMessage(e.target.value);
+    },
+    onPressEnter: (e) => {
+      if (currentShortcutKey === ENTER) {
+        if (!isLoading && !e.shiftKey && !isChineseInput.current) {
+          e.preventDefault();
+          send();
+        }
+      } else if (currentShortcutKey === SHIFT_ENTER) {
+        if (!isLoading && e.shiftKey && !isChineseInput.current) {
+          e.preventDefault();
+          send();
+        }
+      }
+    },
+    ...rest,
+  };
+
+  const defaultInput = <ProTextArea {...defaultProTextAreaProps} />;
+
+  const inputDom = inputRender
+    ? inputRender?.(
+        defaultInput,
+        (message) => {
+          sendMessage(message);
+        },
+        defaultProTextAreaProps,
+      )
+    : defaultInput;
+
+  const defaultButtonProps = useMemo(() => {
+    return isLoading
+      ? ({
+          type: 'text',
+          className: styles.btn,
+          onClick: () => stopGenerateMessage(),
+          icon: <StopLoadingIcon />,
+        } as const)
+      : ({
+          type: 'text',
+          className: styles.btn,
+          onClick: () => send(),
+          icon: <SendOutlined />,
+        } as const);
+  }, [isLoading, message]);
+
+  const defaultButtonDom = <Button {...defaultButtonProps} />;
+
+  const buttonDom = sendButtonRender
+    ? sendButtonRender(defaultButtonDom, defaultButtonProps)
+    : defaultButtonDom;
+
+  const defaultInputArea = (
+    <ConfigProvider
+      theme={{
+        token: {
+          borderRadius: 4,
+          colorBgContainer: theme.colorBgElevated,
+          controlHeightLG: 48,
+          colorBorder: 'transparent',
+          colorPrimaryHover: 'transparent',
+        },
+      }}
+    >
+      <Flexbox gap={8} padding={16} className={cx(styles.container, `${prefixClass}`, className)}>
+        <Flexbox horizontal justify="space-between">
+          <ExtraModel className={`${prefixClass}-extra`} extra={extra} />
+          <ControlPanel className={`${prefixClass}-action-bar`} clearMessage={clearMessage} />
+        </Flexbox>
+        <Flexbox
+          horizontal
+          gap={8}
+          align={'center'}
+          className={cx(styles.boxShadow, `${prefixClass}-text-container`)}
+        >
+          {inputDom}
+          {buttonDom}
+        </Flexbox>
+      </Flexbox>
+    </ConfigProvider>
+  );
+
+  if (inputAreaRender) {
+    return inputAreaRender(
+      defaultInputArea,
+      (message) => {
+        sendMessage(message);
+      },
+      clearMessage,
+    );
+  }
+
+  return defaultInputArea;
+};
+
+export default ProInputArea;
diff --git a/src/index.ts b/src/index.ts
index 1a703aa2..74418877 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -28,6 +28,7 @@ export { default as List } from './List';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
 export { default as MessageModal, type MessageModalProps } from './MessageModal';
 
+export {default as ProInputArea,type ProInputAreaProps} from './ProInputArea'
 export { default as TokenTag, type TokenTagProps } from './TokenTag';
 export { useChatListActionsBar } from './hooks/useChatListActionsBar';
 export * from './styles';
diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
index 960d9d62..500e3dac 100644
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@@ -14,4 +14,8 @@ export default {
   edit: 'Edit',
   history: 'History',
   regenerate: 'Regenerate',
+  connectNetwork: 'Connect to network',
+  video: 'Video upload',
+  audio: 'Audio upload',
+  image: 'Image upload',
 };
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index 10580e9e..c3844e17 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -13,4 +13,8 @@ export default {
   edit: '编辑',
   history: '历史范围',
   regenerate: '重新生成',
+  connectNetwork: '是否连接网络',
+  video: '视频上传',
+  audio: '音频上传',
+  image: '图片上传',
 };
diff --git a/src/locale/zh-HK.ts b/src/locale/zh-HK.ts
index e3ba0d1b..b74e88f2 100644
--- a/src/locale/zh-HK.ts
+++ b/src/locale/zh-HK.ts
@@ -13,4 +13,8 @@ export default {
   edit: '編輯',
   history: '歷史',
   regenerate: '重新生成',
+  connectNetwork: '是否連接網絡',
+  video: '視頻上傳',
+  audio: '音頻上傳',
+  image: '圖片上傳',
 };
diff --git a/src/types/locale.ts b/src/types/locale.ts
index e3dbf4c9..a9abe562 100644
--- a/src/types/locale.ts
+++ b/src/types/locale.ts
@@ -13,4 +13,8 @@ export interface LocaleProps {
   edit: string;
   history: string;
   regenerate: string;
+  connectNetwork: string;
+  video: string;
+  audio: string;
+  image: string;
 }