@tencentcloud/chat-uikit-react 2.2.4 → 2.2.6

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-uikit-theme="light"] & {
+      background-color: var(--chat-theme-light-bg-primary);
+      box-shadow: var(--chat-theme-light-box-shadow-1);
+    }
+
+    [data-uikit-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/TUIChat/TUIChat.tsx

@@ -10,7 +10,7 @@ import TUIChatEngine, {
   StoreName,
 } from '@tencentcloud/chat-uikit-engine';
 import { JSONStringToParse } from '../untils';
-import { useTUIKitContext } from '../../context/TUIKitContext';
+import { useUIKit, useUIManager } from '../../context';
 import { TUIChatStateContextProvider } from '../../context/TUIChatStateContext';
 import { TUIChatActionProvider } from '../../context/TUIChatActionContext';
 import { ComponentProvider, UnknowPorps } from '../../context/ComponentContext';
@@ -79,7 +79,8 @@ function UnMemoizedTUIChat <T extends TUIChatProps>(
     EmptyPlaceholder = <EmptyStateIndicator listType="chat" />,
   } = props;
 
-  const { conversation: contextConversation, chat } = useTUIKitContext('TUIChat');
+  const { chat } = useUIKit();
+  const { conversation: contextConversation } = useUIManager('TUIChat');
 
   const conversation = propsConversation || contextConversation;
 
@@ -162,7 +163,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     setHighlightedMessageId,
     setActiveMessageID,
   } = useHandleMessage({
-    // eslint-disable-next-line 
+    // eslint-disable-next-line
     // @ts-ignore
     state,
     dispatch,

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -6,7 +6,7 @@ import { handleDisplayAvatar } from '../untils';
 import { isH5 } from '../../utils/env';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
-import { useTUIKitContext } from '../../context';
+import { useUIManager } from '../../context';
 
 export interface TUIChatHeaderDefaultProps {
   title?: string,
@@ -32,7 +32,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     isLive,
     opateIcon,
   } = props;
-  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { setActiveContact } = useUIManager('TUIContact');
   const [title, setTitle] = useState(propTitle);
   const [avatar, setAvatar] = useState<React.ReactElement | string>('');
 
@@ -82,7 +82,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     TUIConversationService.switchConversation('');
     setActiveContact();
   };
-  const { setTUIManageShow } = useTUIKitContext();
+  const { setTUIManageShow } = useUIManager();
   const openTUIManage = () => {
     setTUIManageShow && setTUIManageShow(true);
   };

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 {
 
-}
+}

package/src/components/TUIContact/TUIContact.tsx

@@ -5,7 +5,7 @@ import {
   TUIContactContextValue,
 } from '../../context/TUIContactContext';
 import { isH5 } from '../../utils/env';
-import { useTUIKitContext } from '../../context';
+import { useUIManager } from '../../context';
 import useTUIContact from './hooks/useTUIContact';
 import { TUIContactList } from './TUIContactList/TUIContactList';
 import { TUIContactSearch } from '../TUIContactSearch/TUIContactSearch';
@@ -17,7 +17,7 @@ export function UnMemoizedTUIContact<T>(
 ): React.ReactElement {
   const { children } = props;
   const { t } = useTranslation();
-  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { setActiveContact } = useUIManager('TUIContact');
   const [isShowAddFriend, setShowAddFriend] = useState(false);
   const addFriend = () => {
     setActiveContact();

package/src/components/TUIContact/TUIContactInfo/TUIContactInfo.tsx

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren,
 } from 'react';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { isH5 } from '../../../utils/env';
 import { FriendInfo } from './friendInfo';
 import { BlockInfo } from './blockInfo';
@@ -18,7 +18,7 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { showChats } = props;
-  const { contactData } = useTUIKitContext('TUIContact');
+  const { contactData } = useUIManager('TUIContact');
   if (!contactData?.type) {
     return (<> </>);
   }

package/src/components/TUIContact/TUIContactInfo/basicInfo.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Profile } from '@tencentcloud/chat';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { Icon, IconTypes } from '../../Icon';
 import { isH5 } from '../../../utils/env';
 
