@tencentcloud/chat-uikit-react 1.1.0 → 1.2.0

package/dist/esm/index.d.css

@@ -62,10 +62,10 @@ table {
   text-align: initial;
 }
 .tui-conversation {
-  height: 100%;
+  height: 0;
+  flex: 1;
   min-width: 360px;
   max-width: 400px;
-  width: 30%;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -464,15 +464,8 @@ table {
   transform: scale(1.5);
 }
 .message-plugin .plugin-popup-box {
-  top: 100%;
   bottom: auto;
-}
-.message-plugin-top {
-  top: auto !important;
-  bottom: 100% !important;
-}
-.message-plugin-left {
-  left: -140px !important;
+  top: 100%;
 }
 .message-plugin-box {
   padding: 6px 0;
@@ -767,7 +760,6 @@ ul li {
   min-width: 180px;
 }
 .upload-picker:hover {
-  background: rgba(0, 110, 255, 0.1);
   color: #147aff;
 }
 .upload-picker input {
@@ -1198,7 +1190,7 @@ ul li {
   flex-direction: column;
   align-items: center;
   width: 30%;
-  max-width: 400px;
+  max-width: 360px;
   min-width: 360px;
   height: 100%;
 }
@@ -1536,7 +1528,6 @@ ul li {
 }
 .tui-kit-icon .icon-image {
   width: 100%;
-  height: 100%;
 }
 .tui-kit-icon:hover {
   color: royalblue;
@@ -1629,4 +1620,266 @@ ul li {
 .error {
   color: #FFFFFF;
   background: #ff4d4f;
+}
+.tui-contacts-list {
+  flex: 1 1 auto;
+  min-width: 360px;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-right: 1px solid #F9FAFB;
+  text-align: initial;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+.tui-contacts-list .tui-contacts-title {
+  display: flex;
+  justify-content: space-between;
+}
+.tui-contacts-list .tui-contacts-list-title {
+  display: flex;
+  padding: 10px 20px;
+}
+.tui-contacts-list .tui-contacts-list-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+}
+.tui-contacts-list .tui-contacts-list-item {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  padding: 10px 20px;
+  text-align: center;
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  line-height: 20px;
+}
+.tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-card {
+  display: flex;
+  padding: 0 10px;
+  overflow: hidden;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+}
+.tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-container {
+  margin-left: 10px;
+}
+.tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text {
+  color: #999;
+  font-size: 12px;
+  text-align: left;
+}
+.tui-contacts-list .tui-contacts-list-item .tui-contacts-list-btn-text {
+  color: #999;
+  font-size: 12px;
+  text-align: left;
+}
+.tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name {
+  color: #000;
+  font-weight: 400;
+  text-align: left;
+}
+.tui-contacts-list .text-ellipsis, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-text, .tui-contacts-list .tui-contacts-list-item .tui-contacts-list-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tui-contacts-list .application-btn {
+  width: 30px;
+  height: 14px;
+  padding: 5px;
+  border-radius: 15px;
+  border: none;
+  font-size: 10px;
+  text-align: center;
+  line-height: 14px;
+  letter-spacing: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  border: 1px solid #006EFF;
+  background: #006EFF;
+  color: #fff;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+.tui-contact-info {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 60px;
+  box-sizing: border-box;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tui-contact-info .tui-contact-info-header {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #ddd;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+}
+.tui-contact-info .tui-contact-info-header .header-container {
+  flex: 1;
+}
+.tui-contact-info .tui-contact-info-header .header-container .header-container-avatar {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+.tui-contact-info .tui-contact-info-header .header-container .header-container-name {
+  font-size: 24px;
+  padding: 15px;
+}
+.tui-contact-info .tui-contact-info-header .header-container .header-container-text {
+  font-size: 16px;
+  line-height: 50px;
+  font-weight: 400;
+  color: #999999;
+}
+.tui-contact-info .tui-contact-info-content {
+  padding: 15px 0;
+  overflow: hidden;
+}
+.tui-contact-info .tui-contact-info-content .content-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 6px 0;
+  font-size: 16px;
+  font-weight: 400;
+  min-height: 56px;
+}
+.tui-contact-info .tui-contact-info-content .content-item-wording {
+  padding: 6px 0;
+  font-size: 16px;
+  font-weight: 400;
+  min-height: 56px;
+}
+.tui-contact-info .tui-contact-info-content .content-item-wording-text {
+  margin-top: 5px;
+  flex: 1;
+  border: 1px solid #e8e8e9;
+  border-radius: 4px;
+  padding: 4px;
+  color: inherit;
+  resize: none;
+  height: 100px;
+  width: 95%;
+}
+.tui-contact-info .tui-contact-info-content .content-item-label {
+  color: #999;
+  margin-right: 5px;
+}
+.tui-contact-info .tui-contact-info-content .content-item-text {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  color: #333;
+  overflow: hidden;
+}
+.tui-contact-info .tui-contact-info-content .content-btn-container {
+  display: flex;
+  padding: 30px;
+  justify-content: center;
+}
+.tui-contact-info .tui-contact-info-content .content-btn-container .content-item-btn {
+  margin: 15px;
+  width: 122px;
+  height: 26px;
+  padding: 8px 20px;
+  border-radius: 25px;
+  border: none;
+  font-size: 14px;
+  text-align: center;
+  line-height: 26px;
+  font-weight: 400;
+  letter-spacing: 0;
+  min-width: 100px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.tui-contact-info .tui-contact-info-content .content-btn-container .delete-btn {
+  border: 1px solid #e54545;
+  background: transparent;
+  color: #e54545;
+}
+.tui-contact-info .tui-contact-info-content .content-btn-container .confirm-btn {
+  border: 1px solid #006eff;
+  background: #006eff;
+  color: #fff;
+}
+.tui-contacts {
+  height: 100%;
+  min-width: 360px;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
+  overflow: hidden;
+}
+.tui-contacts .tui-contacts-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 10px 20px 10px 10px;
+}
+.tui-contacts .tui-contact-input {
+  width: 100%;
+}
+.tui-contacts .tui-contacts-add {
+  display: flex;
+  color: #147AFF;
+  font-size: 20px;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  text-align: center;
+}
+.tui-contacts .tui-contacts-add .tui-conversation-create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tui-contacts .tui-contacts-add-header {
+  align-items: center;
+  background-color: #f9fafb;
+  display: flex;
+  flex-direction: row;
+  padding: 16px 20px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+.tui-contacts .tui-contacts-add-header .tui-contacts-add-header-title {
+  color: #000;
+  font-family: PingFangSC-Medium;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.41px;
+  line-height: 32px;
+  margin-left: 10px;
+}
+.tui-contacts .no-result {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.tui-contacts .no-result-icon {
+  margin: 100px auto 50px;
+}
+.tui-contacts .no-result-message {
+  color: #999999;
+  font-weight: 400;
+  font-size: 16px;
+  font-family: PingFangSC-Medium;
+  line-height: 22px;
 }

package/dist/esm/index.d.ts

@@ -1,5 +1,5 @@
 export { ChatProps, TUIKit } from './components/TUIKit/TUIKit.js';
-export { UseChatParams, useTUIKit } from './components/TUIKit/hooks/useTUIKit.js';
+export { UseChatParams, UseContactParams, useTUIKit } from './components/TUIKit/hooks/useTUIKit.js';
 export { useCreateTUIKitContext } from './components/TUIKit/hooks/useCreateTUIKitContext.js';
 export { TUIConversation, UnMemoizedTUIConversation } from './components/TUIConversation/TUIConversation.js';
 export { TUIConversationList, UnMemoTUIConversationList } from './components/TUIConversationList/TUIConversationList.js';
@@ -10,6 +10,7 @@ export { TUIChatActionContext, TUIChatActionContextValue, TUIChatActionProvider,
 export { TUIMessageContext, TUIMessageContextProvider, TUIMessageContextValue, messageShowType, useTUIMessageContext } from './context/TUIMessageContext.js';
 export { ComponentContext, ComponentContextValue, ComponentProvider, UnknowPorps, useComponentContext } from './context/ComponentContext.js';
 export { TUIMessageInputContext, TUIMessageInputContextProvider, TUIMessageInputContextValue, useTUIMessageInputContext } from './context/TUIMessageInputContext.js';
+export { TUIContactContext, TUIContactContextProvider, TUIContactContextValue, useTUIContactContext } from './context/TUIContactContext.js';
 export { ConversationPreview, ConversationPreviewProps, ConversationPreviewUIComponentProps } from './components/ConversationPreview/ConversationPreview.js';
 export { ConversationPreviewContent, unMemoConversationPreviewContent } from './components/ConversationPreview/ConversationPreviewContent.js';
 export { TUIChatHeader } from './components/TUIChatHeader/TUIChatHeader.js';
@@ -39,5 +40,8 @@ export { Model } from './components/Model/index.js';
 export { Plugins, PluginsProps } from './components/Plugins/index.js';
 export { Switch } from './components/Switch/Switch.js';
 export { Toast } from './components/Toast/index.js';
+export { TUIContactList } from './components/TUIContact/TUIContactList/TUIContactList.js';
+export { TUIContactInfo, UnMemoizedTUIContactInfo } from './components/TUIContact/TUIContactInfo/TUIContactInfo.js';
+export { TUIContact, UnMemoizedTUIContact } from './components/TUIContact/TUIContact.js';
 export { CreateGroupConversationParams, useConversation } from './hooks/useConversation.js';
 export { useProfile } from './hooks/useProfile.js';

package/dist/esm/index.js

@@ -1 +1 @@
-export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"tslib";import"react";import"@tencentcloud/chat";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";
+export{TUIKit}from"./components/TUIKit/TUIKit.js";export{useTUIKit}from"./components/TUIKit/hooks/useTUIKit.js";export{useCreateTUIKitContext}from"./components/TUIKit/hooks/useCreateTUIKitContext.js";export{TUIConversation,UnMemoizedTUIConversation}from"./components/TUIConversation/TUIConversation.js";export{TUIConversationList,UnMemoTUIConversationList}from"./components/TUIConversationList/TUIConversationList.js";import"tslib";import"react";import"@tencentcloud/chat";export{TUIChat}from"./components/TUIChat/TUIChat.js";export{ConversationPreview}from"./components/ConversationPreview/ConversationPreview.js";export{ConversationPreviewContent,unMemoConversationPreviewContent}from"./components/ConversationPreview/ConversationPreviewContent.js";export{TUIChatHeader}from"./components/TUIChatHeader/TUIChatHeader.js";export{TUIChatHeaderDefault}from"./components/TUIChatHeader/TUIChatHeaderDefault.js";export{TUIMessageList}from"./components/TUIMessageList/TUIMessageList.js";export{TUIMessage}from"./components/TUIMessage/TUIMessage.js";export{MessagePlugins}from"./components/TUIMessage/MessagePlugins.js";export{MessageContext}from"./components/TUIMessage/MessageContext.js";export{TUIMessageInput}from"./components/TUIMessageInput/TUIMessageInput.js";export{TUIMessageInputDefault}from"./components/TUIMessageInput/TUIMessageInputDefault.js";export{InputPluginsDefalut}from"./components/TUIMessageInput/InputPluginsDefalut.js";export{TUIProfile}from"./components/TUIProfile/TUIProfile.js";export{TUIProfileDefault}from"./components/TUIProfile/TUIProfileDefault.js";export{Avatar}from"./components/Avatar/Avatar.js";export{defaultGroupAvatarAVChatRoom,defaultGroupAvatarMeeting,defaultGroupAvatarPublic,defaultGroupAvatarWork,defaultUserAvatar}from"./components/Avatar/default.js";export{ConversationSearchInput}from"./components/ConversationSearch/ConversationSearchInput.js";export{ConversationSearchResult}from"./components/ConversationSearch/ConversationSearchResult.js";export{TUIManage}from"./components/TUIManage/TUIManage.js";export{Popup}from"./components/Popup/index.js";export{Checkbox}from"./components/Checkbox/index.js";export{DivWithEdit}from"./components/DivWithEdit/DivWithEdit.js";export{Icon,changeTypeToIconClassName}from"./components/Icon/Icon.js";export{IconTypes}from"./components/Icon/type.js";export{EmptyStateIndicator}from"./components/EmptyStateIndicator/EmptyStateIndicator.js";export{Input}from"./components/Input/Input.js";export{Model}from"./components/Model/index.js";export{Plugins}from"./components/Plugins/index.js";export{Switch}from"./components/Switch/Switch.js";export{Toast}from"./components/Toast/index.js";export{TUIContactList}from"./components/TUIContact/TUIContactList/TUIContactList.js";export{TUIContactInfo,UnMemoizedTUIContactInfo}from"./components/TUIContact/TUIContactInfo/TUIContactInfo.js";export{TUIContact,UnMemoizedTUIContact}from"./components/TUIContact/TUIContact.js";export{TUIKitContext,TUIKitProvider,useTUIKitContext}from"./context/TUIKitContext.js";export{TUIChatStateContext,TUIChatStateContextProvider,useTUIChatStateContext}from"./context/TUIChatStateContext.js";export{TUIChatActionContext,TUIChatActionProvider,useTUIChatActionContext}from"./context/TUIChatActionContext.js";export{TUIMessageContext,TUIMessageContextProvider,messageShowType,useTUIMessageContext}from"./context/TUIMessageContext.js";export{ComponentContext,ComponentProvider,useComponentContext}from"./context/ComponentContext.js";export{TUIMessageInputContext,TUIMessageInputContextProvider,useTUIMessageInputContext}from"./context/TUIMessageInputContext.js";export{TUIContactContext,TUIContactContextProvider,useTUIContactContext}from"./context/TUIContactContext.js";export{useConversation}from"./hooks/useConversation.js";export{useProfile}from"./hooks/useProfile.js";

package/dist/esm/locales/en/TUIChat.js

@@ -0,0 +1 @@
+var e={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{e as default};

package/dist/esm/locales/en/TUIContact.js

@@ -0,0 +1 @@
+var e={"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{e as default};

package/dist/esm/locales/en/TUIConversation.js

@@ -0,0 +1 @@
+var e={"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{e as default};

package/dist/esm/locales/en/TUIProfile.js

@@ -0,0 +1 @@
+var e={"Personal information":"Personal information",Signature:"Signature",Gender:"Gender",Male:"Male",Female:"Female",AllowType:"AllowType",NeedConfirm:"NeedConfirm",AllowAny:"AllowAny",DenyAny:"DenyAny",Birthday:"Birthday"};export{e as default};

package/dist/esm/locales/en/index.js

@@ -0,0 +1 @@
+import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};

package/dist/esm/locales/index.js

@@ -0,0 +1 @@
+import e from"../node_modules/i18next/dist/esm/i18next.js";export{default}from"../node_modules/i18next/dist/esm/i18next.js";import"react";import"../node_modules/@babel/runtime/helpers/extends.js";import"../node_modules/html-parse-stringify/dist/html-parse-stringify.js";import"../node_modules/react-i18next/dist/es/context.js";import{initReactI18next as t}from"../node_modules/react-i18next/dist/es/initReactI18next.js";import{message as s}from"./en/index.js";import{message as i}from"./zh_cn/index.js";var n={en:{translation:s},zh:{translation:i}};e.use(t).init({resources:n,lng:"zh",interpolation:{escapeValue:!1}});

package/dist/esm/locales/zh_cn/TUIChat.js

@@ -0,0 +1 @@
+var e={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{e as default};

package/dist/esm/locales/zh_cn/TUIContact.js

@@ -0,0 +1 @@
+var e={"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{e as default};

package/dist/esm/locales/zh_cn/TUIConversation.js

@@ -0,0 +1 @@
+var e={"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{e as default};

package/dist/esm/locales/zh_cn/TUIProfile.js

@@ -0,0 +1 @@
+var e={"Personal information":"个人信息",Signature:"个性签名",Gender:"性别",Male:"男",Female:"女",AllowType:"加好友验证方式",NeedConfirm:"需要验证",AllowAny:"同意任何用户加好友",DenyAny:"拒绝任何用户加好友",Birthday:"生日"};export{e as default};

package/dist/esm/locales/zh_cn/index.js

@@ -0,0 +1 @@
+import o from"./TUIChat.js";import r from"./TUIConversation.js";import t from"./TUIContact.js";import i from"./TUIProfile.js";var m={TUIChat:o,TUIConversation:r,TUIContact:t,TUIProfile:i};export{m as message};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-typescript": "^8.5.0",
     "@rollup/plugin-url": "^7.0.0",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.0.20",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
@@ -59,7 +60,10 @@
   },
   "dependencies": {
     "date-fns": "^2.29.3",
+    "i18next": "^23.7.11",
     "react-date-picker": "^9.0.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.5.0",
     "tim-upload-plugin": "^1.0.5"
   },
   "peerDependencies": {

package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Conversation, Profile } from '@tencentcloud/chat';
+import { useTranslation } from 'react-i18next';
+import TencentCloudChat, { Conversation, Profile } from '@tencentcloud/chat';
 import { Input } from '../Input';
 import './styles/ConversationCreatGroupDetail.scss';
 import { Icon, IconTypes } from '../Icon';
@@ -27,6 +28,7 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
   const {
     profileList, pageState, setPageState, createConversation, setConversationCreated,
   } = props;
+  const { t } = useTranslation();
   const { setActiveConversation, myProfile } = useTUIKitContext();
   const temp = [...profileList];
   temp.unshift(myProfile);
@@ -94,7 +96,7 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
             border="bottom"
             customClassName="input-group-name"
             clearable
-            prefix={<div className="input-group-title">Group Name</div>}
+            prefix={<div className="input-group-title">{t('TUIConversation.Group Name')}</div>}
           />
         </div>
         <div className="create-group-box create-group-id">
@@ -106,7 +108,7 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
             onChange={(e) => {
               groupInfoChange(e, 'id');
             }}
-            prefix={<div className="input-group-title">Group ID</div>}
+            prefix={<div className="input-group-title">{t('TUIConversation.Group ID')}</div>}
           />
         </div>
         <div className="create-group-box create-group-type">
@@ -114,7 +116,7 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
             disabled
             border="bottom"
             customClassName="input-group-text"
-            prefix={<div className="input-group-title">Group of type</div>}
+            prefix={<div className="input-group-title">{t('TUIConversation.Group Type')}</div>}
             suffix={(
               <Icon
                 onClick={showGroupTypeInfo}
@@ -123,17 +125,17 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
                 height={12}
               />
             )}
-            value={groupType}
+            value={t(`TUIConversation.${groupType}`)}
             onChange={(e) => {
               groupInfoChange(e, 'type');
             }}
           />
         </div>
         <div className="create-group-illustrate">
-          {getDes()}
+          {t(`TUIConversation.${getDes()}`)}
         </div>
         <div className="create-group-portrait">
-          <div className="create-group-portrait-title">Participants</div>
+          <div className="create-group-portrait-title">{t('TUIConversation.Participants')}</div>
           <div className="create-group-portrait-info-container">
             {profileList.map(({ avatar, userID, nick }) => (
               <div className="create-group-portrait-info" key={userID}>
@@ -145,7 +147,7 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
         </div>
       </div>
       <div className="tui-conversation-create-next-container">
-        <div role="presentation" className="tui-conversation-create-next" onClick={next}>Create</div>
+        <div role="presentation" className="tui-conversation-create-next" onClick={next}>{t('TUIConversation.Create')}</div>
       </div>
     </>
   ) : (

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import './styles/index.scss';
 import { Conversation } from '@tencentcloud/chat';
 import { Icon, IconTypes } from '../Icon';
@@ -19,11 +20,13 @@ export enum PageStateTypes {
 }
 export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
   const { className = '', setConversationCreated, conversationList = [] } = props;
+  const { t } = useTranslation();
   const [isCreateGroup, setIsCreateGroup] = useState(false);
   const [pageState, setPageState] = useState<PageStateTypes>(PageStateTypes.USER_SELECT);
   const [selectList, setSelectList] = useState([]);
   const { chat } = useTUIKitContext();
   const { createConversation } = useConversation(chat);
+
   const back = () => {
     if (isCreateGroup) {
       switch (pageState) {
@@ -47,7 +50,7 @@ export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
     <>
       <div className="tui-conversation-create-header">
         <Icon onClick={back} type={IconTypes.BACK} width={9} height={16} />
-        <div className="title">{ !isCreateGroup ? 'New Chat' : 'Add Participants'}</div>
+        <div className="title">{ t(!isCreateGroup ? 'TUIConversation.Start chat' : 'TUIConversation.Add Participants')}</div>
       </div>
       {pageState === PageStateTypes.USER_SELECT ? (
         <ConversationCreateUserSelectList

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Conversation } from '@tencentcloud/chat';
 import { Input } from '../Input';
 import { Icon, IconTypes } from '../Icon';
@@ -29,6 +30,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     setConversationCreated,
     setPageState,
   } = props;
+  const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
   const { chat, setActiveConversation } = useTUIKitContext();
   const [friendList, setFriendList] = useState({});
@@ -81,7 +83,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
   };
   const next = () => {
     if (selectList && selectList.length === 0) {
-      Toast({ text: 'Participant cannot be empty.', type: 'error' });
+      Toast({ text: t('TUIConversation.Participant cannot be empty'), type: 'error' });
       return;
     }
     setPageState(PageStateTypes.CREATE_DETAIL);
@@ -90,7 +92,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     <>
       <Input
         className="tui-conversation-create-search-input"
-        placeholder="Search"
+        placeholder={t('TUIConversation.Search')}
         clearable
         value={searchValue}
         onChange={searchValueChange}
@@ -102,7 +104,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
       {!isCreateGroup && (
         <div role="presentation" className="tui-user" onClick={createGroup}>
           <Icon type={IconTypes.ADD} />
-          <div className="tui-user-name active">New Group</div>
+          <div className="tui-user-name active">{t('TUIConversation.New group chat')}</div>
         </div>
       )}
       <div className={`tui-conversation-create ${className}`}>
@@ -150,7 +152,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
       </div>
       {isCreateGroup && (
         <div className="tui-conversation-create-next-container">
-          <div role="presentation" className="tui-conversation-create-next" onClick={next}>Next</div>
+          <div role="presentation" className="tui-conversation-create-next" onClick={next}>{t('TUIConversation.Next')}</div>
         </div>
       )}
     </>

package/src/components/ConversationCreate/ConversationGroupTypeInfo.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import './styles/conversationGroupTypeInfo.scss';
 import TencentCloudChat from '@tencentcloud/chat';
 import { PageStateTypes } from './ConversationCreate';
@@ -9,6 +10,7 @@ export enum GroupType {
   Public= TencentCloudChat.TYPES.GRP_PUBLIC,
   Meeting= TencentCloudChat.TYPES.GRP_MEETING,
   AVChatRoom= TencentCloudChat.TYPES.GRP_AVCHATROOM,
+  Community = TencentCloudChat.TYPES.GRP_COMMUNITY,
 }
 export interface ConversationGroupTypeInfoProps {
   groupType: string,
@@ -20,10 +22,12 @@ export const typeInfoList = [
   { type: 'Public', des: '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.' },
   { type: 'Meeting', des: '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.' },
   { type: 'AVChatRoom', des: '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.' },
+  { type: 'Community', des: '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.' },
 ];
 export function ConversationGroupTypeInfo(props: ConversationGroupTypeInfoProps) {
   const { groupType, setGroupType, setPageState } = props;
 
+  const { t } = useTranslation();
   const selectGroupType = (type: string) => {
     setGroupType(type);
     setPageState(PageStateTypes.CREATE_DETAIL);
@@ -39,12 +43,12 @@ export function ConversationGroupTypeInfo(props: ConversationGroupTypeInfoProps)
         >
           <div className="group-type-info-title">
             {type === groupType && <Icon className="box-active-icon" type={IconTypes.RIGHT} width={16} height={16} />}
-            {type}
+            {t(`TUIConversation.${type}`)}
           </div>
-          <div className="group-type-info-description">{des}</div>
+          <div className="group-type-info-description">{t(`TUIConversation.${des}`)}</div>
         </div>
       ))}
-      <a className="group-type-info-document" target="_blank" href="https://www.tencentcloud.com/document/product/1047/33515?lang=en&pg=#group-features" rel="bookmark noreferrer">Details</a>
+      <a className="group-type-info-document" target="_blank" href="https://www.tencentcloud.com/document/product/1047/33515?lang=en&pg=#group-features" rel="bookmark noreferrer">{t('TUIConversation.Details')}</a>
     </div>
   );
 }

package/src/components/ConversationCreate/hooks/useConversationCreate.tsx

@@ -38,7 +38,6 @@ export const useConversationCreate = (
   };
   const handleData = (profileList, frequentlyConversationProfile = []) => {
     const sortResult = {
-      'Frequently Contacted': frequentlyConversationProfile,
       '#': [],
     };
     for (let i = 65; i <= 90; i += 1) {