@tencentcloud/chat-uikit-react 2.2.5 → 2.2.7

package/src/components/TUIContact/TUIContactList/index.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-contacts-list {
   flex: 1 1 auto;
   min-width: 360px;
@@ -5,33 +7,47 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  border-right: 1px solid #F9FAFB;
   text-align: initial;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  overflow: hidden scroll;
+
+  @include theme() {
+    color: get(text-color-primary);
+  }
+
   .tui-contacts-title {
     display: flex;
     justify-content: space-between;
   }
+
   .tui-contacts-list-title {
     display: flex;
     padding: 10px 20px;
+    cursor: pointer;
   }
+
   .tui-contacts-list-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 20px;
+
+    .contacts-list-icon {
+      font-size: 12px;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
+    }
   }
+
   .tui-contacts-list-item {
     align-items: center;
     cursor: pointer;
     display: flex;
     padding: 10px 20px;
     text-align: center;
-    font-family: PingFangSC-Medium;
     font-size: 14px;
-    line-height: 20px;
+
     .tui-contacts-list-item-card {
       display: flex;
       padding: 0 10px;
@@ -40,39 +56,41 @@
       justify-content: space-between;
       flex: 1;
     }
+
     .tui-contacts-list-item-container {
       margin-left: 10px;
     }
+
+    .text-ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     .tui-contacts-list-item-text {
       color: #999;
       font-size: 12px;
       text-align: left;
-      @extend .text-ellipsis
+
+      @extend .text-ellipsis;
     }
+
     .tui-contacts-list-btn-text {
       color: #999;
       font-size: 12px;
       text-align: left;
     }
+
     .tui-contacts-list-item-name {
-      color: #000;
-      font-weight: 400;
-      text-align: left;
-      @extend .text-ellipsis
+      @extend .text-ellipsis;
     }
-
-  }
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
+
   .application-btn {
     width: 30px;
     height: 14px;
     padding: 5px;
     border-radius: 15px;
-    border: none;
     font-size: 10px;
     text-align: center;
     line-height: 14px;
@@ -80,16 +98,18 @@
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
-    border: 1px solid #006EFF;
-    background: #006EFF;
+    border: 1px solid #006eff;
+    background: #006eff;
     color: #fff;
   }
 }
+
 ::-webkit-scrollbar {
   display: none;
 }
+
 .tui-contacts-list-h5 {
   min-width: 100%;
   width: 100%;
   max-width: 100%;
-}
+}

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([]);
@@ -43,13 +43,13 @@ function useTUIContact() {
   };
 
   const getFriendList = async () => {
-    const { code, data } = await chat.getFriendList();
+    const { code, data } = await chat?.getFriendList();
     if (code === 0) {
       setFriendList(data);
     }
   };
   const getBlocklist = async () => {
-    const { data: _blocklist } = await chat.getBlacklist();
+    const { data: _blocklist } = await chat?.getBlacklist();
     if (_blocklist.length === 0) {
       return;
     }
@@ -57,7 +57,7 @@ function useTUIContact() {
     getBlocklistProfile(_blocklist);
   };
 
-  const getBlocklistProfile = async (_blocklist: Array<string>) => {
+  const getBlocklistProfile = async (_blocklist: string[]) => {
     const { data } = await chat.getUserProfile({
       userIDList: _blocklist,
     });

package/src/components/TUIContact/index.scss

@@ -1,3 +1,5 @@
+@use "../../styles/colors/color-theme" as *;
+
 .tui-contacts {
   height: 100%;
   min-width: 360px;
@@ -7,66 +9,83 @@
   position: relative;
   text-align: initial;
   overflow: hidden;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
   .tui-contacts-header {
     position: relative;
     display: flex;
     align-items: center;
     padding: 10px 20px 10px 10px;
   }
+
   .tui-contact-input {
     width: 100%;
   }
+
   .tui-contacts-add {
-    display: flex;
-    color: #147AFF;
+    color: #147aff;
     font-size: 20px;
     align-items: center;
     cursor: pointer;
     display: flex;
     text-align: center;
+
     .tui-conversation-create-icon {
       display: flex;
       align-items: center;
       justify-content: center;
     }
   }
+
   .tui-contacts-add-header {
     align-items: center;
-    background-color: #f9fafb;
     display: flex;
     flex-direction: row;
     padding: 16px 20px;
     text-align: center;
     margin-bottom: 10px;
+
+    @include theme() {
+      background-color: get(bg-color-operate);
+    }
+
     .tui-contacts-add-header-title {
-      color: #000;
-      font-family: PingFangSC-Medium;
       font-size: 20px;
       font-weight: 600;
-      letter-spacing: -.41px;
-      line-height: 32px;
       margin-left: 10px;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
     }
   }
+
   .no-result {
     padding: 0 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
+
     &-icon {
       margin: 100px auto 50px;
     }
+
     &-message {
-      color: #999999;
-      font-weight: 400;
       font-size: 16px;
-      font-family: PingFangSC-Medium;
       line-height: 22px;
+
+      @include theme() {
+        color: get(text-color-secondary);
+      }
     }
   }
 }
+
 .tui-contacts-h5 {
   min-width: 100%;
   width: 100%;
   max-width: 100%;
-}
+}

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],

package/src/components/TUIContactSearch/index.scss

@@ -1,24 +1,33 @@
+@use "../../styles/colors/color-theme" as *;
+
 .tui-contact-search {
   width: 100%;
   position: relative;
   text-align: initial;
   align-items: center;
   justify-content: space-between;
+
   .tui-contact-search-input {
     margin: 0 10px;
   }
+
   .tui-contact-search-text {
-    color: #147AFF;
+    color: #147aff;
     font-size: 14px;
   }
+
   .tui-contact-search-item {
     position: absolute;
     margin: 10px 20px;
     display: flex;
     align-items: center;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
     .search-item-name {
-     padding-left: 10px;
+      padding-left: 10px;
     }
   }
 }
-

package/src/components/TUIConversationList/TUIConversationList.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Conversation } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 import { isH5 } from '../../utils/env';
 import useConversationList from './hooks/useConversationList';
 import './index.scss';
