@tencentcloud/chat-uikit-react 1.1.1 → 1.2.0

package/src/components/index.ts

@@ -22,3 +22,4 @@ export * from './Plugins';
 export * from './Switch';
 export * from './Toast';
 export * from './Popup';
+export * from './TUIContact';

package/src/components/untils.ts

@@ -6,6 +6,7 @@ import {
   isToday,
   isYesterday,
 } from 'date-fns';
+import { enGB, zhCN } from 'date-fns/locale';
 import TencentCloudChat from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from './Avatar';
 
@@ -50,21 +51,40 @@ export const handleDisplayAvatar = (avatar: string, type:string = TencentCloudCh
   return displayImage;
 };
 
-export const getTimeStamp = (time: number) => {
+export const getTimeStamp = (time: number, language?: string) => {
+  const locales = { enGB, zhCN };
+  let lng = '';
+  if (language === 'zh') {
+    lng = 'zhCN';
+  }
+  if (language === 'en') {
+    lng = 'enGB';
+  }
+
   if (!time) {
     return '';
   }
   if (!isThisYear(time)) {
-    return format(time, 'yyyy MMM dd');
+    return format(time, 'yyyy MMM dd', {
+      locale: locales[lng],
+    });
   }
   if (isToday(time)) {
-    return format(time, 'p');
+    return format(time, 'p', {
+      locale: locales[lng],
+    });
   }
   if (isYesterday(time)) {
-    return formatDistance(time, new Date());
+    return formatDistance(time, new Date(), {
+      locale: locales[lng],
+    });
   }
   if (isThisWeek(time)) {
-    return format(time, 'eeee');
+    return format(time, 'eeee', {
+      locale: locales[lng],
+    });
   }
-  return format(time, 'MMM dd');
+  return format(time, 'MMM dd', {
+    locale: locales[lng],
+  });
 };

package/src/context/TUIContactContext.tsx

@@ -0,0 +1,32 @@
+import React, {
+  PropsWithChildren, useContext,
+} from '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>>
+}
+export const TUIContactContext = React.createContext<TUIContactContextValue>(null);
+export function TUIContactContextProvider({ children, value }:PropsWithChildren<{
+    value: TUIContactContextValue
+}>):React.ReactElement {
+  return (
+    <TUIContactContext.Provider value={value}>
+      {children}
+    </TUIContactContext.Provider>
+  );
+}
+
+export function useTUIContactContext(componentName?:string)
+:TUIContactContextValue {
+  const contextValue = useContext(TUIContactContext);
+  if (!contextValue && componentName) {
+    return {} as TUIContactContextValue;
+  }
+  return (contextValue as unknown) as TUIContactContextValue;
+}

package/src/context/TUIKitContext.tsx

@@ -4,16 +4,21 @@ import {
   Conversation,
   Profile,
 } from '@tencentcloud/chat';
+import { UseContactParams } from '../components/TUIKit/hooks/useTUIKit';
 
 export interface TUIKitContextValue {
     chat: ChatSDK,
+    language: string,
     conversation?: Conversation,
+    contactData?: UseContactParams,
     setActiveConversation: (conversation?: Conversation) => void,
     customClasses?: unknown,
     myProfile?: Profile,
     TUIManageShow?: boolean,
     setTUIManageShow?: React.Dispatch<React.SetStateAction<boolean>>,
     TUIProfileShow?: boolean,
+    // 激活 contact 列表数据，右侧显示数据，无参数时，右侧数据默认为空
+    setActiveContact: (UseContactParams?: UseContactParams) => void,
     setTUIProfileShow?: React.Dispatch<React.SetStateAction<boolean>>,
 }
 export const TUIKitContext = React.createContext<TUIKitContextValue | undefined>(undefined);

package/src/context/index.ts

@@ -4,3 +4,4 @@ export * from './TUIChatActionContext';
 export * from './TUIMessageContext';
 export * from './ComponentContext';
 export * from './TUIMessageInputContext';
+export * from './TUIContactContext';

package/src/hooks/useConversation.tsx

@@ -55,14 +55,14 @@ export const useConversation = (chat) => {
       groupCustomField,
       isSupportTopic,
     });
-    const { groupID: createdGroupId } = res.data.group;
+    const { groupID: createdGroupID } = res.data.group;
     if (type === TencentCloudChat.TYPES.GRP_AVCHATROOM) {
       await chat.joinGroup({
-        groupID: createdGroupId,
+        groupID: createdGroupID,
         type: TencentCloudChat.TYPES.GRP_AVCHATROOM,
       });
     }
