✨ feat: add MessageModal component

src/MessageModal/demos/index.tsx

@@ -0,0 +1,19 @@
+import { MessageModal } from '@lobehub/ui';
+import { Button } from 'antd';
+import { useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        open
+      </Button>
+      <MessageModal open={open} onOpenChange={setOpen} value={'editable text'} />
+    </>
+  );
+};

src/MessageModal/index.md

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

src/MessageModal/index.tsx

@@ -0,0 +1,84 @@
+import { AimOutlined } from '@ant-design/icons';
+import { Modal } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
+
+import Markdown from '@/Markdown';
+import MessageInput from '@/MessageInput';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  modal: css`
+    height: 70%;
+    .${prefixCls}-modal-header {
+      margin-bottom: 24px;
+    }
+  `,
+  body: css`
+    overflow-y: scroll;
+    max-height: 70vh;
+  `,
+}));
+
+export interface MessageModalProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  editing?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+  onChange?: (text: string) => void;
+  value: string;
+}
+
+const MessageModal = memo<MessageModalProps>(
+  ({ editing, open, onOpenChange, onEditingChange, value, onChange }) => {
+    const { styles } = useStyles();
+
+    const [isEdit, setTyping] = useControlledState(false, {
+      value: editing,
+      onChange: onEditingChange,
+    });
+
+    const [expand, setExpand] = useControlledState(false, {
+      value: open,
+      onChange: onOpenChange,
+    });
+
+    return (
+      <Modal
+        open={expand}
+        width={800}
+        onCancel={() => setExpand(false)}
+        okText={'编辑'}
+        onOk={() => {
+          setTyping(true);
+        }}
+        footer={isEdit ? null : undefined}
+        cancelText={'关闭'}
+        title={
+          <Flexbox horizontal align={'center'} gap={4}>
+            <AimOutlined />
+            提示词
+          </Flexbox>
+        }
+        className={styles.modal}
+      >
+        {isEdit ? (
+          <MessageInput
+            onConfirm={(text) => {
+              setTyping(false);
+              onChange?.(text);
+            }}
+            onCancel={() => setTyping(false)}
+            defaultValue={value}
+            height={400}
+          />
+        ) : (
+          <Markdown className={styles.body}>{value}</Markdown>
+        )}
+      </Modal>
+    );
+  },
+);
+
+export default MessageModal;

src/index.ts

@@ -16,6 +16,7 @@ export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
+export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as Snippet, type SnippetProps } from './Snippet';