@@ -43,13 +43,13 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     },
   } = props;
   const { t } = useTranslation();
+  const { chat } = useUIKit('TUIConversationList');
   const {
-    chat,
     customClasses,
     conversation,
     setActiveConversation,
     setTUIProfileShow,
-  } = useTUIKitContext('TUIConversationList');
+  } = useUIManager('TUIConversationList');
   const { filterConversation: contextFilterConversation } = useTUIConversationContext('TUIConversationList');
   const filterConversation = propsFilterConversation || contextFilterConversation;
   const [conversationUpdateCount, setConversationUpdateCount] = useState(0);
@@ -64,7 +64,6 @@ export function UnMemoTUIConversationList<T extends Props>(props: T):React.React
     if (!conversationList.length) {
       return;
     }
-    setActiveConversation(conversation);
   };
   const { conversationList, setConversationList } = useConversationList(
     chat,

package/src/components/TUIConversationList/hooks/useConversationUpdate.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import TencentCloudChat, { Conversation } from '@tencentcloud/chat';
-import { useTUIKitContext } from '../../../context';
+import { useUIKit } from '../../../context';
 
 export const useConversationUpdate = (
   setConversationList?: React.Dispatch<React.SetStateAction<Array<Conversation>>>,
@@ -11,7 +11,7 @@ export const useConversationUpdate = (
   forceUpdate?: () => void,
   filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 ) => {
-  const { chat } = useTUIKitContext('useConversationUpdate');
+  const { chat } = useUIKit('useConversationUpdate');
   useEffect(() => {
     const onConversationListUpdated = (event:any) => {
       if (setConversationList) {

package/src/components/TUIConversationList/index.scss

@@ -1,17 +1,16 @@
 @use "../../styles/colors/color-theme" as *;
 
 .tui-conversation {
-  flex: 1;
-  box-sizing: border-box;
-  overflow: hidden;
+  flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   position: relative;
   text-align: initial;
+  overflow: auto;
 
   @include theme() {
-    background-color: get(bg-primary);
+    background-color: get(bg-color-operate);
   }
 
   .tui-conversation-header {

package/src/components/TUIManage/TUIManage.tsx

@@ -5,7 +5,7 @@ import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { Switch } from '../Switch';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 import { isH5, isPC } from '../../utils/env';
 import { getMessageProfile } from '../ConversationPreview/utils';
 import { useConversationUpdate } from '../TUIConversationList/hooks/useConversationUpdate';
@@ -19,13 +19,13 @@ function UnMemoizedTUIManage<T>(
   const [profile, setProfile] = useState<any>();
   const [isPinned, setIsPinned] = useState<boolean>(false);
   const [forceUpdateCount, setForceUpdateCount] = useState(0);
+  const { chat } = useUIKit('TUIManage');
   const {
     conversation: activeConversation,
     setActiveConversation,
-    chat,
     TUIManageShow,
     setTUIManageShow,
-  } = useTUIKitContext('TUIManage');
+  } = useUIManager('TUIManage');
   useConversationUpdate(undefined, () => {
     setForceUpdateCount((count) => count + 1);
   });

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

@@ -1,10 +1,17 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-manage {
   display: flex;
   flex-direction: column;
   width: 22%;
   max-width: 300px;
   min-width: 200px;
-  border-left: 1px solid #f9fafb;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+    border-left: 1px solid get(stroke-color-primary);
+  }
 
   .red {
     color: #ff584c !important;
@@ -19,8 +26,6 @@
       margin-right: 10px;
       font-weight: 700;
       font-size: 14px;
-      font-family: PingFangSC-Medium;
-      line-height: 17px;
     }
   }
 
@@ -39,16 +44,11 @@
         text-align: center;
         font-weight: 700;
         font-size: 24px;
-        font-family: PingFangSC-Medium;
-        line-height: 29px;
         margin-bottom: 10px;
       }
 
       .info-id {
-        font-weight: 400;
         font-size: 12px;
-        font-family: PingFangSC-Medium;
-        line-height: 14px;
         color: #666;
         margin-bottom: 30px;
         text-align: center;
@@ -58,11 +58,13 @@
     .tui-manage-handle {
       .manage-handle-box {
         display: flex;
-        background: rgba(249, 249, 249, 94%);
         align-items: center;
         justify-content: space-between;
         padding: 10px;
-        box-sizing: border-box;
+
+        @include theme() {
+          background: get(bg-color-operate);
+        }
 
         &:nth-child(2) {
           margin-top: 10px;
@@ -71,9 +73,10 @@
 
         .manage-handle-title {
           font-size: 16px;
-          font-family: PingFangSC-Medium;
-          line-height: 22px;
-          color: rgba(0, 0, 0, 60%);
+
+          @include theme() {
+            color: get(text-color-primary);
+          }
         }
       }
     }
@@ -91,5 +94,8 @@
   max-width: 100%;
   min-width: 100%;
   z-index: 1;
-  background: #fff;
+
+  @include theme() {
+    background: get(bg-color-operate);
+  }
 }

package/src/components/TUIMessage/MessageAvatar.tsx

@@ -5,18 +5,18 @@ import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_FLOW } from '../../constants';
 import { messageShowType } from '../../context';
 import { Avatar } from '../Avatar';
-import { handleDisplayAvatar } from '../untils';
+import { handleDisplayAvatar } from '../utils';
 
 export interface MessageAvatarProps {
-  CustomAvatar?: React.ReactElement,
-  className?: string,
-  message: Message,
-  showType?: messageShowType,
+  CustomAvatar?: React.ReactElement;
+  className?: string;
+  message: Message;
+  showType?: messageShowType;
 }
 
-export function MessageAvatar <T extends MessageAvatarProps>(
+export function MessageAvatar<T extends MessageAvatarProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     className,
     CustomAvatar,

package/src/components/TUIMessage/MessageBubble.tsx

@@ -6,22 +6,23 @@ import React, {
 } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_STATUS } from '../../constants';
+import { isCallMessage } from './utils';
 import { useTUIChatActionContext, useTUIChatStateContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { useMessageReply } from './hooks/useMessageReply';
 import { MessageProgress } from './MessageProgress';
 
 export interface MessageBubbleProps {
-  message?: Message,
-  className?: string,
-  children?: ReactNode,
-  Context?: React.ComponentType<any>,
-  Plugins?: React.ComponentType<any> | undefined,
+  message?: Message;
+  className?: string;
+  children?: ReactNode;
+  Context?: React.ComponentType<any>;
+  Plugins?: React.ComponentType<any> | undefined;
 }
 
-function MessageBubbleWithContext <T extends MessageBubbleProps>(
+function MessageBubbleWithContext<T extends MessageBubbleProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     message,
     children,
@@ -68,7 +69,7 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
   const handleReplyMessage = () => {
     // eslint-disable-next-line
     // @ts-ignore
-    setHighlightedMessageId  && setHighlightedMessageId(replyMessage?.ID);
+    setHighlightedMessageId && setHighlightedMessageId(replyMessage?.ID);
   };
 
   return (
@@ -90,15 +91,15 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
         >
           {
             messageReply && (
-            <div
-              className="meesage-bubble-reply-main"
-              role="menuitem"
-              tabIndex={0}
-              onClick={handleReplyMessage}
-            >
-              <header className="title">{sender}</header>
-              {Context && <Context message={replyMessage} />}
-            </div>
+              <div
+                className="meesage-bubble-reply-main"
+                role="menuitem"
+                tabIndex={0}
+                onClick={handleReplyMessage}
+              >
+                <header className="title">{sender}</header>
+                {Context && <Context message={replyMessage} />}
+              </div>
             )
           }
           {children}
@@ -106,9 +107,9 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
         </div>
         {
           Plugins && (
-          <div className="message-plugin">
-            {PluginsShow && <Plugins message={message} />}
-          </div>
+            <div className="message-plugin">
+              {PluginsShow && <Plugins message={message} />}
+            </div>
           )
         }
       </div>
@@ -129,7 +130,7 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
 const MemoizedMessageBubble = React.memo(MessageBubbleWithContext) as
 typeof MessageBubbleWithContext;
 
-export function MessageBubble(props:MessageBubbleProps):React.ReactElement {
+export function MessageBubble(props: MessageBubbleProps): React.ReactElement {
   return (
     <MemoizedMessageBubble {...props} />
   );