yt-chat-components 0.7.0 → 0.9.0

package/package.json

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

package/public/index.html

@@ -19,14 +19,16 @@
         is-show-side-right=false
         is-show-side-left=false
         modal-index="9999999999"
-        modal-width="1400"
+        modal-width="1200"
         dialog-index="999999999"
         agent-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/ccit/user/xc//image/ebfaf4da-c1d9-46fb-a0b1-f159e95cffc2_AI招生咨询小助手.png"
         agent-name="医专智能助手"
         logo-width="42px"
         logo-font-size="26px"
         logo-position="fixed"
-        is-title-side-icon=true
+        is-title-side-icon=false
+        is-show-upload-button=true
+        drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"
 />
 </body>
 
@@ -46,6 +48,8 @@
 <!--        logo-width="42px"-->
 <!--        logo-font-size="26px"-->
 <!--        is-title-side-icon=true-->
+<!--        is-show-upload-button=false-->
+<!--        drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"-->
 <!--/>-->
 <!--</body>-->
 
@@ -70,7 +74,9 @@
 <!--        logo-width="42px"-->
 <!--        logo-font-size="26px"-->
 <!--        logo-position="fixed"-->
-<!--        is-title-side-icon=true-->
+<!--        is-title-side-icon=false-->
+<!--        is-show-upload-button=false-->
+<!--        drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"-->
 <!--/>-->
 <!--</body>-->
 </html>

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

