@tencentcloud/chat-uikit-react 2.2.4 → 2.2.5

package/src/components/TUIConversationList/index.scss

@@ -1,15 +1,23 @@
+@use "../../styles/colors/color-theme" as *;
+
 .tui-conversation {
   flex: 1;
-  min-width: 360px;
-  max-width: 400px;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #F9FAFB;
   text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   .tui-conversation-header {
     display: flex;
     padding: 10px 20px;
+
     .tui-conversation-create-icon {
       display: flex;
       align-items: center;
@@ -17,16 +25,19 @@
       margin-left: 10px;
     }
   }
+
   .no-result {
     padding: 0 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
+
     &-icon {
       margin: 100px auto 50px;
     }
+
     &-message {
-      color: #999999;
+      color: #999;
       font-weight: 400;
       font-size: 16px;
       font-family: PingFangSC-Medium;
@@ -34,8 +45,15 @@
     }
   }
 }
+
 .tui-conversation-h5 {
-  min-width: 100%;
-  width: 100%;
-  max-width: 100%;
+  .tui-conversation-header {
+    padding: 10px;
+  }
+
+  .conversation-list-container {
+    .conversation-preview-container {
+      padding: 0 10px;
+    }
+  }
 }

package/src/components/TUIKit/TUIKit.tsx

@@ -7,8 +7,6 @@ import { isH5, isPC } from '../../utils/env';
 import { useTUIKit, UseContactParams } from './hooks/useTUIKit';
 import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
 import { TUIKitProvider } from '../../context/TUIKitContext';
-import './styles/index.scss';
-import './styles/h5.scss';
 import { TUIConversation } from '../TUIConversation';
 import { TUIChat } from '../TUIChat';
 import { TUIManage } from '../TUIManage';
@@ -21,6 +19,9 @@ import chats from '../Icon/images/chats.svg';
 import chatsSelected from '../Icon/images/chats-selected.svg';
 import contacts from '../Icon/images/contacts.svg';
 import contactsSelected from '../Icon/images/contacts-selected.svg';
+import './styles/index.scss';
+import './styles/h5.scss';
+import '../../styles/index.scss';
 
 export interface ChatProps {
   chat?: any,

package/src/components/TUIKit/styles/index.scss

@@ -1,14 +1,19 @@
-@import "reset";
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-kit {
   position: relative;
   display: flex;
   width: 100%;
   height: 100%;
-  background-color: #FFFFFF;
   text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-primary);
+  }
 }
+
 .sample-chat {
-  position:relative;
+  position: relative;
   margin: 0 auto;
   width: calc(100% - 20rem);
   min-width: 850px;
@@ -16,23 +21,30 @@
   box-sizing: border-box;
   border-radius: 12px;
   overflow: hidden;
+
   &-profile {
     position: absolute;
     top: 0;
     z-index: 1;
+    width: 100%;
+    height: 100%;
   }
+
   &-left-container {
     max-width: 360px;
     min-width: 360px;
     display: flex;
     flex-direction: column;
+    position: relative;
   }
+
   &-tab {
     display: flex;
     align-items: center;
     justify-content: space-around;
     margin: 12px;
   }
+
   &-tab-container {
     display: flex;
     flex-direction: column;
@@ -40,22 +52,26 @@
     justify-content: center;
     cursor: pointer;
   }
+
   &-tab-text {
     font-size: 15px;
     line-height: 25px;
     text-align: center;
   }
+
   &-tab-active {
-    color: #147AFF;
+    color: #147aff;
   }
 }
+
 .tuikit-container {
   display: flex;
   height: 100%;
   position: relative;
   text-align: initial;
-  box-shadow: 0 11px 20px 0 rgba(0,0,0,.3);
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 30%);
 }
+
 .tui-chat-default {
   width: 100%;
   height: 100%;
@@ -63,6 +79,7 @@
   background-position-x: -17px;
   background-position-y: 173px;
   padding: 100px 40px 0;
+
   header {
     display: flex;
     align-items: center;
@@ -71,11 +88,13 @@
     font-weight: 500;
     color: #000;
     letter-spacing: 0;
+
     img {
       width: 32px;
       margin: 0 10px;
     }
   }
+
   .content {
     max-width: 393px;
     font-size: 16px;
@@ -86,6 +105,7 @@
     letter-spacing: 0;
     padding: 36px 0 20px;
   }
+
   .link {
     font-size: 14px;
     line-height: 20px;
@@ -93,6 +113,7 @@
     font-weight: 400;
     color: #666;
     letter-spacing: 0;
+
     a {
       font-family: PingFangSC-Regular;
       font-weight: 400;
@@ -104,9 +125,8 @@
   }
 }
 
-
 body {
   #webpack-dev-server-client-overlay {
     display: none !important;
   }
-}
+}

package/src/components/TUIManage/styles/index.scss

@@ -5,13 +5,16 @@
   max-width: 300px;
   min-width: 200px;
   border-left: 1px solid #f9fafb;
+
   .red {
-    color: #FF584C !important;
+    color: #ff584c !important;
   }
+
   .tui-manage-title {
     display: flex;
     align-items: center;
-    padding: 24px 20px;
+    padding: 24px 10px;
+
     span {
       margin-right: 10px;
       font-weight: 700;
@@ -20,15 +23,18 @@
       line-height: 17px;
     }
   }
