@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/locales/zh-TW/Search.ts

@@ -0,0 +1,50 @@
+/* eslint-disable quote-props */
+const Search = {
+  'Search': '搜尋',
+  'Search Messages': '搜尋訊息',
+  'Searching': '搜尋中...',
+  'Enter Keywords to Search': '輸入關鍵字搜尋',
+  'Load More Messages': '查看更多訊息',
+  'Load More Users': '查看更多用戶',
+  'Load More Groups': '查看更多群聊',
+  'Load More': '加載更多',
+  'Back': '返回',
+  'Texts Related to': '{{count}}條與',
+  'Texts Related to Suffix': '相關的文本',
+  'Loading': '加載中...',
+  'Search Placeholder': '搜尋',
+  'Search Messages Placeholder': '搜尋訊息',
+  'Error': '錯誤',
+  'Message Details': '訊息詳情',
+  'All': '全部',
+  'Messages': '訊息',
+  'Users': '用戶',
+  'Groups': '群聊',
+  'All Time': '全部時間',
+  'Today': '今天',
+  'Last 3 Days': '近三天',
+  'Last 7 Days': '近7天',
+  'Cancel': '取消',
+  'Confirm': '確定',
+  'Gender': '性別',
+  'Age': '年齡',
+  'Male': '男',
+  'Female': '女',
+  'Any': '不限',
+  'Years Old': '歲',
+  'Select Time': '選擇時間',
+  'Found Messages': '發現{{count}}條消息',
+  'Enter Chat': '進入聊天',
+  'Image Message': '圖片消息',
+  'Video Cover': '視頻封面',
+  'Read More': '查看更多',
+  'Custom Message': '自定義消息',
+  'Unsupported Message': '不支持的消息類型',
+  'Locate to Chat': '定位到聊天',
+  'No Content': '暫無內容',
+  'Secret': '保密',
+  'Filter': '篩選',
+  'FilterUserTitle': '按條件查找用戶',
+};
+
+export default Search;

package/src/locales/zh-TW/TUIChat.ts

