tuikit-atomicx-vue3 4.5.0 → 4.5.2

package/src/components/MessageList/MessageList.vue

@@ -13,8 +13,13 @@ import type { Component } from 'vue';
 import cs from 'classnames';
 import { ObserverView } from '../../baseComp/ObserverView';
 import { View } from '../../baseComp/View';
+import { useReadReceipt } from '../../hooks/useReadReceipt/useReadReceipt';
 import { useScroll } from '../../hooks/useScroll';
+import { useConversationListState } from '../../states/ConversationListState';
+import { useGroupSettingState } from '../../states/GroupSettingState';
 import { useMessageListState } from '../../states/MessageListState';
+import { ConversationType, MessageType } from '../../types/engine';
+import { isCallMessage } from '../../utils/call';
 import { throttle } from '../../utils/lodash';
 import { Message as DefaultMessage } from './Message';
 import { MessageForward } from './MessageForward';
@@ -22,7 +27,7 @@ import { MessageListContextSymbol } from './MessageListContext';
 import { MessageTimeDivider as DefaultMessageTimeDivider } from './MessageTimeDivider';
 import { ScrollToBottom } from './ScrollToBottom';
 import type { MessageAction } from '../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../types/engine';
 
 // Define message chunk interface
 interface MessageChunk {
@@ -80,8 +85,20 @@ const {
   setEnableReadReceipt,
 } = useMessageListState();
 
+const { getGroupMemberList } = useGroupSettingState();
+
 const { scrollToBottom } = useScroll();
+const { activeConversation } = useConversationListState();
+const {
+  observeMessageList,
+  resetProcessedMessages,
+} = useReadReceipt({
+  enabled: props.enableReadReceipt ?? false,
+  containerSelector: '#messageScrollList',
+  getMessageIDFromDom: (dom: HTMLElement) => dom.dataset.messageId || '',
+});
 
+const isGroup = computed(() => activeConversation.value?.type === ConversationType.GROUP);
 const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
 
 // Message aggregation logic
@@ -110,18 +127,21 @@ const messageChunks = computed(() => {
 
   filteredMessageList.forEach((message, index, messages) => {
     const messageTime = message.time;
-    const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
-    const lastMessage = index > 0 ? messages[index - 1] : undefined;
+    const prevChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
+    const prevMessage = index > 0 ? messages[index - 1] : undefined;
 
-    const shouldCreateNewChunk = !lastChunk
-      || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
-      || lastChunk.messages[0].from !== message.from
+    const shouldCreateNewChunk = !prevChunk
+      || messageTime - prevChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
+      || prevChunk.messages[0].from !== message.from
       || message.isRevoked
-      || (lastMessage && lastMessage.isRevoked)
+      || (prevMessage && prevMessage.isRevoked)
       || message.status === 'fail'
-      || (lastMessage && lastMessage.status === 'fail')
+      || (prevMessage && prevMessage.status === 'fail')
       || message.hasRiskContent
-      || (lastMessage && lastMessage.hasRiskContent);
+      || (prevMessage && prevMessage.hasRiskContent)
+      || isCallMessage(message)
+      || (prevMessage && isCallMessage(prevMessage))
+      || (prevMessage && prevMessage.type === MessageType.CUSTOM && prevMessage.getMessageContent().businessID === 'group_create');
 
     if (shouldCreateNewChunk) {
       chunks.push({
@@ -130,7 +150,7 @@ const messageChunks = computed(() => {
         key: `chunk-${message.ID}`,
       });
     } else {
-      lastChunk.messages.push(message);
+      prevChunk.messages.push(message);
     }
   });
 
@@ -165,6 +185,7 @@ const initializeMessageList = async () => {
   isFinishFirstRender.value = false;
   setIsDisableScroll(false);
   isScrollToBottomVisible.value = false;
+  resetProcessedMessages();
 };
 
 // Load more history messages
@@ -221,7 +242,11 @@ watch(messageList, (newMessages, oldMessages) => {
     nextTick(() => {
       scrollToBottom({ behavior: 'instant' });
       isFinishFirstRender.value = true;
+      observeMessageList();
     });
+    if (isGroup.value) {
+      getGroupMemberList();
+    }
     return;
   }
 
@@ -233,6 +258,9 @@ watch(messageList, (newMessages, oldMessages) => {
   const oldLastMessage = oldMessages[oldMessages.length - 1];
 
   if (newLastMessage?.ID !== oldLastMessage?.ID) {
+    nextTick(() => {
+      observeMessageList();
+    });
     // new message coming
     const shouldAutoScroll = newLastMessage.flow === 'out'
       || (!isDisableScroll.value && distanceToBottom.value < autoScrollThreshold);
@@ -306,14 +334,22 @@ onUnmounted(() => {
               :message="message"
               :alignment="props.alignment"
               :messageActionList="props.messageActionList"
-              :isAggregated="Boolean(enableMessageAggregation && messageIndex !== chunk.messages.length - 1)"
+              :isAggregated="Boolean(enableMessageAggregation && messageIndex !== 0)"
               :is-first-in-chunk="Boolean(messageIndex === 0)"
               :is-last-in-chunk="Boolean(messageIndex === chunk.messages.length - 1)"
               :isHiddenMessageAvatar="
                 Boolean(
                   alignment === 'two-sided'
-                    ? (enableMessageAggregation && messageIndex !== chunk.messages.length - 1 || message.flow === 'out')
-                    : (enableMessageAggregation && messageIndex !== chunk.messages.length - 1 )
+                    ? (enableMessageAggregation && messageIndex !== 0 || message.flow === 'out')
+                    : (enableMessageAggregation && messageIndex !== 0 )
+                )
+              "
+              :is-hidden-message-nick="
+                Boolean(
+                  !isGroup
+                    || (alignment === 'two-sided'
+                      ? enableMessageAggregation && messageIndex !== 0 || message.flow === 'out'
+                      : enableMessageAggregation && messageIndex !== 0)
                 )
               "
               :isHiddenMessageMeta="
@@ -354,7 +390,7 @@ onUnmounted(() => {
   @include scrollbar.scrollbar-hidden();
 }
 .message-chunk--container {
-  margin-top: 10px;
+  margin-top: 25px;
 }
 .message-chunk {
   display: flex;

package/src/components/ScheduleRoomPanel/RoomDetail.vue

@@ -136,6 +136,7 @@ const copy = async (value: string) => {
 .room-detail {
   padding: 20px 0;
   user-select: text;
+  text-align: initial;
 
   .room-detail-empty {
     text-align: center;

package/src/components/ScheduleRoomPanel/RoomEdit.vue

@@ -340,7 +340,8 @@ const handleSave = () => {
 
 <style lang="scss" scoped>
 .room-edit {
-    width: 100%;
+  width: 100%;
+  text-align: initial;
 
   .edit-form {
     .form-item {

package/src/components/ScheduleRoomPanel/RoomShare.vue

@@ -140,6 +140,7 @@ const copyRoomInfoAndLink = async () => {
 .room-share {
   min-width: 400px;
   user-select: text;
+  text-align: initial;
 
   .room-share-empty {
     text-align: center;

package/src/components/ScheduleRoomPanel/ScheduleRoomPanel.vue

@@ -461,6 +461,7 @@ watch(() => props.visible, (visible) => {
   width: 100%;
   max-width: 600px;
   height: 100%;
+  text-align: initial;
 }
 
 .panel-content {

package/src/components/ScheduleRoomPanel/ScheduledRoomList.vue

@@ -432,6 +432,7 @@ watch(() => loginUserInfo.value?.userId, (userId) => {
   height: 100%;
   overflow-y: auto;
   position: relative;
+  text-align: initial;
 }
 
 .loading-overlay {

package/src/components/Search/SearchResults/SearchResultsItem/Message/Message.vue

@@ -6,7 +6,7 @@
     </div>
     <div :class="$style.SearchMessage__content">
       <div :class="$style.SearchMessage__header">
-        <span :class="$style.SearchMessage__name" v-html="highlightedName"> </span>
+        <span :class="$style.SearchMessage__name" v-html="highlightedName" />
         <span v-if="time" :class="$style.SearchMessage__time">
           {{ formatTime(time) }}
         </span>
@@ -24,19 +24,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, h, defineProps, useCssModule } from 'vue';
+import { computed, h, useCssModule } from 'vue';
 import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { SearchType } from '../../../../../types/engine';
-import type { ResultItemProps, MessageModel } from '../../../../../types';
 import { Avatar } from '../../../../Avatar';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { highlightText } from '../utils';
+import type { MessageModel } from '../../../../../types/engine';
+import type { ResultItemProps } from '../../../../../types/search';
 
 const $style = useCssModule();
 
-const formatTime = (timestamp: number): string => {
-  return new Date(timestamp * 1000).toLocaleString();
-};
+const formatTime = (timestamp: number): string => new Date(timestamp * 1000).toLocaleString();
 
 const props = defineProps<ResultItemProps<SearchType.CHAT_MESSAGE>>();
 
@@ -49,7 +48,7 @@ const highlightedName = computed(() => {
   if (!props.keyword) {
     return name.value;
   }
-  return highlightText(name.value, props.keyword, $style['SearchMessage__highlight']);
+  return highlightText(name.value, props.keyword, $style.SearchMessage__highlight);
 });
 
 const renderTextContent = (messageContent: any, keyword: string) => {
@@ -59,16 +58,16 @@ const renderTextContent = (messageContent: any, keyword: string) => {
         if (item.name === 'text') {
           return h('span', {
             key: idx,
-            innerHTML: highlightText(item.text, keyword, $style['SearchMessage__highlight']),
+            innerHTML: highlightText(item.text, keyword, $style.SearchMessage__highlight),
           });
         }
         if (item.name === 'img') {
           return h('img', {
-            key: idx,
-            src: item.src,
-            alt: item.emojiKey || '',
-            class: $style['SearchMessage__emoji-img'],
-            draggable: false,
+            'key': idx,
+            'src': item.src,
+            'alt': item.emojiKey || '',
+            'class': $style['SearchMessage__emoji-img'],
+            'draggable': false,
             'data-emoji-key': item.emojiKey || '',
           });
         }
@@ -77,7 +76,7 @@ const renderTextContent = (messageContent: any, keyword: string) => {
       .filter(Boolean);
   }
   return h('span', {
-    innerHTML: highlightText(messageContent.text, keyword, $style['SearchMessage__highlight']),
+    innerHTML: highlightText(messageContent.text, keyword, $style.SearchMessage__highlight),
   });
 };
 
@@ -90,9 +89,9 @@ const renderMessageContent = (message: MessageModel, searchKeyword: string) => {
       return h(
         'div',
         {
-          class: $style['SearchMessage__text'],
+          class: $style.SearchMessage__text,
         },
-        renderTextContent(messageContent, searchKeyword)
+        renderTextContent(messageContent, searchKeyword),
       );
 
     case TUIChatEngine.TYPES.MSG_IMAGE:
@@ -138,11 +137,11 @@ const renderMessageContent = (message: MessageModel, searchKeyword: string) => {
                     points: '9,7 18,12 9,17',
                     fill: '#2B5DF5',
                   }),
-                ]
+                ],
               ),
-            ]
+            ],
           ),
-        ]
+        ],
       );
 
     case TUIChatEngine.TYPES.MSG_FILE:
@@ -155,18 +154,18 @@ const renderMessageContent = (message: MessageModel, searchKeyword: string) => {
           h(
             'span',
             {
-              class: $style['SearchMessage__text'],
+              class: $style.SearchMessage__text,
             },
-            messageContent.name
+            messageContent.name,
           ),
           h(
             'span',
             {
-              class: $style['SearchMessage__text'],
+              class: $style.SearchMessage__text,
             },
-            messageContent.size
+            messageContent.size,
           ),
-        ]
+        ],
       );
 
     case TUIChatEngine.TYPES.MSG_AUDIO:
@@ -217,12 +216,12 @@ const renderMessageContent = (message: MessageModel, searchKeyword: string) => {
                     fill: '#2B5DF5',
                     fillOpacity: '0.4',
                   }),
-                ]
+                ],
               ),
-            ]
+            ],
           ),
           h('span', `${messageContent.second}s`),
-        ]
+        ],
       );
 
     case TUIChatEngine.TYPES.MSG_LOCATION:
@@ -230,7 +229,7 @@ const renderMessageContent = (message: MessageModel, searchKeyword: string) => {
         return h(
           'span',
           {
-            class: $style['SearchMessage__text'],
+            class: $style.SearchMessage__text,
           },
           [
             messageContent.text,
@@ -241,9 +240,9 @@ const renderMessageContent = (message: MessageModel, searchKeyword: string) => {
                 target: '_blank',
                 rel: 'noopener noreferrer',
               },
-              `${t('Search.action.readMore')}>>>`
+              `${t('Search.action.readMore')}>>>`,
             ),
-          ]
+          ],
         );
       }
       return h('span', t('Search.messageType.custom'));

package/src/components/UIKitModal/chatErrorModal/chatErrorModal.ts

@@ -0,0 +1,205 @@
+import { i18next } from '@tencentcloud/uikit-base-component-vue3';
+import { UIKitModal } from '../UIKitModal';
+
+enum ChatErrorModalId {
+  // Login related errors (30000-30009)
+  LOGIN_INVALID_SDK_APP_ID = 30000,
+  LOGIN_INVALID_USER_ID = 30001,
+  LOGIN_INVALID_SECRET_KEY = 30004,
+  LOGIN_INVALID_USER_SIG = 30005,
+  LOGIN_USER_SIG_EXPIRED = 30006,
+  LOGIN_USER_SIG_INVALID = 30042,
+  LOGIN_USER_ID_NOT_MATCH_USER_SIG = 30007,
+  LOGIN_SDK_APP_ID_NOT_MATCH_USER_SIG = 30008,
+  LOGIN_SDK_APP_ID_NOT_FOUND = 30041,
+
+  // Package/Feature not enabled errors (30002, 30014-30019)
+  PACKAGE_NOT_PURCHASED = 30002,
+  PACKAGE_GROUP_READ_RECEIPT_NOT_ENABLED = 30014,
+  PACKAGE_ONLINE_USER_LIST_NOT_ENABLED = 30015,
+  PACKAGE_CLOUD_SEARCH_NOT_ENABLED = 30016,
+  PACKAGE_TEXT_TRANSLATION_NOT_ENABLED = 30018,
+  PACKAGE_SPEECH_TO_TEXT_NOT_ENABLED = 30019,
+
+  // Call related errors (30010)
+  CALL_KIT_NOT_INTEGRATED = 30010,
+
+  // Search related errors (30017)
+  SEARCH_CLOUD_RATE_LIMIT = 30017,
+
+  // Message sending errors (30020-30031)
+  MESSAGE_VOICE_SIZE_EXCEEDED = 30020,
+  MESSAGE_IMAGE_INVALID_FORMAT = 30021,
+  MESSAGE_IMAGE_SIZE_EXCEEDED = 30022,
+  MESSAGE_IMAGE_SENSITIVE_CONTENT = 30023,
+  MESSAGE_VIDEO_INVALID_FORMAT = 30024,
+  MESSAGE_VIDEO_SIZE_EXCEEDED = 30025,
+  MESSAGE_FILE_NOT_EXIST = 30026,
+  MESSAGE_FILE_SIZE_EXCEEDED = 30027,
+  MESSAGE_FILE_SENDING_BANNED = 30028,
+  MESSAGE_TEXT_SENSITIVE_CONTENT = 30029,
+  MESSAGE_LENGTH_EXCEEDED = 30030,
+  MESSAGE_LOCAL_AUDIT_BLOCKED = 30031,
+  MESSAGE_RECALL_TIME_EXCEEDED = 30039,
+
+  // Reaction related errors (30033)
+  REACTION_EMOJI_LIMIT_REACHED = 30033,
+
+  // Profile related errors (30034)
+  PROFILE_REMARK_LENGTH_EXCEEDED = 30034,
+
+  // Group related errors (30035-30036, 30040)
+  GROUP_ANNOUNCEMENT_LENGTH_EXCEEDED = 30035,
+  GROUP_NAME_INVALID = 30036,
+  GROUP_ID_ALREADY_USED = 30040,
+}
+
+interface ModalConfig {
+  i18nKey: string;
+}
+
+const MODAL_CONFIG_MAP: Record<number, ModalConfig> = {
+  // Login
+  [ChatErrorModalId.LOGIN_INVALID_SDK_APP_ID]: { i18nKey: 'login_invalid_sdk_app_id' },
+  [ChatErrorModalId.LOGIN_INVALID_USER_ID]: { i18nKey: 'login_invalid_user_id' },
+  [ChatErrorModalId.LOGIN_INVALID_SECRET_KEY]: { i18nKey: 'login_invalid_secret_key' },
+  [ChatErrorModalId.LOGIN_INVALID_USER_SIG]: { i18nKey: 'login_invalid_user_sig' },
+  [ChatErrorModalId.LOGIN_USER_SIG_EXPIRED]: { i18nKey: 'login_user_sig_expired' },
+  [ChatErrorModalId.LOGIN_USER_SIG_INVALID]: { i18nKey: 'login_user_sig_invalid' },
+  [ChatErrorModalId.LOGIN_USER_ID_NOT_MATCH_USER_SIG]: { i18nKey: 'login_user_id_not_match_user_sig' },
+  [ChatErrorModalId.LOGIN_SDK_APP_ID_NOT_MATCH_USER_SIG]: { i18nKey: 'login_sdk_app_id_not_match_user_sig' },
+  [ChatErrorModalId.LOGIN_SDK_APP_ID_NOT_FOUND]: { i18nKey: 'login_sdk_app_id_not_found' },
+
+  // Package
+  [ChatErrorModalId.PACKAGE_NOT_PURCHASED]: { i18nKey: 'package_not_purchased' },
+  [ChatErrorModalId.PACKAGE_GROUP_READ_RECEIPT_NOT_ENABLED]: { i18nKey: 'package_group_read_receipt_not_enabled' },
+  [ChatErrorModalId.PACKAGE_ONLINE_USER_LIST_NOT_ENABLED]: { i18nKey: 'package_online_user_list_not_enabled' },
+  [ChatErrorModalId.PACKAGE_CLOUD_SEARCH_NOT_ENABLED]: { i18nKey: 'package_cloud_search_not_enabled' },
+  [ChatErrorModalId.PACKAGE_TEXT_TRANSLATION_NOT_ENABLED]: { i18nKey: 'package_text_translation_not_enabled' },
+  [ChatErrorModalId.PACKAGE_SPEECH_TO_TEXT_NOT_ENABLED]: { i18nKey: 'package_speech_to_text_not_enabled' },
+
+  // Call
+  [ChatErrorModalId.CALL_KIT_NOT_INTEGRATED]: { i18nKey: 'call_kit_not_integrated' },
+
+  // Search
+  [ChatErrorModalId.SEARCH_CLOUD_RATE_LIMIT]: { i18nKey: 'search_cloud_rate_limit' },
+
+  // Message
+  [ChatErrorModalId.MESSAGE_VOICE_SIZE_EXCEEDED]: { i18nKey: 'message_voice_size_exceeded' },
+  [ChatErrorModalId.MESSAGE_IMAGE_INVALID_FORMAT]: { i18nKey: 'message_image_invalid_format' },
+  [ChatErrorModalId.MESSAGE_IMAGE_SIZE_EXCEEDED]: { i18nKey: 'message_image_size_exceeded' },
+  [ChatErrorModalId.MESSAGE_IMAGE_SENSITIVE_CONTENT]: { i18nKey: 'message_image_sensitive_content' },
+  [ChatErrorModalId.MESSAGE_VIDEO_INVALID_FORMAT]: { i18nKey: 'message_video_invalid_format' },
+  [ChatErrorModalId.MESSAGE_VIDEO_SIZE_EXCEEDED]: { i18nKey: 'message_video_size_exceeded' },
+  [ChatErrorModalId.MESSAGE_FILE_NOT_EXIST]: { i18nKey: 'message_file_not_exist' },
+  [ChatErrorModalId.MESSAGE_FILE_SIZE_EXCEEDED]: { i18nKey: 'message_file_size_exceeded' },
+  [ChatErrorModalId.MESSAGE_FILE_SENDING_BANNED]: { i18nKey: 'message_file_sending_banned' },
+  [ChatErrorModalId.MESSAGE_TEXT_SENSITIVE_CONTENT]: { i18nKey: 'message_text_sensitive_content' },
+  [ChatErrorModalId.MESSAGE_LENGTH_EXCEEDED]: { i18nKey: 'message_length_exceeded' },
+  [ChatErrorModalId.MESSAGE_LOCAL_AUDIT_BLOCKED]: { i18nKey: 'message_local_audit_blocked' },
+  [ChatErrorModalId.MESSAGE_RECALL_TIME_EXCEEDED]: { i18nKey: 'message_recall_time_exceeded' },
+
+  // Reaction
+  [ChatErrorModalId.REACTION_EMOJI_LIMIT_REACHED]: { i18nKey: 'reaction_emoji_limit_reached' },
+
+  // Profile
+  [ChatErrorModalId.PROFILE_REMARK_LENGTH_EXCEEDED]: { i18nKey: 'profile_remark_length_exceeded' },
+
+  // Group
+  [ChatErrorModalId.GROUP_ANNOUNCEMENT_LENGTH_EXCEEDED]: { i18nKey: 'group_announcement_length_exceeded' },
+  [ChatErrorModalId.GROUP_NAME_INVALID]: { i18nKey: 'group_name_invalid' },
+  [ChatErrorModalId.GROUP_ID_ALREADY_USED]: { i18nKey: 'group_id_already_used' },
+};
+
+const ERROR_CODE_TO_MODAL_ID: Record<number, ChatErrorModalId> = {
+  // Login
+  2000: ChatErrorModalId.LOGIN_INVALID_SDK_APP_ID,
+  2002: ChatErrorModalId.LOGIN_INVALID_USER_ID,
+  2003: ChatErrorModalId.LOGIN_INVALID_USER_SIG,
+  70001: ChatErrorModalId.LOGIN_USER_SIG_EXPIRED,
+  70003: ChatErrorModalId.LOGIN_USER_SIG_INVALID,
+  70013: ChatErrorModalId.LOGIN_USER_ID_NOT_MATCH_USER_SIG,
+  70014: ChatErrorModalId.LOGIN_SDK_APP_ID_NOT_MATCH_USER_SIG,
+  70020: ChatErrorModalId.LOGIN_SDK_APP_ID_NOT_FOUND,
+
+  // Search
+  60018: ChatErrorModalId.SEARCH_CLOUD_RATE_LIMIT,
+
+  // Message
+  2301: ChatErrorModalId.MESSAGE_VOICE_SIZE_EXCEEDED,
+  2252: ChatErrorModalId.MESSAGE_IMAGE_INVALID_FORMAT,
+  2253: ChatErrorModalId.MESSAGE_IMAGE_SIZE_EXCEEDED,
+  2352: ChatErrorModalId.MESSAGE_VIDEO_INVALID_FORMAT,
+  2351: ChatErrorModalId.MESSAGE_VIDEO_SIZE_EXCEEDED,
+  2401: ChatErrorModalId.MESSAGE_FILE_NOT_EXIST,
+  2402: ChatErrorModalId.MESSAGE_FILE_SIZE_EXCEEDED,
+  3123: ChatErrorModalId.MESSAGE_LOCAL_AUDIT_BLOCKED,
+  20016: ChatErrorModalId.MESSAGE_RECALL_TIME_EXCEEDED,
+  10031: ChatErrorModalId.MESSAGE_RECALL_TIME_EXCEEDED,
+
+  // Group
+  10021: ChatErrorModalId.GROUP_ID_ALREADY_USED,
+};
+
+/**
+ * Show modal by ChatErrorModalId
+ * Use this method when you know exactly which modal to show
+ * @param modalId - The ChatErrorModalId to show
+ * @example
+ * // When sending image and got 80004 error
+ * showChatErrorModalById(ChatErrorModalId.MESSAGE_IMAGE_SENSITIVE_CONTENT);
+ *
+ * // When calling cloud search and got 60020 error
+ * showChatErrorModalById(ChatErrorModalId.PACKAGE_CLOUD_SEARCH_NOT_ENABLED);
+ */
+function showChatErrorModalById(modalId: ChatErrorModalId): void {
+  const config = MODAL_CONFIG_MAP[modalId];
+  if (config) {
+    UIKitModal.openModal({
+      id: modalId,
+      title: i18next.t('ChatErrorModal.title'),
+      content: i18next.t(`ChatErrorModal.${config.i18nKey}`),
+      type: 'error',
+    });
+  }
+}
+
+/**
+ * Handle SDK error and show modal automatically
+ * Only works for errorCodes with unique 1:1 mapping
+ * For ambiguous errorCodes, this method will do nothing - use showChatErrorModalById instead
+ * @param error - Error object with code property
+ * @returns boolean - true if modal was shown, false if errorCode is ambiguous or unknown
+ * @example
+ * try {
+ *   await sendMessage();
+ * } catch (error) {
+ *   // Will show modal for unique errorCodes like 2000, 70001, etc.
+ *   // Will return false for ambiguous codes like -1, 80004, 3122, 60020
+ *   const handled = handleChatErrorWithModal(error);
+ *   if (!handled) {
+ *     // Handle ambiguous error manually based on context
+ *     showChatErrorModalById(ChatErrorModalId.MESSAGE_IMAGE_SENSITIVE_CONTENT);
+ *   }
+ * }
+ */
+function handleChatErrorWithModal(error: { code?: number }): boolean {
+  const errorCode = error.code;
+  if (errorCode === undefined || errorCode === null) {
+    return false;
+  }
+
+  const modalId = ERROR_CODE_TO_MODAL_ID[errorCode];
+  if (modalId !== undefined) {
+    showChatErrorModalById(modalId);
+    return true;
+  }
+
+  return false;
+}
+
+export {
+  showChatErrorModalById,
+  handleChatErrorWithModal,
+  ChatErrorModalId,
+};

package/src/components/UIKitModal/chatErrorModal/i18n/en-US/index.ts

@@ -0,0 +1,56 @@
+export const resource = {
+  ChatErrorModal: {
+    title: 'Error',
+
+    // Login
+    login_invalid_sdk_app_id: 'Missing correct SDKAppID. You can obtain it via the <a target="_blank" href="https://console.trtc.io/">Chat Console</a>.',
+    login_invalid_user_id: 'Missing correct userID. The userID format should be a non-empty string.',
+    login_invalid_secret_key: 'Missing correct secretKey. You can obtain it via the <a target="_blank" href="https://console.trtc.io/">Chat Console</a>.',
+    login_invalid_user_sig: 'Missing correct userSig. You can obtain it via <a target="_blank" href="https://console.trtc.io/">Chat > Auxiliary Tools > UserSig Tools</a>.',
+    login_user_sig_expired: 'userSig has expired. You can regenerate it via <a target="_blank" href="https://console.trtc.io/">Chat > Auxiliary Tools > UserSig Tools</a>.',
+    login_user_sig_invalid: 'Invalid UserSig. Please use the official API to regenerate UserSig (<a target="_blank" href="https://cloud.tencent.com/document/product/269/32688">Documentation</a>).',
+    login_user_id_not_match_user_sig: 'The UserID in the request does not match the UserID used to generate the userSig. You can use <a target="_blank" href="https://console.trtc.io/">Chat > Auxiliary Tools > UserSig Tools</a>.',
+    login_sdk_app_id_not_match_user_sig: 'The SDKAppID in the request does not match the SDKAppID used to generate the userSig. You can use <a target="_blank" href="https://console.trtc.io/">Chat > Auxiliary Tools > UserSig Tools</a>.',
+    login_sdk_app_id_not_found: 'SDKAppID not found. Please confirm the application information in the <a target="_blank" href="https://console.trtc.io/">Chat Console</a>.',
+
+    // Package
+    package_not_purchased: 'You have not purchased a plan package, or the package has expired, or the purchased package is being configured and not yet effective. Please log in to the <a target="_blank" href="https://console.trtc.io/subscription/buy/chat?packType=pro">Chat Purchase Page</a> to repurchase the package. It will take effect 5 minutes after purchase.',
+    package_group_read_receipt_not_enabled: 'The plan package you are currently using has not enabled the group message read receipt feature. You can upgrade to the <a target="_blank" href="https://console.trtc.io/subscription/buy/chat?packType=pro">Pro</a>.',
+    package_online_user_list_not_enabled: 'The plan package you are currently using has not enabled the online user list feature. You can upgrade to the <a target="_blank" href="https://console.trtc.io/subscription/buy/chat?packType=pro">Pro</a>.',
+    package_cloud_search_not_enabled: 'The plan package you are currently using has not enabled the cloud search feature. You can enable <a target="_blank" href="https://console.trtc.io/chat/plugin/TUICloudSearch">Cloud Search</a>.',
+    package_text_translation_not_enabled: 'The text message translation feature is currently offered for free. You can contact us through the <a target="_blank" href="https://t.me/+EPk6TMZEZMM5OGY1">Telegram technical exchange group</a> to enable and experience the full feature.',
+    package_speech_to_text_not_enabled: 'The plan package you are currently using has not enabled the speech-to-text feature. You can enable <a target="_blank" href="https://cloud.tencent.com/document/product/269/110626">Speech-to-Text</a>.',
+
+    // Call
+    call_kit_not_integrated: 'It is detected that you have not integrated TUICallKit, so you cannot experience the audio and video call functionality. You can refer to: <a target="_blank" href="https://trtc.io/zh/document/64468?product=chat&menulabel=uikit&platform=react">integrate TUICallKit</a>.',
+
+    // Search
+    search_cloud_rate_limit: 'Cloud search request exceeds the backend frequency limit. Each user is allowed 2 search requests per second. Please try again later.',
+
+    // Message
+    message_voice_size_exceeded: 'The voice size exceeds the limit. The maximum size for uploading a voice message is 20MB.',
+    message_image_invalid_format: 'Image message sending failed. Invalid image format. Supported image formats are: jpg, jpeg, gif, png, bmp, image, webp.',
+    message_image_size_exceeded: 'The image size exceeds the limit. The maximum size for uploading an image is 20MB.',
+    message_image_sensitive_content: 'The image in the message contains sensitive content. Sending failed.',
+    message_video_invalid_format: 'Video message sending failed. Invalid video format. Supported video formats are: mp4, quicktime, mov.',
+    message_video_size_exceeded: 'The video size exceeds the limit. The maximum size for uploading a video is 100MB.',
+    message_file_not_exist: 'The file does not exist. Please check if the file path is correct.',
+    message_file_size_exceeded: 'The file size exceeds the limit. The maximum size for uploading a file is 100MB.',
+    message_file_sending_banned: 'File message failed. Sending prohibited or banned files is not allowed.',
+    message_text_sensitive_content: 'The text in the message or profile contains sensitive content. Sending failed.',
+    message_length_exceeded: 'The message length exceeds the limit. The message length should not exceed 12K.',
+    message_local_audit_blocked: 'The text contains locally blocked words for review.',
+    message_recall_time_exceeded: 'Exceeded the recall time limit. Message recall has exceeded the time limit (default 2 minutes).',
+
+    // Reaction
+    reaction_emoji_limit_reached: 'The maximum number of emoji reactions has been reached.',
+
+    // Profile
+    profile_remark_length_exceeded: 'Failed to modify the remark: the remark length must not exceed 96 bytes.',
+
+    // Group
+    group_announcement_length_exceeded: 'The group announcement word count exceeds the limit. The maximum length is 150.',
+    group_name_invalid: 'The group name can only contain Chinese characters, letters, numbers, and underscores, and must be 2-20 characters long.',
+    group_id_already_used: 'The group ID is already in use. Please choose another group ID.',
+  },
+};

package/src/components/UIKitModal/chatErrorModal/i18n/index.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };