yt-chat-components 0.9.9 → 1.0.0

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

@@ -0,0 +1,254 @@
+.p_closeImg {
+  width: 14px;
+  cursor: pointer;
+}
+
+.p_toolDialog {
+  display: flex;
+  height:100%;
+  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;
+}

package/src/YtChatView/previewDialog/index.jsx

@@ -453,7 +453,7 @@ export class ToolDialog extends React.Component {
             {
               isShowSideLeft && <div className="p_toolLeft">
                 <div className="p_toolLogo">
-                  <img className="p_logoImg" style={{ width: logoWidth }} src={agentUrl}/>
+                  <img className="p_logoImg" style={{ width: logoWidth, borderRadius: 15 }} src={agentUrl}/>
                   <div className="p_logoText" style={{ fontSize: logoFontSize }}>{agentName}</div>
                 </div>
                 <div className="p_historyDialog">

package/src/index.tsx

@@ -3,8 +3,9 @@ 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";
 
 // 手动注入 React 和 ReactDOM 到全局
 window.React = React;
 window.ReactDOM = ReactDOM;
-export {ToolDialog, LogoSplitBtn, LogoBtn}
+export {ToolDialog, LogoSplitBtn, LogoBtn, MobileChatPage}