✨ feat(editable-message): add EditableMessage components

Add EditableMessage component that allows users to edit and display messages in a chat interface. The component includes a modal that appears when a user clicks on the message. The modal has an edit button that allows users to edit the message. If the message is empty, the component displays an edit button by default. The component also has an onChange prop that fires when the message is edited and an onOpenChange prop that fires when the modal is opened or closed.

📝 Add demos and API documentation for the component.

src/EditableMessage/demos/index.tsx

@@ -0,0 +1,5 @@
+import { EditableMessage } from '@lobehub/ui';
+
+export default () => {
+  return <EditableMessage value={'editable text'} />;
+};

src/EditableMessage/index.md

@@ -0,0 +1,14 @@
+---
+nav: Components
+group: Chat
+title: EditableMessage
+description: EditableMessage
+---
+
+## Default
+
+<code src="./demos/index.tsx" center></code>
+
+## APIs
+
+<API></API>

src/EditableMessage/index.tsx

@@ -0,0 +1,107 @@
+import Markdown from '@/Markdown';
+import MessageInput from '@/MessageInput';
+import MessageModal from '@/MessageModal';
+import { memo } from 'react';
+import useControlledState from 'use-merge-value';
+
+export interface EditableMessageProps {
+  /**
+   * @title 当前文本值
+   */
+  value: string;
+  /**
+   * @title 值改变时的回调函数
+   * @param value - 改变后的值
+   */
+  onChange?: (value: string) => void;
+  /**
+   * @title 是否打开模态框
+   * @default false
+   */
+  openModal?: boolean;
+  /**
+   * @title 模态框打开状态变化的回调函数
+   * @param open - 模态框是否打开
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * @title 是否处于编辑状态
+   * @default false
+   */
+  editing?: boolean;
+  /**
+   * @title 编辑状态变化的回调函数
+   * @param editing - 是否处于编辑状态
+   */
+  onEditingChange?: (editing: boolean) => void;
+  /**
+   * @title 当文本值为空时是否显示编辑按钮
+   * @default false
+   */
+  showEditWhenEmpty?: boolean;
+  classNames?: {
+    markdown?: string;
+    input?: string;
+  };
+}
+
+const EditableMessage = memo<EditableMessageProps>(
+  ({
+    value,
+    onChange,
+    classNames = {},
+    onEditingChange,
+    editing,
+    openModal,
+    onOpenChange,
+    showEditWhenEmpty = false,
+  }) => {
+    const [isEdit, setTyping] = useControlledState(false, {
+      value: editing,
+      onChange: onEditingChange,
+    });
+
+    const [expand, setExpand] = useControlledState<boolean>(false, {
+      value: openModal,
+      onChange: onOpenChange,
+    });
+
+    return !value && showEditWhenEmpty ? (
+      <MessageInput
+        onConfirm={(text) => {
+          onChange?.(text);
+          setTyping(false);
+        }}
+        className={classNames.input}
+      />
+    ) : (
+      <>
+        <MessageModal
+          open={expand}
+          onOpenChange={setExpand}
+          value={value}
+          editing={isEdit}
+          onEditingChange={setTyping}
+          onChange={(text) => {
+            onChange?.(text);
+          }}
+        />
+        {!expand && isEdit ? (
+          <MessageInput
+            onConfirm={(text) => {
+              onChange?.(text);
+              setTyping(false);
+            }}
+            onCancel={() => setTyping(false)}
+            defaultValue={value}
+            className={classNames.input}
+          />
+        ) : (
+          <Markdown className={classNames.markdown}>{value}</Markdown>
+        )}
+      </>
+    );
+  },
+);
+
+export default EditableMessage;

src/index.ts

@@ -3,6 +3,7 @@ export { default as Avatar, type AvatarProps } from './Avatar';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
+export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export {
   default as Highlighter,