@tencentcloud/chat-uikit-react 2.2.4 → 2.2.6

package/dist/esm/index.d.ts

@@ -1,10 +1,8 @@
-export { ChatProps, TUIKit } from './components/TUIKit/TUIKit.js';
-export { UseChatParams, UseContactParams, useTUIKit } from './components/TUIKit/hooks/useTUIKit.js';
-export { useCreateTUIKitContext } from './components/TUIKit/hooks/useCreateTUIKitContext.js';
 export { TUIConversation, UnMemoizedTUIConversation } from './components/TUIConversation/TUIConversation.js';
 export { TUIConversationList, UnMemoTUIConversationList } from './components/TUIConversationList/TUIConversationList.js';
 export { TUIChat } from './components/TUIChat/TUIChat.js';
-export { TUIKitContext, TUIKitContextValue, TUIKitProvider, useTUIKitContext } from './context/TUIKitContext.js';
+export { UIKitProvider, useUIKit } from './context/UIKitContext.js';
+export { UIManagerContextType, UIManagerProvider, useUIManager } from './context/UIManagerContext.js';
 export { TUIChatStateContext, TUIChatStateContextProvider, TUIChatStateContextValue, useTUIChatStateContext } from './context/TUIChatStateContext.js';
 export { TUIChatActionContext, TUIChatActionContextValue, TUIChatActionProvider, useTUIChatActionContext } from './context/TUIChatActionContext.js';
 export { TUIMessageContext, TUIMessageContextProvider, TUIMessageContextValue, messageShowType, useTUIMessageContext } from './context/TUIMessageContext.js';

package/dist/esm/index.js

@@ -1 +1 @@
-import o from"./server.js";export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"react";import"@tencentcloud/chat";import"@tencentcloud/chat-uikit-engine";export{TUIChat}from"./components/TUIChat/TUIChat.js";import"tslib";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIContactList}from"./components/TUIContact/TUIContactList/TUIContactList.js";export{TUIContactInfo,UnMemoizedTUIContactInfo}from"./components/TUIContact/TUIContactInfo/TUIContactInfo.js";export{TUIContact,UnMemoizedTUIContact}from"./components/TUIContact/TUIContact.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{TUIContactContext,TUIContactContextProvider,useTUIContactContext}from"./context/TUIContactContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";export{t}from"./locales/index.js";export{isH5,isPC,setPlatform}from"./utils/env.js";export{default as i18next}from"i18next";new o;
+import o from"./server.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"react";import"@tencentcloud/chat";import"@tencentcloud/chat-uikit-engine";export{TUIChat}from"./components/TUIChat/TUIChat.js";import"tslib";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIContactList}from"./components/TUIContact/TUIContactList/TUIContactList.js";export{TUIContactInfo,UnMemoizedTUIContactInfo}from"./components/TUIContact/TUIContactInfo/TUIContactInfo.js";export{TUIContact,UnMemoizedTUIContact}from"./components/TUIContact/TUIContact.js";export{UIKitProvider,useUIKit}from"./context/UIKitContext.js";export{UIManagerProvider,useUIManager}from"./context/UIManagerContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{TUIContactContext,TUIContactContextProvider,useTUIContactContext}from"./context/TUIContactContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";export{t}from"./locales/index.js";export{isH5,isPC,setPlatform}from"./utils/env.js";export{default as i18next}from"i18next";new o;

package/dist/esm/locales/en-US/TUIGlobal.js

@@ -0,0 +1 @@
+var a={chats:"Messages",contacts:"Contacts"};export{a as default};

package/dist/esm/locales/en-US/index.js

@@ -1 +1 @@
-import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:I,TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:I};export{T as message};
+import o from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};

package/dist/esm/locales/ja-JP/TUIGlobal.js

@@ -0,0 +1 @@
+var a={chats:"メッセージ",contacts:"連絡先"};export{a as TUIGlobal,a as default};

package/dist/esm/locales/ja-JP/index.js

@@ -1 +1 @@
-import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};
+import{TUIGlobal as o}from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};

package/dist/esm/locales/ko-KR/TUIGlobal.js

@@ -0,0 +1 @@
+var a={chats:"채팅",contacts:"연락처"};export{a as TUIGlobal,a as default};

