@tencentcloud/chat-uikit-react 1.1.0 → 1.2.0

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -41,24 +41,25 @@ export function ConversationPreview<T extends ConversationPreviewProps>(
     searchValue,
     conversationUpdateCount,
   } = props;
+  const { language } = useTUIKitContext('TUIConversation');
   const {
     setActiveConversation,
     myProfile,
   } = useTUIKitContext('ConversationPreview');
   const [displayImage, setDisplayImage] = useState(getDisplayImage(conversation));
   const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(conversation, searchValue));
-  const [displayMessage, setDisplayMessage] = useState(getDisplayMessage(conversation, myProfile));
-  const [displayTime, setDisplayTime] = useState(getDisplayTime(conversation));
+  const [displayMessage, setDisplayMessage] = useState(getDisplayMessage(conversation, myProfile, language));
+  const [displayTime, setDisplayTime] = useState(getDisplayTime(conversation, language));
   const [unread, setUnread] = useState(conversation.unreadCount);
   const isActive = activeConversation?.conversationID === conversation?.conversationID;
   if (!Preview) return null;
   useEffect(() => {
     setDisplayTitle(getDisplayTitle(conversation, searchValue));
-    setDisplayMessage(getDisplayMessage(conversation, myProfile));
+    setDisplayMessage(getDisplayMessage(conversation, myProfile, language));
     setDisplayImage(getDisplayImage(conversation));
-    setDisplayTime(getDisplayTime(conversation));
+    setDisplayTime(getDisplayTime(conversation, language));
     setUnread(conversation.unreadCount);
-  }, [conversation, searchValue, conversationUpdateCount]);
+  }, [conversation, searchValue, conversationUpdateCount, language]);
 
   return (
     <Preview

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ConversationPreviewUIComponentProps } from './ConversationPreview';
 import { Avatar as DefaultAvatar } from '../Avatar/index';
 import './styles/index.scss';
@@ -22,6 +23,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
     setActiveConversation,
   } = props;
 
+  const { t } = useTranslation();
   const conversationPreviewButton = useRef<HTMLButtonElement | null>(null);
   const activeClass = active ? 'conversation-preview-content--active' : '';
   const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
@@ -101,7 +103,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
                       moreHandle('pin');
                     }}
                   >
-                    {!conversation.isPinned ? 'Pin' : 'Cancel Pin'}
+                    {t(!conversation.isPinned ? 'TUIConversation.Pin' : 'TUIConversation.Unpin')}
                   </div>,
                   <div
                     className="more-handle-item"
@@ -112,7 +114,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
                     }}
                     role="presentation"
                   >
-                    Delete
+                    {t('TUIConversation.Delete')}
                   </div>,
                 ]}
                 showNumber={0}

package/src/components/ConversationPreview/utils.tsx

@@ -1,10 +1,9 @@
-import {
-  format, isToday, isYesterday, formatDistance, isThisYear, isThisWeek,
-} from 'date-fns';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
+import { getTimeStamp } from '../untils';
 
 export const getDisplayTitle = (
   conversation: Conversation,
@@ -14,11 +13,11 @@ export const getDisplayTitle = (
   const {
     name, nick, groupID, userID,
   } = getMessageProfile(conversation);
-  const { type } = conversation;
+  const { type, remark } = conversation;
   let title = '';
   switch (type) {
     case TencentCloudChat.TYPES.CONV_C2C:
-      title = nick || userID;
+      title = remark || nick || userID;
       break;
     case TencentCloudChat.TYPES.CONV_GROUP:
       title = name || groupID;
@@ -57,7 +56,11 @@ export const getDisplayImage = (conversation: Conversation) => {
   }
   return displayImage;
 };
-export const getDisplayMessage = (conversation:Conversation, myProfile:Profile) => {
+export const getDisplayMessage = (
+  conversation:Conversation,
+  myProfile:Profile,
+  language?:string,
+) => {
   const { lastMessage, type } = conversation;
   const {
     fromAccount, nick, nameCard, isRevoked,
@@ -81,7 +84,7 @@ export const getDisplayMessage = (conversation:Conversation, myProfile:Profile)
     }}
     >
       <span>{from}</span>
-      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(lastMessage.messageForShow, 1)}</span>
+      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(lastMessage.messageForShow, 1, language)}</span>
     </div>
   );
 };