@@ -1,12 +1,13 @@
 /* eslint-disable quote-props */
 const TUIChat = {
   'Recall': '撤回',
-  'Reference': '引用',
+  'Quote': '引用',
   'Forward': '轉發',
   'Copy': '複製',
   'Delete': '刪除',
   'Forward to': '轉發給',
   'recalled a message': '撤回了一條消息',
+  'Original message has been recalled': '原消息已被撤回',
   'Re-edit': '重新編輯',
   'Resend': '重新發送',
   'You': '您',
@@ -15,13 +16,41 @@ const TUIChat = {
   'No Result': '無結果',
   'Search Result': '搜尋結果',
   'Image': '圖片',
+  'Audio': '音訊',
   'Video': '影片',
   'File': '檔案',
+  'Location': '位置',
   'Enter a message': '請輸入訊息',
+  'Load More': '加載更多',
   'No More': '沒有了',
   'Error deleting message': '刪除訊息失敗',
   'The message recall exceeded the time limit (default 2 minutes)': '訊息撤回超時（預設 2 分鐘）',
   'Error revoke Message': '訊息撤回失敗',
   'Custom message': '自訂訊息',
+  'Yesterday': '昨天',
+  'create group': '創建群組',
+  'Drag file here': '拖拽文件到此處',
+  'Read': '已讀',
+  'Unread': '未讀',
+  'No Read Members': '暫無已讀成員',
+  'No Unread Members': '暫無未讀成員',
+  'Loading': '加載中',
+  'Read Receipt Detail': '已讀回執詳情',
+  'No Data Available': '暫無數據',
+  'Max Count Exceed': '超出最大選擇數量',
+  'Note': '備註',
+  'Typing': '輸入中...',
+  'Online': '在線',
+  'Offline': '離線',
+  '[Drafts]': '[草稿]',
+  '[Custom Message]': '[自訂訊息]',
+  '[Image]': '[圖片]',
+  '[Voice]': '[音訊]',
+  '[Video]': '[影片]',
+  '[File]': '[檔案]',
+  '[Location]': '[位置]',
+  '[Animated Sticker]': '[動態貼圖]',
+  '[Group Notification]': '[群組通知]',
+  '[Chat History]': '[聊天紀錄]',
 };
 export default TUIChat;

package/src/locales/zh-TW/TUIConversation.ts

@@ -12,6 +12,7 @@ const TUIConversation = {
   'Search': '搜尋',
   'Add Participants': '創建群聊',
   'No conversation': '無會話',
+  'Something was wrong': '出錯了',
   'Next': '下一步',
   'Group Name': '群組名稱',
   'Group ID': '群組 ID',
@@ -32,5 +33,12 @@ const TUIConversation = {
   'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.': '創建後可以隨意進出，沒有群成員數量上限，但不支持歷史消息存儲；適合與直播產品結合，用於彈幕聊天場景。',
   'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.': '創建後可以隨意進出，最多支持100000人，支持歷史消息存儲，用戶搜索群 ID 發起加群申請後，無需管理員審批即可進群。',
   'Participant cannot be empty': '不能為空',
+  'MarkRead': '標為已讀',
+  'MarkUnRead': '標為未讀',
+  'You are not in the group, please join the group first': '您不在該群中，請先加入該群',
+  'You have been removed from the group by the group administrator': '您已被群管理員移除',
+  'The group chat has been disbanded': '該群已解散',
+  'You have left the group chat': '您已離開該群',
+  'Me': '我',
 };
 export default TUIConversation;

package/src/locales/zh-TW/index.ts

@@ -1,7 +1,11 @@
-import TUIChat from './TUIChat';
+import ChatSetting from './ChatSetting';
+import DateRangePicker from './DateRangePicker';
 import Emoji from './emoji';
-import TUIConversation from './TUIConversation';
+import GroupTip from './GroupTip';
+import Search from './Search';
+import TUIChat from './TUIChat';
 import TUIContact from './TUIContact';
+import TUIConversation from './TUIConversation';
 import TUIProfile from './TUIProfile';
 
 export const message = {
@@ -10,4 +14,8 @@ export const message = {
   TUIConversation,
   TUIContact,
   TUIProfile,
+  Search,
+  DateRangePicker,
+  ChatSetting,
+  GroupTip,
 };

package/src/server/mainServer.ts

@@ -0,0 +1,45 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
+
+export default class MainServer {
+  constructor() {
+    TUICore.registerEvent(
+      TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED,
+      TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,
+      this,
+    );
+  }
+
+  /**
+   * @param { TUIInitParam } params
+   */
+  public onNotifyEvent(eventName: string, subKey: string) {
+    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
+          this.login();
+          break;
+        default:
+          // todo
+      }
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  private login() {
+    const {
+      chat,
+      SDKAppID,
+      userID,
+      userSig,
+    } = TUILogin.getContext();
+
+    TUIChatEngine.login({
+      chat,
+      SDKAppID,
+      userID,
+      userSig,
+    });
+  }
+}

package/src/states/ChatHeaderState.ts

@@ -0,0 +1,121 @@
+import { useMemo } from 'react';
+import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
+import { useConversationListState } from 'tuikit-atomicx-react';
+import { defaultUserAvatar, defaultGroupAvatarWork } from '../constant/avatar';
+import { useUIManagerState } from './UIManagerState';
+import type { IUserStatus } from '../types/user';
+import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+interface UseChatHeaderStoreReturn {
+  /** im avatar can't be undefined */
+  avatar: string;
+  /** whether is group conversation */
+  isGroup: boolean;
+  /** whether is system conversation */
+  system: boolean | undefined;
+  /** im title */
+  title: string | undefined;
+  /** current conversation */
+  conversation: IConversationModel | undefined;
+  /** user status */
+  userStatus: IUserStatus | undefined;
+}
+
+function useChatHeaderState(): UseChatHeaderStoreReturn {
+  const { userStatusMap } = useUIManagerState();
+
+  const { activeConversation } = useConversationListState();
+
+  const isSystemConversation = !activeConversation
+    ? undefined
+    : activeConversation.type === TUIChatEngine.TYPES.CONV_SYSTEM;
+
+  const title = useMemo<string | undefined>(() => {
+    if (!activeConversation) {
+      return undefined;
+    }
+
+    if (isSystemConversation) {
+      return 'System Notice';
+    }
+
+    const {
+      type,
+      userProfile,
+      remark,
+      groupProfile,
+    } = activeConversation;
+
+    if (type === TUIChatEngine.TYPES.CONV_C2C) {
+      return remark || userProfile?.nick || userProfile?.userID || '';
+    }
+
+    if (type === TUIChatEngine.TYPES.CONV_GROUP) {
+      return groupProfile?.name || groupProfile?.groupID || '';
+    }
+
+    return '';
+  }, [activeConversation, isSystemConversation]);
+
+  const avatar = useMemo<string>(() => {
+    if (!activeConversation) {
+      return undefined;
+    }
+
+    if (isSystemConversation) {
+      return undefined;
+    }
+
+    const {
+      type,
+      userProfile,
+      groupProfile,
+    } = activeConversation;
+
+    if (type === TUIChatEngine.TYPES.CONV_C2C) {
+      return userProfile?.avatar || defaultUserAvatar;
+    }
+
+    if (type === TUIChatEngine.TYPES.CONV_GROUP) {
+      return groupProfile?.avatar || defaultGroupAvatarWork;
+    }
+
+    return '';
+  }, [activeConversation, isSystemConversation]);
+
+  const userStatus = useMemo(() => {
+    if (!activeConversation) {
+      return undefined;
+    }
+
+    if (isSystemConversation) {
+      return undefined;
+    }
+
+    if (activeConversation.type === TUIChatEngine.TYPES.CONV_GROUP) {
+      return undefined;
+    }
+
+    return userStatusMap?.[activeConversation?.userProfile?.userID];
+  }, [activeConversation, userStatusMap, isSystemConversation]);
+
+  const isGroup = useMemo(() => {
+    if (activeConversation?.type === TUIChatEngine.TYPES.CONV_GROUP) {
+      return true;
+    }
+    return false;
+  }, [activeConversation]);
+
+  return {
+    title,
+    avatar,
+    isGroup,
+    system: isSystemConversation,
+    conversation: activeConversation,
+    userStatus,
+  };
+}
+
+export {
+  useChatHeaderState,
+};

package/src/states/UIManagerState.ts

@@ -0,0 +1,201 @@
+import { TUIStore, StoreName, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import { TUILogin } from '@tencentcloud/tui-core';
+import { useStore } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+import type { IUserStatusMap } from '../types/user';
+import type { Profile, Friend, FriendApplication } from '@tencentcloud/chat';
+import type { IConversationModel, IGroupModel } from '@tencentcloud/chat-uikit-engine';
+
+type BlockData = {
+  type: 'block';
+  data: Profile;
+};
+
+type FriendData = {
+  type: 'friend';
+  data: Friend;
+};
+
+type FriendApplicationData = {
+  type: 'friendApplication';
+  data: FriendApplication;
+};
+
+type AddFriendData = {
+  type: 'addFriend';
+  data: Profile;
+};
+
+type GroupData = {
+  type: 'group';
+  data: IGroupModel;
+};
+
+type ContactParams =
+  | BlockData
+  | FriendData
+  | FriendApplicationData
+  | AddFriendData
+  | GroupData;
+
+interface IUIManagerState {
+  /** ChatSDK */
+  chat: any;
+  /** login user's profile */
+  myProfile: Profile | undefined;
+  /** contactData */
+  contactData: ContactParams | undefined;
+  /** active conversation */
+  conversation: IConversationModel | undefined;
+  /** conversationList */
+  conversationList: IConversationModel[] | undefined;
+  /** TUIProfileShow */
+  TUIProfileShow: boolean;
+  /** TUIManageShow */
+  TUIManageShow: boolean;
+  /** userStatusMap */
+  userStatusMap: IUserStatusMap | undefined;
+}
+
+/**
+ * Interface representing actions available for UI management operations
+ * @interface IUIManagerAction
+ */
+interface IUIManagerAction {
+  /** Update the current user's profile
+   * @internal
+   * @param profile - The user profile to set, undefined to clear
+   */
+  setMyProfile: (profile?: Profile | undefined) => void;
+  /** Set the active contact in the UI
+   * @internal
+   * @param contact - The contact data to set as active, undefined to clear
+   */
+  setActiveContact: (contact?: ContactParams) => void;
+  /** Set the active conversation in the chat
+   * @internal
+   * @param conversation - The conversation to set as active, undefined to clear
+   */
+  setActiveConversation: (conversation?: IConversationModel) => void;
+  /** Switch conversation
+   * @param conversationID - The conversation ID to switch to
+   */
+  switchConversation: (conversationID: string) => void;
+  /** Update the list of conversations
+   * @internal
+   * @param conversationList - Array of conversation models, undefined to clear
+   */
+  setConversationList: (conversationList?: IConversationModel[]) => void;
+  /** Toggle the visibility of the profile component
+   * @internal
+   * @param show - Boolean indicating whether to show (true) or hide (false) the profile
+   */
+  setTUIProfileShow: (show: boolean) => void;
+  /** Toggle the visibility of the management interface
+   * @param show - Boolean indicating whether to show (true) or hide (false) the management interface
+   */
+  setTUIManageShow: (show: boolean) => void;
+  /** Set the user status map
+   * @param userStatusMap - The user status map to set, undefined to clear
+   */
+  setUserStatusMap: (userStatusMap?: IUserStatusMap) => void;
+}
+
+/**
+ * description:
+ * - uiManagerStore is used to maintain the state between the core components (Chat/ConversationList/Profile/ChatSetting) such as show and hide
+ */
+const uiManagerStore = createStore<IUIManagerState & IUIManagerAction>()(set => ({
+  chat: null,
+  myProfile: undefined,
+  contactData: undefined,
+  conversation: undefined,
+  conversationList: undefined,
+  TUIProfileShow: false,
+  TUIManageShow: false,
+  userStatusMap: undefined,
+  setMyProfile: myProfile => set(() => ({ myProfile })),
+  setActiveContact: contact => set(() => ({ contactData: contact })),
+  setActiveConversation: conversation => set(() => ({ conversation })),
+  switchConversation: conversationID => TUIConversationService.switchConversation(conversationID),
+  setConversationList: conversationList => set(() => ({ conversationList })),
+  setTUIProfileShow: value => set(() => ({ TUIProfileShow: value })),
+  setTUIManageShow: value => set(() => ({ TUIManageShow: value })),
+  setUserStatusMap: userStatusMap => set(() => ({ userStatusMap })),
+}));
+
+type IuseUIManagerStateReturn = Omit<
+  IUIManagerState & IUIManagerAction,
+  'setMyProfile'
+  | 'setUserStatusMap'
+  // | 'setActiveContact'
+  | 'setActiveConversation'
+  | 'setConversationList'
+>;
+
+function useUIManagerState(..._args: any[]): IuseUIManagerStateReturn {
+  return {
+    chat: TUILogin.getContext().chat,
+    myProfile: useStore(uiManagerStore, state => state.myProfile),
+    contactData: useStore(uiManagerStore, state => state.contactData),
+    conversation: useStore(uiManagerStore, state => state.conversation),
+    conversationList: useStore(uiManagerStore, state => state.conversationList),
+    TUIProfileShow: useStore(uiManagerStore, state => state.TUIProfileShow),
+    TUIManageShow: useStore(uiManagerStore, state => state.TUIManageShow),
+    userStatusMap: useStore(uiManagerStore, state => state.userStatusMap),
+    // change UI show state
+    setActiveContact: useStore(uiManagerStore, state => state.setActiveContact),
+    setTUIProfileShow: useStore(uiManagerStore, state => state.setTUIProfileShow),
+    setTUIManageShow: useStore(uiManagerStore, state => state.setTUIManageShow),
+    switchConversation: useStore(uiManagerStore, state => state.switchConversation),
+  };
+}
+
+function useCurrentConversationID(): string | undefined {
+  return useStore(uiManagerStore, state => state.conversation?.conversationID);
+}
+
+TUIStore.watch(StoreName.USER, {
+  userProfile: onMyProfileUpdated,
+});
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: onCurrentConversationUpdated,
+});
+
+TUIStore.watch(StoreName.CONV, {
+  conversationList: onConversationListUpdated,
+});
+
+TUIStore.watch(StoreName.USER, {
+  userStatusList: onUserStatusListUpdated,
+});
+
+function onMyProfileUpdated(userProfileData: Profile) {
+  uiManagerStore.getState().setMyProfile(userProfileData);
+}
+
+function onCurrentConversationUpdated(conversationModel: IConversationModel) {
+  if (conversationModel?.conversationID !== uiManagerStore.getState().conversation?.conversationID) {
+    uiManagerStore.getState().setTUIManageShow(false);
+  }
+  uiManagerStore.getState().setActiveConversation(conversationModel);
+}
+
+function onConversationListUpdated(conversationList: IConversationModel[]) {
+  uiManagerStore.getState().setConversationList(conversationList);
+}
+
+function onUserStatusListUpdated(userStatusMap: Map<number, IUserStatusMap>) {
+  if (userStatusMap?.size <= 0) {
+    return;
+  }
+  const userOnlineStatusMap = Object.fromEntries(userStatusMap) as unknown as IUserStatusMap;
+  uiManagerStore.getState().setUserStatusMap(userOnlineStatusMap);
+}
+
+export {
+  // eslint-disable-next-line import/prefer-default-export
+  useUIManagerState,
+  useCurrentConversationID,
+};

package/src/states/index.ts

@@ -0,0 +1,3 @@
+export { useUIManagerState } from './UIManagerState';
+
+export { useChatHeaderState } from './ChatHeaderState';