yt-chat-components 0.9.9 → 1.0.0

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { extractMessageFromOutput } from './utils';
 import React, { useEffect, useRef, useState } from 'react';
-import { ChatMessageType, embedAppExtend } from './types/chatWidget';
+import {ChatMessageType, embedAppExtend, InputValueType, MessageType} from './types/chatWidget';
 import ChatMessage from './chatMessage';
 import { fetchUploadFile, getChatHistory, sendMessage } from './controllers';
 import ChatMessagePlaceholder from './chatPlaceholder/index.tsx';
@@ -30,6 +30,7 @@ import btn_answer from '../../../assets/aicenter/btn_answer.png';
 
 let mediaRecorder = null; // 语音对象,用于录音
 let recognition = null; // 语音识别对象
+const delayMessageList = []
 
 export default function ChatWindow({
   tags,
@@ -70,9 +71,12 @@ export default function ChatWindow({
   setDropDownList = () => {},
   dropDownList = [],
   baseConfig = {},
+  isShowVoiceButton = true,
   isShowUploadButton,
   dropManUrl = '',
-  modalWidth
+  modalWidth,
+  isMobile = false,
+  isShowChatHeader = true,
 }: {
   tags: [];
   getHistoryList: Function;
@@ -110,9 +114,12 @@ export default function ChatWindow({
   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);
@@ -135,6 +142,7 @@ export default function ChatWindow({
   const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
   const inputContainerRef = useRef(null);
   const [inputContainerHeight,setInputContainerHeight] = useState('50px')
+  const contentRef = useRef(nowAIContent);
 
   let voiceChunks = []; // 临时存储录制的语音片段
   // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
@@ -153,18 +161,61 @@ export default function ChatWindow({
     }
   };
 
+  // 处理延时队列，因为后端返回的是 token token form token token.....会导致form渲染在token前面，所以用这个方式
+  // 当处理token的时候，form的信息放到这里，然后使用 delayMessageTimer 处理这个延时队列
+  // 处理逻辑是：收到 token 的时候，重置timer，由于timer一直被重置所以不会处理 delayMessageList，直到 1.5内没有新 token 才会处理延时队列
+  const handleDelayMessage = () => {
+    if (delayMessageList.length > 0) {
+      const message = delayMessageList.shift();
+      addMessage(message);
+      handleDelayMessage();
+    }
+  }
+
+  const delayMessageTimer = (whenTimerExistsDoNothing: boolean = false) => {
+    if(window.delayMessageTimer)
+      if(whenTimerExistsDoNothing){
+        return
+      }
+      clearTimeout(window.delayMessageTimer);
+      window.delayMessageTimer = null
+    if(!window.delayMessageTimer){
+      window.delayMessageTimer = setTimeout(handleDelayMessage, 1500);
+    }
+  }
+
   // 流式输出消息，实时显示（token为流式输出内容，end为结束输出，整体输出一次）
   const handleMessageContent = (event, data) => {
+    // console.error("event, data",event, data)
     if (event == 'add_message' && data['sender'] == 'Machine') {
       getHistoryList();
-    } else if (event == 'token') {
-      setNowAIContent((prevState) => prevState + data['chunk']);
+    }
+    else if (event == 'token') {
+      setNowAIContent((prevState) => {
+        const newValue = prevState + data['chunk'];
+        contentRef.current = newValue
+        return newValue
+      });
       if (lastMessage.current) lastMessage.current.scrollIntoView({ behavior: 'smooth' });
-    } else if (event == 'end') {
+
+      // 处理延时队列
+      delayMessageTimer();
+    }
+    else if (event == 'form') {
+      // 这里添加到延时队列，直接处理可能会把form渲染到token上面
+      delayMessageList.push({
+        message: "",
+        isSend: false,
+        rawInfo: data,
+        type: MessageType.form
+      })
+      delayMessageTimer(true)
+    }
+    else if (event == 'end') {
       const res = {
         data: data['result'],
       };
-      if (
+      if (false&&
         res.data &&
         res.data.outputs &&
         Object.keys(res.data.outputs).length > 0 &&
@@ -217,6 +268,15 @@ export default function ChatWindow({
             });
         }
       }
+      const output = {
+        message:contentRef.current,
+        type:'text'
+      };
+      addMessage({
+        message: extractMessageFromOutput(output),
+        isSend: false,
+        rawInfo: output.message,
+      });
       setSendingMessage(false);
     }
   };
@@ -276,7 +336,7 @@ export default function ChatWindow({
   };
 
   // 点击send发送按钮，进行消息提交发送逻辑；userMessage为传入的文本消息，优先级比input中value高
-  function handleClick(userMessage, callback = () => {}) {
+  const handleSendMessage = (userMessage, callback = () => {}, input_value_type: string = InputValueType.text)=>  {
     let message = '';
     if (value && value.trim() !== '') {
       message = value;
@@ -288,13 +348,16 @@ export default function ChatWindow({
     }
 
     if (message && message.trim() !== '') {
-      addMessage({
-        message: message,
-        isSend: true,
-        rawInfo: { files: fileList.map((fileItem) => fileItem.fileUrl) },
-      });
-      setSendingMessage(true);
-      setValue('');
+      if(input_value_type === InputValueType.text){
+        addMessage({
+          message: message,
+          isSend: true,
+          rawInfo: { files: fileList.map((fileItem) => fileItem.fileUrl) },
+        });
+        setValue('');
+        setSendingMessage(true);
+      }
+
       let userInfoClone = userInfo;
       if(isEmpty(userInfoClone.code)) {
         userInfoClone.code = sessionId;
@@ -322,6 +385,7 @@ export default function ChatWindow({
       setFileList([]);
       handleScroll();
       sendMessage(
+        input_value_type,
         embedAppExtend,
         isStream,
         handleMessageContent,
@@ -635,110 +699,158 @@ export default function ChatWindow({
     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">
-          <div className="header-title">
+      <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'} : {}}>
             {
-              isTitleSideIcon ?
-                  <img className="p_logoImg" style={{width: logoWidth, height: 'auto', marginRight: 10}} src={agentUrl}/> :
-                  <span className="diamond"/>
+              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>
+              )
             }
-            {window_title}
+            <div className="cl-header-subtitle"/>
+            {renderTipsInfo()}
           </div>
-          <div className="cl-header-subtitle"/>
-          {!isEmpty(dropDownList) && (
-              isEmpty(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}>
-                            <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);
-                                    handleClick(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 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);
-                                  handleClick(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);
-                                      handleClick(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>
-          )}
-        </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}
+          <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?
@@ -750,6 +862,7 @@ export default function ChatWindow({
                       host_url={hostUrl}
                       message={{ message: nowAIContent}}
                       isSend={false}
+                      handleSendMessage={handleSendMessage}
                   />:<ChatMessagePlaceholder bot_message_style={bot_message_style} />
           )}
           <div ref={lastMessage}></div>
@@ -759,6 +872,7 @@ export default function ChatWindow({
             style={{
               // bottom: fileList.length > 0 ? '130px' : '80px',
               display: tagList?.length > 0 ? '' : 'none',
+              zIndex: tagList?.length > 0 ? '2' : '-1',
             }}
         >
           {tagList.map((item, index) => (
@@ -766,7 +880,7 @@ export default function ChatWindow({
                   key={index}
                   className="w_tagItemBox"
                   onClick={() => {
-                    handleClick(item?.name);
+                    handleSendMessage(item?.name);
                     setFileList([]);
                   }}
               >
@@ -857,7 +971,7 @@ export default function ChatWindow({
               value={value}
               onChange={(e) => setValue(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) handleClick();
+                if (e.key === 'Enter' && !e.shiftKey) handleSendMessage();
               }}
               disabled={sendingMessage}
               placeholder={
@@ -869,15 +983,18 @@ export default function ChatWindow({
               ref={inputRef}
               className="cl-input-element"
           />
-            <Tooltip title={recordState ? "点击结束录音" : "点击开始录音"}>
-              <div
-                  className="w_send_voice_box"
-                  style={sendingMessage ? { cursor: 'not-allowed' } : {}}
-                  onClick={startRecord}
-              >
-                <img src={recordState ? soundWavePng : luyinPng} style={{ width: 23 }} className={recordState ? "w_recordIng" : ''}></img>
-              </div>
-            </Tooltip>
+            {
+              isShowVoiceButton &&
+                <Tooltip title={recordState ? "点击结束录音" : "点击开始录音"}>
+                  <div
+                      className="w_send_voice_box"
+                      style={sendingMessage ? { cursor: 'not-allowed' } : {}}
+                      onClick={startRecord}
+                  >
+                    <img src={recordState ? soundWavePng : luyinPng} style={{ width: 23 }} className={recordState ? "w_recordIng" : ''}></img>
+                  </div>
+                </Tooltip>
+            }
             {/*<Tooltip title="支持PDF / Word / Excel / Markdown / txt / mobi / rpub">*/}
             {
               isShowUploadButton &&
@@ -908,13 +1025,13 @@ export default function ChatWindow({
                     abortControllerRef.current.abort('disconnect');
                     abortControllerRef.current = new AbortController();
                   }else{
-
+                    handleSendMessage()
                   }
                 }}
             >
 
-                <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
-            </button>
+                  <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
+              </button>
             </Tooltip>
           </div>
         </div>

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

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

package/src/YtChatView/chatWidget/index.tsx

@@ -37,9 +37,12 @@ export default function ChatWidget({
   setDropDownList,
   dropDownList,
   baseConfig,
+  isShowVoiceButton,
   isShowUploadButton,
   dropManUrl,
-  modalWidth
+  modalWidth,
+  isMobile = false,
+  isShowChatHeader = true,
 }: {
   tags: [];
   getHistoryList: Function;
@@ -73,9 +76,12 @@ export default function ChatWidget({
   session_id?: string;
   start_open?: boolean;
   baseConfig:object;
+  isShowVoiceButton:boolean;
   isShowUploadButton:boolean;
   dropManUrl: string;
   modalWidth: number;
+  isMobile: boolean;
+  isShowChatHeader: boolean;
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -476,6 +482,81 @@ video {
   border-radius: 3px;
 }
 
+.cl-tips-wrapper {
+  width:100%;
+  display:flex;
+  margin-top:0.81rem;
+  flex-direction: row;
+  position: relative;
+  padding-bottom: 100px;
+  z-index: 1;
+}
+
+.cl-tips-wrapper .drop-man-img {
+    width: 35%;
+}
+.cl-tips-wrapper .drop-down-title {
+    margin-top: 45px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 18px;
+    color: #333333;
+    line-height: 28px;
+    text-align: left;
+    font-style: normal;
+    > div {
+      margin-top: 15px;
+      font-size: 12px;
+      color: # 999;
+    }
+}
+
+.cl-tips-wrapper .cl-drop-down-mobile {
+  position: absolute;
+  width:100%;
+  top: 120px;
+}
+
+.cl-tips-wrapper .drop-down-list-mobile {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+  width:100%;
+  align-items: end;
+}
+
+.drop-down-item-card-mobile {
+  width: 85%;
+  height: 3.4rem; 
+  padding: 0 0.6rem 0;
+  border-radius:20px;
+  border-top-left-radius: 0;
+  background: url("https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/drop-down-item-card-bg.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin-bottom: 20px;
+
+  display:flex;
+  align-items: center;
+}
+.drop-down-item-title-mobile {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 13px;
+  color: #000000;
+  line-height: 17px;
+  text-align: left;
+  font-style: normal;
+  width: 100%;
+  margin-bottom:0 !important;
+}
+
+.drop-down-item-bottom-img-mobile{
+  width:3.5rem;
+  height:2.5rem;
+}
+
 .cl-drop-man{
   width:100%;
   display:flex;
@@ -2493,9 +2574,12 @@ input::-ms-input-placeholder { /* Microsoft Edge */
         setDropDownList={setDropDownList}
         dropDownList={dropDownList}
         baseConfig={baseConfig}
+        isShowVoiceButton={isShowVoiceButton}
         isShowUploadButton={isShowUploadButton}
         dropManUrl={dropManUrl}
         modalWidth={modalWidth}
+        isMobile={isMobile}
+        isShowChatHeader={isShowChatHeader}
       />
     </div>
   );