@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

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

@@ -0,0 +1,44 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.chat-header-actions {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: auto;
+  gap: 8px;
+
+  &__button {
+    @include theme() {
+      color: get(text-color-link);
+    }
+  }
+}
+
+.icon-button {
+  flex: 0 0 auto;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  background: none;
+  // inline-flex: keeps button width snug while aligning icon & text
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+
+  @include theme() {
+    color: get(text-color-link);
+    background-color: get(dropdown-color-default);
+
+    &:hover {
+      background-color: get(dropdown-color-hover);
+    }
+
+    &:active {
+      background-color: get(dropdown-color-active);
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+import { useCallback, useMemo } from 'react';
+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 classes from './ChatHeaderActions.module.scss';
+
+interface IChatHeaderActionsProps {
+  /** Whether to enable call features */
+  chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
+  /** Additional class names */
+  className?: string | undefined;
+  /** Additional style */
+  style?: React.CSSProperties | undefined;
+}
+
+const ChatHeaderActions = (props: IChatHeaderActionsProps) => {
+  const {
+    chatHeaderActions = ['videoCall', 'audioCall', 'search', 'chatSetting'],
+    className,
+    style,
+  } = props;
+
+  const { searchConfig } = useUIKit();
+
+  const { toggleChatSetting, toggleChatSearch } = useUIOpenControlState();
+  const { activeConversation } = useConversationListState();
+
+  // Check if call feature is available
+  // Check if TUICallKit service is available
+  const isSupportCall: boolean = useMemo<boolean>(() => !!TUICore.getService(TUIConstants.TUICalling.SERVICE.NAME), []);
+  const isGroup: boolean = activeConversation?.type === TUIChatEngine.TYPES.CONV_GROUP;
+
+  // Handle call button click
+  const startCalling = useCallback((callMediaType: CallMediaType) => {
+    // Check if call is supported
+    if (!isSupportCall) {
+      return;
+    }
+
+    // Check if user is available
+    if (!activeConversation?.userProfile?.userID) {
+      throw new Error('User ID is not available in Call.');
+    }
+
+    startCall({
+      callType: activeConversation.type,
+      callMediaType,
+      userIDList: [activeConversation.userProfile.userID],
+    });
+  }, [activeConversation, isSupportCall]);
+
+  const actionButtons = useMemo(() => {
+    const buttonConfig = {
+      videoCall: {
+        icon: <IconVideoDefault size="28px" />,
+        onClick: () => startCalling(CallMediaType.VIDEO),
+        show: isSupportCall && !isGroup,
+      },
+      audioCall: {
+        icon: <IconCall1 size="28px" />,
+        onClick: () => startCalling(CallMediaType.AUDIO),
+        show: isSupportCall && !isGroup,
+      },
+      search: {
+        icon: <IconSearch size="28px" />,
+        onClick: toggleChatSearch,
+        show: !searchConfig?.hideSearch,
+      },
+      chatSetting: {
+        icon: <IconHorizontalMoreTwo size="28px" />,
+        onClick: toggleChatSetting,
+        show: true,
+      },
+    };
+
+    return chatHeaderActions
+      .filter(action => !!buttonConfig[action]?.show)
+      .map((action) => {
+        const config = buttonConfig[action];
+        return (
+          <button
+            key={action}
+            className={cs(classes['icon-button'])}
+            onClick={config.onClick}
+          >
+            {config.icon}
+          </button>
+        );
+      });
+  }, [chatHeaderActions, isSupportCall, startCalling, isGroup, toggleChatSetting]);
+
+  return (
+    <View
+      className={cs(classes['chat-header-actions'], className)}
+      style={style}
+    >
+      {actionButtons}
+    </View>
+  );
+};
+export { ChatHeaderActions };
+export type { IChatHeaderActionsProps };

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

@@ -0,0 +1 @@
+export * from './ChatHeaderActions';

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

@@ -0,0 +1,111 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.chat-header {
+  padding: 14px 10px;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+
+  @include responsive((
+    "mobile": (
+      padding: 14px 10px,
+    ),
+    "desktop": (
+      padding: 14px 20px,
+    ),
+  ));
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
+  &__container {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__left {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  &__back-icon {
+    @include responsive((
+      "mobile": (
+        display: flex,
+      ),
+      "desktop": (
+        display: none,
+      ),
+    ));
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__title {
+    display: block;
+    margin: 0;
+    font-size: 16px;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
+  }
+
+  &__typing-indicator {
+    font-size: 12px;
+
+    @include theme() {
+      color: get(text-color-secondary);
+    }
+  }
+
+  &__live {
+    margin-top: 4px;
+    font-size: 12px;
+
+    @include theme() {
+      color: get(text-color-tertiary);
+    }
+  }
+}
+
+.icon-button {
+  flex: 0 0 auto;
+  border: none;
+  padding: 4px;
+  margin: 0;
+  background: none;
+  // inline-flex: keeps button width snug while aligning icon & text
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+
+  @include theme() {
+    color: get(text-color-link);
+    background-color: get(dropdown-color-default);
+
+    &:hover {
+      background-color: get(dropdown-color-hover);
+    }
+
+    &:active {
+      background-color: get(dropdown-color-active);
+    }
+  }
+}

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

@@ -0,0 +1,127 @@
+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 { 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 {
+  /** Custom title, if not provided, will use conversation info */
+  title: string;
+  /** Whether it's a group conversation */
+  isGroup: boolean;
+  /** Custom avatar image URL */
+  avatar?: string;
+  /** Whether the peer is typing */
+  isPeerTyping?: boolean;
+  /** user status */
+  userStatus?: IUserStatus | undefined;
+  /** Whether to show user status */
+  enableUserStatus?: boolean;
+  /** Whether it's a system conversation */
+  system?: boolean | undefined;
+  /** IM conversation model */
+  conversation?: IConversationModel | undefined;
+  /** Whether to show call features */
+  chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
+  /** Custom avatar component */
+  Avatar?: React.ComponentType<AvatarProps> | undefined;
+  /** Additional class names */
+  className?: string | undefined;
+  /** Additional style */
+  style?: React.CSSProperties | undefined;
+  /** Search click callback */
+  onSearchClick?: (() => void) | undefined;
+}
+
+const UserStatus = {
+  Online: 'Online',
+  Offline: 'Offline',
+};
+
+const ChatHeaderUI = (props: IChatHeaderUIProps) => {
+  const {
+    title,
+    avatar,
+    isPeerTyping = false,
+    system = false,
+    userStatus,
+    enableUserStatus = true,
+    chatHeaderActions,
+    Avatar,
+    isGroup,
+    className,
+    style,
+  } = props;
+
+  const { t } = useUIKit();
+
+  const { setChatSettingOpen, setChatSearchOpen } = useUIOpenControlState();
+  const { setActiveConversation } = useConversationListState();
+
+  if (system) {
+    return (
+      <View
+        className={cs(classes['chat-header'], className)}
+        style={style}
+      >
+        System Notice
+      </View>
+    );
+  }
+
+  function clearCurrentConversation() {
+    setActiveConversation('');
+    setChatSettingOpen(false);
+    setChatSearchOpen(false);
+  }
+
+  return (
+    <View
+      className={cs(classes['chat-header'], className)}
+      style={style}
+    >
+      <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>
+          {
+            Avatar
+              ? (
+                <Avatar src={avatar || ''} />
+              )
+              : (
+                <DefaultAvatar src={avatar || ''} />
+              )
+          }
+          <View className={classes['chat-header__info']}>
+            <View className={classes['chat-header__title']}>
+              {title}
+              {!isGroup && isPeerTyping && (
+                <span className={classes['chat-header__typing-indicator']}>
+                  {' '}
+                  {t('TUIChat.Typing')}
+                </span>
+              )}
+            </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>
+        </View>
+        <ChatHeaderActions
+          chatHeaderActions={chatHeaderActions}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ChatHeaderUI;

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

@@ -0,0 +1,3 @@
+import ChatHeaderUI from './ChatHeaderUI';
+
+export default ChatHeaderUI;

package/src/components/ChatHeader/index.ts

@@ -1,2 +1,2 @@
 export * from './ChatHeader';
-export * from './ChatHeaderDefault';
+export * from './ChatHeaderActions';

package/src/components/Checkbox/index.tsx

@@ -10,7 +10,7 @@ interface onChangeParams {
 
 interface SelectProps {
   checked?: boolean;
-  className?: string;
+  className?: string | undefined;
   onChange?: (data?: onChangeParams) => void;
   value?: any;
   id?: string;

package/src/components/Checkbox/styles/color.scss

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .info {
   @include theme() {

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

@@ -1,2 +1,2 @@
-@import "./layout.scss";
-@import "./color.scss";
+@forward "./layout";
+@forward "./color";

package/src/components/Contact/Contact.tsx

@@ -4,8 +4,8 @@ import {
   TUIContactContextProvider,
   TUIContactContextValue,
 } from '../../context/ContactContext';
-import { isH5 } from '../../utils/env';
-import { useUIManagerStore } from '../../store';
+import { isH5 } from 'tuikit-atomicx-react';
+import { useUIManagerState } from '../../states';
 import useTUIContact from './hooks/useTUIContact';
 import { ContactList } from './ContactList/ContactList';
 import { ContactSearch } from '../ContactSearch/ContactSearch';
@@ -17,7 +17,7 @@ export function UnMemoizedContact<T>(
 ): React.ReactElement {
   const { children } = props;
   const { t } = useUIKit();
-  const { setActiveContact } = useUIManagerStore('TUIContact');
+  const { setActiveContact } = useUIManagerState('TUIContact');
   const [isShowAddFriend, setShowAddFriend] = useState(false);
   const addFriend = () => {
     setActiveContact();

package/src/components/Contact/ContactInfo/ContactInfo.tsx

@@ -1,24 +1,25 @@
-import React, {
+import type {
   PropsWithChildren,
 } from 'react';
-import { useUIManagerStore } from '../../../store';
-import { isH5 } from '../../../utils/env';
-import { FriendInfo } from './friendInfo';
-import { BlockInfo } from './blockInfo';
+import React from 'react';
+import { useUIManagerState } from '../../../states';
+import { isH5 } from 'tuikit-atomicx-react';
 import { AddFriendInfo } from './addFriendInfo';
-import { GroupInfo } from './groupInfo';
+import { BlockInfo } from './blockInfo';
 import { FriendApplicationInfo } from './friendApplication';
+import { FriendInfo } from './friendInfo';
+import { GroupInfo } from './groupInfo';
 import './index.scss';
 
 interface TUIContactInfoProps {
-  className?: string;
+  className?: string | undefined;
   showChats?: () => void;
 }
 export function UnMemoizedContactInfo<T extends TUIContactInfoProps>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
   const { showChats } = props;
-  const { contactData } = useUIManagerStore('TUIContact');
+  const { contactData } = useUIManagerState('TUIContact');
   if (!contactData?.type) {
     return (<> </>);
   }

package/src/components/Contact/ContactInfo/basicInfo.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Profile } from '@tencentcloud/chat';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerStore } from '../../../store';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
+import { defaultUserAvatar } from '../../../constant/avatar';
+import { useUIManagerState } from '../../../states';
+import { Avatar, isH5 } from 'tuikit-atomicx-react';
 import { Icon, IconTypes } from '../../Icon';
-import { isH5 } from '../../../utils/env';
 
-import { Avatar, defaultUserAvatar } from '../../Avatar';
+import type { Profile } from '@tencentcloud/chat';
 
 interface Props {
   profile: Profile;
@@ -19,7 +19,7 @@ export function UnMemoizedBasicInfo<T extends Props>(
   const {
     userID, nick, selfSignature, avatar,
   } = profile;
-  const { setActiveContact } = useUIManagerStore('TUIContact');
+  const { setActiveContact } = useUIManagerState('TUIContact');
   const back = () => {
     TUIConversationService.switchConversation('');
     setActiveContact();
@@ -36,7 +36,7 @@ export function UnMemoizedBasicInfo<T extends Props>(
       )}
       <div className="header-container">
         <div className="header-container-avatar">
-          <Avatar size={60} image={avatar || defaultUserAvatar} />
+          <Avatar size='xl' src={avatar || defaultUserAvatar} />
           <div className="header-container-name">{nick || userID}</div>
         </div>
         <div className="header-container-text">{`ID:${userID}`}</div>

package/src/components/Contact/ContactInfo/blockInfo.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Profile } from '@tencentcloud/chat';
 import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { BasicInfo } from './basicInfo';
+import { useUIManagerState } from '../../../states';
 import { Switch } from '../../Switch';
-import { useUIManagerStore } from '../../../store';
+import { BasicInfo } from './basicInfo';
 import useContactInfo from './hooks/useContactInfo';
+import type { Profile } from '@tencentcloud/chat';
 
 interface Props {
   profile: Profile;
@@ -13,7 +13,7 @@ export function UnMemoizedBlockInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
   const { profile } = props;
-  const { contactData, setActiveContact } = useUIManagerStore('TUIContact');
+  const { contactData, setActiveContact } = useUIManagerState('TUIContact');
   const { t } = useUIKit();
   const [isAddToBlocklist, setIsAddToBlocklist] = useState(false);
 

package/src/components/Contact/ContactInfo/friendApplication.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import TencentCloudChat, { FriendApplication } from '@tencentcloud/chat';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
 import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { useUIManagerStore } from '../../../store';
-import { Avatar, defaultUserAvatar } from '../../Avatar';
+import { defaultUserAvatar } from '../../../constant/avatar';
+import { useUIManagerState } from '../../../states';
 import useContactInfo from './hooks/useContactInfo';
+import type { FriendApplication } from '@tencentcloud/chat';
+import { Avatar } from 'tuikit-atomicx-react';
 
 interface Props {
   application: FriendApplication;
@@ -11,7 +13,7 @@ interface Props {
 export function UnMemoizedFriendApplication<T extends Props>(
   props: T,
 ): React.ReactElement {
-  const { setActiveContact } = useUIManagerStore('TUIContact');
+  const { setActiveContact } = useUIManagerState('TUIContact');
   const { t } = useUIKit();
   const { application } = props;
   const {
@@ -40,7 +42,7 @@ export function UnMemoizedFriendApplication<T extends Props>(
       <div className="tui-contact-info-header">
         <div className="header-container">
           <div className="header-container-avatar">
-            <Avatar size={60} image={avatar || defaultUserAvatar} />
+            <Avatar size='xl' src={avatar || defaultUserAvatar} />
             <div className="header-container-name">{nick || userID}</div>
           </div>
           <div className="header-container-text">{`ID:${userID}`}</div>
@@ -52,7 +54,7 @@ export function UnMemoizedFriendApplication<T extends Props>(
           <p className="content-item-text">{wording}</p>
         </div>
       </div>
-      {type === TencentCloudChat.TYPES.SNS_APPLICATION_SENT_TO_ME && (
+      {type === TUIChatEngine.TYPES.SNS_APPLICATION_SENT_TO_ME && (
         <div className="tui-contact-info-content">
           <div className="content-btn-container">
             <div className="content-item-btn delete-btn" role="button" tabIndex={0} onClick={refuseFriendApplicationHandler}>{t('TUIContact.Refuse')}</div>

package/src/components/Contact/ContactInfo/friendInfo.tsx

@@ -1,25 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Friend } from '@tencentcloud/chat';
-import { TUIConversationService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerStore } from '../../../store';
-import { BasicInfo } from './basicInfo';
+import { useUIManagerState } from '../../../states';
+import { DivWithEdit } from '../../DivWithEdit';
 import { Switch } from '../../Switch';
+import { BasicInfo } from './basicInfo';
 import useContactInfo from './hooks/useContactInfo';
-import { DivWithEdit } from '../../DivWithEdit';
+import type { Friend } from '@tencentcloud/chat';
 import '../index.scss';
 
 interface Props {
   friend: Friend;
-  showChats?: () => void;
+  showChats?: (() => void) | undefined;
 }
 export function UnMemoizedFriendInfo<T extends Props>(
   props: T,
 ): React.ReactElement {
-  const { chat } = useUIManagerStore();
+  const { chat } = useUIManagerState();
   const {
-    contactData, setActiveContact, setActiveConversation,
-  } = useUIManagerStore('TUIContact');
+    contactData, setActiveContact, switchConversation,
+  } = useUIManagerState('TUIContact');
   const { t } = useUIKit();
   const { friend, showChats } = props;
   const { userID, profile, remark } = friend;
@@ -60,12 +59,8 @@ export function UnMemoizedFriendInfo<T extends Props>(
   };
   const openC2CConversation = () => {
     const conversationID = `C2C${userID}`;
-    showChats && showChats();
-    TUIConversationService.switchConversation(conversationID).then(
-      (conversationModel: IConversationModel) => {
-        setActiveConversation(conversationModel.getConversation());
-      },
-    );
+    showChats?.();
+    switchConversation(conversationID);
   };
 
   return (