yt-chat-components 0.1.0 → 0.2.0

package/src/YtChatView/chatWidget/index.tsx

@@ -344,13 +344,23 @@ video {
 }
 
 .cl-window {
+  border-radius: 1rem;
+  padding-top: 2.3rem;
+  padding-bottom: 1.2rem;
+}
+
+.cl-middle-container{
+  height:100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border-radius: 1rem;
-
+  border-left:0.5px solid #3850FF2E;
+  border-right:0.5px solid #3850FF2E;
+  padding-left:1.6rem;
+  padding-right:1.6rem;
 }
 
+
 .cl-scale-100 {
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -425,17 +435,37 @@ video {
   display: flex;
   flex-direction: column;
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding-top: 1rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 400;
   color: rgb(17 24 39);
-  --tw-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.cl-header .header-title{
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.cl-header .diamond {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.cl-header .diamond::before {
+  content: '';
+  position: absolute;
+  top: 5px;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  transform: rotate(45deg);
+  border-radius: 3px;
 }
 
 .cl-drop-down {
@@ -444,9 +474,9 @@ video {
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
   z-index: 1;
   position: absolute;
-  width: calc(100% - 50px);
+  width: 100%;
   min-height: 50px;
-  bottom: -14.5rem;
+  bottom: -13.3rem;
   padding:1.3rem;
 }
 
@@ -466,7 +496,7 @@ video {
 .drop-down-item-card {
   width: 32%;
   padding: 1.5rem 1.2rem 0.3rem;
-  height:8rem;
+  height:7rem;
   font-weight: 400;
   font-size: 14px;
   color: #FFFFFF;
@@ -483,10 +513,10 @@ video {
   flex-direction: column;
 }
 .drop-down-item-title {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: 400;
+  font-size: 16px;
   color: #000000;
-  line-height: 16px;
+  line-height: 18px;
   text-align: left;
   width: 100%;
 }
@@ -495,16 +525,15 @@ video {
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
-  margin-top:1rem;
+  // margin-top:1rem;
   align-items: center;
 }
 
 .drop-down-item-bottom-button{
-  background: #6E79FF;
   border-radius: 16px;
   line-height: 20px;
   text-align: left;
-  width: 5rem;
+  width: 2rem;
   padding: 0.2rem 0.4rem 0.2rem 0.2rem;
   cursor: pointer;
   display: flex;
@@ -535,7 +564,6 @@ margin-bottom:1rem;
   overflow: scroll;
   overflow-x: clip;
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -554,11 +582,10 @@ margin-bottom:1rem;
   flex-direction: column;
   width: 100%;
   align-items: center;
-  border-top-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    border-top-right-radius: 50px;
+    border-bottom-right-radius: 50px;
 }
 
 .cl-chat-message {
@@ -600,16 +627,27 @@ margin-bottom:1rem;
   width: 100%;
   padding-left: 1.25rem;
   padding-right: 1.25rem;
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
   font-weight: 300;
-  background-color: rgb(255 255 255);
+  background-color: #00000000;
   color: rgb(17 24 39);
+  border-top-left-radius: 50px;
+  border-bottom-left-radius: 50px;
+  transition: height 0.2s ease;
+}
+.cl-input-element::placeholder {
+  line-height:45px;
 }
 
 .cl-input-element:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
+  height:120px;
+}
+
+.cl-input-element:focus::placeholder {
+  line-height:unset;
 }
 
 .cl-user_message {
@@ -617,7 +655,7 @@ margin-bottom:1rem;
   width: -moz-fit-content;
   width: fit-content;
   -webkit-column-break-before: all;
-          break-before: all;
+  break-before: all;
   border-radius: 0.75rem;
   border-top-right-radius: 0.125rem;
   --tw-bg-opacity: 1;
@@ -638,7 +676,7 @@ margin-bottom:1rem;
   width: fit-content;
   max-width: 90%;
   -webkit-column-break-before: all;
-          break-before: all;
+  break-before: all;
   border-radius: 0.75rem;
   border-top-left-radius: 0.125rem;
   --tw-bg-opacity: 1;
@@ -658,7 +696,7 @@ margin-bottom:1rem;
   width: fit-content;
   max-width: 90%;
   -webkit-column-break-before: all;
-          break-before: all;
+  break-before: all;
   border-radius: 0.75rem;
   border-top-left-radius: 0.125rem;
   --tw-bg-opacity: 1;
@@ -2193,10 +2231,68 @@ input::-ms-input-placeholder { /* Microsoft Edge */
   z-index: 510;
 }
 
-.w_inputBox {
+.w_tagListClass {
+  position: absolute;
   width: 100%;
+  height: fit-content;
+  // background: #F9FAFB;
+  display: flex;
+  align-items: center;
+  padding: 8px 0 8px 10px;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  .w_tagItemBox {
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: 30px;
+    background: #F9FAFB;
+    border-radius: 15px;
+    border: 1px solid #4B4FFF;
+    cursor: pointer;
+
+    &:hover {
+      background: linear-gradient( 270deg, #828EFE 0%, #4B4FFF 100%);
+      .tagImgh {
+        filter: brightness(100);
+      }
+      .tagItemText {
+        color: #fff;
+      }
+    }
+    .w_tagImgh{
+      width: 16px;
+      height: 16px;
+    }
+
+    .w_tagItemText {
+      width: fit-content;
+      padding-top: 2px;
+      padding-left: 8px;
+      color: #1552FF;
+      font-size: 14px;
+    }
+
+    .w_tagImg {
+      margin-left: 6px;
+      width: 12px;
+      height: 12px;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+}
+
+.w_inputBox {
+  width: calc(100% - 16px);
+  margin: 0 auto 8px;
   display: flex;
   align-items: center;
+  box-shadow: 0px 2px 15px 0px rgba(0,48,187,0.1);
+  border-radius: 30px;
   textarea {
     resize: none;
     min-height: 48px;
@@ -2212,6 +2308,8 @@ input::-ms-input-placeholder { /* Microsoft Edge */
     overflow-y: auto; /* 允许垂直滚动 */
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE and Edge */
+      border-top-left-radius: 50px;
+      border-bottom-left-radius: 50px;
   }
   textarea::-webkit-scrollbar {
     display: none; /* Chrome, Safari, and Opera */

package/src/YtChatView/logoBtn/index.jsx

@@ -3,7 +3,7 @@ import ToolDialog from "../previewDialog";
 import { Modal } from 'antd';
 import './index.css'
 
-class LogoBtn extends React.Component {
+export class LogoBtn extends React.Component {
   state={
     isShow:false
   }
@@ -32,9 +32,8 @@ class LogoBtn extends React.Component {
     }
 
     return (
-        // <div style={{ position: "relative", width: "100vw", height: "100vh", background:'transparent' }}>
           <div style={{ position: "absolute", ...iconConfig }}>
-            <img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>
+            {iconUrl && <img src={iconUrl} style={{ width: "100%", height: "100%" }} onClick={(event) => this.setState({ isShow: true })}/>}
             <Modal
                 wrapClassName={'yt-chat-modal'}
                 open={this.state.isShow}

package/src/YtChatView/logoSplitBtn/index.jsx

@@ -3,13 +3,13 @@ import ToolDialog from "../previewDialog";
 import { Modal } from 'antd';
 import './index.css'
 
-class LogoSplitBtn extends React.Component {
+export class LogoSplitBtn extends React.Component {
   state={
     isShow:false
   }
 
     render() {
-    const { left, right, top, bottom, width, height, iconUrl, title, flowId, hostUrl, userInfo, tags,boxStyle, sceneId} = this.props;
+    const { left, right, top, bottom, width, height, iconUrl, title, flowId, hostUrl, userInfo, tags,boxStyle='{"position":"relative","height":"700px"}', sceneId} = this.props;
     const iconConfig = {
       width: `${width || 100}px`,
       height: `${height || 100}px`,
@@ -53,7 +53,7 @@ class LogoSplitBtn extends React.Component {
                   }}
                   userInfo={userInfo || {}}
                   tags={tags || []}
-                  boxStyle={boxStyle || { position: 'relative', height: '700px' }}
+                  boxStyle={JSON.parse(boxStyle)}
                   isShowSideRight={true}
                   sceneId={sceneId}
               />