@@ -102,25 +105,7 @@ export const getMessageProfile = (conversation: Conversation):TProfile => {
   }
   return result as TProfile;
 };
-export const getDisplayTime = (conversation: Conversation) => {
+export const getDisplayTime = (conversation: Conversation, language?: string) => {
   const { lastMessage } = conversation;
-  return getTimeStamp(lastMessage.lastTime * 1000);
-};
-export const getTimeStamp = (time: number) => {
-  if (!time) {
-    return '';
-  }
-  if (!isThisYear(time)) {
-    return format(time, 'yyyy MMM dd');
-  }
-  if (isToday(time)) {
-    return format(time, 'p');
-  }
-  if (isYesterday(time)) {
-    return formatDistance(time, new Date());
-  }
-  if (isThisWeek(time)) {
-    return format(time, 'eeee');
-  }
-  return format(time, 'MMM dd');
+  return getTimeStamp(lastMessage.lastTime * 1000, language);
 };

package/src/components/ConversationSearch/ConversationSearchInput.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, InputHTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Input, InputProps } from '../Input';
@@ -12,10 +13,11 @@ export function ConversationSearchInput(props:InputProps) {
     onChange: handleChange,
     prefix = <Icon type={IconTypes.SEARCH} height={16} width={16} />,
   } = props;
+  const { t } = useTranslation();
   return (
     <Input
       className={`conversation-search-input ${className}`}
-      placeholder={placeholder || 'Search'}
+      placeholder={placeholder || t('TUIConversation.Search')}
       clearable={clearable}
       value={value}
       onChange={handleChange}

package/src/components/Icon/config.ts

@@ -41,6 +41,7 @@ import IconUnunionUrl from './images/ununion.png';
 import IconVectorUrl from './images/vector.png';
 import IconUnvectorUrl from './images/unvector.png';
 import IconVoiceUrl from './images/voice.png';
+import IconAddFriendUrl from './images/add-friend.svg';
 
 import { IconTypes } from './type';
 
@@ -226,4 +227,8 @@ export const ICON_CONFIG:IconConfig = {
     url: IconVoiceUrl,
     className: 'tui-kit-icon-voice',
   },
+  [IconTypes.ADDFRIEND]: {
+    url: IconAddFriendUrl,
+    className: 'tui-kit-icon-add-friend',
+  },
 };

package/src/components/Icon/images/add-friend.svg

