✨ feat: Add new props and improve customization options in components

- Add "text" prop to ChatInputArea, EditableMessage, and MessageInput components for customizing button text
- Add "style" prop to EditableMessage and Markdown components for customizing styles
- Add "children" prop to GradientButton component for rendering custom content

These changes enhance the flexibility and customization options for the mentioned components.

src/ChatInputArea/index.tsx

@@ -77,6 +77,9 @@ export interface ChatInputAreaProps extends TextAreaProps {
    * @description CSS styles for the component
    */
   style?: CSSProperties;
+  text?: {
+    send?: string;
+  };
   /**
    * @description Additional class name for the textarea element
    */
@@ -90,6 +93,7 @@ export interface ChatInputAreaProps extends TextAreaProps {
 const ChatInputArea = forwardRef<InputRef, ChatInputAreaProps>(
   (
     {
+      text,
       textareaClassName,
       style,
       textareaStyle,
@@ -181,7 +185,7 @@ const ChatInputArea = forwardRef<InputRef, ChatInputAreaProps>(
         <div className={styles.footerBar}>
           {footer}
           <Button disabled={disabled} loading={loading} onClick={handleSend} type="primary">
-            Send
+            {text?.send || 'Send'}
           </Button>
         </div>
       </section>

src/EditableMessage/index.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 import useControlledState from 'use-merge-value';
 
 import Markdown from '@/Markdown';
@@ -50,6 +50,16 @@ export interface EditableMessageProps {
    * @default false
    */
   showEditWhenEmpty?: boolean;
+  style?: {
+    /**
+     * @title The style for the MessageInput component
+     */
+    input?: CSSProperties;
+    /**
+     * @title The style for the Markdown component
+     */
+    markdown?: CSSProperties;
+  };
   /**
    * @title The current text value
    */
@@ -67,6 +77,7 @@ const EditableMessage = memo<EditableMessageProps>(
     onOpenChange,
     placeholder = 'Type something...',
     showEditWhenEmpty = false,
+    style,
   }) => {
     const [isEdit, setTyping] = useControlledState(false, {
       onChange: onEditingChange,
@@ -80,14 +91,15 @@ const EditableMessage = memo<EditableMessageProps>(
 
     return !value && showEditWhenEmpty ? (
       <MessageInput
-        className={classNames.input}
+        className={classNames?.input}
         defaultValue={value}
         onCancel={() => setTyping(false)}
         onConfirm={(text) => {
           onChange?.(text);
           setTyping(false);
         }}
         placeholder={placeholder}
+        style={style?.input}
       />
     ) : (
       <>
@@ -103,17 +115,20 @@ const EditableMessage = memo<EditableMessageProps>(
         />
         {!expand && isEdit ? (
           <MessageInput
-            className={classNames.input}
+            className={classNames?.input}
             defaultValue={value}
             onCancel={() => setTyping(false)}
             onConfirm={(text) => {
               onChange?.(text);
               setTyping(false);
             }}
             placeholder={placeholder}
+            style={style?.input}
           />
         ) : (
-          <Markdown className={classNames.markdown}>{value}</Markdown>
+          <Markdown className={classNames?.markdown} style={style?.markdown}>
+            {value}
+          </Markdown>
         )}
       </>
     );

src/GradientButton/index.tsx

@@ -1,9 +1,11 @@
-import { Button, ButtonProps } from 'antd';
-import { memo } from 'react';
+import { Button, type ButtonProps } from 'antd';
+import { ReactNode, memo } from 'react';
 
 import { useStyles } from './style';
 
 export interface GradientButtonProps extends ButtonProps {
+  children?: ReactNode;
+  className?: string;
   /**
    * @description Whether the button should spin or not
    * @default false

src/Markdown/index.tsx

@@ -1,6 +1,6 @@
 import { Collapse, Divider, Typography } from 'antd';
 import pangu from 'pangu';
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -17,10 +17,11 @@ export interface MarkdownProps {
    * @description The class name for the Markdown component
    */
   className?: string;
+  style?: CSSProperties;
 }
 
-const Markdown = memo<MarkdownProps>(({ children, className, ...props }) => {
-  const { styles, cx } = useStyles();
+const Markdown = memo<MarkdownProps>(({ children, className, style, ...props }) => {
+  const { styles } = useStyles();
   const components: any = {
     a: Typography.Link,
     code: Code,
@@ -30,9 +31,9 @@ const Markdown = memo<MarkdownProps>(({ children, className, ...props }) => {
   };
 
   return (
-    <Typography>
+    <Typography className={className} style={style}>
       <ReactMarkdown
-        className={cx(styles.markdown, className)}
+        className={styles.markdown}
         components={components}
         remarkPlugins={[remarkGfm]}
         {...props}

src/MessageInput/index.tsx

@@ -30,6 +30,10 @@ export interface MessageInputProps extends DivProps {
    * @param text - The text input by the user.
    */
   renderButtons?: (text: string) => ButtonProps[];
+  text?: {
+    cancel?: string;
+    confirm?: string;
+  };
   textareaClassname?: string;
   textareaStyle?: CSSProperties;
   /**
@@ -40,6 +44,7 @@ export interface MessageInputProps extends DivProps {
 
 const MessageInput = memo<MessageInputProps>(
   ({
+    text,
     type = 'pure',
     onCancel,
     defaultValue,
@@ -81,10 +86,10 @@ const MessageInput = memo<MessageInputProps>(
                 size="small"
                 type="primary"
               >
-                Confirm
+                {text?.confirm || 'Confirm'}
               </Button>
               <Button onClick={onCancel} size="small">
-                Cancel
+                {text?.cancel || 'Cancel'}
               </Button>
             </>
           )}