yt-chat-components 1.5.7 → 1.5.9

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

@@ -0,0 +1,269 @@
+.p_closeImg {
+  width: 14px;
+  cursor: pointer;
+}
+
+.p_toolDialog {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 60px);
+  background:url('https://trans-from-yuntu-resourse.oss-cn-beijing.aliyuncs.com/smartSchool/appCreator/ai/ai_modal_bg.png');
+  background-size: cover;
+  border-radius:8px;
+}
+
+.p_toolDialog .p_toolLeft {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  padding: 1.7rem 1.6rem 1.7rem 1.6rem;
+
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.p_toolDialog .p_toolLeft .p_toolLogo {
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+.p_toolDialog .p_toolLeft .p_toolLogo .p_logoImg {
+  width: 48px;
+}
+
+.p_toolDialog .p_toolLeft .p_toolLogo .p_logoText {
+  font-weight: bold;
+  margin-left: 10px;
+  font-size: 30px;
+  background: linear-gradient(to right, #1551FF, #8F4BFF);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog {
+  user-select: none;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  flex: 1;
+  width: 100%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+  border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
+  backdrop-filter: blur(10px);
+  position: relative;
+  max-height:calc(100% - 5.5rem - 60px);
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: #535353 !important;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle {
+  padding: 1.3rem 16px 0 16px;
+  display: flex;
+  align-items: center;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_historyImg {
+  width: 25px;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyTitle .p_dialogTitle {
+  margin-left: 10px;
+  font-weight: 500;
+  font-size: 18px;
+  color: #333333;
+  line-height: 16px;
+  text-align: left;
+  font-style: normal;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyListEmpty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-size: 12px;
+  color: #999999;
+  max-height: calc(100% - 3rem);
+
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList {
+  height: calc(100% - 3rem);
+  margin-top: 10px;
+  overflow-y: auto;
+  scrollbar-width: none !important; /* firefox */
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList::-webkit-scrollbar{
+  display:none;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList:hover {
+  scrollbar-width: thin !important; /* firefox */
+  scrollbar-color: #ced4e3 transparent;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem {
+  padding: 7px 16px;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_activeHistoryName {
+  color: #1552FF !important;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName {
+  color: #333333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.p_toolDialog .p_toolLeft .p_historyDialog .p_historyList .p_historyItem .p_historyName:hover {
+  color: #171717;
+}
+
+.p_toolDialog .p_toolRight {
+  flex: 1;
+}
+
+.p_toolRightToRight {
+  width:300px;
+  display:flex;
+  flex-direction:column;
+  padding:2rem 1.6rem 1.8rem 1.6rem
+}
+.rightInnerContainer{
+  height:calc(100% - 80px);
+  flex:1;
+  display:flex;
+  flex-direction:column;
+  justify-content: space-between;
+}
+.p_toolRightToRight .rightSideTitle{
+  margin-bottom:1.4rem;
+  margin-top:10px;
+  margin-top:0;
+  font-size:18px;
+  font-weight:500;
+  display:flex;
+  align-items: center;
+}
+.p_toolRightToRight .rightSideTitle img{
+  margin-right:4px;
+}
+
+.p_toolRightToRight .rightSideTitle .titleSideColumn{
+  color:#1551FF;
+}
+
+.p_toolRightToRight .rightSkillContainer{
+  min-height:40%;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList{
+  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;
+  height: 40px;
+  border-radius:10px;
+}
+.p_toolRightToRight .rightSkillContainer .rightSkillList .rightSkillItem  p{
+  margin-top:0px;
+  margin-bottom:4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #333333;
+}
+.p_toolRightToRight .rightKnowledgeTitle{
+  nargin-top: 2.2rem;
+  margin-bottom: 1.4rem;
+  font-size:18px;
+  font-weight:500;
+  display:flex;
+  align-items: center;
+}
+
+.p_toolRightToRight .rightKnowledgeTitle img{
+  margin-right:4px;
+}
+
+.p_toolRightToRight .rightKnowledgeContainer{
+  position:relative;
+}
+.p_toolRightToRight .rightMoreButton{
+  background: url('../../assets/aicenter/moreAi.png');
+  background-size: 85% auto;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  position: absolute;
+  bottom: 8px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+.p_toolRightToRight .rightMoreButton div{
+  width:calc(100% - 50px);
+  padding: 16px 16px 10px 20px;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 17px;
+  font-size: 12px;
+  cursor:pointer;
+}
+
+.p_newDialog {
+  width: 252px;
+  height: 40px;
+  min-height:40px;
+  background: linear-gradient( 45deg, #1551FF 0%, #8F4BFF 100%);
+  margin-top: 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p_newDialog img {
+  width: 18px;
+}
+
+.p_newDialog .p_newDialogText {
+  color: #fff;
+  margin-left: 6px;
+}
+
+.mobile_nav{
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+
+  .title{
+    color: #000;
+    font-size: 19px;
+    font-weight: bold;
+  }
+}

package/src/YtChatView/previewDialog/index.jsx

@@ -516,6 +516,7 @@ export class ToolDialog extends React.Component {
                   dropManUrl={character || currentFlow.character || dropManUrl}
                   modalWidth={modalWidth}
                   isShowReadIcon={isShowReadIcon}
+                  voice={currentFlow.call_voice}
               />
             </div>
             {

package/src/YtChatView/previewDialogV2/index.jsx

@@ -438,21 +438,6 @@ export class ToolDialogV2 extends React.Component {
 
   renderCustomDropDown=(dropDownList)=>{
     return null;
-    const { title } = this.props;
-    const { currentFlow } = this.state;
-    return <TabSelector
-        handleRowClick={(word)=> {
-      if(!this.isActiveMessage()){
-        this.setState({ dropDownList: [] });
-        this.handleSendMessage(word);
-      }else{
-        message.destroy();
-        message.info("请等待回复结束后再发送")
-      }
-    }}
-        welcomeWords={`Hi，欢迎使用${currentFlow.name||title}，您可以这样问我:`}
-        dataList={this.state.knowledgeInfo?.question || []}
-    />
   }
 
   render() {
@@ -552,31 +537,32 @@ export class ToolDialogV2 extends React.Component {
                 }
                 <div className="p_toolRight">
                   <MethodContext.Provider value={{registerChatMethods:this.registerChatMethods}}>
-                  <ChatWidget
-                      window_title={currentFlow?.name || title}
-                      flow_id={currentFlow?.id || flowId}
-                      tags={currentFlow?.keywords || tags}
-                      is_enable_call={currentFlow?.is_enable_call || false}
-                      host_url={hostUrl}
-                      api_key={api_key}
-                      session_id={this.state.sessionId}
-                      userInfo={this.sessionUserInfo}
-                      getHistoryList={this.getHistoryList}
-                      setDropDownList={(list) => this.setState({ dropDownList: list })}
-                      dropDownList={this.state.dropDownList}
-                      baseConfig={{ isTitleSideIcon, logoWidth, agentUrl, ...assetMap }}
-                      isShowUploadButton={isShowUploadButton}
-                      isShowVoiceButton={isShowVoiceButton}
-                      dropManUrl={currentFlow.character}
-                      modalWidth={modalWidth}
-                      isShowReadIcon={isShowReadIcon}
-                      isShowChatHeader={false}
-                      renderCustomDropDown={this.renderCustomDropDown}
-                      isTagsHidden={true}
-                      placeholder={'请输入您想咨询的问题'}
-                      isEnableForV1={false}
-                      questions={this.state.knowledgeInfo?.question || []}
-                  />
+                    <ChatWidget
+                        window_title={currentFlow?.name || title}
+                        flow_id={currentFlow?.id || flowId}
+                        tags={currentFlow?.keywords || tags}
+                        is_enable_call={currentFlow?.is_enable_call || false}
+                        host_url={hostUrl}
+                        api_key={api_key}
+                        session_id={this.state.sessionId}
+                        userInfo={this.sessionUserInfo}
+                        getHistoryList={this.getHistoryList}
+                        setDropDownList={(list) => this.setState({ dropDownList: list })}
+                        dropDownList={this.state.dropDownList}
+                        baseConfig={{ isTitleSideIcon, logoWidth, agentUrl, ...assetMap }}
+                        isShowUploadButton={isShowUploadButton}
+                        isShowVoiceButton={isShowVoiceButton}
+                        dropManUrl={currentFlow.character}
+                        modalWidth={modalWidth}
+                        isShowReadIcon={isShowReadIcon}
+                        isShowChatHeader={false}
+                        renderCustomDropDown={this.renderCustomDropDown}
+                        isTagsHidden={true}
+                        placeholder={'请输入您想咨询的问题'}
+                        isEnableForV1={false}
+                        questions={this.state.knowledgeInfo?.question || []}
+                        voice={currentFlow.call_voice}
+                    />
                   </MethodContext.Provider>
                 </div>
                 {
@@ -609,6 +595,8 @@ export class ToolDialogV2 extends React.Component {
                     </div>
                     <TabSelector
                         isSimple={true}
+                        keyShowSize={2}
+                        isShowByPages={false}
                         handleRowClick={(word) => {
                           this.handleClick(word)
                         }}

package/src/index.tsx

@@ -3,10 +3,11 @@ import ReactDOM from 'react-dom';
 import LogoBtn from './YtChatView/logoBtn/index';
 import ToolDialog from "./YtChatView/previewDialog/index";
 import LogoSplitBtn from "./YtChatView/logoSplitBtn/index";
-import MobileChatPage from "./YtChatView/mobileChat";
+import MobileChatPage from "./YtChatView/mobileChat/index";
 import ToolDialogV2 from "./YtChatView/previewDialogV2/index";
+import MobileChatPageV2 from "./YtChatView/mobileChatV2/index";
 
 // 手动注入 React 和 ReactDOM 到全局
 window.React = React;
 window.ReactDOM = ReactDOM;
-export {ToolDialog, LogoSplitBtn, LogoBtn, MobileChatPage, ToolDialogV2}
+export {ToolDialog, LogoSplitBtn, LogoBtn, MobileChatPage, ToolDialogV2, MobileChatPageV2}