-    const { data } = await chat.getConversationProfile(`GROUP${createdGroupId}`);
+    const { data } = await chat.getConversationProfile(`GROUP${createdGroupID}`);
     return data.conversation;
   };
   const pinConversation = (options: {

package/src/locales/en/TUIChat.ts

@@ -0,0 +1,27 @@
+/* eslint-disable quote-props */
+const TUIChat = {
+  'TUIChat': 'TUIChat',
+  'Recall': 'Recall',
+  'Reference': 'Reference',
+  'Forward': 'Forward',
+  'Copy': 'Copy',
+  'Delete': 'Delete',
+  'Forward to': 'Forward to',
+  'recalled a message': 'recalled a message',
+  'Re-edit': 'Re-edit',
+  'Resend': 'Resend',
+  'You': 'You',
+  'Recent Chats': 'Recent Chats',
+  'Frequently Contacted': 'Frequently Contacted',
+  'No Result': 'No Result',
+  'Search Result': 'Search Result',
+  'Image': 'Image',
+  'Video': 'Video',
+  'File': 'File',
+  'Enter a message': 'Enter a message',
+  'No More': 'No More',
+  'Error deleting message': 'Error deleting message',
+  'The message recall exceeded the time limit (default 2 minutes)': 'The message recall exceeded the time limit (default 2 minutes)',
+  'Error revoke Message': 'Error revoke Message',
+};
+export default TUIChat;

package/src/locales/en/TUIContact.ts

@@ -0,0 +1,28 @@
+/* eslint-disable quote-props */
+const TUIContact = {
+  'Enter a userID': 'Enter a userID',
+  'Enter the verification info': 'Enter the verification info',
+  'Request to join': 'Request to join',
+  'Requested': 'Requested',
+  'Accept': 'Accept',
+  'Refuse': 'Refuse',
+  'Handled': 'Handled',
+  'Friend': 'Friend',
+  'Send Message': 'Send Message',
+  'Signature': 'Signature',
+  'New Contacts': 'New Contacts',
+  'Blocked List': 'Blocked List',
+  'No Result': 'No Result',
+  'ID': 'ID',
+  'User': 'User',
+  'Add Friend': 'Add Friend',
+  'remark': 'remark',
+  'block': 'block',
+  'Delete friend': 'Delete friend',
+  'waiting for verification': 'waiting for verification',
+  'verification info': 'verification info',
+  'Send application': 'Send application',
+  'Agree': 'Agree',
+};
+
+export default TUIContact;

package/src/locales/en/TUIConversation.ts

@@ -0,0 +1,34 @@
+/* eslint-disable quote-props */
+const TUIConversation = {
+  'Start chat': 'Start chat',
+  'New one-to-one chat': 'New one-to-one chat',
+  'New group chat': 'New group chat',
+  'Enter a user ID': 'Enter a user ID',
+  'Delete': 'Delete',
+  'Conversation Information': 'Conversation Information',
+  'Pin': 'Pin',
+  'Unpin': 'Unpin',
+  'Search': 'Search',
+  'Add Participants': 'Add Participants',
+  'No conversation': 'No conversation',
+  'Next': 'Next',
+  'Group Name': 'Group Name',
+  'Group ID': 'Group ID',
+  'Group Type': 'Group Type',
+  'Participants': 'Participants',
+  'Create': 'Create',
+  'Details': 'Details',
+  'Work': 'Work',
+  'Public': 'Public',
+  'Meeting': 'Meeting',
+  'AVChatRoom': 'AVChatRoom',
+  'Community': 'Community',
+  'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.',
+  'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.',
+  'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.',
+  '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 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.': '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.',
+  'Participant cannot be empty': 'Participant cannot be empty',
+};
+
+export default TUIConversation;

package/src/locales/en/TUIProfile.ts

@@ -0,0 +1,14 @@
+/* eslint-disable quote-props */
+const TUIProfile = {
+  'Personal information': 'Personal information',
+  'Signature': 'Signature',
+  'Gender': 'Gender',
+  'Male': 'Male',
+  'Female': 'Female',
+  'AllowType': 'AllowType',
+  'NeedConfirm': 'NeedConfirm',
+  'AllowAny': 'AllowAny',
+  'DenyAny': 'DenyAny',
+  'Birthday': 'Birthday',
+};
+export default TUIProfile;

package/src/locales/en/index.ts

@@ -0,0 +1,11 @@
+import TUIChat from './TUIChat';
+import TUIConversation from './TUIConversation';
+import TUIContact from './TUIContact';
+import TUIProfile from './TUIProfile';
+
+export const message = {
+  TUIChat,
+  TUIConversation,
+  TUIContact,
+  TUIProfile,
+};

package/src/locales/index.ts

@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { message as enUSMessage } from './en/index';
+import { message as zhCNMessage } from './zh_cn/index';
+
+const resources = {
+  en: {
+    translation: enUSMessage,
+  },
+  zh: {
+    translation: zhCNMessage,
+  },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'zh',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

package/src/locales/zh_cn/TUIChat.ts

@@ -0,0 +1,27 @@
+/* eslint-disable quote-props */
+const TUIChat = {
+  'Recall': '撤回',
+  'Reference': '引用',
+  'Forward': '转发',
+  'Copy': '复制',
+  'Delete': '删除',
+  'Forward to': '转发给',
+  'recalled a message': '撤回了一条消息',
+  'Re-edit': '重新编辑',
+  'Resend': '重新发送',
+  'You': '您',
+  'Recent Chats': '会话',
+  'Frequently Contacted': '最近的会话',
+  'No Result': '无搜索结果',
+  'Search Result': '搜索结果',
+  'Image': '图片',
+  'Video': '视频',
+  'File': '文件',
+  'Enter a message': '请输入消息',
+  'No More': '没有更多',
+  'Error deleting message': '消息删除失败',
+  'The message recall exceeded the time limit (default 2 minutes)': '消息已超过 2 分钟',
+  'Error revoke Message': '消息撤回失败',
+};
+
+export default TUIChat;

package/src/locales/zh_cn/TUIContact.ts

@@ -0,0 +1,29 @@
+/* eslint-disable quote-props */
+const TUIContact = {
+  'Enter a userID': '请输入用户 ID，回车搜索',
+  'Enter the verification info': '请填写验证信息',
+  'Request to join': '申请加入',
+  'Requested': '已申请',
+  'Accept': '接受',
+  'Refuse': '拒绝',
+  'Handled': '已处理',
+  'Friend': '我的好友',
+  'Send Message': '发送消息',
+  'Signature': '个性签名',
+  'Successful application, waiting for the administrator to agree to join the group application': '等待管理员同意',
+  'New Contacts': '新的联系人',
+  'Blocked List': '黑名单',
+  'No Result': '无搜索结果',
+  'ID': 'ID',
+  'User': '联系人',
+  'Add Friend': '添加好友',
+  'remark': '备注',
+  'block': '加入黑名单',
+  'Delete friend': '删除好友',
+  'waiting for verification': '等待验证',
+  'verification info': '验证信息',
+  'Send application': '发送申请',
+  'Agree': '同意',
+};
+
+export default TUIContact;

package/src/locales/zh_cn/TUIConversation.ts

@@ -0,0 +1,33 @@
+/* eslint-disable quote-props */
+const TUIConversation = {
+  'Start chat': '发起会话',
+  'New one-to-one chat': '发起单聊',
+  'New group chat': '发起群聊',
+  'Delete': '删除会话',
+  'Pin': '置顶会话',
+  'Unpin': '取消置顶',
+  'Conversation Information': '会话信息',
+  'Search': '搜索',
+  'Add Participants': '创建群聊',
+  'No conversation': '无会话',
+  'Next': '下一步',
+  'Group Name': '群名称',
+  'Group ID': '群 ID',
+  'Group Type': '群类型',
+  'Participants': '成员',
+  'Create': '创建',
+  'Details': '详情',
+  'Work': '好友工作群（Work）',
+  'Public': '陌生人社交群（Public）',
+  'Meeting': '临时会议群（Meeting）',
+  'AVChatRoom': '直播群（AVChatroom）',
+  'Community': '社群(Community)',
+  'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主同意。',
+  'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。',
+  'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。',
+  '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': '不能为空',
+};
+
+export default TUIConversation;

package/src/locales/zh_cn/TUIProfile.ts

@@ -0,0 +1,14 @@
+/* eslint-disable quote-props */
+const TUIProfile = {
+  'Personal information': '个人信息',
+  'Signature': '个性签名',
+  'Gender': '性别',
+  'Male': '男',
+  'Female': '女',
+  'AllowType': '加好友验证方式',
+  'NeedConfirm': '需要验证',
+  'AllowAny': '同意任何用户加好友',
+  'DenyAny': '拒绝任何用户加好友',
+  'Birthday': '生日',
+};
+export default TUIProfile;

package/src/locales/zh_cn/index.ts

@@ -0,0 +1,11 @@
+import TUIChat from './TUIChat';
+import TUIConversation from './TUIConversation';
+import TUIContact from './TUIContact';
+import TUIProfile from './TUIProfile';
+
+export const message = {
+  TUIChat,
+  TUIConversation,
+  TUIContact,
+  TUIProfile,
+};

package/tsconfig.json

@@ -5,6 +5,7 @@
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "jsx": "react-jsx",
+    "lib": ["es6", "dom", "es2016"],
   },
   "include": [
     "src"