tuikit-atomicx-vue3 4.5.0 → 4.5.2

package/src/components/UIKitModal/chatErrorModal/i18n/zh-CN/index.ts

@@ -0,0 +1,56 @@
+export const resource = {
+  ChatErrorModal: {
+    title: '错误',
+
+    // Login
+    login_invalid_sdk_app_id: '缺少正确的 SDKAppID，您可以通过<a target="_blank" href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a>获取。',
+    login_invalid_user_id: '缺少正确的 userID，userID 格式为非空字符串。',
+    login_invalid_secret_key: '缺少正确的 secretKey，您可以通过<a target="_blank" href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a>获取。',
+    login_invalid_user_sig: '缺少正确的 userSig，您可以通过<a target="_blank" href="https://console.cloud.tencent.com/im/tool-usersig">即时通信 IM 控制台 > 开发工具 > UserSig生成&校验</a>获取。',
+    login_user_sig_expired: 'userSig 已过期，您可以通过<a target="_blank" href="https://console.cloud.tencent.com/im/tool-usersig">即时通信 IM 控制台 > 开发工具 > UserSig生成&校验</a>重新获取。',
+    login_user_sig_invalid: 'UserSig 非法，请使用官网提供的 API 重新生成 UserSig（<a target="_blank" href="https://cloud.tencent.com/document/product/269/32688">文档</a>）。',
+    login_user_id_not_match_user_sig: '请求中的 UserID 与生成 UserSig 时使用的 UserID 不一致，您可以使用<a target="_blank" href="https://console.cloud.tencent.com/im/tool-usersig">即时通信 IM 控制台 > 开发工具 > UserSig生成&校验</a>校验 UserSig。',
+    login_sdk_app_id_not_match_user_sig: '请求中的 SDKAppID 与生成 UserSig 时使用的 SDKAppID 不一致。您可以使用<a target="_blank" href="https://console.cloud.tencent.com/im/tool-usersig">即时通信 IM 控制台 > 开发工具 > UserSig生成&校验</a>校验 UserSig。',
+    login_sdk_app_id_not_found: 'SDKAppID 未找到，请在<a target="_blank" href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a>确认应用信息。',
+
+    // Package
+    package_not_purchased: '您未购买套餐包，或套餐包已过期，或购买的套餐包正在配置中暂未生效。请登录<a target="_blank" href="https://buy.cloud.tencent.com/avc">即时通信 IM 购买页面</a>重新购买套餐包。购买后，将在5分钟后生效。',
+    package_group_read_receipt_not_enabled: '您当前购买使用的套餐包暂未开通群消息已读回执功能，您可以升级到套餐为<a target="_blank" href="https://buy.cloud.tencent.com/avc">旗舰版</a>。',
+    package_online_user_list_not_enabled: '您当前购买使用的套餐包暂未开通在线用户列表功能，您可以升级到套餐为<a target="_blank" href="https://buy.cloud.tencent.com/avc">旗舰版</a>。',
+    package_cloud_search_not_enabled: '您当前购买使用的套餐包暂未开通云端搜索功能，您可以开通<a target="_blank" href="https://cloud.tencent.com/document/product/269/101046">云端搜索</a>。',
+    package_text_translation_not_enabled: '您当前购买使用的套餐包暂未开通文本消息翻译功能，您可以开通<a target="_blank" href="https://cloud.tencent.com/document/product/269/92661">文本消息翻译</a>。',
+    package_speech_to_text_not_enabled: '您当前购买使用的套餐包暂未开通语音转文字功能，您可以开通<a target="_blank" href="https://cloud.tencent.com/document/product/269/110626">语音转文字</a>。',
+
+    // Call
+    call_kit_not_integrated: '检测到您暂未集成TUICallKit，无法体验音视频通话功能，可以参考：<a target="_blank" href="https://cloud.tencent.com/document/product/269/79861">接入 TUICallKit</a>。',
+
+    // Search
+    search_cloud_rate_limit: '云端搜索请求超过后台频率限制，单用户一秒内允许2次搜索请求，请稍后再试。',
+
+    // Message
+    message_voice_size_exceeded: '语音大小超出了限制，如果上传语音，最大限制是 20MB。',
+    message_image_invalid_format: '图片消息发送失败，无效的图片格式，图片格式支持：jpg、jpeg、gif、png、bmp、image、webp。',
+    message_image_size_exceeded: '图片大小超出了限制，如果上传文件，最大限制是 20MB。',
+    message_image_sensitive_content: '消息中图片存在敏感内容，发送失败。',
+    message_video_invalid_format: '视频消息发送失败，无效的视频格式，视频格式支持：mp4、quicktime、mov。',
+    message_video_size_exceeded: '视频大小超出了限制，如果上传视频，最大限制是 100MB。',
+    message_file_not_exist: '文件不存在，请检查文件路径是否正确。',
+    message_file_size_exceeded: '文件大小超出了限制，如果上传文件，最大限制是 100MB。',
+    message_file_sending_banned: '文件消息失败，禁止发送违规封禁的文件。',
+    message_text_sensitive_content: '消息或者资料中文本存在敏感内容，发送失败。',
+    message_length_exceeded: '消息长度超出限制，消息长度不要超过 12K。',
+    message_local_audit_blocked: '文本包含本地审核拦截词。',
+    message_recall_time_exceeded: '超过撤回时间限制。消息撤回超过了时间限制（默认2分钟）。',
+
+    // Reaction
+    reaction_emoji_limit_reached: '已达到表情回应上限数量。',
+
+    // Profile
+    profile_remark_length_exceeded: '修改备注失败：备注长度不得超过 96 字节。',
+
+    // Group
+    group_announcement_length_exceeded: '群公告字数超出限制，最大长度为 150。',
+    group_name_invalid: '群名称仅限中文、字母、数字和下划线，2-20个字。',
+    group_id_already_used: '群组 ID 已被使用。请选择其他的群组 ID。',
+  },
+};

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

