@tencentcloud/chat-uikit-react 2.2.4 → 2.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",
@@ -15,9 +15,9 @@
     "uikit"
   ],
   "scripts": {
-    "build": "yarn clean && yarn run rollup -c",
+    "build": "rimraf ./dist && yarn run rollup -c",
     "start": "yarn run rollup -c -w",
-    "clean": "rimraf ./dist",
+    "clean": "rimraf -g ./dist node_modules examples/*/node_modules",
     "prepare": "husky install"
   },
   "homepage": "https://www.tencentcloud.com/document/product/1047/45912",
@@ -45,6 +45,7 @@
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-react-refresh": "^0.4.9",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.7",
     "postcss": "^8.4.16",
@@ -55,7 +56,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.54.9",
+    "sass": "^1.77.8",
     "stylelint": "^16.7.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-standard": "^36.0.1",
@@ -69,9 +70,9 @@
     "@tencentcloud/tui-core": "latest",
     "@tencentcloud/universal-api": "latest",
     "date-fns": "^2.29.3",
-    "node-sass": "^7.0.3",
     "react-date-picker": "^9.0.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "rollup-plugin-copy": "^3.5.0"
   },
   "peerDependencies": {
     "date-fns": "^2.29.3",

package/rollup.config.js

@@ -8,6 +8,7 @@ import postcss from 'rollup-plugin-postcss';
 import autoprefixer from 'autoprefixer';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import url from '@rollup/plugin-url';
+import copy from 'rollup-plugin-copy';
 
 export default [
   {
@@ -21,13 +22,23 @@ export default [
           autoprefixer(),
         ],
       }),
+      copy({
+        targets: [{
+          src: [
+            'src/assets/fonts/iconfont.ttf',
+            'src/assets/fonts/iconfont.woff',
+            'src/assets/fonts/iconfont.woff2',
+          ],
+          dest: ['dist/cjs/assets/fonts', 'dist/esm/assets/fonts'],
+        }],
+      }),
       peerDepsExternal(),
       resolve(),
       commonjs(),
+      typescript(),
       babel({
-        extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', 'ts', 'tsx'],
+        extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx'],
       }),
-      typescript(),
       terser(),
     ],
     external: ['react', 'date-fns', 'tslib', 'react-date-picker', 'i18next', 'react-i18next', '@tencentcloud/tui-core',

package/src/components/ConversationCreate/styles/ConversationCreatGroupDetail.scss

@@ -2,49 +2,57 @@
   .create-group-box {
     padding: 10px 0;
   }
+
   .input-group-text {
     font-weight: 400;
-    font-size: 16px;
+    font-size: 14px;
     font-family: PingFangSC-Medium;
     line-height: 22px;
-    color: #000000;
+    color: #000;
   }
+
   .create-group-name {
     .input-group-name {
       font-weight: 700;
-      font-size: 16px;
+      font-size: 14px;
       font-family: PingFangSC-Medium;
       line-height: 19px;
-      color: #000000;
+      color: #000;
     }
   }
+
   .input-group-title {
-    color: rgba(0, 0, 0, 0.4);
+    color: rgba(0, 0, 0, 40%);
     width: 106px;
+    font-size: 14px;
   }
+
   .create-group-illustrate {
     font-weight: 400;
     font-size: 12px;
     font-family: PingFangSC-Medium;
     line-height: 17px;
     text-align: justify;
-    color: rgba(0, 0, 0, 0.4);
+    color: rgba(0, 0, 0, 40%);
     padding-left: 8px;
   }
+
   .create-group-portrait {
     .create-group-portrait-title {
       font-weight: 600;
       font-size: 14px;
       font-family: PingFangSC-Medium;
       line-height: 20px;
-      color: #000000;
+      color: #000;
       padding: 20px 0 20px 8px;
     }
+
     .create-group-portrait-info-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
       margin-bottom: 10px;
+
       .create-group-portrait-info {
         align-items: center;
         display: flex;
@@ -52,6 +60,7 @@
         width: calc((100% - 10px) / 6);
         padding: 6px;
         box-sizing: border-box;
+
         &-nick {
           font-size: 12px;
           font-family: PingFangSC-Medium;

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

@@ -1,85 +1,96 @@
 .tui-conversation-create-header {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
   display: flex;
   flex-direction: row;
   padding: 16px 20px;
   align-items: center;
   text-align: center;
+
   .title {
     margin-left: 10px;
     font-weight: 600;
-    font-size: 20px;
+    font-size: 16px;
     font-family: PingFangSC-Medium;
     line-height: 32px;
     letter-spacing: -0.41px;
-    color: #000000;
+    color: #000;
   }
 }
+
 .tui-conversation-create-search-input {
-  margin: 10px 10px 10px;
+  margin: 10px;
 }
+
 .tui-user {
-  padding: 10px 10px;
+  padding: 10px;
   display: flex;
   align-items: center;
   text-align: center;
   cursor: pointer;
+
   &:hover {
-    background-color: rgba(0,110,255,.1);
+    background-color: rgba(0, 110, 255, 10%);
   }
+
   .tui-user-name {
     margin-left: 10px;
     font-weight: 400;
     font-size: 14px;
     font-family: PingFangSC-Medium;
     line-height: 20px;
-    color: #000000;
+    color: #000;
     width: 80%;
     text-align: left;
+
     &.active {
       font-weight: 600;
       font-size: 14px;
       font-family: PingFangSC-Medium;
       line-height: 20px;
-      color: rgba(3, 101, 249, 1);
+      color: rgba(3, 101, 249, 100%);
     }
   }
 }
+
 .tui-user-checkbox-label {
   .tui-user-checkbox {
     margin-left: auto;
   }
+
   input[type="checkbox"] {
     cursor: pointer;
   }
 }
+
 .tui-conversation-create-next-container {
   width: 100%;
   display: flex;
   justify-content: center;
   margin: 20px auto 10px;
+
   .tui-conversation-create-next {
     cursor: pointer;
     text-align: center;
-    width: 12%;
-    background-color: rgba(3, 101, 249, 1);
+    background-color: rgba(3, 101, 249, 100%);
     border-radius: 31px;
     font-size: 14px;
     font-family: PingFangSC-Medium;
     line-height: 20px;
-    color: #FFFFFF;
+    color: #fff;
     padding: 12px 36px;
   }
 }
 
-
 .tui-conversation-create {
   overflow-y: auto;
+
   .tui-conversation-create-container {
     position: relative;
+
     .tui-group-container {
       width: 100%;
     }
+
     .tui-group-box {
       .title {
         font-weight: 600;
@@ -91,4 +102,3 @@
     }
   }
 }
-

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -159,8 +159,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
                     {t(!conversation.isPinned ? 'TUIConversation.Pin' : 'TUIConversation.Unpin')}
                   </div>,
                   <div
-                    className="more-handle-item"
-                    style={{ color: '#FF584C' }}
+                    className="more-handle-item delete"
                     onClick={(e) => {
                       moreHandle(e, 'delete');
                     }}

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

@@ -1,4 +1,5 @@
-$font-color: #7A7A7A;
+@use "../../../styles/colors/color-theme" as *;
+
 .conversation-list-container {
   overflow-x: hidden;
   height: 100%;
@@ -7,7 +8,6 @@ $font-color: #7A7A7A;
 .conversation-preview-container {
   display: flex;
   align-items: center;
-  background-color: #FFFFFF;
   border: none;
   width: 100%;
   height: 64px;
@@ -15,6 +15,10 @@ $font-color: #7A7A7A;
   line-height: 17px;
   padding: 0 20px;
 
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   .content {
     flex: 1 1 auto;
     text-align: left;
@@ -29,20 +33,26 @@ $font-color: #7A7A7A;
       font-family: PingFangSC-Medium;
       padding: 1px 0;
       width: 100%;
-      color: #000;
+
+      @include theme() {
+        color: get(text-primary);
+      }
     }
 
     .message {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: $font-color;
       font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 12px;
       line-height: 14px;
       padding: 1px 0;
+
+      @include theme() {
+        color: get(text-secondary);
+      }
     }
   }
 
@@ -58,13 +68,16 @@ $font-color: #7A7A7A;
     }
 
     .time {
-      color: $font-color;
       font-family: PingFangSC-Medium;
       font-style: normal;
       font-weight: 400;
       font-size: 12px;
       line-height: 14px;
       padding: 1px 0;
+
+      @include theme() {
+        color: get(text-secondary);
+      }
     }
 
     .more--hover {
@@ -96,10 +109,16 @@ $font-color: #7A7A7A;
           font-weight: 500;
           box-sizing: border-box;
 
+          &.delete {
+            @include theme() {
+              color: get(status-danger);
+            }
+          }
+
           &:hover {
-            background: #147AFF;
-            opacity: 0.6;
-            color: #FFFFFF !important;
+            @include theme() {
+              background-color: get(bg-active);
+            }
           }
         }
       }
@@ -107,18 +126,26 @@ $font-color: #7A7A7A;
   }
 
   &:hover {
-    background-color: rgba(0, 110, 255, 0.1);
+    @include theme() {
+      background-color: get(bg-active);
+    }
   }
 
   &.conversation-preview-content--pin {
-    background-color: #F2F2F2D4;
+    @include theme() {
+      background-color: get(bg-secondary);
+    }
   }
 
   &.conversation-preview-content--active {
-    background-color: rgba(0, 110, 255, 0.1);
+    @include theme() {
+      background-color: get(bg-active);
+    }
 
     .title {
-      color: rgb(20, 122, 255);
+      @include theme() {
+        color: get(status-info);
+      }
     }
   }
 
@@ -126,16 +153,19 @@ $font-color: #7A7A7A;
     .unread {
       width: 16px;
       height: 13px;
-      background: #FF3742;
       border-radius: 16px;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 2px 5px 1px;
-      color: #FFFFFF;
       font-size: 11px;
       font-weight: 700;
       margin: 2px 0 2px auto;
+      color: #fff;
+
+      @include theme() {
+        background-color: get(status-danger);
+      }
     }
   }
 }

package/src/components/ConversationPreview/utils.tsx

@@ -1,10 +1,29 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 import { getTimeStamp } from '../untils';
 
+interface TProfile extends Profile, Group {}
+export const getMessageProfile = (conversation: Conversation): TProfile => {
+  // eslint-disable-next-line
+  // @ts-ignore
+  if (!conversation) return null;
+  let result = {};
+  const { type, groupProfile, userProfile } = conversation;
+  switch (type) {
+    case TencentCloudChat.TYPES.CONV_C2C:
+      result = userProfile;
+      break;
+    case TencentCloudChat.TYPES.CONV_GROUP:
+      result = groupProfile;
+      break;
+    case TencentCloudChat.TYPES.CONV_SYSTEM:
+    default:
+  }
+  return result as TProfile;
+};
+
 export const getDisplayTitle = (
   conversation: Conversation,
   searchValue?: string,
@@ -25,15 +44,22 @@ export const getDisplayTitle = (
     default:
       title = '';
   }
-  const handleTitle = (str:string) => {
+  const handleTitle = (str: string) => {
     const tempStr = str.toLocaleLowerCase();
     const pos = searchValue && tempStr.indexOf(searchValue.toLocaleLowerCase());
-    if (pos === '') return <></>
+    const titleList = str.split(new RegExp(`(${searchValue})`, 'gi'));
+    if (pos === '') return <></>;
     return (
       <div>
-        <span>{str.slice(0, pos)}</span>
-        <span style={{ color: highlightColor }}>{pos && str.slice(pos, pos + searchValue.length)}</span>
-        <span>{pos && str.slice(pos + searchValue.length)}</span>
+        {searchValue && titleList.map((textItem: string, index: number) =>
+          (textItem.toLowerCase() === searchValue.toLowerCase())
+            ? (
+                <span key={index} style={{ color: highlightColor }}>{textItem}</span>
+              ) : (
+                <span key={index}>{textItem}</span>
+              ),
+        )}
+        ;
       </div>
     );
   };
@@ -58,9 +84,9 @@ export const getDisplayImage = (conversation: Conversation) => {
   return displayImage;
 };
 export const getDisplayMessage = (
-  conversation:Conversation,
-  myProfile:Profile,
-  language?:string,
+  conversation: Conversation,
+  myProfile: Profile,
+  language?: string,
 ) => {
   const { lastMessage, type } = conversation;
   const {
@@ -93,25 +119,7 @@ export const getDisplayMessage = (
     </div>
   );
 };
-interface TProfile extends Profile, Group {}
-export const getMessageProfile = (conversation: Conversation):TProfile => {
-  // eslint-disable-next-line
-  // @ts-ignore
-  if (!conversation) return null;
-  let result = {};
-  const { type, groupProfile, userProfile } = conversation;
-  switch (type) {
-    case TencentCloudChat.TYPES.CONV_C2C:
-      result = userProfile;
-      break;
-    case TencentCloudChat.TYPES.CONV_GROUP:
-      result = groupProfile;
-      break;
-    case TencentCloudChat.TYPES.CONV_SYSTEM:
-    default:
-  }
-  return result as TProfile;
-};
+
 export const getDisplayTime = (conversation: Conversation, language: string) => {
   const { lastMessage } = conversation;
   return getTimeStamp(lastMessage.lastTime * 1000, language);

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

@@ -3,20 +3,22 @@
   display: flex;
   align-items: center;
   border-radius: 10px;
-  background:  rgba(249, 249, 249, 0.94);
+  background: rgba(249, 249, 249, 94%);
   padding: 0 8px;
   height: 36px;
   box-sizing: border-box;
 
   &.tui-kit-input-box--focus {
-    outline: 1px solid #147AFF;
+    outline: 1px solid #147aff;
   }
+
   &.tui-kit-input-border--bottom {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 10%);
     background-color: #fff;
     outline: none;
     border-radius: 0;
   }
+
   .tui-kit-input {
     margin-left: 6px;
     margin-right: auto;
@@ -28,6 +30,7 @@
     border-radius: 10px;
     border: none;
     box-sizing: border-box;
+    font-size: 14px;
 
     &:focus {
       border: none;
@@ -36,9 +39,8 @@
 
     &::placeholder {
       font-weight: 400;
-      color: rgba(67, 60, 63, 0.6);
+      color: rgba(67, 60, 63, 60%);
       padding: 2px 0;
     }
   }
-
 }

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

@@ -1,7 +1,7 @@
 .model {
-  background: rgba(#000000, 0.5);
+  background: rgba(#000, 0.5);
   position: fixed;
-  z-index: 2;
+  z-index: 5;
   width: 100vw;
   top: 0;
   left: 0;
@@ -9,4 +9,4 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}

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

@@ -1,7 +1,21 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .plugin-popup {
   &-box {
-    background: #FFFFFF;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
     border-radius: 16px;
+
+    @include theme() {
+      color: get(text-primary);
+    }
+
+    [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);
+    }
   }
-}
+}

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

@@ -1,6 +1,7 @@
 .popup {
   opacity: 0;
+
   &-show {
     opacity: 1;
   }
-}
+}

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

@@ -1,9 +1,16 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-chat-header {
   padding: 16px 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+
+  @include theme() {
+    background-color: get(bg-primary);
+  }
+
   &-left {
     display: flex;
     align-items: center;
@@ -24,7 +31,11 @@
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
-    line-height: 17px;
+
+    @include theme() {
+      color: get(text-primary);
+    }
+
   }
   .system {
     height: 32px;
@@ -33,4 +44,4 @@
 
 .tui-chat-live-header {
 
-}
+}