tuikit-atomicx-vue3 3.3.0-beta.3 → 3.3.1

package/dist/types/contact.d.ts

@@ -1,3 +1,4 @@
+import { Component } from 'vue';
 import { GroupModel } from './engine';
 import { default as TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
 
@@ -135,10 +136,10 @@ export interface ContactListProps {
     groupConfig?: Partial<Record<ContactItemType, CustomGroupConfig>>;
     searchPlaceholder?: string;
     emptyText?: string;
-    ContactItem?: any;
-    ContactSearchComponent?: any;
-    GroupHeader?: any;
-    PlaceholderEmptyList?: any;
+    ContactItem?: Component;
+    ContactSearchComponent?: Component;
+    GroupHeader?: Component;
+    PlaceholderEmptyList?: Component;
     onContactItemClick?: (item: ContactGroupItem) => void;
     onFriendApplicationAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
     onGroupApplicationAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
@@ -149,14 +150,14 @@ export interface ContactInfoBaseProps {
 }
 export interface ContactInfoProps extends ContactInfoBaseProps {
     contactItem?: ContactGroupItem | undefined;
-    PlaceholderEmpty?: any;
-    FriendInfoComponent?: any;
-    GroupInfoComponent?: any;
-    BlacklistInfoComponent?: any;
-    FriendApplicationInfoComponent?: any;
-    GroupApplicationInfoComponent?: any;
-    SearchGroupInfoComponent?: any;
-    SearchUserInfoComponent?: any;
+    PlaceholderEmpty?: Component;
+    FriendInfoComponent?: Component;
+    GroupInfoComponent?: Component;
+    BlacklistInfoComponent?: Component;
+    FriendApplicationInfoComponent?: Component;
+    GroupApplicationInfoComponent?: Component;
+    SearchGroupInfoComponent?: Component;
+    SearchUserInfoComponent?: Component;
     onSendMessage?: (friend: Friend) => void;
     onDeleteFriend?: (friend: Friend) => void;
     onUpdateFriendRemark?: (friend: Friend, remark: string) => void;

package/dist/types/conversation.d.ts

@@ -26,11 +26,11 @@ export interface ConversationListProps {
     /** Specifies a vue component to customize the conversation actions in conversation preview. */
     ConversationActions?: Component<ConversationActionsProps>;
     /** Specifies a vue component to display when the chat list is empty. */
-    PlaceholderEmptyList?: any;
+    PlaceholderEmptyList?: Component;
     /** Specifies a vue component to display while the chat list is loading. */
-    PlaceholderLoading?: any;
+    PlaceholderLoading?: Component;
     /** Specifies a vue component to display when there is an error loading the chat list. */
-    PlaceholderLoadError?: any;
+    PlaceholderLoadError?: Component;
     /** Specifies a vue component to customize the avatar in list. */
     Avatar?: Component<AvatarProps>;
     /** Specifies a function to filter conversations in the conversation list. */
@@ -70,11 +70,11 @@ export interface ConversationListContentProps {
     /** Indicates whether there was an error loading the chat list */
     error?: boolean;
     /** A custom component to display when the chat list is empty */
-    PlaceholderEmptyList?: any;
+    PlaceholderEmptyList?: Component;
     /** A custom component to display while the chat list is loading */
-    PlaceholderLoading?: any;
+    PlaceholderLoading?: Component;
     /** A custom component to display when there is an error loading the chat list */
-    PlaceholderLoadError?: any;
+    PlaceholderLoadError?: Component;
     /** The custom class name */
     className?: string;
     /** The custom class style */
@@ -87,18 +87,16 @@ export interface ConversationPreviewUIProps {
     isSelected?: boolean;
     /** Whether to show the ConversationActions */
     enableActions?: boolean;
-    /** The string to be highlighted in the title */
-    highlightMatchString?: string;
     /** The custom Avatar component */
     Avatar?: Component<AvatarProps>;
     /** The custom Title component */
-    Title?: string | any;
+    Title?: string | Component;
     /** The custom last message abstract component */
-    LastMessageAbstract?: string | any;
+    LastMessageAbstract?: string | Component;
     /** The custom last message abstract component */
-    LastMessageTimestamp?: string | any;
+    LastMessageTimestamp?: string | Component;
     /** The custom Unread component */
-    Unread?: string | any;
+    Unread?: string | Component;
     /** The custom ConversationActions component */
     ConversationActions?: Component<ConversationActionsProps>;
     /** Callback when the user click a conversation from conversation list */
@@ -153,9 +151,9 @@ export interface ConversationActionsConfig extends ConversationActionsBaseConfig
      */
     customConversationActions?: Record<string, ConversationActionItem>;
     /** The icon vue element to be displayed in the action popup. */
-    PopupIcon?: any;
+    PopupIcon?: Component;
     /** An array of vue elements to be displayed in the action popup. */
-    PopupElements?: any[];
+    PopupElements?: Component[];
     /** The function to be called when the action popup is clicked. */
     onClick?: (e: Event, key?: string, conversation?: ConversationModel) => void;
     /** Function to be called when the actions modal is closed (H5 only). */

package/dist/types/engine.d.ts

@@ -5,3 +5,15 @@ export declare enum SearchType {
     USER = "user",
     GROUP = "group"
 }
+export declare enum MessageType {
+    TEXT,
+    IMAGE,
+    AUDIO,
+    VIDEO,
+    FILE,
+    FACE,
+    LOCATION,
+    GRP_TIP,
+    CUSTOM,
+    MERGER
+}

package/dist/types/engine.js

@@ -1,3 +1,4 @@
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
 var SearchType = /* @__PURE__ */ ((SearchType2) => {
   SearchType2["MESSAGE"] = "message";
   SearchType2["CHAT_MESSAGE"] = "chat_message";
@@ -5,6 +6,20 @@ var SearchType = /* @__PURE__ */ ((SearchType2) => {
   SearchType2["GROUP"] = "group";
   return SearchType2;
 })(SearchType || {});
+var MessageType = ((MessageType2) => {
+  MessageType2[MessageType2["TEXT"] = TUIChatEngine.TYPES.MSG_TEXT] = "TEXT";
+  MessageType2[MessageType2["IMAGE"] = TUIChatEngine.TYPES.MSG_IMAGE] = "IMAGE";
+  MessageType2[MessageType2["AUDIO"] = TUIChatEngine.TYPES.MSG_AUDIO] = "AUDIO";
+  MessageType2[MessageType2["VIDEO"] = TUIChatEngine.TYPES.MSG_VIDEO] = "VIDEO";
+  MessageType2[MessageType2["FILE"] = TUIChatEngine.TYPES.MSG_FILE] = "FILE";
+  MessageType2[MessageType2["FACE"] = TUIChatEngine.TYPES.MSG_FACE] = "FACE";
+  MessageType2[MessageType2["LOCATION"] = TUIChatEngine.TYPES.MSG_LOCATION] = "LOCATION";
+  MessageType2[MessageType2["GRP_TIP"] = TUIChatEngine.TYPES.MSG_GRP_TIP] = "GRP_TIP";
+  MessageType2[MessageType2["CUSTOM"] = TUIChatEngine.TYPES.MSG_CUSTOM] = "CUSTOM";
+  MessageType2[MessageType2["MERGER"] = TUIChatEngine.TYPES.MSG_MERGER] = "MERGER";
+  return MessageType2;
+})(MessageType || {});
 export {
+  MessageType,
   SearchType
 };

package/dist/types/index.js

@@ -8,7 +8,7 @@ import { LocalRoomStatus, RoomAction } from "./room.js";
 import { MonitorDeviceStatus } from "./monitor.js";
 import { CoGuestStatus } from "./coGuest.js";
 import { VariantType, defaultTypeLabels } from "./search.js";
-import { SearchType } from "./engine.js";
+import { MessageType, SearchType } from "./engine.js";
 import { CreateConvTypes, GroupLabelTypes, GroupType, PageStateTypes, PlaceHolderTypes } from "./conversation.js";
 import { ContactItemType, GroupApplicationType } from "./contact.js";
 export {
@@ -30,6 +30,7 @@ export {
   LiveType,
   LocalRoomStatus,
   MediaSettingDisplayMode,
+  MessageType,
   MonitorDeviceStatus,
   PageStateTypes,
   PlaceHolderTypes,

package/dist/utils/json.js

@@ -39,7 +39,6 @@ function safeJSONParse(text, defaultValue, reviver) {
     }
     return parsed;
   } catch (error) {
-    console.warn("JSON parse failed:", error);
     return defaultValue;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "3.3.0-beta.3",
+  "version": "3.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -22,6 +22,10 @@
     "./rtc": {
       "types": "./dist/rtc/index.d.ts",
       "import": "./dist/rtc/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
     }
   },
   "scripts": {
@@ -47,8 +51,8 @@
     "@tencentcloud/chat": "^3.5.4",
     "@tencentcloud/chat-uikit-engine": "~2.5.1",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.3.0-beta.3",
-    "@tencentcloud/uikit-base-component-vue3": "0.3.7",
+    "@tencentcloud/tuiroom-engine-js": "~3.3.1",
+    "@tencentcloud/uikit-base-component-vue3": "1.0.1",
     "vue": "^3.4.21"
   },
   "dependencies": {

package/src/chat/index.ts

@@ -12,12 +12,17 @@ import {
   ConversationListHeader as ConversationListHeaderComponent,
   ConversationListContent as ConversationListContentComponent,
   ConversationPreview as ConversationPreviewComponent,
+  ConversationPreviewUI as ConversationPreviewUIComponent,
+  ConversationSearch as ConversationSearchComponent,
 } from '../components/ConversationList';
 import {
   MessageInput as MessageInputComponent,
   EmojiPicker as EmojiPickerComponent,
 } from '../components/MessageInput';
-import { MessageList as MessageListComponent } from '../components/MessageList';
+import {
+  MessageList as MessageListComponent,
+  Message as MessageComponent,
+} from '../components/MessageList';
 import {
   Search as SearchComponent,
   SearchAdvanced as SearchAdvancedComponent,
@@ -33,7 +38,6 @@ import { useMessageActionState as messageActionState } from '../states/MessageAc
 import { useMessageInputState as messageInputState } from '../states/MessageInputState';
 import { useMessageListState as messageListState } from '../states/MessageListState';
 import { useSearchState as searchState } from '../states/SearchState';
-import { useUIOpenControlState as uiOpenControlState } from '../states/UIOpenControlState';
 
 import ChatLoginServer from './server';
 
@@ -52,11 +56,14 @@ const ConversationActions = ConversationActionsComponent;
 const ConversationListHeader = ConversationListHeaderComponent;
 const ConversationListContent = ConversationListContentComponent;
 const ConversationPreview = ConversationPreviewComponent;
+const ConversationPreviewUI = ConversationPreviewUIComponent;
+const ConversationSearch = ConversationSearchComponent;
 const ContactList = ContactListComponent;
 const ContactListItem = ContactListItemComponent;
 const ContactInfo = ContactInfoComponent;
 
 const MessageList = MessageListComponent;
+const Message = MessageComponent;
 const MessageInput = MessageInputComponent;
 const EmojiPicker = EmojiPickerComponent;
 const ChatSetting = ChatSettingComponent;
@@ -71,7 +78,6 @@ const useMessageActionState = messageActionState;
 const useMessageInputState = messageInputState;
 const useMessageListState = messageListState;
 const useSearchState = searchState;
-const useUIOpenControlState = uiOpenControlState;
 
 export {
   // component
@@ -87,7 +93,10 @@ export {
   ConversationListHeader,
   ConversationListContent,
   ConversationPreview,
+  ConversationPreviewUI,
+  ConversationSearch,
   MessageList,
+  Message,
   MessageInput,
   EmojiPicker,
   ChatSetting,
@@ -105,5 +114,4 @@ export {
   useMessageActionState,
   useConversationListState,
   useSearchState,
-  useUIOpenControlState,
 };

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="live-message-input-h5">
+    <div v-if="!editorShow" class="placeholder-container" :style="{width: props.width}"  @click="handleShowEditor">
+      <div class="input-actions">
+        <EmojiPicker :disabled="disabled" :trigger-style="{ display: 'flex' }" />
+      </div>
+      <span>{{ placeholderText }}</span>
+    </div>
+
     <BarrageInput
+      v-if="editorShow"
       :autoFocus="props.autoFocus"
       :containerClass="inputClass"
       :containerStyle="props.containerStyle"
@@ -8,7 +16,7 @@
       :height="props.height"
       :minHeight="props.minHeight"
       :maxHeight="props.maxHeight"
-      :placeholder="props.placeholder"
+      :placeholder="placeholderText"
       :disabled="disabled"
       :maxLength="props.maxLength"
       @focus="handleFocus"
@@ -26,12 +34,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, withDefaults, defineProps, defineEmits, computed } from 'vue';
+import { ref, withDefaults, defineProps, defineEmits, computed, nextTick } from 'vue';
 import { useUIKit, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
 import { useLoginState } from '../../states/LoginState';
 import { useMessageInputState } from '../../states/MessageInputState';
 import BarrageInput from './BarrageInput.vue';
+import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
 import { ERROR_MESSAGE } from './constants';
 
 const emit = defineEmits<{
@@ -52,6 +61,8 @@ interface Props {
   maxLength?: number;
 }
 
+const { t } = useUIKit();
+
 const props = withDefaults(defineProps<Props>(), {
   containerClass: '',
   containerStyle: () => ({}),
@@ -63,6 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxLength: 80,
 });
 
+const placeholderText = computed(() => props.placeholder || t('Say something'));
 const { loginUserInfo } = useLoginState();
 const { audienceList } = useLiveAudienceState();
 
@@ -72,9 +84,9 @@ const disabled = computed(() => {
   return props.disabled || localUser?.isMessageDisabled;
 });
 
-const { t } = useUIKit();
-const { inputRawValue, setContent, sendMessage, blurEditor } = useMessageInputState();
+const { inputRawValue, setContent, sendMessage, blurEditor, focusEditor } = useMessageInputState();
 const isFocus = ref(false);
+const editorShow = ref(false);
 const isTouching = ref(false);
 
 const handleTouchStart = () => {
@@ -113,6 +125,12 @@ const handleBlur = () => {
   isFocus.value = false;
   emit('blur');
 };
+
+const handleShowEditor = async () => {
+  editorShow.value = true;
+  await nextTick();
+  focusEditor();
+}
 </script>
 
 <style lang="scss" scoped>
@@ -129,5 +147,33 @@ const handleBlur = () => {
     border-radius: 100px;
     border: 1px solid var(--stroke-color-primary)
   }
+
+  .placeholder-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--bg-color-operate);
+    overflow: auto;
+    box-sizing: border-box;
+    height: 36px;
+    max-height: 140px;
+    min-height: 36px;
+    padding: 2px 12px;
+    border-radius: 100px;
+    border: 1px solid var(--stroke-color-primary);
+    color: var(--text-color-secondary);
+    text-align: center;
+    line-height: 1.5;
+    font-size: 14px;
+    user-select: none;
+
+    .input-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-right: 12px;
+      flex-shrink: 0;
+    }
+  }
 }
 </style>

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.module.scss

@@ -13,6 +13,7 @@
     margin-bottom: 10px;
     background-color: var(--dropdown-color-default);
     box-shadow: 0 0 10px 0 var(--shadow-color);
+    user-select: none;
 
     &-item {
       display: flex;

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.vue

@@ -6,7 +6,7 @@
       </PopoverTrigger>
       <PopoverPortal>
         <PopoverContent side="top" align="center" :side-offset="8" style="box-sizing: border-box; z-index: 1000">
-          <div class="flex flex-col gap-2.5">
+          <div class="flex flex-col gap-2.5" tabindex="-1" style="outline: none;">
             <div :class="styles['emoji-picker__list']">
               <div
                 v-for="emojiKey in Object.keys(emojiUrlMap)"

package/src/components/BarrageInput/TextEditor/Editor.scss

@@ -1,6 +1,5 @@
 .tiptap.ProseMirror {
   height: 100%;
-  flex: 1 0 auto;
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
@@ -12,6 +11,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  flex: auto;
 
   &::-webkit-scrollbar {
     width: 6px;

package/src/components/BarrageInput/TextEditor/TextEditor.module.scss

@@ -33,6 +33,8 @@
   min-width: 0;
   overflow: auto;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .disabled-editor {

package/src/components/BarrageInput/TextEditor/TextEditor.vue

@@ -86,10 +86,16 @@ const createEditorInstance = (p: ITextEditorProps) => {
       },
       onFocus: () => {
         isFocused.value = true;
+        if (navigator && "virtualKeyboard" in navigator) {
+          (navigator?.virtualKeyboard as any)?.show()
+        }
         emit('focus');
       },
       onBlur: () => {
         isFocused.value = false;
+        if (navigator && "virtualKeyboard" in navigator) {
+          (navigator?.virtualKeyboard as any)?.hide()
+        }
         emit('blur');
       },
     });

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

@@ -2,19 +2,19 @@
 import { defineProps } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+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,11 +24,11 @@ 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) {
@@ -50,6 +50,6 @@ const renderText = () => {
 .group-tip-message {
   color: var(--text-color-secondary);
   text-align: center;
-  font-size: 14px;
+  font-size: 12px;
 }
 </style>

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

@@ -26,6 +26,7 @@
         :is="context.slots['user-badge']"
         :message="message"
       />
+      <span class="user-badge" v-if="message.from === currentLive?.liveOwner.userId && !context.slots['user-badge']">{{ t('Anchor') }}</span>
       <span
         class="text-message__content__nick"
         @click="handleNickClick"
@@ -62,11 +63,13 @@ import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { useScroll } from '../../../../hooks/useScroll';
 import { useBarrageListState } from '../../../../states/BarrageListState';
+import { useLiveState } from '../../../../states/LiveState';
 import { safeJSONParse } from '../../../../utils/json';
 import { useMessageListContext } from '../../MessageListContext';
 import type { ICloudCustomData } from '../../../../types/message';
 import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
+const { currentLive } = useLiveState();
 const context: {
   slots: Record<string, () => VueElement>;
   nickClick: (payload: { message: IMessageModel; event: MouseEvent }) => void;
@@ -217,6 +220,13 @@ const handleNickClick = (event: MouseEvent) => {
     word-spacing: 0.2em;
     letter-spacing: 0.1em;
 
+    .user-badge {
+      background-color: var(--uikit-color-theme-6);
+      border-radius: 12px;
+      padding: 0px 8px;
+      margin-right: 6px;
+    }
+
     &__nick {
       color: var(--uikit-color-theme-8);
       cursor: pointer;

package/src/components/BarrageList/i18n/en-US/index.ts

@@ -7,4 +7,5 @@ export const resource = {
   'Operation Successful': 'Operation successful',
   'Operation Failed': 'Operation failed',
   'This message contains risky content': 'This message contains risky content',
+  'Anchor': 'ANCHOR'
 };

package/src/components/BarrageList/i18n/zh-CN/index.ts

@@ -9,4 +9,5 @@ export const resource = {
   'Mute Success': '禁言成功',
   'Unmute Success': '解除禁言成功',
   'This message contains risky content': '该消息包含风险内容',
+  'Anchor': '主播',
 };

package/src/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue

@@ -39,6 +39,7 @@
 
     <!-- Transfer Group Owner Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowTransferDialog"
       :title="t('ChatSetting.transfer_group_owner')"
       :custom-classes="['user-picker-dialog']"
@@ -62,6 +63,7 @@
 
     <!-- Dismiss Group Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowDismissDialog"
       :title="t('ChatSetting.dismiss_group')"
       @close="() => isShowDismissDialog = false"
@@ -71,6 +73,7 @@
 
     <!-- Quit Group Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowQuitDialog"
       :title="t('ChatSetting.quit_group')"
       @close="() => isShowQuitDialog = false"
@@ -89,7 +92,7 @@ import { ref, computed } from 'vue';
 import { TUIButton, TUIDialog, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useGroupSettingState, GroupPermission } from '../../../../states/GroupSettingState';
 import { UserPicker } from '../../../UserPicker';
-import type { IUserPickerRef } from '../../../UserPicker';
+import type { UserPickerRef } from '../../../UserPicker';
 
 const { t } = useUIKit();
 
@@ -107,7 +110,7 @@ const isShowDismissDialog = ref(false);
 const isShowQuitDialog = ref(false);
 const loading = ref(false);
 
-const userPickerRef = ref<IUserPickerRef>();
+const userPickerRef = ref<UserPickerRef>();
 
 // Check permissions for different actions
 const canDismissGroup = computed(() => hasPermission(GroupPermission.DISMISS_GROUP));

package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue

@@ -11,7 +11,7 @@ import { GroupManagement } from './GroupManagement';
 import { GroupManagementEntry } from './GroupManagementEntry';
 import { GroupMembers } from './GroupMembers';
 import { PersonalSettings } from './PersonalSettings';
-import type { IUserPickerRow, IUserPickerRef } from '../../UserPicker';
+import type { UserPickerRow, UserPickerRef } from '../../UserPicker';
 
 enum ViewMode {
   MAIN = 'main',
@@ -42,11 +42,11 @@ const loading = ref(false);
 const hasMore = ref(true);
 const currentView = ref<ViewMode>(ViewMode.MAIN);
 const isShowUserPickerDialog = ref(false);
-const memberDataSource = ref<IUserPickerRow[]>([]);
-const userPickerLockedItems = ref<IUserPickerRow[]>([]);
+const memberDataSource = ref<UserPickerRow[]>([]);
+const userPickerLockedItems = ref<UserPickerRow[]>([]);
 const memberActionType = ref<'remove' | 'add' | null>(null);
 
-const userPickerRef = ref<IUserPickerRef>();
+const userPickerRef = ref<UserPickerRef>();
 
 // Initialize member list when component mounts
 onMounted(() => {
@@ -260,6 +260,7 @@ const userPickerDialogTitle = computed(() => {
       <PersonalSettings />
       <GroupActions />
       <TUIDialog
+        appendTo="body"
         :visible="isShowUserPickerDialog"
         :title="userPickerDialogTitle"
         :custom-classes="['user-picker-dialog']"

package/src/components/ChatSetting/GroupChatSetting/GroupInfo/GroupInfo.vue

@@ -51,7 +51,7 @@ const validateGroupName = (value: string, originalValue?: string) => {
   if (value.length === 0) {
     return t('ChatSetting.group_name_required');
   }
-  if (value.length > 25) {
+  if (value.length > 30) {
     return t('ChatSetting.group_name_max_length');
   }
   if (value === (originalValue || '')) {
@@ -65,7 +65,7 @@ const validateNotification = (value: string, originalValue?: string) => {
   if (typeof value !== 'string') {
     return t('ChatSetting.group_notification_required_string');
   }
-  if (value.length > 100) {
+  if (value.length > 130) {
     return t('ChatSetting.group_notification_max_length');
   }
   if (value === (originalValue || '')) {

package/src/components/ChatSetting/GroupChatSetting/GroupManagement/GroupManagement.vue

@@ -63,6 +63,7 @@
 
     <!-- User Picker Dialog -->
     <TUIDialog
+      appendTo="body"
       :custom-classes="['user-picker-dialog']"
       :visible="isShowUserPickerDialog"
       :title="userPickerTitle"
@@ -92,7 +93,7 @@ import {
 import { UserPicker } from '../../../UserPicker';
 import { SettingItem } from '../../SettingItem';
 import { GroupMembers } from '../GroupMembers';
-import type { IUserPickerRow, IUserPickerRef } from '../../../UserPicker';
+import type { UserPickerRow, UserPickerRef } from '../../../UserPicker';
 
 const emit = defineEmits<{
   back: [];
@@ -119,7 +120,7 @@ const isShowUserPickerDialog = ref(false);
 const userPickerTitle = ref('');
 const userPickerLockedItems = ref<any[]>([]);
 
-const userPickerRef = ref<IUserPickerRef>();
+const userPickerRef = ref<UserPickerRef>();
 const memberActionRef = ref<'promote_admin' | 'demote_admin' | 'mute' | 'unmute' | null>(null);
 
 // Filter muted members