yt-chat-components 1.1.2 → 1.1.3

package/src/YtChatView/chatWidget/chatWindow/chatMessage/index.tsx

@@ -1,464 +1,498 @@
-// @ts-nocheck
-import Markdown from 'react-markdown';
-import {ChatMessageType, InputValueType, MessageType} from '../types/chatWidget';
-import remarkGfm from 'remark-gfm';
-import rehypeMathjax from 'rehype-mathjax';
-// import './index.module.css';
-import upFilePng from '../../../../assets/aicenter/upfile.png';
-import {Form, Image, Input, message as messageTip, Select, DatePicker, Button} from 'antd';
-import React, {useState, useRef} from 'react';
-import typePdfPng from '../../../../assets/aicenter/type-pdf.png';
-import typeWordPng from '../../../../assets/aicenter/type-word.png';
-import typeExcelPng from '../../../../assets/aicenter/type-excel.png';
-import typeMarkdownPng from '../../../../assets/aicenter/type-markdown.png';
-import typeTextPng from '../../../../assets/aicenter/type-text.png';
-import typeMobiPng from '../../../../assets/aicenter/type-mobi.png';
-import typeRPubPng from '../../../../assets/aicenter/type-rpub.png';
-import playPng from '../../../../assets/aicenter/play.png';
-import playRunGif from '../../../../assets/aicenter/play-run.gif';
-import copyPng from '../../../../assets/aicenter/copy.png';
-
-let speechSynth = window.speechSynthesis;
-let utterance = null;
-
-export default function ChatMessage({
-  type = MessageType.text,
-  rawInfo,
-  message,
-  isSend,
-  error,
-  host_url,
-  user_message_style,
-  bot_message_style,
-  error_message_style,
-  handleSendMessage
-}: ChatMessageType) {
-  const parseFileName = (
-    text: string,
-  ): { fileName: string | null; fileType: string | null; isImg: boolean } => {
-    // 检查输入是否有效
-    if (!text || typeof text !== 'string') {
-      return { fileName: null, fileType: null };
-    }
-
-    // 找到最后一个反斜杠的位置
-    const lastBackslashIndex = text.lastIndexOf('\\');
-    if (lastBackslashIndex === -1) {
-      return { fileName: null, fileType: null }; // 如果没有找到反斜杠，返回空结果
-    }
-
-    // 截取反斜杠后面的部分
-    const fileNameWithExtension = text.substring(lastBackslashIndex + 1);
-
-    // 分割文件名和文件类型
-    const parts = fileNameWithExtension.split('.');
-    const fileName = parts.slice(0, -1).join('.'); // 文件名（不含扩展名）
-    const fileType = parts.length > 1 ? parts.pop() : null; // 文件类型
-
-    const isImg = fileType && ['jpg', 'jpeg', 'png', 'gif'].includes(fileType.toLowerCase());
-    // 返回结果对象
-    return {
-      fileName: fileName,
-      fileType: fileType,
-      isImg,
-    };
-  };
-
-  const [isPlay, setIsPlay] = useState(false) // 是否正在播放文字
-  const [isSubmittingForm, setIsSubmittingForm] = useState(false) // 正在提交form
-  const [isShowFormBtns, setIsShowFormBtns] = useState(true) // 正在提交form
-  const formRef = useRef(null);
-  
-  /**
-   * 根据文件URL获取文件类型
-   * @param url
-   */
-  const getFileTypeByUrl = (url) => {
-    if (!url) {
-      return 'file';
-    }
-    switch (url.split('.').pop().toLowerCase()) {
-      case 'jpg':
-      case 'jpeg':
-      case 'png':
-      case 'gif':
-        return 'image';
-      case 'pdf':
-        return 'pdf';
-      case 'doc':
-      case 'docx':
-        return 'word';
-      case 'xls':
-      case 'xlsx':
-        return 'excel';
-      case 'md':
-        return 'markdown';
-      case 'txt':
-        return 'txt';
-      case 'mobi':
-        return 'mobi';
-      case 'rpub':
-        return 'rpub';
-      default:
-        return 'file';
-    }
-  };
-
-  /**
-   * 播放文字
-   * @param text 文字
-   */
-  const playVoice = (text)=>{
-    if (isPlay) {
-      speechSynth.cancel();
-      setIsPlay(false)
-    }else{
-      if (text) {
-        utterance = new SpeechSynthesisUtterance(text);
-        const voices = speechSynth.getVoices();
-        utterance.voice = voices[61];
-        utterance.rate = 1;
-        utterance.pitch = 1;
-        speechSynth.speak(utterance);
-        setIsPlay(true)
-      }
-    }
-  }
-
-  /**
-   * 复制文字
-   * @param text 文字
-   */
-  const copyText = async (text) => {
-    if(text){
-      await navigator.clipboard.writeText(text);
-      messageTip.info('复制成功')
-    }else{
-      messageTip.error("消息框没有文字")
-    }
-  }
-
-  const renderUserMessage = () => {
-    return (
-        <div style={user_message_style} className="msg_userMessageBox">
-          <div style={user_message_style} className="cl-user_message">
-            {message.message}
-          </div>
-          <div className="msg_messageImgBox">
-            {message.rawInfo?.files.map((item, index) => {
-              return (
-                  <div key={item} className="msg_fileBox">
-                    {parseFileName(item).isImg && (
-                        <Image
-                            height={40}
-                            width={40}
-                            className="msg_messageImg"
-                            src={`${host_url}/api/v1/files/images/${item}`}
-                            alt={item}
-                            preview={{
-                              mask: <span className="custom-mask"></span>,
-                            }}
-                        />
-                    )}
-                    {getFileTypeByUrl(item) == 'pdf' && (
-                        <img style={{ width: 40, height: 40 }} src={typePdfPng} />
-                    )}
-                    {getFileTypeByUrl(item) == 'excel' && (
-                        <img style={{ width: 40, height: 40 }} src={typeExcelPng} />
-                    )}
-                    {getFileTypeByUrl(item) == 'markdown' && (
-                        <img style={{ width: 40, height: 40 }} src={typeMarkdownPng} />
-                    )}
-                    {getFileTypeByUrl(item) == 'txt' && (
-                        <img style={{ width: 40, height: 40 }} src={typeTextPng} />
-                    )}
-                    {getFileTypeByUrl(item) == 'word' && (
-                        <img style={{ width: 40, height: 40 }} src={typeWordPng} />
-                    )}
-                    {getFileTypeByUrl(item) == 'mobi' && (
-                        <img style={{ width: 40, height: 40 }} src={typeMobiPng} />
-                    )}
-                    {getFileTypeByUrl(item) == 'rpub' && (
-                        <img style={{ width: 40, height: 40 }} src={typeRPubPng} />
-                    )}
-                    {getFileTypeByUrl(item) == 'file' && (
-                        <img style={{ width: 40, height: 40 }} src={upFilePng} />
-                    )}
-                    <div className="msg_fileInfoBox">
-                      <div className="msg_fileInfoFileName">{parseFileName(item).fileName}</div>
-                    </div>
-                  </div>
-              );
-            })}
-          </div>
-        </div>
-    )
-  }
-
-  const renderErrorMessage = () => {
-    return (
-        <div style={error_message_style} className={'cl-error_message'}>
-          {message.message}
-        </div>
-    )
-  }
-
-  const renderBotTextMessage = () => {
-    return (
-        <div>
-          <div style={bot_message_style} className={'cl-bot_message'}>
-            <Markdown
-                className={'markdown-body prose flex flex-col word-break-break-word'}
-                remarkPlugins={[remarkGfm]}
-                rehypePlugins={[rehypeMathjax]}
-            >
-              {message.message}
-            </Markdown>
-          </div>
-          <div className="msg_operateBox">
-            <img src={isPlay?playRunGif:playPng} onClick={()=>playVoice(message.message)} />
-            <img src={copyPng} onClick={()=>copyText(message.message)} />
-          </div>
-        </div>
-    )
-  }
-
-  const renderBotEchartMessage = () => {
-    return (
-        <div>
-          echart
-        </div>
-    )
-  }
-
-  const renderBotFormMessage = () => {
-    const { form_config } = rawInfo;
-    
-    // 处理表单提交
-    const handleSubmit = (values) => {
-      console.log('表单提交数据:', values);
-      if (handleSendMessage) {
-        setIsSubmittingForm(true);
-        // TODO 提交的数据需要多一些
-        handleSendMessage(JSON.stringify(values), () => {
-          messageTip.success('表单提交成功');
-          setIsSubmittingForm(false);
-          setIsShowFormBtns(false);
-        }, InputValueType.form);
-      }
-    };
-    
-    // 处理表单取消
-    const handleCancel = () => {
-      if (formRef.current) {
-        formRef.current.resetFields();
-      }
-      if (handleSendMessage) {
-        setIsSubmittingForm(true);
-        handleSendMessage('USER CANCELED', () => {
-          messageTip.success('取消成功');
-          setIsSubmittingForm(false);
-          setIsShowFormBtns(false);
-        }, InputValueType.form);
-      }
-    };
-    
-    return (
-      <div className="form-container">
-        <div className="form-title">{form_config?.name || '表单'}</div>
-        <Form
-          ref={formRef}
-          layout="vertical"
-          onFinish={handleSubmit}
-          className="dynamic-form"
-        >
-          {form_config?.config?.map((item, index) => {
-            const { key, name, type, options } = item;
-            // 根据不同的表单项类型渲染不同的组件
-            switch (type) {
-              case 'text':
-                return (
-                  <Form.Item 
-                    key={index} 
-                    label={name} 
-                    name={key}
-                    rules={[{ required: true, message: `请输入${name}` }]}
-                  >
-                    <Input placeholder={`请输入${name}`} />
-                  </Form.Item>
-                );
-              case 'date':
-                return (
-                  <Form.Item 
-                    key={index} 
-                    label={name} 
-                    name={key}
-                    rules={[{ required: true, message: `请选择${name}` }]}
-                  >
-                    <DatePicker style={{ width: '100%' }} placeholder={`请选择${name}`} />
-                  </Form.Item>
-                );
-              case 'select':
-                return (
-                  <Form.Item 
-                    key={index} 
-                    label={name} 
-                    name={key}
-                    rules={[{ required: true, message: `请选择${name}` }]}
-                  >
-                    <Select
-                      placeholder={`请选择${name}`}
-                      style={{ width: '100%' }}
-                    >
-                      {options?.map((option, optIndex) => (
-                        <Select.Option key={optIndex} value={option}>
-                          {option}
-                        </Select.Option>
-                      ))}
-                    </Select>
-                  </Form.Item>
-                );
-              default:
-                return (
-                  <Form.Item 
-                    key={index} 
-                    label={name} 
-                    name={name}
-                  >
-                    <Input placeholder={`请输入${name}`} />
-                  </Form.Item>
-                );
-            }
-          })}
-          
-          {
-            isShowFormBtns && (
-              <div className="form-buttons">
-                <Form.Item>
-                  <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
-                    <Button 
-                      loading={isSubmittingForm}
-                      onClick={handleCancel}
-                    >
-                      取消
-                    </Button>
-                    <Button 
-                      loading={isSubmittingForm}
-                      type="primary" 
-                      htmlType="submit"
-                      style={{ backgroundColor: '#8064f6' }}
-                    >
-                      提交
-                    </Button>
-                  </div>
-                </Form.Item>
-              </div>
-            )
-          }
-        </Form>
-        
-        <style jsx>{`
-          .form-container {
-            width: 100%;
-            padding: 16px;
-            border-radius: 8px;
-            background-color:rgb(244, 244, 244);
-          }
-
-          .form-title {
-            font-size: 18px;
-            font-weight: bold;
-            margin-bottom: 16px;
-            color: #333;
-          }
-
-          .dynamic-form {
-            width: 100%;
-          }
-
-          .form-select {
-            width: 100%;
-            height: 32px;
-            border: 1px solid #d9d9d9;
-            border-radius: 4px;
-            padding: 4px 11px;
-          }
-
-          .form-buttons {
-            display: flex;
-            justify-content: flex-end;
-            margin-top: 20px;
-            gap: 12px;
-          }
-
-          .cancel-button {
-            padding: 6px 16px;
-            background-color: #f0f0f0;
-            border: 1px solid #d9d9d9;
-            border-radius: 4px;
-            cursor: pointer;
-          }
-
-          .submit-button {
-            padding: 6px 16px;
-            background-color: #8064f6;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-          }
-
-          /* 移动端适配 */
-          @media (max-width: 768px) {
-            .form-container {
-              padding: 12px;
-            }
-
-            .form-buttons {
-              flex-direction: column;
-              gap: 8px;
-            }
-
-            .cancel-button,
-            .submit-button {
-              width: 100%;
-              padding: 8px 0;
-            }
-          }
-        `}</style>
-      </div>
-    );
-  };
-
-  const renderBotMessage = () => {
-    switch (type) {
-      case MessageType.echart:
-        return renderBotEchartMessage()
-      case MessageType.form:
-        return renderBotFormMessage()
-      case MessageType.text:
-      default:
-        return renderBotTextMessage()
-    }
-  }
-
-  const render = () => {
-    if (isSend){
-      return renderUserMessage()
-    }else {
-      if (error){
-        return renderErrorMessage()
-      }else{
-        return renderBotMessage()
-      }
-    }
-  }
-
-  return (
-    <div className={'cl-chat-message ' + (isSend ? ' cl-justify-end' : ' cl-justify-start')}>
-      {
-        render()
-      }
-    </div>
-  );
-}
+// @ts-nocheck
+import Markdown from 'react-markdown';
+import EChartsReact from 'echarts-for-react';
+import {ChatMessageType, InputValueType, MessageType} from '../types/chatWidget';
+import remarkGfm from 'remark-gfm';
+import rehypeMathjax from 'rehype-mathjax';
+// import './index.module.css';
+import upFilePng from '../../../../assets/aicenter/upfile.png';
+import {Form, Image, Input, message as messageTip, Select, DatePicker, Button, Spin, Skeleton} from 'antd';
+import React, {useState, useRef} from 'react';
+import typePdfPng from '../../../../assets/aicenter/type-pdf.png';
+import typeWordPng from '../../../../assets/aicenter/type-word.png';
+import typeExcelPng from '../../../../assets/aicenter/type-excel.png';
+import typeMarkdownPng from '../../../../assets/aicenter/type-markdown.png';
+import typeTextPng from '../../../../assets/aicenter/type-text.png';
+import typeMobiPng from '../../../../assets/aicenter/type-mobi.png';
+import typeRPubPng from '../../../../assets/aicenter/type-rpub.png';
+import playPng from '../../../../assets/aicenter/play.png';
+import playRunGif from '../../../../assets/aicenter/play-run.gif';
+import copyPng from '../../../../assets/aicenter/copy.png';
+
+let speechSynth = window.speechSynthesis;
+let utterance = null;
+
+export default function ChatMessage({
+  type = MessageType.text,
+  rawInfo,
+  message,
+  isSend,
+  error,
+  host_url,
+  user_message_style,
+  bot_message_style,
+  error_message_style,
+  handleSendMessage
+}: ChatMessageType) {
+  const parseFileName = (
+    text: string,
+  ): { fileName: string | null; fileType: string | null; isImg: boolean } => {
+    // 检查输入是否有效
+    if (!text || typeof text !== 'string') {
+      return { fileName: null, fileType: null };
+    }
+
+    // 找到最后一个反斜杠的位置
+    const lastBackslashIndex = text.lastIndexOf('\\');
+    if (lastBackslashIndex === -1) {
+      return { fileName: null, fileType: null }; // 如果没有找到反斜杠，返回空结果
+    }
+
+    // 截取反斜杠后面的部分
+    const fileNameWithExtension = text.substring(lastBackslashIndex + 1);
+
+    // 分割文件名和文件类型
+    const parts = fileNameWithExtension.split('.');
+    const fileName = parts.slice(0, -1).join('.'); // 文件名（不含扩展名）
+    const fileType = parts.length > 1 ? parts.pop() : null; // 文件类型
+
+    const isImg = fileType && ['jpg', 'jpeg', 'png', 'gif'].includes(fileType.toLowerCase());
+    // 返回结果对象
+    return {
+      fileName: fileName,
+      fileType: fileType,
+      isImg,
+    };
+  };
+
+  const [isPlay, setIsPlay] = useState(false) // 是否正在播放文字
+  const [isSubmittingForm, setIsSubmittingForm] = useState(false) // 正在提交form
+  const [isShowFormBtns, setIsShowFormBtns] = useState(true) // 正在提交form
+  const formRef = useRef(null);
+  
+  /**
+   * 根据文件URL获取文件类型
+   * @param url
+   */
+  const getFileTypeByUrl = (url) => {
+    if (!url) {
+      return 'file';
+    }
+    switch (url.split('.').pop().toLowerCase()) {
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+        return 'image';
+      case 'pdf':
+        return 'pdf';
+      case 'doc':
+      case 'docx':
+        return 'word';
+      case 'xls':
+      case 'xlsx':
+        return 'excel';
+      case 'md':
+        return 'markdown';
+      case 'txt':
+        return 'txt';
+      case 'mobi':
+        return 'mobi';
+      case 'rpub':
+        return 'rpub';
+      default:
+        return 'file';
+    }
+  };
+
+  /**
+   * 播放文字
+   * @param text 文字
+   */
+  const playVoice = (text)=>{
+    if (isPlay) {
+      speechSynth.cancel();
+      setIsPlay(false)
+    }else{
+      if (text) {
+        utterance = new SpeechSynthesisUtterance(text);
+        const voices = speechSynth.getVoices();
+        utterance.voice = voices[61];
+        utterance.rate = 1;
+        utterance.pitch = 1;
+        speechSynth.speak(utterance);
+        setIsPlay(true)
+      }
+    }
+  }
+
+  /**
+   * 复制文字
+   * @param text 文字
+   */
+  const copyText = async (text) => {
+    if(text){
+      await navigator.clipboard.writeText(text);
+      messageTip.info('复制成功')
+    }else{
+      messageTip.error("消息框没有文字")
+    }
+  }
+
+  const renderUserMessage = () => {
+    return (
+        <div style={user_message_style} className="msg_userMessageBox">
+          <div style={user_message_style} className="cl-user_message">
+            {message.message}
+          </div>
+          <div className="msg_messageImgBox">
+            {message.rawInfo?.files.map((item, index) => {
+              return (
+                  <div key={item} className="msg_fileBox">
+                    {parseFileName(item).isImg && (
+                        <Image
+                            height={40}
+                            width={40}
+                            className="msg_messageImg"
+                            src={`${host_url}/api/v1/files/images/${item}`}
+                            alt={item}
+                            preview={{
+                              mask: <span className="custom-mask"></span>,
+                            }}
+                        />
+                    )}
+                    {getFileTypeByUrl(item) == 'pdf' && (
+                        <img style={{ width: 40, height: 40 }} src={typePdfPng} />
+                    )}
+                    {getFileTypeByUrl(item) == 'excel' && (
+                        <img style={{ width: 40, height: 40 }} src={typeExcelPng} />
+                    )}
+                    {getFileTypeByUrl(item) == 'markdown' && (
+                        <img style={{ width: 40, height: 40 }} src={typeMarkdownPng} />
+                    )}
+                    {getFileTypeByUrl(item) == 'txt' && (
+                        <img style={{ width: 40, height: 40 }} src={typeTextPng} />
+                    )}
+                    {getFileTypeByUrl(item) == 'word' && (
+                        <img style={{ width: 40, height: 40 }} src={typeWordPng} />
+                    )}
+                    {getFileTypeByUrl(item) == 'mobi' && (
+                        <img style={{ width: 40, height: 40 }} src={typeMobiPng} />
+                    )}
+                    {getFileTypeByUrl(item) == 'rpub' && (
+                        <img style={{ width: 40, height: 40 }} src={typeRPubPng} />
+                    )}
+                    {getFileTypeByUrl(item) == 'file' && (
+                        <img style={{ width: 40, height: 40 }} src={upFilePng} />
+                    )}
+                    <div className="msg_fileInfoBox">
+                      <div className="msg_fileInfoFileName">{parseFileName(item).fileName}</div>
+                    </div>
+                  </div>
+              );
+            })}
+          </div>
+        </div>
+    )
+  }
+
+  const renderErrorMessage = () => {
+    return (
+        <div style={error_message_style} className={'cl-error_message'}>
+          {message.message}
+        </div>
+    )
+  }
+  const renderLoading = (type:MessageType, height:number) => {
+    const skeletonContainerId = `skeleton-container-${Math.random().toString(36).substring(2, 9)}`;
+    
+    return (
+        <div 
+          id={skeletonContainerId}
+          style={{minWidth: 500, width: '100%', height, display: 'flex', justifyContent: 'center', alignItems: 'center'}}
+        >
+          {
+            // 其他类型暂不处理
+            type == MessageType.echart && (
+              <Skeleton.Image active={true} style={{width: '100%', height: '100%'}}/>
+            )
+          }
+          <style jsx>{`
+            #${skeletonContainerId} .ant-skeleton.ant-skeleton-element {
+              width: 100% !important;
+              height: 100% !important;
+            }
+          `}</style>
+        </div>
+    )
+  }
+
+  // 自定义渲染器
+  const EchartRender = React.useMemo(() => ({
+    code({ node, inline, className, children, ...props }) {
+      // 检查是否是代码块，并且语言为 'echart'
+      if (className && className.includes('language-echart')) {
+        try {
+          // 解析代码块内容为 JSON 配置
+          const chartOptions = JSON.parse(children.toString().trim());
+          // 渲染 ECharts 组件
+          return <EChartsReact option={chartOptions} style={{minWidth: 500, width: '100%', height: 300, backgroundColor: '#fff' }} />;
+        } catch (error) {
+          return renderLoading(MessageType.echart, 300);
+        }
+      }
+      // 默认渲染其他代码块
+      return <code className={className} {...props}>{children}</code>;
+    },
+  }), []);  // 空依赖数组，只创建一次
+
+  const renderBotTextMessage = () => {
+    return (
+        <div>
+          <div style={bot_message_style} className={'cl-bot_message'}>
+            <Markdown
+                className={'markdown-body prose flex flex-col word-break-break-word'}
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeMathjax]}
+                components={EchartRender}
+            >
+              {message.message}
+            </Markdown>
+          </div>
+          <div className="msg_operateBox">
+            <img src={isPlay?playRunGif:playPng} onClick={()=>playVoice(message.message)} />
+            <img src={copyPng} onClick={()=>copyText(message.message)} />
+          </div>
+        </div>
+    )
+  }
+
+  const renderBotFormMessage = () => {
+    const { form_config } = rawInfo;
+    
+    // 处理表单提交
+    const handleSubmit = (values) => {
+      console.log('表单提交数据:', values);
+      if (handleSendMessage) {
+        setIsSubmittingForm(true);
+        // TODO 提交的数据需要多一些
+        handleSendMessage(JSON.stringify(values), () => {
+          messageTip.success('表单提交成功');
+          setIsSubmittingForm(false);
+          setIsShowFormBtns(false);
+        }, InputValueType.form);
+      }
+    };
+    
+    // 处理表单取消
+    const handleCancel = () => {
+      if (formRef.current) {
+        formRef.current.resetFields();
+      }
+      if (handleSendMessage) {
+        setIsSubmittingForm(true);
+        handleSendMessage('USER CANCELED', () => {
+          messageTip.success('取消成功');
+          setIsSubmittingForm(false);
+          setIsShowFormBtns(false);
+        }, InputValueType.form);
+      }
+    };
+    
+    return (
+      <div className="form-container">
+        <div className="form-title">{form_config?.name || '表单'}</div>
+        <Form
+          ref={formRef}
+          layout="vertical"
+          onFinish={handleSubmit}
+          className="dynamic-form"
+        >
+          {form_config?.config?.map((item, index) => {
+            const { key, name, type, options } = item;
+            // 根据不同的表单项类型渲染不同的组件
+            switch (type) {
+              case 'text':
+                return (
+                  <Form.Item 
+                    key={index} 
+                    label={name} 
+                    name={key}
+                    rules={[{ required: true, message: `请输入${name}` }]}
+                  >
+                    <Input placeholder={`请输入${name}`} />
+                  </Form.Item>
+                );
+              case 'date':
+                return (
+                  <Form.Item 
+                    key={index} 
+                    label={name} 
+                    name={key}
+                    rules={[{ required: true, message: `请选择${name}` }]}
+                  >
+                    <DatePicker style={{ width: '100%' }} placeholder={`请选择${name}`} />
+                  </Form.Item>
+                );
+              case 'select':
+                return (
+                  <Form.Item 
+                    key={index} 
+                    label={name} 
+                    name={key}
+                    rules={[{ required: true, message: `请选择${name}` }]}
+                  >
+                    <Select
+                      placeholder={`请选择${name}`}
+                      style={{ width: '100%' }}
+                    >
+                      {options?.map((option, optIndex) => (
+                        <Select.Option key={optIndex} value={option}>
+                          {option}
+                        </Select.Option>
+                      ))}
+                    </Select>
+                  </Form.Item>
+                );
+              default:
+                return (
+                  <Form.Item 
+                    key={index} 
+                    label={name} 
+                    name={name}
+                  >
+                    <Input placeholder={`请输入${name}`} />
+                  </Form.Item>
+                );
+            }
+          })}
+          
+          {
+            isShowFormBtns && (
+              <div className="form-buttons">
+                <Form.Item>
+                  <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
+                    <Button 
+                      loading={isSubmittingForm}
+                      onClick={handleCancel}
+                    >
+                      取消
+                    </Button>
+                    <Button 
+                      loading={isSubmittingForm}
+                      type="primary" 
+                      htmlType="submit"
+                      style={{ backgroundColor: '#8064f6' }}
+                    >
+                      提交
+                    </Button>
+                  </div>
+                </Form.Item>
+              </div>
+            )
+          }
+        </Form>
+        
+        <style jsx>{`
+          .form-container {
+            width: 100%;
+            padding: 16px;
+            border-radius: 8px;
+            background-color:rgb(244, 244, 244);
+          }
+
+          .form-title {
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 16px;
+            color: #333;
+          }
+
+          .dynamic-form {
+            width: 100%;
+          }
+
+          .form-select {
+            width: 100%;
+            height: 32px;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            padding: 4px 11px;
+          }
+
+          .form-buttons {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 20px;
+            gap: 12px;
+          }
+
+          .cancel-button {
+            padding: 6px 16px;
+            background-color: #f0f0f0;
+            border: 1px solid #d9d9d9;
+            border-radius: 4px;
+            cursor: pointer;
+          }
+
+          .submit-button {
+            padding: 6px 16px;
+            background-color: #8064f6;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+          }
+
+          /* 移动端适配 */
+          @media (max-width: 768px) {
+            .form-container {
+              padding: 12px;
+            }
+
+            .form-buttons {
+              flex-direction: column;
+              gap: 8px;
+            }
+
+            .cancel-button,
+            .submit-button {
+              width: 100%;
+              padding: 8px 0;
+            }
+          }
+        `}</style>
+      </div>
+    );
+  };
+
+  const renderBotMessage = () => {
+    switch (type) {
+      case MessageType.form:
+        return renderBotFormMessage()
+      case MessageType.text:
+      default:
+        return renderBotTextMessage()
+    }
+  }
+
+  const render = () => {
+    if (isSend){
+      return renderUserMessage()
+    }else {
+      if (error){
+        return renderErrorMessage()
+      }else{
+        return renderBotMessage()
+      }
+    }
+  }
+
+  return (
+    <div className={'cl-chat-message ' + (isSend ? ' cl-justify-end' : ' cl-justify-start')}>
+      {
+        render()
+      }
+    </div>
+  );
+}