tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/components/MessageInput/AttachmentPicker/AttachmentPicker.vue

@@ -70,13 +70,13 @@ const { t } = useUIKit();
 const isCollapsed = computed(() => props.attachmentPickerMode === 'collapsed');
 
 const pickerItems = computed(() => [
-  { type: 'File', Component: FilePicker },
-  { type: 'Image', Component: ImagePicker },
-  { type: 'Video', Component: VideoPicker },
+  { type: 'file', Component: FilePicker },
+  { type: 'image', Component: ImagePicker },
+  { type: 'video', Component: VideoPicker },
 ].map(({ type, Component }) => ({
   Component,
   props: {
-    label: isCollapsed.value ? t(`TUIChat.${type}`) : '',
+    label: isCollapsed.value ? t(`MessageInput.${type}`) : '',
     iconSize: isCollapsed.value ? ICON_SIZE.COLLAPSED : ICON_SIZE.EXPANDED,
   },
 })));

package/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue

@@ -60,19 +60,19 @@ const calculateReferenceContent = (message: IMessageModel | undefined): string =
     case TencentCloudChat.TYPES.MSG_TEXT:
       return message.payload?.text;
     case TencentCloudChat.TYPES.MSG_IMAGE:
-      return t('TUIChat.Image');
+      return t('MessageInput.image');
     case TencentCloudChat.TYPES.MSG_AUDIO:
-      return t('TUIChat.Audio');
+      return t('MessageInput.audio');
     case TencentCloudChat.TYPES.MSG_VIDEO:
-      return t('TUIChat.Video');
+      return t('MessageInput.video');
     case TencentCloudChat.TYPES.MSG_FILE:
-      return t('TUIChat.File');
+      return t('MessageInput.file');
     case TencentCloudChat.TYPES.MSG_LOCATION:
-      return t('TUIChat.Location');
+      return t('MessageInput.location');
     case TencentCloudChat.TYPES.MSG_CUSTOM:
-      return t('TUIChat.Custom message');
+      return t('MessageInput.custom_message');
     default:
-      return t('TUIChat.Unknown');
+      return t('MessageInput.unknown');
   }
 };
 </script>

package/src/components/MessageInput/SendButton/SendButton.vue

@@ -6,21 +6,23 @@
     :disabled="disabled"
     @click="onSendButtonClick"
   >
-    {{ t('TUIChat.Send') }}
+    {{ t('MessageInput.send') }}
   </TUIButton>
 </template>
 
 <script setup lang="ts">
 import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