@@ -19,7 +19,7 @@ export function UnMemoizedBasicInfo<T extends Props>(
   const {
     userID, nick, selfSignature, avatar,
   } = profile;
-  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { setActiveContact } = useUIManager('TUIContact');
   const back = () => {
     TUIConversationService.switchConversation('');
     setActiveContact();

package/src/components/TUIContact/TUIContactInfo/blockInfo.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Profile } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { BasicInfo } from './basicInfo';
 import { Switch } from '../../Switch';
 import useContactInfo from './hooks/useContactInfo';
@@ -13,7 +13,7 @@ export function UnMemoizedBlockInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
   const { profile } = props;
-  const { contactData, setActiveContact } = useTUIKitContext('TUIContact');
+  const { contactData, setActiveContact } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const [isAddToBlocklist, setIsAddToBlocklist] = useState(false);
 

package/src/components/TUIContact/TUIContactInfo/friendApplication.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import TencentCloudChat, { FriendApplication } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 import useContactInfo from './hooks/useContactInfo';
 
@@ -11,7 +11,7 @@ interface Props {
 export function UnMemoizedFriendApplication<T extends Props>(
   props: T,
 ): React.ReactElement {
-  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const { setActiveContact } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const { application } = props;
   const {

package/src/components/TUIContact/TUIContactInfo/friendInfo.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Friend } from '@tencentcloud/chat';
 import { TUIConversationService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useTUIKitContext } from '../../../context';
+import { useUIKit, useUIManager } from '../../../context';
 import { BasicInfo } from './basicInfo';
 import { Switch } from '../../Switch';
 import useContactInfo from './hooks/useContactInfo';
@@ -16,9 +16,10 @@ interface Props {
 export function UnMemoizedFriendInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
+  const { chat } = useUIKit();
   const {
-    chat, contactData, setActiveContact, setActiveConversation,
-  } = useTUIKitContext('TUIContact');
+    contactData, setActiveContact, setActiveConversation,
+  } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const { friend, showChats } = props;
   const { userID, profile, remark } = friend;

package/src/components/TUIContact/TUIContactInfo/groupInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TUIConversationService, IGroupModel, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useTUIKitContext } from '../../../context';
+import { useUIManager } from '../../../context';
 import { Icon, IconTypes } from '../../Icon';
 import { isH5 } from '../../../utils/env';
 import '../index.scss';
@@ -16,8 +16,8 @@ export function UnMemoizedGroupInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
   const { group, showChats } = props;
-  
-  const { setActiveContact, setActiveConversation } = useTUIKitContext('TUIContact');
+
+  const { setActiveContact, setActiveConversation } = useUIManager('TUIContact');
   const { t } = useTranslation();
   const { groupID, name, avatar } = group;
 

package/src/components/TUIContact/TUIContactInfo/hooks/useContactInfo.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
 import { Toast } from '../../../Toast';
-import { useTUIKitContext } from '../../../../context';
+import { useUIKit } from '../../../../context';
 
 function useContactInfo() {
-  const { chat } = useTUIKitContext('useContactInfo');
+  const { chat } = useUIKit('useContactInfo');
 
   const removeFromBlocklist = useCallback((userID: string) => {
     chat.removeFromBlacklist({

package/src/components/TUIContact/TUIContactList/TUIContactList.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
-import { useTUIKitContext, useTUIContactContext } from '../../../context';
+import { useUIManager, useTUIContactContext } from '../../../context';
 import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
 import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
@@ -19,7 +19,7 @@ interface RenderContactListProps {
 }
 
 function UnMemoizedTUIContactList<T>(): React.ReactElement {
-  const { setActiveContact } = useTUIKitContext();
+  const { setActiveContact } = useUIManager();
   const { t } = useTranslation();
   const {
     isShowContactList, friendList, blocklistProfile, friendApplicationList,
@@ -143,21 +143,21 @@ const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContac
               </div>
             );
           })}
-        <RenderContactList 
+        <RenderContactList
           type={'block'}
           title={t('TUIContact.Blocked List')}
           isShow={isShowBlocklist}
           setShow={setShowBlocklist}
           list={blocklistProfile}
         />
-        <RenderContactList 
+        <RenderContactList
           type={'group'}
           title={t('TUIContact.Group List')}
           setShow={setShowGrouplist}
           isShow={isShowGrouplist}
           list={groupList}
         />
-        <RenderContactList 
+        <RenderContactList
           type={'friend'}
           title={t('TUIContact.Friends')}
           setShow={setShowFriends}

package/src/components/TUIContact/hooks/useTUIContact.tsx

@@ -5,10 +5,10 @@ import {
   StoreName,
   IGroupModel,
 } from '@tencentcloud/chat-uikit-engine';
-import { useTUIKitContext } from '../../../context';
+import { useUIKit } from '../../../context';
 
 function useTUIContact() {
-  const { chat } = useTUIKitContext();
+  const { chat } = useUIKit();
   const [friendList, setFriendList] = useState([]);
   const [blockList, setBlockList] = useState([]);
   const [friendApplicationList, setFriendApplicationList] = useState([]);

package/src/components/TUIContactSearch/TUIContactSearch.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTUIKitContext, useTUIContactContext } from '../../context';
+import { useUIManager, useTUIContactContext } from '../../context';
 import useContactSearch from './hooks/useContactSearch';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultUserAvatar } from '../Avatar';
@@ -8,7 +8,7 @@ import { Input } from '../Input';
 import './index.scss';
 
 export function UnMemoizedTUIContactSearch<T>(): React.ReactElement {
-  const { chat, setActiveContact } = useTUIKitContext('TUIContactSearch');
+  const { setActiveContact } = useUIManager('TUIContactSearch');
   const { t } = useTranslation();
   const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
   const [isShowSearchResult, setShowSearchResult] = useState(false);

package/src/components/TUIContactSearch/hooks/useContactSearch.tsx

@@ -1,9 +1,9 @@
 import TencentCloudChat from '@tencentcloud/chat';
-import { useTUIKitContext, useTUIContactContext } from '../../../context';
+import { useUIKit, useTUIContactContext } from '../../../context';
 
 function useContactSearch() {
   const { blockList } = useTUIContactContext('TUIContactList');
-  const { chat } = useTUIKitContext('TUIContactSearch');
+  const { chat } = useUIKit('TUIContactSearch');
 
   const checkFriend = (info: any): Promise<any> => chat.checkFriend({
     userIDList: [info?.userID],