@@ -0,0 +1,15 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4042_40004)">
+<mask id="path-1-inside-1_4042_40004" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6893 17.8913C21.131 16.1584 21.998 13.9304 21.998 11.5C21.998 5.97715 17.5209 1.5 11.998 1.5C6.4752 1.5 1.99805 5.97715 1.99805 11.5C1.99805 17.0228 6.4752 21.5 11.998 21.5C14.1036 21.5 16.0571 20.8493 17.6686 19.738C17.6858 19.7471 17.7041 19.7551 17.7233 19.7619L19.9382 20.5463C20.2554 20.6587 20.5611 20.3529 20.4488 20.0357L19.6893 17.8913Z"/>
+</mask>
+<path d="M19.6893 17.8913L18.5362 16.932L17.9906 17.5879L18.2754 18.3921L19.6893 17.8913ZM17.6686 19.738L18.3687 18.4114L17.5651 17.9872L16.817 18.5031L17.6686 19.738ZM17.7233 19.7619L17.2226 21.1759H17.2226L17.7233 19.7619ZM19.9382 20.5463L20.4389 19.1324L19.9382 20.5463ZM20.4488 20.0357L19.0348 20.5365L20.4488 20.0357ZM20.498 11.5C20.498 13.5672 19.762 15.4585 18.5362 16.932L20.8425 18.8506C22.5 16.8582 23.498 14.2937 23.498 11.5H20.498ZM11.998 3C16.6925 3 20.498 6.80558 20.498 11.5H23.498C23.498 5.14873 18.3493 0 11.998 0V3ZM3.49805 11.5C3.49805 6.80558 7.30363 3 11.998 3V0C5.64677 0 0.498047 5.14873 0.498047 11.5H3.49805ZM11.998 20C7.30363 20 3.49805 16.1944 3.49805 11.5H0.498047C0.498047 17.8513 5.64677 23 11.998 23V20ZM16.817 18.5031C15.4479 19.4473 13.7898 20 11.998 20V23C14.4174 23 16.6663 22.2512 18.5201 20.9728L16.817 18.5031ZM18.2241 18.348C18.2732 18.3654 18.3216 18.3865 18.3687 18.4114L16.9684 21.0645C17.0501 21.1076 17.135 21.1448 17.2226 21.1759L18.2241 18.348ZM20.4389 19.1324L18.2241 18.348L17.2226 21.1759L19.4374 21.9603L20.4389 19.1324ZM19.0348 20.5365C18.7259 19.6641 19.5666 18.8234 20.4389 19.1324L19.4374 21.9603C20.9442 22.4939 22.3964 21.0417 21.8627 19.535L19.0348 20.5365ZM18.2754 18.3921L19.0348 20.5365L21.8627 19.535L21.1033 17.3906L18.2754 18.3921Z" fill="#147AFF" style="fill:#147AFF;fill:color(display-p3 0.0784 0.4784 1.0000);fill-opacity:1;" mask="url(#path-1-inside-1_4042_40004)"/>
+<path d="M8 11.5H16" stroke="#147AFF" style="stroke:#147AFF;stroke:color(display-p3 0.0784 0.4784 1.0000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12 15.5L12 7.5" stroke="#147AFF" style="stroke:#147AFF;stroke:color(display-p3 0.0784 0.4784 1.0000);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_4042_40004">
+<rect width="24" height="24" fill="white" style="fill:white;fill:white;fill-opacity:1;"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/Icon/images/right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.69071 0.283877C1.5751 0.169695 1.42795 0.107415 1.25453 0.107415C0.907683 0.107415 0.629156 0.377298 0.629156 0.719841C0.629156 0.891113 0.702729 1.04681 0.823599 1.16619L4.50226 4.71618L0.8236 8.2558C0.70273 8.37518 0.629157 8.53607 0.629157 8.70215C0.629157 9.04469 0.907684 9.31458 1.25453 9.31458C1.42795 9.31458 1.5751 9.25229 1.69071 9.13811L5.77928 5.19367C5.92643 5.05873 5.99474 4.89265 6 4.71099C6 4.52934 5.92643 4.37364 5.77928 4.23351L1.69071 0.283877Z" fill="black" style="fill:black;fill:black;fill-opacity:1;"/>
+</svg>

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

