@tencentcloud/chat-uikit-react 2.1.3 → 2.2.2

package/dist/esm/components/TUIKit/hooks/useTUIKit.js

@@ -1 +1 @@
-import{__awaiter as n,__generator as t}from"tslib";import{useState as o,useEffect as e,useCallback as a}from"react";import{useTranslation as i}from"react-i18next";var r=function(r){var c=r.chat,s=r.activeConversation,v=r.language,u=i().i18n,l=o(s),f=l[0],g=l[1],d=o(),h=d[0],I=d[1],m=o(!1),w=m[0],D=m[1],p=o(!1),M=p[0],P=p[1],S=o(),T=S[0],U=S[1];e((function(){u.changeLanguage(v);n(void 0,void 0,void 0,(function(){var n;return t(this,(function(t){switch(t.label){case 0:return[4,null==c?void 0:c.getMyProfile()];case 1:return n=t.sent(),I(null==n?void 0:n.data),[2]}}))}))}),[c,v]);var C=a((function(n){n&&(null==c||c.setMessageRead({conversationID:n.conversationID})),f&&(null==n?void 0:n.conversationID)!==f.conversationID&&D(!1),n&&g(n)}),[c]);return e((function(){s&&g(s)}),[s]),{conversation:f,contactData:T,setActiveConversation:C,myProfile:h,TUIManageShow:w,setTUIManageShow:D,TUIProfileShow:M,setTUIProfileShow:P,setActiveContact:function(n){U(n)}}};export{r as useTUIKit};
+import{useState as n,useEffect as t,useCallback as o}from"react";import{TUIStore as e,StoreName as a}from"@tencentcloud/chat-uikit-engine";import{useTranslation as i}from"react-i18next";var r=function(r){var c=r.chat,s=r.activeConversation,u=r.language,v=i().i18n,f=n(s),l=f[0],g=f[1],h=n(),I=h[0],m=h[1],w=n(!1),D=w[0],S=w[1],U=n(!1),p=U[0],P=U[1],T=n(),d=T[0],C=T[1];t((function(){v.changeLanguage(u),e.watch(a.USER,{userProfile:function(n){m(n)}})}),[u]);var M=o((function(n){n&&(null==c||c.setMessageRead({conversationID:n.conversationID})),l&&(null==n?void 0:n.conversationID)!==l.conversationID&&S(!1),g(n)}),[c]);return t((function(){s&&g(s)}),[s]),{conversation:l,contactData:d,setActiveConversation:M,myProfile:I,TUIManageShow:D,setTUIManageShow:S,TUIProfileShow:p,setTUIProfileShow:P,setActiveContact:function(n){C(n)}}};export{r as useTUIKit};

package/dist/esm/components/TUIProfile/TUIProfile.js

@@ -1 +1 @@
-import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import t from"react";import{Profile as i}from"../Profile/Profile.js";import"tslib";import{useMyProfile as f}from"./hooks/useMyProfile.js";import{TUIProfileDefault as m}from"./TUIProfileDefault.js";import{useTUIKitContext as l}from"../../context/TUIKitContext.js";import"../../context/TUIMessageContext.js";function s(t){var s=t.className,a=t.TUIProfile,n=f(),p=n.myProfile,P=n.updateMyProfile,c=l("TUIProfile"),u=c.setTUIProfileShow,I=c.TUIProfileShow,T=a||m;return o(r,{children:[e(i,{profile:p,handleAvatar:function(){u&&u(!0)}}),I&&e(T,{className:s,userInfo:p,update:P})]})}var a=t.memo(s);export{a as TUIProfile};
+import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import t from"react";import{Profile as i}from"../Profile/Profile.js";import{useMyProfile as f}from"./hooks/useMyProfile.js";import{TUIProfileDefault as m}from"./TUIProfileDefault.js";import{useTUIKitContext as l}from"../../context/TUIKitContext.js";import"tslib";import"../../context/TUIMessageContext.js";function s(t){var s=t.className,a=t.TUIProfile,n=f(),p=n.myProfile,P=n.updateMyProfile,c=l("TUIProfile"),u=c.setTUIProfileShow,I=c.TUIProfileShow,T=a||m;return o(r,{children:[e(i,{profile:p,handleAvatar:function(){u&&u(!0)}}),I&&e(T,{className:s,userInfo:p,update:P})]})}var a=t.memo(s);export{a as TUIProfile};

