@tencentcloud/chat-uikit-react 1.1.1 → 1.2.0

package/src/components/TUIMessage/MessagePlugins.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
 import './styles/index.scss';
 
@@ -37,7 +38,9 @@ export function MessagePlugins <T extends MessagePluginsProps>(
     config: propsPluginConfig,
   } = props;
 
+  const { t } = useTranslation();
   const [className, setClassName] = useState('');
+  const [popStyle, setPopStyle] = useState({});
   const pluginsRef = useRef(null);
 
   const { message, plugin: contextPlugin } = useTUIMessageContext('MessagePlugins');
@@ -86,13 +89,19 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   };
 
   const handleVisible = (data) => {
-    setClassName(`${!data.top && 'message-plugin-top'} ${!data.left && 'message-plugin-left'}`);
+    if (data.x && data.y) {
+      setPopStyle({
+        position: 'fixed',
+        left: `${!data.left ? (data.x - data.width) : data.x}px`,
+        top: `${!data.top ? (data.y - data.height) : data.y}px`,
+      });
+    }
   };
 
   const RevokeElement = useMessagePluginElement({
     children: (
       <div className="message-plugin-item">
-        <span>Recall</span>
+        <span>{t('TUIChat.Recall')}</span>
         <Icon width={20} height={20} type={IconTypes.REVOCATION} />
       </div>
     ),
@@ -109,7 +118,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   const DeleteElement = useMessagePluginElement({
     children: (
       <div className="message-plugin-item">
-        <span className="del">Delete</span>
+        <span className="del">{t('TUIChat.Delete')}</span>
         <Icon width={20} height={20} type={IconTypes.DEL} />
       </div>
     ),
@@ -125,7 +134,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   const ReplyElement = useMessagePluginElement({
     children: (
       <div className="message-plugin-item">
-        <span>Quote</span>
+        <span>{t('TUIChat.Reference')}</span>
         <Icon width={20} height={20} type={IconTypes.QUOTE} />
       </div>
     ),
@@ -141,7 +150,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   const CopyElement = useMessagePluginElement({
     children: (
       <div className="message-plugin-item">
-        <span>Copy</span>
+        <span>{t('TUIChat.Copy')}</span>
         <Icon width={20} height={20} type={IconTypes.COPY} />
       </div>
     ),
@@ -157,7 +166,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   const ResendElement = useMessagePluginElement({
     children: (
       <div className="message-plugin-item">
-        <span>Resend</span>
+        <span>{t('TUIChat.Resend')}</span>
         <Icon width={20} height={20} type={IconTypes.REPLY} />
       </div>
     ),
@@ -173,7 +182,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   const ForWardElement = useMessagePluginElement({
     children: (
       <div className="message-plugin-item">
-        <span>Forward</span>
+        <span>{t('TUIChat.Forward')}</span>
         <Icon width={20} height={20} type={IconTypes.FORWARD} />
       </div>
     ),
@@ -205,6 +214,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   <Plugins
     className="message-plugin"
     customClass={className}
+    style={popStyle}
     ref={pluginsRef}
     plugins={plugins}
     showNumber={showNumber}

package/src/components/TUIMessage/MessageRevoke.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import TencentCloudChat from '@tencentcloud/chat';
 import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatActionContext } from '../../context';
@@ -10,7 +11,7 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
   const {
     message,
   } = props;
-
+  const { t } = useTranslation();
   const { operateMessage } = useTUIChatActionContext('MessageRevokeWithContext');
 
   const handleRevoke = useCallback(() => {
@@ -25,13 +26,13 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
         message?.flow === MESSAGE_FLOW.IN && <span>{message?.nick || message?.from}</span>
       }
       {
-        message?.flow !== MESSAGE_FLOW.IN && <span>you </span>
+        message?.flow !== MESSAGE_FLOW.IN && <span>{t('TUIChat.You')}</span>
       }
-      <span> recalled a message</span>
+      <span>{t('TUIChat.recalled a message')}</span>
       {
         message?.flow === MESSAGE_FLOW.OUT
         && message?.type === TencentCloudChat.TYPES.MSG_TEXT
-        && <span className="edit" role="button" tabIndex={0} onClick={handleRevoke}> Re-edit</span>
+        && <span className="edit" role="button" tabIndex={0} onClick={handleRevoke}>{t('TUIChat.Re-edit')}</span>
       }
     </div>
   );

package/src/components/TUIMessage/MessageStatus.tsx

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { useTUIMessageContext } from '../../context';
+import { useTUIMessageContext, useTUIKitContext } from '../../context';
 import { getTimeStamp } from '../untils';
 
 export interface MessageContextProps {
@@ -13,12 +13,12 @@ function MessageStatustWithContext <T extends MessageContextProps>(
   const {
     message,
   } = props;
-
+  const { language } = useTUIKitContext('TUIChat');
   const {
     isShowTime,
   } = useTUIMessageContext('MessageStatustWithContext');
 
-  const timeElement = (typeof isShowTime === 'undefined' || isShowTime) && <div className="time">{message?.time ? getTimeStamp(message.time * 1000) : 0}</div>;
+  const timeElement = (typeof isShowTime === 'undefined' || isShowTime) && <div className="time">{message?.time ? getTimeStamp(message.time * 1000, language) : 0}</div>;
 
   return (
     <div className="message-status">

package/src/components/TUIMessage/hooks/useMessageHandler.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Message } from '@tencentcloud/chat';
 import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
 import { useTUIChatActionContext, useTUIKitContext } from '../../../context';
@@ -21,6 +22,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
     operateMessage,
     revokeMessage,
   } = useTUIChatActionContext('useDeleteHandler');
+  const { t } = useTranslation();
   const { chat } = useTUIKitContext('useDeleteHandler');
 
   const handleDelMessage = useCallback(async (event?) => {
@@ -39,7 +41,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
           error,
         });
       } else {
-        Toast({ text: 'Error deleting message', type: 'error' });
+        Toast({ text: t('TUIChat.Error deleting message'), type: 'error' });
         throw new Error(error);
       }
     }
@@ -65,7 +67,7 @@ export const useMessageHandler = (props?: MessageHandlerProps) => {
           error,
         });
       } else {
-        const text = message.flow === MESSAGE_FLOW.OUT ? 'The message recall exceeded the time limit (default 2 minutes)' : 'Error revoke Message';
+        const text = message.flow === MESSAGE_FLOW.OUT ? t('TUIChat.The message recall exceeded the time limit (default 2 minutes)') : t('TUIChat.Error revoke Message');
         Toast({ text, type: 'error' });
         throw new Error(error);
       }

package/src/components/TUIMessage/styles/layout.scss

@@ -356,17 +356,10 @@
     transform: scale(1.5);
   }
   .plugin-popup-box{
-    top: 100%;
     bottom: auto;
-    // left: -80px;
-  }
-  &-top {
-    top: auto !important;
-    bottom: 100% !important;
-  }
-  &-left {
-    left: -140px !important;
+    top: 100%;
   }
+
   &-box {
     padding: 6px 0;
   }

package/src/components/TUIMessage/utils/emojiMap.ts

@@ -460,7 +460,7 @@ export const bigEmojiList:Array<IBigEmojiListItem> = [
  * @param { number } type 0:Convert to Chinese expression key 1: Convert to English expression key
  * @returns { string } the converted text
  */
-export function formatEmojiString(data: string, type = 0) {
+export function formatEmojiString(data: string, type = 0, language?: string) {
   let text = data;
   const replace = {
     key: type === 0 ? 1 : 0,
@@ -468,7 +468,11 @@ export function formatEmojiString(data: string, type = 0) {
   };
   Object.entries(emojiEnKey).map((item) => {
     if (text.includes(item[replace.key])) {
-      text = transText(text, item[replace.key], item[replace.value]);
+      if (language && language === 'zh') {
+        text = item[replace.key];
+      } else {
+        text = transText(text, item[replace.key], item[replace.value]);
+      }
     }
     return item;
   });

package/src/components/TUIMessageInput/InputPluginsDefalut.tsx

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import './styles/index.scss';
 
 import { EmojiPicker } from './EmojiPicker';
@@ -14,6 +15,7 @@ export function InputPluginsDefalut():React.ReactElement {
     sendUploadMessage,
     pluginConfig: propsPluginConfig,
   } = useTUIMessageInputContext('TUIMessageInputDefault');
+  const { t } = useTranslation();
 
   const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
 
@@ -64,7 +66,7 @@ export function InputPluginsDefalut():React.ReactElement {
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.IMAGE} />
-        <span>Image</span>
+        <span>{t('TUIChat.Image')}</span>
       </div>
     ),
     type: 'image',
@@ -79,7 +81,7 @@ export function InputPluginsDefalut():React.ReactElement {
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.VIDEO} />
-        <span>Video</span>
+        <span>{t('TUIChat.Video')}</span>
       </div>
     ),
     type: 'video',
@@ -94,7 +96,7 @@ export function InputPluginsDefalut():React.ReactElement {
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.DOCUMENT} />
-        <span>Document</span>
+        <span>{t('TUIChat.File')}</span>
       </div>
     ),
     type: 'file',

package/src/components/TUIMessageInput/TUIForward.tsx

@@ -1,6 +1,7 @@
 import React, {
   PropsWithChildren, useCallback, useEffect, useState,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Conversation, Message } from '@tencentcloud/chat';
 import { useTUIChatActionContext } from '../../context';
 import './styles/index.scss';
@@ -28,6 +29,7 @@ export function TUIForward <T extends TUIForwardToProps>(
   const {
     handleForward: propsHandleForward,
   } = props;
+  const { t } = useTranslation();
   const [selectList, setSelectList] = useState([]);
   const [searchResult, setSearchResult] = useState([]);
   const [searchValue, setSearchValue] = useState('');
@@ -42,8 +44,8 @@ export function TUIForward <T extends TUIForwardToProps>(
     });
   }, [operateMessage]);
 
-  const FrequentlyList = conversationList.slice(0, 2);
-  const RecentList = conversationList.slice(2);
+  //const FrequentlyList = conversationList.slice(0, 2);
+  const RecentList = conversationList;
 
   const handleInputChange = (e) => {
     setSearchValue(e.target?.value);
@@ -104,7 +106,7 @@ export function TUIForward <T extends TUIForwardToProps>(
             height={16}
             onClick={handleClose}
           />
-          <h2 className="tui-forward-title">Forward To</h2>
+          <h2 className="tui-forward-title">{t('TUIChat.Forward to')}</h2>
         </header>
         <div className="tui-forward-search">
           <Input
@@ -120,7 +122,7 @@ export function TUIForward <T extends TUIForwardToProps>(
           {
             searchValue && (
             <ul className="tui-forward-list">
-              <h3 className="tui-forward-list-title">Search Result</h3>
+              <h3 className="tui-forward-list-title">{t('TUIChat.Search Result')}</h3>
               {
                 searchResult.length > 0 && searchResult.map((item) => (
                   <li key={item.conversationID} className="tui-forward-list-item">
@@ -138,34 +140,13 @@ export function TUIForward <T extends TUIForwardToProps>(
               }
               {
               searchResult.length === 0
-              && <p className="no-result">No Result</p>
+              && <p className="no-result">{t('TUIChat.No Result')}</p>
               }
             </ul>
             )
           }
-          { !searchValue && FrequentlyList.length > 0 && (
-            <ul className="tui-forward-list">
-              <h3 className="tui-forward-list-title">Frequently Contacted</h3>
-              {
-                FrequentlyList.map((item) => (
-                  <li key={item.conversationID} className="tui-forward-list-item">
-                    <label htmlFor={`${item.conversationID}`} className="info">
-                      <Avatar image={getDisplayImage(item)} size={40} />
-                      <div className="info-nick">{getDisplayTitle(item)}</div>
-                    </label>
-                    <Checkbox
-                      onChange={handleCheckboxChange}
-                      id={`${item.conversationID}`}
-                      value={item}
-                    />
-                  </li>
-                ))
-              }
-            </ul>
-          )}
           { !searchValue && RecentList.length > 0 && (
           <ul className="tui-forward-list">
-            <h3 className="tui-forward-list-title">Recent Chats</h3>
             {
                 RecentList.map((item) => (
                   <li key={item.conversationID} className="tui-forward-list-item">
@@ -186,7 +167,7 @@ export function TUIForward <T extends TUIForwardToProps>(
         </main>
         <footer className="tui-forward-footer">
           <div className="tui-forward-footer-name">{selectList.length > 0 && handleDisplayForwardName(selectList)}</div>
-          <button type="button" className="button" onClick={() => { handleForward(selectList); }} disabled={selectList.length === 0}>Forward</button>
+          <button type="button" className="button" onClick={() => { handleForward(selectList); }} disabled={selectList.length === 0}>{t('TUIChat.Forward')}</button>
         </footer>
       </div>
     </Model>

package/src/components/TUIMessageInput/TUIMessageInputDefault.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatStateContext } from '../../context';
 
@@ -17,6 +18,7 @@ export function TUIMessageInputDefault():React.ReactElement {
     setText,
     setCursorPos,
   } = useTUIMessageInputContext('TUIMessageInputDefault');
+  const { t } = useTranslation();
   const {
     operateData,
   } = useTUIChatStateContext('TUIMessageInputDefault');
@@ -60,7 +62,7 @@ export function TUIMessageInputDefault():React.ReactElement {
         !disabled
         && (
         <textarea
-          placeholder="send a message"
+          placeholder={t('TUIChat.Enter a message')}
           rows={1}
           value={text}
           ref={textareaRef}

package/src/components/TUIMessageInput/hooks/useCreateMessageInputContext.ts

@@ -5,7 +5,7 @@ export const useCreateMessageInputContext = (value:any) => {
     textareaRef,
     handleChange,
     handleSubmit,
-    handleKeyDown,
+    handleEnterKeyDown,
     onSelectEmoji,
     sendFaceMessage,
     disabled,
@@ -18,7 +18,7 @@ export const useCreateMessageInputContext = (value:any) => {
       textareaRef,
       handleChange,
       handleSubmit,
-      handleKeyDown,
+      handleEnterKeyDown,
       onSelectEmoji,
       sendFaceMessage,
       disabled,
@@ -31,7 +31,7 @@ export const useCreateMessageInputContext = (value:any) => {
       textareaRef,
       handleChange,
       handleSubmit,
-      handleKeyDown,
+      handleEnterKeyDown,
       onSelectEmoji,
       sendFaceMessage,
       disabled,

package/src/components/TUIMessageInput/hooks/useEmojiPicker.tsx

@@ -3,6 +3,7 @@ import {
   PropsWithChildren,
   useCallback,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useTUIChatActionContext } from '../../../context';
 import { emojiEnKey } from '../../TUIMessage/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
@@ -23,10 +24,15 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
     insertText,
   } = props;
 
+  const { i18n } = useTranslation();
   const { sendMessage, createFaceMessage } = useTUIChatActionContext('useEmojiPicker');
 
   const onSelectEmoji = (emoji:EmojiData) => {
-    insertText(emojiEnKey[emoji.data]);
+    if (i18n.language === 'en') {
+      insertText(emoji.data);
+    } else {
+      insertText(emojiEnKey[emoji.data]);
+    }
   };
 
   const sendFaceMessage = useCallback((emoji:EmojiData) => {

package/src/components/TUIMessageInput/styles/layout.scss

@@ -133,7 +133,6 @@ ul li {
   padding: 10px 16px;
   min-width: 180px;
   &:hover {
-    background: rgba(0,110,255,.1);
     color: #147aff;
   }
   input {

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Message } from '@tencentcloud/chat';
 import {
   useTUIChatStateContext,
@@ -31,6 +32,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
     className: propsClassName,
   } = props;
 
+  const { t } = useTranslation();
   const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
   const [firstRender, setFirstRender] = useState<boolean>(false);
 
@@ -102,7 +104,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
   return (
     <div className={`message-list ${propsClassName} ${!firstRender ? 'hide' : ''}`} ref={messageListRef}>
       {noMore}
-      {noMore && <p className="no-more">No More</p>}
+      {noMore && <p className="no-more">{t('TUIChat.No More')}</p>}
       <InfiniteScroll
         className="message-list-infinite-scroll"
         hasMore

package/src/components/TUIMessageList/hooks/useMessageListElement.tsx

@@ -2,7 +2,7 @@ import React, {
   PropsWithChildren, useMemo,
 } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { UnknowPorps } from '../../../context';
+import { UnknowPorps, useTUIKitContext } from '../../../context';
 import { TUIMessageProps } from '../../TUIMessage/TUIMessage';
 import { getTimeStamp } from '../../untils';
 
@@ -20,6 +20,7 @@ function useMessageListElement <T extends MessageListElementProps>(
     TUIMessage,
     intervalsTimer,
   } = props;
+  const { language } = useTUIKitContext('TUIConversation');
 
   return useMemo(() => enrichedMessageList?.map((item: Message, index:number) => {
     const key = `${item.ID}-${index}`;
@@ -30,7 +31,7 @@ function useMessageListElement <T extends MessageListElementProps>(
     return (
       <li className="message-list-item" key={key}>
         {
-         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000) : 0}</div>
+         isShowIntervalsTimer && <div className="message-list-time" key={`${currrentTimer + index}`}>{currrentTimer ? getTimeStamp(currrentTimer * 1000, language) : 0}</div>
         }
         <TUIMessage message={item} />
       </li>

package/src/components/TUIProfile/TUIProfile.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import { Profile } from '../Profile';
 
 import './styles/index.scss';
 import { useMyProfile } from './hooks';
@@ -20,16 +21,26 @@ function UnMemoizedTUIProfile<T extends TUIProfileProps>(
 
   const { myProfile, updateMyProfile } = useMyProfile();
 
-  const { TUIProfileShow } = useTUIKitContext('TUIProfile');
+  const { setTUIProfileShow, TUIProfileShow } = useTUIKitContext('TUIProfile');
 
   const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
 
-  return TUIProfileShow && (
-    <TUIProfileUIComponent
-      className={className}
-      userInfo={myProfile}
-      update={updateMyProfile}
-    />
+  return (
+    <>
+      <Profile
+        profile={myProfile}
+        handleAvatar={() => {
+          setTUIProfileShow(true);
+        }}
+      />
+      {TUIProfileShow && (
+        <TUIProfileUIComponent
+          className={className}
+          userInfo={myProfile}
+          update={updateMyProfile}
+        />
+      )}
+    </>
   );
 }
 

package/src/components/TUIProfile/TUIProfileDefault.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-date-picker';
 import TencentCloudChat, { Profile } from '@tencentcloud/chat';
 
@@ -15,6 +16,11 @@ const gender = {
   [TencentCloudChat.TYPES.GENDER_MALE]: 'male',
   [TencentCloudChat.TYPES.GENDER_FEMALE]: 'female',
 };
+const allowType = {
+  [TencentCloudChat.TYPES.ALLOW_TYPE_ALLOW_ANY]: 'allowAny',
+  [TencentCloudChat.TYPES.ALLOW_TYPE_NEED_CONFIRM]: 'needConfirm',
+  [TencentCloudChat.TYPES.ALLOW_TYPE_DENY_ANY]: 'denyAny',
+};
 
 const avatarList = [
   'https://im.sdk.qcloud.com/download/tuikit-resource/avatar/avatar_1.png',
@@ -36,6 +42,21 @@ const genderList = [
   },
 ];
 
+const allowTypeList = [
+  {
+    label: 'AllowAny',
+    value: TencentCloudChat.TYPES.ALLOW_TYPE_ALLOW_ANY,
+  },
+  {
+    label: 'NeedConfirm',
+    value: TencentCloudChat.TYPES.ALLOW_TYPE_NEED_CONFIRM,
+  },
+  {
+    label: 'DenyAny',
+    value: TencentCloudChat.TYPES.ALLOW_TYPE_DENY_ANY,
+  },
+];
+
 export interface TUIProfileDefaultProps {
   userInfo?: Profile,
   update?:(option:ProfileParams) => void,
@@ -51,6 +72,7 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
     update,
   } = props;
 
+  const { t } = useTranslation();
   const { setTUIProfileShow } = useTUIKitContext('TUIProfileDefault');
 
   const [isEditName, setIsEditName] = useState('');
@@ -83,10 +105,13 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
     },
     {
       name: 'Gender',
-      value: gender[userInfo?.gender]?.replace(
+      value: t(gender[userInfo?.gender]?.replace(
         gender[userInfo?.gender][0],
         gender[userInfo?.gender][0]?.toLocaleUpperCase(),
-      ),
+      ) ? `TUIProfile.${gender[userInfo?.gender]?.replace(
+          gender[userInfo?.gender][0],
+          gender[userInfo?.gender][0]?.toLocaleUpperCase(),
+        )}` : ''),
       type: 'select',
       children: (
         <ul className="select-list">
@@ -101,7 +126,35 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
               key={key}
               onClick={() => { editGender(item); }}
             >
-              {item.label}
+              {t(`TUIProfile.${item.label}`)}
+            </li>
+          );
+        })
+      }
+        </ul>
+      ),
+    },
+    {
+      name: 'AllowType',
+      value: t(`TUIProfile.${allowType[userInfo?.allowType]?.replace(
+        allowType[userInfo?.allowType][0],
+        allowType[userInfo?.allowType][0]?.toLocaleUpperCase(),
+      )}`),
+      type: 'select',
+      children: (
+        <ul className="select-list">
+          {
+        allowTypeList?.map((item, index) => {
+          const key = `${item.value}${index}`;
+          return (
+            <li
+              className="select-list-item"
+              role="menuitem"
+              tabIndex={index}
+              key={key}
+              onClick={() => { editAllowType(item); }}
+            >
+              {t(`TUIProfile.${item.label}`)}
             </li>
           );
         })
@@ -111,7 +164,7 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
     },
     {
       name: 'Birthday',
-      value: userInfo?.birthday,
+      value: `${userInfo?.birthday}`,
       type: 'select',
       children: (
         <DatePicker
@@ -165,6 +218,11 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
     confirm({ gender: data.value });
   };
 
+  // edit allowType
+  const editAllowType = (data) => {
+    confirm({ allowType: data.value });
+  };
+
   // edit birthday
   const editBirthday = (value:Date) => {
     confirm({
@@ -181,7 +239,7 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
           type={IconTypes.BACK}
           onClick={() => { setTUIProfileShow(false); }}
         />
-        <h1>Personal information</h1>
+        <h1>{t('TUIProfile.Personal information')}</h1>
       </header>
       <main className="tui-profile-main">
         <div className="tui-profile-avatar">
@@ -213,7 +271,7 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
             const key = `${item.name}`;
             return (
               <li className="tui-profile-list-item" key={key}>
-                <h4>{item.name}</h4>
+                <h4>{t(`TUIProfile.${item.name}`)}</h4>
                 <DivWithEdit
                   className="tui-profile-div-with-edit"
                   classEditName="tui-profile-edit"

package/src/components/TUIProfile/styles/layout.scss

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   width: 30%;
-  max-width: 400px;
+  max-width: 360px;
   min-width: 360px;
   height: 100%;
   &-header {