yt-chat-components 1.4.8 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-chat-components",
-  "version": "1.4.8",
+  "version": "1.5.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

@@ -124,6 +124,7 @@
         is-show-upload-button=false
         drop-man-url="https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_man01.png"
         banner-map='{"a":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png","b":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png","c":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/banner.png"}'
+        asset-map='{"sendMessageUrl":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/sendMessage.png","stopMessageUrl":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/stopMessage.png","speakUrl":"https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/school/bcyz/user/ai/speak.png"}'
 />
 </body>
 </html>

package/src/YtChatView/chatWidget/chatWindow/index.module.css

@@ -178,10 +178,11 @@
  */
 
 .w_send_voice_box {
-  height: 23px;
+  height: 100%;
+  align-items: end;
+  padding-bottom: 16px;
   display: flex;
   background: transparent;
-  align-items: center;
   justify-content: center;
   border-radius: 24px;
   font-size: 12px;

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

@@ -158,7 +158,7 @@ export default function ChatWindow({
   const isStream = true;//是否流式输出（手动开关）
   const [recordState, setRecordState] = useState(false); // 录音状态。true为正在录音，false为停止录音
   const [tagList, setTagList] = useState([]); // 问题标签列表
-  const {isTitleSideIcon, logoWidth, agentUrl} = baseConfig;
+  const {isTitleSideIcon, logoWidth, agentUrl, stopMessageUrl, sendMessageUrl, speakUrl} = baseConfig;
   const [inputContainerHeight, setInputContainerHeight] = useState('120px')
   let content_id: string = null
   let content_ns: string = null
@@ -1219,7 +1219,7 @@ export default function ChatWindow({
                   style={receivingMessage ? {cursor: 'not-allowed'} : {}}
                   onClick={startRecord}
               >
-                <img src={recordState ? soundWavePng : luyinPng} style={{width: 23}}
+                <img src={recordState ? soundWavePng : (speakUrl || luyinPng)} style={{width: 35}}
                      className={recordState ? "w_recordIng" : ''}></img>
               </div>
             </Tooltip>
@@ -1252,10 +1252,11 @@ export default function ChatWindow({
           <button
               style={{
                 ...(receivingMessage ? {cursor: 'pointer'} : {}),
-                padding: '0 13px',
+                height:'100%',
+                padding: '0 13px 16px',
                 background: 'transparent',
                 display: 'flex',
-                alignItems: 'center',
+                alignItems: 'end',
                 justifyContent: 'center'
               }}
               onClick={() => {
@@ -1273,7 +1274,10 @@ export default function ChatWindow({
                 }
               }}
           >
-            <img src={receivingMessage ? stopmessagePng : sendmessagePng} style={{width: 55}}/>
+            <img
+                src={receivingMessage ? (stopMessageUrl || stopmessagePng) : (sendMessageUrl || sendmessagePng)}
+                style={{width: 35}}
+            />
           </button>
         </Tooltip>
       </div>

package/src/YtChatView/chatWidget/style.js

@@ -737,7 +737,7 @@ margin-bottom:1rem;
 }
     
 .cl-input-element::placeholder {
-  line-height:45px;
+  // line-height:45px;
 }
 
 .cl-input-element:focus {
@@ -2441,10 +2441,11 @@ export const yt_style = `
   }
   
 .w_send_voice_box {
-  height: 23px;
+  height: 100%;
+  align-items: end;
+  padding-bottom: 16px;
   display: flex;
   background: transparent;
-  align-items: center;
   justify-content: center;
   border-radius: 24px;
   font-size: 12px;

package/src/YtChatView/previewDialogV2/index.jsx

@@ -16,7 +16,7 @@ const commentSvg = ()=> (
          p-id="3118" width="24" height="20">
       <path
           d="M806.9 155.2H217.2c-64 0-116.1 55.6-116.1 124v380c0 68.4 52.1 124 116.1 124h101.3l-5.9 101.6c-0.5 9.4 4.5 18.3 12.8 22.6 3.5 1.8 7.3 2.8 11.2 2.8 5.2 0 10.4-1.7 14.7-5.1l156.8-122h298.7c64 0 116.1-55.6 116.1-124v-380c0.1-68.3-52-123.9-116-123.9zM303 528.7c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.8 60-60 60z m209 1c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.8 60-60 60z m209-1c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.8 60-60 60z"
-          p-id="3119" fill="#bfbfbf"></path>
+          p-id="3119"></path>
     </svg>
 )
 const CommentIcon = (props) => (
@@ -43,6 +43,7 @@ const style = `
   border-radius:8px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 }
 .p_toolDialog .p_sign{
   width: calc(100vw - 140px);
@@ -51,9 +52,9 @@ const style = `
 }
 
 .dialog_box{
-  margin: 24px auto 0;
+  margin: 1.5rem auto 0;
   width: calc(100vw - 140px);
-  height: calc(100vh - 200px);
+  height: calc(100vh - 192px);
   background: #fff;
   border-radius: 15px;
   display: flex;
@@ -100,8 +101,8 @@ const style = `
 
 .p_toolDialog .p_toolLeft .p_historyDialog {
   user-select: none;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 24px;
+  margin-bottom: 24px;
   border-radius: 10px;
   flex: 1;
   width: 100%;
@@ -169,25 +170,26 @@ const style = `
 .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem {
   padding: 10px 16px;
   padding-left: 0;
-  margin-bottom:4px;
+  
 }
 
 .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem:hover{
   background: #F5F5F5;
   border-radius: 9px;
+  color: #1552FF
   }
   
   .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem:hover .p_historyName{
-   color: #1552FF
+   
   }
   
 .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_activeItem{
-  background: #F5F5F5;
+  background: #1974FF !important;
   border-radius: 9px;
+  color:#FFFFFF !important;
   }
 
 .p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName {
-  color: #333333;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -270,6 +272,11 @@ const style = `
 .p_newDialog .p_newDialogText {
   margin-left: 6px;
 }
+.p_footer{
+ text-align: center;
+ margin-bottom: 1.5rem;
+ margin-top: 1.5rem;
+ }
 `
 
 const defaultList = [
@@ -412,6 +419,7 @@ export class ToolDialogV2 extends React.Component {
       logoWidth = '42px',
       logoFontSize = '26px',
       isTitleSideIcon = false,//  是否将左侧历史顶部icon移到中间顶部左侧蓝点位置
+      assetMap,
       modalIndex,
       isShowUploadButton = false,
       dropManUrl,
@@ -427,7 +435,7 @@ export class ToolDialogV2 extends React.Component {
           <div className="p_toolDialog">
             {/*对话上边的学校标志，定位到左上角header上端*/}
             <div className={'p_sign'} >
-              <img src={signUrl} style={{ width: 600, marginTop: '50px', }}/>
+              <img src={signUrl} style={{ width: 600, marginTop: '1.5rem', }}/>
             </div>
             <div className={"dialog_box"}>
               <div className="p_toolLogo">
@@ -472,7 +480,10 @@ export class ToolDialogV2 extends React.Component {
                                     <div
                                         className={`p_historyName ${item.session_id === this.state.sessionId ? 'p_activeHistoryName' : ''}`}
                                     >
-                                      <CommentIcon style={{marginRight:'8px'}}/>
+                                      <CommentIcon style={{
+                                        marginRight: '8px',
+                                        fill: item.session_id === this.state.sessionId ? '#FFFFFF' : '#bfbfbf'
+                                      }}/>
                                       <span>{item.text}</span>
                                     </div>
                                   </div>
@@ -501,7 +512,7 @@ export class ToolDialogV2 extends React.Component {
                       getHistoryList={this.getHistoryList}
                       setDropDownList={(list) => this.setState({ dropDownList: list })}
                       dropDownList={this.state.dropDownList}
-                      baseConfig={{ isTitleSideIcon, logoWidth, agentUrl }}
+                      baseConfig={{ isTitleSideIcon, logoWidth, agentUrl, ...assetMap }}
                       isShowUploadButton={isShowUploadButton}
                       dropManUrl={currentFlow.character}
                       modalWidth={modalWidth}
@@ -537,7 +548,7 @@ export class ToolDialogV2 extends React.Component {
                 </div>
               </div>
             </div>
-            <div style={{textAlign: 'center', marginTop: 20}}><span style={{fontSize: 16}}>技术支持：北京云图科技有限公司</span></div>
+            <div className={'p_footer'}><span style={{fontSize: 16}}>技术支持：北京云图科技有限公司</span></div>
           </div>
         </div>
     );

package/src/YtChatView/previewDialogV2/index.module.css

@@ -8,6 +8,7 @@
   border-radius: 8px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 }
 
 .toolDialogSign {
@@ -17,9 +18,9 @@
 }
 
 .dialogBox {
-  margin: 24px auto 0;
+  margin: 1.5rem auto 0;
   width: calc(100vw - 140px);
-  height: calc(100vh - 200px);
+  height: calc(100vh - 192px);
   background: #fff;
   border-radius: 15px;
   display: flex;
@@ -65,8 +66,8 @@
 
 .historyDialog {
   user-select: none;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 24px;
+  margin-bottom: 24px;
   border-radius: 10px;
   flex: 1;
   width: 100%;
@@ -112,7 +113,7 @@
   height: calc(100% - 1.7rem);
   margin-top: 10px;
   overflow-y: auto;
-  scrollbar-width: none !important;
+  scrollbar-width: none !important; /* firefox */
 }
 
 .historyList::-webkit-scrollbar {
@@ -120,32 +121,28 @@
 }
 
 .historyList:hover {
-  scrollbar-width: thin !important;
+  scrollbar-width: thin !important; /* firefox */
   scrollbar-color: #ced4e3 transparent;
 }
 
 .historyItem {
   padding: 10px 16px;
   padding-left: 0;
-  margin-bottom: 4px;
 }
 
 .historyItem:hover {
   background: #F5F5F5;
   border-radius: 9px;
-}
-
-.historyItem:hover .historyName {
   color: #1552FF;
 }
 
 .activeItem {
-  background: #F5F5F5;
+  background: #1974FF !important;
   border-radius: 9px;
+  color: #FFFFFF !important;
 }
 
 .historyName {
-  color: #333333;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -188,17 +185,17 @@
   border-radius: 12px;
 }
 
-.carousel .slick-dots-bottom {
+.carousel .slickDotsBottom {
   justify-content: end;
   right: 12px;
   bottom: -10px;
 }
 
-:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li.slick-active::after {
+.antCarousel .slickDots li.slickActive::after {
   background: #1974FF;
 }
 
-:where(.css-dev-only-do-not-override-1v613y0).ant-carousel .slick-dots li button {
+.antCarousel .slickDots li button {
   background: #000000;
 }
 
@@ -229,4 +226,10 @@
 
 .newDialogText {
   margin-left: 6px;
+}
+
+.footer {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  margin-top: 1.5rem;
 }