package/dist/esm/components/TUIProfile/TUIProfileDefault.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Profile } from '@tencentcloud/chat';
-import { ProfileParams } from './hooks/useMyProfile.js';
+import { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine';
 
 interface TUIProfileDefaultProps {
     userInfo?: Profile;
-    update?: (option: ProfileParams) => void;
+    update?: (option: UpdateMyProfileParams) => void;
     className?: string;
 }
 declare function TUIProfileDefault(props: TUIProfileDefaultProps): React.ReactElement;

package/dist/esm/components/TUIProfile/hooks/useMyProfile.js

@@ -1 +1 @@
-import{__awaiter as t,__generator as n,__assign as e}from"tslib";import{useState as r,useCallback as o,useEffect as i}from"react";import u from"@tencentcloud/chat";import{useTUIKitContext as c}from"../../../context/TUIKitContext.js";import"react/jsx-runtime";import"../../../context/TUIMessageContext.js";function a(){var a=this,l=r(),s=l[0],f=l[1],d=c("useMyProfile"),m=d.chat,v=d.myProfile,p=o((function(){return t(a,void 0,void 0,(function(){var t;return n(this,(function(n){switch(n.label){case 0:return v?(f(v),[3,3]):[3,1];case 1:return[4,null==m?void 0:m.getMyProfile()];case 2:t=n.sent(),f(null==t?void 0:t.data),n.label=3;case 3:return[2]}}))}))}),[m]),P=o((function(r){return t(a,void 0,void 0,(function(){var t,o;return n(this,(function(n){switch(n.label){case 0:return[4,null==m?void 0:m.updateMyProfile(r)];case 1:return t=n.sent(),o=e({},s),Object.keys(t.data).map((function(n){return o[n]=t.data[n],n})),f(o),[2,t]}}))}))}),[m]),h=function(t){console.log("onProfileUpdated",t.data)};return i((function(){return t(a,void 0,void 0,(function(){return n(this,(function(t){switch(t.label){case 0:return[4,p()];case 1:return t.sent(),[2]}}))})),null==m||m.on(u.EVENT.PROFILE_UPDATED,h),function(){null==m||m.off(u.EVENT.PROFILE_UPDATED,h)}}),[m]),{myProfile:s,updateMyProfile:P}}export{a as useMyProfile};
+import{__assign as t}from"tslib";import{useState as r,useEffect as o}from"react";import{TUIStore as i,StoreName as e,TUIUserService as n}from"@tencentcloud/chat-uikit-engine";function f(){var f=r(),u=f[0],c=f[1];return o((function(){i.watch(e.USER,{userProfile:function(t){c(t)}})}),[]),{myProfile:u,updateMyProfile:function(r){n.updateMyProfile(r);var o=t({},u);c(o)}}}export{f as useMyProfile};

package/dist/esm/context/TUIConversationContext.js

@@ -1 +1 @@
-import{__assign as t}from"tslib";import{jsx as o}from"react/jsx-runtime";import e,{useContext as s}from"react";import"../components/TUIKit/TUIKit.js";import"react-i18next";import{TUIConversationList as n}from"../components/TUIConversationList/TUIConversationList.js";import"@tencentcloud/chat";import"@tencentcloud/chat-uikit-engine";import"date-fns";import"date-fns/locale";import"../components/Icon/config.js";import"../components/Icon/type.js";import"./TUIMessageContext.js";import"../constants.js";import"../components/TUIMessage/hooks/useMessageReply.js";import"../components/TUIMessage/MessagePlugins.js";import"../components/TUIMessage/MessageContext.js";import"../utils/env.js";import"../components/TUIMessageInput/hooks/useHandleQuoteMessage.js";import"../components/TUIProfile/TUIProfileDefault.js";var r=e.createContext({});function i(e){var s=e.children,i=e.value;return o(r.Provider,t({value:i},{children:s||o(n,{})}))}var m=function(t){var o=s(r);return!o&&t?{}:o};export{r as TUIConversationContext,i as TUIConversationProvider,m as useTUIConversationContext};
+import{__assign as t}from"tslib";import{jsx as o}from"react/jsx-runtime";import e,{useContext as s}from"react";import"../components/TUIKit/TUIKit.js";import"@tencentcloud/chat-uikit-engine";import"react-i18next";import{TUIConversationList as n}from"../components/TUIConversationList/TUIConversationList.js";import"@tencentcloud/chat";import"date-fns";import"date-fns/locale";import"../components/Icon/config.js";import"../components/Icon/type.js";import"./TUIMessageContext.js";import"../constants.js";import"../components/TUIMessage/hooks/useMessageReply.js";import"../components/TUIMessage/MessagePlugins.js";import"../components/TUIMessage/MessageContext.js";import"../utils/env.js";import"../components/TUIMessageInput/hooks/useHandleQuoteMessage.js";import"../components/TUIProfile/TUIProfileDefault.js";var r=e.createContext({});function i(e){var s=e.children,i=e.value;return o(r.Provider,t({value:i},{children:s||o(n,{})}))}var m=function(t){var o=s(r);return!o&&t?{}:o};export{r as TUIConversationContext,i as TUIConversationProvider,m as useTUIConversationContext};

package/dist/esm/index.js

@@ -1 +1 @@
-import o from"./server.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";export{t}from"./locales/index.js";export{default as i18next}from"i18next";new o;
+import o from"./server.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"react";import"@tencentcloud/chat";import"@tencentcloud/chat-uikit-engine";export{TUIChat}from"./components/TUIChat/TUIChat.js";import"tslib";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";export{t}from"./locales/index.js";export{default as i18next}from"i18next";new o;

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

@@ -1 +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",Friends:"Friends","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};
+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",Friends:"Friends","Send Message":"Send Message",Signature:"Signature","New Contacts":"New Contacts","Blocked List":"Blocked List","Group List":"Group 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/zh_cn/TUIContact.js

