@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

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

@@ -1,24 +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';
+import { defaultUserAvatar } from '../../../constant/avatar';
+import type { Profile as TProfile } from '@tencentcloud/chat';
+import { Avatar } from 'tuikit-atomicx-react';
+import { IconHorizontalMoreTwo } from '@tencentcloud/uikit-base-component-react';
 
 export interface ProfileProps {
-  profile?: TProfile;
-  className?: string;
+  profile?: TProfile | undefined;
+  className?: string | undefined;
   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-content" onClick={handleAvatar}>
+        <Avatar src={profile.avatar || defaultUserAvatar} />
         <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 className="profile-more" onClick={handleAvatar}>
+        <IconHorizontalMoreTwo size='24px' />
       </div>
     </div>
   );

package/src/components/Profile/myProfile/styles/index.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 *;
 
 .profile {
   display: flex;
@@ -29,4 +29,10 @@
       }
     }
   }
+
+  .profile-more {
+    @include theme() {
+      color: get(text-color-secondary);
+    }
+  }
 }

package/src/components/Profile/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 *;
 
 .tui-profile {
   @include theme() {

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

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

package/src/components/Profile/styles/layout.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 *;
 
 .tui-profile {
   display: flex;
@@ -13,7 +13,7 @@
   &-header {
     box-sizing: border-box;
     width: 100%;
-    padding: 15px;
+    padding: 0 15px;
     display: flex;
     align-items: center;
 
@@ -45,12 +45,7 @@
   &-nick {
     font-weight: 700;
     font-size: 24px;
-    line-height: 29px;
     text-align: center;
-
-    .show {
-      padding-left: 25px;
-    }
   }
 
   &-ID {
@@ -77,22 +72,25 @@
     user-select: none;
 
     &-item {
-      padding: 0;
       cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 10px 0;
+
+      @include theme() {
+        border-bottom: 1px solid get(stroke-color-primary);
+      }
 
       h4 {
         font-size: 16px;
-        margin: 10px 0;
+        margin: 0;
       }
     }
   }
 
   &-div-with-edit {
     height: auto !important;
-
-    @include theme() {
-      border-bottom: 1px solid get(stroke-color-primary);
-    }
   }
 
   &-edit {

package/src/components/Switch/Switch.tsx

@@ -1,19 +1,20 @@
-import React, { useEffect, useRef } from 'react';
+import type React from 'react';
+import { useEffect, useRef } from 'react';
 // The general logic of Switch style:
-// Hide the input, then control the style through the label label and the span in the label, and add styles to the selected situation through 
+// Hide the input, then control the style through the label label and the span in the label, and add styles to the selected situation through
 // the pseudo-element selector: checked
 // Note: After setting the display: inline; attribute, it is best to add vertical-align:top;, otherwise some inexplicable bugs will appear
 import './Switch.scss';
 import { creteNewId } from './utils/newId';
 
 interface Props {
-  checked: boolean,
-  onChange: (e: React.ChangeEvent) => void,
-  checkedColor?: string,
-  className?: string,
+  checked: boolean;
+  onChange: (e: React.ChangeEvent) => void;
+  checkedColor?: string;
+  className?: string;
 }
 // : React.FunctionComponent<Props>
-export function Switch(props:Props) {
+export function Switch(props: Props) {
   const {
     checked, onChange, checkedColor = '#34C759', className,
   } = props;

package/src/components/index.ts

@@ -1,26 +1,13 @@
-export * from './Chat';
-export * from './ConversationList';
-export * from './ConversationActions';
-export * from './ConversationPreview';
-export * from './ConversationSearch';
-export * from './ConversationCreate';
+// normal components export
 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 './Chat';
 export * from './Checkbox';
+export * from './Contact';
 export * from './DivWithEdit';
-export * from './Icon';
-export * from './PlaceHolder';
 export * from './EmptyStateIndicator';
-export * from './Input';
+export * from './Icon';
 export * from './Model';
 export * from './Plugins';
-export * from './Switch';
-export * from './Toast';
 export * from './Popup';
-export * from './Contact';
+export * from './Profile';
+export * from './Switch';

package/src/constant/emoji.ts

@@ -0,0 +1,97 @@
+interface IEmojiUrlMap {
+  [key: string]: string;
+}
+
+interface IBigEmojiListItem {
+  icon: number;
+  list: string[];
+}
+
+const emojiBaseUrl = 'https://web.sdk.qcloud.com/im/assets/emoji-plugin/';
+
+const emojiUrlMap: IEmojiUrlMap = {
+  '[TUIEmoji_Expect]': 'emoji_0@2x.png',
+  '[TUIEmoji_Blink]': 'emoji_1@2x.png',
+  '[TUIEmoji_Guffaw]': 'emoji_2@2x.png',
+  '[TUIEmoji_KindSmile]': 'emoji_3@2x.png',
+  '[TUIEmoji_Haha]': 'emoji_4@2x.png',
+  '[TUIEmoji_Cheerful]': 'emoji_5@2x.png',
+  '[TUIEmoji_Smile]': 'emoji_6@2x.png',
+  '[TUIEmoji_Sorrow]': 'emoji_7@2x.png',
+  '[TUIEmoji_Speechless]': 'emoji_8@2x.png',
+  '[TUIEmoji_Amazed]': 'emoji_9@2x.png',
+  '[TUIEmoji_Complacent]': 'emoji_10@2x.png',
+  '[TUIEmoji_Lustful]': 'emoji_11@2x.png',
+  '[TUIEmoji_Stareyes]': 'emoji_12@2x.png',
+  '[TUIEmoji_Giggle]': 'emoji_13@2x.png',
+  '[TUIEmoji_Daemon]': 'emoji_14@2x.png',
+  '[TUIEmoji_Rage]': 'emoji_15@2x.png',
+  '[TUIEmoji_Yawn]': 'emoji_16@2x.png',
+  '[TUIEmoji_TearsLaugh]': 'emoji_17@2x.png',
+  '[TUIEmoji_Silly]': 'emoji_18@2x.png',
+  '[TUIEmoji_Wail]': 'emoji_19@2x.png',
+  '[TUIEmoji_Kiss]': 'emoji_20@2x.png',
+  '[TUIEmoji_Trapped]': 'emoji_21@2x.png',
+  '[TUIEmoji_Fear]': 'emoji_22@2x.png',
+  '[TUIEmoji_BareTeeth]': 'emoji_23@2x.png',
+  '[TUIEmoji_FlareUp]': 'emoji_24@2x.png',
+  '[TUIEmoji_Tact]': 'emoji_25@2x.png',
+  '[TUIEmoji_Shit]': 'emoji_26@2x.png',
+  '[TUIEmoji_ShutUp]': 'emoji_27@2x.png',
+  '[TUIEmoji_Sigh]': 'emoji_28@2x.png',
+  '[TUIEmoji_Hehe]': 'emoji_29@2x.png',
+  '[TUIEmoji_Silent]': 'emoji_30@2x.png',
+  '[TUIEmoji_Skull]': 'emoji_31@2x.png',
+  '[TUIEmoji_Mask]': 'emoji_32@2x.png',
+  '[TUIEmoji_Beer]': 'emoji_33@2x.png',
+  '[TUIEmoji_Cake]': 'emoji_34@2x.png',
+  '[TUIEmoji_RedPacket]': 'emoji_35@2x.png',
+  '[TUIEmoji_Bombs]': 'emoji_36@2x.png',
+  '[TUIEmoji_Ai]': 'emoji_37@2x.png',
+  '[TUIEmoji_Celebrate]': 'emoji_38@2x.png',
+  '[TUIEmoji_Bless]': 'emoji_39@2x.png',
+  '[TUIEmoji_Flower]': 'emoji_40@2x.png',
+  '[TUIEmoji_Watermelon]': 'emoji_41@2x.png',
+  '[TUIEmoji_Cow]': 'emoji_42@2x.png',
+  '[TUIEmoji_Fool]': 'emoji_43@2x.png',
+  '[TUIEmoji_Surprised]': 'emoji_44@2x.png',
+  '[TUIEmoji_Askance]': 'emoji_45@2x.png',
+  '[TUIEmoji_Monster]': 'emoji_46@2x.png',
+  '[TUIEmoji_Pig]': 'emoji_47@2x.png',
+  '[TUIEmoji_Coffee]': 'emoji_48@2x.png',
+  '[TUIEmoji_Ok]': 'emoji_49@2x.png',
+  '[TUIEmoji_Heart]': 'emoji_50@2x.png',
+  '[TUIEmoji_Sun]': 'emoji_51@2x.png',
+  '[TUIEmoji_Moon]': 'emoji_52@2x.png',
+  '[TUIEmoji_Star]': 'emoji_53@2x.png',
+  '[TUIEmoji_Rich]': 'emoji_54@2x.png',
+  '[TUIEmoji_Fortune]': 'emoji_55@2x.png',
+  '[TUIEmoji_857]': 'emoji_56@2x.png',
+  '[TUIEmoji_666]': 'emoji_57@2x.png',
+  '[TUIEmoji_Prohibit]': 'emoji_58@2x.png',
+  '[TUIEmoji_Convinced]': 'emoji_59@2x.png',
+  '[TUIEmoji_Knife]': 'emoji_60@2x.png',
+  '[TUIEmoji_Like]': 'emoji_61@2x.png',
+};
+
+const faceUrl = 'https://web.sdk.qcloud.com/im/assets/face-elem/';
+
+const bigEmojiList: IBigEmojiListItem[] = [
+  {
+    icon: 1,
+    list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',
+      'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],
+  },
+  {
+    icon: 2,
+    list: ['ys00', 'ys01', 'ys02', 'ys03', 'ys04', 'ys05', 'ys06', 'ys07', 'ys08',
+      'ys09', 'ys10', 'ys11', 'ys12', 'ys13', 'ys14', 'ys15'],
+  },
+  {
+    icon: 3,
+    list: ['gcs00', 'gcs01', 'gcs02', 'gcs03', 'gcs04', 'gcs05', 'gcs06', 'gcs07',
+      'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
+  },
+];
+
+export { emojiUrlMap, bigEmojiList, emojiBaseUrl, faceUrl };

package/src/constant/index.ts

@@ -0,0 +1,13 @@
+export {
+  defaultGroupAvatarWork,
+  defaultGroupAvatarPublic,
+  defaultGroupAvatarMeeting,
+  defaultGroupAvatarAVChatRoom,
+  defaultUserAvatar,
+} from './avatar';
+export {
+  emojiUrlMap,
+  bigEmojiList,
+  emojiBaseUrl,
+  faceUrl,
+} from './emoji';

package/src/context/ChatContext.tsx

@@ -0,0 +1,40 @@
+import { useContext, createContext, useMemo } from 'react';
+import { useUIManagerState } from '../states';
+import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IChatProps {
+  children?: React.ReactNode;
+}
+
+interface IChatContextValue {
+  currentConversation: Readonly<IConversationModel> | undefined;
+}
+
+const ChatContext = createContext<IChatContextValue | null>(null);
+
+function ChatProvider(props: IChatProps) {
+  const {
+    conversation: currentConversation,
+  } = useUIManagerState();
+
+  const value: IChatContextValue = useMemo(() => ({
+    currentConversation,
+  }), [currentConversation]);
+
+  return (
+    <ChatContext.Provider value={value}>
+      {props.children}
+    </ChatContext.Provider>
+  );
+}
+
+function useChatContext() {
+  const context = useContext(ChatContext);
+  if (!context) {
+    throw new Error('useChatContext must be used within a ChatProvider');
+  }
+  return context;
+}
+
+export { useChatContext, ChatProvider };
+export type { IChatProps };

package/src/context/index.ts

@@ -1,8 +1,5 @@
-export * from './UIKitContext';
-export * from './ChatStateContext';
-export * from './ChatActionContext';
-export * from './MessageContext';
-export * from './ComponentContext';
-export * from './MessageInputContext';
 export * from './ContactContext';
-export * from './ConversationListContext';
+export {
+  ChatProvider,
+  useChatContext,
+} from './ChatContext';

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
-export * from './useConversation';
-export * from './useProfile';
-export * from './useMouseHover';
-export * from './useLongPress';
-
 (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
+
+const tagDoNotDelete = 'chat-uikit-react';
+
+export {
+  tagDoNotDelete,
+};

package/src/index.ts

@@ -1,8 +1,18 @@
-import Server from './server';
+import { UIKitProvider, useUIKit } from '@tencentcloud/uikit-base-component-react';
+import './locales';
+import './styles/index.scss';
+import Server from './server/mainServer';
+
+// eslint-disable-next-line no-new
+new Server();
 
-const TUIChatKit = new Server();
 export * from './components';
 export * from './context';
 export * from './hooks';
-export * from './locales';
-export * from './utils/env';
+export * from './states';
+export * from 'tuikit-atomicx-react';
+
+export {
+  UIKitProvider,
+  useUIKit,
+};

package/src/locales/en-US/ChatSetting.ts

@@ -0,0 +1,116 @@
+/* eslint-disable quote-props */
+const ChatSetting = {
+  // SettingItem
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  not_set: 'Not Set',
+
+  // C2CChatSetting
+  user_id: 'User ID',
+  nickname: 'Nickname',
+  nickname_placeholder: 'No nickname set',
+  signature: 'Signature',
+  remark: 'Remark',
+  remark_placeholder: 'No remark set',
+  remark_update_success: 'Remark updated successfully',
+  pin_conversation: 'Pin Conversation',
+  mute_conversation: 'Mute Conversation',
+  copied: 'Copied',
+
+  // GroupChatSetting
+  remove_member_dialog_title: 'Remove Group Member',
+  add_member_dialog_title: 'Add Group Member',
+  failed_to_load_more_members: 'Failed to load more members',
+  failed_to_remove_member: 'Failed to remove member',
+  me: 'Me',
+
+  // GroupInfo
+  group_id: 'Group ID',
+  group_name: 'Group Name',
+  group_name_placeholder: 'No group name set',
+  group_introduction: 'Group Introduction',
+  group_introduction_placeholder: 'No group introduction',
+  group_notification: 'Group Notification',
+  group_notification_placeholder: 'No group notification',
+  my_name_card: 'My Name Card',
+  my_name_card_placeholder: 'No name card set',
+  group_type: 'Group Type',
+  group_type_work: 'Work Group',
+  group_type_public: 'Public Group',
+  group_type_meeting: 'Meeting Group',
+  group_type_community: 'Community',
+  group_type_avchatroom: 'Live Group',
+  group_type_unknown: 'Unknown Type',
+
+  // Validation messages
+  group_name_required_string: 'Group name must be a string',
+  group_name_required: 'Group name cannot be empty',
+  group_name_max_length: 'Group name cannot exceed 25 characters',
+  group_name_unchanged: 'Please modify the group name before submitting',
+  group_introduction_required_string: 'Group introduction must be a string',
+  group_introduction_max_length: 'Group introduction cannot exceed 100 characters',
+  group_introduction_unchanged: 'Please modify the group introduction before submitting',
+  group_notification_required_string: 'Group notification must be a string',
+  group_notification_max_length: 'Group notification cannot exceed 100 characters',
+  group_notification_unchanged: 'Please modify the group notification before submitting',
+  group_name_card_required_string: 'Name card must be a string',
+  group_name_card_unchanged: 'Please modify the name card before submitting',
+
+  // Success/Error messages
+  group_name_update_success: 'Group name updated successfully',
+  group_name_update_failed: 'Failed to update group name',
+  group_introduction_update_success: 'Group introduction updated successfully',
+  group_introduction_update_failed: 'Failed to update group introduction',
+  group_notification_update_success: 'Group notification updated successfully',
+  group_notification_update_failed: 'Failed to update group notification',
+  group_name_card_update_success: 'Name card updated successfully',
+  group_name_card_update_failed: 'Failed to update name card',
+  group_member_add_success: 'Member added successfully',
+  group_member_add_failed: 'Failed to add member',
+  group_member_add_partially_failed: 'Partially member added failed',
+  group_member_remove_success: 'Member removed successfully',
+  group_member_remove_failed: 'Failed to remove member',
+
+  // GroupMembers
+  group_members: 'Group Members',
+  add: 'Add',
+  remove: 'Remove',
+  loading: 'Loading...',
+  all_members_shown: 'All members shown',
+  collapse: 'Collapse',
+
+  // GroupActions
+  transfer_group_owner: 'Transfer Group Owner',
+  quit_group: 'Quit Group',
+  dismiss_group: 'Dismiss Group',
+  confirm_quit_group: 'Are you sure you want to quit the group?',
+  select_new_owner_error: 'Please select a new owner',
+  only_one_owner_error: 'Only one member can be selected as the new owner',
+  transfer_owner_success: 'Ownership transferred successfully',
+  transfer_owner_failed: 'Failed to transfer ownership',
+  quit_group_success: 'Successfully left the group',
+  quit_group_failed: 'Failed to leave the group',
+
+  // GroupManagement
+  group_management: 'Group Management',
+  set_admin: 'Set Admin',
+  unset_admin: 'Remove Admin',
+  mute_members: 'Mute Members',
+  unmute_members: 'Unmute Members',
+  operation_success: 'Operation completed successfully',
+  operation_failed: 'Operation failed',
+  all_members_muted: 'All members muted',
+  all_members_unmuted: 'All members unmuted',
+  mute_all_failed: 'Failed to update mute all setting',
+  group_admin: 'Group Admin',
+  mute_management: 'Mute Management',
+  mute_all_members: 'Mute All Members',
+  mute_all_members_description: 'When enabled, only the group owner and admins can speak',
+
+  // GroupMemberRole
+  group_member_role_owner: 'Group Owner',
+  group_member_role_admin: 'Admin',
+  group_member_role_member: 'Member',
+};
+
+export default ChatSetting;

package/src/locales/en-US/DateRangePicker.ts

@@ -0,0 +1,32 @@
+/* eslint-disable quote-props */
+const DateRangePicker = {
+  'All Time': 'All Time',
+  'Today': 'Today',
+  'Last 3 Days': 'Last 3 Days',
+  'Last 7 Days': 'Last 7 Days',
+  'Time': 'Time',
+  'Year': ' ',
+  'Month': 'Month',
+  'Day': 'Day',
+  'January': 'January',
+  'February': 'February',
+  'March': 'March',
+  'April': 'April',
+  'May': 'May',
+  'June': 'June',
+  'July': 'July',
+  'August': 'August',
+  'September': 'September',
+  'October': 'October',
+  'November': 'November',
+  'December': 'December',
+  'Monday': 'Mon',
+  'Tuesday': 'Tue',
+  'Wednesday': 'Wed',
+  'Thursday': 'Thu',
+  'Friday': 'Fri',
+  'Saturday': 'Sat',
+  'Sunday': 'Sun',
+};
+
+export default DateRangePicker;

package/src/locales/en-US/GroupTip.ts

@@ -0,0 +1,21 @@
+/* eslint-disable quote-props */
+const GroupTip = {
+  administrator: 'Administrator',
+  enabled_mute_all_members: 'enabled mute all members',
+  disabled_mute_all_members: 'disabled mute all members',
+  became_new_group_owner: 'became the new group owner',
+  changed_group_name_to: 'changed group name to',
+  published_new_announcement: 'published new group notification',
+  joined_group: 'joined the group',
+  group_member: 'Group member',
+  left_group: 'left the group',
+  was: 'was',
+  kicked_out_of_group: 'kicked out of the group',
+  became_admin: 'became admin',
+  admin_privileges_revoked: 'admin privileges revoked',
+  was_muted: 'was muted',
+  was_unmuted: 'was unmuted',
+  group_tip_message: 'Group tip message',
+};
+
+export default GroupTip;

package/src/locales/en-US/Search.ts

@@ -0,0 +1,50 @@
+/* eslint-disable quote-props */
+const Search = {
+  'Search': 'Search',
+  'Search Messages': 'Search Messages',
+  'Searching': 'Searching...',
+  'Enter Keywords to Search': 'Enter keywords to search',
+  'Load More Messages': 'Load More Messages',
+  'Load More Users': 'Load More Users',
+  'Load More Groups': 'Load More Groups',
+  'Load More': 'Load More',
+  'Back': 'Back',
+  'Texts Related to': '{{count}} texts related to',
+  'Texts Related to Suffix': 'related texts',
+  'Loading': 'Loading...',
+  'Search Placeholder': 'Search',
+  'Search Messages Placeholder': 'Search messages',
+  'Error': 'Error',
+  'Message Details': 'Message Details',
+  'All': 'All',
+  'Messages': 'Messages',
+  'Users': 'Users',
+  'Groups': 'Groups',
+  'All Time': 'All Time',
+  'Today': 'Today',
+  'Last 3 Days': 'Last 3 Days',
+  'Last 7 Days': 'Last 7 Days',
+  'Cancel': 'Cancel',
+  'Confirm': 'Confirm',
+  'Gender': 'Gender',
+  'Age': 'Age',
+  'Male': 'Male',
+  'Female': 'Female',
+  'Any': 'Any',
+  'Years Old': 'years old',
+  'Select Time': 'Select Time',
+  'Found Messages': 'Found {{count}} messages',
+  'Enter Chat': 'Enter Chat',
+  'Image Message': 'Image Message',
+  'Video Cover': 'Video Cover',
+  'Read More': 'Read More',
+  'Custom Message': 'Custom Message',
+  'Unsupported Message': 'Unsupported Message Type',
+  'Locate to Chat': 'Locate to Chat',
+  'No Content': 'No Content',
+  'Secret': 'Secret',
+  'Filter': 'Filter',
+  'FilterUserTitle': 'Filter Users by Conditions',
+};
+
+export default Search;