package/dist/esm/locales/ko-KR/index.js

@@ -1 +1 @@
-import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};
+import{TUIGlobal as o}from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};

package/dist/esm/locales/zh-CN/TUIGlobal.js

@@ -0,0 +1 @@
+var a={chats:"消息",contacts:"通讯录"};export{a as TUIGlobal,a as default};

package/dist/esm/locales/zh-CN/index.js

@@ -1 +1 @@
-import o from"./TUIChat.js";import t from"./TUIConversation.js";import r from"./TUIContact.js";import a from"./TUIProfile.js";var i={chats:"消息",contacts:"通讯录",TUIChat:o,TUIConversation:t,TUIContact:r,TUIProfile:a};export{i as message};
+import{TUIGlobal as o}from"./TUIGlobal.js";import r from"./TUIChat.js";import t from"./TUIConversation.js";import m from"./TUIContact.js";import I from"./TUIProfile.js";var T={TUIGlobal:o,TUIChat:r,TUIConversation:t,TUIContact:m,TUIProfile:I};export{T as message};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "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",
-    "start": "yarn run rollup -c -w",
-    "clean": "rimraf ./dist",
+    "build": "rimraf dist && rollup -c",
+    "start": "rimraf dist && rollup -c -w",
+    "clean": "rimraf -g ./dist node_modules examples/*/node_modules",
     "prepare": "husky install"
   },
   "homepage": "https://www.tencentcloud.com/document/product/1047/45912",
@@ -42,9 +42,11 @@
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "autoprefixer": "^10.4.11",
+    "cross-env": "^7.0.3",
     "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 +57,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 +71,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/ConversationCreatGroupDetail.tsx

@@ -14,7 +14,7 @@ import {
 } from '../Avatar';
 import { PageStateTypes } from './ConversationCreate';
 import { ConversationGroupTypeInfo, GroupType, typeInfoList } from './ConversationGroupTypeInfo';
-import { useTUIKitContext } from '../../context';
+import { useUIManager } from '../../context';
 import { CreateGroupConversationParams } from '../../hooks';
 
 export interface ConversationCreatGroupDetailProps {
@@ -30,7 +30,7 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
     profileList, pageState, setPageState, createConversation, setConversationCreated,
   } = props;
   const { t } = useTranslation();
-  const { setActiveConversation, myProfile } = useTUIKitContext();
+  const { setActiveConversation, myProfile } = useUIManager();
   const temp = [...profileList];
   myProfile && temp.unshift(myProfile);
   const name = temp.map((item) => item.nick || item.userID).toString();
@@ -84,9 +84,9 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
       name: groupName,
       // eslint-disable-next-line
       // @ts-ignore
-      type: GroupType[groupType], 
+      type: GroupType[groupType],
       groupID,
-      avatar, 
+      avatar,
       memberList,
     });
     setActiveConversation(conversation);

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -5,7 +5,7 @@ import { Conversation } from '@tencentcloud/chat';
 import { Icon, IconTypes } from '../Icon';
 import { ConversationCreateUserSelectList } from './ConversationCreateUserSelectList';
 import { ConversationCreatGroupDetail } from './ConversationCreatGroupDetail';