@@ -10,6 +10,7 @@ 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';
@@ -69,6 +70,8 @@ export default function ChatWindow({
   setDropDownList = () => {},
   dropDownList = [],
   baseConfig = {},
+  isShowUploadButton,
+  dropManUrl = '',
 }: {
   tags: [];
   getHistoryList: Function;
@@ -106,6 +109,8 @@ export default function ChatWindow({
   sessionId: string;
   additional_headers?: { [key: string]: string };
   baseConfig: object;
+  isShowUploadButton: boolean;
+  dropManUrl: string;
 }) {
   const [value, setValue] = useState<string>('');
   const ref = useRef<HTMLDivElement>(null);
@@ -126,6 +131,8 @@ export default function ChatWindow({
   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')
 
   let voiceChunks = []; // 临时存储录制的语音片段
   // 滚动事件处理，选择文件时，文件内容超出显示框时，显示左右箭头
@@ -627,35 +634,69 @@ export default function ChatWindow({
           </div>
           <div className="cl-header-subtitle"/>
           {!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}>
-                          <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' }} />*/}
+              isEmpty(dropManUrl) ?
+                  <div className="cl-drop-down">
+                    <div className="drop-down-title">Hi，欢迎使用{window_title}，您可以这样问我:</div>
+                    <div className="drop-down-list">
+                      {dropDownList.slice(0,3).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>
-                          <img className="drop-down-item-bottom-img" src={backgroundImg} />
-                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  :
+                  <div className="cl-drop-man">
+                    <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.slice(0,4).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>
+                    </div>
+                  </div>
           )}
         </div>
         <div
@@ -717,14 +758,14 @@ export default function ChatWindow({
         </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_toLeftBox" style={{display: showLeftArrow ? 'flex' : 'none'}}>
               <div className="w_toLeft" onClick={() => handleScrollRight('left')}>
-                <img src={toLeftPng} />
+                <img src={toLeftPng}/>
               </div>
             </div>
-            <div className="w_toRightBox" style={{ display: showRightArrow ? 'flex' : 'none' }}>
+            <div className="w_toRightBox" style={{display: showRightArrow ? 'flex' : 'none'}}>
               <div className="w_toRight" onClick={() => handleScrollRight('right')}>
-                <img src={toRightPng} />
+                <img src={toRightPng}/>
               </div>
             </div>
             {fileList.map((item, index) => {
@@ -742,28 +783,28 @@ export default function ChatWindow({
                         />
                     )}
                     {getFileTypeByUrl(item.file.name) == 'pdf' && (
-                        <img style={{ width: 40, height: 40 }} src={typePdfPng} />
+                        <img style={{width: 40, height: 40}} src={typePdfPng}/>
                     )}
                     {getFileTypeByUrl(item.file.name) == 'word' && (
-                        <img style={{ width: 40, height: 40 }} src={typeWordPng} />
+                        <img style={{width: 40, height: 40}} src={typeWordPng}/>
                     )}
                     {getFileTypeByUrl(item.file.name) == 'excel' && (
-                        <img style={{ width: 40, height: 40 }} src={typeExcelPng} />
+                        <img style={{width: 40, height: 40}} src={typeExcelPng}/>
                     )}
                     {getFileTypeByUrl(item.file.name) == 'markdown' && (
-                        <img style={{ width: 40, height: 40 }} src={typeMarkdownPng} />
+                        <img style={{width: 40, height: 40}} src={typeMarkdownPng}/>
                     )}
                     {getFileTypeByUrl(item.file.name) == 'txt' && (
-                        <img style={{ width: 40, height: 40 }} src={typeTextPng} />
+                        <img style={{width: 40, height: 40}} src={typeTextPng}/>
                     )}
                     {getFileTypeByUrl(item.file.name) == 'mobi' && (
-                        <img style={{ width: 40, height: 40 }} src={typeMobiPng} />
+                        <img style={{width: 40, height: 40}} src={typeMobiPng}/>
                     )}
                     {getFileTypeByUrl(item.file.name) == 'rpub' && (
-                        <img style={{ width: 40, height: 40 }} src={typeRPubPng} />
+                        <img style={{width: 40, height: 40}} src={typeRPubPng}/>
                     )}
                     {getFileTypeByUrl(item.file.name) == 'file' && (
-                        <img style={{ width: 40, height: 40 }} src={upFilePng} />
+                        <img style={{width: 40, height: 40}} src={upFilePng}/>
                     )}
                     <div className="w_fileInfoBox">
                       <div className="w_fileInfoFileName">{item.file.name}</div>
@@ -777,14 +818,16 @@ export default function ChatWindow({
                           removeFile(item, index);
                         }}
                     >
-                      <img src={closexPng} />
+                      <img src={closexPng}/>
                     </div>
                   </div>
               );
             })}
           </div>
-          <div className="w_inputBox">
+          <div className="w_inputBox" style={{height: inputContainerHeight}}>
           <textarea
+              onFocus={()=>setInputContainerHeight('120px')}
+              onBlur={()=>setInputContainerHeight('50px')}
               value={value}
               onChange={(e) => setValue(e.target.value)}
               onKeyDown={(e) => {
@@ -810,24 +853,43 @@ export default function ChatWindow({
               </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>
+            {
+              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
-                disabled={sendingMessage}
-                style={{ ...(sendingMessage ? { cursor: 'not-allowed' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
+                style={{ ...(sendingMessage ? { cursor: 'pointer' } : {}), padding: '0 13px', background:'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}
                 onClick={() => {
-                  handleClick('');
+                  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{
+
+                  }
                 }}
             >
-              <img src={sendmessagePng} style={{ width: 55 }}></img>
+
+                <img src={sendingMessage ? stopmessagePng : sendmessagePng}  style={{width: 55}}/>
             </button>
+            </Tooltip>
           </div>
         </div>
       </div>

package/src/YtChatView/chatWidget/index.tsx

@@ -36,7 +36,9 @@ export default function ChatWidget({
   start_open = false,
   setDropDownList,
   dropDownList,
-  baseConfig
+  baseConfig,
+  isShowUploadButton,
+  dropManUrl
 }: {
   tags: [];
   getHistoryList: Function;
@@ -70,6 +72,8 @@ export default function ChatWidget({
   session_id?: string;
   start_open?: boolean;
   baseConfig:object;
+  isShowUploadButton:boolean;
+  dropManUrl: string;
 }) {
   const [open, setOpen] = useState(start_open);
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
@@ -347,7 +351,7 @@ video {
 
 .cl-window {
   border-radius: 1rem;
-  padding-top: 2.3rem;
+  padding-top: 1.8rem;
   padding-bottom: 1.2rem;
 }
 
@@ -470,10 +474,43 @@ video {
   border-radius: 3px;
 }
 
+.cl-drop-man{
+  width:100%;
+  display:flex;
+}
+.cl-drop-man .drop-man-img{
+  height:340px;
+  margin-right: 4rem;
+  margin-left: 3rem;
+}
+
+.cl-drop-man .cl-drop-down .drop-down-item-card .drop-down-item-bottom-img{
+  height:3.4rem;
+  margin-right:20px;
+}
+
+.cl-drop-man .drop-down-list{
+  width:auto;
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+}
+
+.cl-drop-man .cl-drop-down .drop-down-item-card{
+  width:48%;
+}
+
+.cl-drop-man .cl-drop-down{
+  flex:1;
+  position:unset;
+  border-bottom-left-radius: 0;
+}
+
+
 .cl-drop-down {
   background: #FFFFFF;
   border-radius: 10px;
-  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
   z-index: 1;
   position: absolute;
   width: 100%;
@@ -633,7 +670,7 @@ margin-bottom:1rem;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-weight: 300;
-  background-color: #00000000;
+  background-color: #FFFFFF;
   color: rgb(17 24 39);
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
@@ -646,7 +683,6 @@ margin-bottom:1rem;
 .cl-input-element:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
-  height:120px;
 }
 
 .cl-input-element:focus::placeholder {
@@ -2252,7 +2288,7 @@ input::-ms-input-placeholder { /* Microsoft Edge */
     justify-content: center;
     width: fit-content;
     height: 30px;
-    background: #F9FAFB;
+    background: #00000000;
     border-radius: 15px;
     border: 1px solid #4B4FFF;
     cursor: pointer;
@@ -2295,6 +2331,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
   align-items: center;
   box-shadow: 0px 2px 15px 0px rgba(0,48,187,0.1);
   border-radius: 30px;
+  background: #FFFFFF;
+  transition: height 0.2s ease;
   textarea {
     resize: none;
     min-height: 48px;
@@ -2303,7 +2341,6 @@ input::-ms-input-placeholder { /* Microsoft Edge */
     box-shadow: none !important;
     color: #333;
     outline: 0;
-    // padding: 5px 10px 0 10px;
     width: 100%;
     
     box-sizing: border-box;
@@ -2384,6 +2421,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
         setDropDownList={setDropDownList}
         dropDownList={dropDownList}
         baseConfig={baseConfig}
+        isShowUploadButton={isShowUploadButton}
+        dropManUrl={dropManUrl}
       />
     </div>
   );

package/src/YtChatView/logoBtn/index.jsx

@@ -33,7 +33,9 @@ export class LogoBtn extends React.Component {
         logoWidth,
         logoFontSize,
         logoPosition = 'absolute',
-        isTitleSideIcon
+        isTitleSideIcon,
+        isShowUploadButton,
+        dropManUrl
       } = this.props;
     const iconConfig = {
       width: `${width || 100}px`,
@@ -87,6 +89,8 @@ export class LogoBtn extends React.Component {
                   logoFontSize={logoFontSize}
                   isTitleSideIcon={isTitleSideIcon}
                   modalIndex={modalIndex}
+                  isShowUploadButton={isShowUploadButton}
+                  dropManUrl={dropManUrl}
               />
             </Modal>
           </div>

package/src/YtChatView/logoSplitBtn/index.jsx

@@ -35,6 +35,8 @@ export class LogoSplitBtn extends React.Component {
             logoFontSize = '26px',
             logoPosition = 'absolute',
             isTitleSideIcon,
+            isShowUploadButton,
+            dropManUrl
         } = this.props;
     const iconConfig = {
       width: `${width || 100}px`,
@@ -89,6 +91,8 @@ export class LogoSplitBtn extends React.Component {
                   logoFontSize={logoFontSize}
                   isTitleSideIcon={isTitleSideIcon}
                   modalIndex={modalIndex}
+                  isShowUploadButton={isShowUploadButton}
+                  dropManUrl={dropManUrl}
               />
             </Modal>
           </div>

package/src/YtChatView/previewDialog/index.jsx

@@ -37,7 +37,7 @@ const style=`
   align-items: center;
   width: 300px;
   // height: 100%;
-  padding: 1.5rem 1.6rem 2rem 2.4rem;
+  padding: 1.7rem 1.6rem 1.7rem 1.6rem;
   
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
@@ -160,7 +160,7 @@ const style=`
   width:300px;
   display:flex;
   flex-direction:column;
-  padding:2.5rem 1.6rem 1.8rem 1.6rem
+  padding:2rem 1.6rem 1.8rem 1.6rem
 }
 .rightInnerContainer{
   height:calc(100% - 80px);
@@ -190,13 +190,15 @@ const style=`
   min-height:40%;
 }
 .p_toolRightToRight .rightSkillContainer .rightSkillList{
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
 }
 .p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem{
   text-align: center;
   cursor:pointer;
+  width:30%;
 }
 .p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem img{
   width: 40px;
@@ -209,11 +211,12 @@ const style=`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width:80px;
+  // width:80px;
   color: #333333;
 }
 .p_toolRightToRight .rightKnowledgeTitle{
-  margin-bottom:1.4rem;
+  nargin-top: 2.2rem;
+  margin-bottom: 1.4rem;
   font-size:18px;
   font-weight:500;
   display:flex;
@@ -436,10 +439,12 @@ export class ToolDialog extends React.Component {
       logoWidth = '42px',
       logoFontSize = '26px',
       isTitleSideIcon = false,//  是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
-      modalIndex
+      modalIndex,
+      isShowUploadButton,
+      dropManUrl
     } = this.props;
     const { sceneInfo, currentFlow = {} } = this.state;
-    const { flows=[], name: sceneName } = sceneInfo;
+    const { flows=[], name: sceneName, } = sceneInfo;
     return (
         <div style={boxStyle}>
           <style dangerouslySetInnerHTML={{ __html: style }}></style>
@@ -508,6 +513,8 @@ export class ToolDialog extends React.Component {
                   setDropDownList={(list) => this.setState({ dropDownList: list })}
                   dropDownList={this.state.dropDownList}
                   baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
+                  isShowUploadButton={isShowUploadButton}
+                  dropManUrl={dropManUrl}
               />
             </div>
             {