@@ -1 +1 @@
-var e={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friends:"我的好友","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};
+var e={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friends:"我的好友","Send Message":"发送消息",Signature:"个性签名","Successful application, waiting for the administrator to agree to join the group application":"等待管理员同意","New Contacts":"新的联系人","Blocked List":"黑名单","Group 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencentcloud/chat-uikit-react",
-  "version": "2.1.3",
+  "version": "2.2.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "license": "MIT",

package/scripts/publish-intl-experience-demo.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Change directory to tuikit/examples/sample-chat
+process.chdir(path.join('examples', 'sample-chat'));
+
+// Change directory to src
+process.chdir('src');
+process.chdir('demo');
+// Remove file
+fs.unlinkSync('SampleChat.tsx');
+// Rename index-intl.tsx to index
+fs.renameSync('SampleChat-experience.tsx', 'SampleChat.tsx');

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -103,7 +103,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
         break;
       case 'delete':
         deleteConversation(conversationID);
-        if (setActiveConversation && conversation === activeConversation) {
+        if (setActiveConversation && conversationID === activeConversation?.conversationID) {
           setActiveConversation(undefined);
         }
         break;

package/src/components/Profile/index.ts

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

package/src/components/TUIContact/TUIContactInfo/TUIContactInfo.tsx

@@ -6,17 +6,18 @@ import { isH5 } from '../../../utils/env';
 import { FriendInfo } from './friendInfo';
 import { BlockInfo } from './blockInfo';
 import { AddFriendInfo } from './addFriendInfo';
+import { GroupInfo } from './groupInfo';
 import { FriendApplicationInfo } from './friendApplication';
 import './index.scss';
 
 interface TUIContactInfoProps {
   className?: string,
-  showChat?: () => void,
+  showChats?: () => void,
 }
 export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
   props: PropsWithChildren<T>,
 ): React.ReactElement {
-  const { showChat } = props;
+  const { showChats } = props;
   const { contactData } = useTUIKitContext('TUIContact');
   if (!contactData?.type) {
     return (<> </>);
@@ -24,8 +25,9 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
   return (
     <div className={`tui-contact-info ${isH5 ? 'tui-contact-info-h5' : ''} `}>
       {contactData?.type === 'addFriend' && (<AddFriendInfo profile={contactData?.data} />)}
-      {contactData?.type === 'friend' && (<FriendInfo openChat={showChat} friend={contactData?.data} />)}
+      {contactData?.type === 'friend' && (<FriendInfo showChats={showChats} friend={contactData?.data} />)}
       {contactData?.type === 'block' && (<BlockInfo profile={contactData?.data} />)}
+      {contactData?.type === 'group' && (<GroupInfo showChats={showChats} group={contactData?.data} />)}
       {contactData?.type === 'friendApplication' && <FriendApplicationInfo application={contactData?.data} />}
     </div>
   );

package/src/components/TUIContact/TUIContactInfo/friendInfo.tsx

@@ -1,18 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Friend } from '@tencentcloud/chat';
-import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
+import { TUIConversationService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
 import { useTUIKitContext } from '../../../context';
 import { BasicInfo } from './basicInfo';
 import { Switch } from '../../Switch';
 import useContactInfo from './hooks/useContactInfo';
 import { DivWithEdit } from '../../DivWithEdit';
-import { useConversation } from '../../../hooks';
 import '../index.scss';
 
 interface Props {
   friend: Friend;
-  openChat?: () => void,
+  showChats?: () => void,
 }
 export function UnMemoizedFriendInfo<T extends Props>(
   props: T,
@@ -21,7 +20,7 @@ export function UnMemoizedFriendInfo<T extends Props>(
     chat, contactData, setActiveContact, setActiveConversation,
   } = useTUIKitContext('TUIContact');
   const { t } = useTranslation();
-  const { friend, openChat } = props;
+  const { friend, showChats } = props;
   const { userID, profile, remark } = friend;
   const [isEditName, setIsEditRemark] = useState('');
   const [remarkValue, setRemarkValue] = useState('');
@@ -30,7 +29,6 @@ export function UnMemoizedFriendInfo<T extends Props>(
     addToBlocklist,
     deleteFriend,
   } = useContactInfo();
-  const { createConversation } = useConversation(chat);
   useEffect(() => {
     setIsAddToBlocklist(false);
     setRemarkValue(remark);
@@ -59,12 +57,14 @@ export function UnMemoizedFriendInfo<T extends Props>(
     await deleteFriend(userID);
     setActiveContact();
   };
-  const openC2CConversation = async () => {
+  const openC2CConversation = () => {
     const conversationID = `C2C${userID}`;
-    const conversation = await createConversation(conversationID);
-    TUIConversationService.switchConversation(conversationID);
-    setActiveConversation(conversation);
-    openChat && openChat();
+    showChats && showChats();
+    TUIConversationService.switchConversation(conversationID).then(
+      (conversationModel: IConversationModel) => {
+        setActiveConversation(conversationModel.getConversation());
+      }
+    );
   };
 
   return (

package/src/components/TUIContact/TUIContactInfo/groupInfo.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { TUIConversationService, IGroupModel, IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { useTUIKitContext } from '../../../context';
+import { Icon, IconTypes } from '../../Icon';
+import { isH5 } from '../../../utils/env';
+import '../index.scss';
+import { Avatar, defaultUserAvatar } from '../../Avatar';
+
+interface Props {
+  group: IGroupModel;
+  showChats?: () => void,
+}
+
+export function UnMemoizedGroupInfo<T extends Props>(
+  props: T,
+): React.ReactElement {
+  const { group, showChats } = props;
+  
+  const { setActiveContact, setActiveConversation } = useTUIKitContext('TUIContact');
+  const { t } = useTranslation();
+  const { groupID, name, avatar } = group;
+
+  const back = () => {
+    TUIConversationService.switchConversation('');
+    setActiveContact();
+  };
+  const openGroupConversation = () => {
+    const conversationID = `GROUP${groupID}`;
+    showChats && showChats();
+    TUIConversationService.switchConversation(conversationID).then(
+      (conversationModel: IConversationModel) => {
+        setActiveConversation(conversationModel.getConversation());
+      }
+    );
+  };
+
+  return (
+    <>
+     <div className="tui-contact-info-header">
+      {isH5 && (
+      <Icon
+        width={9}
+        height={16}
+        type={IconTypes.BACK}
+        onClick={back}
+      />
+      )}
+      <div className="header-container">
+        <div className="header-container-avatar">
+          <Avatar size={60} image={avatar || defaultUserAvatar} />
+          <div className="header-container-name">{name || groupID}</div>
+        </div>
+        <div className="header-container-text">{`groupID:${groupID}`}</div>
+      </div>
+     </div>
+     <div className="tui-contact-info-content">
+        <div className="content-btn-container">
+          <div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={openGroupConversation}>{t('TUIContact.Send Message')}</div>
+        </div>
+     </div>
+    </>
+  );
+}
+export const GroupInfo = React.memo(UnMemoizedGroupInfo);

package/src/components/TUIContact/TUIContactList/TUIContactList.tsx

@@ -4,13 +4,20 @@ import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
 import { useTUIKitContext, useTUIContactContext } from '../../../context';
 import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
-
+import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
 import rightArrow from '../../Icon/images/right-arrow.svg';
 import downArrow from '../../Icon/images/down-arrow.png';
-
 import './index.scss';
 
+interface RenderContactListProps {
+  type: 'group' | 'block' | 'friend' ,
+  isShow: boolean,
+  title: string,
+  list: Array<any> | undefined,
+  setShow: (value: boolean) => void
+}
+
 function UnMemoizedTUIContactList<T>(): React.ReactElement {
   const { setActiveContact } = useTUIKitContext();
   const { t } = useTranslation();
@@ -20,16 +27,56 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
   const {
     acceptFriendApplication,
   } = useContactInfo();
-
+  const { groupList } = useTUIContact();
   const [iShowFriendApplication, setShowFriendApplication] = useState(false);
   const [iShowFriends, setShowFriends] = useState(false);
   const [isShowBlocklist, setShowBlocklist] = useState(false);
+  const [isShowGrouplist, setShowGrouplist] = useState(false);
 
   const acceptFriendApplicationHandle = (e: any, userID: string) => {
     e.stopPropagation();
     acceptFriendApplication(userID);
     setActiveContact();
   };
+
+const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContactListProps) => {
+  return (
+    <>
+      <div
+        className="tui-contacts-title"
+        role="button"
+        tabIndex={0}
+        onClick={() => setShow(!isShow)}
+      >
+        <div className="tui-contacts-list-title">{title}</div>
+        <div className="tui-contacts-list-icon">
+          <img src={isShow ? downArrow : rightArrow} alt="" />
+        </div>
+      </div>
+      {isShow
+        && list?.map((item: any) => {
+          const { userID, groupID, avatar, name, nick } = item.profile || item;
+          const showName = item.remark || nick || userID || name || groupID;
+          return (
+            <div
+              role="button"
+              tabIndex={0}
+              className="tui-contacts-list-item"
+              key={userID || groupID}
+              onClick={() => {
+                setActiveContact({ type, data: item });
+              }}
+            >
+              <Avatar size={30} image={avatar || defaultUserAvatar} />
+              <div className="tui-contacts-list-item-container">
+                <p className="tui-contacts-list-item-name">{ showName }</p>
+              </div>
+            </div>
+          );
+        })}
+    </>
+  );
+}
   // eslint-disable-next-line
   // @ts-ignore
   return (
@@ -96,68 +143,27 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
               </div>
             );
           })}
-        <div
-          className="tui-contacts-title"
-          role="button"
-          tabIndex={0}
-          onClick={() => setShowBlocklist(!isShowBlocklist)}
-        >
-          <div className="tui-contacts-list-title">{t('TUIContact.Blocked List')}</div>
-          <div className="tui-contacts-list-icon">
-            <img src={isShowBlocklist ? downArrow : rightArrow} alt="" />
-          </div>
-        </div>
-        {isShowBlocklist
-          && blocklistProfile?.map((item, index) => {
-            const { userID, avatar, nick } = item;
-            return (
-              <div
-                role="button"
-                tabIndex={0}
-                className="tui-contacts-list-item"
-                key={userID}
-                onClick={() => {
-                  setActiveContact({ type: 'block', data: item });
-                }}
-              >
-                <Avatar size={30} image={avatar || defaultUserAvatar} />
-                <div className="tui-contacts-list-item-container">
-                  <p className="tui-contacts-list-item-name">{ nick || userID}</p>
-                </div>
-              </div>
-            );
-          })}
-        <div
-          className="tui-contacts-title"
-          role="button"
-          tabIndex={0}
-          onClick={() => setShowFriends(!iShowFriends)}
-        >
-          <div className="tui-contacts-list-title">{t('TUIContact.Friends')}</div>
-          <div className="tui-contacts-list-icon">
-            <img src={iShowFriends ? downArrow : rightArrow} alt="" />
-          </div>
-        </div>
-        {iShowFriends
-          && friendList?.map((item, index) => {
-            const { userID, avatar, nick } = item.profile;
-            return (
-              <div
-                className="tui-contacts-list-item"
-                key={userID}
-                role="button"
-                tabIndex={0}
-                onClick={() => {
-                  setActiveContact({ type: 'friend', data: item });
-                }}
-              >
-                <Avatar size={30} image={avatar || defaultUserAvatar} />
-                <div className="tui-contacts-list-item-container">
-                  <p className="tui-contacts-list-item-name">{item.remark || nick || userID}</p>
-                </div>
-              </div>
-            );
-          })}
+        <RenderContactList 
+          type={'block'}
+          title={t('TUIContact.Blocked List')}
+          isShow={isShowBlocklist}
+          setShow={setShowBlocklist}
+          list={blocklistProfile}
+        />
+        <RenderContactList 
+          type={'group'}
+          title={t('TUIContact.Group List')}
+          setShow={setShowGrouplist}
+          isShow={isShowGrouplist}
+          list={groupList}
+        />
+        <RenderContactList 
+          type={'friend'}
+          title={t('TUIContact.Friends')}
+          setShow={setShowFriends}
+          isShow={iShowFriends}
+          list={friendList}
+        />
       </div>
     )
   );

package/src/components/TUIContact/hooks/useTUIContact.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
+import {
+  TUIStore,
+  StoreName,
+  IGroupModel,
+} from '@tencentcloud/chat-uikit-engine';
 import { useTUIKitContext } from '../../../context';
 
 function useTUIContact() {
@@ -8,14 +13,22 @@ function useTUIContact() {
   const [blockList, setBlockList] = useState([]);
   const [friendApplicationList, setFriendApplicationList] = useState([]);
   const [blocklistProfile, setBlocklistProfile] = useState([]);
+  const [groupList, setGroupList] = useState<IGroupModel[]>();
+
   const [isShowContactList, setShowContactList] = useState(true);
 
   useEffect(() => {
+    TUIStore.watch(StoreName.GRP, {
+      groupList: onGroupListUpdated,
+    });
     getFriendList();
     getBlocklist();
     getFriendApplicationList();
   }, [chat]);
 
+  const onGroupListUpdated = (list: IGroupModel[]) => {
+    setGroupList(list);
+  };
   useEffect(() => {
     chat?.on(TencentCloudChat.EVENT.BLACKLIST_UPDATED, onBlocklistUpdated);
     chat?.on(TencentCloudChat.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);
@@ -64,6 +77,7 @@ function useTUIContact() {
 
   return {
     friendList,
+    groupList,
     blocklistProfile,
     friendApplicationList,
     blockList,

package/src/components/TUIConversationList/hooks/useConversationList.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import TencentCloudChat, { ChatSDK, Conversation } from '@tencentcloud/chat';
-
+import {
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
 function useConversationList(
   chat: ChatSDK,
   activeConversationHandler?:(
@@ -10,33 +13,25 @@ function useConversationList(
   filterConversation?:(conversationList: Array<Conversation>) => Array<Conversation>,
 ) {
   const [conversationList, setConversationList] = useState<Array<Conversation>>([]);
-  const queryConversation = async (queryType?: string) => {
-    if (queryType === 'reload') {
-      setConversationList([]);
+  const onConversationListUpdated = (list: any) => {
+    let resConversationList = [];
+    if (filterConversation) {
+      resConversationList = filterConversation(list);
+    } else {
+      resConversationList = list.filter(
+        (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
+      );
     }
-    const offset = queryType === 'reload' ? 0 : conversationList.length;
-
-    const res = await chat?.getConversationList();
-    if (res?.code === 0) {
-      let resConversationList = [];
-      if (filterConversation) {
-        resConversationList = filterConversation(res.data.conversationList);
-      } else {
-        resConversationList = res.data.conversationList.filter(
-          (item: any) => item.type !== TencentCloudChat.TYPES.CONV_SYSTEM,
-        );
-      }
-      const newConversationList = queryType === 'reload'
-        ? resConversationList
-        : [...conversationList, resConversationList];
-      setConversationList(newConversationList);
-      if (!offset && activeConversationHandler) {
-        activeConversationHandler(newConversationList, setConversationList);
-      }
+    setConversationList(resConversationList);
+    if (activeConversationHandler) {
+      activeConversationHandler(resConversationList, setConversationList);
     }
   };
+
   useEffect(() => {
-    queryConversation('reload');
+    TUIStore.watch(StoreName.CONV, {
+      conversationList: onConversationListUpdated,
+    }); 
   }, [chat]);
   return {
     conversationList,