+
   .tui-manage-container {
     .tui-manage-info {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .info-avatar {
         margin-top: 40px;
         margin-bottom: 20px;
       }
+
       .info-name {
         text-align: center;
         font-weight: 700;
@@ -37,33 +43,37 @@
         line-height: 29px;
         margin-bottom: 10px;
       }
+
       .info-id {
         font-weight: 400;
         font-size: 12px;
         font-family: PingFangSC-Medium;
         line-height: 14px;
-        color: #666666;
+        color: #666;
         margin-bottom: 30px;
         text-align: center;
       }
     }
+
     .tui-manage-handle {
       .manage-handle-box {
         display: flex;
-        background: rgba(249, 249, 249, 0.94);
+        background: rgba(249, 249, 249, 94%);
         align-items: center;
         justify-content: space-between;
         padding: 10px;
         box-sizing: border-box;
+
         &:nth-child(2) {
           margin-top: 10px;
           cursor: pointer;
         }
+
         .manage-handle-title {
           font-size: 16px;
           font-family: PingFangSC-Medium;
           line-height: 22px;
-          color: rgba(0, 0, 0, 0.6);
+          color: rgba(0, 0, 0, 60%);
         }
       }
     }
@@ -71,7 +81,7 @@
 }
 
 .tui-manage.tui-h5-manage {
-  border-left: 1px solid #f9fafb;
+  border-left: none;
   display: flex;
   flex-direction: column;
   position: absolute;

package/src/components/TUIMessage/styles/color.scss

@@ -1,26 +1,37 @@
-.message-text, .message-custom{
-  border: 1px solid #DDDDDD;
+@use "../../../styles/colors/color-theme" as *;
+
+.message-text,
+.message-custom {
+  @include theme() {
+    border: 1px solid get(border-5);
+  }
 }
 
 .bubble {
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   &-out {
-    background: #F2F7FF;
-    border: 1px solid #F2F7FF;
+    @include theme() {
+      border: none;
+      background-color: get(bg-secondary);
+    }
   }
 }
 
 .meesage-bubble-reply-out {
-  background: #F2F7FF;
   .meesage-bubble-reply-main {
-    .message-text{
+    .message-text {
       background: none;
     }
   }
 }
 
-
 .message-tip {
-  color: #999999;
+  @include theme() {
+    color: get(text-secondary);
+  }
 }
 
 .tip {
@@ -30,4 +41,4 @@
       padding: 3px;
     }
   }
-}
+}

package/src/components/TUIMessage/styles/layout.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .message-default {
   width: 100%;
   flex: 1;
@@ -24,6 +26,10 @@
       display: inline-block;
       padding-bottom: 3px;
       max-width: 60%;
+
+      @include theme() {
+        color: get(text-primary);
+      }
     }
   }
 }
@@ -80,7 +86,10 @@
     font-family: PingFangSC-Medium;
     line-height: 14px;
     text-align: right;
-    color: #7A7A7A;
+
+    @include theme() {
+      color: get(text-secondary);
+    }
   }
 }
 
@@ -91,7 +100,9 @@
     bottom: 10px;
     right: 10px;
     .time {
-      color: #FFFFFF;
+      @include theme() {
+        color: get(text-primary);
+      }
     }
   }
 }
@@ -110,6 +121,10 @@
       white-space: pre-wrap;
       display: inline;
       vertical-align: middle;
+
+      @include theme() {
+        color: get(text-primary);
+      }
     }
     .message-status {
       display: inline-flex;
@@ -232,46 +247,64 @@
 }
 
 .meesage-bubble-reply {
-  background: #ECEBEB;
   padding: 8px 16px;
+
+  @include theme() {
+    background-color: get(bg-secondary);
+  }
+
   &-in {
     border-radius: 16px 16px 16px 0;
   }
+
   &-out {
     border-radius: 16px 16px 0px 16px;
   }
+
   .message-text {
-    border-radius: none;
-    border: none;
+    border: none !important;
   }
+
   .bubble {
     padding: 0;
+
     &-in {
       border-radius: 0;
     }
   }
+
   &-main {
     position: relative;
     padding: 10px 14px;
     margin-bottom: 10px;
-    background: #FFFFFF;
+
+    @include theme() {
+      background-color: get(bg-primary);
+    }
+
     &::before {
       content: "";
       position: absolute;
       width: 6px;
       height: 100%;
-      background: #D9D9D9;
       top: 0;
       left: 0;
+
+      @include theme() {
+        background-color: get(bg-5);
+      }
     }
+
     .title {
-      font-family: PingFangSC-Medium;
-      font-style: normal;
       font-weight: 500;
       font-size: 14px;
-      line-height: 17px;
       padding-bottom: 10px;
+
+      @include theme() {
+        color: get(text-primary);
+      }
     }
+
     .message-context {
       opacity: 0.6;
     }
@@ -504,4 +537,4 @@
 
 .website {
   color: #147aff !important;
-}
+}

package/src/components/TUIMessageInput/styles/color.scss

@@ -1,17 +1,36 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-message-input {
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   .tui-kit-input-box--focus {
-    outline: 1px solid #147AFF;
+    @include theme() {
+      outline: 1px solid get(status-info);
+    }
   }
+
   .input-box {
-    border: 1px solid #D3DAF3;
-    background: #FFFFFF;
+    @include theme() {
+      background-color: get(bg-primary);
+      border: 1px solid get(border-5);
+    }
   }
 }
 
 .input-plugin-popup {
   &-box {
-    background: #FFFFFF;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
     border-radius: 16px;
+
+    [data-chat-theme="light"] & {
+      background-color: var(--chat-theme-light-bg-primary);
+      box-shadow: var(--chat-theme-light-box-shadow-1);
+    }
+
+    [data-chat-theme="dark"] & {
+      background-color: var(--chat-theme-dark-bg-3);
+      box-shadow: var(--chat-theme-dark-box-shadow-1);
+    }
   }
-}
+}