@@ -0,0 +1,16 @@
+import { addI18n } from '../../../i18n';
+import {
+  ChatErrorModalId,
+  showChatErrorModalById,
+  handleChatErrorWithModal,
+} from './chatErrorModal';
+import { enResource, zhResource } from './i18n';
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+export {
+  ChatErrorModalId,
+  showChatErrorModalById,
+  handleChatErrorWithModal,
+};

package/src/components/VideoSettingPanel/index.vue

@@ -65,6 +65,7 @@ defineProps({
 .video-setting-panel {
   font-size: 14px;
   border-radius: 8px;
+  text-align: initial;
 
   .item-setting {
     &:not(:last-child) {

package/src/hooks/useReadReceipt/useReadReceipt.ts

@@ -1,5 +1,6 @@
 import { onMounted, onUnmounted, watch } from 'vue';
 import { TUIChatService, TUIStore } from '@tencentcloud/chat-uikit-engine';
+import { handleChatErrorWithModal } from '../../components/UIKitModal/chatErrorModal';
 import { throttle } from '../../utils/lodash';
 import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
@@ -66,8 +67,8 @@ export function useReadReceipt({
       .then(() => {
         // Successfully sent read receipts
       })
-      .catch(() => {
-        // Failed to send read receipts
+      .catch((error) => {
+        handleChatErrorWithModal(error as unknown as any);
       });
     pendingReadReceiptMessages.clear();
   }, delay, { leading: false, trailing: true });
@@ -99,7 +100,7 @@ export function useReadReceipt({
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting && entry.intersectionRatio >= intersectionThreshold) {
-            const messageID = getMessageIDFromDom(entry.target);
+            const messageID = getMessageIDFromDom(entry.target as HTMLElement);
             if (messageID) {
               checkMessageAndSendReadReceipt(messageID);
             }
@@ -144,7 +145,7 @@ export function useReadReceipt({
     if (!container) {
       return;
     }
-    const messageElements = container.querySelectorAll(messageSelector);
+    const messageElements = container.querySelectorAll(messageSelector) as unknown as HTMLElement[];
     messageElements.forEach((element) => {
       const messageID = getMessageIDFromDom(element);
       if (!messageID) {

package/src/index.ts

@@ -1,7 +1,7 @@
 // common export
 export * from './subEntry/common';
 // chat export
-export * from './chat';
+export * from './subEntry/chat/chat';
 // live export
 export * from './subEntry/live/live';
 // room export

package/src/{chat/index.ts → subEntry/chat/chat.ts}

@@ -1,11 +1,11 @@
-// Chat related exports
-import { View as ViewComponent } from '../baseComp/View';
-import { ChatSetting as ChatSettingComponent } from '../components/ChatSetting';
+// Chat related exports (pure components, no initialization)
+import { View as ViewComponent } from '../../baseComp/View';
+import { ChatSetting as ChatSettingComponent } from '../../components/ChatSetting';
 import {
   ContactList as ContactListComponent,
   ContactListItem as ContactListItemComponent,
   ContactInfo as ContactInfoComponent,
-} from '../components/ContactList';
+} from '../../components/ContactList';
 import {
   ConversationList as ConversationListComponent,
   ConversationActions as ConversationActionsComponent,
@@ -14,7 +14,7 @@ import {
   ConversationPreview as ConversationPreviewComponent,
   ConversationPreviewUI as ConversationPreviewUIComponent,
   ConversationSearch as ConversationSearchComponent,
-} from '../components/ConversationList';
+} from '../../components/ConversationList';
 import {
   MessageInput as MessageInputComponent,
   EmojiPicker as EmojiPickerComponent,
@@ -24,11 +24,11 @@ import {
   VideoPicker as VideoPickerComponent,
   AudioCallPicker as AudioCallPickerComponent,
   VideoCallPicker as VideoCallPickerComponent,
-} from '../components/MessageInput';
+} from '../../components/MessageInput';
 import {
   MessageList as MessageListComponent,
   Message as MessageComponent,
-} from '../components/MessageList';
+} from '../../components/MessageList';
 import {
   Search as SearchComponent,
   SearchAdvanced as SearchAdvancedComponent,
@@ -37,17 +37,16 @@ import {
   SearchResultItem as SearchResultItemComponent,
   SearchBar as SearchBarComponent,
   SearchResults as SearchResultsComponent,
-} from '../components/Search';
-import { useMessageActions as useMessageActionsHook } from '../hooks/useMessageActions';
-import { useConversationListState as conversationListState } from '../states/ConversationListState';
-import { useMessageActionState as messageActionState } from '../states/MessageActionState';
-import { useMessageInputState as messageInputState } from '../states/MessageInputState';
-import { useMessageListState as messageListState } from '../states/MessageListState';
-import { useSearchState as searchState } from '../states/SearchState';
-import { useContactListState as contactListState } from "../states/ContactListState";
-import { useC2CSettingState as c2cSettingState } from '../states/C2CSettingState';
-import { useGroupSettingState as groupSettingState } from '../states/GroupSettingState';
-
+} from '../../components/Search';
+import { useMessageActions as useMessageActionsHook } from '../../hooks/useMessageActions';
+import { useConversationListState as conversationListState } from '../../states/ConversationListState';
+import { useMessageActionState as messageActionState } from '../../states/MessageActionState';
+import { useMessageInputState as messageInputState } from '../../states/MessageInputState';
+import { useMessageListState as messageListState } from '../../states/MessageListState';
+import { useSearchState as searchState } from '../../states/SearchState';
+import { useContactListState as contactListState } from '../../states/ContactListState';
+import { useC2CSettingState as c2cSettingState } from '../../states/C2CSettingState';
+import { useGroupSettingState as groupSettingState } from '../../states/GroupSettingState';
 import ChatLoginServer from './server';
 
 ChatLoginServer.getInstance().init();
@@ -142,3 +141,11 @@ export {
   useC2CSettingState,
   useGroupSettingState,
 };
+
+export * from '../../types/message';
+export * from '../../types/search';
+export * from '../../types/engine';
+export * from '../../types/conversation';
+export * from '../../types/contact';
+export * from '../../types/call';
+export * from '../../types/chatSetting';

package/src/subEntry/chat/index.ts

@@ -0,0 +1,13 @@
+export { useLoginState } from '../../states/LoginState';
+export * from '../../components/Avatar';
+export * from '../../components/UserPicker';
+export * from './chat';
+
+// types
+export * from '../../types/message';
+export * from '../../types/search';
+export * from '../../types/engine';
+export * from '../../types/conversation';
+export * from '../../types/contact';
+export * from '../../types/call';
+export * from '../../types/chatSetting';

package/src/{chat → subEntry/chat}/server.ts

@@ -2,9 +2,9 @@ import type { Ref } from 'vue';
 import { ref } from 'vue';
 import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
 import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
-import { useLoginState } from '../states/LoginState';
-import { ChatSceneType, useStatistical } from '../statistical';
-import { isPC } from '../utils';
+import { useLoginState } from '../../states/LoginState';
+import { ChatSceneType, useStatistical } from '../../statistical';
+import { isPC } from '../../utils';
 
 const { setChatScene } = useStatistical();
 

package/src/types/beauty.ts

@@ -1,9 +1,29 @@
+/**
+ * @module FreeBeautyConfigType
+ * @description 基础美颜配置
+ *
+ * 提供自由美颜相关的配置选项。
+ *
+ * @example
+ * import { FreeBeautyConfig } from '@tuikit-atomicx-vue3';
+ *
+ * const config: FreeBeautyConfig = {
+ *   beautyLevel: 0.5,
+ *   whitenessLevel: 0.5,
+ *   ruddinessLevel: 0.5,
+ * };
+ */
 export type FreeBeautyConfig = {
   beautyLevel: number;
   whitenessLevel: number;
   ruddinessLevel: number;
 };
 
+/**
+ * 美颜风格
+ * @enum {number}
+ * @description 表示美颜风格。
+ */
 export enum TRTCBeautyStyle {
   TRTCBeautyStyleSmooth = 0,
   TRTCBeautyStyleNature = 1,

package/src/types/participant.ts

@@ -102,6 +102,9 @@ export interface IRoomParticipantState {
   acceptOpenDeviceInvitation(options: { userId: string; device: DeviceType }): Promise<void>;
   declineOpenDeviceInvitation(options: { userId: string; device: DeviceType }): Promise<void>;
 
+  muteMicrophone(): Promise<void>;
+  unmuteMicrophone(): Promise<void>;
+
   subscribeEvent(event: RoomParticipantEvent, callback: RoomParticipantEventPayloads[keyof RoomParticipantEventPayloads]): void;
   unsubscribeEvent(event: RoomParticipantEvent, callback: RoomParticipantEventPayloads[keyof RoomParticipantEventPayloads]): void;
 }

package/src/types/room.ts

@@ -69,6 +69,23 @@ export enum RoomCallResult {
   AlreadyInRoom = 2,
 }
 
+/**
+ * 呼叫拒绝原因枚举
+ * @enum {number}
+ * @description 表示呼叫被拒绝的原因。
+ *
+ */
+export enum CallRejectReason {
+  /**
+   * 用户拒绝呼叫
+   */
+  Rejected = 0,
+  /**
+   * 用户已在其他房间中
+   */
+  InOtherRoom = 1,
+}
+
 export interface RoomCall {
   caller: RoomUser;
   callee: RoomUser;
@@ -116,6 +133,22 @@ export enum RoomEvent {
   onCallCancelled = 'onCallCancelled',
   onCallTimeout = 'onCallTimeout',
   onCallAccepted = 'onCallAccepted',
+
+  /**
+   * 当您发出的呼叫被被叫方拒绝时触发。
+   * @event
+   * @param {object} options - 事件参数对象
+   * @param {RoomInfo} options.roomInfo - 房间信息
+   * @param {RoomCall} options.call - 呼叫信息
+   * @param {string} options.extensionInfo - 被叫方拒绝的原因或附加信息
+   * @example
+   * import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3';
+   *
+   * const roomState = useRoomState();
+   * roomState.subscribeEvent(RoomEvent.onCallRejected, ({ roomInfo, call, reason }) => {
+   *   console.log(`${call.callee.userName} 拒绝了您的呼叫: ${reason}`);
+   * });
+   */
   onCallRejected = 'onCallRejected',
   onCallHandledByOtherDevice = 'onCallHandledByOtherDevice',
   onCallRevokedByAdmin = 'onCallRevokedByAdmin',
@@ -132,7 +165,22 @@ export interface RoomEventHandlers {
   onCallCancelled: (options: { roomInfo: RoomInfo; call: RoomCall }) => void;
   onCallTimeout: (options: { roomInfo: RoomInfo; call: RoomCall }) => void;
   onCallAccepted: (options: { roomInfo: RoomInfo; call: RoomCall }) => void;
-  onCallRejected: (options: { roomInfo: RoomInfo; call: RoomCall; extensionInfo: string }) => void;
+
+  /**
+   * onCallRejected 事件处理函数
+   * @param options - 事件数据
+   * @param options.roomInfo - 房间信息
+   * @param options.call - 呼叫信息
+   * @param options.reason - 被叫方拒绝原因
+   */
+  onCallRejected: (options: { roomInfo: RoomInfo; call: RoomCall; reason: CallRejectReason }) => void;
+
+  /**
+   * onCallHandledByOtherDevice 事件处理函数
+   * @param options - 事件数据
+   * @param options.roomInfo - 房间信息
+   * @param options.isAccepted - 呼叫是否在其他设备上被接受
+   */
   onCallHandledByOtherDevice: (options: { roomInfo: RoomInfo; isAccepted: boolean }) => void;
   onCallRevokedByAdmin: (options: { roomInfo: RoomInfo; call: RoomCall; operator: RoomUser }) => void;
 }

package/src/utils/call.ts

@@ -1,6 +1,7 @@
 import { TUIFriendService, TUIUserService, TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
 import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
 import { safeJSONParse } from './json';
+import { showChatErrorModalById, ChatErrorModalId } from '../components/UIKitModal/chatErrorModal';
 import type { StartCallParams, CallMessagePayload } from '../types/call';
 import type { MessageModel } from '../types/engine';
 
@@ -20,6 +21,13 @@ function isCallMessage(message: MessageModel) {
 }
 
 function startCall(params: StartCallParams) {
+  const result = TUICore.getService(TUIConstants.TUICalling.SERVICE.NAME);
+
+  if (!result) {
+    showChatErrorModalById(ChatErrorModalId.CALL_KIT_NOT_INTEGRATED);
+    return;
+  }
+
   TUICore.callService({
     serviceName: TUIConstants.TUICalling.SERVICE.NAME,
     method: TUIConstants.TUICalling.SERVICE.METHOD.START_CALL,

package/dist/chat/index.js

@@ -1,59 +0,0 @@
-import { View as t } from "../baseComp/View/index.js";
-import { ChatSetting as e } from "../components/ChatSetting/index.js";
-import { ContactList as s, ContactListItem as a, ContactInfo as o } from "../components/ContactList/index.js";
-import { ConversationList as n, ConversationActions as i, ConversationListHeader as r, ConversationListContent as c, ConversationPreview as C, ConversationPreviewUI as S, ConversationSearch as m } from "../components/ConversationList/index.js";
-import { MessageInput as u, EmojiPicker as v, AttachmentPicker as g, FilePicker as $, ImagePicker as d, VideoPicker as h, AudioCallPicker as L, VideoCallPicker as p } from "../components/MessageInput/index.js";
-import { MessageList as P, Message as A } from "../components/MessageList/index.js";
-import { Search as M, SearchAdvanced as I, UserAdvanced as f, MessageAdvanced as k, SearchResults as l, SearchResultItem as w, SearchBar as V } from "../components/Search/index.js";
-import { useMessageActions as R } from "../hooks/useMessageActions.js";
-import { useSearchState as U } from "../states/SearchState.js";
-import j from "./server.js";
-import { useContactListState as B } from "../states/ContactListState/ContactListState.js";
-import { useC2CSettingState as E } from "../states/C2CSettingState/C2CSettingState.js";
-import { useGroupSettingState as F } from "../states/GroupSettingState/GroupSettingState.js";
-import { useMessageListState as G } from "../states/MessageListState/MessageListState.js";
-import { useMessageInputState as H } from "../states/MessageInputState/MessageInputState.js";
-import { useMessageActionState as _ } from "../states/MessageActionState/MessageActionState.js";
-import { useConversationListState as x } from "../states/ConversationListState/ConversationListState.js";
-j.getInstance().init();
-const st = M, at = I, ot = k, nt = f, it = V, rt = l, ct = w, Ct = n, St = i, mt = r, ut = c, vt = C, gt = S, $t = m, dt = s, ht = a, Lt = o, pt = P, Pt = A, At = u, Mt = v, It = g, ft = $, kt = d, lt = h, wt = L, Vt = p, Rt = e, Ut = t, jt = R, Bt = x, Et = _, Ft = H, Gt = G, Ht = U, _t = B, xt = E, bt = F;
-export {
-  It as AttachmentPicker,
-  wt as AudioCallPicker,
-  Rt as ChatSetting,
-  Lt as ContactInfo,
-  dt as ContactList,
-  ht as ContactListItem,
-  St as ConversationActions,
-  Ct as ConversationList,
-  ut as ConversationListContent,
-  mt as ConversationListHeader,
-  vt as ConversationPreview,
-  gt as ConversationPreviewUI,
-  $t as ConversationSearch,
-  Mt as EmojiPicker,
-  ft as FilePicker,
-  kt as ImagePicker,
-  Pt as Message,
-  ot as MessageAdvanced,
-  At as MessageInput,
-  pt as MessageList,
-  st as Search,
-  at as SearchAdvanced,
-  it as SearchBar,
-  ct as SearchResultItem,
-  rt as SearchResults,
-  nt as UserAdvanced,
-  Vt as VideoCallPicker,
-  lt as VideoPicker,
-  Ut as View,
-  xt as useC2CSettingState,
-  _t as useContactListState,
-  Bt as useConversationListState,
-  bt as useGroupSettingState,
-  Et as useMessageActionState,
-  jt as useMessageActions,
-  Ft as useMessageInputState,
-  Gt as useMessageListState,
-  Ht as useSearchState
-};