@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIProfile/TUIProfileDefault.tsx → Profile/ProfileDefault.tsx}

@@ -2,14 +2,14 @@ import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-date-picker';
 import TencentCloudChat, { Profile } from '@tencentcloud/chat';
-import { UpdateMyProfileParams } from "@tencentcloud/chat-uikit-engine";
+import { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine';
 import { isH5 } from '../../utils/env';
 import { useUIManager } from '../../context';
 
 import { Avatar } from '../Avatar';
 import { DivWithEdit } from '../DivWithEdit';
 import { Icon, IconTypes } from '../Icon';
-import { handleDisplayAvatar } from '../untils';
+import { handleDisplayAvatar } from '../utils';
 
 const gender: any = {
   [TencentCloudChat.TYPES.GENDER_UNKNOWN]: 'unknow',
@@ -58,9 +58,9 @@ const allowTypeList = [
 ];
 
 export interface TUIProfileDefaultProps {
-  userInfo?: Profile,
-  update?: (option: UpdateMyProfileParams) => void,
-  className?: string,
+  userInfo?: Profile;
+  update?: (option: UpdateMyProfileParams) => void;
+  className?: string;
 }
 
 function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
@@ -117,13 +117,15 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     },
     {
       name: 'Gender',
-      value: t( userInfo?.gender && gender[userInfo?.gender]?.replace(
+      value: t(userInfo?.gender && gender[userInfo?.gender]?.replace(
         gender[userInfo?.gender][0],
         gender[userInfo?.gender][0]?.toLocaleUpperCase(),
-      ) ? `TUIProfile.${gender[userInfo?.gender]?.replace(
+      )
+        ? `TUIProfile.${gender[userInfo?.gender]?.replace(
           gender[userInfo?.gender][0],
           gender[userInfo?.gender][0]?.toLocaleUpperCase(),
-        )}` : ''),
+        )}`
+        : ''),
       type: 'select',
       children: (
         <ul className="select-list">
@@ -193,7 +195,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
   if (isH5) {
     editListMap = editListMap.filter((item: any) => item.name !== 'Birthday');
   }
-  const handleSetEditName = (name:string) => {
+  const handleSetEditName = (name: string) => {
     setIsEditName(name);
   };
 
@@ -312,8 +314,7 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
 const MemoizedTUIProfileDefault = React.memo(TUIProfileDefaultWithContext) as
   typeof TUIProfileDefaultWithContext;
 
-export function TUIProfileDefault(props: TUIProfileDefaultProps)
-  : React.ReactElement {
+export function TUIProfileDefault(props: TUIProfileDefaultProps): React.ReactElement {
   const options = { ...props };
   return <MemoizedTUIProfileDefault {...options} />;
 }

package/src/components/Profile/index.ts

@@ -1 +1,2 @@
-export * from './Profile';
+export * from './Profile';
+export * from './ProfileDefault';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import './styles/index.scss';
+import { Profile as TProfile } from '@tencentcloud/chat';
+import { Avatar, defaultUserAvatar } from '../../Avatar';
+import { Icon, IconTypes } from '../../Icon';
+
+export interface ProfileProps {
+  profile?: TProfile;
+  className?: string;
+  handleAvatar?: () => void;
+}
+export function MyProfile<T extends ProfileProps>(props: T) {
+  const { profile, className = '', handleAvatar } = props;
+  return (profile?.nick || profile?.userID) && (
+    <div className={`profile ${className}`}>
+      <div className="profile-content">
+        <Avatar size={32} image={profile.avatar || defaultUserAvatar} onClick={handleAvatar} />
+        <div className="profile-name">{profile.nick || profile.userID}</div>
+      </div>
+      <div className="profile-more">
+        <Icon type={IconTypes.ELLIPSE} width={18} height={5} onClick={handleAvatar} />
+      </div>
+    </div>
+  );
+}

package/src/components/Profile/myProfile/index.ts

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

package/src/components/Profile/myProfile/styles/index.scss

@@ -0,0 +1,32 @@
+@use "../../../../styles/colors/color-theme" as *;
+
+.profile {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
+  .profile-content {
+    display: flex;
+    align-items: center;
+
+    .profile-name {
+      font-weight: 600;
+      margin-left: 10px;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+      overflow: hidden;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.tui-profile {
+  @include theme() {
+    background: get(bg-color-operate);
+  }
+}

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

@@ -1,23 +1,2 @@
-.profile {
-  font-family: PingFangSC-Medium;
-  background: #F9FAFB;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  .profile-content {
-    display: flex;
-    align-items: center;
-    .profile-name {
-      font-family: PingFangSC-Medium;
-      font-weight: 600;
-      margin-left: 10px;
-      font-size: 14px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 200px;
-      overflow: hidden;
-    }
-  }
-}
+@import "./layout.scss";
+@import "./color.scss";

package/src/components/{TUIProfile → Profile}/styles/layout.scss

@@ -1,7 +1,14 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
+
+  @include theme() {
+    color: get(text-color-primary);
+  }
 
   &-header {
     box-sizing: border-box;
@@ -38,7 +45,6 @@
   &-nick {
     font-weight: 700;
     font-size: 24px;
-    font-family: PingFangSC-Medium;
     line-height: 29px;
     text-align: center;
 
@@ -48,15 +54,14 @@
   }
 
   &-ID {
-    padding: 6px 0;
-    margin: 0;
+    margin: 6px 0;
     display: flex;
     align-items: center;
-    font-weight: 400;
     font-size: 12px;
-    font-family: PingFangSC-Medium;
-    line-height: 14px;
-    color: #666;
+
+    @include theme() {
+      color: get(text-color-secondary);
+    }
 
     h5 {
       margin: 0;
@@ -76,20 +81,18 @@
       cursor: pointer;
 
       h4 {
-        padding-bottom: 3px;
-        font-weight: 400;
         font-size: 16px;
-        font-family: PingFangSC-Medium;
-        line-height: 22px;
         margin: 10px 0;
-        color: rgba(0, 0, 0, 60%);
       }
     }
   }
 
   &-div-with-edit {
-    padding: 4px 0;
-    border-bottom: 1px solid #eee;
+    height: auto !important;
+
+    @include theme() {
+      border-bottom: 1px solid get(stroke-color-primary);
+    }
   }
 
   &-edit {

package/src/components/index.ts

@@ -1,19 +1,21 @@
-export * from './TUIConversation';
-export * from './TUIConversationList';
-export * from './TUIChat';
+export * from './Chat';
+export * from './ConversationList';
+export * from './ConversationActions';
 export * from './ConversationPreview';
-export * from './TUIChatHeader';
-export * from './TUIMessageList';
-export * from './TUIMessage';
-export * from './TUIMessageInput';
-export * from './TUIProfile';
-export * from './Avatar';
 export * from './ConversationSearch';
-export * from './TUIManage';
+export * from './ConversationCreate';
+export * from './ChatHeader';
+export * from './MessageList';
+export * from './MessageElement';
+export * from './MessageInput';
+export * from './Profile';
+export * from './Avatar';
+export * from './ChatSetting';
 export * from './Popup';
 export * from './Checkbox';
 export * from './DivWithEdit';
 export * from './Icon';
+export * from './PlaceHolder';
 export * from './EmptyStateIndicator';
 export * from './Input';
 export * from './Model';
@@ -21,4 +23,4 @@ export * from './Plugins';
 export * from './Switch';
 export * from './Toast';
 export * from './Popup';
-export * from './TUIContact';
+export * from './Contact';

package/src/components/{untils.ts → utils.ts}

@@ -6,7 +6,7 @@ import {
   isToday,
   isYesterday,
 } from 'date-fns';
-import { enGB, zhCN, ja, ko } from 'date-fns/locale';
+import { enGB, zhCN, ja, ko, zhTW } from 'date-fns/locale';
 import TencentCloudChat from '@tencentcloud/chat';
 import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
 import { defaultGroupAvatarWork, defaultUserAvatar } from './Avatar';
@@ -34,7 +34,7 @@ export function JSONStringToParse(str: string) {
   return JSON.parse(str);
 }
 
-export const handleDisplayAvatar = (avatar: string, type:string = TencentCloudChat.TYPES.CONV_C2C) => {
+export const handleDisplayAvatar = (avatar: string, type: string = TencentCloudChat.TYPES.CONV_C2C) => {
   let displayImage = avatar;
   if (!avatar) {
     switch (type) {
@@ -51,13 +51,14 @@ export const handleDisplayAvatar = (avatar: string, type:string = TencentCloudCh
   return displayImage;
 };
 
-export const getTimeStamp = (time: number, language: string = 'en-US') => {
+export const getTimeStamp = (time: number, language = 'en-US') => {
   const locales: any = {
     'zh-CN': zhCN,
+    'zh-TW': zhTW,
     'en-US': enGB,
     'ja-JP': ja,
     'ko-KR': ko,
-   };
+  };
   if (!time) {
     return '';
   }

package/src/context/{TUIChatActionContext.tsx → ChatActionContext.tsx}

@@ -1,20 +1,21 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { Message } from '@tencentcloud/chat';
 import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { OperateMessageParams } from '../components/TUIChat/hooks/useHandleMessage';
+import { OperateMessageParams } from '../components/Chat/hooks/useHandleMessage';
 
 export interface TUIChatActionContextValue {
-  updateMessage?: (messages: Array<Message>) => void,
-  setFirstSendMessage?: (message: IMessageModel) => void,
-  editLocalMessage?: (message: Message) => void,
-  operateMessage?: (data?: OperateMessageParams) => void,
-  loadMore?: () => Promise<void>,
-  revokeMessage?: (message:Message) => Promise<Message>,
-  setAudioSource?: (source: HTMLAudioElement | null) => void,
-  setVideoSource?: (source: HTMLVideoElement | null) => void,
-  setHighlightedMessageId?: (highlightedMessageId: string) => void,
-  updateUploadPendingMessageList?: (message?:Message) => void,
-  setActiveMessageID?: (messageID: string) => void,
+  updateMessage?: (messages: Message[]) => void;
+  setFirstSendMessage?: (message: IMessageModel) => void;
+  editLocalMessage?: (message: Message) => void;
+  operateMessage?: (data?: OperateMessageParams) => void;
+  loadMore?: () => Promise<void>;
+  revokeMessage?: (message: Message) => Promise<Message>;
+  setAudioSource?: (source: HTMLAudioElement | null) => void;
+  setVideoSource?: (source: HTMLVideoElement | null) => void;
+  setHighlightedMessageId?: (highlightedMessageId: string) => void;
+  updateUploadPendingMessageList?: (message?: Message) => void;
+  setActiveMessageID?: (messageID: string) => void;
+  callButtonClicked?: (callMediaType?: number, callType?: any) => void;
 }
 
 export const TUIChatActionContext = React.createContext<
@@ -26,8 +27,8 @@ export function TUIChatActionProvider({
   children,
   value,
 }: PropsWithChildren<{
-  value: TUIChatActionContextValue
-}>):React.ReactElement {
+  value: TUIChatActionContextValue;
+}>): React.ReactElement {
   return (
     <TUIChatActionContext.Provider
       value={(value as unknown) as TUIChatActionContextValue}

package/src/context/ChatStateContext.tsx

@@ -0,0 +1,49 @@
+import React, {
+  PropsWithChildren, useContext, MutableRefObject, RefObject,
+} from 'react';
+import { Conversation, Message } from '@tencentcloud/chat';
+import { MessageListProps, TUIMessageInputBasicProps, TUIMessageProps } from '../components';
+import { OperateMessageParams } from '../components/Chat/hooks/useHandleMessage';
+
+export interface TUIChatStateContextValue {
+  conversation?: Conversation;
+  messageList?: Message[];
+  nextReqMessageID?: string;
+  isCompleted?: boolean;
+  init?: boolean;
+  highlightedMessageId?: string;
+  lastMessageID?: string;
+  isSameLastMessageID?: boolean;
+  messageListRef?: RefObject<HTMLDivElement>;
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
+  operateData?: OperateMessageParams;
+  noMore?: boolean;
+  messageConfig?: TUIMessageProps;
+  cloudCustomData?: string;
+  TUIMessageInputConfig?: TUIMessageInputBasicProps;
+  audioSource?: HTMLAudioElement | null;
+  vidoeSource?: HTMLVideoElement | null;
+  TUIMessageListConfig?: MessageListProps;
+  uploadPendingMessageList?: Message[];
+  firstSendMessage?: Message | null;
+  activeMessageID?: string;
+}
+
+export const TUIChatStateContext = React.createContext<TUIChatStateContextValue | null>(null);
+export function TUIChatStateContextProvider({ children, value }: PropsWithChildren<{
+  value: TUIChatStateContextValue;
+}>): React.ReactElement {
+  return (
+    <TUIChatStateContext.Provider value={value}>
+      {children}
+    </TUIChatStateContext.Provider>
+  );
+}
+
+export function useTUIChatStateContext(componentName?: string): TUIChatStateContextValue {
+  const contextValue = useContext(TUIChatStateContext);
+  if (!contextValue && componentName) {
+    return {} as TUIChatStateContextValue;
+  }
+  return (contextValue as unknown) as TUIChatStateContextValue;
+}

package/src/context/ComponentContext.tsx

@@ -1,23 +1,23 @@
 import React, { PropsWithChildren, useContext } from 'react';
 import { TUIChatHeaderDefaultProps } from '../components';
-import type{ EmptyStateIndicatorProps } from '../components/EmptyStateIndicator';
-import { MessageContextProps, TUIMessageProps } from '../components/TUIMessage';
+import type { EmptyStateIndicatorProps } from '../components/EmptyStateIndicator';
+import { MessageContextProps, TUIMessageProps } from '../components/MessageElement';
 
 export interface UnknowPorps {
-  [propsName: string]: any
+  [propsName: string]: any;
 }
 
 export interface ComponentContextValue {
-  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
-  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
-  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>,
-  TUIMessageInput?: React.ComponentType<UnknowPorps>,
-  MessageContext?: React.ComponentType<MessageContextProps>,
-  InputPlugins?: React.ComponentType<UnknowPorps>,
-  MessagePlugins?: React.ComponentType<UnknowPorps>,
-  MessageCustomPlugins?: React.ComponentType<UnknowPorps>,
-  MessageTextPlugins?: React.ComponentType<UnknowPorps>,
-  InputQuote?: React.ComponentType<UnknowPorps>,
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>;
+  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>;
+  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
+  TUIMessageInput?: React.ComponentType<UnknowPorps>;
+  MessageContext?: React.ComponentType<MessageContextProps>;
+  InputPlugins?: React.ComponentType<UnknowPorps>;
+  MessagePlugins?: React.ComponentType<UnknowPorps>;
+  MessageCustomPlugins?: React.ComponentType<UnknowPorps>;
+  MessageTextPlugins?: React.ComponentType<UnknowPorps>;
+  InputQuote?: React.ComponentType<UnknowPorps>;
 }
 
 export const ComponentContext = React.createContext<ComponentContextValue | undefined>(undefined);

package/src/context/{TUIContactContext.tsx → ContactContext.tsx}

@@ -4,17 +4,17 @@ import React, {
 import { Friend, Profile, FriendApplication } from '@tencentcloud/chat';
 
 export interface TUIContactContextValue {
-  friendList?: Array<Friend>,
-  blocklistProfile?: Array<Profile>,
-  friendApplicationList?: Array<FriendApplication>,
-  blockList?: Array<string>,
-  isShowContactList?: boolean,
-  setShowContactList?: React.Dispatch<React.SetStateAction<boolean>>
+  friendList?: Friend[];
+  blocklistProfile?: Profile[];
+  friendApplicationList?: FriendApplication[];
+  blockList?: string[];
+  isShowContactList?: boolean;
+  setShowContactList?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export const TUIContactContext = React.createContext<TUIContactContextValue>({});
-export function TUIContactContextProvider({ children, value }:PropsWithChildren<{
-    value: TUIContactContextValue
-}>):React.ReactElement {
+export function TUIContactContextProvider({ children, value }: PropsWithChildren<{
+  value: TUIContactContextValue;
+}>): React.ReactElement {
   return (
     <TUIContactContext.Provider value={value}>
       {children}
@@ -22,8 +22,7 @@ export function TUIContactContextProvider({ children, value }:PropsWithChildren<
   );
 }
 
-export function useTUIContactContext(componentName?:string)
-:TUIContactContextValue {
+export function useTUIContactContext(componentName?: string): TUIContactContextValue {
   const contextValue = useContext(TUIContactContext);
   if (!contextValue && componentName) {
     return {} as TUIContactContextValue;

package/src/context/ConversationListContext.tsx

@@ -0,0 +1,113 @@
+import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
+import TUIChatEngine, { IConversationModel, StoreName, TUIConversationService, TUIStore } from '@tencentcloud/chat-uikit-engine';
+
+interface ConversationListProviderProps {
+  /** Specifies a function to filter conversations in the conversation list. */
+  filter?: (conversationList: IConversationModel[]) => IConversationModel[];
+  /** Specifies a function to sort conversations in the conversation list. */
+  sort?: (conversationList: IConversationModel[]) => IConversationModel[];
+}
+interface ConversationListContextType {
+  conversationList: IConversationModel[];
+  filteredAndSortedConversationList: IConversationModel[];
+  currentConversation: IConversationModel | undefined;
+  setCurrentConversation: (conversation: IConversationModel) => void;
+  isLoading: boolean;
+  isLoadError: boolean;
+}
+
+const ConversationListContext = React.createContext<ConversationListContextType | null>(null);
+
+function ConversationListProvider(props: PropsWithChildren<Partial<ConversationListProviderProps>>) {
+  const {
+    filter,
+    sort,
+    children,
+  } = props;
+
+  const [conversationList, setConversationList] = useState<IConversationModel[]>([]);
+
+  const [currentConversation, _setCurrentConversation] = useState<IConversationModel | undefined>(undefined);
+
+  const [filteredAndSortedConversationList, setFilteredAndSortedConversationList] = useState<IConversationModel[]>([]);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadError, setIsLoadError] = useState(false);
+
+  useEffect(() => {
+    TUIStore.watch(StoreName.CONV, {
+      conversationList: onConversationListUpdated,
+      currentConversation: onCurrentConversationUpdated,
+    });
+    TUIStore.watch(StoreName.USER, {
+      netStateChange: onNetStateChange,
+    });
+
+    return () => {
+      TUIStore.unwatch(StoreName.CONV, {
+        conversationList: onConversationListUpdated,
+        currentConversation: onCurrentConversationUpdated,
+      });
+      TUIStore.unwatch(StoreName.USER, {
+        netStateChange: onNetStateChange,
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    // filter & sort conversationList
+    let _conversationList = conversationList;
+    filter && (_conversationList = filter(_conversationList));
+    sort && (_conversationList = sort(_conversationList));
+    setFilteredAndSortedConversationList(_conversationList);
+  }, [conversationList, sort, filter]);
+
+  function onConversationListUpdated(list: IConversationModel[]) {
+    // original conversationList
+    setConversationList(list);
+    if (isLoading) {
+      setIsLoading(false);
+    }
+  }
+
+  function onCurrentConversationUpdated(conversation: IConversationModel) {
+    _setCurrentConversation(conversation);
+  }
+
+  function onNetStateChange(netState: string) {
+    if (netState === TUIChatEngine.TYPES.NET_STATE_DISCONNECTED) {
+      setIsLoadError(true);
+    } else {
+      setIsLoadError(false);
+    }
+  }
+
+  function setCurrentConversation(conversation: IConversationModel) {
+    TUIConversationService.switchConversation(conversation?.conversationID);
+  }
+
+  const value = {
+    conversationList,
+    filteredAndSortedConversationList,
+    currentConversation,
+    setCurrentConversation,
+    isLoading,
+    isLoadError,
+  };
+
+  return (
+    <ConversationListContext.Provider value={value}>
+      {children}
+    </ConversationListContext.Provider>
+  );
+}
+
+function useConversationList() {
+  const context = useContext(ConversationListContext);
+  if (!context) {
+    throw new Error('useConversationList must be used within a useConversationList');
+  }
+  return context;
+}
+
+export { useConversationList, ConversationListProvider, ConversationListContextType, ConversationListProviderProps };

package/src/context/LanguageContext.tsx

@@ -6,6 +6,7 @@ import {
   PropsWithChildren,
 } from 'react';
 import { useTranslation } from 'react-i18next';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
 
 interface LanguageContextType {
   language: string;
@@ -29,12 +30,13 @@ function LanguageProvider(props: PropsWithChildren<Partial<LanguageProviderProps
   const [language, setLanguage] = useState(_language);
 
   useLayoutEffect(() => {
-    i18n.changeLanguage(language);
-  }, [language, i18n]);
+    i18n.changeLanguage(_language);
+    setLanguage(_language);
+  }, [_language, i18n]);
 
   useLayoutEffect(() => {
-    document.documentElement.lang = language;
-  }, [language]);
+    document.documentElement.lang = _language;
+  }, [_language]);
 
   const value = {
     language,