✨ feat: Add new props and import MessageModal component

- Add "text" and "placeholder" props to EditableMessage component
- Add "placeholder" and "text" props to MessageModal component
- Modify rendering and behavior based on new props

The changes introduce new props to the EditableMessage and MessageModal components, allowing for more customization and improved functionality. The import of the MessageModal component enables its usage in the codebase.

Author: canisminor1990

src/EditableMessage/index.tsx

@@ -3,7 +3,7 @@ import useControlledState from 'use-merge-value';
 
 import Markdown from '@/Markdown';
 import MessageInput from '@/MessageInput';
-import MessageModal from '@/MessageModal';
+import MessageModal, { type MessageModalProps } from '@/MessageModal';
 
 export interface EditableMessageProps {
   /**
@@ -61,6 +61,7 @@ export interface EditableMessageProps {
      */
     markdown?: CSSProperties;
   };
+  text?: MessageModalProps['text'];
   /**
    * @title The current text value
    */
@@ -80,6 +81,7 @@ const EditableMessage = memo<EditableMessageProps>(
     showEditWhenEmpty = false,
     styles,
     editButtonSize,
+    text,
   }) => {
     const [isEdit, setTyping] = useControlledState(false, {
       onChange: onEditingChange,
@@ -121,17 +123,20 @@ const EditableMessage = memo<EditableMessageProps>(
           />
         ) : (
           <Markdown className={classNames?.markdown} style={styles?.markdown}>
-            {value}
+            {value || placeholder}
           </Markdown>
         )}
         <MessageModal
           editing={isEdit}
-          onChange={(text) => {
-            onChange?.(text);
-          }}
+          onChange={(text) => onChange?.(text)}
           onEditingChange={setTyping}
-          onOpenChange={setExpand}
+          onOpenChange={(e) => {
+            setExpand(e);
+            setTyping(false);
+          }}
           open={expand}
+          placeholder={placeholder}
+          text={text}
           value={value}
         />
       </>

src/MessageModal/index.tsx

@@ -33,14 +33,21 @@ export interface MessageModalProps {
    * @default false
    */
   open?: boolean;
+  placeholder?: string;
+  text?: {
+    cancel?: string;
+    confirm?: string;
+    edit?: string;
+    title?: string;
+  };
   /**
    * @description The value of the message content
    */
   value: string;
 }
 
 const MessageModal = memo<MessageModalProps>(
-  ({ editing, open, onOpenChange, onEditingChange, value, onChange }) => {
+  ({ editing, open, onOpenChange, onEditingChange, placeholder, value, onChange, text }) => {
     const { styles } = useStyles();
 
     const [isEdit, setTyping] = useControlledState(false, {
@@ -55,19 +62,19 @@ const MessageModal = memo<MessageModalProps>(
 
     return (
       <Modal
-        cancelText={'Cancel'}
+        cancelText={text?.cancel || 'Cancel'}
         className={styles.modal}
         closeIcon={<Icon icon={X} />}
         footer={isEdit ? null : undefined}
-        okText={'Edit'}
+        okText={text?.edit || 'Edit'}
         onCancel={() => setExpand(false)}
         onOk={() => {
           setTyping(true);
         }}
         open={expand}
         title={
           <Flexbox align={'center'} gap={4} horizontal>
-            Prompt
+            {text?.title || 'Prompt'}
           </Flexbox>
         }
         width={800}
@@ -81,9 +88,16 @@ const MessageModal = memo<MessageModalProps>(
               setTyping(false);
               onChange?.(text);
             }}
+            placeholder={placeholder}
+            text={{
+              cancel: text?.cancel,
+              confirm: text?.confirm,
+            }}
           />
         ) : (
-          <Markdown className={styles.body}>{value}</Markdown>
+          <Markdown className={styles.body} style={value ? {} : { opacity: 0.5 }}>
+            {String(value || placeholder)}
+          </Markdown>
         )}
       </Modal>
     );