@@ -8,7 +8,6 @@ $primary-color: royalblue;
   position: relative;
   .icon-image {
     width: 100%;
-    height: 100%;
   }
   &:hover{
     color: $primary-color;

package/src/components/Icon/type.ts

@@ -42,4 +42,5 @@ export enum IconTypes {
   VECTOR = 'vector',
   UNVECTOR = 'unvector',
   VOICE = 'voice',
+  ADDFRIEND = 'addFriend',
 }

package/src/components/Input/Input.tsx

@@ -16,7 +16,8 @@ export interface InputProps
   value?: InputHTMLAttributes<HTMLInputElement>['value'],
   border?: '' | 'bottom',
   disabled?: boolean,
-  maxLength?: number
+  maxLength?: number,
+  onKeyDown?: (options?: object) => void
 }
 export interface InputRef {
   focus: (options?: object) => void;
@@ -35,6 +36,7 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       onChange,
       onBlur,
       onFocus,
+      onKeyDown,
       value: propsValue = '',
       border = '',
       disabled = false,
@@ -42,7 +44,7 @@ export const Input = React.forwardRef<InputRef, InputProps>(
     } = props;
 
     const [focused, setFocused] = useState<boolean>(false);
-
+    const enterCodeList = ['Enter', 'NumpadEnter'];
     const [value, setValue] = useState(propsValue);
     const inputRef = useRef<HTMLInputElement>(null);
     const handleFocus = (e) => {
@@ -53,6 +55,12 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       setFocused(false);
       onBlur?.(e);
     };
+    const handleEnterKeyDown = (e) => {
+      if (enterCodeList.indexOf(e?.key) > -1 && onKeyDown) {
+        e?.preventDefault();
+        onKeyDown(e);
+      }
+    };
     const clearInput = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
       setValue('');
       focus();
@@ -97,6 +105,7 @@ export const Input = React.forwardRef<InputRef, InputProps>(
             onFocus={handleFocus}
             onBlur={handleBlur}
             onChange={handleChange}
+            onKeyDown={handleEnterKeyDown}
           />
           {suffix}
           {(clearable && value)

package/src/components/Plugins/index.tsx

@@ -14,6 +14,7 @@ export interface PluginsProps {
   MoreIcon?: any,
   className?: string,
   customClass?: string,
+  style?: any,
   root?: any,
   handleVisible?: (isVisible:any) => void,
   showMore?: boolean,
@@ -28,6 +29,7 @@ function PluginsWithContext<T extends PluginsProps>(
     showNumber,
     MoreIcon,
     className = '',
+    style,
     customClass = '',
     root,
     handleVisible,
@@ -40,12 +42,33 @@ function PluginsWithContext<T extends PluginsProps>(
   }));
 
   const { showPicker, elements } = usePluginsElement({ plugins, showNumber });
+  const pluginRef = useRef(null);
 
   const [show, setShow] = useState(false);
 
   const handleShow = (e) => {
     e.stopPropagation();
     setShow(!show);
+    if (!show) {
+      pluginRef.current.offsetParent.removeEventListener('scroll', handleShow);
+    }
+  };
+
+  const pluginHandleVisible = (data) => {
+    if (handleVisible) {
+      const {
+        width, height,
+      } = pluginRef.current.children[1].getBoundingClientRect();
+      const { x = 0, y = 0 } = pluginRef.current.getBoundingClientRect();
+      pluginRef.current.offsetParent.addEventListener('scroll', handleShow);
+      handleVisible({
+        ...data,
+        width,
+        height,
+        x,
+        y,
+      });
+    }
   };
 
   return (
@@ -61,7 +84,7 @@ function PluginsWithContext<T extends PluginsProps>(
         })}
         {
         elements?.length > 0 && (
-          <div className="plugin-popup">
+          <div className="plugin-popup" ref={pluginRef}>
             <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
               {
                 !MoreIcon && <Icon width={20} height={20} type={IconTypes.ADD} />
@@ -72,10 +95,11 @@ function PluginsWithContext<T extends PluginsProps>(
             </div>
             <Popup
               className={`plugin-popup-box ${customClass}`}
+              style={style}
               show={show}
               close={handleShow}
               root={root}
-              handleVisible={handleVisible}
+              handleVisible={pluginHandleVisible}
             >
               <ul>
                 {elements.map((Item, index:number) => {

package/src/components/Popup/index.tsx

@@ -4,6 +4,7 @@ import './styles/index.scss';
 
 interface PopupProps {
   className?: string,
+  style?: any,
   show?: boolean,
   close?: (e) => void,
   root?: any,
@@ -18,6 +19,7 @@ T extends PopupProps
     close,
     children,
     className,
+    style,
     root,
     handleVisible,
   } = props;
@@ -42,11 +44,27 @@ T extends PopupProps
 
   useLayoutEffect(() => {
     const io = new IntersectionObserver(([change]) => {
-      const { boundingClientRect, rootBounds, intersectionRatio } = change;
+      const {
+        boundingClientRect: changeBoundingClientRec,
+        rootBounds: changeRootBounds,
+        intersectionRatio,
+      } = change;
+      const popupBoundingClientRect = popup.current.getBoundingClientRect() || {};
+      const rootRootBounds = root?.getBoundingClientRect() || {};
+      const boundingClientRect = {
+        ...changeBoundingClientRec,
+        ...popupBoundingClientRect,
+      };
+      const rootBounds = {
+        ...changeRootBounds,
+        ...rootRootBounds,
+      };
       if (handleVisible && intersectionRatio < 1) {
         handleVisible({
           left: (boundingClientRect.left - boundingClientRect.width) < rootBounds.left,
           top: (boundingClientRect.bottom + boundingClientRect.height) < rootBounds.bottom,
+          width: boundingClientRect.width,
+          height: boundingClientRect.height,
         });
       }
       setIsSetPos(true);
@@ -69,7 +87,7 @@ T extends PopupProps
   };
 
   return show && (
-    <div role="button" tabIndex={0} className={`popup ${className} ${isSetPos && 'popup-show'}`} ref={popup}>
+    <div role="button" tabIndex={0} style={style} className={`popup ${className} ${isSetPos && 'popup-show'}`} ref={popup}>
       {children}
     </div>
   );

package/src/components/TUIChat/hooks/useHandleMessageList.tsx

@@ -33,16 +33,11 @@ export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
 
   const getMessageList = useCallback(async (params?: GetMessageListProps) => {
     const data = params || {};
-    let groupType = '';
+    let groupType;
     if (groupProfile) {
-      try {
-        const res = await chat.searchGroupByID(groupProfile.groupID);
-        groupType = res?.data?.group?.type;
-      } catch (error) {
-        groupType = '';
-      }
+      groupType = groupProfile.type;
     }
-    if (isC2CConversation || (groupType && groupType !== TencentCloudChat.TYPES.GRP_AVCHATROOM)) {
+    if (isC2CConversation || (groupType !== TencentCloudChat.TYPES.GRP_AVCHATROOM)) {
       return chat.getMessageList({
         ...basicConfig,
         ...data,

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -42,7 +42,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     }
     switch (conversation?.type) {
       case TencentCloudChat.TYPES.CONV_C2C:
-        handleC2C(conversation.userProfile);
+        handleC2C(conversation.userProfile, conversation?.remark);
         break;
       case TencentCloudChat.TYPES.CONV_GROUP:
         handleGroup(conversation.groupProfile);
@@ -56,9 +56,9 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     }
   }, [conversation]);
 
-  const handleC2C = (userProfile: Profile) => {
+  const handleC2C = (userProfile: Profile, remark?: string) => {
     if (!title) {
-      setTitle(userProfile?.nick || userProfile?.userID);
+      setTitle(remark || userProfile?.nick || userProfile?.userID);
     }
     if (!propAvatar) {
       setAvatar(<Avatar size={32} image={handleDisplayAvatar(userProfile.avatar)} />);

package/src/components/TUIContact/TUIContact.tsx

@@ -0,0 +1,96 @@
+import React, { PropsWithChildren, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  TUIContactContextProvider,
+  TUIContactContextValue,
+} from '../../context/TUIContactContext';
+import { useTUIKitContext } from '../../context';
+import useTUIContact from './hooks/useTUIContact';
+import { TUIContactList } from './TUIContactList/TUIContactList';
+import { TUIContactSearch } from '../TUIContactSearch/TUIContactSearch';
+import { Icon, IconTypes } from '../Icon';
+import './index.scss';
+
+export function UnMemoizedTUIContact<T>(
+  props: PropsWithChildren<T>,
+): React.ReactElement {
+  const { children } = props;
+  const { t } = useTranslation();
+  const { setActiveContact } = useTUIKitContext('TUIContact');
+  const [isShowAddFriend, setShowAddFriend] = useState(false);
+  const addFriend = () => {
+    setActiveContact();
+    setShowAddFriend(true);
+  };
+  const addFriendBack = () => {
+    setActiveContact();
+    setShowAddFriend(false);
+  };
+  const {
+    friendList,
+    blockList,
+    blocklistProfile,
+    friendApplicationList,
+    isShowContactList,
+    setShowContactList,
+  } = useTUIContact();
+
+  const TUIContactValue: TUIContactContextValue = useMemo(
+    () => ({
+      friendList,
+      blockList,
+      blocklistProfile,
+      friendApplicationList,
+      isShowContactList,
+      setShowContactList,
+    }),
+    [
+      friendList,
+      blocklistProfile,
+      friendApplicationList,
+      isShowContactList,
+      setShowContactList,
+    ],
+  );
+  return (
+    <TUIContactContextProvider value={TUIContactValue}>
+      {children || (
+        <div className="tui-contacts">
+            {!isShowAddFriend && (
+              <>
+                <div className="tui-contacts-header">
+                  <div className="tui-contact-input">
+                    <TUIContactSearch />
+                  </div>
+                  <Icon
+                    onClick={addFriend}
+                    type={IconTypes.ADDFRIEND}
+                    width={24}
+                    height={24}
+                  />
+                </div>
+                <TUIContactList />
+              </>
+            )}
+            {isShowAddFriend && (
+              <>
+                <div className="tui-contacts-add-header">
+                  <Icon
+                    onClick={addFriendBack}
+                    type={IconTypes.BACK}
+                    width={9}
+                    height={16}
+                  />
+                  <div className="tui-contacts-add-header-title">
+                    {t('TUIContact.Add Friend')}
+                  </div>
+                </div>
+                <TUIContactSearch />
+              </>
+            )}
+        </div>
+      )}
+    </TUIContactContextProvider>
+  );
+}
+export const TUIContact = React.memo(UnMemoizedTUIContact);

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

@@ -0,0 +1,32 @@
+import React, {
+  PropsWithChildren,
+} from 'react';
+import { useTUIKitContext } from '../../../context';
+import { FriendInfo } from './friendInfo';
+import { BlockInfo } from './blockInfo';
+import { AddFriendInfo } from './addFriendInfo';
+import { FriendApplicationInfo } from './friendApplication';
+import './index.scss';
+
+interface TUIContactInfoProps {
+  className?: string,
+  showChat?: () => void,
+}
+export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
+  props: PropsWithChildren<T>,
+): React.ReactElement {
+  const { showChat } = props;
+  const { contactData } = useTUIKitContext('TUIContact');
+  if (!contactData?.type) {
+    return (<> </>);
+  }
+  return (
+    <div className="tui-contact-info">
+      {contactData?.type === 'addFriend' && (<AddFriendInfo profile={contactData?.data} />)}
+      {contactData?.type === 'friend' && (<FriendInfo openChat={showChat} friend={contactData?.data} />)}
+      {contactData?.type === 'block' && (<BlockInfo profile={contactData?.data} />)}
+      {contactData?.type === 'friendApplication' && <FriendApplicationInfo application={contactData?.data} />}
+    </div>
+  );
+}
+export const TUIContactInfo = React.memo(UnMemoizedTUIContactInfo);

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

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Profile } from '@tencentcloud/chat';
+import useContactInfo from './hooks/useContactInfo';
+import { BasicInfo } from './basicInfo';
+import { DivWithEdit } from '../../DivWithEdit';
+
+interface Props {
+  profile: Profile;
+}
+export function UnMemoizedAddFriendInfo<T extends Props>(
+  props: T,
+): React.ReactElement {
+  const { profile } = props;
+  const { userID } = profile;
+  const { t } = useTranslation();
+  const [isEditName, setIsEditRemark] = useState('');
+  const [remark, setRemark] = useState('');
+  const [wording, setWording] = useState('');
+  const [isSendedAdd, setIsSendAddFriend] = useState(false);
+
+  const {
+    addFriend,
+  } = useContactInfo();
+  const handleSetEditRemark = () => {
+    setIsEditRemark('remark');
+  };
+
+  const addFriendHandler = async () => {
+    const options = {
+      userID,
+      remark,
+      wording,
+    };
+    await addFriend(options);
+    setIsSendAddFriend(true);
+  };
+
+  const editText = (data?:any) => {
+    setRemark(data?.value);
+    setIsEditRemark('');
+  };
+
+  const handleChange = (e) => {
+    setWording(e.target.value);
+  };
+  return (
+    <>
+      <BasicInfo profile={profile} />
+      {!isSendedAdd ? (
+        <div className="tui-contact-info-content">
+          <div className="content-item-wording">
+            <p className="content-item-label">{t('TUIContact.Enter the verification info')}</p>
+            <textarea className="content-item-wording-text" value={wording} onChange={handleChange} />
+          </div>
+          <div className="content-item">
+            <p className="content-item-label">{t('TUIContact.remark')}</p>
+            <DivWithEdit
+              name="remark"
+              className="content-item-text"
+              value={remark}
+              type="text"
+              toggle={handleSetEditRemark}
+              isEdit={isEditName === 'remark'}
+              confirm={editText}
+              close={() => {
+                setIsEditRemark('');
+              }}
+            />
+          </div>
+          <div className="content-btn-container">
+            <div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={addFriendHandler}>{t('TUIContact.Send application')}</div>
+          </div>
+        </div>
+      ) : (
+        <div className="tui-contact-info-content">
+          <div className="content-item">
+            <p className="content-item-label">{t('TUIContact.verification info')}</p>
+            <p className="content-item-text">{wording}</p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+export const AddFriendInfo = React.memo(UnMemoizedAddFriendInfo);