yt-chat-components 1.0.0 → 1.0.2

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

@@ -1,1041 +1,1054 @@
-// @ts-nocheck
-import { extractMessageFromOutput } from './utils';
-import React, { useEffect, useRef, useState } from 'react';
-import {ChatMessageType, embedAppExtend, InputValueType, MessageType} from './types/chatWidget';
-import ChatMessage from './chatMessage';
-import { fetchUploadFile, getChatHistory, sendMessage } from './controllers';
-import ChatMessagePlaceholder from './chatPlaceholder/index.tsx';
-// import './index.module.css'
-import closexPng from '../../../assets/aicenter/closex.png';
-import upFilePng from '../../../assets/aicenter/upfile.png';
-import fileuploadPng from '../../../assets/aicenter/fileupload.png';
-import sendmessagePng from '../../../assets/aicenter/sendmessage.png';
-import stopmessagePng from '../../../assets/aicenter/stopmessage.png';
-import toRightPng from '../../../assets/aicenter/toRight.png';
-import toLeftPng from '../../../assets/aicenter/toLeft.png';
-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 soundWavePng from '../../../assets/aicenter/sound-wave.gif';
-import luyinPng from '../../../assets/aicenter/luyin.png';
-import { RightOutlined } from '@ant-design/icons';
-import { Image, message as messageTip, Tooltip, Typography } from 'antd';
-import { isEmpty, isFunction } from 'lodash';
-import btn_answer from '../../../assets/aicenter/btn_answer.png';
-
-
-let mediaRecorder = null; // 语音对象,用于录音
-let recognition = null; // 语音识别对象
-const delayMessageList = []
-
-export default function ChatWindow({
-  tags,
-  getHistoryList,
-  userInfo,
-  clearMessage,
-  api_key,
-  flowId,
-  hostUrl,
-  updateLastMessage,
-  messages,
-  output_type,
-  input_type,
-  output_component,
-  bot_message_style,
-  send_icon_style,
-  user_message_style,
-  chat_window_style,
-  error_message_style,
-  placeholder_sending,
-  send_button_style = { paddingTop: '6px' },
-  online = true,
-  open,
-  online_message = '在线',
-  offline_message = '离线',
-  window_title = 'AI对话',
-  placeholder,
-  input_style,
-  input_container_style,
-  addMessage,
-  position,
-  triggerRef,
-  width = '900',
-  height = '300',
-  tweaks,
-  sessionId,
-  additional_headers,
-  setDropDownList = () => {},
-  dropDownList = [],
-  baseConfig = {},
-  isShowVoiceButton = true,
-  isShowUploadButton,
-  dropManUrl = '',
-  modalWidth,
-  isMobile = false,
-  isShowChatHeader = true,
-}: {
-  tags: [];
-  getHistoryList: Function;
-  userInfo: object;
-  clearMessage: Function;
-  api_key?: string;
-  output_type: string;
-  input_type: string;
-  output_component?: string;
-  bot_message_style?: React.CSSProperties;
-  send_icon_style?: React.CSSProperties;
-  user_message_style?: React.CSSProperties;
-  chat_window_style?: React.CSSProperties;
-  error_message_style?: React.CSSProperties;
-  send_button_style?: React.CSSProperties;
-  online?: boolean;
-  open: boolean;
-  online_message?: string;
-  placeholder_sending?: string;
-  offline_message?: string;
-  window_title?: string;
-  placeholder?: string;
-  input_style?: React.CSSProperties;
-  input_container_style?: React.CSSProperties;
-  tweaks?: { [key: string]: any };
-  flowId: string;
-  hostUrl: string;
-  updateLastMessage: Function;
-  messages: ChatMessageType[];
-  addMessage: Function;
-  position?: string;
-  triggerRef: React.RefObject<HTMLButtonElement>;
-  width?: number;
-  height?: string;
-  sessionId: string;
-  additional_headers?: { [key: string]: string };
-  baseConfig: object;
-  isShowVoiceButton: boolean;
-  isShowUploadButton: boolean;
-  dropManUrl: string;
-  modalWidth: number;
-  isMobile: boolean;
-  isShowChatHeader: boolean;
-}) {
-  const [value, setValue] = useState<string>('');
-  const ref = useRef<HTMLDivElement>(null);
-  const lastMessage = useRef<HTMLDivElement>(null);
-  const [windowPosition, setWindowPosition] = useState({ left: '0', top: '0' });
-  const inputRef = useRef<HTMLInputElement>(null); /* User input Ref */
-  /* Initial listener for loss of focus that refocuses User input after a small delay */
-  const [nowAIContent, setNowAIContent] = useState<string>('');
-  const [sendingMessage, setSendingMessage] = useState(false);
-  const abortControllerRef = useRef(new AbortController());
-  const [fileList, setFileList] = useState<
-    { file: File; fileUrl: string; fileType: string; fileId: string }[]
-  >([]);
-  const scrollContainerRef = useRef(null);
-  const [showLeftArrow, setShowLeftArrow] = useState(false); // 控制左侧箭头显示
-  const [showRightArrow, setShowRightArrow] = useState(false); // 控制右侧箭头显示
-  const isStream = true;//是否流式输出（手动开关）
-  const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
-  const [tagList, setTagList] = useState([]); // 问题标签列表
-  const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
-  const inputContainerRef = useRef(null);
-  const [inputContainerHeight,setInputContainerHeight] = useState('50px')
-  const contentRef = useRef(nowAIContent);
-
-  let voiceChunks = []; // 临时存储录制的语音片段
-  // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
-  const handleScroll = () => {
-    if (scrollContainerRef.current) {
-      const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.current;
-
-      // 判断内容是否超出容器
-      const isContentOverflowed = scrollWidth > clientWidth;
-
-      // 判断是否滚动到最左侧
-      setShowLeftArrow(isContentOverflowed && scrollLeft > 0);
-
-      // 判断是否滚动到最右侧
-      setShowRightArrow(isContentOverflowed && scrollLeft + clientWidth < scrollWidth);
-    }
-  };
-
-  // 处理延时队列，因为后端返回的是 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') {
-      setNowAIContent((prevState) => {
-        const newValue = prevState + data['chunk'];
-        contentRef.current = newValue
-        return newValue
-      });
-      if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
-
-      // 处理延时队列
-      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'],
-      };
-      if (false&&
-        res.data &&
-        res.data.outputs &&
-        Object.keys(res.data.outputs).length > 0 &&
-        res.data.outputs[0].outputs &&
-        res.data.outputs[0].outputs.length > 0
-      ) {
-        const flowOutputs: Array<any> = res.data.outputs[0].outputs;
-        if (output_component && flowOutputs.map((e) => e.component_id).includes(output_component)) {
-          Object.values(
-            flowOutputs.find((e) => e.component_id === output_component).outputs,
-          ).forEach((output: any) => {
-            addMessage({
-              message: extractMessageFromOutput(output),
-              isSend: false,
-              rawInfo: output.message,
-            });
-          });
-        } else if (flowOutputs.length === 1) {
-          Object.values(flowOutputs[0].outputs).forEach((output: any) => {
-            addMessage({
-              message: extractMessageFromOutput(output),
-              isSend: false,
-              rawInfo: output.message,
-            });
-          });
-        } else {
-          flowOutputs
-            .sort((a, b) => {
-              // Get the earliest timestamp from each flowOutput's outputs
-              const aTimestamp = Math.min(
-                ...Object.values(a.outputs).map((output: any) =>
-                  Date.parse(output.message?.timestamp),
-                ),
-              );
-              const bTimestamp = Math.min(
-                ...Object.values(b.outputs).map((output: any) =>
-                  Date.parse(output.message?.timestamp),
-                ),
-              );
-              return aTimestamp - bTimestamp; // Sort descending (newest first)
-            })
-            .forEach((flowOutput) => {
-              Object.values(flowOutput.outputs).forEach((output: any) => {
-                addMessage({
-                  message: extractMessageFromOutput(output),
-                  isSend: false,
-                  rawInfo: output.message,
-                });
-              });
-            });
-        }
-      }
-      const output = {
-        message:contentRef.current,
-        type:'text'
-      };
-      addMessage({
-        message: extractMessageFromOutput(output),
-        isSend: false,
-        rawInfo: output.message,
-      });
-      setSendingMessage(false);
-    }
-  };
-
-  const sendMessageNoStream = (res) => {
-    if (
-      res.data &&
-      res.data.outputs &&
-      Object.keys(res.data.outputs).length > 0 &&
-      res.data.outputs[0].outputs &&
-      res.data.outputs[0].outputs.length > 0
-    ) {
-      const flowOutputs: Array<any> = res.data.outputs[0].outputs;
-      if (output_component && flowOutputs.map((e) => e.component_id).includes(output_component)) {
-        Object.values(flowOutputs.find((e) => e.component_id === output_component).outputs).forEach(
-          (output: any) => {
-            addMessage({
-              message: extractMessageFromOutput(output),
-              isSend: false,
-            });
-          },
-        );
-      } else if (flowOutputs.length === 1) {
-        Object.values(flowOutputs[0].outputs).forEach((output: any) => {
-          addMessage({
-            message: extractMessageFromOutput(output),
-            isSend: false,
-          });
-        });
-      } else {
-        flowOutputs
-          .sort((a, b) => {
-            // Get the earliest timestamp from each flowOutput's outputs
-            const aTimestamp = Math.min(
-              ...Object.values(a.outputs).map((output: any) =>
-                Date.parse(output.message?.timestamp),
-              ),
-            );
-            const bTimestamp = Math.min(
-              ...Object.values(b.outputs).map((output: any) =>
-                Date.parse(output.message?.timestamp),
-              ),
-            );
-            return aTimestamp - bTimestamp; // Sort descending (newest first)
-          })
-          .forEach((flowOutput) => {
-            Object.values(flowOutput.outputs).forEach((output: any) => {
-              addMessage({
-                message: extractMessageFromOutput(output),
-                isSend: false,
-              });
-            });
-          });
-      }
-    }
-    setSendingMessage(false);
-  };
-
-  // 点击send发送按钮，进行消息提交发送逻辑；userMessage为传入的文本消息，优先级比input中value高
-  const handleSendMessage = (userMessage, callback = () => {}, input_value_type: string = InputValueType.text)=>  {
-    let message = '';
-    if (value && value.trim() !== '') {
-      message = value;
-      setDropDownList(undefined);
-    }
-    // 有传入消息，则优先使用传入的消息
-    if (userMessage && userMessage?.trim() !== '') {
-      message = userMessage;
-    }
-
-    if (message && message.trim() !== '') {
-      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;
-      }
-      const code = userInfoClone['code'] ? userInfoClone['code'] : ""
-      let embedAppExtend: embedAppExtend = {
-        operator_id: code,
-        upload_file_path_list: [],
-        http_extend: {
-          bd:{
-            code: code,
-          },
-          body: {
-            code: code,
-          },
-        },
-      };
-      if (fileList.length > 0) {
-        fileList.forEach((fileItem) => {
-          if (fileItem.fileType === 'image' || fileItem.fileType === 'file') {
-            embedAppExtend['upload_file_path_list'].push(fileItem.fileUrl);
-          }
-        });
-      }
-      setFileList([]);
-      handleScroll();
-      sendMessage(
-        input_value_type,
-        embedAppExtend,
-        isStream,
-        handleMessageContent,
-        abortControllerRef.current.signal,
-        hostUrl,
-        flowId,
-        message,
-        input_type,
-        output_type,
-        sessionId,
-        output_component,
-        tweaks,
-        api_key,
-        additional_headers,
-      )
-        .then((res) => {
-          // 非流式输出
-          if(!isStream){
-            sendMessageNoStream(res);
-          }
-          getHistoryList();
-          setSendingMessage(false);
-          setNowAIContent('');
-        })
-        .catch((e) => {
-          if (e.name !== 'AbortError') {
-            messageTip.error('网络请求错误,请重试');
-            addMessage({
-              message: '网络错误',
-              isSend: false,
-            });
-          }
-          setSendingMessage(false);
-          setNowAIContent('');
-        })
-        .finally(() => {
-          if (isFunction(callback)) {
-            callback();
-          }
-        });
-      setDropDownList(undefined);
-    }
-  }
-
-  /**
-   * 获取文件类型
-   * @param file File 对象
-   */
-  const getFileType = (file) => {
-    if (!(file instanceof File)) {
-      throw new Error('Input must be a File object');
-    }
-
-    const mimeType = file.type;
-
-    // 判断是否为图片
-    if (mimeType.startsWith('image/')) {
-      return 'image';
-    }
-
-    // 判断是否为音频
-    if (mimeType.startsWith('audio/')) {
-      return 'voice';
-    }
-
-    // 默认返回 file
-    return 'file';
-  };
-
-  /**
-   * 根据文件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';
-    }
-  };
-
-  /**
-   * 获取易于阅读的文件大小（将字节转成KB、MB等）
-   * @param value 文件字节大小，file.size
-   */
-  const getFileSize = (value) => {
-    if (null == value || value == '') {
-      return '0 Bytes';
-    }
-    var unitArr = new Array('Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
-    var index = 0;
-    var srcsize = parseFloat(value);
-    index = Math.floor(Math.log(srcsize) / Math.log(1024));
-    var size = srcsize / Math.pow(1024, index);
-    size = size.toFixed(2); //保留的小数位数
-    return size + unitArr[index];
-  };
-
-  /**
-   * 删除文件列表中的文件
-   * @param item 点击的File对象
-   * @param index 索引
-   */
-  const removeFile = (item, index) => {
-    setFileList(fileList.filter((item, i) => i !== index));
-    handleScroll();
-  };
-
-  /**
-   * 上传文件
-   */
-  const uploadFile = () => {
-    if (sendingMessage) {
-      return;
-    }
-    const input = document.createElement('input');
-    input.type = 'file';
-    const acceptFileType = [
-      '.png',
-      '.jpg',
-      '.jpeg',
-      // '.pdf',
-      // '.doc',
-      // '.docx',
-      // '.xls',
-      // '.xlsx',
-      // '.txt',
-      // '.md',
-      // '.mobi',
-      // '.rpub',
-    ];
-    input.accept = acceptFileType.join(',');
-    input.multiple = true; // 允许多选文件
-    input.onchange = (event) => {
-      const files = event.target.files;
-      if (files && files.length > 0) {
-        Array.from(files).forEach((file) => {
-          if (acceptFileType.includes(`.${file.name.split('.').pop().toLowerCase()}`)) {
-            fetchUploadFile(hostUrl, file, flowId, api_key)
-              .then((res) => {
-                const { data = {} } = res.data;
-                const {
-                  id,
-                  name,
-                  save_name,
-                  url,
-                  extension,
-                } = data;
-                const filePreItem = {
-                  file,
-                  fileType: getFileType(file),
-                  fileUrl: url,
-                  fileId: id,
-                };
-                setFileList((prevFileList) => [...prevFileList, filePreItem]);
-                handleScroll();
-              })
-              .catch((e) => {
-                messageTip.error('上传失败,请重试！');
-              });
-          } else {
-            messageTip.error('已过滤不支持的文件类型');
-          }
-        });
-      }
-    };
-    input.click();
-  };
-
-  // 向右滚动方法
-  const handleScrollRight = (direction) => {
-    if (direction == 'right') {
-      if (scrollContainerRef.current) {
-        scrollContainerRef.current.scrollLeft += 200;
-      }
-    } else if (direction == 'left') {
-      if (scrollContainerRef.current) {
-        scrollContainerRef.current.scrollLeft -= 200;
-      }
-    }
-  };
-
-  /**
-   * 语音实时识别
-   */
-  const startRecord = ()=>{
-    if (!('webkitSpeechRecognition' in window)) {
-      alert('您的浏览器不支持语音识别功能')
-      return;
-    }
-    if(recordState){
-      recognition.stop();
-      setRecordState(false);
-    }else{
-      recognition = new webkitSpeechRecognition();
-      recognition.continuous = true;
-      recognition.interimResults = true;
-      recognition.lang = 'zh-CN';
-
-      recognition.onresult = (event) => {
-        const transcript = Array.from(event.results)
-          .map(result => result[0].transcript)
-          .join('');
-        setValue(transcript)
-      };
-
-      recognition.onerror = (event) => {
-        if(event.error === 'not-allowed'){
-          messageTip.error("录音权限被拒绝，请允许录音权限后重试")
-        }
-        console.error('语音识别错误:', event);
-      };
-      recognition.start()
-      setRecordState(true);
-    }
-  }
-
-  /**
-   * 输出消息时，滚动到底部
-   */
-  useEffect(() => {
-    if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  /* Refocus the User input whenever a new response is returned from the LLM */
-
-  useEffect(() => {
-    // after a slight delay
-    setTagList(tags);
-    setTimeout(() => {
-      // inputRef.current?.focus();
-    }, 100);
-  }, [messages, open, tags]);
-
-  /**
-   * 当获取历史记录时（sessindId变化时），清空消息，并添加历史记录
-   */
-  useEffect(() => {
-    const fetchChatHistory = async () => {
-      try {
-        let userInfoClone = userInfo;
-        if(isEmpty(userInfoClone.code)) {
-          userInfoClone.code = sessionId;
-        }
-        const res = await getChatHistory(hostUrl, flowId, sessionId, userInfoClone['code']);
-        const chatHistory = res.data?.length ? res.data : [];
-
-        clearMessage();
-        chatHistory.forEach((data) => {
-          addMessage({
-            message: extractMessageFromOutput({
-              message: data,
-              type: data['category'],
-            }),
-            isSend: data['sender'] === 'User',
-            rawInfo: data,
-          });
-        });
-      } catch (error) {
-        console.error("Failed to fetch chat history:", error);
-      }
-    };
-
-    fetchChatHistory();
-
-    return () => {
-      abortControllerRef.current.abort('disconnect');
-      // abortControllerRef是一次性的，中止之后要初始化，否则fetch请求会被中止导致请求无响应
-      abortControllerRef.current = new AbortController();
-    };
-  }, [sessionId]);
-
-  /**
-   * 开场白展示优化
-   * 1、如果是全屏模式：则横向展示三项开场白
-   * 2、如果是弹窗模式，则当弹窗宽度大于【x】时横向展示三项开场白，当小于等于【x】时则纵向展示三项开场白
-   * */
-  const judgeDropClass = () => {
-    if (modalWidth === undefined) {
-      if(isEmpty(dropManUrl)){
-        return 'cl-drop-down';
-      }
-      return 'cl-drop-screen';
-    }
-    if (modalWidth > 1800) {
-      return 'cl-drop-man';
-    }
-    return 'cl-drop-horizontal'
-  }
-
-  const renderTipsInfo = () => {
-    if (isMobile && !isEmpty(dropDownList)){
-      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 style={{fontSize:'14px'}}>您可以这样问我:</div></div>
-            <div className={'cl-drop-down-mobile'}>
-              <div className="drop-down-list-mobile">
-                {dropDownList.map(({backgroundImg, title}) => (
-                    <div
-                        className="drop-down-item-card-mobile"
-                        key={title}
-                        onClick={() => {
-                          setDropDownList(undefined);
-                          handleSendMessage(title);
-                        }}>
-                      <Typography.Paragraph
-                          className="drop-down-item-title-mobile"
-                          ellipsis={{
-                            rows: 2,
-                            tooltip: `“${title}”`,
-                          }}>{'“' + title + '”'}
-                      </Typography.Paragraph>
-                        <img className="drop-down-item-bottom-img-mobile" src={backgroundImg}/>
-                      {/*</div>*/}
-                    </div>
-                ))}
-              </div>
-            </div>
-          </div>
-      )
-    }
-    if (!isEmpty(dropDownList)){
-      if (isEmpty(dropManUrl)){
-        return (
-            <div className='cl-drop-down'>
-              <div className="drop-down-title">Hi，ssss欢迎使用{window_title}，您可以这样问我:</div>
-              <div className="drop-down-list">
-                {dropDownList.map(({backgroundImg, title}) => (
-                    <div className="drop-down-item-card" key={title}>
-                      <Typography.Paragraph
-                          className="drop-down-item-title"
-                          ellipsis={{
-                            rows: 2,
-                            tooltip: `“${title}”`,
-                          }}>{'“' + title + '”'}
-                      </Typography.Paragraph>
-                      <div className="drop-down-item-bottom">
-                        <div
-                            className="drop-down-item-bottom-button"
-                            onClick={() => {
-                              setDropDownList(undefined);
-                              handleSendMessage(title);
-                            }}
-                        >
-                          <img src={btn_answer}/>
-                          {/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
-                        </div>
-                        <img className="drop-down-item-bottom-img" src={backgroundImg}/>
-                      </div>
-                    </div>
-                ))}
-              </div>
-            </div>
-        )
-      } else {
-        return (
-            <div className={judgeDropClass()}>
-              <img className="drop-man-img" src={dropManUrl}/>
-              <div className='cl-drop-down'>
-                <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
-                <div className="drop-down-list">
-                  {dropDownList.map(({backgroundImg, title}) => (
-                      <div
-                          className="drop-down-item-card"
-                          key={title}
-                          onClick={() => {
-                            setDropDownList(undefined);
-                            handleSendMessage(title);
-                          }}>
-                        <Typography.Paragraph
-                            className="drop-down-item-title"
-                            ellipsis={{
-                              rows: 2,
-                              tooltip: `“${title}”`,
-                            }}>{'“' + title + '”'}
-                        </Typography.Paragraph>
-                        <div className="drop-down-item-bottom">
-                          <div
-                              className="drop-down-item-bottom-button"
-                              onClick={() => {
-                                setDropDownList(undefined);
-                                handleSendMessage(title);
-                              }}
-                          >
-                            <img src={btn_answer}/>
-                            {/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
-                          </div>
-                          <img className="drop-down-item-bottom-img" src={backgroundImg}/>
-                        </div>
-                      </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-        )
-      }
-    }
-    return <></>
-  }
-
-  return (
-      <div
-          style={{...chat_window_style, width: width, height: "100%"}}
-          ref={ref}
-          className="cl-window"
-      >
-        <div className="cl-middle-container">
-          <div className="cl-header" style={isMobile ? {position: 'absolute', top: 20, left: 0, paddingLeft: '1.6rem', paddingRight: '1.6rem'} : {}}>
-            {
-              isShowChatHeader && (
-                <div className="header-title">
-                  {
-                    isTitleSideIcon ?
-                        <img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}}
-                             src={agentUrl}/> :
-                        <span className="diamond"/>
-                  }
-                  {window_title}
-                </div>
-              )
-            }
-            <div className="cl-header-subtitle"/>
-            {renderTipsInfo()}
-          </div>
-          <div
-              className="cl-messages_container"
-              // style={{ maxWidth: '100%', minHeight:'300px', height:'700px', paddingBottom: '56px' }}
-          >
-            {messages.map((message, index) => (
-                <ChatMessage
-                    bot_message_style={bot_message_style}
-                    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}
-                    type={message.type}
-                    rawInfo={message.rawInfo}
-                    handleSendMessage={handleSendMessage}
-              />
-          ))}
-          {sendingMessage && (nowAIContent?
-                  <ChatMessage
-                      bot_message_style={bot_message_style}
-                      user_message_style={user_message_style}
-                      error_message_style={error_message_style}
-                      key={1688574569}
-                      host_url={hostUrl}
-                      message={{ message: nowAIContent}}
-                      isSend={false}
-                      handleSendMessage={handleSendMessage}
-                  />:<ChatMessagePlaceholder bot_message_style={bot_message_style} />
-          )}
-          <div ref={lastMessage}></div>
-        </div>
-        <div
-            className="w_tagListClass"
-            style={{
-              // bottom: fileList.length > 0 ? '130px' : '80px',
-              display: tagList?.length > 0 ? '' : 'none',
-              zIndex: tagList?.length > 0 ? '2' : '-1',
-            }}
-        >
-          {tagList.map((item, index) => (
-              <div
-                  key={index}
-                  className="w_tagItemBox"
-                  onClick={() => {
-                    handleSendMessage(item?.name);
-                    setFileList([]);
-                  }}
-              >
-                <div>
-                  <img
-                      style={item?.img ? {} : { display: 'none' }}
-                      src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/'+ item?.img}
-                      className="w_tagImgh"
-                      alt="Image"
-                  />
-                </div>
-                <div className="w_tagItemText">{item?.name}</div>
-              </div>
-          ))}
-        </div>
-        <div style={input_container_style} className="cl-input_container">
-          <div className="w_file_preview" ref={scrollContainerRef} onScroll={handleScroll}>
-            <div className="w_toLeftBox" style={{display: showLeftArrow ? 'flex' : 'none'}}>
-              <div className="w_toLeft" onClick={() => handleScrollRight('left')}>
-                <img src={toLeftPng}/>
-              </div>
-            </div>
-            <div className="w_toRightBox" style={{display: showRightArrow ? 'flex' : 'none'}}>
-              <div className="w_toRight" onClick={() => handleScrollRight('right')}>
-                <img src={toRightPng}/>
-              </div>
-            </div>
-            {fileList.map((item, index) => {
-              return (
-                  <div key={item.filePath} className="w_fileBox">
-                    {item.fileType == 'image' && (
-                        <Image
-                            height={40}
-                            width={40}
-                            src={item.fileUrl}
-                            className="w_upImg"
-                            preview={{
-                              mask: <span className="custom-mask"></span>,
-                            }}
-                        />
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'pdf' && (
-                        <img style={{width: 40, height: 40}} src={typePdfPng}/>
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'word' && (
-                        <img style={{width: 40, height: 40}} src={typeWordPng}/>
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'excel' && (
-                        <img style={{width: 40, height: 40}} src={typeExcelPng}/>
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'markdown' && (
-                        <img style={{width: 40, height: 40}} src={typeMarkdownPng}/>
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'txt' && (
-                        <img style={{width: 40, height: 40}} src={typeTextPng}/>
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'mobi' && (
-                        <img style={{width: 40, height: 40}} src={typeMobiPng}/>
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'rpub' && (
-                        <img style={{width: 40, height: 40}} src={typeRPubPng}/>
-                    )}
-                    {getFileTypeByUrl(item.file.name) == 'file' && (
-                        <img style={{width: 40, height: 40}} src={upFilePng}/>
-                    )}
-                    <div className="w_fileInfoBox">
-                      <div className="w_fileInfoFileName">{item.file.name}</div>
-                      <div className="w_fileInfoMeta">{`${item.fileType} · ${getFileSize(
-                          item.file.size,
-                      )}`}</div>
-                    </div>
-                    <div
-                        className="w_fileRemove"
-                        onClick={() => {
-                          removeFile(item, index);
-                        }}
-                    >
-                      <img src={closexPng}/>
-                    </div>
-                  </div>
-              );
-            })}
-          </div>
-          <div className="w_inputBox" style={{height: inputContainerHeight}}>
-          <textarea
-              onFocus={()=>setInputContainerHeight('120px')}
-              onBlur={()=>setInputContainerHeight('50px')}
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) handleSendMessage();
-              }}
-              disabled={sendingMessage}
-              placeholder={
-                sendingMessage
-                    ? placeholder_sending || '思考中...'
-                    : placeholder || '请输入您的问题...'
-              }
-              style={{...input_style,resize:"none"}}
-              ref={inputRef}
-              className="cl-input-element"
-          />
-            {
-              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 &&
-              <Tooltip title="支持图片格式">
-                <div
-                    className="w_send_file_box"
-                    style={sendingMessage ? { cursor: 'not-allowed' } : {}}
-                    onClick={uploadFile}
-                >
-                  <img src={fileuploadPng} style={{ width: 23 }}></img>
-                </div>
-              </Tooltip>
-            }
-            <Tooltip title={sendingMessage?'点击暂停':'点击发送'}>
-            <button
-                style={{ ...(sendingMessage ? { cursor: 'pointer' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
-                onClick={() => {
-                  if(sendingMessage){
-                    const output = {
-                      message:nowAIContent,
-                      type:'text'
-                    };
-                    addMessage({
-                      message: extractMessageFromOutput(output),
-                      isSend: false,
-                      rawInfo: output.message,
-                    });
-                    abortControllerRef.current.abort('disconnect');
-                    abortControllerRef.current = new AbortController();
-                  }else{
-                    handleSendMessage()
-                  }
-                }}
-            >
-
-                  <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
-              </button>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+// @ts-nocheck
+import { extractMessageFromOutput } from './utils';
+import React, { useEffect, useRef, useState } from 'react';
+import {ChatMessageType, embedAppExtend, InputValueType, MessageType} from './types/chatWidget';
+import ChatMessage from './chatMessage';
+import { fetchUploadFile, getChatHistory, sendMessage } from './controllers';
+import ChatMessagePlaceholder from './chatPlaceholder/index.tsx';
+// import './index.module.css'
+import closexPng from '../../../assets/aicenter/closex.png';
+import upFilePng from '../../../assets/aicenter/upfile.png';
+import fileuploadPng from '../../../assets/aicenter/fileupload.png';
+import sendmessagePng from '../../../assets/aicenter/sendmessage.png';
+import stopmessagePng from '../../../assets/aicenter/stopmessage.png';
+import toRightPng from '../../../assets/aicenter/toRight.png';
+import toLeftPng from '../../../assets/aicenter/toLeft.png';
+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 soundWavePng from '../../../assets/aicenter/sound-wave.gif';
+import luyinPng from '../../../assets/aicenter/luyin.png';
+import { RightOutlined } from '@ant-design/icons';
+import { Image, message as messageTip, Tooltip, Typography } from 'antd';
+import { isEmpty, isFunction } from 'lodash';
+import btn_answer from '../../../assets/aicenter/btn_answer.png';
+
+
+let mediaRecorder = null; // 语音对象,用于录音
+let recognition = null; // 语音识别对象
+const delayMessageList = []
+
+export default function ChatWindow({
+  tags,
+  getHistoryList,
+  userInfo,
+  clearMessage,
+  api_key,
+  flowId,
+  hostUrl,
+  updateLastMessage,
+  messages,
+  output_type,
+  input_type,
+  output_component,
+  bot_message_style,
+  send_icon_style,
+  user_message_style,
+  chat_window_style,
+  error_message_style,
+  placeholder_sending,
+  send_button_style = { paddingTop: '6px' },
+  online = true,
+  open,
+  online_message = '在线',
+  offline_message = '离线',
+  window_title = 'AI对话',
+  placeholder,
+  input_style,
+  input_container_style,
+  addMessage,
+  position,
+  triggerRef,
+  width = '900',
+  height = '300',
+  tweaks,
+  sessionId,
+  additional_headers,
+  setDropDownList = () => {},
+  dropDownList = [],
+  baseConfig = {},
+  isShowVoiceButton = true,
+  isShowUploadButton,
+  dropManUrl = '',
+  modalWidth,
+  isMobile = false,
+  isShowChatHeader = true,
+}: {
+  tags: [];
+  getHistoryList: Function;
+  userInfo: object;
+  clearMessage: Function;
+  api_key?: string;
+  output_type: string;
+  input_type: string;
+  output_component?: string;
+  bot_message_style?: React.CSSProperties;
+  send_icon_style?: React.CSSProperties;
+  user_message_style?: React.CSSProperties;
+  chat_window_style?: React.CSSProperties;
+  error_message_style?: React.CSSProperties;
+  send_button_style?: React.CSSProperties;
+  online?: boolean;
+  open: boolean;
+  online_message?: string;
+  placeholder_sending?: string;
+  offline_message?: string;
+  window_title?: string;
+  placeholder?: string;
+  input_style?: React.CSSProperties;
+  input_container_style?: React.CSSProperties;
+  tweaks?: { [key: string]: any };
+  flowId: string;
+  hostUrl: string;
+  updateLastMessage: Function;
+  messages: ChatMessageType[];
+  addMessage: Function;
+  position?: string;
+  triggerRef: React.RefObject<HTMLButtonElement>;
+  width?: number;
+  height?: string;
+  sessionId: string;
+  additional_headers?: { [key: string]: string };
+  baseConfig: object;
+  isShowVoiceButton: boolean;
+  isShowUploadButton: boolean;
+  dropManUrl: string;
+  modalWidth: number;
+  isMobile: boolean;
+  isShowChatHeader: boolean;
+}) {
+  const [value, setValue] = useState<string>('');
+  const ref = useRef<HTMLDivElement>(null);
+  const lastMessage = useRef<HTMLDivElement>(null);
+  const [windowPosition, setWindowPosition] = useState({ left: '0', top: '0' });
+  const inputRef = useRef<HTMLInputElement>(null); /* User input Ref */
+  /* Initial listener for loss of focus that refocuses User input after a small delay */
+  const [nowAIContent, setNowAIContent] = useState<string>('');
+  const [sendingMessage, setSendingMessage] = useState(false);
+  const abortControllerRef = useRef(new AbortController());
+  const [fileList, setFileList] = useState<
+    { file: File; fileUrl: string; fileType: string; fileId: string }[]
+  >([]);
+  const scrollContainerRef = useRef(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false); // 控制左侧箭头显示
+  const [showRightArrow, setShowRightArrow] = useState(false); // 控制右侧箭头显示
+  const isStream = true;//是否流式输出（手动开关）
+  const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
+  const [tagList, setTagList] = useState([]); // 问题标签列表
+  const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
+  const inputContainerRef = useRef(null);
+  const [inputContainerHeight,setInputContainerHeight] = useState('50px')
+  const contentRef = useRef(nowAIContent);
+
+  let voiceChunks = []; // 临时存储录制的语音片段
+  // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
+  const handleScroll = () => {
+    if (scrollContainerRef.current) {
+      const { scrollLeft, clientWidth, scrollWidth } = scrollContainerRef.current;
+
+      // 判断内容是否超出容器
+      const isContentOverflowed = scrollWidth > clientWidth;
+
+      // 判断是否滚动到最左侧
+      setShowLeftArrow(isContentOverflowed && scrollLeft > 0);
+
+      // 判断是否滚动到最右侧
+      setShowRightArrow(isContentOverflowed && scrollLeft + clientWidth < scrollWidth);
+    }
+  };
+
+  // 处理延时队列，因为后端返回的是 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 = () => {
+    if(window.delayMessageTimer) {
+      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') {
+      setNowAIContent((prevState) => {
+        const newValue = prevState + data['chunk'];
+        contentRef.current = newValue
+        return newValue
+      });
+      if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+
+      // 处理延时队列
+      delayMessageTimer();
+    }
+    else if (event == 'form') {
+      // 这里添加到延时队列，直接处理可能会把form渲染到token上面
+      delayMessageList.push({
+        message: "",
+        isSend: false,
+        rawInfo: data,
+        type: MessageType.form
+      })
+      delayMessageTimer()
+    }
+    else if (event == 'end') {
+      const res = {
+        data: data['result'],
+      };
+      if (false&&
+        res.data &&
+        res.data.outputs &&
+        Object.keys(res.data.outputs).length > 0 &&
+        res.data.outputs[0].outputs &&
+        res.data.outputs[0].outputs.length > 0
+      ) {
+        const flowOutputs: Array<any> = res.data.outputs[0].outputs;
+        if (output_component && flowOutputs.map((e) => e.component_id).includes(output_component)) {
+          Object.values(
+            flowOutputs.find((e) => e.component_id === output_component).outputs,
+          ).forEach((output: any) => {
+            addMessage({
+              message: extractMessageFromOutput(output),
+              isSend: false,
+              rawInfo: output.message,
+            });
+          });
+        } else if (flowOutputs.length === 1) {
+          Object.values(flowOutputs[0].outputs).forEach((output: any) => {
+            addMessage({
+              message: extractMessageFromOutput(output),
+              isSend: false,
+              rawInfo: output.message,
+            });
+          });
+        } else {
+          flowOutputs
+            .sort((a, b) => {
+              // Get the earliest timestamp from each flowOutput's outputs
+              const aTimestamp = Math.min(
+                ...Object.values(a.outputs).map((output: any) =>
+                  Date.parse(output.message?.timestamp),
+                ),
+              );
+              const bTimestamp = Math.min(
+                ...Object.values(b.outputs).map((output: any) =>
+                  Date.parse(output.message?.timestamp),
+                ),
+              );
+              return aTimestamp - bTimestamp; // Sort descending (newest first)
+            })
+            .forEach((flowOutput) => {
+              Object.values(flowOutput.outputs).forEach((output: any) => {
+                addMessage({
+                  message: extractMessageFromOutput(output),
+                  isSend: false,
+                  rawInfo: output.message,
+                });
+              });
+            });
+        }
+      }
+      const output = {
+        message:contentRef.current,
+        type:'text'
+      };
+      addMessage({
+        message: extractMessageFromOutput(output),
+        isSend: false,
+        rawInfo: output.message,
+      });
+      setSendingMessage(false);
+    }
+  };
+
+  const sendMessageNoStream = (res) => {
+    if (
+      res.data &&
+      res.data.outputs &&
+      Object.keys(res.data.outputs).length > 0 &&
+      res.data.outputs[0].outputs &&
+      res.data.outputs[0].outputs.length > 0
+    ) {
+      const flowOutputs: Array<any> = res.data.outputs[0].outputs;
+      if (output_component && flowOutputs.map((e) => e.component_id).includes(output_component)) {
+        Object.values(flowOutputs.find((e) => e.component_id === output_component).outputs).forEach(
+          (output: any) => {
+            addMessage({
+              message: extractMessageFromOutput(output),
+              isSend: false,
+            });
+          },
+        );
+      } else if (flowOutputs.length === 1) {
+        Object.values(flowOutputs[0].outputs).forEach((output: any) => {
+          addMessage({
+            message: extractMessageFromOutput(output),
+            isSend: false,
+          });
+        });
+      } else {
+        flowOutputs
+          .sort((a, b) => {
+            // Get the earliest timestamp from each flowOutput's outputs
+            const aTimestamp = Math.min(
+              ...Object.values(a.outputs).map((output: any) =>
+                Date.parse(output.message?.timestamp),
+              ),
+            );
+            const bTimestamp = Math.min(
+              ...Object.values(b.outputs).map((output: any) =>
+                Date.parse(output.message?.timestamp),
+              ),
+            );
+            return aTimestamp - bTimestamp; // Sort descending (newest first)
+          })
+          .forEach((flowOutput) => {
+            Object.values(flowOutput.outputs).forEach((output: any) => {
+              addMessage({
+                message: extractMessageFromOutput(output),
+                isSend: false,
+              });
+            });
+          });
+      }
+    }
+    setSendingMessage(false);
+  };
+
+  // 点击send发送按钮，进行消息提交发送逻辑；userMessage为传入的文本消息，优先级比input中value高
+  const handleSendMessage = (userMessage, callback = () => {}, input_value_type: string = InputValueType.text)=>  {
+    let message = '';
+    if (value && value.trim() !== '') {
+      message = value;
+      setDropDownList(undefined);
+    }
+    // 有传入消息，则优先使用传入的消息
+    if (userMessage && userMessage?.trim() !== '') {
+      message = userMessage;
+    }
+
+    if (message && message.trim() !== '') {
+      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;
+      }
+      const code = userInfoClone['code'] ? userInfoClone['code'] : ""
+      let embedAppExtend: embedAppExtend = {
+        operator_id: code,
+        upload_file_path_list: [],
+        http_extend: {
+          bd:{
+            code: code,
+          },
+          body: {
+            code: code,
+          },
+        },
+      };
+      if (fileList.length > 0) {
+        fileList.forEach((fileItem) => {
+          if (fileItem.fileType === 'image' || fileItem.fileType === 'file') {
+            embedAppExtend['upload_file_path_list'].push(fileItem.fileUrl);
+          }
+        });
+      }
+      setFileList([]);
+      handleScroll();
+      sendMessage(
+        input_value_type,
+        embedAppExtend,
+        isStream,
+        handleMessageContent,
+        abortControllerRef.current.signal,
+        hostUrl,
+        flowId,
+        message,
+        input_type,
+        output_type,
+        sessionId,
+        output_component,
+        tweaks,
+        api_key,
+        additional_headers,
+      )
+        .then((res) => {
+          // 非流式输出
+          if(!isStream){
+            sendMessageNoStream(res);
+          }
+          getHistoryList();
+          setSendingMessage(false);
+          setNowAIContent('');
+        })
+        .catch((e) => {
+          if (e.name !== 'AbortError') {
+            messageTip.error('网络请求错误,请重试');
+            addMessage({
+              message: '网络错误',
+              isSend: false,
+            });
+          }
+          setSendingMessage(false);
+          setNowAIContent('');
+        })
+        .finally(() => {
+          if (isFunction(callback)) {
+            callback();
+          }
+        });
+      setDropDownList(undefined);
+    }
+  }
+
+  /**
+   * 获取文件类型
+   * @param file File 对象
+   */
+  const getFileType = (file) => {
+    if (!(file instanceof File)) {
+      throw new Error('Input must be a File object');
+    }
+
+    const mimeType = file.type;
+
+    // 判断是否为图片
+    if (mimeType.startsWith('image/')) {
+      return 'image';
+    }
+
+    // 判断是否为音频
+    if (mimeType.startsWith('audio/')) {
+      return 'voice';
+    }
+
+    // 默认返回 file
+    return 'file';
+  };
+
+  /**
+   * 根据文件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';
+    }
+  };
+
+  /**
+   * 获取易于阅读的文件大小（将字节转成KB、MB等）
+   * @param value 文件字节大小，file.size
+   */
+  const getFileSize = (value) => {
+    if (null == value || value == '') {
+      return '0 Bytes';
+    }
+    var unitArr = new Array('Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
+    var index = 0;
+    var srcsize = parseFloat(value);
+    index = Math.floor(Math.log(srcsize) / Math.log(1024));
+    var size = srcsize / Math.pow(1024, index);
+    size = size.toFixed(2); //保留的小数位数
+    return size + unitArr[index];
+  };
+
+  /**
+   * 删除文件列表中的文件
+   * @param item 点击的File对象
+   * @param index 索引
+   */
+  const removeFile = (item, index) => {
+    setFileList(fileList.filter((item, i) => i !== index));
+    handleScroll();
+  };
+
+  /**
+   * 上传文件
+   */
+  const uploadFile = () => {
+    if (sendingMessage) {
+      return;
+    }
+    const input = document.createElement('input');
+    input.type = 'file';
+    const acceptFileType = [
+      '.png',
+      '.jpg',
+      '.jpeg',
+      // '.pdf',
+      // '.doc',
+      // '.docx',
+      // '.xls',
+      // '.xlsx',
+      // '.txt',
+      // '.md',
+      // '.mobi',
+      // '.rpub',
+    ];
+    input.accept = acceptFileType.join(',');
+    input.multiple = true; // 允许多选文件
+    input.onchange = (event) => {
+      const files = event.target.files;
+      if (files && files.length > 0) {
+        Array.from(files).forEach((file) => {
+          if (acceptFileType.includes(`.${file.name.split('.').pop().toLowerCase()}`)) {
+            fetchUploadFile(hostUrl, file, flowId, api_key)
+              .then((res) => {
+                const { data = {} } = res.data;
+                const {
+                  id,
+                  name,
+                  save_name,
+                  url,
+                  extension,
+                } = data;
+                const filePreItem = {
+                  file,
+                  fileType: getFileType(file),
+                  fileUrl: url,
+                  fileId: id,
+                };
+                setFileList((prevFileList) => [...prevFileList, filePreItem]);
+                handleScroll();
+              })
+              .catch((e) => {
+                messageTip.error('上传失败,请重试！');
+              });
+          } else {
+            messageTip.error('已过滤不支持的文件类型');
+          }
+        });
+      }
+    };
+    input.click();
+  };
+
+  // 向右滚动方法
+  const handleScrollRight = (direction) => {
+    if (direction == 'right') {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollLeft += 200;
+      }
+    } else if (direction == 'left') {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollLeft -= 200;
+      }
+    }
+  };
+
+  /**
+   * 语音实时识别
+   */
+  const startRecord = ()=>{
+    if (!('webkitSpeechRecognition' in window)) {
+      alert('您的浏览器不支持语音识别功能')
+      return;
+    }
+    if(recordState){
+      recognition.stop();
+      setRecordState(false);
+    }else{
+      recognition = new webkitSpeechRecognition();
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.lang = 'zh-CN';
+
+      recognition.onresult = (event) => {
+        const transcript = Array.from(event.results)
+          .map(result => result[0].transcript)
+          .join('');
+        setValue(transcript)
+      };
+
+      recognition.onerror = (event) => {
+        if(event.error === 'not-allowed'){
+          messageTip.error("录音权限被拒绝，请允许录音权限后重试")
+        }
+        console.error('语音识别错误:', event);
+      };
+      recognition.start()
+      setRecordState(true);
+    }
+  }
+
+  /**
+   * 输出消息时，滚动到底部
+   */
+  useEffect(() => {
+    if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  /* Refocus the User input whenever a new response is returned from the LLM */
+
+  useEffect(() => {
+    // after a slight delay
+    setTagList(tags);
+    setTimeout(() => {
+      // inputRef.current?.focus();
+    }, 100);
+  }, [messages, open, tags]);
+
+  /**
+   * 当获取历史记录时（sessindId变化时），清空消息，并添加历史记录
+   */
+  useEffect(() => {
+    const fetchChatHistory = async () => {
+      try {
+        let userInfoClone = userInfo;
+        if(isEmpty(userInfoClone.code)) {
+          userInfoClone.code = sessionId;
+        }
+        const res = await getChatHistory(hostUrl, flowId, sessionId, userInfoClone['code']);
+        const chatHistory = res.data?.length ? res.data : [];
+
+        clearMessage();
+        chatHistory.forEach((data) => {
+          addMessage({
+            message: extractMessageFromOutput({
+              message: data,
+              type: data['category'],
+            }),
+            isSend: data['sender'] === 'User',
+            rawInfo: data,
+          });
+        });
+      } catch (error) {
+        console.error("Failed to fetch chat history:", error);
+      }
+    };
+
+    fetchChatHistory();
+
+    return () => {
+      abortControllerRef.current.abort('disconnect');
+      // abortControllerRef是一次性的，中止之后要初始化，否则fetch请求会被中止导致请求无响应
+      abortControllerRef.current = new AbortController();
+    };
+  }, [sessionId]);
+
+  /**
+   * 开场白展示优化
+   * 1、如果是全屏模式：则横向展示三项开场白
+   * 2、如果是弹窗模式，则当弹窗宽度大于【x】时横向展示三项开场白，当小于等于【x】时则纵向展示三项开场白
+   * */
+  const judgeDropClass = () => {
+    if (modalWidth === undefined) {
+      if(isEmpty(dropManUrl)){
+        return 'cl-drop-down';
+      }
+      return 'cl-drop-screen';
+    }
+    if (modalWidth > 1800) {
+      return 'cl-drop-man';
+    }
+    return 'cl-drop-horizontal'
+  }
+
+  const renderTipsInfo = () => {
+    if (isMobile && !isEmpty(dropDownList)){
+      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 style={{fontSize:'14px'}}>您可以这样问我:</div></div>
+            <div className={'cl-drop-down-mobile'}>
+              <div className="drop-down-list-mobile">
+                {dropDownList.map(({backgroundImg, title}) => (
+                    <div
+                        className="drop-down-item-card-mobile"
+                        key={title}
+                        onClick={() => {
+                          setDropDownList(undefined);
+                          handleSendMessage(title);
+                        }}>
+                      <Typography.Paragraph
+                          className="drop-down-item-title-mobile"
+                          ellipsis={{
+                            rows: 2,
+                            tooltip: `“${title}”`,
+                          }}>{'“' + title + '”'}
+                      </Typography.Paragraph>
+                        <img className="drop-down-item-bottom-img-mobile" src={backgroundImg}/>
+                      {/*</div>*/}
+                    </div>
+                ))}
+              </div>
+            </div>
+          </div>
+      )
+    }
+    if (!isEmpty(dropDownList)){
+      if (isEmpty(dropManUrl)){
+        return (
+            <div className='cl-drop-down'>
+              <div className="drop-down-title">Hi，ssss欢迎使用{window_title}，您可以这样问我:</div>
+              <div className="drop-down-list">
+                {dropDownList.map(({backgroundImg, title}) => (
+                    <div className="drop-down-item-card" key={title}>
+                      <Typography.Paragraph
+                          className="drop-down-item-title"
+                          ellipsis={{
+                            rows: 2,
+                            tooltip: `“${title}”`,
+                          }}>{'“' + title + '”'}
+                      </Typography.Paragraph>
+                      <div className="drop-down-item-bottom">
+                        <div
+                            className="drop-down-item-bottom-button"
+                            onClick={() => {
+                              setDropDownList(undefined);
+                              handleSendMessage(title);
+                            }}
+                        >
+                          <img src={btn_answer}/>
+                          {/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
+                        </div>
+                        <img className="drop-down-item-bottom-img" src={backgroundImg}/>
+                      </div>
+                    </div>
+                ))}
+              </div>
+            </div>
+        )
+      } else {
+        return (
+            <div className={judgeDropClass()}>
+              <img className="drop-man-img" src={dropManUrl}/>
+              <div className='cl-drop-down'>
+                <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
+                <div className="drop-down-list">
+                  {dropDownList.map(({backgroundImg, title}) => (
+                      <div
+                          className="drop-down-item-card"
+                          key={title}
+                          onClick={() => {
+                            setDropDownList(undefined);
+                            handleSendMessage(title);
+                          }}>
+                        <Typography.Paragraph
+                            className="drop-down-item-title"
+                            ellipsis={{
+                              rows: 2,
+                              tooltip: `“${title}”`,
+                            }}>{'“' + title + '”'}
+                        </Typography.Paragraph>
+                        <div className="drop-down-item-bottom">
+                          <div
+                              className="drop-down-item-bottom-button"
+                              onClick={() => {
+                                setDropDownList(undefined);
+                                handleSendMessage(title);
+                              }}
+                          >
+                            <img src={btn_answer}/>
+                            {/*<RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />*/}
+                          </div>
+                          <img className="drop-down-item-bottom-img" src={backgroundImg}/>
+                        </div>
+                      </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+        )
+      }
+    }
+    return <></>
+  }
+
+  return (
+      <div
+          style={{...chat_window_style, width: width, height: "100%"}}
+          ref={ref}
+          className="cl-window"
+      >
+        <div className="cl-middle-container">
+          <div className="cl-header" style={isMobile ? {position: 'absolute', top: 20, left: 0, paddingLeft: '1.6rem', paddingRight: '1.6rem'} : {}}>
+            {
+              isShowChatHeader && (
+                <div className="header-title">
+                  {
+                    isTitleSideIcon ?
+                        <img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}}
+                             src={agentUrl}/> :
+                        <span className="diamond"/>
+                  }
+                  {window_title}
+                </div>
+              )
+            }
+            <div className="cl-header-subtitle"/>
+            {renderTipsInfo()}
+          </div>
+          <div
+              className="cl-messages_container"
+              style={isMobile ? {paddingLeft: '0', paddingRight: '0'} :{}}
+              // style={{ maxWidth: '100%', minHeight:'300px', height:'700px', paddingBottom: '56px' }}
+          >
+            {messages.map((message, index) => (
+                <ChatMessage
+                    bot_message_style={bot_message_style}
+                    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}
+                    type={message.type}
+                    rawInfo={message.rawInfo}
+                    handleSendMessage={handleSendMessage}
+              />
+          ))}
+          {sendingMessage && (nowAIContent?
+                  <ChatMessage
+                      bot_message_style={bot_message_style}
+                      user_message_style={user_message_style}
+                      error_message_style={error_message_style}
+                      key={1688574569}
+                      host_url={hostUrl}
+                      message={{ message: nowAIContent}}
+                      isSend={false}
+                      handleSendMessage={handleSendMessage}
+                  />:<ChatMessagePlaceholder bot_message_style={bot_message_style} />
+          )}
+          <div ref={lastMessage}></div>
+        </div>
+        <div
+            className="w_tagListClass"
+            style={isMobile ?
+                {
+                  display: tagList?.length > 0 ? '' : 'none',
+                  zIndex: tagList?.length > 0 ? '2' : '-1',
+                  maxWidth: 'calc(100vw - 3.2rem)',
+                  flexWrap: "nowrap",
+                  overflowX: "auto",
+                  WebkitOverflowScrolling: 'touch',
+                  scrollbarWidth: "none",
+                  overflowY: "hidden",
+                  background: 'transparent',
+                }
+                :
+                {
+              // bottom: fileList.length > 0 ? '130px' : '80px',
+              display: tagList?.length > 0 ? '' : 'none',
+              zIndex: tagList?.length > 0 ? '2' : '-1',
+            }}
+        >
+          {tagList.map((item, index) => (
+              <div
+                  key={index}
+                  className="w_tagItemBox"
+                  onClick={() => {
+                    handleSendMessage(item?.name);
+                    setFileList([]);
+                  }}
+              >
+                <div>
+                  <img
+                      style={item?.img ? {} : { display: 'none' }}
+                      src={'https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/'+ item?.img}
+                      className="w_tagImgh"
+                      alt="Image"
+                  />
+                </div>
+                <div className="w_tagItemText" style={isMobile ? {wordBreak: "keep-all"} : {}}>{item?.name}</div>
+              </div>
+          ))}
+        </div>
+        <div style={input_container_style} className="cl-input_container">
+          <div className="w_file_preview" ref={scrollContainerRef} onScroll={handleScroll}>
+            <div className="w_toLeftBox" style={{display: showLeftArrow ? 'flex' : 'none'}}>
+              <div className="w_toLeft" onClick={() => handleScrollRight('left')}>
+                <img src={toLeftPng}/>
+              </div>
+            </div>
+            <div className="w_toRightBox" style={{display: showRightArrow ? 'flex' : 'none'}}>
+              <div className="w_toRight" onClick={() => handleScrollRight('right')}>
+                <img src={toRightPng}/>
+              </div>
+            </div>
+            {fileList.map((item, index) => {
+              return (
+                  <div key={item.filePath} className="w_fileBox">
+                    {item.fileType == 'image' && (
+                        <Image
+                            height={40}
+                            width={40}
+                            src={item.fileUrl}
+                            className="w_upImg"
+                            preview={{
+                              mask: <span className="custom-mask"></span>,
+                            }}
+                        />
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'pdf' && (
+                        <img style={{width: 40, height: 40}} src={typePdfPng}/>
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'word' && (
+                        <img style={{width: 40, height: 40}} src={typeWordPng}/>
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'excel' && (
+                        <img style={{width: 40, height: 40}} src={typeExcelPng}/>
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'markdown' && (
+                        <img style={{width: 40, height: 40}} src={typeMarkdownPng}/>
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'txt' && (
+                        <img style={{width: 40, height: 40}} src={typeTextPng}/>
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'mobi' && (
+                        <img style={{width: 40, height: 40}} src={typeMobiPng}/>
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'rpub' && (
+                        <img style={{width: 40, height: 40}} src={typeRPubPng}/>
+                    )}
+                    {getFileTypeByUrl(item.file.name) == 'file' && (
+                        <img style={{width: 40, height: 40}} src={upFilePng}/>
+                    )}
+                    <div className="w_fileInfoBox">
+                      <div className="w_fileInfoFileName">{item.file.name}</div>
+                      <div className="w_fileInfoMeta">{`${item.fileType} · ${getFileSize(
+                          item.file.size,
+                      )}`}</div>
+                    </div>
+                    <div
+                        className="w_fileRemove"
+                        onClick={() => {
+                          removeFile(item, index);
+                        }}
+                    >
+                      <img src={closexPng}/>
+                    </div>
+                  </div>
+              );
+            })}
+          </div>
+          <div className="w_inputBox" style={{height: inputContainerHeight}}>
+          <textarea
+              onFocus={()=>setInputContainerHeight('120px')}
+              onBlur={()=>setInputContainerHeight('50px')}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) handleSendMessage();
+              }}
+              disabled={sendingMessage}
+              placeholder={
+                sendingMessage
+                    ? placeholder_sending || '思考中...'
+                    : placeholder || '请输入您的问题...'
+              }
+              style={{...input_style,resize:"none"}}
+              ref={inputRef}
+              className="cl-input-element"
+          />
+            {
+              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 &&
+              <Tooltip title="支持图片格式">
+                <div
+                    className="w_send_file_box"
+                    style={sendingMessage ? { cursor: 'not-allowed' } : {}}
+                    onClick={uploadFile}
+                >
+                  <img src={fileuploadPng} style={{ width: 23 }}></img>
+                </div>
+              </Tooltip>
+            }
+            <Tooltip title={sendingMessage?'点击暂停':'点击发送'}>
+            <button
+                style={{ ...(sendingMessage ? { cursor: 'pointer' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
+                onClick={() => {
+                  if(sendingMessage){
+                    const output = {
+                      message:nowAIContent,
+                      type:'text'
+                    };
+                    addMessage({
+                      message: extractMessageFromOutput(output),
+                      isSend: false,
+                      rawInfo: output.message,
+                    });
+                    abortControllerRef.current.abort('disconnect');
+                    abortControllerRef.current = new AbortController();
+                  }else{
+                    handleSendMessage()
+                  }
+                }}
+            >
+
+                  <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
+              </button>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}