yt-chat-components 0.1.0

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

@@ -0,0 +1,791 @@
+// @ts-nocheck
+import { extractMessageFromOutput } from './utils';
+import React, { useEffect, useRef, useState } from 'react';
+import { ChatMessageType, embedAppExtend } 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 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 } from 'antd';
+import { isEmpty, isFunction } from 'lodash';
+import {MoreHorizontal} from "lucide-react";
+
+
+let mediaRecorder = null; // 语音对象,用于录音
+let recognition = null; // 语音识别对象
+
+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 = [],
+}: {
+  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 };
+}) {
+  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 isStreamOutput = false;//是否流式输出（手动开关）
+  const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
+  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为流式输出内容，end为结束输出，整体输出一次）
+  const handleMessageContent = (event, data) => {
+    if (event == 'add_message' && data['sender'] == 'Machine') {
+      getHistoryList();
+    } else if (event == 'token') {
+      setNowAIContent((prevState) => prevState + data['chunk']);
+      if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
+    } else if (event == 'end') {
+      const res = {
+        data: data['result'],
+      };
+      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,
+              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,
+                });
+              });
+            });
+        }
+      }
+      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高
+  function handleClick(userMessage, callback = () => {}) {
+    let message = '';
+    if (value && value.trim() !== '') {
+      message = value;
+      setDropDownList(undefined);
+    }
+    // 有传入消息，则优先使用传入的消息
+    if (userMessage && userMessage?.trim() !== '') {
+      message = userMessage;
+    }
+
+    if (message && message.trim() !== '') {
+      addMessage({
+        message: message,
+        isSend: true,
+        rawInfo: { files: fileList.map((fileItem) => fileItem.fileUrl) },
+      });
+      setSendingMessage(true);
+      setValue('');
+      const code = userInfo['code'] ? userInfo['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(
+        embedAppExtend,
+        isStreamOutput,
+        handleMessageContent,
+        abortControllerRef.current.signal,
+        hostUrl,
+        flowId,
+        message,
+        input_type,
+        output_type,
+        sessionId,
+        output_component,
+        tweaks,
+        api_key,
+        additional_headers,
+      )
+        .then((res) => {
+          // 非流式输出
+          if(!isStreamOutput){
+            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
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 100);
+  }, [messages, open]);
+
+  /**
+   * 当获取历史记录时（sessindId变化时），清空消息，并添加历史记录
+   */
+  useEffect(() => {
+    const fetchChatHistory = async () => {
+      try {
+        const res = await getChatHistory(hostUrl, flowId, sessionId, userInfo['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();
+    };
+  }, [sessionId]);
+
+
+  return (
+    <div
+      style={{ ...chat_window_style, width: width, height: "100%" }}
+      ref={ref}
+      className="cl-window"
+    >
+      <div className="cl-header">
+        {window_title}
+        <div className="cl-header-subtitle">
+          {online ? (
+            <>
+              <div className="cl-online-message"></div>
+              {online_message}
+            </>
+          ) : (
+            <>
+              <div className="cl-offline-message"></div>
+              {offline_message}
+            </>
+          )}
+        </div>
+        {!isEmpty(dropDownList) && (
+          <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}>
+                  <div className="drop-down-item-title">“{title}”</div>
+                  <div className="drop-down-item-bottom">
+                    <div
+                      className="drop-down-item-bottom-button"
+                      onClick={() => {
+                        setDropDownList(undefined);
+                        handleClick(title);
+                      }}
+                    >
+                      去提问&nbsp;
+                      <RightOutlined style={{ height: '0.8rem', width: '0.4rem' }} />
+                    </div>
+                    <img className="drop-down-item-bottom-img" src={backgroundImg} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        &nbsp;
+      </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}
+          />
+        ))}
+        {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}
+          />:<ChatMessagePlaceholder bot_message_style={bot_message_style} />
+        )}
+        <div ref={lastMessage}></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">
+          <textarea
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) handleClick();
+            }}
+            disabled={sendingMessage}
+            placeholder={
+              sendingMessage
+                ? placeholder_sending || '思考中...'
+                : placeholder || '请输入您的问题...'
+            }
+            style={{...input_style,resize:"none"}}
+            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>
+          {/*<Tooltip title="支持PDF / Word / Excel / Markdown / txt / mobi / rpub">*/}
+          <Tooltip title="支持图片格式">
+            <div
+              className="w_send_file_box"
+              style={sendingMessage ? { cursor: 'not-allowed' } : {}}
+              onClick={uploadFile}
+            >
+              <img src={fileuploadPng} style={{ width: 23 }}></img>
+            </div>
+          </Tooltip>
+          <button
+            disabled={sendingMessage}
+            style={{ ...(sendingMessage ? { cursor: 'not-allowed' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
+            onClick={() => {
+              handleClick('');
+            }}
+          >
+            <img src={sendmessagePng} style={{ width: 55 }}></img>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}