-interface Props {
-  onClick?: (e: MouseEvent) => void;
+interface SendButtonProps {
+  onClick?: (e: TouchEvent) => void;
   disabled?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = defineProps<SendButtonProps>();
+
 const { t } = useUIKit();
-function onSendButtonClick(e: MouseEvent) {
+
+function onSendButtonClick(e: TouchEvent) {
   if (!props.disabled && props.onClick) {
     props.onClick(e);
   }

package/src/components/MessageInput/TextEditor/EditorCore.ts

@@ -3,7 +3,7 @@ import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
 import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
-import type { IInputContent } from '../../../states/MessageInputState';
+import type { InputContent } from '../../../states/MessageInputState';
 import type { JSONContent } from '@tiptap/vue-3';
 import type { EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
 import './Editor.scss';
@@ -67,7 +67,7 @@ function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined
   });
 }
 
-function convertEditorContent(node: JSONContent): IInputContent[] {
+function convertEditorContent(node: JSONContent): InputContent[] {
   if (!node?.content) {
     return [];
   }
@@ -111,7 +111,7 @@ interface EditorOptions {
   placeholder?: string;
   autoFocus?: boolean;
   disabled?: boolean;
-  onUpdate?: (content: IInputContent[]) => void;
+  onUpdate?: (content: InputContent[]) => void;
   onEnter?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -1,11 +1,14 @@
 <template>
   <div :class="[styles['input-wrapper'], props.disabled && styles.disabled]">
     <div :class="styles['input-prefix']">
-      <slot name="prefix"></slot>
+      <slot name="prefix" />
     </div>
-    <div ref="editorRef" :class="styles['editor']"></div>
+    <div
+      ref="editorRef"
+      :class="styles['editor']"
+    />
     <div :class="styles['input-suffix']">
-      <slot name="suffix"></slot>
+      <slot name="suffix" />
     </div>
   </div>
 </template>
@@ -19,26 +22,26 @@ import { createEditor } from './EditorCore';
 import styles from './TextEditor.module.scss';
 import type { Editor } from './EditorCore';
 
-interface ITextEditorProps {
+interface TextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
 }
 
-const props = withDefaults(defineProps<ITextEditorProps>(), {
+const props = withDefaults(defineProps<TextEditorProps>(), {
   autoFocus: true,
   disabled: false,
   placeholder: '',
 });
 
 const { t } = useUIKit();
-const { currentConversationID } = useConversationListState();
+const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
-const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('TUIChat.Enter a message')));
+const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
 
 let editorInstance: Editor | null = null;
 
@@ -54,7 +57,7 @@ onMounted(() => {
       placeholder: placeholderText.value,
       autoFocus: props.autoFocus,
       disabled: props.disabled,
-      onUpdate: content => {
+      onUpdate: (content) => {
         updateRawValue(content);
       },
       onEnter: () => {
@@ -82,8 +85,8 @@ onUnmounted(() => {
   }
 });
 
-watch(currentConversationID, (newID, oldID) => {
-  if (newID !== oldID) {
+watch(activeConversation, (newConversation, oldConversation) => {
+  if (newConversation?.conversationID !== oldConversation?.conversationID) {
     setContent('');
   }
 });

package/src/components/MessageInput/i18n/en-US.ts

@@ -0,0 +1,13 @@
+const MessageInput = {
+  file: 'File',
+  image: 'Image',
+  video: 'Video',
+  audio: 'Audio',
+  location: 'Location',
+  custom_message: 'Custom Message',
+  unknown: 'Unknown',
+  enter_a_message: 'Enter a message',
+  send: 'Send',
+};
+
+export default MessageInput;

package/src/components/MessageInput/i18n/index.ts

@@ -0,0 +1,13 @@
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+Object.entries(resources).forEach(([lng, resource]) => {
+  i18next.addResourceBundle(lng, 'translation', { MessageInput: resource }, true, false);
+});

package/src/components/MessageInput/i18n/zh-CN.ts

@@ -0,0 +1,13 @@
+const MessageInput = {
+  file: '文件',
+  image: '图片',
+  video: '视频',
+  audio: '音频',
+  location: '位置',
+  custom_message: '自定义消息',
+  unknown: '未知',
+  enter_a_message: '输入消息',
+  send: '发送',
+};
+
+export default MessageInput;

package/src/components/MessageInput/index.ts

@@ -1,7 +1,9 @@
 import { AttachmentPicker, FilePicker, ImagePicker, VideoPicker } from './AttachmentPicker';
 import { EmojiPicker } from './EmojiPicker';
-import { TextEditor } from './TextEditor';
 import MessageInput from './MessageInput.vue';
+import { TextEditor } from './TextEditor';
+
+import './i18n';
 
 export {
   TextEditor,

package/src/components/MessageList/Message/FileMessage/FileMessage.vue

@@ -59,7 +59,7 @@ const handleFileClick = async (event: MouseEvent) => {
       window.URL.revokeObjectURL(blobUrl);
     } catch {
       TUIToast.error({
-        message: t('TUIChat.Download failed'),
+        message: t('MessageList.download_failed'),
       });
     }
   }

package/src/components/MessageList/Message/GroupTipMessage/GroupTipMessage.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
-import { View } from '../../../../baseComp/View';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { resolveGroupTipMessage } from './resolveGroupTipMessage';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IGroupTipMessageProps {
-  message: IMessageModel;
+interface GroupTipMessageProps {
+  message: MessageModel;
 }
 
-interface IGroupTipMessageContent {
+interface GroupTipMessageContent {
   text: string;
   businessID?: string;
   showName?: string;
 }
 
-interface ICustomMessageContent {
+interface CustomMessageContent {
   businessID?: string;
   showName?: string;
   custom?: string;
@@ -24,18 +24,18 @@ enum CustomMessageAsGroupTipEnum {
   GROUP_CREATE = 'group_create',
 }
 
-const props = defineProps<IGroupTipMessageProps>();
+const props = defineProps<GroupTipMessageProps>();
 
 const { t } = useUIKit();
 
-const messageContent = props.message.getMessageContent() as IGroupTipMessageContent & ICustomMessageContent;
+const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
 const renderText = () => {
   switch (messageContent.businessID) {
     case CustomMessageAsGroupTipEnum.GROUP_CREATE:
-      return `${messageContent.showName || ''} ${t('TUIChat.create group')}`;
+      return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
     default:
-      return messageContent.text;
+      return resolveGroupTipMessage(props.message).text;
   }
 };
 </script>

package/src/components/MessageList/Message/GroupTipMessage/resolveGroupTipMessage.ts

@@ -0,0 +1,97 @@
+import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+
+function substringByLength(str: string, len = 12) {
+  return str.length > len ? `${str.slice(0, len)}...` : str;
+}
+
+function handleGroupProfileUpdated(message: MessageModel) {
+  const { t } = i18next;
+  const { nick, payload } = message;
+  const { newGroupProfile, memberList, operatorID } = payload;
+  let text = '';
+
+  const showName: string = nick || operatorID;
+  const key: string = Object.keys(newGroupProfile)[0];
+  switch (key) {
+    case 'muteAllMembers':
+      if (newGroupProfile[key]) {
+        text = `${t('MessageList.administrator')} ${showName} ${t('MessageList.enabled_mute_all_members')}`;
+      } else {
+        text = `${t('MessageList.administrator')} ${showName} ${t('MessageList.disabled_mute_all_members')}`;
+      }
+      break;
+    case 'ownerID':
+      text = `${memberList[0].nick || memberList[0].userID} ${t('MessageList.became_new_group_owner')}`;
+      break;
+    case 'groupName':
+      text = `${showName} ${t('MessageList.changed_group_name_to')} ${newGroupProfile[key]}`;
+      break;
+    case 'notification':
+      text = `${showName} ${t('MessageList.published_new_announcement')}`;
+      break;
+    default:
+      break;
+  }
+  return text;
+}
+
+function resolveGroupTipMessage(message: MessageModel) {
+  const ret: {
+    text: string;
+  } = {
+    text: '',
+  };
+
+  const { t } = i18next;
+
+  let showName: string = message?.nick || message?.payload?.userIDList?.join(',');
+  if (message?.payload?.memberList?.length > 0) {
+    showName = '';
+    message?.payload?.memberList?.map((user: any) => {
+      const _showName = user?.nick || user?.userID;
+      showName += `${substringByLength(_showName)},`;
+      return user;
+    });
+    showName = showName?.slice(0, -1);
+  }
+
+  switch (message.payload.operationType) {
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_JOIN:
+      ret.text = `${showName} ${t('MessageList.joined_group')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_QUIT:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.left_group')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_KICKED_OUT:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.was')} ${t('MessageList.kicked_out_of_group')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_SET_ADMIN:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.became_admin')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
+      ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.admin_privileges_revoked')}`;
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
+      ret.text = handleGroupProfileUpdated(message);
+      break;
+    case TUIChatEngine.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
+      message.payload.memberList.forEach((member: any) => {
+        if (member.muteTime > 0) {
+          ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.was_muted')}`;
+        } else {
+          ret.text = `${t('MessageList.group_member')}: ${showName} ${t('MessageList.was_unmuted')}`;
+        }
+      });
+      break;
+    default:
+      ret.text = `[${t('MessageList.group_tip_message')}]`;
+      break;
+  }
+  return ret;
+}
+
+export {
+  resolveGroupTipMessage,
+};

package/src/components/MessageList/Message/MessageLayout/MessageLayout.vue

@@ -129,6 +129,7 @@ function handleReadReceiptClose() {
         v-if="!isHiddenMessageMeta"
         :class="metaClasses"
         :status="message.status"
+        :flow="message.flow"
         :timestamp="message.time * 1000"
         :need-read-receipt="message.needReadReceipt"
         :read-receipt-info="message.readReceiptInfo"

package/src/components/MessageList/Message/MessageLayout/MessageMeta/MessageMeta.vue

@@ -11,6 +11,7 @@ import MessageStatusIcon from './MessageStatusIcon.vue';
 interface MessageMetaProps {
   isGroup: boolean;
   timestamp: number;
+  flow: string;
   needReadReceipt?: boolean;
   readReceiptInfo?: {
     readCount: number;
@@ -24,6 +25,7 @@ interface MessageMetaProps {
 
 const props = withDefaults(defineProps<MessageMetaProps>(), {
   timestamp: 0,
+  flow: '',
   needReadReceipt: false,
   readReceiptInfo: undefined,
   status: undefined,
@@ -41,9 +43,11 @@ const handleGroupUnreadClick = () => {
   emits('onReadReceiptTextClick');
 };
 
-const shouldShowStatusIcon = computed(() => !props.needReadReceipt
-  || props.status === 'unSend'
-  || props.status === 'fail');
+const shouldShowStatusIcon = computed(() => (
+  props.flow === 'out'
+  && (!props.needReadReceipt
+    || props.status === 'unSend'
+    || props.status === 'fail')));
 
 const readReceiptText = computed(() => {
   if (!props.needReadReceipt || props.status !== 'success' || !props.readReceiptInfo) {
@@ -52,14 +56,14 @@ const readReceiptText = computed(() => {
 
   if (props.isGroup) {
     if (props.readReceiptInfo.unreadCount > 0) {
-      return `${props.readReceiptInfo.unreadCount} ${t('TUIChat.UNREAD')} ·`;
+      return `${props.readReceiptInfo.unreadCount} ${t('MessageList.unread')} ·`;
     }
-    return `${t('TUIChat.ALL_READ')} ·`;
+    return `${t('MessageList.all_read')} ·`;
   }
   if (props.readReceiptInfo.isPeerRead) {
-    return `${t('TUIChat.READ')} ·`;
+    return `${t('MessageList.read')} ·`;
   }
-  return `${t('TUIChat.UNREAD')} ·`;
+  return `${t('MessageList.unread')} ·`;
 });
 </script>
 

package/src/components/MessageList/Message/RecalledMessage/RecalledMessage.vue

@@ -4,18 +4,18 @@
     :style="props.style"
   >
     <template v-if="isMessageOwner">
-      {{ t('TUIChat.You') }}{{ t('TUIChat.recalled a message') }}
+      {{ t('MessageList.you') }}{{ t('MessageList.recalled_a_message') }}
       <View
         v-if="isTextMessage"
         role="button"
         class="recalled-message__button"
         @click="recallMessageToInput"
       >
-        {{ t('TUIChat.Re-edit') }}
+        {{ t('MessageList.reedit') }}
       </View>
     </template>
     <template v-else>
-      {{ otherDisplayName }} {{ t('TUIChat.recalled a message') }}
+      {{ otherDisplayName }} {{ t('MessageList.recalled_a_message') }}
     </template>
   </View>
 </template>

package/src/components/MessageList/Message/TextMessage/TextMessage.vue

@@ -8,7 +8,7 @@
       @click="handleReferenceClick"
     >
       <template v-if="isOriginMessageHasRecalled">
-        {{ t('TUIChat.origin message has been recalled') }}
+        {{ t('MessageList.origin_message_has_been_recalled') }}
       </template>
       <template v-else>
         <View class="text-message__reference__header">
@@ -47,9 +47,9 @@ import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { View } from '../../../../baseComp/View';
-import { safeJSONParse } from '../../../../utils/json';
 import { useScroll } from '../../../../hooks/useScroll';
 import { useMessageListState } from '../../../../states/MessageListState';
+import { safeJSONParse } from '../../../../utils/json';
 import type { ICloudCustomData } from '../../../../types/message';
 import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
@@ -69,14 +69,7 @@ const {
 
 const messageContent = computed(() => props.message.getMessageContent() as {
   showName: string;
-  text: Array<{
-    name: 'text';
-    text: string;
-  } | {
-    name: 'img';
-    src: string;
-    emojiKey?: string;
-  }>;
+  text: any[];
 });
 
 const referencedInfo = computed(() => {
@@ -100,7 +93,7 @@ const handleReferenceClick = () => {
     const messageModel = TUIStore.getMessageModel(messageID);
     if (isOriginMessageHasRecalled.value || !messageModel || messageModel.isDeleted || messageModel.isRevoked) {
       TUIToast.error({
-        message: t('TUIChat.Message has been deleted or recalled'),
+        message: t('MessageList.origin_message_has_been_recalled'),
       });
       return;
     }

package/src/components/MessageList/MessageForward/MessageForward.vue

@@ -27,7 +27,7 @@ const {
 const userPickerRef = ref<IUserPickerRef<undefined> | null>(null);
 
 // Convert conversation list to UserPicker data format
-const forwardListDataSource = computed((): Array<IUserPickerRow<undefined>> => {
+const forwardListDataSource = computed((): any[] => {
   if (!conversationList.value) {
     return [];
   }
@@ -59,7 +59,7 @@ const forwardListDataSource = computed((): Array<IUserPickerRow<undefined>> => {
 // Track if forward button should be disabled
 const isDisableConfirm = ref(true);
 
-function handleSelectedChange(selectedItems: Array<IUserPickerRow<undefined>>) {
+function handleSelectedChange(selectedItems: any[]) {
   isDisableConfirm.value = selectedItems.length === 0;
   // Update forwardConversationIDList to maintain compatibility with existing logic
   forwardConversationIDList.value = selectedItems.map(item => item.key);
@@ -105,7 +105,7 @@ function closeMessageForward() {
         @click="closeMessageForward"
       />
       <span class="forward-header__title">
-        {{ t('TUIChat.Forward') }}
+        {{ t('MessageList.forward') }}
       </span>
       <div class="forward-header__placeholder" />
     </View>
@@ -118,7 +118,7 @@ function closeMessageForward() {
       :on-selected-change="handleSelectedChange"
       :on-max-count-exceed="() => {
         TUIToast.error({
-          message: t('TUIChat.Max Count Exceed'),
+          message: t('MessageList.max_count_exceed'),
         });
       }"
     />
@@ -131,7 +131,7 @@ function closeMessageForward() {
         :disabled="isDisableConfirm"
         @click="forward"
       >
-        {{ t('TUIChat.Forward') }}
+        {{ t('MessageList.forward') }}
       </TUIButton>
     </View>
   </Modal>

package/src/components/MessageList/ReadReceiptInfo/ReadReceiptInfo.vue

@@ -262,7 +262,7 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
         @click="handleClose"
       />
       <View class="read-receipt-info__title">
-        {{ t('TUIChat.Read Receipt Detail') }}
+        {{ t('MessageList.read_receipt_detail') }}
       </View>
     </View>
 
@@ -274,7 +274,7 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
         ]"
         @click="setActiveTab('read')"
       >
-        {{ t('TUIChat.Read') }} ({{ readCount }})
+        {{ t('MessageList.read') }} ({{ readCount }})
       </button>
       <button
         :class="[
@@ -283,7 +283,7 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
         ]"
         @click="setActiveTab('unread')"
       >
-        {{ t('TUIChat.Unread') }} ({{ unreadCount }})
+        {{ t('MessageList.unread') }} ({{ unreadCount }})
       </button>
     </View>
 
@@ -301,14 +301,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
           >
             <IconLoading class="read-receipt-info__loading-icon" />
             <View class="read-receipt-info__loading-text">
-              {{ t('TUIChat.Loading') }}
+              {{ t('MessageList.loading') }}
             </View>
           </View>
           <View
             v-else
             class="read-receipt-info__empty"
           >
-            {{ t('TUIChat.No Read Members') }}
+            {{ t('MessageList.no_read_members') }}
           </View>
         </template>
         <template v-else>
@@ -339,14 +339,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
             >
               <IconLoading class="read-receipt-info__loading-icon" />
               <View class="read-receipt-info__loading-text">
-                {{ t('TUIChat.Loading') }}
+                {{ t('MessageList.loading') }}
               </View>
             </View>
             <View
               v-if="readCompleted"
               class="read-receipt-info__list-end"
             >
-              {{ t('TUIChat.No More') }}
+              {{ t('MessageList.no_more') }}
             </View>
           </div>
         </template>
@@ -365,14 +365,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
           >
             <IconLoading class="read-receipt-info__loading-icon" />
             <View class="read-receipt-info__loading-text">
-              {{ t('TUIChat.Loading') }}
+              {{ t('MessageList.loading') }}
             </View>
           </View>
           <View
             v-else
             class="read-receipt-info__empty"
           >
-            {{ t('TUIChat.No Unread Members') }}
+            {{ t('MessageList.no_unread_members') }}
           </View>
         </template>
         <template v-else>
@@ -403,14 +403,14 @@ watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
             >
               <IconLoading class="read-receipt-info__loading-icon" />
               <View class="read-receipt-info__loading-text">
-                {{ t('TUIChat.Loading') }}
+                {{ t('MessageList.loading') }}
               </View>
             </View>
             <View
               v-if="unreadCompleted"
               class="read-receipt-info__list-end"
             >
-              {{ t('TUIChat.No More') }}
+              {{ t('MessageList.no_more') }}
             </View>
           </div>
         </template>