@tencentcloud/chat-uikit-react 3.0.2 → 3.4.2

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 { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import cs from 'classnames';
-import { ChatHeaderActions } from '../ChatHeaderActions';
+import { View, Avatar as DefaultAvatar } from 'tuikit-atomicx-react';
+import { AudioCallPicker } from '../AudioCallPicker';
+import { VideoCallPicker } from '../VideoCallPicker';
 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';
+import type { UserStatus } from '../../../types/user';
+import type { ConversationModel } 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 */
@@ -18,17 +18,23 @@ interface IChatHeaderUIProps {
   /** Whether the peer is typing */
   isPeerTyping?: boolean;
   /** user status */
-  userStatus?: IUserStatus | undefined;
+  userStatus?: UserStatus | undefined;
   /** Whether to show user status */
-  enableUserStatus?: boolean;
+  enableUserStatus?: boolean | undefined;
+  /** Whether to show call features */
+  enableCall?: boolean | undefined;
   /** Whether it's a system conversation */
   system?: boolean | undefined;
   /** IM conversation model */
-  conversation?: IConversationModel | undefined;
+  conversation?: ConversationModel | undefined;
   /** Whether to show call features */
   chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
   /** Custom avatar component */
-  Avatar?: React.ComponentType<AvatarProps> | undefined;
+  Avatar?: React.ComponentType<any> | undefined;
+  /** Custom left slot */
+  ChatHeaderLeft?: React.ReactNode | undefined;
+  /** Custom right slot */
+  ChatHeaderRight?: React.ReactNode | undefined;
   /** Additional class names */
   className?: string | undefined;
   /** Additional style */
@@ -37,12 +43,7 @@ interface IChatHeaderUIProps {
   onSearchClick?: (() => void) | undefined;
 }
 
-const UserStatus = {
-  Online: 'Online',
-  Offline: 'Offline',
-};
-
-const ChatHeaderUI = (props: IChatHeaderUIProps) => {
+const ChatHeaderUI = (props: ChatHeaderUIProps) => {
   const {
     title,
     avatar,
@@ -50,18 +51,17 @@ const ChatHeaderUI = (props: IChatHeaderUIProps) => {
     system = false,
     userStatus,
     enableUserStatus = true,
-    chatHeaderActions,
+    enableCall = false,
     Avatar,
     isGroup,
     className,
     style,
+    ChatHeaderLeft = null,
+    ChatHeaderRight = null,
   } = props;
 
   const { t } = useUIKit();
 
-  const { setChatSettingOpen, setChatSearchOpen } = useUIOpenControlState();
-  const { setActiveConversation } = useConversationListState();
-
   if (system) {
     return (
       <View
@@ -73,12 +73,6 @@ const ChatHeaderUI = (props: IChatHeaderUIProps) => {
     );
   }
 
-  function clearCurrentConversation() {
-    setActiveConversation('');
-    setChatSettingOpen(false);
-    setChatSearchOpen(false);
-  }
-
   return (
     <View
       className={cs(classes['chat-header'], className)}
@@ -86,19 +80,14 @@ const ChatHeaderUI = (props: IChatHeaderUIProps) => {
     >
       <View className={classes['chat-header__container']}>
         <View className={classes['chat-header__left']}>
-          <button className={cs(classes['icon-button'], classes['chat-header__back-icon'])} onClick={clearCurrentConversation}>
-            <IconChevronLeft
-              onClick={clearCurrentConversation}
-              size="28px"
-            />
-          </button>
+          {ChatHeaderLeft}
           {
             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']}>
@@ -112,13 +101,17 @@ const ChatHeaderUI = (props: IChatHeaderUIProps) => {
               )}
             </View>
             {!isGroup && enableUserStatus && (userStatus?.statusType === 1
-              ? <View className={classes['chat-header__live']}>{t(`TUIChat.${UserStatus.Online}`)}</View>
-              : <View className={classes['chat-header__live']}>{t(`TUIChat.${UserStatus.Offline}`)}</View>)}
+              ? <View className={classes['chat-header__live']}>{t('TUIChat.Online')}</View>
+              : <View className={classes['chat-header__live']}>{t('TUIChat.Offline')}</View>)}
           </View>
         </View>
-        <ChatHeaderActions
-          chatHeaderActions={chatHeaderActions}
-        />
+        {enableCall && (
+          <View className={classes['chat-header__call']} flexDir="row" gap={8}>
+            <AudioCallPicker />
+            <VideoCallPicker />
+          </View>
+        )}
+        {ChatHeaderRight}
       </View>
     </View>
   );

package/src/components/ChatHeader/VideoCallPicker/VideoCallPicker.module.scss

@@ -0,0 +1,57 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.video-call-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    border: none;
+    background: transparent;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+    outline: none;
+
+    @include theme() {
+      &:hover {
+        background-color: get(button-color-secondary-hover);
+      }
+
+      &:active {
+        background-color: get(button-color-secondary-active);
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    transition: color 0.2s ease;
+
+    @include theme() {
+      color: get(text-color-link);
+    }
+  }
+}
+
+// Global styles for dialog (non-module)
+
+.group-call-dialog {
+  background: white;
+  border-radius: 8px;
+  max-width: 500px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 15%);
+}

package/src/components/ChatHeader/VideoCallPicker/VideoCallPicker.tsx

@@ -0,0 +1,233 @@
+import type React from 'react';
+import { useState, useRef, useMemo, useCallback } from 'react';
+import {
+  IconVideoFilled,
+  Dialog,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-react';
+import cs from 'classnames';
+import {
+  View,
+  useConversationListState,
+  useGroupSettingState,
+  ConversationType,
+  startCall,
+  UserPicker,
+  useLoginState,
+} from 'tuikit-atomicx-react';
+import classes from './VideoCallPicker.module.scss';
+import type { IUserPickerRef } from 'tuikit-atomicx-react';
+
+interface VideoCallPickerProps {
+  /**
+   * Label text for the button
+   */
+  label?: string;
+  /**
+   * Icon size in pixels
+   */
+  iconSize?: number;
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Custom className for the button
+   */
+  className?: string;
+  /**
+   * Custom style for the button
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom icon slot
+   */
+  children?: React.ReactNode;
+}
+
+interface GroupMemberOption {
+  key: string;
+  label: string;
+  avatarUrl?: string;
+}
+
+const VIDEO_CALL_TYPE = 2;
+const MEMBER_PAGE_SIZE = 80;
+const MAX_GROUP_CALL_MEMBERS = 8;
+const MIN_GROUP_CALL_MEMBERS = 1;
+
+const VideoCallPicker = (props: VideoCallPickerProps) => {
+  const {
+    label = '',
+    iconSize = 20,
+    disabled = false,
+    className,
+    style,
+    children,
+  } = props;
+
+  const { t } = useUIKit();
+  const { loginUserInfo } = useLoginState();
+  const { activeConversation } = useConversationListState();
+  const { allMembers, getGroupMemberList, memberCount } = useGroupSettingState();
+
+  const [isGroupCallDialogVisible, setIsGroupCallDialogVisible] = useState(false);
+  const groupMemberPickerRef = useRef<IUserPickerRef>(null);
+
+  const selfUserId = useMemo(() => loginUserInfo?.userId, [loginUserInfo]);
+
+  const isPrivateConversation = useMemo(() => activeConversation?.type === ConversationType.C2C, [activeConversation]);
+
+  const groupMemberOptions = useMemo<GroupMemberOption[]>(() => allMembers?.map((member: any) => ({
+    key: member.userID,
+    label: member.nick || member.userID,
+    avatarUrl: member.avatar,
+  })) ?? [], [allMembers]);
+
+  const canStartCall = useMemo(() => {
+    if (!activeConversation || disabled) {
+      return false;
+    }
+    // TODO: add more call permission check logic
+    return true;
+  }, [activeConversation, disabled]);
+
+  const initiatePrivateCall = useCallback((): void => {
+    const peerUserId = activeConversation?.userProfile?.userID;
+    if (!peerUserId) {
+      console.warn('No peer user ID found for C2C call');
+      return;
+    }
+
+    try {
+      startCall({
+        userIDList: [peerUserId],
+        type: VIDEO_CALL_TYPE,
+      });
+    } catch (error) {
+      console.error('Failed to start private video call:', error);
+    }
+  }, [activeConversation]);
+
+  const loadMoreGroupMembers = useCallback((): void => {
+    if (activeConversation?.type !== ConversationType.GROUP) {
+      return;
+    }
+
+    const currentMemberCount = allMembers?.length || 0;
+    const totalMemberCount = memberCount || 0;
+
+    if (currentMemberCount < totalMemberCount) {
+      getGroupMemberList({
+        count: MEMBER_PAGE_SIZE,
+        offset: currentMemberCount,
+      });
+    }
+  }, [activeConversation, allMembers, memberCount, getGroupMemberList]);
+
+  const showGroupCallDialog = useCallback((): void => {
+    loadMoreGroupMembers();
+    setIsGroupCallDialogVisible(true);
+  }, [loadMoreGroupMembers]);
+
+  const handleCloseGroupCallDialog = useCallback(() => {
+    setIsGroupCallDialogVisible(false);
+  }, []);
+
+  const initiateGroupCall = useCallback((): void => {
+    const currentGroupId = activeConversation?.groupProfile?.groupID;
+    if (!groupMemberPickerRef.current || !currentGroupId) {
+      console.warn('Missing group information for group call');
+      return;
+    }
+
+    const selectedMembers = groupMemberPickerRef.current.getSelectedItems();
+    if (!Array.isArray(selectedMembers) || selectedMembers.length === 0) {
+      console.warn('No members selected for group call');
+      return;
+    }
+
+    const selectedUserIds = selectedMembers.map(member => member.key);
+
+    try {
+      startCall({
+        userIDList: selectedUserIds,
+        chatGroupID: currentGroupId,
+        type: VIDEO_CALL_TYPE,
+      });
+
+      handleCloseGroupCallDialog();
+    } catch (error) {
+      console.error('Failed to start group video call:', error);
+    }
+  }, [activeConversation, handleCloseGroupCallDialog]);
+
+  const handleVideoCallClick = useCallback(() => {
+    if (!canStartCall) {
+      console.warn('Cannot start video call');
+      return;
+    }
+
+    if (isPrivateConversation) {
+      initiatePrivateCall();
+    } else {
+      showGroupCallDialog();
+    }
+  }, [canStartCall, isPrivateConversation, initiatePrivateCall, showGroupCallDialog]);
+
+  const handleConfirmGroupCall = useCallback(() => {
+    initiateGroupCall();
+  }, [initiateGroupCall]);
+
+  return (
+    <>
+      <View>
+        <button
+          type="button"
+          className={cs(
+            classes['video-call-picker__button'],
+            {
+              [classes['video-call-picker__button--disabled']]: disabled,
+            },
+            className,
+          )}
+          style={style}
+          onClick={handleVideoCallClick}
+          disabled={disabled}
+          aria-label={label || 'Video Call'}
+        >
+          {children || (
+            <IconVideoFilled
+              className={classes['video-call-picker__icon']}
+              size={`${iconSize}px`}
+            />
+          )}
+        </button>
+
+        <Dialog
+          visible={isGroupCallDialogVisible}
+          title={t('MessageInput.select_call_members')}
+          cancelText={t('MessageInput.cancel')}
+          onCancel={handleCloseGroupCallDialog}
+          onClose={handleCloseGroupCallDialog}
+          confirmText={t('MessageInput.initiate_call')}
+          onConfirm={handleConfirmGroupCall}
+          className={classes['group-call-dialog']}
+        >
+          <UserPicker
+            ref={groupMemberPickerRef}
+            displayMode="list"
+            dataSource={groupMemberOptions}
+            lockedItems={selfUserId ? [{ key: selfUserId }] : []}
+            maxCount={MAX_GROUP_CALL_MEMBERS}
+            minCount={MIN_GROUP_CALL_MEMBERS}
+            onReachEnd={loadMoreGroupMembers}
+          />
+        </Dialog>
+      </View>
+    </>
+  );
+};
+
+export { VideoCallPicker };
+export type { VideoCallPickerProps };

package/src/components/ChatHeader/VideoCallPicker/index.ts

@@ -0,0 +1 @@
+export { VideoCallPicker } from './VideoCallPicker';

package/src/components/ChatHeader/index.ts

@@ -1,2 +1,3 @@
 export * from './ChatHeader';
-export * from './ChatHeaderActions';
+export * from './AudioCallPicker';
+export * from './VideoCallPicker';

package/src/components/Profile/Profile.tsx

@@ -1,11 +1,9 @@
 import type { PropsWithChildren } from 'react';
-import React from 'react';
-import { MyProfile } from './myProfile/index';
-
-import './styles/index.scss';
+import React, { useState } from 'react';
 import { useMyProfile } from './hooks';
+import { MyProfile } from './myProfile/index';
 import { TUIProfileDefault } from './ProfileDefault';
-import { useUIOpenControlState } from 'tuikit-atomicx-react';
+import './styles/index.scss';
 
 interface TUIProfileProps {
   className?: string | undefined;
@@ -22,7 +20,7 @@ function UnMemoizedProfile<T extends TUIProfileProps>(
 
   const { myProfile, updateMyProfile } = useMyProfile();
 
-  const { setProfileOpen, isProfileOpen } = useUIOpenControlState();
+  const [isProfileOpen, setProfileOpen] = useState(false);
 
   const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
 
@@ -42,6 +40,9 @@ function UnMemoizedProfile<T extends TUIProfileProps>(
             className={className}
             userInfo={myProfile}
             update={updateMyProfile}
+            onClose={() => {
+              setProfileOpen(false);
+            }}
           />
         )}
     </>

package/src/components/Profile/ProfileDefault.tsx

@@ -1,13 +1,12 @@
 import type { PropsWithChildren } from 'react';
 import React, { useState } from 'react';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite';
 import { IconChevronLeft, useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Avatar, useUIOpenControlState } from 'tuikit-atomicx-react';
-import { useUIManagerState } from '../../states';
+import { Avatar } from 'tuikit-atomicx-react';
 import { DivWithEdit } from '../DivWithEdit';
 import { DatePicker } from './DatePicker';
-import type { Profile } from '@tencentcloud/chat';
-import type { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine';
+import type { Profile } from '@tencentcloud/lite-chat';
+import type { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine-lite';
 
 const gender: any = {
   [TUIChatEngine.TYPES.GENDER_UNKNOWN]: 'Unknown',
@@ -53,6 +52,7 @@ const allowTypeList = [
 export interface TUIProfileDefaultProps {
   userInfo?: Profile | undefined;
   update?: ((option: UpdateMyProfileParams) => void) | undefined;
+  onClose?: () => void;
   className?: string | undefined;
 }
 
@@ -61,12 +61,12 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
 ): React.ReactElement {
   const {
     userInfo,
-    className,
     update,
+    onClose,
+    className,
   } = props;
 
   const { t } = useUIKit();
-  const { setProfileOpen } = useUIOpenControlState();
 
   const [isEditName, setIsEditName] = useState('');
 
@@ -242,7 +242,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
       <header
         className="tui-profile-header"
         onClick={() => {
-          setProfileOpen(false);
+          onClose?.();
         }}
       >
         <IconChevronLeft size="24px" />

package/src/components/Profile/hooks/useMyProfile.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
-import { Profile } from '@tencentcloud/chat';
 import {
   TUIUserService,
   TUIStore,
   StoreName,
   UpdateMyProfileParams,
-} from "@tencentcloud/chat-uikit-engine";
+} from "@tencentcloud/chat-uikit-engine-lite";
 export interface ProfileParams {
   nick?: string,
   avatar?: string,
@@ -23,7 +22,7 @@ export interface ProfileParams {
 }
 
 export function useMyProfile() {
-  const [myProfile, setMyProfile] = useState<Profile>();
+  const [myProfile, setMyProfile] = useState<any>();
 
   const updateMyProfile = (options: UpdateMyProfileParams) => {
     TUIUserService.updateMyProfile(options);

package/src/components/Profile/myProfile/MyProfile.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './styles/index.scss';
 import { defaultUserAvatar } from '../../../constant/avatar';
-import type { Profile as TProfile } from '@tencentcloud/chat';
+import type { Profile as TProfile } from '@tencentcloud/lite-chat';
 import { Avatar } from 'tuikit-atomicx-react';
 import { IconHorizontalMoreTwo } from '@tencentcloud/uikit-base-component-react';
 

package/src/context/ChatContext.tsx

@@ -1,6 +1,6 @@
 import { useContext, createContext, useMemo } from 'react';
 import { useUIManagerState } from '../states';
-import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import type { IConversationModel } from '@tencentcloud/chat-uikit-engine-lite';
 
 interface IChatProps {
   children?: React.ReactNode;

package/src/context/ContactContext.tsx

@@ -1,7 +1,7 @@
 import React, {
   PropsWithChildren, useContext,
 } from 'react';
-import { Friend, Profile, FriendApplication } from '@tencentcloud/chat';
+import type { Friend, Profile, FriendApplication } from '@tencentcloud/lite-chat';
 
 export interface TUIContactContextValue {
   friendList?: Friend[];

package/src/hooks/index.ts

@@ -1,5 +1,5 @@
-const tagDoNotDelete = 'chat-uikit-react';
+import { useChatHeader } from './useChatHeader';
 
 export {
-  tagDoNotDelete,
+  useChatHeader,
 };