-import { useTUIKitContext } from '../../context';
+import { useUIKit } from '../../context';
 import { useConversation } from '../../hooks';
 
 export interface ConversationCreateProps {
@@ -24,7 +24,7 @@ export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
   const [isCreateGroup, setIsCreateGroup] = useState(false);
   const [pageState, setPageState] = useState<PageStateTypes>(PageStateTypes.USER_SELECT);
   const [selectList, setSelectList] = useState([]);
-  const { chat } = useTUIKitContext();
+  const { chat } = useUIKit();
   const { createConversation } = useConversation(chat);
 
   const back = () => {

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -9,7 +9,7 @@ import { Icon, IconTypes } from '../Icon';
 import { ConversationCreateSelectView, ConversationCreateSelectViewProps } from './ConversationCreateSelectView';
 import { Avatar, defaultUserAvatar } from '../Avatar';
 import { useConversationCreate } from './hooks/useConversationCreate';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 import { PageStateTypes } from './ConversationCreate';
 import { useConversation } from '../../hooks';
 import { Toast } from '../Toast';
@@ -35,7 +35,8 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
   } = props;
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
-  const { chat, setActiveConversation } = useTUIKitContext();
+  const { chat } = useUIKit();
+  const { setActiveConversation } = useUIManager();
   const [friendList, setFriendList] = useState<any>({});
   const {
     getFriendListSortSearchResult,

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/ConversationPreview.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Conversation } from '@tencentcloud/chat';
-import { TUIKitContextValue, useTUIKitContext } from '../../context';
+import type { Conversation } from '@tencentcloud/chat';
+import { useUIKit, useUIManager } from '../../context';
 import { ConversationPreviewContent } from './ConversationPreviewContent';
 import { AvatarProps } from '../Avatar';
 
@@ -8,34 +8,34 @@ import {
   getDisplayImage, getDisplayMessage, getDisplayTitle, getDisplayTime,
 } from './utils';
 
-export interface ConversationPreviewUIComponentProps extends ConversationPreviewProps{
+export interface ConversationPreviewUIComponentProps extends ConversationPreviewProps {
   /** If the component's Conversation is the active (selected) Conversation */
-  active?: boolean,
+  active?: boolean;
   /** Image of Conversation to display */
-  displayImage?: string,
+  displayImage?: string;
   /** Title of Conversation to display */
-  displayTitle?: string | React.ReactElement,
+  displayTitle?: string | React.ReactElement;
   /** Message of Conversation to display */
-  displayMessage?: string | React.ReactElement,
+  displayMessage?: string | React.ReactElement;
   /** Time of Conversation to display */
-  displayTime?: string,
+  displayTime?: string;
   /** Number of unread Messages */
-  unread?: number,
+  unread?: number;
 }
 export interface ConversationPreviewProps {
-  conversation: Conversation,
-  activeConversation?: Conversation,
-  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>,
-  Avatar?: React.ComponentType<AvatarProps>
-  setActiveConversation?: TUIKitContextValue['setActiveConversation'],
-  searchValue?: string,
-  conversationUpdateCount?: number
-  activeConversationID?: string,
-  setActiveConversationID?: (conversationID: string) => void,
+  conversation: Conversation;
+  activeConversation?: Conversation;
+  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>;
+  Avatar?: React.ComponentType<AvatarProps>;
+  setActiveConversation?: (conversation: Conversation | undefined) => void;
+  searchValue?: string;
+  conversationUpdateCount?: number;
+  activeConversationID?: string;
+  setActiveConversationID?: (conversationID: string) => void;
 }
 export function ConversationPreview<T extends ConversationPreviewProps>(
   props: T,
-):React.ReactElement {
+) {
   const {
     activeConversation,
     conversation,
@@ -43,11 +43,11 @@ export function ConversationPreview<T extends ConversationPreviewProps>(
     searchValue,
     conversationUpdateCount,
   } = props;
-  const { language } = useTUIKitContext('TUIConversation');
+  const { language } = useUIKit();
   const {
     setActiveConversation,
     myProfile,
-  } = useTUIKitContext('ConversationPreview');
+  } = useUIManager('ConversationPreview');
   const [displayImage, setDisplayImage] = useState(getDisplayImage(conversation));
   const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(conversation, searchValue));
   const [displayMessage, setDisplayMessage] = useState(myProfile && getDisplayMessage(conversation, myProfile, language));

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -10,7 +10,7 @@ import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Plugins } from '../Plugins';
 import { useConversation } from '../../hooks';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 
 export interface IPluginsRef {
   closeMore?: () => void,
@@ -34,7 +34,8 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
 
   const { t } = useTranslation();
   const conversationPreviewButton = useRef<HTMLButtonElement | null>(null);
-  const { chat, conversation: activeConversation } = useTUIKitContext('ConversationPreviewContent');
+  const { chat } = useUIKit();
+  const { conversation: activeConversation } = useUIManager('ConversationPreviewContent');
   const { pinConversation, deleteConversation } = useConversation(chat);
   const activeClass = active ? 'conversation-preview-content--active' : '';
   const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
@@ -159,8 +160,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');
                     }}