@tencentcloud/chat-uikit-react 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "type": "module",
   "module": "dist/index.js",
   "exports": {
@@ -43,7 +43,7 @@
     "@tencentcloud/chat": "^3.5.2",
     "@tencentcloud/chat-uikit-engine": "~2.5.1",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/uikit-base-component-react": "0.1.0",
+    "@tencentcloud/uikit-base-component-react": "0.3.7",
     "tuikit-atomicx-react": "0.1.2",
     "@tencentcloud/universal-api": "^2.4.0",
     "@tiptap/extension-image": "2.0.0-beta.220",

package/src/components/ChatHeader/ChatHeaderActions/ChatHeaderActions.tsx

@@ -3,11 +3,11 @@ import { CallMediaType } from '@tencentcloud/call-uikit-react';
 import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import { useUIKit, IconSearch, IconVideoDefault, IconCall1, IconHorizontalMoreTwo } from '@tencentcloud/uikit-base-component-react';
-import { useUIOpenControlState, View, useConversationListState, startCall } from 'tuikit-atomicx-react';
 import cs from 'classnames';
+import { useUIOpenControlState, View, useConversationListState, startCall } from 'tuikit-atomicx-react';
 import classes from './ChatHeaderActions.module.scss';
 
-interface IChatHeaderActionsProps {
+interface ChatHeaderActionsProps {
   /** Whether to enable call features */
   chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
   /** Additional class names */
@@ -16,7 +16,7 @@ interface IChatHeaderActionsProps {
   style?: React.CSSProperties | undefined;
 }
 
-const ChatHeaderActions = (props: IChatHeaderActionsProps) => {
+const ChatHeaderActions = (props: ChatHeaderActionsProps) => {
   const {
     chatHeaderActions = ['videoCall', 'audioCall', 'search', 'chatSetting'],
     className,
@@ -102,4 +102,4 @@ const ChatHeaderActions = (props: IChatHeaderActionsProps) => {
   );
 };
 export { ChatHeaderActions };
-export type { IChatHeaderActionsProps };
+export type { ChatHeaderActionsProps };

package/src/components/ChatHeader/ChatHeaderUI/ChatHeaderUI.tsx

@@ -1,14 +1,14 @@
 import type React from 'react';
 import { useUIKit, IconChevronLeft } from '@tencentcloud/uikit-base-component-react';
-import { useConversationListState, View, Avatar as DefaultAvatar, useUIOpenControlState } from 'tuikit-atomicx-react';
 import cs from 'classnames';
+import { useConversationListState, View, Avatar as DefaultAvatar, useUIOpenControlState } from 'tuikit-atomicx-react';
 import { ChatHeaderActions } from '../ChatHeaderActions';
 import classes from './ChatHeaderUI.module.scss';
 import type { IUserStatus } from '../../../types/user';
 import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
 import type { AvatarProps } from 'tuikit-atomicx-react';
 
-interface IChatHeaderUIProps {
+interface ChatHeaderUIProps {
   /** Custom title, if not provided, will use conversation info */
   title: string;
   /** Whether it's a group conversation */
@@ -42,7 +42,7 @@ const UserStatus = {
   Offline: 'Offline',
 };
 
-const ChatHeaderUI = (props: IChatHeaderUIProps) => {
+const ChatHeaderUI = (props: ChatHeaderUIProps) => {
   const {
     title,
     avatar,
@@ -95,10 +95,10 @@ const ChatHeaderUI = (props: IChatHeaderUIProps) => {
           {
             Avatar
               ? (
-                <Avatar src={avatar || ''} />
+                <Avatar src={avatar || ''} alt={title} />
               )
               : (
-                <DefaultAvatar src={avatar || ''} />
+                <DefaultAvatar src={avatar || ''} alt={title} isShowOnlineStatus={!isGroup && enableUserStatus} isOnline={userStatus?.statusType === 1} />
               )
           }
           <View className={classes['chat-header__info']}>

package/src/states/ChatHeaderState.ts

@@ -59,25 +59,24 @@ function useChatHeaderState(): UseChatHeaderStoreReturn {
 
   const avatar = useMemo<string>(() => {
     if (!activeConversation) {
-      return undefined;
+      return '';
     }
 
     if (isSystemConversation) {
-      return undefined;
+      return '';
     }
 
     const {
       type,
       userProfile,
-      groupProfile,
     } = activeConversation;
 
     if (type === TUIChatEngine.TYPES.CONV_C2C) {
-      return userProfile?.avatar || defaultUserAvatar;
+      return userProfile?.avatar;
     }
 
     if (type === TUIChatEngine.TYPES.CONV_GROUP) {
-      return groupProfile?.avatar || DEFAULT_GROUP_COMMON_AVATAR;
+      return activeConversation.getAvatar();
     }
 
     return '';