tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/src/components/UIKitModal/index.scss

@@ -0,0 +1,134 @@
+.uikit-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--uikit-color-black-3);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-mask {
+  background: transparent;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.uikit-modal-default {
+  width: 480px;
+  max-width: calc(100% - 40px);
+  border-radius: var(--tui-dialog-round-radius);
+  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
+}
+
+.uikit-modal-container {
+  box-sizing: border-box;
+  background: var(--bg-color-dialog);
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 24px;
+}
+
+.uikit-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+
+  .uikit-modal-type-icon {
+    margin-right: 6px;
+  }
+}
+
+.uikit-modal-close-icon {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  cursor: pointer;
+  color: var(--text-color-primary);
+}
+
+.uikit-modal-title {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  color: var(--text-color-primary);
+  flex: 1;
+}
+
+.uikit-modal-body {
+  flex: 1;
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--text-color-primary);
+  word-break: break-word;
+
+  :deep(.uikit-modal-link) {
+    color: var(--text-color-link);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border-bottom: 1px solid transparent;
+    margin: 0 0.2em;
+  }
+}
+
+.uikit-modal-footer {
+  padding-top: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.uikit-modal-header:not(:has(:not(:empty))),
+.uikit-modal-body:not(:has(:not(:empty))),
+.uikit-modal-footer:not(:has(:not(:empty))) {
+  padding: 0;
+}
+
+.uikit-modal-container-mobile {
+  padding: 0;
+  .uikit-modal-header {
+    padding: 0;
+    justify-content: center;
+  }
+  .uikit-modal-header .uikit-modal-title:not(:empty) {
+    padding: 20px 20px 0;
+  }
+  .uikit-modal-body{
+    justify-content: center;
+  }
+  .uikit-modal-body:not(:has(*)) {
+    padding: 20px;
+  }
+  .uikit-modal-footer {
+    padding: 0;
+    border-top: 0.5px solid var(--stroke-color-module);
+    gap: 12px;
+    .uikit-modal-footer-btn {
+      flex: 1;
+      border-radius: 0;
+      border: 0;
+      height: 56px;
+    }
+    .uikit-modal-footer-btn + .uikit-modal-footer-btn {
+      margin: 0;
+      border-left: 0.5px solid var(--stroke-color-module);
+    }
+  }
+}
+

package/src/components/UIKitModal/index.ts

@@ -0,0 +1,2 @@
+export { UIKitModal } from './UIKitModal';
+export { useRoomModal } from './useRoomModal';

package/src/components/UIKitModal/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <teleport to="body">
+    <transition name="fade">
+      <div
+        v-if="visible"
+        class="uikit-modal-mask"
+        @click.self="handleConfirm"
+      >
+        <div class="uikit-modal-default uikit-modal-container">
+          <div class="uikit-modal-header">
+            <IconSuccessToast
+              v-if="type === 'success'"
+              class="uikit-modal-type-icon"
+            />
+            <IconInfoToast
+              v-if="type === 'info'"
+              class="uikit-modal-type-icon"
+            />
+            <IconErrorToast
+              v-if="type === 'error'"
+              class="uikit-modal-type-icon"
+            />
+            <IconWarningToast
+              v-if="type === 'warning'"
+              class="uikit-modal-type-icon"
+            />
+            <span class="uikit-modal-title">{{ title }}</span>
+            <IconClose
+              v-if="IS_PC"
+              class="uikit-modal-close-icon"
+              @click="handleCancel"
+            />
+          </div>
+          <div
+            class="uikit-modal-body"
+            v-html="processedContent"
+          />
+          <div class="uikit-modal-footer">
+            <TUIButton
+              type="default"
+              style="min-width: 88px"
+              @click="handleCancel"
+            >
+              {{ t('Cancel') }}
+            </TUIButton>
+            <TUIButton
+              type="primary"
+              style="min-width: 88px"
+              @click="handleConfirm"
+            >
+              {{ t('Confirm') }}
+            </TUIButton>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  withDefaults,
+  defineProps,
+  defineEmits,
+  computed,
+} from 'vue';
+import {
+  TUIButton,
+  IconClose,
+  IconSuccessToast,
+  IconInfoToast,
+  IconErrorToast,
+  IconWarningToast,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { getPlatform } from '@tencentcloud/universal-api';
+import { useI18n } from '../../locales';
+import type { UIKitModalOptions } from './type';
+
+const IS_PC = getPlatform() === 'pc';
+const { t } = useI18n();
+
+interface Props extends UIKitModalOptions {
+  visible: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  title: '',
+  content: '',
+  visible: false,
+});
+
+const emit = defineEmits<{
+  (_e: 'confirm'): void;
+  (_e: 'cancel'): void;
+}>();
+
+const URL_REGEX = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/i;
+const FULL_URL_REGEX = /(https?:\/\/[^\s]+)/g;
+
+const processedContent = computed(() => {
+  const { content } = props;
+
+  if (!content || typeof content !== 'string') {
+    return content;
+  }
+
+  if (URL_REGEX.test(content.trim())) {
+    const url = content.trim();
+    const href = url.startsWith('http') ? url : `https://${url}`;
+    return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${escapeHtml(url)}</a>`;
+  }
+
+  if (content.includes('<a ') || content.includes('<a>')) {
+    return processAnchorTags(content);
+  }
+
+  if (FULL_URL_REGEX.test(content)) {
+    return escapeHtml(content).replace(FULL_URL_REGEX, url => `<a href="${url}" target="_blank" rel="noopener noreferrer" class="uikit-modal-link">${url}</a>`);
+  }
+
+  return escapeHtml(content);
+});
+
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function processAnchorTags(content: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(content, 'text/html');
+  const anchors = doc.querySelectorAll('a');
+  anchors.forEach((anchor) => {
+    const href = anchor.getAttribute('href');
+    if (href) {
+      anchor.setAttribute('target', '_blank');
+      anchor.setAttribute('rel', 'noopener noreferrer');
+      anchor.classList.add('uikit-modal-link');
+      const originalText = anchor.textContent || '';
+      anchor.innerHTML = `<span style="padding: 0 0.2em; display: inline-block; color: var(--text-color-link)">${originalText}</span>`;
+    }
+  });
+
+  return doc.body.innerHTML;
+}
+
+function handleConfirm() {
+  props.onConfirm?.();
+  emit('confirm');
+}
+
+function handleCancel() {
+  props.onCancel?.();
+  emit('cancel');
+}
+</script>
+
+<style lang="scss" src="./index.scss"></style>

package/src/components/UIKitModal/type.ts

@@ -0,0 +1,24 @@
+import type { VNode } from 'vue';
+
+export type ButtonType = 'primary' | 'default' | 'text';
+export type Action = 'cancel' | 'confirm' | 'close' | 'mask';
+
+export interface UIKitModalEvents {
+  onConfirm?: () => void;
+  onCancel?: () => void;
+}
+
+export interface UIKitModalOptions extends UIKitModalEvents {
+  id: number;
+  title: string;
+  content: string | VNode;
+  type: 'info' | 'warning' | 'error' | 'success';
+}
+
+export interface IUIKitModalBtn {
+  type?: ButtonType;
+  text?: string;
+  customClasses?: string[];
+  action?: () => void;
+  disabled?: boolean;
+}

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

@@ -0,0 +1,19 @@
+export const resource = {
+  // Modal
+  Room: {
+    'Modal.Title': 'Error',
+    'Modal.UserSigExpired': 'The user signature has expired. It is recommended to set the signature validity period to at least 24 hours. You can check our online document: <a target="_blank" href="https://trtc.io/document/35166?product=live&menulabel=uikit&platform=web">Generating UserSig</a>.',
+    'Modal.InvalidSignature': 'Invalid signature. Please regenerate it. You can check our online document: <a target="_blank" href="https://trtc.io/document/35166?product=live&menulabel=uikit&platform=web">Generating UserSig</a>.',
+    'Modal.UserIdNotMatchUserSig': 'The user ID does not match the user signature. Please check. You can verify your ID and signature on <a target="_blank" href="https://console.trtc.io/usersig">RTC Console</a>.',
+    'Modal.SdkAppIdNotMatchUserSig': 'The SDKAppID does not match the user signature. Please check. You can verify your SDKAppID and signature on <a target="_blank" href="https://console.trtc.io/usersig">RTC Console</a>.',
+    'Modal.RequirePaymentContent': 'No active package found or account is in arrears. Please proceed to the <a target="_blank" href="https://console.trtc.io/subscription/buy/live">Tencent Cloud console</a> to make a purchase.For first-time use, you can <a target="_blank" href="https://trtc.io/document/60033?product=live&menulabel=uikit&platform=web">activate the trial version</a>.',
+    'Modal.DeviceFailed': 'If you encounter any issues acquiring devices or capturing audio/video, please visit the [Audio/Video Capability Testing Tool] to check if your device and environment are compatible: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.DeviceNotDetected': 'No camera/microphone device detected. Please ensure your camera/microphone is properly connected and check your system or browser settings to confirm the camera/microphone is available.',
+    'Modal.DevicePermissionDenied': 'Camera/Microphone access was denied. Please check your browser settings to ensure this site is allowed to use your camera and microphone. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraPermissionDenied': 'Camera access was denied. Please check your browser settings to ensure this site is allowed to use your camera. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophonePermissionDenied': 'Microphone access was denied. Please check your browser settings to ensure this site is allowed to use your microphone. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraStartFailed': 'Camera access failed. Please check your browser settings to ensure this site is allowed to use your camera. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophoneStartFailed': 'Microphone access failed. Please check your browser settings to ensure this site is allowed to use your microphone. If you have confirmed permission is granted, please use the [A/V Capability Test Tool] to check your device and environment for call compatibility: https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+
+  },
+};

package/src/components/UIKitModal/useRoomModal/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 };

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

@@ -0,0 +1,18 @@
+export const resource = {
+  // Modal
+  Room: {
+    'Modal.Title': '错误',
+    'Modal.UserSigExpired': '用户签名已过期，建议生成的签名有效期不少于 24 小时。可参阅 <a target="_blank" href="https://cloud.tencent.com/document/product/269/32688">生成 UserSig(用户鉴权)</a>。',
+    'Modal.InvalidSignature': '非法的用户签名，请重新生成。可参阅 <a target="_blank" href="https://cloud.tencent.com/document/product/269/32688">生成 UserSig(用户鉴权)</a>。',
+    'Modal.UserIdNotMatchUserSig': '用户 ID 与用户签名不匹配，请检查。可前往腾讯云控制台验证：<a target="_blank" href="https://console.cloud.tencent.com/trtc/usersigtool">验证签名</a>。',
+    'Modal.SdkAppIdNotMatchUserSig': 'SDKAppID 与用户签名不匹配，请检查。可前往腾讯云控制台验证：<a target="_blank" href="https://console.cloud.tencent.com/trtc/usersigtool">验证签名</a>。',
+    'Modal.RequirePaymentContent': '未购买套餐包或者已欠费，请前往<a target="_blank" href="https://buy.cloud.tencent.com/trtc">腾讯云控制台购买</a>。首次使用，可以<a target="_blank" href="https://cloud.tencent.com/document/product/647/105439">开通体验版</a>。',
+    'Modal.DeviceFailed': '获取设备或者采集音视频出现异常，请前往 [音视频能力检测工具] 检查您的设备和环境是否支持： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.DeviceNotDetected': '未检测到摄像头/麦克风设备。 请确保您的摄像头/麦克风已连接，并检查系统或浏览器设置中摄像头/麦克风是否可用。',
+    'Modal.DevicePermissionDenied': '摄像头/麦克风权限被拒绝，请检查浏览器设置，确保已允许使用您的摄像头和麦克风。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持通话： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraPermissionDenied': '摄像头权限被拒绝，请检查浏览器设置，确保已允许使用您的摄像头。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持通话： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophonePermissionDenied': '麦克风权限被拒绝，请检查浏览器设置，确保已允许使用您的麦克风。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持通话： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.CameraStartFailed': '打开摄像头失败，请检查浏览器设置，确保已允许使用您的摄像头。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+    'Modal.MicrophoneStartFailed': '打开麦克风失败，请检查浏览器设置，确保已允许使用您的麦克风。如果您确认已授予权限， 请前往 [音视频能力检测工具] 检查您的设备和环境是否支持： https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html',
+  },
+};

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

@@ -0,0 +1,11 @@
+import { addI18n } from '../../../i18n';
+import { enResource, zhResource } from './i18n';
+import { useRoomModal as useRoomModalFunction } from './useRoomModal';
+
+const useRoomModal = useRoomModalFunction;
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+export {
+  useRoomModal,
+};

package/src/components/UIKitModal/useRoomModal/useRoomModal.ts

@@ -0,0 +1,103 @@
+import { TUIErrorCode } from '@tencentcloud/tuiroom-engine-js';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { UIKitModal } from '../UIKitModal';
+
+export enum ErrorCode {
+  ERR_REQUIRE_PAYMENT_CONTENT = 100007,
+  USER_SIG_EXPIRED = 70001,
+  INVALID_SIGNATURE = 70003,
+  USER_ID_NOT_MATCH_USER_SIG = 70013,
+  SDKAppID_NOT_MATCH_USER_SIG = 70014,
+  DEVICE_FAILED = 5300,
+  DEVICE_NOT_DETECTED = 5301,
+  DEVICE_PERMISSION_DENIED = 5302,
+}
+
+interface ErrorConfig {
+  id: number;
+  i18nKey: string;
+}
+
+const ERROR_CONFIG_MAP: Record<number, ErrorConfig> = {
+  // Custom ErrorCode
+  [ErrorCode.ERR_REQUIRE_PAYMENT_CONTENT]: {
+    id: 20003,
+    i18nKey: 'Modal.RequirePaymentContent',
+  },
+  [ErrorCode.DEVICE_FAILED]: {
+    id: 20008,
+    i18nKey: 'Modal.DeviceFailed',
+  },
+  [ErrorCode.DEVICE_NOT_DETECTED]: {
+    id: 20009,
+    i18nKey: 'Modal.DeviceNotDetected',
+  },
+  [ErrorCode.DEVICE_PERMISSION_DENIED]: {
+    id: 20010,
+    i18nKey: 'Modal.DevicePermissionDenied',
+  },
+  [ErrorCode.USER_SIG_EXPIRED]: {
+    id: 20004,
+    i18nKey: 'Modal.UserSigExpired',
+  },
+  [ErrorCode.INVALID_SIGNATURE]: {
+    id: 20005,
+    i18nKey: 'Modal.InvalidSignature',
+  },
+  [ErrorCode.USER_ID_NOT_MATCH_USER_SIG]: {
+    id: 20006,
+    i18nKey: 'Modal.UserIdNotMatchUserSig',
+  },
+  [ErrorCode.SDKAppID_NOT_MATCH_USER_SIG]: {
+    id: 20007,
+    i18nKey: 'Modal.SdkAppIdNotMatchUserSig',
+  },
+  // TUIErrorCode from SDK
+  [TUIErrorCode.ERR_REQUIRE_PAYMENT]: {
+    id: 20011,
+    i18nKey: 'Modal.RequirePaymentContent',
+  },
+  [TUIErrorCode.ERR_CAMERA_NOT_AUTHORIZED]: {
+    id: 20012,
+    i18nKey: 'Modal.CameraPermissionDenied',
+  },
+  [TUIErrorCode.ERR_MICROPHONE_NOT_AUTHORIZED]: {
+    id: 20013,
+    i18nKey: 'Modal.MicrophonePermissionDenied',
+  },
+  [TUIErrorCode.ERR_CAMERA_START_FAILED]: {
+    id: 20014,
+    i18nKey: 'Modal.CameraStartFailed',
+  },
+  [TUIErrorCode.ERR_MICROPHONE_START_FAILED]: {
+    id: 20015,
+    i18nKey: 'Modal.MicrophoneStartFailed',
+  },
+};
+
+/**
+ * Handle error and show UIKitModal
+ * @param error - Error object with code property
+ */
+function handleErrorWithModal(error: { code?: number }): void {
+  const { t } = useUIKit();
+
+  const errorCode = error.code;
+  if (!errorCode) {
+    return;
+  }
+
+  const config = ERROR_CONFIG_MAP[errorCode];
+  if (config) {
+    UIKitModal.openModal({
+      id: config.id,
+      title: t('Room.Modal.Title'),
+      content: t(`Room.${config.i18nKey}`),
+      type: 'error',
+    });
+  }
+}
+
+export const useRoomModal = () => ({
+  handleErrorWithModal,
+});

package/src/components/UserList/AllUserActions/indexH5.vue

@@ -5,14 +5,14 @@
   >
     <div
       class="manage-member-button"
-      :class="currentRoom?.isMicrophoneDisableForAllUser ? 'lift-all' : ''"
+      :class="currentRoom?.isAllMicrophoneDisabled ? 'lift-all' : ''"
       @touchstart="roomAudioAction.handler"
     >
       {{ roomAudioAction.label }}
     </div>
     <div
       class="manage-member-button"
-      :class="currentRoom?.isCameraDisableForAllUser ? 'lift-all' : ''"
+      :class="currentRoom?.isAllCameraDisabled ? 'lift-all' : ''"
       @touchstart="roomVideoAction.handler"
     >
       {{ roomVideoAction.label }}
@@ -47,9 +47,9 @@
 
 <script setup lang="ts">
 import { defineProps } from 'vue';
-import useIndex from './useIndexHooks';
 import { TUIIcon } from '@tencentcloud/uikit-base-component-vue3';
 import { useRoomState } from '../../../states/RoomState';
+import useIndex from './useIndexHooks';
 
 const { currentRoom } = useRoomState();
 

package/src/components/UserList/AllUserActions/useIndexHooks.ts

@@ -6,7 +6,7 @@ import { MESSAGE_DURATION } from '../../../constants/message';
 // import { roomService } from '../../../../services';
 import useUserState from '../../../states/UserState/index';
 import useRoomActions from '../../../hooks/useRoomActions';
-import { UserInfo, RoomAction } from '../../../types';
+import { UserInfo } from '../../../types';
 
 export default function useIndex() {
   const { t } = useI18n();

package/src/components/UserList/UserItem/UserInfo/index.vue

@@ -9,11 +9,13 @@
       "
     >
       <Avatar class="avatar-url" :img-src="userInfo.avatarUrl" />
-      <div class="user-name">{{ getDisplayName(userInfo) }}</div>
+      <div class="user-name">
+        {{ getDisplayName(userInfo) }}
+      </div>
       <div class="role-info">
         <IconUser
-          size="20"
           v-if="isTargetUserRoomOwner || isTargetUserAdmin"
+          size="20"
           :class="isTargetUserAdmin ? 'admin-icon' : 'master-icon'"
         />
         <div
@@ -26,7 +28,11 @@
     <!-- User audio and video status information -->
     <div v-if="showStateIcon" class="member-av-state">
       <template v-for="(item, index) in iconList" :key="index">
-        <component :is="item.icon" :class="['state-icon', { 'disable-icon': item.disable }]" :size="item.size" />
+        <component
+          :is="item.icon"
+          :class="['state-icon', { 'disable-icon': item.disable }]"
+          :size="item.size"
+        />
       </template>
     </div>
   </div>
@@ -34,7 +40,6 @@
 <script setup lang="ts">
 import { computed, defineProps, withDefaults } from 'vue';
 import { TUIRole } from '@tencentcloud/tuiroom-engine-js';
-import Avatar from '../../../../baseComp/Avatar.vue';
 import {
   IconVideoOpen,
   IconVideoClose,
@@ -44,13 +49,14 @@ import {
   IconApplyActive,
   IconUser,
 } from '@tencentcloud/uikit-base-component-vue3';
+import Avatar from '../../../../baseComp/Avatar.vue';
 import { useI18n } from '../../../../locales';
-import { isMobile } from '../../../../utils/environment';
-import { SeatStatus, UserInfo, DeviceStatus } from '../../../../types';
 
 import { useRoomState } from '../../../../states/RoomState';
 import useUserState from '../../../../states/UserState/index';
-
+import { SeatStatus, DeviceStatus } from '../../../../types';
+import { isMobile } from '../../../../utils/environment';
+import type { UserInfo } from '../../../../types';
 
 const { t } = useI18n();
 
@@ -69,10 +75,10 @@ const isMaster = computed(() => props.userInfo.userRole === TUIRole.kRoomOwner);
 const isMe = computed(() => localUser.value?.userId === props.userInfo.userId);
 
 const isTargetUserRoomOwner = computed(
-  () => props.userInfo.userRole === TUIRole.kRoomOwner
+  () => props.userInfo.userRole === TUIRole.kRoomOwner,
 );
 const isTargetUserAdmin = computed(
-  () => props.userInfo.userRole === TUIRole.kAdministrator
+  () => props.userInfo.userRole === TUIRole.kAdministrator,
 );
 
 const extraInfo = computed(() => {
@@ -95,11 +101,11 @@ const extraInfo = computed(() => {
 });
 
 const isAudienceRole = computed(
-  () => currentRoom.value?.isSeatEnabled && props.userInfo.seatStatus !== SeatStatus.On
+  () => currentRoom.value?.isSeatEnabled && props.userInfo.seatStatus !== SeatStatus.On,
 );
 
 const isUserApplyingToAnchor = computed(() =>
-  props.userInfo.seatStatus === SeatStatus.OffApplicationPending
+  props.userInfo.seatStatus === SeatStatus.OffApplicationPending,
 );
 
 const iconList = computed(() => {
@@ -225,4 +231,3 @@ const iconList = computed(() => {
   width: 80vw;
 }
 </style>
-../../../../states/RoomState

package/src/components/UserPicker/UserPicker.vue

@@ -102,7 +102,7 @@ const selectionManager = useSelection<any>({
 const searchManager = useSearchFilter<any>({
   dataSource: internalDataSource,
   isTreeMode: isTreeMode.value,
-  onSearch: props.onSearch || (() => {}),
+  onSearch: props.onSearch,
 });
 
 // Use custom hook to manage tree state (if in tree mode)

package/src/components/UserPicker/components/SelectedPanel/SelectedPanel.vue

@@ -8,6 +8,7 @@
       <span :class="$style.selected__count">
         {{ leafItems.length }}
         <template v-if="maxCount < InfinityValue"> / {{ maxCount }} </template>
+        {{ t('UserPicker.people_unit') }}
       </span>
     </div>
     <div :class="$style.selected__list">