diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
index 1ef00ed6..e6f2c25c 100644
--- a/components/bubble/Bubble.tsx
+++ b/components/bubble/Bubble.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 import { Avatar } from 'antd';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import { useXProviderContext } from '../x-provider';
+import Editor from './Editor';
+import useEditableConfig from './hooks/useEditableConfig';
 import useTypedEffect from './hooks/useTypedEffect';
 import useTypingConfig from './hooks/useTypingConfig';
 import type { BubbleProps } from './interface';
@@ -40,6 +42,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    editable = {},
     ...otherHtmlProps
   } = props;
 
@@ -60,6 +63,17 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   // ===================== Component Config =========================
   const contextConfig = useXComponentConfig('bubble');
 
+  // =========================== Editable ===========================
+  const {
+    enableEdit,
+    isEditing,
+    onEditorChange,
+    onEditorCancel,
+    onEditorEnd,
+    editorTextAreaConfig,
+    editorButtonsConfig,
+  } = useEditableConfig(editable);
+
   // ============================ Typing ============================
   const [typingEnabled, typingStep, typingInterval] = useTypingConfig(typing);
 
@@ -119,23 +133,43 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     contentNode = mergedContent as React.ReactNode;
   }
 
-  let fullContent: React.ReactNode = (
-    <div
-      style={{
-        ...contextConfig.styles.content,
-        ...styles.content,
-      }}
-      className={classnames(
-        `${prefixCls}-content`,
-        `${prefixCls}-content-${variant}`,
-        shape && `${prefixCls}-content-${shape}`,
-        contextConfig.classNames.content,
-        classNames.content,
-      )}
-    >
-      {contentNode}
-    </div>
-  );
+  let fullContent: React.ReactNode =
+    enableEdit && isEditing ? (
+      <Editor
+        prefixCls={prefixCls}
+        value={mergedContent as string}
+        onChange={onEditorChange}
+        onCancel={onEditorCancel}
+        onEnd={onEditorEnd}
+        style={{
+          ...contextConfig.styles.editor,
+          ...editable.styles,
+        }}
+        className={classnames(
+          `${prefixCls}-editor`,
+          contextConfig.classNames.editor,
+          editable.classNames,
+        )}
+        editorTextAreaConfig={editorTextAreaConfig}
+        editorButtonsConfig={editorButtonsConfig}
+      />
+    ) : (
+      <div
+        style={{
+          ...contextConfig.styles.content,
+          ...styles.content,
+        }}
+        className={classnames(
+          `${prefixCls}-content`,
+          `${prefixCls}-content-${variant}`,
+          shape && `${prefixCls}-content-${shape}`,
+          contextConfig.classNames.content,
+          classNames.content,
+        )}
+      >
+        {contentNode}
+      </div>
+    );
 
   if (header || footer) {
     fullContent = (
diff --git a/components/bubble/Editor.tsx b/components/bubble/Editor.tsx
new file mode 100644
index 00000000..ee1e824e
--- /dev/null
+++ b/components/bubble/Editor.tsx
@@ -0,0 +1,121 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { Button, Flex, Input } from 'antd';
+import type { TextAreaRef } from 'antd/lib/input/TextArea';
+import type { EditConfig } from './interface';
+import useStyle from './style';
+
+const { TextArea } = Input;
+
+interface EditableProps extends EditConfig {
+  prefixCls: string;
+  value: string;
+  onChange?: (value: string) => void;
+  onCancel?: () => void;
+  onEnd?: (value: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  editorTextAreaConfig?: EditConfig['textarea'];
+  editorButtonsConfig?: EditConfig['buttons'];
+}
+
+const Editor: React.FC<EditableProps> = (props) => {
+  const {
+    prefixCls,
+    className,
+    style,
+    value,
+    onChange,
+    onCancel,
+    onEnd,
+    editorTextAreaConfig,
+    editorButtonsConfig,
+  } = props;
+  const textAreaRef = React.useRef<TextAreaRef>(null);
+
+  const [current, setCurrent] = React.useState(value);
+
+  React.useEffect(() => {
+    setCurrent(value);
+  }, [value]);
+
+  React.useEffect(() => {
+    if (textAreaRef.current?.resizableTextArea) {
+      const { textArea } = textAreaRef.current.resizableTextArea;
+      textArea.focus();
+      const { length } = textArea.value;
+      textArea.setSelectionRange(length, length);
+    }
+  }, []);
+
+  const onTextAreaChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
+    setCurrent(target.value.replace(/[\n\r]/g, ''));
+    onChange?.(target.value.replace(/[\n\r]/g, ''));
+  };
+
+  const confirmEnd = () => {
+    onEnd?.(current.trim());
+  };
+
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
+  const editorClassName = classNames(
+    prefixCls,
+    `${prefixCls}-editor`,
+    className,
+    hashId,
+    cssVarCls,
+  );
+
+  const EditorButtons: React.FC<EditConfig['buttons']> = (editorButtonsConfig) => {
+    const defaultButtonsConfig = [
+      { type: 'cancel', text: 'Cancel', option: {} },
+      { type: 'save', text: 'Save', option: {} },
+    ];
+
+    const buttonsConfig =
+      editorButtonsConfig && editorButtonsConfig.length > 0
+        ? editorButtonsConfig
+        : defaultButtonsConfig;
+
+    return buttonsConfig.map((config, index) => {
+      const { type, text, option } = config;
+      const handlers = {
+        cancel: onCancel,
+        save: confirmEnd,
+      };
+      return (
+        <Button
+          size="small"
+          key={index}
+          type={type === 'save' ? 'primary' : undefined}
+          {...option}
+          onClick={handlers[type as keyof typeof handlers]}
+        >
+          {text || type}
+        </Button>
+      );
+    });
+  };
+
+  return wrapCSSVar(
+    <div className={editorClassName} style={style}>
+      <Flex gap="small" vertical flex="auto">
+        <TextArea
+          variant="borderless"
+          ref={textAreaRef}
+          value={current}
+          onChange={onTextAreaChange}
+          autoSize={{ minRows: 2, maxRows: 3 }}
+          {...editorTextAreaConfig}
+        />
+        <Flex gap="small" justify="end">
+          {EditorButtons(editorButtonsConfig)}
+        </Flex>
+      </Flex>
+    </div>,
+  );
+};
+
+export default Editor;
diff --git a/components/bubble/demo/editable.md b/components/bubble/demo/editable.md
new file mode 100644
index 00000000..8e1460c9
--- /dev/null
+++ b/components/bubble/demo/editable.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+通过设置 `editable` 属性，开启对 `content` 的编辑效果。
+
+## en-US
+
+Enable the editing effect of `content` by setting the `editable` property.
diff --git a/components/bubble/demo/editable.tsx b/components/bubble/demo/editable.tsx
new file mode 100644
index 00000000..92d5856f
--- /dev/null
+++ b/components/bubble/demo/editable.tsx
@@ -0,0 +1,145 @@
+import {
+  DeleteOutlined,
+  EditOutlined,
+  LeftOutlined,
+  RightOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { Bubble } from '@ant-design/x';
+import { Button, Flex } from 'antd';
+import React from 'react';
+import { EditConfig } from '../interface';
+
+const fooAvatar: React.CSSProperties = {
+  color: '#f56a00',
+  backgroundColor: '#fde3cf',
+};
+
+const barAvatar: React.CSSProperties = {
+  color: '#fff',
+  backgroundColor: '#87d068',
+};
+
+const hideAvatar: React.CSSProperties = {
+  visibility: 'hidden',
+};
+
+const App = () => {
+  const [editing, setEditing] = React.useState(false);
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [editHistory, setEditHistory] = React.useState(['Good morning, how are you?']); // 编辑历史记录
+
+  const triggerEdit = () => {
+    setEditing((prev) => !prev);
+  };
+
+  const triggerDelete = () => {
+    if (editHistory.length === 1 || editing) return null;
+    // Some else logic
+    setEditHistory((prev) => {
+      const newHistory = [...prev];
+      newHistory.splice(currentIndex, 1);
+      setCurrentIndex(Math.min(currentIndex, newHistory.length - 1));
+      return newHistory;
+    });
+  };
+
+  const handleLeftClick = () => {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  };
+
+  const handleRightClick = () => {
+    if (currentIndex < editHistory.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  };
+
+  const cancelEdit = () => {
+    setEditing(false);
+  };
+
+  const endEdit = (c: string) => {
+    setEditing(false);
+    setEditHistory((prev) => {
+      const newHistory = [...prev, c];
+      setCurrentIndex(newHistory.length - 1);
+      return newHistory;
+    });
+  };
+
+  const editConfig: EditConfig = {
+    editing,
+    onCancel: cancelEdit,
+    onEnd: endEdit,
+    textarea: { autoSize: { minRows: 2, maxRows: 4 } },
+    styles: {
+      minWidth: '50%',
+    },
+    buttons: [
+      {
+        type: 'cancel',
+        text: 'Cancel',
+        option: { danger: true },
+      },
+      {
+        type: 'save',
+        text: 'Save',
+        option: { type: 'primary' },
+      },
+    ],
+  };
+
+  return (
+    <Flex gap="middle" vertical>
+      <Bubble
+        placement="end"
+        content={editHistory[currentIndex]}
+        editable={editConfig}
+        avatar={{ icon: <UserOutlined />, style: barAvatar }}
+        header={
+          editHistory.length > 1 &&
+          !editing && (
+            <Flex justify="end">
+              <Button
+                size="small"
+                type="text"
+                icon={<LeftOutlined />}
+                onClick={handleLeftClick}
+                disabled={currentIndex === 0}
+              />
+              <span>{`${currentIndex + 1} / ${editHistory.length}`}</span>
+              <Button
+                size="small"
+                type="text"
+                icon={<RightOutlined />}
+                onClick={handleRightClick}
+                disabled={currentIndex === editHistory.length - 1}
+              />
+            </Flex>
+          )
+        }
+        footer={
+          <Flex justify="end">
+            <Button size="small" type="text" icon={<DeleteOutlined />} onClick={triggerDelete} />
+            <Button size="small" type="text" icon={<EditOutlined />} onClick={triggerEdit} />
+          </Flex>
+        }
+      />
+      <Bubble
+        placement="start"
+        content="Hi, good morning, I'm fine!"
+        avatar={{ icon: <UserOutlined />, style: fooAvatar }}
+      />
+      <Bubble
+        placement="start"
+        content="What a beautiful day!"
+        styles={{ avatar: hideAvatar }}
+        avatar={{}}
+      />
+    </Flex>
+  );
+};
+
+export default App;
diff --git a/components/bubble/hooks/useEditableConfig.ts b/components/bubble/hooks/useEditableConfig.ts
new file mode 100644
index 00000000..cb14cbbf
--- /dev/null
+++ b/components/bubble/hooks/useEditableConfig.ts
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import type { BubbleProps } from '../interface';
+
+function useEditableConfig(editable: BubbleProps['editable']) {
+  if (!editable) {
+    return {
+      enableEdit: false,
+      isEditing: false,
+      onEditorChange: () => {},
+      onEditorCancel: () => {},
+      onEditorEnd: () => {},
+      editorTextAreaConfig: undefined,
+      editorButtonsConfig: [],
+    };
+  }
+
+  const editConfig = React.useMemo(() => editable, [editable]);
+  const [isEditing, setIsEditing] = React.useState(editable.editing || false);
+
+  React.useEffect(() => {
+    setIsEditing(editConfig.editing || false);
+  }, [editConfig.editing]);
+
+  const handlers = {
+    onEditorChange: (value: string) => {
+      editConfig.onChange?.(value);
+    },
+    onEditorCancel: () => {
+      editConfig.onCancel?.();
+      setIsEditing(false);
+    },
+    onEditorEnd: (value: string) => {
+      editConfig.onEnd?.(value);
+      setIsEditing(false);
+    },
+  };
+
+  return {
+    enableEdit: true,
+    isEditing,
+    ...handlers,
+    editorTextAreaConfig: editConfig.textarea,
+    editorButtonsConfig: editConfig.buttons,
+  };
+}
+
+export default useEditableConfig;
diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md
index e149fb33..b70c28a2 100644
--- a/components/bubble/index.en-US.md
+++ b/components/bubble/index.en-US.md
@@ -23,6 +23,7 @@ Often used when chatting.
 <code src="./demo/avatar-and-placement.tsx">Placement and avatar</code>
 <code src="./demo/header-and-footer.tsx">Header and footer</code>
 <code src="./demo/loading.tsx">Loading</code>
+<code src="./demo/editable.tsx">Editing effect</code>
 <code src="./demo/typing.tsx">Typing effect</code>
 <code src="./demo/markdown.tsx">Content render</code>
 <code src="./demo/variant.tsx">Variant</code>
@@ -63,6 +64,28 @@ Common props ref：[Common props](/docs/react/common-props)
 | items | Bubble items list | (BubbleProps & { key?: string \| number, role?: string })[] | - |  |
 | roles | Set the default properties of the bubble. The `role` in `items` will be automatically matched. | Record<string, BubbleProps> \| (bubble) => BubbleProps | - |  |
 
+### editable
+
+```tsx
+interface EditConfig {
+  editing?: boolean;
+  onChange?: (content: string) => void;
+  onCancel?: () => void;
+  onEnd?: (content: string) => void;
+  editorTextAreaConfig?: TextAreaProps;
+  editorButtonConfig?: { type: 'save' | 'cancel'; text?: string; option?: ButtonProps }[];
+}
+```
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| editing | Wether to be editable | boolean | false |  |
+| onChange | Called when input at textarea | (content?:string) => void | - |  |
+| onCancel | Called when exiting the editable state | () => void | - |  |
+| onEnd | Called when saving or ending the editable state | (content?:string) => void | - |  |
+| editorTextAreaConfig | Configure settings related to textarea in the editor | TextAreaProps | variant="borderless" autoSize={{ minRows: 2, maxRows: 3 }} |  |
+| editorButtonConfig | Configure settings related to button in the editor | { type: 'save' \| 'cancel'; text?: string; option?: ButtonProps }[] | [{ type: 'save', text: 'Save', option: { size: 'small', type: 'primary' } }, { type: 'cancel', text: 'Cancel', option: { size: 'small' } }] |  |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md
index 948457ac..f142636c 100644
--- a/components/bubble/index.zh-CN.md
+++ b/components/bubble/index.zh-CN.md
@@ -24,6 +24,7 @@ demo:
 <code src="./demo/avatar-and-placement.tsx">支持位置和头像</code>
 <code src="./demo/header-and-footer.tsx">头和尾</code>
 <code src="./demo/loading.tsx">加载中</code>
+<code src="./demo/editable.tsx">编辑效果</code>
 <code src="./demo/typing.tsx">打字效果</code>
 <code src="./demo/markdown.tsx">自定义渲染</code>
 <code src="./demo/variant.tsx">变体</code>
@@ -64,6 +65,28 @@ demo:
 | items | 气泡数据列表 | (BubbleProps & { key?: string \| number, role?: string })[] | - |  |
 | roles | 设置气泡默认属性，`items` 中的 `role` 会进行自动对应 | Record<string, BubbleProps> \| (bubble) => BubbleProps | - |  |
 
+### editable
+
+```tsx
+interface EditConfig {
+  editing?: boolean;
+  onChange?: (content: string) => void;
+  onCancel?: () => void;
+  onEnd?: (content: string) => void;
+  editorTextAreaConfig?: TextAreaProps;
+  editorButtonConfig?: { type: 'save' | 'cancel'; text?: string; option?: ButtonProps }[];
+}
+```
+
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| editing | 控制是否是编辑中状态 | boolean | false |  |
+| onChange | 文本域编辑时触发 | (content?:string) => void | - |  |
+| onCancel | 退出编辑状态时触发 | () => void | - |  |
+| onEnd | 保存/结束编辑状态时触发 | (content?:string) => void | - |  |
+| editorTextAreaConfig | 配置编辑器中文本域的相关设置 | TextAreaProps | variant="borderless" autoSize={{ minRows: 2, maxRows: 3 }} |  |
+| editorButtonConfig | 配置编辑器中按钮的相关设置 | { type: 'save' \| 'cancel'; text?: string; option?: ButtonProps }[] | [{ type: 'save', text: 'Save', option: { size: 'small', type: 'primary' } }, { type: 'cancel', text: 'Cancel', option: { size: 'small' } }] |  |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
index 5b939090..cf4b7ca5 100644
--- a/components/bubble/interface.ts
+++ b/components/bubble/interface.ts
@@ -1,4 +1,6 @@
 import type { AvatarProps } from 'antd';
+import { TextAreaProps } from 'antd/es/input';
+import { ButtonProps } from 'antd/lib';
 
 export interface TypingOption {
   /**
@@ -13,6 +15,23 @@ export interface TypingOption {
 
 type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
 
+type EditorButtonsConfig = {
+  type: 'save' | 'cancel';
+  text?: string;
+  option?: ButtonProps;
+};
+
+export interface EditConfig {
+  editing?: boolean;
+  onChange?: (content: string) => void;
+  onCancel?: VoidFunction;
+  onEnd?: (content: string) => void;
+  styles?: React.CSSProperties;
+  classNames?: string;
+  textarea?: TextAreaProps;
+  buttons?: EditorButtonsConfig[];
+}
+
 export interface BubbleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
   prefixCls?: string;
   rootClassName?: string;
@@ -30,4 +49,5 @@ export interface BubbleProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   onTypingComplete?: VoidFunction;
   header?: React.ReactNode;
   footer?: React.ReactNode;
+  editable?: EditConfig;
 }
diff --git a/components/bubble/style/index.ts b/components/bubble/style/index.ts
index b7319603..9dd05685 100644
--- a/components/bubble/style/index.ts
+++ b/components/bubble/style/index.ts
@@ -49,7 +49,6 @@ const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
       [`&${componentCls}-end`]: {
         justifyContent: 'end',
         flexDirection: 'row-reverse',
-
         [`& ${componentCls}-content-wrapper`]: {
           alignItems: 'flex-end',
         },
@@ -142,6 +141,15 @@ const genBubbleStyle: GenerateStyle<BubbleToken> = (token) => {
           },
         },
       },
+      // =========================== Editor =============================
+      [`& ${componentCls}-editor`]: {
+        minWidth: '30%',
+        maxWidth: '100%',
+        border: `1px solid ${token.colorPrimary}`,
+        padding: token.paddingSM,
+        borderRadius: token.borderRadius,
+        boxShadow: token.boxShadow,
+      },
     },
   };
 };