yt-chat-components 0.9.9-c → 0.9.9-d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "0.9.9c",
+  "version": "0.9.9d",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",
@@ -31,8 +31,7 @@
     "typescript": "^4.9.5",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "uuid": "^10.0.0",
-    "web-vitals": "^2.1.4",
-    "yt-chat-components": "^0.2.0"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

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

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import Markdown from 'react-markdown';
-import { ChatMessageType } from '../types/chatWidget';
+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 { Image, message as messageTip } from 'antd';
-import React, {useState} from 'react';
+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';
@@ -22,6 +22,8 @@ let speechSynth = window.speechSynthesis;
 let utterance = null;
 
 export default function ChatMessage({
+  type = MessageType.text,
+  rawInfo,
   message,
   isSend,
   error,
@@ -29,6 +31,7 @@ export default function ChatMessage({
   user_message_style,
   bot_message_style,
   error_message_style,
+  handleSendMessage
 }: ChatMessageType) {
   const parseFileName = (
     text: string,
@@ -62,6 +65,10 @@ export default function ChatMessage({
   };
 
   const [isPlay, setIsPlay] = useState(false) // 是否正在播放文字
+  const [isSubmittingForm, setIsSubmittingForm] = useState(false) // 正在提交form
+  const [isShowFormBtns, setIsShowFormBtns] = useState(true) // 正在提交form
+  const formRef = useRef(null);
+  
   /**
    * 根据文件URL获取文件类型
    * @param url
@@ -130,9 +137,9 @@ export default function ChatMessage({
       messageTip.error("消息框没有文字")
     }
   }
-  return (
-    <div className={'cl-chat-message ' + (isSend ? ' cl-justify-end' : ' cl-justify-start')}>
-      {isSend ? (
+
+  const renderUserMessage = () => {
+    return (
         <div className="msg_userMessageBox">
           <div style={user_message_style} className="cl-user_message">
             {message.message}
@@ -140,62 +147,70 @@ export default function ChatMessage({
           <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 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>
         </div>
-      ) : error ? (
+    )
+  }
+
+  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]}
+                className={'markdown-body prose flex flex-col word-break-break-word'}
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeMathjax]}
             >
               {message.message}
             </Markdown>
@@ -205,7 +220,245 @@ export default function ChatMessage({
             <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('', () => {
+          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>
   );
 }

package/src/YtChatView/chatWidget/chatWindow/controllers/index.ts

@@ -1,11 +1,13 @@
 // @ts-nocheck
 import axios from "axios";
+import {InputValueType} from "../types/chatWidget";
 
 
 /**
  * 发送消息
- * @param embed_app_extend 扩展参数
- * @param isStream 是否启用流式传输
+ * @param input_value_type
+ * @param isStream
+ * @param embed_app_extend 扩展参数 * @param isStream 是否启用流式传输
  * @param handleMessageContent 处理消息内容的回调函数
  * @param signal 用于主动关闭请求流
  * @param baseUrl 接口地址
@@ -20,6 +22,7 @@ import axios from "axios";
  * @param additional_headers
  */
 export async function sendMessage(
+  input_value_type: string = InputValueType.text,
   embed_app_extend: object,
   isStream: boolean,
   handleMessageContent: Function,
@@ -38,7 +41,7 @@ export async function sendMessage(
   },
 ) {
   let data: any;
-  data = {input_type, input_value: message, output_type};
+  data = {input_value_type, input_type, input_value: message, output_type};
   if (tweaks) {
     data['tweaks'] = tweaks;
   }

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { extractMessageFromOutput } from './utils';
 import React, { useEffect, useRef, useState } from 'react';
-import { ChatMessageType, embedAppExtend } from './types/chatWidget';
+import {ChatMessageType, embedAppExtend, InputValueType, MessageType} from './types/chatWidget';
 import ChatMessage from './chatMessage';
 import { fetchUploadFile, getChatHistory, sendMessage } from './controllers';
 import ChatMessagePlaceholder from './chatPlaceholder/index.tsx';
@@ -30,6 +30,7 @@ import btn_answer from '../../../assets/aicenter/btn_answer.png';
 
 let mediaRecorder = null; // 语音对象,用于录音
 let recognition = null; // 语音识别对象
+const delayMessageList = []
 
 export default function ChatWindow({
   tags,
@@ -70,6 +71,7 @@ export default function ChatWindow({
   setDropDownList = () => {},
   dropDownList = [],
   baseConfig = {},
+  isShowVoiceButton = true,
   isShowUploadButton,
   dropManUrl = '',
   modalWidth,
@@ -112,6 +114,7 @@ export default function ChatWindow({
   sessionId: string;
   additional_headers?: { [key: string]: string };
   baseConfig: object;
+  isShowVoiceButton: boolean;
   isShowUploadButton: boolean;
   dropManUrl: string;
   modalWidth: number;
@@ -158,19 +161,57 @@ export default function ChatWindow({
     }
   };
 
+  // 处理延时队列，因为后端返回的是 token token form token token.....会导致form渲染在token前面，所以用这个方式
+  // 当处理token的时候，form的信息放到这里，然后使用 delayMessageTimer 处理这个延时队列
+  // 处理逻辑是：收到 token 的时候，重置timer，由于timer一直被重置所以不会处理 delayMessageList，直到 1.5内没有新 token 才会处理延时队列
+  const handleDelayMessage = () => {
+    if (delayMessageList.length > 0) {
+      const message = delayMessageList.shift();
+      addMessage(message);
+      handleDelayMessage();
+    }
+  }
+
+  const delayMessageTimer = (whenTimerExistsDoNothing: boolean = false) => {
+    if(window.delayMessageTimer)
+      if(whenTimerExistsDoNothing){
+        return
+      }
+      clearTimeout(window.delayMessageTimer);
+      window.delayMessageTimer = null
+    if(!window.delayMessageTimer){
+      window.delayMessageTimer = setTimeout(handleDelayMessage, 1500);
+    }
+  }
+
   // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
   const handleMessageContent = (event, data) => {
     // console.error("event, data",event, data)
     if (event == 'add_message' && data['sender'] == 'Machine') {
       getHistoryList();
-    } else if (event == 'token') {
+    }
+    else if (event == 'token') {
       setNowAIContent((prevState) => {
         const newValue = prevState + data['chunk'];
         contentRef.current = newValue
         return newValue
       });
       if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
-    } else if (event == 'end') {
+
+      // 处理延时队列
+      delayMessageTimer();
+    }
+    else if (event == 'form') {
+      // 这里添加到延时队列，直接处理可能会把form渲染到token上面
+      delayMessageList.push({
+        message: "",
+        isSend: false,
+        rawInfo: data,
+        type: MessageType.form
+      })
+      delayMessageTimer(true)
+    }
+    else if (event == 'end') {
       const res = {
         data: data['result'],
       };
@@ -295,7 +336,7 @@ export default function ChatWindow({
   };
 
   // 点击send发送按钮，进行消息提交发送逻辑；userMessage为传入的文本消息，优先级比input中value高
-  function handleClick(userMessage, callback = () => {}) {
+  const handleSendMessage = (userMessage, callback = () => {}, input_value_type: string = InputValueType.text)=>  {
     let message = '';
     if (value && value.trim() !== '') {
       message = value;
@@ -307,13 +348,16 @@ export default function ChatWindow({
     }
 
     if (message && message.trim() !== '') {
-      addMessage({
-        message: message,
-        isSend: true,
-        rawInfo: { files: fileList.map((fileItem) => fileItem.fileUrl) },
-      });
-      setSendingMessage(true);
-      setValue('');
+      if(input_value_type === InputValueType.text){
+        addMessage({
+          message: message,
+          isSend: true,
+          rawInfo: { files: fileList.map((fileItem) => fileItem.fileUrl) },
+        });
+        setValue('');
+        setSendingMessage(true);
+      }
+
       let userInfoClone = userInfo;
       if(isEmpty(userInfoClone.code)) {
         userInfoClone.code = sessionId;
@@ -341,6 +385,7 @@ export default function ChatWindow({
       setFileList([]);
       handleScroll();
       sendMessage(
+        input_value_type,
         embedAppExtend,
         isStream,
         handleMessageContent,
@@ -659,7 +704,7 @@ export default function ChatWindow({
       return (
           <div className={'cl-tips-wrapper'}>
             <img className="drop-man-img" src={dropManUrl}/>
-            <div className="drop-down-title"><strong>Hi，</strong><br/><strong>欢迎使用{window_title}!</strong><br/><div>您可以这样问我:</div></div>
+            <div className="drop-down-title"><strong>Hi，</strong><br/><strong>欢迎使用{window_title}!</strong><br/><div style={{fontSize:'14px'}}>您可以这样问我:</div></div>
             <div className={'cl-drop-down-mobile'}>
               <div className="drop-down-list-mobile">
                 {dropDownList.map(({backgroundImg, title}) => (
@@ -668,7 +713,7 @@ export default function ChatWindow({
                         key={title}
                         onClick={() => {
                           setDropDownList(undefined);
-                          handleClick(title);
+                          handleSendMessage(title);
                         }}>
                       <Typography.Paragraph
                           className="drop-down-item-title-mobile"
@@ -706,7 +751,7 @@ export default function ChatWindow({
                             className="drop-down-item-bottom-button"
                             onClick={() => {
                               setDropDownList(undefined);
-                              handleClick(title);
+                              handleSendMessage(title);
                             }}
                         >
                           <img src={btn_answer}/>
@@ -732,7 +777,7 @@ export default function ChatWindow({
                           key={title}
                           onClick={() => {
                             setDropDownList(undefined);
-                            handleClick(title);
+                            handleSendMessage(title);
                           }}>
                         <Typography.Paragraph
                             className="drop-down-item-title"
@@ -746,7 +791,7 @@ export default function ChatWindow({
                               className="drop-down-item-bottom-button"
                               onClick={() => {
                                 setDropDownList(undefined);
-                                handleClick(title);
+                                handleSendMessage(title);
                               }}
                           >
                             <img src={btn_answer}/>
@@ -799,10 +844,13 @@ export default function ChatWindow({
                     user_message_style={user_message_style}
                     error_message_style={error_message_style}
                     key={index}
-                  host_url={hostUrl}
-                  message={message}
-                  isSend={message.isSend}
-                  error={message.error}
+                    host_url={hostUrl}
+                    message={message}
+                    isSend={message.isSend}
+                    error={message.error}
+                    type={message.type}
+                    rawInfo={message.rawInfo}
+                    handleSendMessage={handleSendMessage}
               />
           ))}
           {sendingMessage && (nowAIContent?
@@ -814,6 +862,7 @@ export default function ChatWindow({
                       host_url={hostUrl}
                       message={{ message: nowAIContent}}
                       isSend={false}
+                      handleSendMessage={handleSendMessage}
                   />:<ChatMessagePlaceholder bot_message_style={bot_message_style} />
           )}
           <div ref={lastMessage}></div>
@@ -831,7 +880,7 @@ export default function ChatWindow({
                   key={index}
                   className="w_tagItemBox"
                   onClick={() => {
-                    handleClick(item?.name);
+                    handleSendMessage(item?.name);
                     setFileList([]);
                   }}
               >
@@ -922,7 +971,7 @@ export default function ChatWindow({
               value={value}
               onChange={(e) => setValue(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) handleClick();
+                if (e.key === 'Enter' && !e.shiftKey) handleSendMessage();
               }}
               disabled={sendingMessage}
               placeholder={
@@ -934,15 +983,18 @@ export default function ChatWindow({
               ref={inputRef}
               className="cl-input-element"
           />
-            <Tooltip title={recordState ? "点击结束录音" : "点击开始录音"}>
-              <div
-                  className="w_send_voice_box"
-                  style={sendingMessage ? { cursor: 'not-allowed' } : {}}
-                  onClick={startRecord}
-              >
-                <img src={recordState ? soundWavePng : luyinPng} style={{ width: 23 }} className={recordState ? "w_recordIng" : ''}></img>
-              </div>
-            </Tooltip>
+            {
+              isShowVoiceButton &&
+                <Tooltip title={recordState ? "点击结束录音" : "点击开始录音"}>
+                  <div
+                      className="w_send_voice_box"
+                      style={sendingMessage ? { cursor: 'not-allowed' } : {}}
+                      onClick={startRecord}
+                  >
+                    <img src={recordState ? soundWavePng : luyinPng} style={{ width: 23 }} className={recordState ? "w_recordIng" : ''}></img>
+                  </div>
+                </Tooltip>
+            }
             {/*<Tooltip title="支持PDF / Word / Excel / Markdown / txt / mobi / rpub">*/}
             {
               isShowUploadButton &&
@@ -973,13 +1025,13 @@ export default function ChatWindow({
                     abortControllerRef.current.abort('disconnect');
                     abortControllerRef.current = new AbortController();
                   }else{
-                    handleClick()
+                    handleSendMessage()
                   }
                 }}
             >
 
-                <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
-            </button>
+                  <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
+              </button>
             </Tooltip>
           </div>
         </div>

package/src/YtChatView/chatWidget/chatWindow/types/chatWidget/index.ts

@@ -11,8 +11,21 @@ export type ChatMessageType = {
   user_message_style?: React.CSSProperties;
   error_message_style?: React.CSSProperties;
   rawInfo?: any;
+  type?: MessageType,
+  handleSendMessage?: (message: string, callback?: Function) => void;
 };
 
+export enum MessageType {
+  text,
+  form,
+  echart
+}
+
+export const InputValueType = {
+  text: "text",
+  form : "form",
+}
+
 export type ChatMessagePlaceholderType = {
   bot_message_style?: React.CSSProperties;
 };

package/src/YtChatView/chatWidget/index.tsx

@@ -37,6 +37,7 @@ export default function ChatWidget({
   setDropDownList,
   dropDownList,
   baseConfig,
+  isShowVoiceButton,
   isShowUploadButton,
   dropManUrl,
   modalWidth,
@@ -75,6 +76,7 @@ export default function ChatWidget({
   session_id?: string;
   start_open?: boolean;
   baseConfig:object;
+  isShowVoiceButton:boolean;
   isShowUploadButton:boolean;
   dropManUrl: string;
   modalWidth: number;
@@ -497,14 +499,14 @@ video {
     margin-top: 45px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
-    font-size: 22px;
+    font-size: 18px;
     color: #333333;
     line-height: 28px;
     text-align: left;
     font-style: normal;
     > div {
       margin-top: 15px;
-      font-size: 14px;
+      font-size: 12px;
       color: # 999;
     }
 }
@@ -2572,6 +2574,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
         setDropDownList={setDropDownList}
         dropDownList={dropDownList}
         baseConfig={baseConfig}
+        isShowVoiceButton={isShowVoiceButton}
         isShowUploadButton={isShowUploadButton}
         dropManUrl={dropManUrl}
         modalWidth={modalWidth}

package/src/YtChatView/mobileChat/index.jsx

@@ -487,6 +487,7 @@ export class MobileChatPage extends React.Component {
       logoFontSize = '26px',
       isTitleSideIcon = false,//  是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
       modalIndex,
+      isShowVoiceButton,
       isShowUploadButton,
       dropManUrl,
       modalWidth,
@@ -528,7 +529,7 @@ export class MobileChatPage extends React.Component {
                       onClose={() => this.setState({drawerVisible: false})}
                       open={this.state.drawerVisible}
                   >
-                    <div className="drawer-history-header" style={{padding: '54px 14px 14px 14px', background: 'linear-gradient( 71deg, #E1E9FF 0%, #FFFFFF 100%)', position: "relative"}}>
+                    <div className="drawer-history-header" style={{marginTop:0, padding: '54px 14px 14px 14px', background: 'linear-gradient( 71deg, #E1E9FF 0%, #FFFFFF 100%)', position: "relative"}}>
                       <img src={icon_history_headerbg} style={{position: 'absolute', right: 0, bottom: 0, width: '40%', zIndex:0}}/>
                       <div className="drawer-history-header-title" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                         <img style={{width: 35}} src={agentUrl}/>
@@ -674,6 +675,7 @@ export class MobileChatPage extends React.Component {
                   setDropDownList={(list) => this.setState({dropDownList: list})}
                   dropDownList={this.state.dropDownList}
                   baseConfig={{isTitleSideIcon, logoWidth, agentUrl}}
+                  isShowVoiceButton={isShowVoiceButton}
                   isShowUploadButton={isShowUploadButton}
                   dropManUrl={character || dropManUrl}
                   modalWidth={modalWidth}
@@ -765,6 +767,7 @@ export class MobileChatPage extends React.Component {
                                                   background: '#fff',
                                                   borderRadius: 22,
                                                   opacity: 0.7,
+                                                  width:'100%',
                                                   height: '45vw',
                                                   boxSizing: 'border-box',
                                                   padding: '18px',
@@ -784,10 +787,10 @@ export class MobileChatPage extends React.Component {
                                               <img
                                                   src={item.icon}
                                                   alt={item.name}
-                                                  style={{width: '60px', height: '60px'}}
+                                                  style={{width: '40px', height: '40px'}}
                                               />
-                                              <div style={{marginTop: '12px', color: '#333333', fontWeight: "bold", fontSize: '16px'}}>{item.name}</div>
-                                              <div style={{marginTop: '8px', color: '#333333', fontSize: '12px'}}>{item.content}</div>
+                                              <div style={{marginTop: '12px', color: '#333333', fontWeight: "bold", fontSize: '14px', textAlign: "left"}}>{item.name}</div>
+                                              <div style={{marginTop: '8px', color: '#333333', fontSize: '10px', textAlign: "left"}}>{item.content}</div>
                                             </div>
                                         ))}
                                       </div>

package/src/YtChatView/previewDialog/index.jsx

@@ -453,7 +453,7 @@ export class ToolDialog extends React.Component {
             {
               isShowSideLeft && <div className="p_toolLeft">
                 <div className="p_toolLogo">
-                  <img className="p_logoImg" style={{ width: logoWidth }} src={agentUrl}/>
+                  <img className="p_logoImg" style={{ width: logoWidth, borderRadius: 15 }} src={agentUrl}/>
                   <div className="p_logoText" style={{ fontSize: logoFontSize }}>{agentName}</div>
                 </div>
                 <div className="p_historyDialog">