yt-chat-components 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "build/static/js/bundle.min.js",
   "module": "build/static/js/bundle.min.js",
   "types": "build/static/js/index.d.ts",

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

@@ -167,6 +167,7 @@ export default function ChatWindow({
   const handleDelayMessage = () => {
     if (delayMessageList.length > 0) {
       const message = delayMessageList.shift();
+      console.log("-- add = delay")
       addMessage(message);
       handleDelayMessage();
     }
@@ -214,7 +215,7 @@ export default function ChatWindow({
       const res = {
         data: data['result'],
       };
-      if (false&&
+      if (false &&
         res.data &&
         res.data.outputs &&
         Object.keys(res.data.outputs).length > 0 &&
@@ -267,15 +268,19 @@ export default function ChatWindow({
             });
         }
       }
-      const output = {
-        message:contentRef.current,
-        type:'text'
-      };
-      addMessage({
-        message: extractMessageFromOutput(output),
-        isSend: false,
-        rawInfo: output.message,
-      });
+      // 使用完后清理 contentRef
+      if (contentRef.current != null) {
+        const output = {
+          message:contentRef.current,
+          type:'text'
+        };
+        addMessage({
+          message: extractMessageFromOutput(output),
+          isSend: false,
+          rawInfo: output.message,
+        });
+        contentRef.current = null
+      }
       setSendingMessage(false);
     }
   };
@@ -809,105 +814,59 @@ export default function ChatWindow({
     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>
+  const renderInputArea = () => {
+    let isRender = messages.length === 0
+    if(messages.length > 0){
+      isRender = messages[messages.length - 1].type !== MessageType.form
+    }
+
+    if(!isRender){
+      return <></>
+    }
+
+    return (
+      <>
         <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',
-                }
-                :
-                {
+          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>
+        {
+          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}>
@@ -921,20 +880,23 @@ export default function ChatWindow({
                 <img src={toRightPng}/>
               </div>
             </div>
-            {fileList.map((item, index) => {
-              return (
+            {
+              fileList.map((item, index) => {
+                return (
                   <div key={item.filePath} className="w_fileBox">
-                    {item.fileType == 'image' && (
+                    {
+                      item.fileType == 'image' && (
                         <Image
-                            height={40}
-                            width={40}
-                            src={item.fileUrl}
-                            className="w_upImg"
-                            preview={{
-                              mask: <span className="custom-mask"></span>,
-                            }}
+                          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}/>
                     )}
@@ -974,11 +936,12 @@ export default function ChatWindow({
                       <img src={closexPng}/>
                     </div>
                   </div>
-              );
-            })}
+                );
+              })
+            }
           </div>
           <div className="w_inputBox" style={{height: inputContainerHeight}}>
-          <textarea
+            <textarea
               onFocus={()=>setInputContainerHeight('120px')}
               onBlur={()=>setInputContainerHeight('50px')}
               value={value}
@@ -995,14 +958,14 @@ export default function ChatWindow({
               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}
+                    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>
@@ -1013,16 +976,16 @@ export default function ChatWindow({
               isShowUploadButton &&
               <Tooltip title="支持图片格式">
                 <div
-                    className="w_send_file_box"
-                    style={sendingMessage ? { cursor: 'not-allowed' } : {}}
-                    onClick={uploadFile}
+                  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
+              <button
                 style={{ ...(sendingMessage ? { cursor: 'pointer' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
                 onClick={() => {
                   if(sendingMessage){
@@ -1041,13 +1004,80 @@ export default function ChatWindow({
                     handleSendMessage()
                   }
                 }}
-            >
-
-                  <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
+              >
+                <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
               </button>
             </Tooltip>
           </div>
         </div>
+      </>
+    )
+  }
+  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>
+          {
+            renderInputArea()
+          }
       </div>
     </div>
   );