diff --git a/packages/tuikit-atomicx-vue3/package.json b/packages/tuikit-atomicx-vue3/package.json
index 02ff5bb..1867972 100644
--- a/packages/tuikit-atomicx-vue3/package.json
+++ b/packages/tuikit-atomicx-vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "6.2.2",
+  "version": "6.2.6",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -40,7 +40,7 @@
     "@tencentcloud/lite-chat": "^1.6.15",
     "@tencentcloud/chat-uikit-engine-lite": "~1.0.7",
     "@tencentcloud/tui-core-lite": "~1.0.1",
-    "@tencentcloud/tuiroom-engine-js": "~4.1.2-beta.2",
+    "@tencentcloud/tuiroom-engine-js": "~4.1.2-beta.4",
     "@tencentcloud/uikit-base-component-vue3": "~1.4.4",
     "vue": "^3.4.0"
   },
diff --git a/packages/tuikit-atomicx-vue3/src/components/BarrageInput/constants.ts b/packages/tuikit-atomicx-vue3/src/components/BarrageInput/constants.ts
index 5666389..25b0503 100644
--- a/packages/tuikit-atomicx-vue3/src/components/BarrageInput/constants.ts
+++ b/packages/tuikit-atomicx-vue3/src/components/BarrageInput/constants.ts
@@ -1,3 +1,12 @@
 export const ERROR_MESSAGE = {
   10017: 'BarrageInput.youHaveBeenMuted',
+  // Server-side moderation rejected the message because the text contains
+  // sensitive content (e.g. forbidden keywords). Surfaced as a TUIToast
+  // error in BarrageInput / TextEditor so the user knows the message was
+  // not delivered to the room.
+  80001: 'BarrageInput.sensitiveContent',
+  // Server-side moderation rejected the message because attached media
+  // (image / audio / video) contains sensitive content. Distinct from
+  // 80001 (text) so the toast can tell the user which part was rejected.
+  80004: 'BarrageInput.sensitiveMediaContent',
 };
diff --git a/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/en-US/index.ts b/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/en-US/index.ts
index a1983b4..0427207 100644
--- a/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/en-US/index.ts
+++ b/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/en-US/index.ts
@@ -3,4 +3,6 @@ export const resource = {
   'BarrageInput.youHaveBeenMuted': 'You have been muted',
   'BarrageInput.Send': 'Send',
   'BarrageInput.sendFailed': 'Send failed',
+  'BarrageInput.sensitiveContent': 'The message contains sensitive content and cannot be sent.',
+  'BarrageInput.sensitiveMediaContent': 'Images, audio, video or other media in the message contain sensitive content and cannot be sent.',
 };
diff --git a/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/zh-CN/index.ts b/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/zh-CN/index.ts
index 43e3d2a..e401381 100644
--- a/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/zh-CN/index.ts
+++ b/packages/tuikit-atomicx-vue3/src/components/BarrageInput/i18n/zh-CN/index.ts
@@ -3,4 +3,6 @@ export const resource = {
   'BarrageInput.youHaveBeenMuted': '您已被禁言',
   'BarrageInput.Send': '发送',
   'BarrageInput.sendFailed': '发送失败',
+  'BarrageInput.sensitiveContent': '消息或者资料中文本存在敏感内容，禁止下发。',
+  'BarrageInput.sensitiveMediaContent': '消息中图片、音频、视频等文件存在敏感内容，禁止下发。',
 };
diff --git a/packages/tuikit-atomicx-vue3/src/components/LiveGift/LiveGiftPC/LiveGift.vue b/packages/tuikit-atomicx-vue3/src/components/LiveGift/LiveGiftPC/LiveGift.vue
index d60bd6c..ece6510 100644
--- a/packages/tuikit-atomicx-vue3/src/components/LiveGift/LiveGiftPC/LiveGift.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/LiveGift/LiveGiftPC/LiveGift.vue
@@ -266,6 +266,11 @@ onUnmounted(() => {
     border-radius: 50%;
     background: var(--gift-more-button-color);
     cursor: pointer;
+    // The "More gifts" round button always uses a colored fill, so its inner
+    // icon (IconGift) must stay white regardless of light/dark theme to keep
+    // sufficient contrast. The icon renders with `fill: currentColor`, so we
+    // pin `color` on the wrapper instead of touching the icon component.
+    color: #fff;
   }
 
   span {
diff --git a/packages/tuikit-atomicx-vue3/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue b/packages/tuikit-atomicx-vue3/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue
index 36dbeb4..05e7fc0 100644
--- a/packages/tuikit-atomicx-vue3/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue
@@ -8,7 +8,11 @@
       :key="`seat-${index}`"
       :style="item.region"
     >
-      <div class="battle-decorate" v-if="getBattleLevel(item.userInfo.userId) > 0">
+      <div
+        class="battle-decorate"
+        v-if="getBattleLevel(item.userInfo.userId) > 0"
+        :style="{ '--widget-scale': getSeatScale(item.region) }"
+      >
         <span class="battle-score-value" v-if="!battleScore?.has(item.userInfo.userId)">{{ t('LiveView.Connecting') }}</span>
         <template v-else>
           <div class="battle-badge-container" :class="getBattleLevel(item.userInfo.userId) === 1 ? 'top-badge' : 'ordinary-badge'">
@@ -31,6 +35,7 @@ import { ref, computed, watch } from 'vue';
 import BattleTopBadge from '../assets/svg/BattleTopBadge.svg';
 import BattleOrdinaryBadge from '../assets/svg/BattleOrdinaryBadge.svg';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { getWidgetScale } from '../useWidgetScale';
 
 const { t } = useUIKit();
 
@@ -65,17 +70,18 @@ function getBattleLevel(userId: string) {
   return currentBattleScoreList.value.indexOf(battleScore.value.get(userId) || 0) + 1;
 };
 
-let battleTimer: NodeJS.Timeout | null = null;
-watch(() => currentBattleInfo.value?.battleId, (newVal) => {
-  if(newVal !== null && newVal !== undefined) {
-    isInBattle.value = true;
-  } else {
-    if(battleTimer) return;
-    battleTimer = setTimeout(() => {
-      isInBattle.value = false;
-    }, 5000);
-  }
-}, { immediate: true });
+// Lower bound for the PK badge scale. Higher than the text floor (0.5) so the
+// badge graphics / score stay clear instead of collapsing on tiny seats.
+const BADGE_WIDGET_MIN_SCALE = 0.6;
+
+// Per-seat scale derived from the region size provided by the parent layout,
+// so the PK badge shrinks proportionally on small seats.
+function getSeatScale(region: { width: string; height: string }) {
+  return getWidgetScale(
+    { width: parseInt(region.width), height: parseInt(region.height) },
+    { min: BADGE_WIDGET_MIN_SCALE },
+  );
+}
 
 </script>
 
@@ -103,6 +109,8 @@ watch(() => currentBattleInfo.value?.battleId, (newVal) => {
     background-color: rgba(15, 16, 20, 0.4);
     border-radius: 24px;
     color: var(--text-color-primary);
+    transform: scale(var(--widget-scale, 1));
+    transform-origin: top left;
     .battle-badge-container {
       display: flex;
       align-items: center;
diff --git a/packages/tuikit-atomicx-vue3/src/components/LiveView/DefaultStreamViewUI.vue b/packages/tuikit-atomicx-vue3/src/components/LiveView/DefaultStreamViewUI.vue
index f610752..2f7231a 100644
--- a/packages/tuikit-atomicx-vue3/src/components/LiveView/DefaultStreamViewUI.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/LiveView/DefaultStreamViewUI.vue
@@ -14,7 +14,11 @@
           :src="userInfo?.avatarUrl"
         />
       </div>
-      <div v-if="seatListWithUser.length > 1" class="user-details">
+      <div
+        v-if="seatListWithUser.length > 1"
+        class="user-details"
+        :style="{ '--widget-scale': widgetScale }"
+      >
         <AudioIcon
           v-if="!isAudioAvailable"
           class="audio-icon"
@@ -31,7 +35,7 @@
       class="empty-position"
       :class="{ 'clickable': !isAnchor }"
     >
-      <div class="seat-display">
+      <div class="seat-display" :style="{ '--widget-scale': widgetScale }">
         <IconPlus v-if="!isAnchor" />
         <span v-else class="seat-index">{{ props.seatIndex }}</span>
         <span class="text">{{ isAnchor ? t('LiveView.WaitingForConnection') : t('LiveView.ApplyForConnection') }}</span>
@@ -49,6 +53,7 @@ import { useLiveSeatState } from '../../states/LiveSeatState';
 import { useLoginState } from '../../states/LoginState';
 import { DeviceStatus } from '../../types';
 import { Avatar } from '../Avatar';
+import { useWidgetScale } from './useWidgetScale';
 import type { SeatUserInfo } from '../../types';
 
 interface Props {
@@ -82,7 +87,10 @@ const isAnchor = computed(() => {
 const seatListWithUser = computed(() => seatList.value.filter(item => item.userInfo && item.userInfo.userId !== ''));
 
 const currentStreamViewSize = computed(() => {
-  const currentStreamViewInfo = props.streamViewInfoList.find(item => item.userInfo?.userId === props.userInfo?.userId);
+  // Match by userId when occupied; fall back to the positional region
+  // (seatIndex - 1) so empty seats can still derive their size for scaling.
+  const currentStreamViewInfo = props.streamViewInfoList.find(item => item.userInfo?.userId === props.userInfo?.userId)
+    ?? props.streamViewInfoList[props.seatIndex - 1];
   if (!currentStreamViewInfo) {
     return { width: 0, height: 0 };
   }
@@ -101,6 +109,15 @@ const avatarSize = computed(() => {
   return defaultAvatarSize;
 });
 
+// Lower bound for the text-overlay scale. Smaller than the badge floor (0.6)
+// because wrapped captions stay readable even when shrunk further.
+const TEXT_WIDGET_MIN_SCALE = 0.5;
+
+// Uniform scale for overlay widgets so they shrink proportionally on small
+// seats. Text always stays visible (wrapping instead of being clipped),
+// honoring the goal of keeping captions fully readable.
+const widgetScale = useWidgetScale(currentStreamViewSize, { min: TEXT_WIDGET_MIN_SCALE });
+
 const needCanvasMaskList = computed(() => {
   const currentStreamViewInfo = props.streamViewInfoList.find(item => item.userInfo?.userId === props.userInfo?.userId);
   if (!currentStreamViewInfo) {
@@ -232,6 +249,8 @@ const isVideoAvailable = computed(() => props.userInfo?.cameraStatus === DeviceS
     border-radius: 100px;
     max-width: 80%;
     box-sizing: border-box;
+    transform: scale(var(--widget-scale, 1));
+    transform-origin: bottom left;
 
     .audio-icon {
       zoom: 0.6;
@@ -241,9 +260,13 @@ const isVideoAvailable = computed(() => props.userInfo?.cameraStatus === DeviceS
       font-size: 12px;
       font-weight: 500;
       margin-left: 2px;
-      white-space: nowrap;
+      // Allow up to two lines so longer names stay mostly readable, while
+      // still capping growth to avoid an ever-taller pill covering the video.
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
       overflow: hidden;
-      text-overflow: ellipsis;
+      word-break: break-word;
     }
   }
 
@@ -270,9 +293,11 @@ const isVideoAvailable = computed(() => props.userInfo?.cameraStatus === DeviceS
     .text {
       font-size: 14px;
       max-width: 80%;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
+      // Wrap freely instead of clipping: the empty seat lays out vertically
+      // and has spare height, so the full prompt stays readable on small seats.
+      white-space: normal;
+      word-break: break-word;
+      text-align: center;
       color: var(--text-color-primary);
       font-weight: 400;
     }
@@ -284,6 +309,8 @@ const isVideoAvailable = computed(() => props.userInfo?.cameraStatus === DeviceS
       color: var(--text-color-primary);
       align-items: center;
       gap: 12px;
+      transform: scale(var(--widget-scale, 1));
+      transform-origin: center center;
     }
 
     .seat-index {
diff --git a/packages/tuikit-atomicx-vue3/src/components/LiveView/useWidgetScale.ts b/packages/tuikit-atomicx-vue3/src/components/LiveView/useWidgetScale.ts
new file mode 100644
index 0000000..5ab7d77
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/LiveView/useWidgetScale.ts
@@ -0,0 +1,38 @@
+import { computed, type Ref } from 'vue';
+
+// Default reference seat short side (px) at which the scale equals 1. Seats
+// whose short side is >= this stay 1:1; smaller seats shrink proportionally.
+// Tuned to the widgets' actual footprint so reasonably sized seats are not
+// scaled down unnecessarily.
+const DEFAULT_WIDGET_SCALE_BASE = 120;
+
+export interface WidgetScaleOptions {
+  // Reference seat short side (px) at which the scale equals 1.
+  base?: number;
+  // Lower bound to keep widgets readable on tiny seats.
+  min?: number;
+}
+
+// Derive a uniform scale factor from a seat size so overlay widgets shrink
+// proportionally on small seats instead of being clipped by ellipsis or
+// overflowing the seat region. Returns 1 when the size is unknown.
+export function useWidgetScale(
+  size: Ref<{ width: number; height: number }>,
+  options: WidgetScaleOptions = {},
+) {
+  return computed(() => getWidgetScale(size.value, options));
+}
+
+// Imperative variant for cases where the size comes from a v-for item rather
+// than a reactive ref (e.g. per-seat regions provided by the parent layout).
+export function getWidgetScale(
+  size: { width: number; height: number },
+  options: WidgetScaleOptions = {},
+) {
+  const { base = DEFAULT_WIDGET_SCALE_BASE, min = 0.6 } = options;
+  const minSide = Math.min(size.width, size.height);
+  if (!minSide || Number.isNaN(minSide)) {
+    return 1;
+  }
+  return Math.max(min, Math.min(1, minSide / base));
+}
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/AudioCallPicker/AudioCallPicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInput/AudioCallPicker/AudioCallPicker.vue
index f1cc772..d47b36b 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/AudioCallPicker/AudioCallPicker.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/AudioCallPicker/AudioCallPicker.vue
@@ -1,16 +1,17 @@
 <template>
   <View>
-    <div
-      :class="cs(styles['audio-call-picker__button'], {
-        [styles['disabled']]: props.disabled,
-      })"
-      @click="handleAudioCallClick"
-    >
+    <div @click="handleAudioCallClick">
       <slot>
-        <IconCall1
-          :size="props.iconSize"
-          :class="styles['audio-call-picker__icon']"
-        />
+        <div
+          :class="cs(styles['audio-call-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconCall1
+            :size="props.iconSize"
+            :class="styles['audio-call-picker__icon']"
+          />
+        </div>
       </slot>
     </div>
 
@@ -18,23 +19,32 @@
       :visible="isGroupCallDialogVisible"
       :title="t('MessageInput.select_call_members')"
       :cancelText="t('MessageInput.cancel')"
-      :cancel="handleCloseGroupCallDialog"
+      :cancel="handleCancelGroupCallDialog"
       :close="handleCloseGroupCallDialog"
       :confirmText="t('MessageInput.initiate_call')"
       :confirm="handleConfirmGroupCall"
+      :confirmDisabled="groupCallSelectedCount === 0"
       :customClasses="['group-call-dialog']"
       appendTo="body"
     >
-      <UserPicker
-        ref="groupMemberPickerRef"
-        display-mode="list"
-        :data-source="groupMemberOptions"
-        :max-count="MAX_GROUP_CALL_MEMBERS"
-        :min-count="MIN_GROUP_CALL_MEMBERS"
-        class="group-member-picker"
-        style="width: 100%;"
-        @reach-end="handleLoadMoreGroupMembers"
-      />
+      <div
+        class="group-call-dialog-body"
+        @click.stop
+        @mousedown.stop
+        @touchstart.stop
+      >
+        <UserPicker
+          ref="groupMemberPickerRef"
+          display-mode="list"
+          :data-source="groupMemberOptions"
+          :max-count="MAX_GROUP_CALL_MEMBERS"
+          :min-count="MIN_GROUP_CALL_MEMBERS"
+          class="group-member-picker"
+          style="width: 100%;"
+          :on-selected-change="handleGroupCallSelectedChange"
+          @reach-end="handleLoadMoreGroupMembers"
+        />
+      </div>
     </TUIDialog>
   </View>
 </template>
@@ -42,7 +52,6 @@
 <script setup lang="ts">
 import { computed, ref, useCssModule, inject } from 'vue';
 import { ConversationType } from '@atomicxcore/core';
-import { useChatContext, useLoginStore } from '../../../chat-store';
 import {
   IconCall1,
   TUIDialog,
@@ -50,9 +59,11 @@ import {
 } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { View } from '../../../baseComp/View';
+import { useChatContext, LoginStore } from '../../../chat-store';
 import { startCall } from '../../../utils/call';
 import { handleChatErrorWithModal } from '../../UIKitModal/chatErrorModal';
 import { UserPicker } from '../../UserPicker';
+import type { UserPickerResult } from '../../UserPicker';
 
 interface AudioCallPickerProps {
   label?: string;
@@ -80,10 +91,11 @@ const {
   loadMembers,
   loadMoreMembers,
 } = useChatContext(channel);
-const { loginUserInfo } = useLoginStore();
+const { loginUserInfo } = LoginStore();
 
 const isGroupCallDialogVisible = ref(false);
 const groupMemberPickerRef = ref();
+const groupCallSelectedCount = ref(0);
 
 const isC2CConversation = computed(() =>
   activeConversation.value?.type === ConversationType.C2C,
@@ -137,10 +149,17 @@ function loadMoreGroupMembers(): void {
 
 function showGroupCallDialog(): void {
   loadMembers();
+  groupCallSelectedCount.value = 0;
   isGroupCallDialogVisible.value = true;
 }
 
 function handleCloseGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = false;
+}
+
+function handleCancelGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
   isGroupCallDialogVisible.value = false;
 }
 
@@ -167,6 +186,7 @@ function initiateGroupCall(): void {
       type: AUDIO_CALL_TYPE,
     });
 
+    groupCallSelectedCount.value = 0;
     handleCloseGroupCallDialog();
   } catch (error) {
     handleChatErrorWithModal(error as unknown as any);
@@ -190,6 +210,10 @@ const handleLoadMoreGroupMembers = () => {
   loadMoreGroupMembers();
 };
 
+const handleGroupCallSelectedChange = (selectedItems: UserPickerResult) => {
+  groupCallSelectedCount.value = selectedItems.length;
+};
+
 const handleConfirmGroupCall = () => initiateGroupCall();
 
 </script>
@@ -230,12 +254,32 @@ const handleConfirmGroupCall = () => initiateGroupCall();
 
 <style>
 .group-call-dialog {
+  width: calc(100vw - 32px);
+  max-width: 500px;
   background: var(--bg-color-operate);
   border-radius: 8px;
-  max-width: 500px;
   max-height: 70vh;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
+
+.group-call-dialog,
+.group-call-dialog * {
+  box-sizing: border-box;
+}
+
+.group-call-dialog .group-member-picker {
+  width: 100%;
+  min-width: 0;
+}
+
+.group-call-dialog .group-call-dialog-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
 </style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.module.scss b/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.module.scss
index e189cdf..6f5a6a6 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.module.scss
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.module.scss
@@ -1,5 +1,6 @@
 .quoted__message__preview {
   display: flex;
+  flex: 0 0 auto;
   flex-direction: row;
   height: 48px;
   align-items: stretch;
@@ -7,6 +8,7 @@
   animation: slide-in 0.2s ease-out;
   transform-origin: top;
   overflow: hidden;
+  padding: 4px;
 
   &__body {
     flex: 1 1 auto;
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue
index 6946bec..a2c36e3 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue
@@ -27,12 +27,12 @@
 
 <script setup lang="ts">
 import { inject, watch, onUnmounted } from 'vue';
-import { useUIKit, IconClose } from '@tencentcloud/uikit-base-component-vue3';
 import { MessageType } from '@atomicxcore/core';
-import type { MessageInfo } from '@atomicxcore/core';
+import { useUIKit, IconClose } from '@tencentcloud/uikit-base-component-vue3';
 import { useChatUIState } from '../../../context/useChatUIState';
 import { transformTextWithEmojiKeyToName } from '../../../utils';
 import styles from './QuotedMessagePreview.module.scss';
+import type { MessageInfo } from '@atomicxcore/core';
 
 const { t } = useUIKit();
 const channel = inject('channel', 'default') as string;
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/TextEditor/TextEditor.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInput/TextEditor/TextEditor.vue
index 8100d6a..fecc90e 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/TextEditor/TextEditor.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/TextEditor/TextEditor.vue
@@ -67,25 +67,27 @@ const activeConversationIDSnapshot = ref<string | undefined>(undefined);
 
 const computedPlaceholder = computed(() => props.placeholder ?? t('MessageInput.enter_a_message'));
 
+function getSendErrorMessage(error: unknown): string {
+  const errorCode = (error as { code?: number })?.code;
+  switch (errorCode) {
+    case 10007:
+      return t('MessageInput.you_are_not_in_group');
+    case 20009:
+      return t('MessageInput.you_are_not_friend');
+    default:
+      return t('MessageInput.send_failed');
+  }
+}
+
 // onEnterCallback is assigned after editor creation to avoid TDZ issues with const editor
 let onEnterCallback: () => Promise<void> = async () => {};
 const handleEnter = async () => {
   try {
     await onEnterCallback();
   } catch (error) {
-    const errorCode = (error as { code?: number })?.code;
-    switch (errorCode) {
-      case 10007:
-        TUIToast.error({
-          message: '你不在群里',
-        });
-        break;
-      default:
-        TUIToast.error({
-          message: '发送失败',
-        });
-        break;
-    }
+    TUIToast.error({
+      message: getSendErrorMessage(error),
+    });
   }
 };
 
@@ -130,6 +132,13 @@ onEnterCallback = async () => {
   const savedQuotedMessage = quotedMessage.value;
   const sendingConversationID = activeConversation.value?.conversationID;
 
+  isProgrammaticUpdate.value = true;
+  try {
+    setInputContent('');
+  } finally {
+    isProgrammaticUpdate.value = false;
+  }
+
   const textBuffer: string[] = [];
   const atUserList: string[] = [];
 
@@ -183,12 +192,6 @@ onEnterCallback = async () => {
   }
   await flushText();
   await leaveTyping().catch(() => {});
-  isProgrammaticUpdate.value = true;
-  try {
-    setInputContent('');
-  } finally {
-    isProgrammaticUpdate.value = false;
-  }
   if (savedQuotedMessage) {
     clearQuotedMessage();
   }
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/VideoCallPicker/VideoCallPicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInput/VideoCallPicker/VideoCallPicker.vue
index f8f2b18..03a9eff 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/VideoCallPicker/VideoCallPicker.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/VideoCallPicker/VideoCallPicker.vue
@@ -1,16 +1,17 @@
 <template>
   <View>
-    <div
-      :class="cs(styles['video-call-picker__button'], {
-        [styles['disabled']]: props.disabled,
-      })"
-      @click="handleVideoCallClick"
-    >
+    <div @click="handleVideoCallClick">
       <slot>
-        <IconVideoDefault
-          :size="props.iconSize"
-          :class="styles['video-call-picker__icon']"
-        />
+        <div
+          :class="cs(styles['video-call-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconVideoDefault
+            :size="props.iconSize"
+            :class="styles['video-call-picker__icon']"
+          />
+        </div>
       </slot>
     </div>
 
@@ -18,23 +19,32 @@
       :visible="isGroupCallDialogVisible"
       :title="t('MessageInput.select_call_members')"
       :cancelText="t('MessageInput.cancel')"
-      :cancel="handleCloseGroupCallDialog"
+      :cancel="handleCancelGroupCallDialog"
       :close="handleCloseGroupCallDialog"
       :confirmText="t('MessageInput.initiate_call')"
       :confirm="handleConfirmGroupCall"
+      :confirmDisabled="groupCallSelectedCount === 0"
       :customClasses="['group-call-dialog']"
       appendTo="body"
     >
-      <UserPicker
-        ref="groupMemberPickerRef"
-        display-mode="list"
-        :data-source="groupMemberOptions"
-        :max-count="MAX_GROUP_CALL_MEMBERS"
-        :min-count="MIN_GROUP_CALL_MEMBERS"
-        class="group-member-picker"
-        style="width: 100%;"
-        @reach-end="handleLoadMoreGroupMembers"
-      />
+      <div
+        class="group-call-dialog-body"
+        @click.stop
+        @mousedown.stop
+        @touchstart.stop
+      >
+        <UserPicker
+          ref="groupMemberPickerRef"
+          display-mode="list"
+          :data-source="groupMemberOptions"
+          :max-count="MAX_GROUP_CALL_MEMBERS"
+          :min-count="MIN_GROUP_CALL_MEMBERS"
+          class="group-member-picker"
+          style="width: 100%;"
+          :on-selected-change="handleGroupCallSelectedChange"
+          @reach-end="handleLoadMoreGroupMembers"
+        />
+      </div>
     </TUIDialog>
   </View>
 </template>
@@ -53,6 +63,7 @@ import { View } from '../../../baseComp/View';
 import { startCall } from '../../../utils/call';
 import { handleChatErrorWithModal } from '../../UIKitModal/chatErrorModal';
 import { UserPicker } from '../../UserPicker';
+import type { UserPickerResult } from '../../UserPicker';
 
 interface VideoCallPickerProps {
   label?: string;
@@ -84,6 +95,7 @@ const { loginUserInfo } = useLoginStore();
 
 const isGroupCallDialogVisible = ref(false);
 const groupMemberPickerRef = ref();
+const groupCallSelectedCount = ref(0);
 
 const isPrivateConversation = computed(() =>
   activeConversation.value?.type === ConversationType.C2C,
@@ -137,10 +149,17 @@ function loadMoreGroupMembers(): void {
 
 function showGroupCallDialog(): void {
   loadMembers();
+  groupCallSelectedCount.value = 0;
   isGroupCallDialogVisible.value = true;
 }
 
 function handleCloseGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = false;
+}
+
+function handleCancelGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
   isGroupCallDialogVisible.value = false;
 }
 
@@ -167,6 +186,7 @@ function initiateGroupCall(): void {
       type: VIDEO_CALL_TYPE,
     });
 
+    groupCallSelectedCount.value = 0;
     handleCloseGroupCallDialog();
   } catch (error) {
     handleChatErrorWithModal(error as unknown as any);
@@ -190,6 +210,10 @@ const handleLoadMoreGroupMembers = () => {
   loadMoreGroupMembers();
 };
 
+const handleGroupCallSelectedChange = (selectedItems: UserPickerResult) => {
+  groupCallSelectedCount.value = selectedItems.length;
+};
+
 const handleConfirmGroupCall = () => initiateGroupCall();
 </script>
 
@@ -229,12 +253,32 @@ const handleConfirmGroupCall = () => initiateGroupCall();
 
 <style>
 .group-call-dialog {
+  width: calc(100vw - 32px);
+  max-width: 500px;
   background: var(--bg-color-operate);
   border-radius: 8px;
-  max-width: 500px;
   max-height: 70vh;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
+
+.group-call-dialog,
+.group-call-dialog * {
+  box-sizing: border-box;
+}
+
+.group-call-dialog .group-member-picker {
+  width: 100%;
+  min-width: 0;
+}
+
+.group-call-dialog .group-call-dialog-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
 </style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/en-US.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/en-US.ts
index 6b061f9..8722f76 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/en-US.ts
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/en-US.ts
@@ -3,12 +3,15 @@ const MessageInput = {
   image: 'Image',
   video: 'Video',
   audio: 'Audio',
+  audio_call: 'Audio call',
+  video_call: 'Video call',
   location: 'Location',
   custom_message: 'Custom Message',
   unknown: 'Unknown',
   enter_a_message: 'Enter a message',
   send: 'Send',
   select_call_members: 'Select call members',
+  select_mention_members: 'Select members to mention',
   cancel: 'Cancel',
   confirm: 'Confirm',
   initiate_call: 'Initiate call',
@@ -16,6 +19,9 @@ const MessageInput = {
   no_matching_members: 'No matching members',
   at_all_members: 'All members',
   invalid_image_type: 'Invalid image type',
+  send_failed: 'Failed to send',
+  you_are_not_in_group: 'You are not in the group',
+  you_are_not_friend: 'You are not friends',
 };
 
 const OfflinePush = {
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/zh-CN.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/zh-CN.ts
index ea21037..8cf6529 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/zh-CN.ts
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/i18n/zh-CN.ts
@@ -3,12 +3,15 @@ const MessageInput = {
   image: '图片',
   video: '视频',
   audio: '音频',
+  audio_call: '语音通话',
+  video_call: '视频通话',
   location: '位置',
   custom_message: '自定义消息',
   unknown: '未知',
   enter_a_message: '输入消息',
   send: '发送',
   select_call_members: '选择成员',
+  select_mention_members: '选择 @ 的成员',
   cancel: '取消',
   confirm: '确认',
   initiate_call: '发起通话',
@@ -16,6 +19,9 @@ const MessageInput = {
   no_matching_members: '暂无匹配成员',
   at_all_members: '所有人',
   invalid_image_type: '无效的图片类型',
+  send_failed: '发送失败',
+  you_are_not_in_group: '你不在群里',
+  you_are_not_friend: '对方不是你的好友',
 };
 
 const OfflinePush = {
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInput/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInput/index.ts
index d1aaf50..ad8820b 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageInput/index.ts
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInput/index.ts
@@ -9,7 +9,7 @@ import { AudioCallPicker as AudioCallPickerComponent } from './AudioCallPicker';
 import { EmojiPicker as EmojiPickerComponent } from './EmojiPicker';
 import { resources } from './i18n';
 import MessageInputComponent from './MessageInput.vue';
-import MessageInputH5Component from './MessageInputH5.vue';
+import MessageInputH5ComponentLegacy from './MessageInputH5.vue';
 import { QuickConferencePicker as QuickConferencePickerComponent } from './QuickConferencePicker';
 import { TextEditor as TextEditorComponent } from './TextEditor';
 import { VideoCallPicker as VideoCallPickerComponent } from './VideoCallPicker';
@@ -26,7 +26,7 @@ addI18n('zh-CN', { translation: {
 } });
 
 const MessageInput = MessageInputComponent;
-const MessageInputH5 = MessageInputH5Component;
+const MessageInputH5Legacy = MessageInputH5ComponentLegacy;
 const EmojiPicker = EmojiPickerComponent;
 const FilePicker = FilePickerComponent;
 const ImagePicker = ImagePickerComponent;
@@ -45,7 +45,7 @@ export {
   EmojiPicker,
   TextEditor,
   MessageInput,
-  MessageInputH5,
+  MessageInputH5Legacy,
   AudioCallPicker,
   VideoCallPicker,
   QuickConferencePicker,
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/AttachmentPicker.module.scss b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/AttachmentPicker.module.scss
new file mode 100644
index 0000000..e8aed5e
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/AttachmentPicker.module.scss
@@ -0,0 +1,58 @@
+.attachment-picker {
+  flex: 0 0 auto;
+  align-items: center;
+
+  &__icon {
+    cursor: pointer;
+    display: flex;
+  }
+
+  &__popup {
+    flex-direction: column;
+    display: flex;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 6px;
+    padding: 4px 0;
+    background-color: var(--bg-color-operate);
+    box-shadow: 0 0 10px 0 var(--shadow-color);
+  }
+
+  &--expanded {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+
+    .attachment-picker__item {
+      padding: 4px;
+    }
+  }
+
+  &__item {
+    outline: none !important;
+    border: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px 13px;
+    cursor: pointer;
+    gap: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    color: var(--text-color-primary);
+    background-color: var(--dropdown-color-default);
+
+    &:hover {
+      background-color: var(--dropdown-color-hover);
+    }
+
+    &:hover {
+      background-color: var(--dropdown-color-active);
+    }
+
+    &-icon {
+      cursor: pointer;
+    }
+  }
+}
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/AttachmentPicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/AttachmentPicker.vue
new file mode 100644
index 0000000..b77803d
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/AttachmentPicker.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :class="[styles['attachment-picker']]">
+    <template v-if="isCollapsed">
+      <PopoverRoot>
+        <PopoverTrigger as="div">
+          <slot>
+            <IconPlus
+              :class="styles['attachment-picker__icon']"
+              size="20"
+            />
+          </slot>
+        </PopoverTrigger>
+        <PopoverPortal>
+          <PopoverContent
+            side="top"
+            align="start"
+            :side-offset="5"
+          >
+            <div :class="styles['attachment-picker__popup']">
+              <component
+                :is="picker.Component"
+                v-for="(picker, index) in pickerItems"
+                :key="index"
+                v-bind="picker.props"
+              />
+            </div>
+          </PopoverContent>
+        </PopoverPortal>
+      </PopoverRoot>
+    </template>
+    <template v-else>
+      <div :class="styles['attachment-picker--expanded']">
+        <component
+          :is="picker.Component"
+          v-for="(picker, index) in pickerItems"
+          :key="index"
+          v-bind="picker.props"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUIKit, IconPlus } from '@tencentcloud/uikit-base-component-vue3';
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import styles from './AttachmentPicker.module.scss';
+import FilePicker from './FilePicker.vue';
+import ImagePicker from './ImagePicker.vue';
+import VideoPicker from './VideoPicker.vue';
+
+interface Props {
+  attachmentPickerMode?: 'collapsed' | 'expanded';
+}
+
+const ICON_SIZE = {
+  COLLAPSED: 18,
+  EXPANDED: 24,
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  attachmentPickerMode: 'collapsed',
+});
+
+const { t } = useUIKit();
+const isCollapsed = computed(() => props.attachmentPickerMode === 'collapsed');
+
+const pickerItems = computed(() => [
+  { type: 'file', Component: FilePicker },
+  { type: 'image', Component: ImagePicker },
+  { type: 'video', Component: VideoPicker },
+].map(({ type, Component }) => ({
+  Component,
+  props: {
+    label: isCollapsed.value ? t(`MessageInput.${type}`) : '',
+    iconSize: isCollapsed.value ? ICON_SIZE.COLLAPSED : ICON_SIZE.EXPANDED,
+  },
+})));
+</script>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/FilePicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/FilePicker.vue
new file mode 100644
index 0000000..09dc926
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/FilePicker.vue
@@ -0,0 +1,109 @@
+<template>
+  <View>
+    <div @click="handleButtonClick">
+      <slot>
+        <div
+          :class="cs(styles['file-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconFile
+            :size="props.iconSize"
+            :class="cs(styles['file-picker__icon'])"
+          />
+        </div>
+      </slot>
+    </div>
+    <input
+      ref="fileInputRef"
+      type="file"
+      :accept="PICKER_CONSTANTS.ACCEPT_TYPE"
+      hidden
+      @change="handleFileInput"
+    >
+  </View>
+</template>
+
+<script setup lang="ts">
+import { ref, useCssModule, inject } from 'vue';
+import { IconFile } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../baseComp/View';
+import { useChatContext } from '../../../chat-store';
+
+const PICKER_CONSTANTS = {
+  ACCEPT_TYPE: '*/*',
+};
+
+interface Props {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  disabled: false,
+  iconSize: 20,
+});
+
+const styles = useCssModule();
+const channel = inject('channel', 'default') as string;
+const { sendMessage } = useChatContext(channel);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+function handleButtonClick() {
+  if (props.disabled) {
+    return;
+  }
+
+  // Reset before click so iOS Safari reopens the picker even after a cancel
+  if (fileInputRef.value) {
+    fileInputRef.value.value = '';
+    fileInputRef.value.click();
+  }
+}
+
+function handleFileInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) {
+    return;
+  }
+  sendMessage({ type: 'fileMessage', file });
+  target.value = '';
+}
+</script>
+
+<style lang="scss" module>
+.file-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    color: var(--icon-color-primary);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/ImagePicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/ImagePicker.vue
new file mode 100644
index 0000000..0cb75d2
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/ImagePicker.vue
@@ -0,0 +1,130 @@
+<template>
+  <View>
+    <div @click="handleButtonClick">
+      <slot>
+        <div
+          :class="cs(styles['image-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconImage
+            :size="props.iconSize"
+            :class="cs(styles['image-picker__icon'])"
+          />
+        </div>
+      </slot>
+    </div>
+    <input
+      ref="fileInputRef"
+      type="file"
+      :accept="AcceptFileTypes.join(',')"
+      hidden
+      @change="handleFileInput"
+    >
+  </View>
+</template>
+
+<script setup lang="ts">
+import { ref, useCssModule, inject } from 'vue';
+import { IconImage, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../baseComp/View';
+import { useChatContext } from '../../../chat-store';
+
+const { t } = useUIKit();
+
+const AcceptFileTypes = [
+  'image/jpg',
+  'image/jpeg',
+  'image/gif',
+  'image/bmp',
+  'image/png',
+  'image/webp',
+];
+
+function validFileType(file: File) {
+  return AcceptFileTypes.includes(file.type);
+}
+
+interface Props {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  disabled: false,
+  iconSize: 20,
+});
+
+const styles = useCssModule();
+const channel = inject('channel', 'default') as string;
+const { sendMessage } = useChatContext(channel);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+function handleButtonClick() {
+  if (props.disabled) {
+    return;
+  }
+  console.log('>>> handleButtonClick');
+
+  // Reset before click so iOS Safari reopens the picker even after a cancel
+  if (fileInputRef.value) {
+    fileInputRef.value.value = '';
+    fileInputRef.value.click();
+  }
+}
+
+function handleFileInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const file = target.files?.[0];
+
+  if (!file) {
+    return;
+  }
+
+  if (!validFileType(file)) {
+    TUIToast.error({
+      message: t('MessageInput.invalid_image_type'),
+    });
+    return;
+  }
+
+  sendMessage({ type: 'imageMessage', file });
+  target.value = '';
+}
+</script>
+
+<style lang="scss" module>
+.image-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    color: var(--icon-color-primary);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/VideoPicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/VideoPicker.vue
new file mode 100644
index 0000000..8272e06
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/VideoPicker.vue
@@ -0,0 +1,110 @@
+<template>
+  <View>
+    <div @click="handleButtonClick">
+      <slot>
+        <div
+          :class="cs(styles['video-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconVideo
+            :size="props.iconSize"
+            :class="cs(styles['video-picker__icon'])"
+          />
+        </div>
+      </slot>
+    </div>
+    <input
+      ref="fileInputRef"
+      type="file"
+      :accept="PICKER_CONSTANTS.ACCEPT_TYPE"
+      hidden
+      @change="handleFileInput"
+    >
+  </View>
+</template>
+
+<script setup lang="ts">
+import { ref, useCssModule, inject } from 'vue';
+import { IconVideo } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { useChatContext } from '../../../chat-store';
+import { View } from '../../../baseComp/View';
+
+const PICKER_CONSTANTS = {
+  ACCEPT_TYPE: '.mp4,.mov,.qt',
+};
+
+interface Props {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  disabled: false,
+  iconSize: 20,
+});
+
+const styles = useCssModule();
+const channel = inject('channel', 'default') as string;
+const { sendMessage } = useChatContext(channel);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+function handleButtonClick() {
+  if (props.disabled) {
+    return;
+  }
+
+  // Reset before click so iOS Safari reopens the picker even after a cancel
+  if (fileInputRef.value) {
+    fileInputRef.value.value = '';
+    fileInputRef.value.click();
+  }
+}
+
+function handleFileInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) {
+    return;
+  }
+
+  sendMessage({ type: 'videoMessage', file, duration: 0 });
+  target.value = '';
+}
+</script>
+
+<style lang="scss" module>
+.video-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    color: var(--icon-color-primary);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/index.ts
new file mode 100644
index 0000000..cf5f578
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AttachmentPicker/index.ts
@@ -0,0 +1,11 @@
+import AttachmentPicker from './AttachmentPicker.vue';
+import FilePicker from './FilePicker.vue';
+import ImagePicker from './ImagePicker.vue';
+import VideoPicker from './VideoPicker.vue';
+
+export {
+  AttachmentPicker,
+  FilePicker,
+  ImagePicker,
+  VideoPicker,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AudioCallPicker/AudioCallPicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AudioCallPicker/AudioCallPicker.vue
new file mode 100644
index 0000000..d47b36b
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AudioCallPicker/AudioCallPicker.vue
@@ -0,0 +1,285 @@
+<template>
+  <View>
+    <div @click="handleAudioCallClick">
+      <slot>
+        <div
+          :class="cs(styles['audio-call-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconCall1
+            :size="props.iconSize"
+            :class="styles['audio-call-picker__icon']"
+          />
+        </div>
+      </slot>
+    </div>
+
+    <TUIDialog
+      :visible="isGroupCallDialogVisible"
+      :title="t('MessageInput.select_call_members')"
+      :cancelText="t('MessageInput.cancel')"
+      :cancel="handleCancelGroupCallDialog"
+      :close="handleCloseGroupCallDialog"
+      :confirmText="t('MessageInput.initiate_call')"
+      :confirm="handleConfirmGroupCall"
+      :confirmDisabled="groupCallSelectedCount === 0"
+      :customClasses="['group-call-dialog']"
+      appendTo="body"
+    >
+      <div
+        class="group-call-dialog-body"
+        @click.stop
+        @mousedown.stop
+        @touchstart.stop
+      >
+        <UserPicker
+          ref="groupMemberPickerRef"
+          display-mode="list"
+          :data-source="groupMemberOptions"
+          :max-count="MAX_GROUP_CALL_MEMBERS"
+          :min-count="MIN_GROUP_CALL_MEMBERS"
+          class="group-member-picker"
+          style="width: 100%;"
+          :on-selected-change="handleGroupCallSelectedChange"
+          @reach-end="handleLoadMoreGroupMembers"
+        />
+      </div>
+    </TUIDialog>
+  </View>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useCssModule, inject } from 'vue';
+import { ConversationType } from '@atomicxcore/core';
+import {
+  IconCall1,
+  TUIDialog,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../baseComp/View';
+import { useChatContext, LoginStore } from '../../../chat-store';
+import { startCall } from '../../../utils/call';
+import { handleChatErrorWithModal } from '../../UIKitModal/chatErrorModal';
+import { UserPicker } from '../../UserPicker';
+import type { UserPickerResult } from '../../UserPicker';
+
+interface AudioCallPickerProps {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const AUDIO_CALL_TYPE = 1;
+const MAX_GROUP_CALL_MEMBERS = 9;
+const MIN_GROUP_CALL_MEMBERS = 1;
+
+const props = withDefaults(defineProps<AudioCallPickerProps>(), {
+  label: '',
+  iconSize: 20,
+  disabled: false,
+});
+
+const styles = useCssModule();
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const {
+  activeConversation,
+  memberList,
+  hasMoreMembers,
+  loadMembers,
+  loadMoreMembers,
+} = useChatContext(channel);
+const { loginUserInfo } = LoginStore();
+
+const isGroupCallDialogVisible = ref(false);
+const groupMemberPickerRef = ref();
+const groupCallSelectedCount = ref(0);
+
+const isC2CConversation = computed(() =>
+  activeConversation.value?.type === ConversationType.C2C,
+);
+
+const groupMemberOptions = computed(() => {
+  const myUserID = loginUserInfo.value?.userID;
+  return memberList.value
+    .filter(member => member.userID !== myUserID)
+    .map(member => ({
+      key: member.userID,
+      label: member.nickname || member.userID,
+      avatarUrl: member.avatarURL,
+    }));
+});
+
+const canStartCall = computed(() => {
+  if (!activeConversation.value || props.disabled) {
+    return false;
+  }
+
+  // TODO: add more call permission check logic
+  return true;
+});
+
+function initiatePrivateCall(): void {
+  const conversationID = activeConversation.value?.conversationID ?? '';
+  const peerUserId = conversationID.replace(/^C2C/, '');
+  if (!peerUserId) {
+    console.warn('No peer user ID found for private call');
+    return;
+  }
+
+  try {
+    startCall({
+      userIDList: [peerUserId],
+      chatGroupID: undefined,
+      type: AUDIO_CALL_TYPE,
+    });
+  } catch (error) {
+    handleChatErrorWithModal(error as unknown as any);
+  }
+}
+
+function loadMoreGroupMembers(): void {
+  if (!hasMoreMembers.value) {
+    return;
+  }
+  loadMoreMembers();
+}
+
+function showGroupCallDialog(): void {
+  loadMembers();
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = true;
+}
+
+function handleCloseGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = false;
+}
+
+function handleCancelGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = false;
+}
+
+function initiateGroupCall(): void {
+  const conversationID = activeConversation.value?.conversationID ?? '';
+  const currentGroupId = conversationID.replace(/^GROUP/, '');
+  if (!groupMemberPickerRef.value || !currentGroupId) {
+    console.warn('Missing group information for group call');
+    return;
+  }
+
+  const selectedMembers = groupMemberPickerRef.value.getSelectedItems();
+  if (!Array.isArray(selectedMembers) || selectedMembers.length === 0) {
+    console.warn('No members selected for group call');
+    return;
+  }
+
+  const selectedUserIds = selectedMembers.map((member: any) => member.key);
+
+  try {
+    startCall({
+      userIDList: selectedUserIds,
+      chatGroupID: currentGroupId,
+      type: AUDIO_CALL_TYPE,
+    });
+
+    groupCallSelectedCount.value = 0;
+    handleCloseGroupCallDialog();
+  } catch (error) {
+    handleChatErrorWithModal(error as unknown as any);
+  }
+}
+
+function handleAudioCallClick() {
+  if (!canStartCall.value) {
+    console.warn('Cannot start audio call');
+    return;
+  }
+
+  if (isC2CConversation.value) {
+    initiatePrivateCall();
+  } else {
+    showGroupCallDialog();
+  }
+}
+
+const handleLoadMoreGroupMembers = () => {
+  loadMoreGroupMembers();
+};
+
+const handleGroupCallSelectedChange = (selectedItems: UserPickerResult) => {
+  groupCallSelectedCount.value = selectedItems.length;
+};
+
+const handleConfirmGroupCall = () => initiateGroupCall();
+
+</script>
+
+<style lang="scss" module>
+.audio-call-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    color: var(--icon-color-primary);
+    transition: color 0.2s ease;
+  }
+}
+</style>
+
+<style>
+.group-call-dialog {
+  width: calc(100vw - 32px);
+  max-width: 500px;
+  background: var(--bg-color-operate);
+  border-radius: 8px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.group-call-dialog,
+.group-call-dialog * {
+  box-sizing: border-box;
+}
+
+.group-call-dialog .group-member-picker {
+  width: 100%;
+  min-width: 0;
+}
+
+.group-call-dialog .group-call-dialog-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AudioCallPicker/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AudioCallPicker/index.ts
new file mode 100644
index 0000000..ddfa7ab
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/AudioCallPicker/index.ts
@@ -0,0 +1,3 @@
+import AudioCallPicker from './AudioCallPicker.vue';
+
+export { AudioCallPicker };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MentionPanelH5/MentionPanelH5.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MentionPanelH5/MentionPanelH5.vue
new file mode 100644
index 0000000..cca6abe
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MentionPanelH5/MentionPanelH5.vue
@@ -0,0 +1,283 @@
+<template>
+  <div
+    v-if="visible"
+    ref="panelRef"
+    :class="$style['mention-panel-h5']"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+  >
+    <div :class="$style['mention-panel-h5__header']">
+      {{ t('MessageInput.select_mention_members') }}
+    </div>
+    <button
+      v-for="member in filteredMembers"
+      :key="member.userID"
+      type="button"
+      :class="$style['mention-panel-h5__item']"
+      @mousedown.prevent
+      @click="handleSelect(member)"
+    >
+      <span
+        v-if="member.isAtAll"
+        :class="[$style['mention-panel-h5__avatar'], $style['mention-panel-h5__avatar--all']]"
+      >
+        @
+      </span>
+      <Avatar
+        v-else
+        :class="$style['mention-panel-h5__avatar']"
+        :src="member.avatarURL"
+        :alt="member.nickname || member.userID"
+        :size="36"
+      />
+      <span :class="$style['mention-panel-h5__content']">
+        <span :class="$style['mention-panel-h5__name']">
+          {{ member.nickname || member.userID }}
+        </span>
+        <span
+          v-if="!member.isAtAll && member.nickname && member.nickname !== member.userID"
+          :class="$style['mention-panel-h5__id']"
+        >
+          {{ member.userID }}
+        </span>
+      </span>
+    </button>
+    <div
+      v-if="filteredMembers.length === 0 && !isLoading"
+      :class="$style['mention-panel-h5__empty']"
+    >
+      {{ t('MessageInput.no_matching_members') }}
+    </div>
+    <button
+      v-if="isLoading"
+      type="button"
+      :class="$style['mention-panel-h5__load-more']"
+      disabled
+      @mousedown.prevent
+    >
+      {{ t('MessageInput.loading') }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import TencentCloudChat from '@tencentcloud/lite-chat';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useChatContext, useLoginStore } from '../../../chat-store';
+import { Avatar } from '../../Avatar';
+import type { GroupMember } from '@atomicxcore/core';
+
+interface MentionMember {
+  userID: string;
+  nickname?: string;
+  avatarURL?: string;
+  isAtAll?: boolean;
+}
+
+interface MentionPanelH5Props {
+  visible?: boolean;
+  query?: string;
+  channel?: string;
+}
+
+const props = withDefaults(defineProps<MentionPanelH5Props>(), {
+  visible: false,
+  query: '',
+  channel: 'default',
+});
+
+const emit = defineEmits<{
+  (e: 'select', member: MentionMember): void;
+  (e: 'panelTouchStart'): void;
+}>();
+
+const { t } = useUIKit();
+const { loginUserInfo } = useLoginStore();
+const { memberList, loadMembers } = useChatContext(props.channel);
+const isLoading = ref(false);
+const panelRef = ref<HTMLDivElement | null>(null);
+const touchStartY = ref(0);
+
+const mentionMembers = computed<MentionMember[]>(() => {
+  const myUserID = loginUserInfo.value?.userID;
+  const members = memberList.value;
+  if (!members.length) {
+    return [];
+  }
+
+  const result: MentionMember[] = members
+    .filter((member: GroupMember) => member.userID !== myUserID)
+    .map((member: GroupMember) => ({
+      userID: member.userID,
+      nickname: member.nickname,
+      avatarURL: member.avatarURL,
+    }));
+
+  if (members.length > 2) {
+    result.unshift({
+      userID: TencentCloudChat.TYPES.MSG_AT_ALL as string,
+      nickname: t('MessageInput.at_all_members') || 'all',
+      avatarURL: '/at_all_members.png',
+      isAtAll: true,
+    });
+  }
+
+  return result;
+});
+
+const filteredMembers = computed(() => {
+  const normalizedQuery = props.query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return mentionMembers.value;
+  }
+
+  return mentionMembers.value.filter(member =>
+    (member.nickname || member.userID).toLowerCase().includes(normalizedQuery),
+  );
+});
+
+watch(() => props.visible, (visible) => {
+  if (!visible) {
+    return;
+  }
+
+  isLoading.value = true;
+  Promise.resolve(loadMembers())
+    .catch(() => {})
+    .finally(() => {
+      isLoading.value = false;
+    });
+}, { immediate: true });
+
+function handleSelect(member: MentionMember): void {
+  emit('select', member);
+}
+
+function handleTouchStart(event: TouchEvent): void {
+  emit('panelTouchStart');
+  touchStartY.value = event.touches[0]?.clientY ?? 0;
+}
+
+function handleTouchMove(event: TouchEvent): void {
+  event.stopPropagation();
+
+  const panel = panelRef.value;
+  const currentY = event.touches[0]?.clientY ?? touchStartY.value;
+  const deltaY = currentY - touchStartY.value;
+  if (!panel) {
+    return;
+  }
+
+  const canScroll = panel.scrollHeight > panel.clientHeight;
+  if (!canScroll) {
+    event.preventDefault();
+    return;
+  }
+
+  const isAtTop = panel.scrollTop <= 0;
+  const isAtBottom = panel.scrollTop + panel.clientHeight >= panel.scrollHeight - 1;
+  const isPullingDown = deltaY > 0;
+  const isPushingUp = deltaY < 0;
+
+  if ((isAtTop && isPullingDown) || (isAtBottom && isPushingUp)) {
+    event.preventDefault();
+  }
+}
+</script>
+
+<style lang="scss" module>
+.mention-panel-h5 {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 8px;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  touch-action: pan-y;
+}
+
+.mention-panel-h5__header {
+  padding: 6px 8px 8px;
+  color: var(--text-color-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.mention-panel-h5__item,
+.mention-panel-h5__load-more {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 52px;
+  padding: 8px;
+  border: none;
+  border-radius: 12px;
+  background-color: transparent;
+  color: var(--text-color-primary);
+  text-align: left;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mention-panel-h5__item:active,
+.mention-panel-h5__load-more:active {
+  background-color: var(--bg-color-hover);
+}
+
+.mention-panel-h5__avatar {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  margin-right: 10px;
+}
+
+.mention-panel-h5__avatar--all {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--text-color-link);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.mention-panel-h5__content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.mention-panel-h5__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  line-height: 20px;
+}
+
+.mention-panel-h5__id {
+  min-width: 0;
+  margin-top: 2px;
+  overflow: hidden;
+  color: var(--text-color-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.mention-panel-h5__load-more {
+  justify-content: center;
+  color: var(--text-color-secondary);
+}
+
+.mention-panel-h5__empty {
+  padding: 24px 12px;
+  color: var(--text-color-secondary);
+  text-align: center;
+  font-size: 14px;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MentionPanelH5/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MentionPanelH5/index.ts
new file mode 100644
index 0000000..7791aac
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MentionPanelH5/index.ts
@@ -0,0 +1,3 @@
+import MentionPanelH5 from './MentionPanelH5.vue';
+
+export { MentionPanelH5 };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputH5.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputH5.vue
new file mode 100644
index 0000000..3d4cd03
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputH5.vue
@@ -0,0 +1,1075 @@
+<template>
+  <div :class="$style['message-input-h5']">
+    <slot name="headerToolbar">
+      <QuotedMessagePreview />
+    </slot>
+
+    <!-- Input Bar Area -->
+    <div
+      ref="barRef"
+      :class="$style['message-input-h5__bar']"
+    >
+      <div :class="$style['message-input-h5__left-inline']">
+        <slot name="leftInline" />
+      </div>
+
+      <!-- Textarea -->
+      <div :class="$style['message-input-h5__input-wrapper']">
+        <div :class="$style['message-input-h5__input-prefix']">
+          <slot name="inputPrefix" />
+        </div>
+        <slot
+          name="textEditor"
+          :value="inputValue"
+          :disabled="disabled"
+          :placeholder="computedPlaceholder"
+          :max-length="maxLength"
+          :input="handleTextareaInput"
+        >
+          <textarea
+            ref="textareaRef"
+            v-model="inputValue"
+            :class="$style['message-input-h5__textarea']"
+            :placeholder="computedPlaceholder"
+            :disabled="disabled"
+            :maxlength="maxLength"
+            rows="1"
+            @focus="handleTextareaFocus"
+            @blur="handleTextareaBlur"
+            @input="handleTextareaInput"
+            @mousedown="handleTextareaMousedown"
+            @keyup="handleTextareaKeyup"
+            @compositionstart="isComposing = true"
+            @compositionend="handleCompositionEnd"
+          />
+        </slot>
+        <div :class="$style['message-input-h5__input-suffix']">
+          <slot name="inputSuffix" />
+        </div>
+      </div>
+
+      <div
+        v-if="slots.rightInline"
+        :class="$style['message-input-h5__right-inline']"
+      >
+        <slot name="rightInline" />
+      </div>
+
+      <!-- Action Buttons -->
+      <div :class="$style['message-input-h5__actions']">
+        <!-- Emoji Button -->
+        <button
+          v-if="showEmojiButton"
+          type="button"
+          :class="[
+            $style['message-input-h5__action-btn'],
+            mode === 'emoji' && $style['message-input-h5__action-btn--active']
+          ]"
+          :disabled="disabled"
+          @click="handleEmojiClick"
+        >
+          <IconEmoji :size="26" />
+        </button>
+
+        <!-- Plus Button (when empty and panel actions exist) / Send Button (when has value) -->
+        <button
+          v-if="!hasValue && actionPanelItems.length > 0"
+          type="button"
+          :class="[
+            $style['message-input-h5__action-btn'],
+            mode === 'action' && $style['message-input-h5__action-btn--active']
+          ]"
+          :disabled="disabled"
+          @click="handlePlusClick"
+        >
+          <IconPlus :size="20" />
+        </button>
+
+        <TUIButton
+          v-else
+          type="primary"
+          radius="round"
+          size="medium"
+          :disabled="disabled"
+          @click="handleSend"
+        >
+          {{ t('MessageInput.send') }}
+        </TUIButton>
+      </div>
+    </div>
+
+    <MessageInputPanelH5
+      v-model:open="isMentionPanelVisible"
+      :anchor-element="barRef"
+      size="inset"
+      @update:open="handleMentionPanelOpenChange"
+    >
+      <MentionPanelH5
+        :visible="isMentionPanelVisible"
+        :query="mentionQuery"
+        :channel="channel"
+        @select="handleMentionSelect"
+        @panel-touch-start="handleMentionPanelTouchStart"
+      />
+    </MessageInputPanelH5>
+
+    <MessageInputPanelH5
+      :open="mode === 'emoji'"
+      :anchor-element="barRef"
+      size="inset"
+      @update:open="handleModePanelOpenChange('emoji', $event)"
+    >
+      <!-- Emoji Panel -->
+      <div
+        :class="$style['message-input-h5__emoji-panel']"
+        @touchmove.stop
+      >
+        <div :class="$style['message-input-h5__emoji-list']">
+          <button
+            v-for="emoji in emojiList"
+            :key="emoji"
+            type="button"
+            :class="$style['message-input-h5__emoji-item']"
+            @click="insertEmoji(emoji)"
+          >
+            {{ emoji }}
+          </button>
+        </div>
+      </div>
+    </MessageInputPanelH5>
+
+    <MessageInputPanelH5
+      :open="mode === 'action'"
+      :anchor-element="barRef"
+      size="inset"
+      @update:open="handleModePanelOpenChange('action', $event)"
+    >
+      <div
+        :class="$style['message-input-h5__action-panel']"
+        @touchmove.stop
+      >
+        <div :class="$style['message-input-h5__action-grid']">
+          <template v-for="item in actionPanelItems" :key="item.id">
+            <!-- Builtin action: picker component wraps H5 card -->
+            <component
+              :is="item.pickerComponent"
+              v-if="item.pickerComponent"
+              :disabled="disabled"
+            >
+              <div :class="$style['message-input-h5__action-item']">
+                <div :class="$style['message-input-h5__action-icon-wrapper']">
+                  <component
+                    :is="item.icon"
+                    :size="28"
+                    :class="$style['message-input-h5__action-icon']"
+                  />
+                </div>
+                <span :class="$style['message-input-h5__action-label']">
+                  {{ item.customLabel ?? t(item.labelKey!) }}
+                </span>
+              </div>
+            </component>
+            <!-- Custom component: rendered directly -->
+            <component
+              :is="item.customComponent"
+              v-else-if="item.customComponent"
+              :disabled="disabled"
+              v-bind="item.customProps"
+            />
+          </template>
+        </div>
+      </div>
+      <!-- Safe Area Bottom Padding -->
+      <div :class="$style['message-input-h5__safe-area-bottom']" />
+    </MessageInputPanelH5>
+    <slot name="footerToolbar" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, watch, provide, onBeforeUnmount, useSlots } from 'vue';
+import type { Component } from 'vue';
+import { IconCall1, IconFile, IconImage, IconVideo, IconEmoji, IconPlus, IconVideoDefault, IconConference, IconAttach, TUIButton, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useChatContext } from '../../chat-store';
+import { useChatUIState } from '../../context/useChatUIState';
+import { MessageContentType } from '../../types/messageInput';
+import { parseConversationDraftContent, serializeConversationDraftContent } from '../../utils/conversationDraft';
+import { deleteLocalConversationDraft, getLocalConversationDraft, setLocalConversationDraft } from '../../utils/conversationDraftStorage';
+import { AttachmentPicker, FilePicker, ImagePicker, VideoPicker } from './AttachmentPicker';
+import { AudioCallPicker } from './AudioCallPicker';
+import { MentionPanelH5 } from './MentionPanelH5';
+import { MessageInputPanelH5 } from './MessageInputPanelH5';
+import { QuickConferencePicker } from './QuickConferencePicker';
+import { QuotedMessagePreview } from './QuotedMessagePreview';
+import { VideoCallPicker } from './VideoCallPicker';
+import type { CustomAction, MessageInputActions } from './types';
+import type { InputContent } from '../../types/messageInput';
+import type { SendMessageInputOption } from '@atomicxcore/core';
+
+const { t } = useUIKit();
+const slots = useSlots();
+
+// ==================== Types ====================
+type InputMode = 'none' | 'text' | 'emoji' | 'action';
+
+interface MentionRecord {
+  id: string;
+  label: string;
+  text: string;
+}
+
+interface MentionMember {
+  userID: string;
+  nickname?: string;
+}
+
+interface H5BuiltinConfig {
+  component: Component;
+  icon: Component;
+  labelKey: string;
+}
+
+interface H5PanelItem {
+  id: string;
+  pickerComponent?: Component;
+  icon?: Component;
+  labelKey?: string;
+  customLabel?: string;
+  customComponent?: Component;
+  customProps?: Record<string, unknown>;
+}
+
+interface MessageInputH5Props {
+  disabled?: boolean;
+  placeholder?: string;
+  maxLength?: number;
+  channel?: string;
+  actions?: MessageInputActions;
+}
+
+// ==================== Props ====================
+const props = withDefaults(defineProps<MessageInputH5Props>(), {
+  disabled: false,
+  placeholder: undefined,
+  maxLength: 500,
+  channel: 'default',
+  actions: () => ['EmojiPicker', 'ImagePicker', 'VideoPicker', 'FilePicker', 'AudioCallPicker', 'VideoCallPicker'],
+});
+
+// ==================== Emits ====================
+const emit = defineEmits<{
+  /**
+   * Emitted when input area expands (keyboard shows, panel opens, or textarea clicked)
+   * Use this to scroll message list to bottom
+   */
+  (e: 'inputAreaExpand'): void;
+}>();
+
+// ==================== Store ====================
+const { channel } = props;
+provide('channel', channel);
+const {
+  activeConversation,
+  activeConversationID,
+  sendMessage,
+  setConversationDraft,
+} = useChatContext(channel);
+const {
+  quotedMessage,
+  clearQuotedMessage,
+  enterTyping,
+  leaveTyping,
+  pendingInputCommand,
+  clearPendingInputCommand,
+} = useChatUIState(channel);
+
+// ==================== Refs ====================
+const barRef = ref<HTMLElement | null>(null);
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+// ==================== State ====================
+const inputValue = ref('');
+const mode = ref<InputMode>('none');
+// Save cursor position before textarea loses focus
+const cursorPosition = ref(0);
+const mentionRecords = ref<MentionRecord[]>([]);
+const mentionTriggerIndex = ref<number | null>(null);
+const mentionQuery = ref('');
+const isMentionPanelVisible = ref(false);
+const isProgrammaticUpdate = ref(false);
+const isComposing = ref(false);
+const activeConversationDraft = ref<string | undefined>(undefined);
+const activeConversationIDSnapshot = ref<string | undefined>(undefined);
+
+// ==================== Computed ====================
+const hasValue = computed(() => inputValue.value.trim().length > 0);
+const canMention = computed(() => activeConversation.value?.conversationID?.startsWith('GROUP') === true);
+
+// ==================== Actions ====================
+const H5_BUILTIN_ACTION_CONFIG: Record<string, H5BuiltinConfig> = {
+  ImagePicker: { component: ImagePicker, icon: IconImage, labelKey: 'MessageInput.image' },
+  VideoPicker: { component: VideoPicker, icon: IconVideo, labelKey: 'MessageInput.video' },
+  FilePicker: { component: FilePicker, icon: IconFile, labelKey: 'MessageInput.file' },
+  AttachmentPicker: { component: AttachmentPicker, icon: IconAttach, labelKey: 'MessageInput.file' },
+  AudioCallPicker: { component: AudioCallPicker, icon: IconCall1, labelKey: 'MessageInput.audio_call' },
+  VideoCallPicker: { component: VideoCallPicker, icon: IconVideoDefault, labelKey: 'MessageInput.video_call' },
+  QuickConferencePicker: { component: QuickConferencePicker, icon: IconConference, labelKey: 'MessageInput.conference' },
+};
+
+const showEmojiButton = computed(() =>
+  props.actions.some(action =>
+    typeof action === 'string' ? action === 'EmojiPicker' : action.key === 'EmojiPicker',
+  ),
+);
+
+const actionPanelItems = computed<H5PanelItem[]>(() =>
+  props.actions
+    .filter(action => (typeof action === 'string' ? action : action.key) !== 'EmojiPicker')
+    .map((action): H5PanelItem | null => {
+      if (typeof action === 'string') {
+        const config = H5_BUILTIN_ACTION_CONFIG[action];
+        if (!config) {
+          return null;
+        }
+        return { id: action, pickerComponent: config.component, icon: config.icon, labelKey: config.labelKey };
+      }
+      const customAction = action as CustomAction;
+      const config = H5_BUILTIN_ACTION_CONFIG[customAction.key];
+      if (customAction.component) {
+        if (config) {
+          return {
+            id: customAction.key,
+            pickerComponent: customAction.component,
+            icon: config.icon,
+            labelKey: config.labelKey,
+            customLabel: customAction.label,
+          };
+        }
+        return {
+          id: customAction.key,
+          customComponent: customAction.component,
+          customProps: {
+            label: customAction.label,
+            className: customAction.className,
+            style: customAction.style,
+            iconSize: customAction.iconSize,
+          },
+        };
+      }
+      if (config) {
+        return {
+          id: customAction.key,
+          pickerComponent: config.component,
+          icon: config.icon,
+          labelKey: config.labelKey,
+          customLabel: customAction.label,
+        };
+      }
+      return null;
+    })
+    .filter((item): item is H5PanelItem => item !== null),
+);
+
+/**
+ * Placeholder logic:
+ * 1. If user provides placeholder (including empty string), always use it
+ * 2. If placeholder is undefined and disabled is true, show no placeholder
+ * 3. If placeholder is undefined and disabled is false, show default placeholder
+ */
+const computedPlaceholder = computed(() =>
+  props.placeholder ?? (props.disabled ? '' : t('MessageInput.enter_a_message')),
+);
+
+function getSendErrorMessage(error: unknown): string {
+  const errorCode = (error as { code?: number })?.code;
+  switch (errorCode) {
+    case 10007:
+      return t('MessageInput.you_are_not_in_group');
+    case 20009:
+      return t('MessageInput.you_are_not_friend');
+    default:
+      return t('MessageInput.send_failed');
+  }
+}
+
+function getTextFromInputContent(content: string | InputContent[]): string {
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  return content.map((item) => {
+    switch (item.type) {
+      case MessageContentType.TEXT:
+        return item.content;
+      case MessageContentType.EMOJI:
+        return item.content.text || item.content.key;
+      case MessageContentType.MENTION:
+        return `${item.content.mentionSuggestionChar}${item.content.label}`;
+      default:
+        return '';
+    }
+  }).join('');
+}
+
+// ==================== Watch ====================
+watch(() => props.disabled, (newDisabled) => {
+  if (newDisabled) {
+    inputValue.value = '';
+    mentionRecords.value = [];
+    mode.value = 'none';
+    closeMentionPanel();
+    cursorPosition.value = 0;
+    leaveTyping().catch(() => {});
+    nextTick(() => {
+      adjustTextareaHeight();
+    });
+  }
+});
+
+watch(pendingInputCommand, (command) => {
+  if (!command) {
+    return;
+  }
+
+  if (command.type === 'focus') {
+    textareaRef.value?.focus();
+    clearPendingInputCommand(command.id);
+    return;
+  }
+
+  if (command.type === 'blur') {
+    textareaRef.value?.blur();
+    clearPendingInputCommand(command.id);
+    return;
+  }
+
+  if (command.content === undefined) {
+    clearPendingInputCommand(command.id);
+    return;
+  }
+
+  const commandText = getTextFromInputContent(command.content);
+  if (command.type === 'set') {
+    inputValue.value = commandText;
+    cursorPosition.value = commandText.length;
+  } else {
+    const cursor = textareaRef.value?.selectionStart ?? cursorPosition.value;
+    inputValue.value = `${inputValue.value.slice(0, cursor)}${commandText}${inputValue.value.slice(cursor)}`;
+    cursorPosition.value = cursor + commandText.length;
+  }
+
+  nextTick(() => {
+    adjustTextareaHeight();
+    if (command.type === 'insert') {
+      textareaRef.value?.setSelectionRange(cursorPosition.value, cursorPosition.value);
+    }
+    if (command.focus !== false) {
+      textareaRef.value?.focus();
+    }
+  });
+  clearPendingInputCommand(command.id);
+});
+
+// ==================== Emoji Data ====================
+const emojiList = [
+  '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂',
+  '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩',
+  '😘', '😗', '😚', '😙', '🥲', '😋', '😛', '😜',
+  '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐',
+  '🤨', '😐', '😑', '😶', '😏', '😒', '🙄', '😬',
+  '🤥', '😌', '😔', '😪', '🤤', '😴', '😷', '🤒',
+  '🤕', '🤢', '🤮', '🤧', '🥵', '🥶', '🥴', '😵',
+  '🤯', '🤠', '🥳', '🥸', '😎', '🤓', '🧐', '😕',
+  '😟', '🙁', '☹️', '😮', '😯', '😲', '😳', '🥺',
+  '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱',
+  '😖', '😣', '😞', '😓', '😩', '😫', '🥱', '😤',
+  '😡', '😠', '🤬', '😈', '👿', '💀', '☠️', '💩',
+  '👍', '👎', '👏', '🙌', '👐', '🤲', '🤝', '🙏',
+  '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆',
+  '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍',
+];
+
+// ==================== Constants ====================
+const MAX_TEXTAREA_HEIGHT = 100;
+// Min height = line-height (16 * 1.4 = 22.4) + padding (8 * 2 = 16) + border (2) ≈ 40px
+const MIN_TEXTAREA_HEIGHT = 40;
+// Delay for keyboard to hide before showing panel (in ms)
+const KEYBOARD_HIDE_DELAY = 300;
+
+function adjustTextareaHeight(): void {
+  const textarea = textareaRef.value;
+  if (!textarea) {
+    return;
+  }
+
+  // Temporarily set height to min to get accurate scrollHeight
+  textarea.style.height = `${MIN_TEXTAREA_HEIGHT}px`;
+
+  // Calculate new height, respecting min and max
+  const { scrollHeight } = textarea;
+  const newHeight = Math.max(MIN_TEXTAREA_HEIGHT, Math.min(scrollHeight, MAX_TEXTAREA_HEIGHT));
+  textarea.style.height = `${newHeight}px`;
+
+  // Toggle overflow based on content
+  textarea.style.overflowY = scrollHeight > MAX_TEXTAREA_HEIGHT ? 'auto' : 'hidden';
+}
+
+// ==================== Mode Handlers ====================
+function saveCursorPosition(): void {
+  const textarea = textareaRef.value;
+  if (textarea) {
+    cursorPosition.value = textarea.selectionStart ?? inputValue.value.length;
+  }
+}
+
+function handleTextareaFocus(): void {
+  mode.value = 'text';
+  updateMentionPanel();
+  emit('inputAreaExpand');
+}
+
+function handleTextareaBlur(): void {
+  saveCursorPosition();
+  leaveTyping().catch(() => {});
+}
+
+/**
+ * Prevent textarea from gaining focus when panel is open.
+ * This avoids Safari's viewport jump when keyboard appears while panel is visible.
+ */
+function handleTextareaMousedown(e: MouseEvent): void {
+  if (mode.value === 'emoji' || mode.value === 'action') {
+    // Prevent focus when panel is open to avoid keyboard + panel conflict
+    e.preventDefault();
+    // Close the panel instead
+    mode.value = 'none';
+  }
+}
+
+function handleTextareaInput(): void {
+  saveCursorPosition();
+  adjustTextareaHeight();
+  if (!isProgrammaticUpdate.value && !isComposing.value && inputValue.value.trim().length > 0) {
+    enterTyping().catch(() => {});
+  }
+  updateMentionPanel();
+}
+
+function handleTextareaKeyup(): void {
+  saveCursorPosition();
+  updateMentionPanel();
+}
+
+function handleCompositionEnd(): void {
+  isComposing.value = false;
+  handleTextareaInput();
+}
+
+function handleEmojiClick(): void {
+  if (mode.value === 'emoji') {
+    // If already in emoji mode, just close panel (don't focus textarea)
+    mode.value = 'none';
+  } else {
+    const wasInTextMode = mode.value === 'text';
+    // Blur textarea first to hide keyboard
+    blurTextarea();
+
+    if (wasInTextMode) {
+      // Delay showing panel to wait for keyboard to hide
+      setTimeout(() => {
+        mode.value = 'emoji';
+        emit('inputAreaExpand');
+      }, KEYBOARD_HIDE_DELAY);
+    } else {
+      mode.value = 'emoji';
+      emit('inputAreaExpand');
+    }
+  }
+}
+
+function handlePlusClick(): void {
+  if (mode.value === 'action') {
+    // If already in action mode, just close panel (don't focus textarea)
+    mode.value = 'none';
+  } else {
+    const wasInTextMode = mode.value === 'text';
+    // Blur textarea first to hide keyboard
+    blurTextarea();
+
+    if (wasInTextMode) {
+      // Delay showing panel to wait for keyboard to hide
+      setTimeout(() => {
+        mode.value = 'action';
+        emit('inputAreaExpand');
+      }, KEYBOARD_HIDE_DELAY);
+    } else {
+      mode.value = 'action';
+      emit('inputAreaExpand');
+    }
+  }
+}
+
+function blurTextarea(): void {
+  textareaRef.value?.blur();
+}
+
+function handleModePanelOpenChange(panelMode: Extract<InputMode, 'emoji' | 'action'>, open: boolean): void {
+  if (!open && mode.value === panelMode) {
+    mode.value = 'none';
+  }
+}
+
+// ==================== Send Handler ====================
+async function handleSend(): Promise<void> {
+  const text = inputValue.value.trim();
+  if (!text || props.disabled) {
+    return;
+  }
+
+  const atUserList = getValidMentionRecords().map(record => record.id);
+  const sendOption: SendMessageInputOption = {};
+  if (atUserList.length > 0) {
+    sendOption.atUserList = [...new Set(atUserList)];
+  }
+  if (quotedMessage.value) {
+    sendOption.quotedMessage = quotedMessage.value;
+  }
+
+  inputValue.value = '';
+  mentionRecords.value = [];
+  closeMentionPanel();
+  nextTick(() => {
+    adjustTextareaHeight();
+  });
+
+  try {
+    await sendMessage(
+      { type: 'textMessage', text },
+      Object.keys(sendOption).length > 0 ? sendOption : undefined,
+    );
+
+    const sendingConversationID = activeConversation.value?.conversationID;
+    if (sendingConversationID) {
+      deleteLocalConversationDraft(sendingConversationID).catch(() => {});
+      setConversationDraft(sendingConversationID, '').catch(() => {});
+    }
+    clearQuotedMessage();
+    leaveTyping().catch(() => {});
+  } catch (error) {
+    TUIToast.error({
+      message: getSendErrorMessage(error),
+    });
+  }
+}
+
+// ==================== Emoji Handler ====================
+function insertEmoji(emoji: string): void {
+  // Use saved cursor position since textarea is blurred
+  const pos = cursorPosition.value;
+  const before = inputValue.value.substring(0, pos);
+  const after = inputValue.value.substring(pos);
+
+  inputValue.value = before + emoji + after;
+
+  // Update saved cursor position
+  cursorPosition.value = pos + emoji.length;
+
+  nextTick(() => {
+    adjustTextareaHeight();
+  });
+}
+
+// ==================== Mention Handler ====================
+function closeMentionPanel(): void {
+  isMentionPanelVisible.value = false;
+  mentionTriggerIndex.value = null;
+  mentionQuery.value = '';
+}
+
+function handleMentionPanelOpenChange(open: boolean): void {
+  if (!open) {
+    closeMentionPanel();
+  }
+}
+
+function handleMentionPanelTouchStart(): void {
+  saveCursorPosition();
+  blurTextarea();
+}
+
+function updateMentionPanel(): void {
+  if (!canMention.value || props.disabled) {
+    closeMentionPanel();
+    return;
+  }
+
+  const cursor = cursorPosition.value;
+  const textBeforeCursor = inputValue.value.slice(0, cursor);
+  const atIndex = textBeforeCursor.lastIndexOf('@');
+  if (atIndex < 0) {
+    closeMentionPanel();
+    return;
+  }
+
+  const query = textBeforeCursor.slice(atIndex + 1);
+  if (/\s/.test(query)) {
+    closeMentionPanel();
+    return;
+  }
+
+  mentionTriggerIndex.value = atIndex;
+  mentionQuery.value = query;
+  isMentionPanelVisible.value = true;
+}
+
+function handleMentionSelect(member: MentionMember): void {
+  const textarea = textareaRef.value;
+  const cursor = textarea?.selectionStart ?? cursorPosition.value;
+  const start = mentionTriggerIndex.value ?? cursor;
+  const label = member.nickname || member.userID;
+  const mentionText = `@${label}`;
+  const insertText = `${mentionText} `;
+
+  inputValue.value = `${inputValue.value.slice(0, start)}${insertText}${inputValue.value.slice(cursor)}`;
+  mentionRecords.value.push({
+    id: member.userID,
+    label,
+    text: mentionText,
+  });
+
+  cursorPosition.value = start + insertText.length;
+  closeMentionPanel();
+  nextTick(() => {
+    adjustTextareaHeight();
+    textareaRef.value?.focus();
+    textareaRef.value?.setSelectionRange(cursorPosition.value, cursorPosition.value);
+  });
+}
+
+function getValidMentionRecords(): MentionRecord[] {
+  return mentionRecords.value.filter(record => inputValue.value.includes(record.text));
+}
+
+function createInputContentFromState(): InputContent[] {
+  const content: InputContent[] = [];
+  const validRecords = getValidMentionRecords()
+    .map(record => ({ ...record, index: inputValue.value.indexOf(record.text) }))
+    .filter(record => record.index >= 0)
+    .sort((a, b) => a.index - b.index);
+
+  let cursor = 0;
+  validRecords.forEach((record) => {
+    if (record.index < cursor) {
+      return;
+    }
+    const before = inputValue.value.slice(cursor, record.index);
+    if (before) {
+      content.push({ type: MessageContentType.TEXT, content: before });
+    }
+    content.push({
+      type: MessageContentType.MENTION,
+      content: {
+        id: record.id,
+        label: record.label,
+        mentionSuggestionChar: '@',
+      },
+    });
+    cursor = record.index + record.text.length;
+  });
+
+  const after = inputValue.value.slice(cursor);
+  if (after) {
+    content.push({ type: MessageContentType.TEXT, content: after });
+  }
+
+  return content;
+}
+
+function setDraftContent(content: string | InputContent[] | undefined): void {
+  isProgrammaticUpdate.value = true;
+  try {
+    mentionRecords.value = [];
+    if (typeof content === 'string' || content === undefined) {
+      inputValue.value = content ?? '';
+      return;
+    }
+
+    const textParts: string[] = [];
+    content.forEach((item) => {
+      if (item.type === MessageContentType.TEXT) {
+        textParts.push(item.content);
+      } else if (item.type === MessageContentType.MENTION) {
+        const mentionText = `${item.content.mentionSuggestionChar}${item.content.label}`;
+        mentionRecords.value.push({
+          id: item.content.id,
+          label: item.content.label,
+          text: mentionText,
+        });
+        textParts.push(mentionText);
+      } else if (item.type === MessageContentType.EMOJI) {
+        textParts.push(item.content.text || item.content.key);
+      }
+    });
+    inputValue.value = textParts.join('');
+  } finally {
+    isProgrammaticUpdate.value = false;
+  }
+}
+
+function saveCurrentDraft(conversationID: string): void {
+  const draft = serializeConversationDraftContent(createInputContentFromState());
+  setLocalConversationDraft(conversationID, draft).catch(() => {});
+  setConversationDraft(conversationID, draft).catch(() => {});
+}
+
+function restoreDraft(draft: string | undefined, conversationID: string | undefined): void {
+  if (!conversationID) {
+    setDraftContent('');
+    return;
+  }
+
+  getLocalConversationDraft(conversationID).then((localDraft) => {
+    if (activeConversationIDSnapshot.value !== conversationID) {
+      return;
+    }
+    setDraftContent(parseConversationDraftContent(localDraft ?? draft));
+    nextTick(() => {
+      adjustTextareaHeight();
+    });
+  });
+}
+
+watch(() => activeConversation.value?.draft, (draft) => {
+  activeConversationDraft.value = draft;
+}, { immediate: true });
+
+watch(activeConversationID, (conversationID) => {
+  activeConversationIDSnapshot.value = conversationID;
+}, { immediate: true });
+
+watch(activeConversationID, (newConversationID, oldConversationID) => {
+  if (oldConversationID) {
+    saveCurrentDraft(oldConversationID);
+  }
+  restoreDraft(activeConversationDraft.value, newConversationID);
+}, { immediate: true });
+
+onBeforeUnmount(() => {
+  if (activeConversationID.value) {
+    saveCurrentDraft(activeConversationID.value);
+  }
+  leaveTyping().catch(() => {});
+});
+
+// ==================== Public Methods ====================
+/**
+ * Collapse the panel (emoji/action) if open
+ * Call this when user taps outside the input area
+ */
+function collapsePanel(): void {
+  if (mode.value === 'emoji' || mode.value === 'action') {
+    mode.value = 'none';
+  }
+}
+
+/**
+ * Check if panel is currently open
+ */
+function isPanelOpen(): boolean {
+  return mode.value === 'emoji' || mode.value === 'action';
+}
+
+defineExpose({
+  collapsePanel,
+  isPanelOpen,
+});
+</script>
+
+<style lang="scss" module>
+.message-input-h5 {
+  position: relative;
+  background-color: var(--bg-color-operate);
+  // Disable tap highlight on mobile webkit browsers
+  -webkit-tap-highlight-color: transparent;
+  border-top: 1px solid var(--stroke-color-secondary);
+
+  // Input Bar
+  &__bar {
+    display: flex;
+    align-items: flex-end;
+    padding: 12px 12px;
+    gap: 8px;
+  }
+
+  &__input-wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    border-radius: 16px;
+    background-color: var(--bg-color-input);
+  }
+
+  &__left-inline,
+  &__right-inline,
+  &__input-prefix,
+  &__input-suffix {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &__textarea {
+    width: 100%;
+    min-height: 40px;
+    max-height: 100px;
+    padding: 8px 12px;
+    border-radius: 16px;
+    background-color: transparent;
+    color: var(--text-color-primary);
+    font-size: 16px;
+    line-height: 1.4;
+    resize: none;
+    outline: none;
+    box-sizing: border-box;
+    overflow-y: hidden;
+    border: none;
+
+    &::placeholder {
+      color: var(--text-color-secondary);
+    }
+
+    &:focus {
+      // border-color: var(--text-color-link, #007aff);
+    }
+
+    &:disabled {
+      background-color: var(--bg-color-bubble-reciprocal);
+      cursor: not-allowed;
+    }
+  }
+
+  // Action Buttons
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+    padding-bottom: 4px;
+  }
+
+  &__action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--text-color-secondary);
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:active {
+      background-color: var(--bg-color-hover);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &--active {
+      color: var(--text-color-link);
+    }
+  }
+
+  // Emoji Panel - with scroll lock for iOS
+  &__emoji-panel {
+    height: 220px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    // Prevent iOS scroll chaining (bounce effect propagating to parent)
+    overscroll-behavior-y: contain;
+  }
+
+  &__emoji-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 12px;
+    gap: 4px;
+  }
+
+  &__emoji-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc((100% - 28px) / 8);
+    aspect-ratio: 1;
+    padding: 0;
+    border: none;
+    border-radius: 8px;
+    background-color: transparent;
+    font-size: 24px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:active {
+      background-color: var(--bg-color-hover);
+    }
+  }
+
+  // Action Panel - with scroll lock for iOS
+  &__action-panel {
+    height: 220px;
+    padding: 20px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    // Prevent iOS scroll chaining
+    overscroll-behavior-y: contain;
+  }
+
+  &__action-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+  }
+
+  &__action-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__action-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 12px;
+    background-color: var(--bg-color-input);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  &__action-icon {
+    width: 28px;
+    height: 28px;
+    color: var(--icon-color-primary);
+  }
+
+  &__action-label {
+    font-size: 12px;
+    color: var(--text-color-secondary);
+  }
+
+  // Safe Area Bottom - for iPhone home indicator
+  &__safe-area-bottom {
+    height: env(safe-area-inset-bottom, 0);
+    background-color: var(--bg-color-operate);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputPanelH5/MessageInputPanelH5.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputPanelH5/MessageInputPanelH5.vue
new file mode 100644
index 0000000..ab846d1
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputPanelH5/MessageInputPanelH5.vue
@@ -0,0 +1,142 @@
+<template>
+  <PopoverRoot
+    :open="open"
+    :modal="false"
+    @update:open="handleOpenChange"
+  >
+    <PopoverAnchor
+      v-if="virtualAnchor"
+      :reference="virtualAnchor"
+    />
+    <PopoverPortal>
+      <PopoverContent
+        :class="[
+          $style['message-input-panel-h5'],
+          $style[`message-input-panel-h5--${size}`],
+        ]"
+        side="top"
+        align="center"
+        :side-offset="offset"
+        :collision-padding="8"
+        :avoid-collisions="false"
+        @open-auto-focus.prevent
+        @interact-outside="handleInteractOutside"
+        @pointer-down-outside="handleInteractOutside"
+      >
+        <slot />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui';
+
+type PanelSize = 'full' | 'inset';
+
+interface MessageInputPanelH5Props {
+  open?: boolean;
+  anchorElement?: HTMLElement | null;
+  offset?: number;
+  size?: PanelSize;
+}
+
+const props = withDefaults(defineProps<MessageInputPanelH5Props>(), {
+  open: false,
+  anchorElement: null,
+  offset: 8,
+  size: 'full',
+});
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+}>();
+
+const virtualAnchor = computed(() => {
+  const element = props.anchorElement;
+  if (!element) {
+    return null;
+  }
+
+  return {
+    getBoundingClientRect: () => element.getBoundingClientRect(),
+  };
+});
+
+function handleOpenChange(value: boolean): void {
+  emit('update:open', value);
+}
+
+function getOutsideEventTarget(event: Event): EventTarget | null {
+  const customEvent = event as CustomEvent<{ originalEvent?: Event }>;
+  return customEvent.detail?.originalEvent?.target ?? event.target;
+}
+
+function handleInteractOutside(event: Event): void {
+  const target = getOutsideEventTarget(event);
+  if (!(target instanceof Element)) {
+    return;
+  }
+
+  if (target.closest('.tui-dialog-mask') || target.closest('.group-call-dialog')) {
+    event.preventDefault();
+  }
+}
+</script>
+
+<style lang="scss" module>
+.message-input-panel-h5 {
+  z-index: 1600;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--bg-color-operate);
+  border: 1px solid var(--stroke-color-secondary);
+  border-radius: 20px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
+  outline: none;
+  transform-origin: bottom center;
+
+  &[data-state='open'] {
+    animation: message-input-panel-h5-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: message-input-panel-h5-exit 120ms ease-in;
+  }
+}
+
+.message-input-panel-h5--full {
+  width: 100vw;
+  max-width: 100vw;
+}
+
+.message-input-panel-h5--inset {
+  width: calc(100vw - 24px);
+  max-width: calc(100vw - 24px);
+}
+
+@keyframes message-input-panel-h5-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes message-input-panel-h5-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputPanelH5/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputPanelH5/index.ts
new file mode 100644
index 0000000..21b5cbe
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/MessageInputPanelH5/index.ts
@@ -0,0 +1,3 @@
+import MessageInputPanelH5 from './MessageInputPanelH5.vue';
+
+export { MessageInputPanelH5 };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuickConferencePicker/QuickConferencePicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuickConferencePicker/QuickConferencePicker.vue
new file mode 100644
index 0000000..b887cea
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuickConferencePicker/QuickConferencePicker.vue
@@ -0,0 +1,214 @@
+<template>
+  <View>
+    <div
+      :class="[
+        styles['quick-conference-picker__button'],
+        (props.disabled || isLoading) && styles['disabled'],
+      ]"
+      @click="handleQuickConferenceClick"
+    >
+      <slot>
+        <IconLoading
+          v-if="isLoading"
+          :size="props.iconSize"
+          :class="[styles['quick-conference-picker__icon'], styles['is-loading']]"
+        />
+        <IconConference
+          v-else
+          :size="props.iconSize"
+          :class="styles['quick-conference-picker__icon']"
+        />
+      </slot>
+    </div>
+  </View>
+</template>
+
+<script setup lang="ts">
+import { ref, useCssModule, inject } from 'vue';
+import { TUICore, TUIConstants } from '@tencentcloud/tui-core-lite';
+import { IconLoading, IconConference, useUIKit, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import { View } from '../../../baseComp/View';
+import { useLoginState } from '../../../states/LoginState';
+import { useRoomParticipantState } from '../../../states/RoomParticipantState';
+import { useRoomState } from '../../../states/RoomState';
+import { reportStoreUsageData, StoreName } from '@atomicxcore/core';
+import { useChatContext } from '../../../chat-store';
+
+interface QuickConferencePickerProps {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<QuickConferencePickerProps>(), {
+  label: '',
+  iconSize: 20,
+  disabled: false,
+});
+
+const styles = useCssModule();
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const { loginUserInfo } = useLoginState();
+const isLoading = ref(false);
+
+const { sendMessage } = useChatContext(channel);
+const { currentRoom } = useRoomState();
+const { localParticipant } = useRoomParticipantState();
+const generateRoomId = () => String(Date.now()) + String(Math.floor(Math.random() * 1000)).padStart(3, '0');
+
+const getQuickConferenceRoomName = () => t('ConferencePicker.Quick_Conference', {
+  name: loginUserInfo.value?.userName || loginUserInfo.value?.userId,
+});
+
+const getConferenceOwnerProfile = () => {
+  const roomOwner = currentRoom.value?.roomOwner;
+  const participant = localParticipant.value;
+  return {
+    faceUrl: participant?.avatarUrl || roomOwner?.avatarUrl || loginUserInfo.value?.avatarUrl || '',
+    nickName: participant?.userName || roomOwner?.userName || loginUserInfo.value?.userName || '',
+    userId: participant?.userId || roomOwner?.userId || loginUserInfo.value?.userId || '',
+  };
+};
+
+const createCurrentUserPayload = () => {
+  const ownerProfile = getConferenceOwnerProfile();
+  return ownerProfile.userId ? [ownerProfile] : [];
+};
+
+const startRoom = (params: { roomId: string; options: { roomName: string } }) => new Promise<void>((resolve, reject) => {
+  TUICore.callService({
+    serviceName: TUIConstants.TUIRoom.SERVICE.NAME,
+    method: TUIConstants.TUIRoom.SERVICE.METHOD.START_ROOM,
+    params,
+    callback: (result?: unknown) => {
+      if (result instanceof Error) {
+        reject(result);
+        return;
+      }
+      if ((result as any)?.code || (result as any)?.message) {
+        reject(result);
+        return;
+      }
+      resolve();
+    },
+  });
+});
+
+const handleQuickConferenceClick = async () => {
+  if (props.disabled || isLoading.value) {
+    return;
+  }
+  reportStoreUsageData({ storeName: StoreName.ChatEvokeRoom });
+  if (currentRoom.value?.roomId) {
+    TUIToast({
+      type: TOAST_TYPE.WARNING,
+      message: t('ConferencePicker.Cannot_Start_While_In_Meeting'),
+    });
+    return;
+  }
+
+  isLoading.value = true;
+  try {
+    const roomId = generateRoomId();
+    const roomName = getQuickConferenceRoomName();
+    await startRoom({
+      roomId,
+      options: {
+        roomName,
+      },
+    });
+
+    const sentMessage = await sendMessage({
+      type: 'customMessage',
+      customData: JSON.stringify({
+        businessID: 'group_room_message',
+        owner: loginUserInfo.value?.userId,
+        roomId,
+        roomState: 'created',
+        roomName,
+        userList: createCurrentUserPayload(),
+        ownerName: getConferenceOwnerProfile().nickName,
+      }),
+    });
+    // const sentMessage = await sendCustomMessage({
+    //   payload: {
+    //     data: JSON.stringify({
+    //       businessID: 'group_room_message',
+    //       owner: loginUserInfo.value?.userId,
+    //       roomId,
+    //       roomState: 'created',
+    //       roomName,
+    //       userList: createCurrentUserPayload(),
+    //       ownerName: getConferenceOwnerProfile().nickName,
+    //     }),
+    //   },
+    // });
+
+    TUICore.notifyEvent(
+      TUIConstants.TUIRoom.SERVICE.NAME,
+      TUIConstants.TUIRoom.SERVICE.EVENT.QUICK_CONFERENCE_MESSAGE_CREATED,
+      {
+        roomId,
+        message: sentMessage,
+      },
+    );
+  } catch (error: unknown) {
+    console.error('[QuickConferencePicker] Failed to create conference:', error);
+    TUIToast({
+      type: TOAST_TYPE.ERROR,
+      message: t('ConferencePicker.Create_Conference_Failed'),
+    });
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+</script>
+
+<style lang="scss" module>
+.quick-conference-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+  }
+
+  &__icon {
+    color: var(--icon-color-primary);
+  }
+}
+
+.is-loading {
+  animation: quick-conference-rotate 0.8s linear infinite;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  user-select: none;
+  pointer-events: none;
+}
+
+@keyframes quick-conference-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuickConferencePicker/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuickConferencePicker/index.ts
new file mode 100644
index 0000000..1bacc04
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuickConferencePicker/index.ts
@@ -0,0 +1,3 @@
+import QuickConferencePicker from './QuickConferencePicker.vue';
+
+export { QuickConferencePicker };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/QuotedMessagePreview.module.scss b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/QuotedMessagePreview.module.scss
new file mode 100644
index 0000000..6f5a6a6
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/QuotedMessagePreview.module.scss
@@ -0,0 +1,84 @@
+.quoted__message__preview {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  height: 48px;
+  align-items: stretch;
+  width: 100%;
+  animation: slide-in 0.2s ease-out;
+  transform-origin: top;
+  overflow: hidden;
+  padding: 4px;
+
+  &__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    padding-left: 4px;
+    background-color: rgba($color: #000000, $alpha: 0.4);
+    border-radius: 6px;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
+    height: 100%;
+    padding: 4px 12px;
+    background-color: #f5f7fb;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+    &--header {
+      display: flex;
+      margin-bottom: 3px;
+    }
+
+    &--title {
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 1.25;
+      color: var(--text-color-primary);
+    }
+
+    &--text {
+      font-size: 12px;
+      line-height: 1.375;
+      word-break: break-word;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      color: #8f9399;
+    }
+  }
+
+  &__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    border: none;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    color: var(--text-color-secondary);
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/QuotedMessagePreview.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/QuotedMessagePreview.vue
new file mode 100644
index 0000000..a2c36e3
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/QuotedMessagePreview.vue
@@ -0,0 +1,76 @@
+<template>
+  <div
+    v-if="quotedMessage"
+    :class="styles['quoted__message__preview']"
+  >
+    <div :class="styles['quoted__message__preview__body']">
+      <div :class="styles['quoted__message__preview__content']">
+        <div :class="styles['quoted__message__preview__content--header']">
+          <div :class="styles['quoted__message__preview__content--title']">
+            {{ quotedMessage.from?.nickname || quotedMessage.from?.userID }}
+          </div>
+        </div>
+        <div :class="styles['quoted__message__preview__content--text']">
+          {{ calculateReferenceContent(quotedMessage) }}
+        </div>
+      </div>
+    </div>
+    <button
+      type="button"
+      :class="styles['quoted__message__preview__close']"
+      @click="handleCloseQuotedMessage"
+    >
+      <IconClose size="16" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, watch, onUnmounted } from 'vue';
+import { MessageType } from '@atomicxcore/core';
+import { useUIKit, IconClose } from '@tencentcloud/uikit-base-component-vue3';
+import { useChatUIState } from '../../../context/useChatUIState';
+import { transformTextWithEmojiKeyToName } from '../../../utils';
+import styles from './QuotedMessagePreview.module.scss';
+import type { MessageInfo } from '@atomicxcore/core';
+
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const { quotedMessage, clearQuotedMessage, focusInput } = useChatUIState(channel);
+
+onUnmounted(() => {
+  clearQuotedMessage();
+});
+
+watch(quotedMessage, (newVal) => {
+  if (newVal) {
+    focusInput();
+  }
+});
+
+const handleCloseQuotedMessage = () => {
+  clearQuotedMessage();
+};
+
+const calculateReferenceContent = (message: MessageInfo | undefined): string => {
+  if (!message) {
+    return 'no reference';
+  }
+  switch (message.messageType) {
+    case MessageType.Text:
+      return transformTextWithEmojiKeyToName((message.messagePayload as any)?.text || '');
+    case MessageType.Image:
+      return t('MessageInput.image');
+    case MessageType.Audio:
+      return t('MessageInput.audio');
+    case MessageType.Video:
+      return t('MessageInput.video');
+    case MessageType.File:
+      return t('MessageInput.file');
+    case MessageType.Custom:
+      return t('MessageInput.custom_message');
+    default:
+      return t('MessageInput.unknown');
+  }
+};
+</script>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/index.ts
new file mode 100644
index 0000000..a647d7c
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/QuotedMessagePreview/index.ts
@@ -0,0 +1,5 @@
+import QuotedMessagePreview from './QuotedMessagePreview.vue';
+
+export {
+  QuotedMessagePreview,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/VideoCallPicker/VideoCallPicker.vue b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/VideoCallPicker/VideoCallPicker.vue
new file mode 100644
index 0000000..03a9eff
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/VideoCallPicker/VideoCallPicker.vue
@@ -0,0 +1,284 @@
+<template>
+  <View>
+    <div @click="handleVideoCallClick">
+      <slot>
+        <div
+          :class="cs(styles['video-call-picker__button'], {
+            [styles['disabled']]: props.disabled,
+          })"
+        >
+          <IconVideoDefault
+            :size="props.iconSize"
+            :class="styles['video-call-picker__icon']"
+          />
+        </div>
+      </slot>
+    </div>
+
+    <TUIDialog
+      :visible="isGroupCallDialogVisible"
+      :title="t('MessageInput.select_call_members')"
+      :cancelText="t('MessageInput.cancel')"
+      :cancel="handleCancelGroupCallDialog"
+      :close="handleCloseGroupCallDialog"
+      :confirmText="t('MessageInput.initiate_call')"
+      :confirm="handleConfirmGroupCall"
+      :confirmDisabled="groupCallSelectedCount === 0"
+      :customClasses="['group-call-dialog']"
+      appendTo="body"
+    >
+      <div
+        class="group-call-dialog-body"
+        @click.stop
+        @mousedown.stop
+        @touchstart.stop
+      >
+        <UserPicker
+          ref="groupMemberPickerRef"
+          display-mode="list"
+          :data-source="groupMemberOptions"
+          :max-count="MAX_GROUP_CALL_MEMBERS"
+          :min-count="MIN_GROUP_CALL_MEMBERS"
+          class="group-member-picker"
+          style="width: 100%;"
+          :on-selected-change="handleGroupCallSelectedChange"
+          @reach-end="handleLoadMoreGroupMembers"
+        />
+      </div>
+    </TUIDialog>
+  </View>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useCssModule, inject } from 'vue';
+import { ConversationType } from '@atomicxcore/core';
+import { useChatContext, useLoginStore } from '../../../chat-store';
+import {
+  IconVideoDefault,
+  TUIDialog,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../baseComp/View';
+import { startCall } from '../../../utils/call';
+import { handleChatErrorWithModal } from '../../UIKitModal/chatErrorModal';
+import { UserPicker } from '../../UserPicker';
+import type { UserPickerResult } from '../../UserPicker';
+
+interface VideoCallPickerProps {
+  label?: string;
+  iconSize?: number;
+  disabled?: boolean;
+}
+
+const VIDEO_CALL_TYPE = 2;
+const MAX_GROUP_CALL_MEMBERS = 9;
+const MIN_GROUP_CALL_MEMBERS = 1;
+
+const props = withDefaults(defineProps<VideoCallPickerProps>(), {
+  label: '',
+  iconSize: 20,
+  disabled: false,
+});
+
+const styles = useCssModule();
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const {
+  activeConversation,
+  memberList,
+  hasMoreMembers,
+  loadMembers,
+  loadMoreMembers,
+} = useChatContext(channel);
+const { loginUserInfo } = useLoginStore();
+
+const isGroupCallDialogVisible = ref(false);
+const groupMemberPickerRef = ref();
+const groupCallSelectedCount = ref(0);
+
+const isPrivateConversation = computed(() =>
+  activeConversation.value?.type === ConversationType.C2C,
+);
+
+const groupMemberOptions = computed(() => {
+  const myUserID = loginUserInfo.value?.userID;
+  return memberList.value
+    .filter(member => member.userID !== myUserID)
+    .map(member => ({
+      key: member.userID,
+      label: member.nickname || member.userID,
+      avatarUrl: member.avatarURL,
+    }));
+});
+
+const canStartCall = computed(() => {
+  if (!activeConversation.value || props.disabled) {
+    return false;
+  }
+
+  // TODO: add more call permission check logic
+  return true;
+});
+
+function initiatePrivateCall(): void {
+  const conversationID = activeConversation.value?.conversationID ?? '';
+  const peerUserId = conversationID.replace(/^C2C/, '');
+  if (!peerUserId) {
+    console.warn('No peer user ID found for private call');
+    return;
+  }
+
+  try {
+    startCall({
+      userIDList: [peerUserId],
+      chatGroupID: '',
+      type: VIDEO_CALL_TYPE,
+    });
+  } catch (error) {
+    handleChatErrorWithModal(error as unknown as any);
+  }
+}
+
+function loadMoreGroupMembers(): void {
+  if (!hasMoreMembers.value) {
+    return;
+  }
+  loadMoreMembers();
+}
+
+function showGroupCallDialog(): void {
+  loadMembers();
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = true;
+}
+
+function handleCloseGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = false;
+}
+
+function handleCancelGroupCallDialog() {
+  groupCallSelectedCount.value = 0;
+  isGroupCallDialogVisible.value = false;
+}
+
+function initiateGroupCall(): void {
+  const conversationID = activeConversation.value?.conversationID ?? '';
+  const currentGroupId = conversationID.replace(/^GROUP/, '');
+  if (!groupMemberPickerRef.value || !currentGroupId) {
+    console.warn('Missing group information for group call');
+    return;
+  }
+
+  const selectedMembers = groupMemberPickerRef.value.getSelectedItems();
+  if (!Array.isArray(selectedMembers) || selectedMembers.length === 0) {
+    console.warn('No members selected for group call');
+    return;
+  }
+
+  const selectedUserIds = selectedMembers.map((member: any) => member.key);
+
+  try {
+    startCall({
+      userIDList: selectedUserIds,
+      chatGroupID: currentGroupId,
+      type: VIDEO_CALL_TYPE,
+    });
+
+    groupCallSelectedCount.value = 0;
+    handleCloseGroupCallDialog();
+  } catch (error) {
+    handleChatErrorWithModal(error as unknown as any);
+  }
+}
+
+function handleVideoCallClick() {
+  if (!canStartCall.value) {
+    console.warn('Cannot start video call');
+    return;
+  }
+
+  if (isPrivateConversation.value) {
+    initiatePrivateCall();
+  } else {
+    showGroupCallDialog();
+  }
+}
+
+const handleLoadMoreGroupMembers = () => {
+  loadMoreGroupMembers();
+};
+
+const handleGroupCallSelectedChange = (selectedItems: UserPickerResult) => {
+  groupCallSelectedCount.value = selectedItems.length;
+};
+
+const handleConfirmGroupCall = () => initiateGroupCall();
+</script>
+
+<style lang="scss" module>
+.video-call-picker {
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 4px 6px;
+    transition: background-color 0.5s ease;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--button-color-secondary-hover);
+    }
+
+    &:active {
+      background-color: var(--button-color-secondary-active);
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      user-select: none;
+      pointer-events: none;
+    }
+  }
+
+  &__icon {
+    color: var(--icon-color-primary);
+    transition: color 0.2s ease;
+  }
+}
+</style>
+
+<style>
+.group-call-dialog {
+  width: calc(100vw - 32px);
+  max-width: 500px;
+  background: var(--bg-color-operate);
+  border-radius: 8px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.group-call-dialog,
+.group-call-dialog * {
+  box-sizing: border-box;
+}
+
+.group-call-dialog .group-member-picker {
+  width: 100%;
+  min-width: 0;
+}
+
+.group-call-dialog .group-call-dialog-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/VideoCallPicker/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/VideoCallPicker/index.ts
new file mode 100644
index 0000000..215c525
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/VideoCallPicker/index.ts
@@ -0,0 +1,3 @@
+import VideoCallPicker from './VideoCallPicker.vue';
+
+export { VideoCallPicker };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/en-US.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/en-US.ts
new file mode 100644
index 0000000..8722f76
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/en-US.ts
@@ -0,0 +1,49 @@
+const MessageInput = {
+  file: 'File',
+  image: 'Image',
+  video: 'Video',
+  audio: 'Audio',
+  audio_call: 'Audio call',
+  video_call: 'Video call',
+  location: 'Location',
+  custom_message: 'Custom Message',
+  unknown: 'Unknown',
+  enter_a_message: 'Enter a message',
+  send: 'Send',
+  select_call_members: 'Select call members',
+  select_mention_members: 'Select members to mention',
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  initiate_call: 'Initiate call',
+  loading: 'Loading...',
+  no_matching_members: 'No matching members',
+  at_all_members: 'All members',
+  invalid_image_type: 'Invalid image type',
+  send_failed: 'Failed to send',
+  you_are_not_in_group: 'You are not in the group',
+  you_are_not_friend: 'You are not friends',
+};
+
+const OfflinePush = {
+  text: '[Text Message]',
+  image: '[Image Message]',
+  video: '[Video Message]',
+  file: '[File Message]',
+  audio: '[Audio Message]',
+  face: '[Sticker Message]',
+  location: '[Location Message]',
+  merger: '[Forward Message]',
+  custom: '[Custom Message]',
+};
+
+const ConferencePicker = {
+  Quick_Conference: '{{name}} \'s Quick Room',
+  Create_Conference_Failed: 'Failed to create room, please try again',
+  Cannot_Start_While_In_Meeting: 'You are already in a room and cannot start another one',
+};
+
+export default {
+  OfflinePush,
+  MessageInput,
+  ConferencePicker,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/index.ts
new file mode 100644
index 0000000..bb91c7c
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/index.ts
@@ -0,0 +1,7 @@
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+export const resources = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/zh-CN.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/zh-CN.ts
new file mode 100644
index 0000000..8cf6529
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/i18n/zh-CN.ts
@@ -0,0 +1,49 @@
+const MessageInput = {
+  file: '文件',
+  image: '图片',
+  video: '视频',
+  audio: '音频',
+  audio_call: '语音通话',
+  video_call: '视频通话',
+  location: '位置',
+  custom_message: '自定义消息',
+  unknown: '未知',
+  enter_a_message: '输入消息',
+  send: '发送',
+  select_call_members: '选择成员',
+  select_mention_members: '选择 @ 的成员',
+  cancel: '取消',
+  confirm: '确认',
+  initiate_call: '发起通话',
+  loading: '加载中...',
+  no_matching_members: '暂无匹配成员',
+  at_all_members: '所有人',
+  invalid_image_type: '无效的图片类型',
+  send_failed: '发送失败',
+  you_are_not_in_group: '你不在群里',
+  you_are_not_friend: '对方不是你的好友',
+};
+
+const OfflinePush = {
+  text: '[文本消息]',
+  image: '[图片消息]',
+  video: '[视频消息]',
+  file: '[文件消息]',
+  audio: '[语音消息]',
+  face: '[动画表情]',
+  location: '[地理位置]',
+  merger: '[转发消息]',
+  custom: '[自定义消息]',
+};
+
+const ConferencePicker = {
+  Quick_Conference: '{{name}}的快速房间',
+  Create_Conference_Failed: '创建房间失败，请重试',
+  Cannot_Start_While_In_Meeting: '您当前已经在房间中，不可再次发起房间',
+};
+
+export default {
+  MessageInput,
+  OfflinePush,
+  ConferencePicker,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/index.ts
new file mode 100644
index 0000000..5024ac1
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/index.ts
@@ -0,0 +1,20 @@
+import { addI18n } from '../../i18n';
+import MessageInputH5Component from './MessageInputH5.vue';
+import { resources } from './i18n';
+
+addI18n('en-US', { translation: {
+  MessageInput: resources['en-US'].MessageInput,
+  OfflinePush: resources['en-US'].OfflinePush,
+  ConferencePicker: resources['en-US'].ConferencePicker,
+} });
+addI18n('zh-CN', { translation: {
+  MessageInput: resources['zh-CN'].MessageInput,
+  OfflinePush: resources['zh-CN'].OfflinePush,
+  ConferencePicker: resources['zh-CN'].ConferencePicker,
+} });
+
+const MessageInputH5 = MessageInputH5Component;
+
+export {
+  MessageInputH5,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/types.d.ts b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/types.d.ts
new file mode 100644
index 0000000..e0150d8
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageInputH5/types.d.ts
@@ -0,0 +1,47 @@
+import type { Component, CSSProperties } from 'vue';
+
+type BuiltInAction =
+  | 'EmojiPicker'
+  | 'ImagePicker'
+  | 'FilePicker'
+  | 'VideoPicker'
+  | 'AttachmentPicker'
+  | 'AudioCallPicker'
+  | 'VideoCallPicker'
+  | 'QuickConferencePicker';
+
+export type CustomAction = {
+  key: string;
+  label?: string | undefined;
+  component?: Component | undefined;
+  className?: string | undefined;
+  style?: CSSProperties | undefined;
+  iconSize?: number | undefined;
+};
+
+export type MessageInputActions = Array<BuiltInAction | CustomAction>;
+
+export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
+
+export interface MessageInputProps {
+  autoFocus?: boolean;
+  disabled?: boolean;
+  hideSendButton?: boolean;
+  placeholder?: string;
+  attachmentPickerMode?: MessageInputAttachmentPickerMode;
+  maxLength?: number;
+  actions?: MessageInputActions;
+  slots?: MessageInputSlots;
+  /** Channel key for UIContext isolation, defaults to 'default' */
+  channel?: string;
+}
+
+export interface MessageInputSlots {
+  headerToolbar?: () => VNode[];
+  footerToolbar?: () => VNode[];
+  leftInline?: () => VNode[];
+  rightInline?: () => VNode[];
+  inputPrefix?: () => VNode[];
+  inputSuffix?: () => VNode[];
+  textEditor?: () => VNode[];
+}
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.module.scss b/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.module.scss
index d61b8fc..210295a 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.module.scss
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.module.scss
@@ -1,4 +1,5 @@
 .message-action-dropdown {
+  z-index: 1700;
   display: flex;
   flex-direction: column;
   width: 100px;
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageBubble/MessageBubble.vue b/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageBubble/MessageBubble.vue
index 15ed625..4f62925 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageBubble/MessageBubble.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageBubble/MessageBubble.vue
@@ -39,13 +39,7 @@ withDefaults(defineProps<MessageBubbleProps>(), {
 
 <style lang="scss" scoped>
 .message-bubble {
-  // Only disable text selection on touch devices (H5), allow copy on PC
-  @media (pointer: coarse) {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
+  min-width: 0;
 }
 
 .has-risk-content {
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageLayout.vue b/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageLayout.vue
index 62ae416..482ba29 100644
--- a/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageLayout.vue
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageList/Message/MessageLayout/MessageLayout.vue
@@ -5,6 +5,7 @@ import { MessageType, ConversationType, MessageStatus } from '@atomicxcore/core'
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { View } from '../../../../baseComp/View';
+import { useChatContext } from '../../../../chat-store/context/useChatContext';
 import { useChatUIState } from '../../../../context/useChatUIState';
 import { isCallMessage, isCreateGroupMessage } from '../../../../utils/call';
 import { getTimeStampAuto } from '../../../../utils/time';
@@ -64,6 +65,7 @@ const props = withDefaults(defineProps<MessageLayoutProps>(), {
 const { t } = useUIKit();
 const isHovered = ref(false);
 const isReadReceiptInfoOpen = ref(false);
+const { activeConversation } = useChatContext();
 
 const shouldRenderAsGroupTip = computed(() => {
   if (props.message.messageType === MessageType.Custom && isCreateGroupMessage(props.message)) {
@@ -79,6 +81,13 @@ const shouldRenderAsGroupTip = computed(() => {
   return false;
 });
 
+const showName = computed(() => {
+  if (props.message.conversationType === ConversationType.C2C) {
+    return props.nick || activeConversation.value?.title || props.message.from.nickname || props.message.from.userID;
+  }
+  return props.nick || props.message.from.nameCard || props.message.from.nickname || props.message.from.userID;
+});
+
 const MessageComponentsFactory: Record<MessageType, Component | null> = {
   [MessageType.Unknown]: null,
   [MessageType.Stream]: null,
@@ -231,7 +240,7 @@ const avatarVisibility = computed(() => {
     <View :class="cs(contentClasses)">
       <View v-if="!isAggregated" :class="cs(headerClasses)">
         <View v-if="!isHiddenMessageNick" :class="cs('message-layout__nick')">
-          {{ props.nick || message.from.nameCard || message.from.nickname || message.from.userID }}
+          {{ showName }}
         </View>
         <span class="message-layout__time" :style="{ visibility: isHovered ? 'visible' : 'hidden' }">{{ displayTime }}</span>
       </View>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/AudioMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/AudioMessage.vue
new file mode 100644
index 0000000..5a12e8b
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/AudioMessage.vue
@@ -0,0 +1,97 @@
+<template>
+  <View
+    :class="cs('audio-message', {
+      'audio-message--flow-in': !message.isSentBySelf,
+      'audio-message--flow-out': message.isSentBySelf,
+    })"
+  >
+    <View class="audio-message__content">
+      <PlayButton
+        :is-playing="isPlaying"
+        @click="isPlaying ? pause() : play()"
+      />
+      <WaveForm
+        :progress="progress"
+        :bars-count="barCount"
+        @seek="setProgress"
+      />
+      <View class="audio-message__duration">
+        {{ formatDuration(messageContent.audioDuration) }}
+      </View>
+    </View>
+  </View>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import { useAudioControl } from '../../../../hooks/useAudioControl';
+import PlayButton from './PlayButton.vue';
+import WaveForm from './WaveForm.vue';
+import type { MessageInfo, AudioMessagePayload } from '@atomicxcore/core';
+
+interface IAudioMessageProps {
+  message: MessageInfo;
+}
+
+const props = defineProps<IAudioMessageProps>();
+
+const messageContent = computed(() => props.message.messagePayload as AudioMessagePayload);
+
+const barCount = computed(() => {
+  const count = messageContent.value.audioDuration;
+  if (count <= 5) {
+    return 10;
+  }
+  if (count <= 10) {
+    return 14;
+  }
+  return 18;
+});
+
+// Generate unique ID
+const audioId = computed(() => `audio-${props.message.msgID}`);
+
+// Use audio control hook
+const {
+  isPlaying,
+  progress,
+  play,
+  pause,
+  setProgress,
+} = useAudioControl({
+  url: messageContent.value.audioURL ?? '',
+  audioId: audioId.value,
+});
+
+// Format audio duration
+const formatDuration = (seconds: number): string => {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../bubble-mixins' as bubble;
+
+.audio-message {
+  @include bubble.bubble-base();
+  padding: 10px 12px;
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+  }
+
+  &__duration {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: #999;
+    min-width: 36px;
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/PlayButton.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/PlayButton.vue
new file mode 100644
index 0000000..698b073
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/PlayButton.vue
@@ -0,0 +1,83 @@
+<template>
+  <button
+    class="play-button"
+    :class="{ 'play-button--playing': isPlaying }"
+    @click="onClick"
+  >
+    <svg
+      v-if="isPlaying"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect x="6" y="4" width="4" height="16" />
+      <rect x="14" y="4" width="4" height="16" />
+    </svg>
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="play-button__play-icon"
+    >
+      <polygon points="5 3 19 12 5 21 5 3" />
+    </svg>
+  </button>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  isPlaying: boolean | undefined;
+}>();
+
+const emit = defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<style lang="scss" scoped>
+.play-button {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: #4080ff;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #3070ee;
+  }
+
+  &__play-icon {
+    margin-left: 2px;
+  }
+
+  &--playing {
+    svg {
+      margin-left: 0;
+    }
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/WaveForm.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/WaveForm.vue
new file mode 100644
index 0000000..5af3740
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/WaveForm.vue
@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="wave-form"
+    :style="waveFormStyle"
+    @click="handleClick"
+  >
+    <div
+      v-for="(height, index) in waveBarHeights"
+      :key="index"
+      class="wave-form__bar"
+      :class="{ 'wave-form__bar--active': activeStates[index] }"
+      :style="{ height: `${height}px` }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+interface WaveFormProps {
+  progress: number | undefined;
+  barsCount?: number;
+  width?: string | number;
+}
+
+const props = withDefaults(defineProps<WaveFormProps>(), {
+  barsCount: 30,
+  width: '100%',
+});
+
+const emit = defineEmits<{
+  (e: 'seek', progress: number): void;
+}>();
+
+// Calculate wave form container style
+const waveFormStyle = computed(() => ({
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+}));
+
+// Generate fixed wave bar heights array to avoid height changes on re-render
+const waveBarHeights = Array.from({ length: props.barsCount }, () => Math.random() * 16 + 4);
+
+// Compute active states for all bars
+const activeStates = computed(() => {
+  const currentProgress = props.progress || 0;
+
+  if (currentProgress === 0) {
+    return Array(props.barsCount).fill(false);
+  }
+
+  const _activeStates = Array.from({ length: props.barsCount }, (_, index) => {
+    const barProgress = index / props.barsCount;
+    return currentProgress >= barProgress;
+  });
+
+  return _activeStates;
+});
+
+// Handle click event, calculate new progress
+const handleClick = (event: MouseEvent) => {
+  const waveElement = event.currentTarget as HTMLElement;
+  const rect = waveElement.getBoundingClientRect();
+  const offsetX = event.clientX - rect.left;
+  const newProgress = offsetX / rect.width;
+
+  // Ensure progress value is between 0-1
+  const validProgress = Math.max(0, Math.min(1, newProgress));
+  emit('seek', validProgress);
+};
+</script>
+
+<style lang="scss" scoped>
+.wave-form {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  height: 24px;
+  cursor: pointer;
+  padding: 0 2px;
+
+  &__bar {
+    flex: 1;
+    width: 3px;
+    background-color: rgba(0, 0, 0, 10%);
+    border-radius: 1.5px;
+    transition: background-color 0.2s ease;
+
+    &--active {
+      background-color: #4080ff;
+    }
+  }
+
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/index.ts
new file mode 100644
index 0000000..d51281d
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/AudioMessage/index.ts
@@ -0,0 +1,3 @@
+import AudioMessage from './AudioMessage.vue';
+
+export { AudioMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CallMessage/CallMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CallMessage/CallMessage.vue
new file mode 100644
index 0000000..502c508
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CallMessage/CallMessage.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, inject, useCssModule } from 'vue';
+import { ConversationType } from '@atomicxcore/core';
+import { IconCall1Filled, IconVideoDefaultFilled, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { View } from '../../../../../baseComp/View';
+import { useChatContext } from '../../../../../chat-store';
+import { parseCallMessage, startCall, parseCallMessageText } from '../../../../../utils/call';
+import { handleChatErrorWithModal } from '../../../../../components/UIKitModal/chatErrorModal';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface Props {
+  message: MessageInfo;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useUIKit();
+const classes = useCssModule();
+const channel = inject('channel', 'default') as string;
+const { activeConversation } = useChatContext(channel);
+
+const text = computed(() => parseCallMessageText(props.message, t));
+const payload = computed(() => parseCallMessage(props.message));
+
+const callAgain = () => {
+  if (!activeConversation.value || !payload.value || props.message.conversationType === ConversationType.Group) {
+    return;
+  }
+
+  try {
+    startCall({
+      type: payload.value.data.data.call_type,
+      userIDList: [activeConversation.value.conversationID.replace(/^C2C/, '')],
+    });
+  } catch (error) {
+    handleChatErrorWithModal(error as unknown as any);
+  }
+};
+</script>
+
+<template>
+  <View
+    v-if="props.message.conversationType === ConversationType.C2C"
+    :gap="8"
+    dir="row"
+    :class="classes['call-message-c2c']"
+    @click="callAgain"
+  >
+    <IconCall1Filled v-if="payload?.data.data.call_type === 1" :class="classes['call-message-c2c__icon']" />
+    <IconVideoDefaultFilled v-else :class="classes['call-message-c2c__icon']" />
+    {{ text }}
+  </View>
+  <View v-else :class="classes['call-message-group']">
+    {{ text }}
+  </View>
+</template>
+
+<style lang="scss" module>
+.call-message-c2c {
+  cursor: pointer;
+  align-items: center;
+  font-weight: normal;
+  font-size: 14px;
+
+  &__icon {
+    color: var(--text-color-link);
+  }
+}
+
+.call-message-group {
+  align-items: center;
+  font-weight: normal;
+  font-size: 14px;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CallMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CallMessage/index.ts
new file mode 100644
index 0000000..826369e
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CallMessage/index.ts
@@ -0,0 +1,3 @@
+import CallMessage from './CallMessage.vue';
+
+export { CallMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CustomMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CustomMessage.vue
new file mode 100644
index 0000000..c9ce593
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/CustomMessage.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import { isCallMessage as _isCallMessage } from '../../../../utils/call';
+import { isRoomMessage } from '../../../../utils/room';
+import { CallMessage } from './CallMessage';
+import { QuickConferenceMessage } from './QuickConferenceMessage';
+import type { CustomMessagePayload, MessageInfo } from '@atomicxcore/core';
+
+interface Props {
+  message: MessageInfo;
+}
+
+const props = defineProps<Props>();
+
+const classes = useCssModule();
+
+const customMessageClasses = computed(() => cs(
+  classes['custom-message'],
+  {
+    [classes['custom-message--flow-in']]: !props.message.isSentBySelf,
+    [classes['custom-message--flow-out']]: props.message.isSentBySelf,
+  },
+));
+
+interface CustomMessageData {
+  businessID: string;
+  [key: string]: any;
+}
+
+const isCallMessage = computed(() => _isCallMessage(props.message));
+const _isRoomMsg = computed(() => isRoomMessage(props.message));
+
+const textLinkData = computed<{ text?: string; link?: string } | null>(() => {
+  try {
+    const payload = props.message.messagePayload as CustomMessagePayload;
+    const parsed = JSON.parse(payload.customData || '{}') as CustomMessageData;
+    if (parsed.businessID === 'text_link') {
+      const { text, link } = parsed;
+      return { text, link };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+});
+
+</script>
+
+<template>
+  <CallMessage
+    v-if="isCallMessage"
+    :message="props.message"
+    :class="customMessageClasses"
+  />
+
+  <QuickConferenceMessage
+    v-else-if="_isRoomMsg"
+    :message="(props.message as any)"
+  />
+
+  <!-- text_link -->
+  <View v-else-if="textLinkData" :class="customMessageClasses">
+    <div>{{ textLinkData.text }}</div>
+    <a :href="textLinkData.link">read more &nbsp;>>></a>
+  </View>
+
+  <div v-else :class="customMessageClasses">
+    [custom message]
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../bubble-mixins' as bubble;
+
+.custom-message {
+  @include bubble.bubble-base();
+  padding: 10px 12px;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/QuickConferenceMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/QuickConferenceMessage.vue
new file mode 100644
index 0000000..a226df2
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/QuickConferenceMessage.vue
@@ -0,0 +1,470 @@
+<template>
+  <div
+    :class="[
+      'room-message-container',
+      roomCardData.isMessageFromMe ? 'isMe' : 'notMe',
+    ]"
+  >
+    <div :class="['room-message-card-container', roomCardData.roomState]">
+      <div class="content">
+        <div :class="['content-title', contentTitleClass]">
+          <span class="icon" />
+          <p v-if="RoomState.CREATED === roomCardData.roomState">
+            {{ t('RoomMessage.meeting_in_progress') }}
+          </p>
+          <p v-else>
+            {{ t('RoomMessage.meeting') }}
+          </p>
+        </div>
+        <div class="content-desc">
+          <div class="title">
+            {{ roomCardData.roomName || `${roomCardData.ownerName || roomCardData.owner}${t('RoomMessage.quick_conference')}` }}
+          </div>
+          <ul class="users">
+            <template v-for="(user, index) in roomCardData.userList">
+              <li v-if="index <= 4" :key="user.userId">
+                <Avatar
+                  class="avatar"
+                  :src="user.faceUrl"
+                  :alt="user.nickName || user.userId"
+                  :size="26"
+                  shape="rounded"
+                />
+              </li>
+              <li
+                v-if="index === 5"
+                :key="user.userId"
+                class="more"
+              >
+                <IconHorizontalMore2 />
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+      <div :class="['footer', footerClass, roomCardData.isInnerRoom && 'in-room']">
+        <span v-if="footerView.infoVisible" class="room-info">{{
+          footerView.infoMessage
+        }}</span>
+        <span
+          v-if="footerView.statusVisible"
+          :class="['room-status']"
+          @click="enterRoom"
+        >{{ footerView.statusMessage }}
+        </span>
+        <span v-if="footerView.destroyVisible" :class="['room-info', 'center']">{{
+          footerView.destroyMessage
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { TUIConstants, TUICore } from '@tencentcloud/tui-core-lite';
+import { IconHorizontalMore2, useUIKit, TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import { useLoginState } from '../../../../../states/LoginState';
+import { useRoomState } from '../../../../../states/RoomState';
+import { Avatar } from '../../../../Avatar';
+import type { CustomMessageInfo, MessageInfo } from '@atomicxcore/core';
+
+enum RoomState {
+  CREATING = 'creating',
+  CREATED = 'created',
+  DESTROYED = 'destroyed',
+}
+
+const { t } = useUIKit();
+
+const props = defineProps<{
+  message: MessageInfo;
+}>();
+
+const { loginUserInfo } = useLoginState();
+const { currentRoom } = useRoomState();
+const joinedRoomId = ref('');
+
+interface RoomMessagePayload {
+  businessID: string;
+  owner: string;
+  roomName: string;
+  roomId: string;
+  roomState: RoomState;
+  userList: {
+    faceUrl: string;
+    nickName: string;
+    userId: string;
+  }[];
+  ownerName: string;
+}
+
+const getDefaultRoomMessagePayload = (): RoomMessagePayload => ({
+  businessID: 'group_room_message',
+  owner: '',
+  roomName: '',
+  roomId: '',
+  roomState: RoomState.DESTROYED,
+  userList: [],
+  ownerName: '',
+});
+
+const parseRoomMessagePayload = (message: MessageInfo): RoomMessagePayload => {
+  try {
+    const customData = (message as CustomMessageInfo).messagePayload?.customData;
+    return {
+      ...getDefaultRoomMessagePayload(),
+      ...JSON.parse(customData || '{}'),
+    };
+  } catch {
+    return getDefaultRoomMessagePayload();
+  }
+};
+
+const handleMessage = (message: MessageInfo) => {
+  const currentUser = loginUserInfo.value?.userId;
+  const messagePayload = parseRoomMessagePayload(message);
+  const { businessID, owner, roomId, roomState, roomName, userList, ownerName } = messagePayload;
+  const isInnerRoom = joinedRoomId.value === roomId;
+  const isRoomCreateByMe = owner === currentUser;
+  return {
+    isInnerRoom,
+    isRoomMessage: businessID === 'group_room_message' || businessID === 'quick_conference',
+    isRoomCreateByMe,
+    isMessageFromMe: message.from.userID === currentUser,
+    roomId,
+    roomState,
+    roomName,
+    userList,
+    ownerName,
+    owner,
+  };
+};
+
+const roomCardData = computed<{
+  isInnerRoom: boolean;
+  isRoomMessage: boolean;
+  isRoomCreateByMe: boolean;
+  isMessageFromMe: boolean;
+  roomId: string;
+  roomState: RoomState;
+  roomName: string;
+  userList: {
+    faceUrl: string;
+    nickName: string;
+    userId: string;
+  }[];
+  ownerName: string;
+  owner: string;
+}>(() => handleMessage(props.message));
+
+const contentTitleClass = computed(() => {
+  const stateMap = {
+    [RoomState.CREATING]: 'default',
+    [RoomState.CREATED]: 'success',
+    [RoomState.DESTROYED]: 'default',
+  };
+  return stateMap[roomCardData.value.roomState];
+});
+const footerClass = computed(() => {
+  const stateMap = {
+    [RoomState.CREATING]: 'center',
+    [RoomState.CREATED]: 'default',
+    [RoomState.DESTROYED]: 'center',
+  };
+  return stateMap[roomCardData.value.roomState];
+});
+const footerView = computed(() => {
+  const defaultView = {
+    infoVisible: false,
+    infoMessage: '',
+    statusVisible: false,
+    statusMessage: '',
+    destroyVisible: false,
+    destroyMessage: '',
+  };
+
+  if (roomCardData.value.roomState === RoomState.CREATING) {
+    return {
+      ...defaultView,
+      destroyVisible: true,
+      destroyMessage: t('RoomMessage.initiating'),
+    };
+  }
+
+  if (
+    roomCardData.value.isRoomCreateByMe
+    && roomCardData.value.roomState === RoomState.CREATED
+  ) {
+    return {
+      ...defaultView,
+      infoVisible: true,
+      infoMessage:
+        roomCardData.value.userList.length > 1
+          ? t('RoomMessage.x_people_have_joined', {
+            number: roomCardData.value.userList.length - 1,
+          })
+          : t('RoomMessage.waiting_for_members_to_join_the_meeting'),
+      statusVisible: true,
+      statusMessage: roomCardData.value.isInnerRoom
+        ? t('RoomMessage.already_joined')
+        : t('RoomMessage.enter_the_meeting'),
+    };
+  }
+  if (
+    !roomCardData.value.isRoomCreateByMe
+    && roomCardData.value.roomState === RoomState.CREATED
+  ) {
+    return {
+      ...defaultView,
+      infoVisible: true,
+      infoMessage: t('RoomMessage.x_people_are_in_the_meeting', {
+        number: roomCardData.value.userList.length,
+      }),
+      statusVisible: true,
+      statusMessage: roomCardData.value.isInnerRoom
+        ? t('RoomMessage.already_joined')
+        : t('RoomMessage.enter_the_meeting'),
+    };
+  }
+  if (roomCardData.value.roomState === RoomState.DESTROYED) {
+    return {
+      ...defaultView,
+      destroyVisible: true,
+      destroyMessage: t('RoomMessage.the_meeting_has_ended'),
+    };
+  }
+  return defaultView;
+});
+
+const enterRoom = () => {
+  if (roomCardData.value.isInnerRoom || roomCardData.value.roomState !== RoomState.CREATED) {
+    return;
+  }
+
+  if (currentRoom.value?.roomId && currentRoom.value.roomId !== roomCardData.value.roomId) {
+    TUIToast({
+      type: TOAST_TYPE.WARNING,
+      message: t('RoomMessage.cannot_enter_while_in_other_meeting'),
+    });
+    return;
+  }
+
+  TUICore.notifyEvent(TUIConstants.TUIRoom.SERVICE.NAME, TUIConstants.TUIRoom.SERVICE.EVENT.JOIN_ROOM, { roomId: roomCardData.value.roomId });
+};
+
+const roomJoinedNotification = {
+  onNotifyEvent: (_eventName: string, subKey: string, params: { roomInfo?: { roomId?: string } }) => {
+    if (subKey !== TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_JOINED) {
+      return;
+    }
+    joinedRoomId.value = params.roomInfo?.roomId || '';
+  },
+};
+
+const roomLeftNotification = {
+  onNotifyEvent: (_eventName: string, subKey: string, params: { roomId: string }) => {
+    if (subKey !== TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_LEFT) {
+      return;
+    }
+    if (joinedRoomId.value === params.roomId) {
+      joinedRoomId.value = '';
+    }
+  },
+};
+
+onMounted(() => {
+  joinedRoomId.value = currentRoom.value?.roomId || '';
+  TUICore.registerEvent(
+    TUIConstants.TUIRoom.SERVICE.NAME,
+    TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_JOINED,
+    roomJoinedNotification,
+  );
+  TUICore.registerEvent(
+    TUIConstants.TUIRoom.SERVICE.NAME,
+    TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_LEFT,
+    roomLeftNotification,
+  );
+});
+
+watch(
+  () => currentRoom.value?.roomId,
+  (roomId) => {
+    joinedRoomId.value = roomId || '';
+  },
+);
+
+onUnmounted(() => {
+  TUICore.unregisterEvent(
+    TUIConstants.TUIRoom.SERVICE.NAME,
+    TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_JOINED,
+    roomJoinedNotification,
+  );
+  TUICore.unregisterEvent(
+    TUIConstants.TUIRoom.SERVICE.NAME,
+    TUIConstants.TUIRoom.SERVICE.EVENT.ROOM_LEFT,
+    roomLeftNotification,
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.room-message-container.isMe {
+  .room-message-card-container {
+    border-top-right-radius: 0;
+  }
+}
+
+.room-message-container.notMe {
+  .room-message-card-container {
+    border-top-left-radius: 0;
+  }
+}
+
+.room-message-card-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 238px;
+  max-width: 436px;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+  border: 1px solid var(--stroke-color-primary);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 20px;
+
+  .content {
+    padding: 16px 16px 16px;
+    background: linear-gradient(90deg,
+        var(--uikit-color-theme-1) -17.36%,
+        var(--bg-color-entrycard) 103.56%);
+    border-bottom: 1px solid var(--stroke-color-primary);
+
+    .content-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      line-height: 20px;
+
+      p {
+        margin: 0;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 16px 16px;
+      }
+    }
+
+    .content-desc {
+      padding-top: 10px;
+
+      .title {
+        overflow: hidden;
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--text-color-primary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .users {
+        display: flex;
+        flex-direction: row;
+        margin-top: 10px;
+        padding: 0;
+        list-style: none;
+        gap: 2px;
+
+        .more {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 26px;
+          height: 26px;
+          margin: 0;
+          font-size: 16px;
+          font-weight: bold;
+          line-height: 1;
+          color: var(--text-color-secondary);
+        }
+
+        .avatar {
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+
+  .footer {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 12px;
+    color: var(--text-color-tertiary);
+    background: var(--bg-color-operate);
+
+    .room-info {
+      font-size: 14px;
+      line-height: 21px;
+    }
+
+    .room-info.center {
+      width: 100%;
+      text-align: center;
+    }
+
+    .room-status {
+      padding: 10px;
+      font-size: 14px;
+      font-weight: 900;
+      color: var(--text-color-button);
+      cursor: pointer;
+      background-color: var(--button-color-primary-default);
+      border-radius: 4px;
+    }
+  }
+
+}
+
+.content-title.default {
+  color: var(--text-color-tertiary);
+
+  .icon {
+    background-image: url("./images/room_default.svg");
+  }
+}
+
+.content-title.success {
+  color: var(--text-color-success);
+
+  .icon {
+    background-image: url("./images/room_success.svg");
+  }
+}
+
+.room-message-card-container .footer.in-room {
+  .room-status {
+    color: var(--text-color-tertiary);
+    background-color: var(--bg-color-function);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.room-message-card-container.destroyed .content {
+  background: var(--bg-color-default);
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_default.svg b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_default.svg
new file mode 100644
index 0000000..5877610
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_default.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.10011 3.56676C1.51101 3.56676 1.03345 4.04432 1.03345 4.63342V12.3668C1.03345 12.9559 1.51101 13.4334 2.10011 13.4334H10.8557C11.4448 13.4334 11.9223 12.9559 11.9223 12.3668V4.63342C11.9223 4.04432 11.4448 3.56676 10.8557 3.56676H2.10011ZM13.0778 10.2381V6.71426L15.564 5.23907C15.7418 5.13359 15.9667 5.2617 15.9667 5.4684V11.5867C15.9667 11.797 15.7347 11.9245 15.5572 11.8118L13.0778 10.2381Z" fill="#888888"/>
+<path d="M8.30081 9.77528L8.36937 9.66093C8.35409 9.65177 8.3347 9.64033 8.31659 9.63068L8.25001 9.5952L8.18532 9.63399C8.14764 9.65658 8.09515 9.69099 8.04473 9.72404C8.03779 9.72858 8.0309 9.7331 8.02408 9.73757L8.02372 9.7378C7.92751 9.80123 7.80223 9.88304 7.63349 9.9856C7.42327 10.1133 7.19272 10.1008 6.98997 10.0394C6.78688 9.97794 6.62849 9.87192 6.58307 9.83944L6.58315 9.83934L6.5782 9.83612C6.51542 9.79529 6.15172 9.55749 5.881 9.28701C5.60992 9.01416 5.36963 8.65012 5.33047 8.58946L5.3306 8.58937L5.32685 8.58414C5.29415 8.53849 5.18739 8.37997 5.12544 8.17688C5.06361 7.97416 5.05097 7.74396 5.17932 7.5342C5.28216 7.36721 5.36323 7.24274 5.42576 7.14753L5.42607 7.14704C5.43387 7.13505 5.44193 7.12274 5.45003 7.11035C5.48048 7.06382 5.51162 7.01622 5.5322 6.98109L5.5709 6.91502L5.53334 6.84829L5.5187 6.82268L5.50538 6.7994L5.50541 6.79938L5.50388 6.79679C5.49229 6.77725 5.48023 6.75561 5.46607 6.73021C5.46211 6.72309 5.45798 6.71568 5.45364 6.70793L5.45353 6.70772C4.85378 5.63982 4.45303 5.53216 4.31781 5.53216H4.30982H4.29136L4.27359 5.53717C4.16844 5.56686 4.07356 5.64673 3.99628 5.74429C3.91683 5.84458 3.84602 5.97586 3.79288 6.12969C3.68638 6.43799 3.64747 6.84646 3.76108 7.30215L3.7611 7.30222C4.0065 8.28413 4.53062 9.21646 5.23669 9.92713L5.23724 9.92767C5.94652 10.6334 6.87957 11.1561 7.86208 11.4003C8.31016 11.513 8.71757 11.4733 9.02661 11.3674C9.18088 11.3145 9.31315 11.2443 9.41453 11.1659C9.51288 11.0899 9.59468 10.9962 9.62577 10.892L9.62604 10.8921L9.62796 10.8837C9.64335 10.8166 9.62316 10.7413 9.59211 10.674C9.55844 10.6009 9.50215 10.5158 9.41677 10.4204C9.24601 10.2295 8.95073 9.9883 8.45697 9.71092L8.45668 9.71075C8.42299 9.69194 8.39422 9.67564 8.36874 9.66056L8.30081 9.77528Z" fill="white" stroke="white" stroke-width="0.266667"/>
+</svg>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_primary.svg b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_primary.svg
new file mode 100644
index 0000000..156616a
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_primary.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.60011 3.35596C1.01101 3.35596 0.533447 3.83352 0.533447 4.42262V12.156C0.533447 12.7451 1.01101 13.2226 1.60011 13.2226H10.3557C10.9448 13.2226 11.4223 12.7451 11.4223 12.156V4.42262C11.4223 3.83352 10.9448 3.35596 10.3557 3.35596H1.60011ZM12.5778 10.0273V6.50346L15.064 5.02827C15.2418 4.92279 15.4667 5.0509 15.4667 5.2576V11.3759C15.4667 11.5862 15.2347 11.7137 15.0572 11.601L12.5778 10.0273Z" fill="#147AFF"/>
+<path d="M7.80081 9.56451L7.86937 9.45015C7.85409 9.44099 7.8347 9.42955 7.81659 9.4199L7.75001 9.38442L7.68532 9.42321C7.64764 9.4458 7.59515 9.48021 7.54473 9.51326C7.53779 9.51781 7.5309 9.52233 7.52408 9.52679L7.52372 9.52702C7.42751 9.59046 7.30223 9.67227 7.13349 9.77482C6.92327 9.90251 6.69272 9.89001 6.48997 9.82864C6.28688 9.76717 6.12849 9.66115 6.08307 9.62867L6.08315 9.62856L6.0782 9.62534C6.01542 9.58452 5.65172 9.34671 5.381 9.07624C5.10992 8.80338 4.86963 8.43934 4.83047 8.37868L4.8306 8.3786L4.82685 8.37336C4.79415 8.32771 4.68739 8.1692 4.62544 7.9661C4.56361 7.76339 4.55097 7.53318 4.67932 7.32342C4.78216 7.15643 4.86323 7.03196 4.92576 6.93675L4.92607 6.93626C4.93387 6.92428 4.94193 6.91196 4.95003 6.89957C4.98048 6.85304 5.01162 6.80544 5.0322 6.77031L5.0709 6.70424L5.03334 6.63751L5.0187 6.61191L5.00538 6.58862L5.00541 6.5886L5.00388 6.58601C4.99229 6.56647 4.98023 6.54484 4.96607 6.51943C4.96211 6.51231 4.95798 6.5049 4.95364 6.49715L4.95353 6.49694C4.35378 5.42905 3.95303 5.32138 3.81781 5.32138H3.80982H3.79136L3.77359 5.32639C3.66844 5.35608 3.57356 5.43595 3.49628 5.53351C3.41683 5.6338 3.34602 5.76508 3.29288 5.91891C3.18638 6.22721 3.14747 6.63568 3.26108 7.09137L3.2611 7.09145C3.5065 8.07335 4.03062 9.00568 4.73669 9.71635L4.73724 9.7169C5.44652 10.4226 6.37957 10.9453 7.36208 11.1895C7.81016 11.3022 8.21757 11.2625 8.52661 11.1566C8.68088 11.1038 8.81315 11.0336 8.91453 10.9552C9.01288 10.8791 9.09468 10.7854 9.12577 10.6812L9.12604 10.6813L9.12796 10.6729C9.14335 10.6058 9.12316 10.5305 9.09211 10.4632C9.05844 10.3901 9.00215 10.305 8.91677 10.2096C8.74601 10.0187 8.45073 9.77752 7.95697 9.50014L7.95668 9.49998C7.92299 9.48117 7.89422 9.46486 7.86874 9.44978L7.80081 9.56451Z" fill="white" stroke="white" stroke-width="0.266667"/>
+</svg>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_success.svg b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_success.svg
new file mode 100644
index 0000000..b03e1ea
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/images/room_success.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.60011 3.56665C1.01101 3.56665 0.533447 4.04421 0.533447 4.63332V12.3666C0.533447 12.9558 1.01101 13.4333 1.60011 13.4333H10.3557C10.9448 13.4333 11.4223 12.9558 11.4223 12.3666V4.63332C11.4223 4.04421 10.9448 3.56665 10.3557 3.56665H1.60011ZM12.5778 10.2379V6.71416L15.064 5.23896C15.2418 5.13348 15.4667 5.2616 15.4667 5.46829V11.5866C15.4667 11.7969 15.2347 11.9244 15.0572 11.8117L12.5778 10.2379Z" fill="#15B72D"/>
+<path d="M7.80081 9.7752L7.86937 9.66085C7.85409 9.65168 7.8347 9.64025 7.81659 9.63059L7.75001 9.59512L7.68532 9.63391C7.64764 9.6565 7.59515 9.6909 7.54473 9.72395C7.53779 9.7285 7.5309 9.73302 7.52408 9.73748L7.52372 9.73772C7.42751 9.80115 7.30223 9.88296 7.13349 9.98551C6.92327 10.1132 6.69272 10.1007 6.48997 10.0393C6.28688 9.97786 6.12849 9.87184 6.08307 9.83936L6.08315 9.83925L6.0782 9.83604C6.01542 9.79521 5.65172 9.5574 5.381 9.28693C5.10992 9.01407 4.86963 8.65004 4.83047 8.58937L4.8306 8.58929L4.82685 8.58406C4.79415 8.53841 4.68739 8.37989 4.62544 8.17679C4.56361 7.97408 4.55097 7.74387 4.67932 7.53412C4.78216 7.36712 4.86323 7.24265 4.92576 7.14744L4.92607 7.14695C4.93387 7.13497 4.94193 7.12265 4.95003 7.11026C4.98048 7.06373 5.01162 7.01613 5.0322 6.981L5.0709 6.91493L5.03334 6.8482L5.0187 6.8226L5.00538 6.79931L5.00541 6.7993L5.00388 6.79671C4.99229 6.77717 4.98023 6.75553 4.96607 6.73012C4.96211 6.72301 4.95798 6.71559 4.95364 6.70785L4.95353 6.70763C4.35378 5.63974 3.95303 5.53207 3.81781 5.53207H3.80982H3.79136L3.77359 5.53709C3.66844 5.56678 3.57356 5.64664 3.49628 5.7442C3.41683 5.8445 3.34602 5.97578 3.29288 6.12961C3.18638 6.4379 3.14747 6.84637 3.26108 7.30207L3.2611 7.30214C3.5065 8.28405 4.03062 9.21637 4.73669 9.92705L4.73724 9.92759C5.44652 10.6333 6.37957 11.156 7.36208 11.4002C7.81016 11.5129 8.21757 11.4732 8.52661 11.3673C8.68088 11.3145 8.81315 11.2443 8.91453 11.1658C9.01288 11.0898 9.09468 10.9961 9.12577 10.8919L9.12604 10.892L9.12796 10.8836C9.14335 10.8165 9.12316 10.7412 9.09211 10.6739C9.05844 10.6008 9.00215 10.5157 8.91677 10.4203C8.74601 10.2294 8.45073 9.98821 7.95697 9.71084L7.95668 9.71067C7.92299 9.69186 7.89422 9.67556 7.86874 9.66047L7.80081 9.7752Z" fill="white" stroke="white" stroke-width="0.266667"/>
+</svg>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/index.ts
new file mode 100644
index 0000000..aee9850
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/QuickConferenceMessage/index.ts
@@ -0,0 +1,3 @@
+import QuickConferenceMessage from './QuickConferenceMessage.vue';
+
+export { QuickConferenceMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/index.ts
new file mode 100644
index 0000000..cc05d35
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/CustomMessage/index.ts
@@ -0,0 +1,3 @@
+import CustomMessage from './CustomMessage.vue';
+
+export { CustomMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FaceMessage/FaceMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FaceMessage/FaceMessage.vue
new file mode 100644
index 0000000..c557dca
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FaceMessage/FaceMessage.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    :class="cs('face-message', {
+      'face-message--flow-in': !message.isSentBySelf,
+      'face-message--flow-out': message.isSentBySelf,
+    })"
+  >
+    <img
+      :src="messageContent.url"
+      :alt="messageContent.name"
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cs from 'classnames';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface FaceMessageProps {
+  message: MessageInfo;
+}
+
+interface FaceMessageContent {
+  /** sender show name */
+  showName: string;
+  /** face image name [yz00@2x] */
+  name: string;
+  /** face image type[duplicate] */
+  type: string;
+  /** face image url */
+  url: string;
+}
+
+const props = withDefaults(defineProps<FaceMessageProps>(), {
+  message: () => ({} as MessageInfo),
+});
+
+const messageContent = {
+  url: 'https://web.sdk.qcloud.com/im/assets/face-elem/yz13@2x.png',
+  name: 'yz13@2x',
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../bubble-mixins' as bubble;
+
+.face-message {
+  @include bubble.bubble-base();
+  // Face message styles will be implemented here
+  width: 150px;
+  height: 150px;
+  padding: 10px;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FaceMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FaceMessage/index.ts
new file mode 100644
index 0000000..bf3694b
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FaceMessage/index.ts
@@ -0,0 +1,3 @@
+import FaceMessage from './FaceMessage.vue';
+
+export { FaceMessage };
\ No newline at end of file
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FileMessage/FileMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FileMessage/FileMessage.vue
new file mode 100644
index 0000000..208e741
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FileMessage/FileMessage.vue
@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import {
+  IconFile,
+  IconDownload,
+  TUIToast,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import type { FileMessagePayload, MessageInfo } from '@atomicxcore/core';
+
+interface FileMessageProps {
+  message: MessageInfo;
+}
+
+const { t } = useUIKit();
+
+const props = withDefaults(defineProps<FileMessageProps>(), {
+  message: () => ({} as MessageInfo),
+});
+
+const messageContent = computed(() => props.message.messagePayload as FileMessagePayload);
+
+function formatFileSize(bytes: number | undefined): string {
+  if (!bytes || bytes <= 0) {
+    return '';
+  }
+  const MB = 1024 * 1024;
+  if (bytes >= MB) {
+    return `${(bytes / MB).toFixed(1)} MB`;
+  }
+  return `${(bytes / 1024).toFixed(1)} KB`;
+}
+
+const handleFileClick = async (event: MouseEvent) => {
+  // If ctrl key (Windows) or command key (Mac) is pressed, open in new tab
+  if (event.metaKey || event.ctrlKey) {
+    window.open(messageContent.value.fileURL, '_blank');
+  } else {
+    try {
+      event.preventDefault();
+
+      const response = await fetch(messageContent.value.fileURL ?? '');
+      if (!response.ok) {
+        throw new Error('Download failed');
+      }
+
+      const blob = await response.blob();
+      const blobUrl = window.URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = messageContent.value.fileName ?? '';
+      link.click();
+
+      // Clean up blob url
+      window.URL.revokeObjectURL(blobUrl);
+    } catch {
+      TUIToast.error({
+        message: t('MessageList.download_failed'),
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <View
+    :class="cs('file-message', {
+      'file-message--flow-in': !message.isSentBySelf,
+      'file-message--flow-out': message.isSentBySelf,
+    })"
+    @click="handleFileClick"
+  >
+    <View class="file-message__icon">
+      <IconFile />
+    </View>
+    <View class="file-message__middle">
+      <View class="file-message__name">
+        {{ messageContent.fileName }}
+      </View>
+      <View class="file-message__size">
+        {{ formatFileSize(messageContent.fileSize) }}
+      </View>
+    </View>
+    <View class="file-message__download">
+      <IconDownload />
+    </View>
+  </View>
+</template>
+
+<style lang="scss" scoped>
+@use '../../../../styles/mixins/text' as text;
+@use '../bubble-mixins' as bubble;
+
+.file-message {
+  @include bubble.bubble-base();
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  max-width: 250px;
+
+  &__icon {
+    flex-shrink: 0;
+    color: var(--icon-color-primary);
+  }
+
+  &__download {
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    color: var(--icon-color-primary);
+  }
+
+  &:hover {
+    .file-message__download {
+      opacity: 1;
+    }
+  }
+
+  &__middle {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__name {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+
+    @include text.text-ellipsis;
+  }
+
+  &__size {
+    font-size: 12px;
+    color: var(--text-color-secondary);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FileMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FileMessage/index.ts
new file mode 100644
index 0000000..f61d7a8
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/FileMessage/index.ts
@@ -0,0 +1,3 @@
+import FileMessage from './FileMessage.vue';
+
+export { FileMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/GroupTipMessage/GroupTipMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/GroupTipMessage/GroupTipMessage.vue
new file mode 100644
index 0000000..4f1871b
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/GroupTipMessage/GroupTipMessage.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { ConversationType, MessageType } from '@atomicxcore/core';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { isCallMessage, parseCallMessageText, isCreateGroupMessage } from '../../../../utils/call';
+import { resolveGroupTipMessage } from '../../../../utils/resolveGroupTipMessage';
+import type { MessageInfo, TipsMessageInfo } from '@atomicxcore/core';
+
+interface GroupTipMessageProps {
+  message: MessageInfo;
+}
+
+const props = defineProps<GroupTipMessageProps>();
+
+const { t } = useUIKit();
+
+const renderText = computed(() => {
+  if (isCreateGroupMessage(props.message)) {
+    const {
+      nameCard,
+      nickname,
+      userID,
+    } = props.message.from;
+    return `${nameCard || nickname || userID} ${t('MessageList.create_group')}`;
+  }
+  if (isCallMessage(props.message) && props.message.conversationType === ConversationType.Group) {
+    return parseCallMessageText(props.message, t);
+  }
+  if (props.message.messageType === MessageType.Tips) {
+    return resolveGroupTipMessage(props.message as TipsMessageInfo).text;
+  }
+  return '';
+});
+</script>
+
+<template>
+  <div :class="cs('group-tip-message')">
+    {{ renderText }}
+  </div>
+</template>
+
+<style lang="scss">
+.group-tip-message {
+  color: var(--text-color-secondary);
+  text-align: center;
+  font-size: 14px;
+  margin: 4px 0;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/GroupTipMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/GroupTipMessage/index.ts
new file mode 100644
index 0000000..4321888
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/GroupTipMessage/index.ts
@@ -0,0 +1,3 @@
+import GroupTipMessage from "./GroupTipMessage.vue";
+
+export { GroupTipMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/ImageMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/ImageMessage.vue
new file mode 100644
index 0000000..a40c69d
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/ImageMessage.vue
@@ -0,0 +1,439 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import cs from 'classnames';
+import ImagePreview from './ImagePreview.vue';
+import type { ImageMessageInfo } from '@atomicxcore/core';
+
+interface ImageMessageProps {
+  message: ImageMessageInfo;
+  isLastMessage?: boolean;
+}
+
+interface ImageMessageContent {
+  url: string;
+  width?: number;
+  height?: number;
+  showName?: string;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const MAX_HEIGHT = 320;
+const MAX_WIDTH = 240;
+const MIN_HEIGHT = 50;
+const MIN_WIDTH = 120;
+const DEFAULT_ASPECT_RATIO = 4 / 3;
+
+const props = withDefaults(defineProps<ImageMessageProps>(), {
+  isLastMessage: false,
+});
+
+const messageContent = computed((): ImageMessageContent => {
+  const p = props.message.messagePayload;
+  return {
+    url: p.originalImageURL || p.largeImageURL || p.thumbImageURL || '',
+    width: p.originalImageWidth,
+    height: p.originalImageHeight,
+  };
+});
+
+const getInitialLoadingState = (url: string): 'loading' | 'loaded' | 'error' => {
+  // For blob URLs, usually newly created and need loading
+  if (url.startsWith('blob:')) {
+    return 'loading';
+  }
+
+  // Try quick cache detection (synchronous detection)
+  const img = new Image();
+  img.src = url;
+
+  // If image is already fully loaded (in cache), show immediately
+  if (img.complete && img.naturalWidth > 0) {
+    return 'loaded';
+  }
+
+  return 'loading';
+};
+
+const loadingState = ref<'loading' | 'loaded' | 'error'>(getInitialLoadingState(messageContent.value.url));
+const naturalSize = ref<{ width: number; height: number; aspectRatio: number } | null>(
+  messageContent.value.width && messageContent.value.height
+    ? {
+      width: messageContent.value.width,
+      height: messageContent.value.height,
+      aspectRatio: messageContent.value.width / messageContent.value.height,
+    }
+    : null,
+);
+
+const imageRef = ref<HTMLImageElement | null>(null);
+const containerRef = ref<HTMLDivElement | null>(null);
+let observerRef: IntersectionObserver | null = null;
+
+const isPreviewOpen = ref(false);
+let previousBodyOverflow: string | null = null;
+
+const isBlobImage = computed(() => messageContent.value.url.startsWith('blob'));
+
+// Utility function to get image dimensions
+const getImageDimensionsFromBlobImage = (url: string): Promise<{ width: number; height: number }> => new Promise((resolve, reject) => {
+  const img = new Image();
+  img.onload = () => {
+    resolve({ width: img.naturalWidth, height: img.naturalHeight });
+  };
+  img.onerror = reject;
+  img.src = url;
+});
+
+// Calculate final display size
+const displaySize = computed(() => {
+  // If no natural size info, use default values
+  if (!naturalSize.value) {
+    return {
+      width: Math.min(MAX_HEIGHT * DEFAULT_ASPECT_RATIO, MAX_WIDTH),
+      height: MAX_HEIGHT,
+      aspectRatio: DEFAULT_ASPECT_RATIO,
+    };
+  }
+
+  const { width: originalWidth, height: originalHeight, aspectRatio } = naturalSize.value;
+
+  // Start from original dimensions
+  let finalWidth = originalWidth;
+  let finalHeight = originalHeight;
+
+  // Step 1: Clamp height to MAX_HEIGHT
+  if (finalHeight > MAX_HEIGHT) {
+    finalHeight = MAX_HEIGHT;
+    finalWidth = finalHeight * aspectRatio;
+  }
+
+  // Step 2: Clamp width to MAX_WIDTH
+  if (finalWidth > MAX_WIDTH) {
+    finalWidth = MAX_WIDTH;
+    finalHeight = finalWidth / aspectRatio;
+  }
+
+  // Step 3: Ensure minimum height
+  if (finalHeight < MIN_HEIGHT) {
+    finalHeight = MIN_HEIGHT;
+    finalWidth = finalHeight * aspectRatio;
+  }
+
+  // Step 4: protect mobile Safari from rendering ultra-narrow media bubbles
+  if (finalWidth < MIN_WIDTH) {
+    finalWidth = MIN_WIDTH;
+  }
+
+  return {
+    width: finalWidth,
+    height: finalHeight,
+    aspectRatio,
+  };
+});
+
+// Initialize lazy loading
+const initializeLazyLoading = async () => {
+  await nextTick();
+
+  if (!imageRef.value) {
+    return;
+  }
+
+  if (loadingState.value === 'loaded') {
+    imageRef.value.src = messageContent.value.url;
+    return;
+  }
+
+  // create IntersectionObserver instance
+  observerRef = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting) {
+      // Image enters viewport, start loading
+      if (imageRef.value) {
+        imageRef.value.src = messageContent.value.url;
+      }
+      // Stop observing
+      if (observerRef) {
+        observerRef.disconnect();
+      }
+    }
+  }, { threshold: 0.1 });
+
+  // Start observing image element
+  observerRef.observe(imageRef.value);
+};
+
+// Handle blob image dimension fetching
+const fetchBlobDimensions = async () => {
+  if (isBlobImage.value && !naturalSize.value) {
+    try {
+      const dimensions = await getImageDimensionsFromBlobImage(messageContent.value.url);
+      if (dimensions) {
+        naturalSize.value = {
+          width: dimensions.width,
+          height: dimensions.height,
+          aspectRatio: dimensions.width / dimensions.height,
+        };
+      }
+    } catch (_error) {
+      naturalSize.value = {
+        width: 400,
+        height: 300,
+        aspectRatio: DEFAULT_ASPECT_RATIO,
+      };
+    }
+  }
+};
+
+// Handle image load event
+const handleImageLoad = (e: Event) => {
+  const img = e.target as HTMLImageElement;
+
+  // Update natural size (if not obtained before)
+  if (!naturalSize.value || isBlobImage.value) {
+    naturalSize.value = {
+      width: img.naturalWidth,
+      height: img.naturalHeight,
+      aspectRatio: img.naturalWidth / img.naturalHeight,
+    };
+  }
+
+  loadingState.value = 'loaded';
+};
+
+// Handle image load error
+const handleImageError = () => {
+  loadingState.value = 'error';
+};
+
+function handlePreviewOpen() {
+  if (loadingState.value !== 'loaded') {
+    return;
+  }
+  if (!messageContent.value.url) {
+    return;
+  }
+  isPreviewOpen.value = true;
+}
+
+function handlePreviewClose() {
+  isPreviewOpen.value = false;
+}
+
+function lockBodyScroll() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  previousBodyOverflow = document.body.style.overflow;
+  document.body.style.overflow = 'hidden';
+}
+
+function unlockBodyScroll() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  if (previousBodyOverflow !== null) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = null;
+  }
+}
+
+// Watch for message content changes
+watch(() => messageContent.value.url, () => {
+  loadingState.value = getInitialLoadingState(messageContent.value.url);
+  naturalSize.value = messageContent.value.width && messageContent.value.height
+    ? {
+      width: messageContent.value.width,
+      height: messageContent.value.height,
+      aspectRatio: messageContent.value.width / messageContent.value.height,
+    }
+    : null;
+
+  initializeLazyLoading();
+  fetchBlobDimensions();
+});
+
+watch(isPreviewOpen, (open) => {
+  if (open) {
+    lockBodyScroll();
+  } else {
+    unlockBodyScroll();
+  }
+});
+
+onMounted(() => {
+  initializeLazyLoading();
+  fetchBlobDimensions();
+});
+
+onUnmounted(() => {
+  // Stop observing when component unmounts
+  if (observerRef) {
+    observerRef.disconnect();
+  }
+  unlockBodyScroll();
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    v-bind="$attrs"
+    :class="cs('image-message', {
+      'image-message--loading': loadingState === 'loading',
+      'image-message--error': loadingState === 'error',
+      'image-message--loaded': loadingState === 'loaded',
+    })"
+    :style="{
+      width: `${displaySize.width}px`,
+      height: `${displaySize.height}px`,
+      aspectRatio: `${displaySize.aspectRatio}`,
+    }"
+    role="button"
+    tabindex="0"
+    @click="handlePreviewOpen"
+  >
+    <!-- skeleton -->
+    <div
+      v-if="loadingState === 'loading'"
+      class="image-placeholder"
+    />
+
+    <!-- error state -->
+    <div
+      v-if="loadingState === 'error'"
+      class="image-error"
+    >
+      <div class="image-error__icon" />
+      <span class="image-error__text">Load failed</span>
+    </div>
+
+    <!-- image -->
+    <img
+      v-else
+      ref="imageRef"
+      :class="cs('image', {
+        'image--visible': loadingState === 'loaded',
+      })"
+      :alt="messageContent.showName || 'image message'"
+      loading="lazy"
+      @load="handleImageLoad"
+      @error="handleImageError"
+    >
+  </div>
+  <ImagePreview
+    :open="isPreviewOpen"
+    :src="messageContent.url"
+    :alt="messageContent.showName || 'image message preview'"
+    @close="handlePreviewClose"
+  />
+</template>
+
+<style lang="scss" scoped>
+@use '../bubble-mixins' as bubble;
+
+.image-message {
+  @include bubble.bubble-media();
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.3s ease-in-out;
+  min-height: 50px;
+  max-width: 100%;
+
+  &--loading {
+    background-color: #f0f0f0;
+  }
+
+  &--error {
+    background-color: #fff0f0;
+  }
+
+  &--loaded {
+    background-color: transparent;
+  }
+}
+
+.image-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      90deg,
+      rgba(245, 245, 245, 100%) 0%,
+      rgba(235, 235, 235, 100%) 50%,
+      rgba(245, 245, 245, 100%) 100%
+    );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.image-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  min-height: 50px;
+
+  &__icon {
+    width: 32px;
+    height: 32px;
+    margin-bottom: 8px;
+    background-color: #fdd;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 16px;
+      height: 2px;
+      background-color: #ff6b6b;
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__text {
+    font-size: 12px;
+    color: #ff6b6b;
+  }
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  min-height: 50px;
+
+  &--visible {
+    opacity: 1;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/ImagePreview.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/ImagePreview.vue
new file mode 100644
index 0000000..a13649c
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/ImagePreview.vue
@@ -0,0 +1,387 @@
+<script lang="ts" setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import cs from 'classnames';
+
+interface ImagePreviewProps {
+  open: boolean;
+  src: string;
+  alt?: string;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<ImagePreviewProps>();
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const scale = ref(1);
+const translate = ref({ x: 0, y: 0 });
+const isDragging = ref(false);
+const isPinching = ref(false);
+const lastPointer = ref({ x: 0, y: 0 });
+const isError = ref(false);
+const imgRef = ref<HTMLImageElement | null>(null);
+
+let pinchStartDistance: number | null = null;
+let pinchStartScale = 1;
+let pinchStartCenter = { x: 0, y: 0 };
+let pinchStartTranslate = { x: 0, y: 0 };
+let pinchOrigin = { x: 0, y: 0 };
+
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 3;
+
+function clampScale(value: number) {
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, value));
+}
+
+function resetTransform() {
+  scale.value = 1;
+  translate.value = { x: 0, y: 0 };
+  isDragging.value = false;
+  isPinching.value = false;
+}
+
+function handleClose() {
+  emit('close');
+  resetTransform();
+}
+
+function handleImageError() {
+  isError.value = true;
+}
+
+function handleWheel(event: WheelEvent) {
+  event.preventDefault();
+  const delta = event.deltaY > 0 ? -0.2 : 0.2;
+  const next = clampScale(scale.value + delta);
+  scale.value = next;
+}
+
+function handleDoubleClick() {
+  scale.value = scale.value === 1 ? 2 : 1;
+  if (scale.value === 1) {
+    translate.value = { x: 0, y: 0 };
+  }
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (event.pointerType === 'touch') {
+    return;
+  }
+  isDragging.value = true;
+  lastPointer.value = { x: event.clientX, y: event.clientY };
+  (event.target as HTMLElement)?.setPointerCapture(event.pointerId);
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (event.pointerType === 'touch' || !isDragging.value) {
+    return;
+  }
+  const dx = event.clientX - lastPointer.value.x;
+  const dy = event.clientY - lastPointer.value.y;
+  translate.value = {
+    x: translate.value.x + dx,
+    y: translate.value.y + dy,
+  };
+  lastPointer.value = { x: event.clientX, y: event.clientY };
+}
+
+function handlePointerUp(event: PointerEvent) {
+  if (event.pointerType === 'touch') {
+    return;
+  }
+  isDragging.value = false;
+  (event.target as HTMLElement)?.releasePointerCapture(event.pointerId);
+}
+
+function getTouchDistance(touches: TouchList) {
+  if (touches.length < 2) {
+    return null;
+  }
+  const [t1, t2] = [touches[0], touches[1]];
+  const dx = t1.clientX - t2.clientX;
+  const dy = t1.clientY - t2.clientY;
+  return Math.hypot(dx, dy);
+}
+
+function getTouchCenter(touches: TouchList) {
+  const [t1, t2] = [touches[0], touches[1]];
+  return {
+    x: (t1.clientX + t2.clientX) / 2,
+    y: (t1.clientY + t2.clientY) / 2,
+  };
+}
+
+function handleTouchStart(event: TouchEvent) {
+  if (event.touches.length === 2) {
+    event.preventDefault();
+    isDragging.value = false;
+    isPinching.value = true;
+    pinchStartDistance = getTouchDistance(event.touches);
+    pinchStartScale = scale.value;
+    pinchStartCenter = getTouchCenter(event.touches);
+    pinchStartTranslate = translate.value;
+    const rect = imgRef.value?.getBoundingClientRect();
+    pinchOrigin = rect
+      ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
+      : pinchStartCenter;
+  }
+}
+
+function handleTouchMove(event: TouchEvent) {
+  if (event.touches.length === 2 && pinchStartDistance) {
+    event.preventDefault();
+    const currentDistance = getTouchDistance(event.touches);
+    if (!currentDistance) {
+      return;
+    }
+    const factor = currentDistance / pinchStartDistance;
+    const nextScale = clampScale(pinchStartScale * factor);
+    const scaleFactor = nextScale / pinchStartScale;
+    const currentCenter = getTouchCenter(event.touches);
+
+    scale.value = nextScale;
+    translate.value = {
+      x: currentCenter.x - pinchOrigin.x - scaleFactor * (pinchStartCenter.x - pinchOrigin.x - pinchStartTranslate.x),
+      y: currentCenter.y - pinchOrigin.y - scaleFactor * (pinchStartCenter.y - pinchOrigin.y - pinchStartTranslate.y),
+    };
+  }
+}
+
+function handleTouchEnd(event: TouchEvent) {
+  if (event.touches.length < 2) {
+    pinchStartDistance = null;
+    isPinching.value = false;
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    handleClose();
+  }
+}
+
+watch(() => props.open, (isOpen) => {
+  if (!isOpen) {
+    resetTransform();
+    isError.value = false;
+  }
+});
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      v-if="open"
+      class="image-preview"
+      v-bind="$attrs"
+    >
+      <div class="image-preview__mask" @click="handleClose" />
+      <button
+        class="image-preview__close"
+        type="button"
+        aria-label="Close preview"
+        @click="handleClose"
+      />
+      <div class="image-preview__content">
+        <div class="image-preview__inner">
+          <div
+            class="image-preview__viewport"
+          >
+            <div :class="cs('image-preview__img-wrap', { 'image-preview__img-wrap--error': isError })">
+              <img
+                v-if="!isError"
+                ref="imgRef"
+                :src="src"
+                :alt="alt || 'image preview'"
+                :style="{
+                  transform: `translate3d(${translate.x}px, ${translate.y}px, 0) scale(${scale})`,
+                  transition: isPinching ? 'none' : undefined,
+                }"
+                class="image-preview__img"
+                draggable="false"
+                @error="handleImageError"
+                @wheel.prevent="handleWheel"
+                @dblclick.prevent="handleDoubleClick"
+                @pointerdown="handlePointerDown"
+                @pointermove="handlePointerMove"
+                @pointerup="handlePointerUp"
+                @pointercancel="handlePointerUp"
+                @touchstart="handleTouchStart"
+                @touchmove.prevent="handleTouchMove"
+                @touchend="handleTouchEnd"
+                @touchcancel="handleTouchEnd"
+              >
+              <div v-else class="image-preview__error">
+                <div class="image-preview__error-icon" />
+                <span class="image-preview__error-text">Preview failed</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped lang="scss">
+.image-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+
+.image-preview__mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+  z-index: 1;
+}
+
+.image-preview__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  cursor: pointer;
+  z-index: 3;
+}
+
+.image-preview__close::before,
+.image-preview__close::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: 8px;
+  width: 16px;
+  height: 2px;
+  background: #fff;
+}
+
+.image-preview__close::before {
+  transform: rotate(45deg);
+}
+
+.image-preview__close::after {
+  transform: rotate(-45deg);
+}
+
+.image-preview__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  box-sizing: border-box;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.image-preview__inner {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.image-preview__viewport {
+  position: relative;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  touch-action: none;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.image-preview__img-wrap {
+  position: relative;
+  max-width: 100vw;
+  max-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  border-radius: 0;
+  background: transparent;
+  pointer-events: auto;
+}
+
+.image-preview__img {
+  max-width: 100vw;
+  max-height: 100vh;
+  object-fit: contain;
+  user-select: none;
+  transition: transform 0.1s ease-out;
+  pointer-events: auto;
+}
+
+.image-preview__img-wrap--error {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.image-preview__error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px;
+  color: #fff;
+  font-size: 14px;
+}
+
+.image-preview__error-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  position: relative;
+}
+
+.image-preview__error-icon::before,
+.image-preview__error-icon::after {
+  content: "";
+  position: absolute;
+  top: 22px;
+  left: 14px;
+  width: 20px;
+  height: 2px;
+  background: #fff;
+}
+
+.image-preview__error-icon::before { transform: rotate(45deg); }
+.image-preview__error-icon::after { transform: rotate(-45deg); }
+
+.image-preview__error-text {
+  color: #fff;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/index.ts
new file mode 100644
index 0000000..a5aa37c
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/ImageMessage/index.ts
@@ -0,0 +1,3 @@
+import ImageMessage from './ImageMessage.vue';
+
+export { ImageMessage };
\ No newline at end of file
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/LocationMessage/LocationMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/LocationMessage/LocationMessage.vue
new file mode 100644
index 0000000..5b43dda
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/LocationMessage/LocationMessage.vue
@@ -0,0 +1,8 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>
+    [undefined location Message]
+  </div>
+</template>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/LocationMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/LocationMessage/index.ts
new file mode 100644
index 0000000..71b4086
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/LocationMessage/index.ts
@@ -0,0 +1,3 @@
+import LocationMessage from './LocationMessage.vue';
+
+export { LocationMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MergerMessage/MergerMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MergerMessage/MergerMessage.vue
new file mode 100644
index 0000000..2b23fa5
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MergerMessage/MergerMessage.vue
@@ -0,0 +1,6 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <div>undefined merger Message</div>
+</template>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MergerMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MergerMessage/index.ts
new file mode 100644
index 0000000..9964137
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MergerMessage/index.ts
@@ -0,0 +1,3 @@
+import MergerMessage from "./MergerMessage.vue";
+
+export { MergerMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/Message.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/Message.vue
new file mode 100644
index 0000000..d862be1
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/Message.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+import { MessageLayout } from './MessageLayout';
+import type { MessageAction } from '../../../hooks/useMessageActions';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface MessageProps {
+  message: MessageInfo;
+  nick?: string;
+  alignment?: 'left' | 'right' | 'two-sided';
+  messageActionList?: MessageAction[] | undefined;
+  messageAvatar?: Component | undefined;
+  isAggregated?: boolean;
+  isFirstInChunk?: boolean;
+  isLastInChunk?: boolean;
+  isHiddenMessageAvatar?: boolean;
+  removeAvatar?: boolean;
+  isHiddenMessageNick?: boolean;
+  isHiddenMessageMeta?: boolean;
+}
+
+withDefaults(defineProps<MessageProps>(), {
+  alignment: 'two-sided',
+  nick: undefined,
+  messageActionList: undefined,
+  messageAvatar: undefined,
+  isAggregated: false,
+  isFirstInChunk: undefined,
+  isLastInChunk: undefined,
+  isHiddenMessageAvatar: false,
+  removeAvatar: false,
+  isHiddenMessageNick: false,
+  isHiddenMessageMeta: false,
+});
+</script>
+
+<template>
+  <MessageLayout
+    :nick="nick"
+    :message="message"
+    :messageActionList="messageActionList"
+    :message-avatar="messageAvatar"
+    :alignment="alignment"
+    :is-aggregated="isAggregated"
+    :is-first-in-chunk="isFirstInChunk"
+    :is-last-in-chunk="isLastInChunk"
+    :is-hidden-message-avatar="isHiddenMessageAvatar"
+    :remove-avatar="removeAvatar"
+    :is-hidden-message-nick="isHiddenMessageNick"
+  />
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.module.scss b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.module.scss
new file mode 100644
index 0000000..d61b8fc
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.module.scss
@@ -0,0 +1,44 @@
+.message-action-dropdown {
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+  padding: 0;
+  background-color: var(--dropdown-color-default);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
+  overflow: hidden;
+  transform-origin: var(--radix-context-menu-content-transform-origin);
+  animation-duration: 0.2s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-state="open"] {
+    animation-name: slideIn;
+  }
+
+  &[data-state="closed"] {
+    animation-name: slideOut;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes slideOut {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+}
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue
new file mode 100644
index 0000000..5221a8a
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import {
+  ContextMenuRoot,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+} from 'reka-ui';
+import { useMessageActions } from '../../../../../hooks/useMessageActions';
+import classes from './MessageActionDropdown.module.scss';
+import type { MessageAction } from '../../../../../hooks/useMessageActions';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface MessageActionDropdownProps {
+  message: MessageInfo;
+  messageActionList?: MessageAction[] | undefined;
+}
+
+const props = withDefaults(defineProps<MessageActionDropdownProps>(), {
+  messageActionList: undefined,
+  message: () => ({}) as MessageInfo,
+});
+
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const defaultActionList = useMessageActions(undefined, channel);
+
+// Get visible action list
+const visibleActions = computed(() => {
+  const availableActions: MessageAction[] = props.messageActionList ?? defaultActionList;
+
+  return availableActions.filter((action) => {
+    // while action.visible is undefined, default to show it
+    if (action.visible === undefined) {
+      return true;
+    }
+    if (typeof action.visible === 'function') {
+      return action.visible(props.message);
+    }
+    return action.visible;
+  });
+});
+
+const handleActionClick = (action: MessageAction) => {
+  action.onClick?.(props.message);
+};
+
+const bodyElement = document.body;
+</script>
+
+<template>
+  <template v-if="visibleActions.length <= 0">
+    <slot />
+  </template>
+  <ContextMenuRoot v-else>
+    <ContextMenuTrigger as-child>
+      <slot />
+    </ContextMenuTrigger>
+    <ContextMenuPortal :to="bodyElement">
+      <ContextMenuContent :class="cs(classes['message-action-dropdown'])">
+        <ContextMenuItem
+          v-for="action in visibleActions"
+          :key="action.key"
+          as="button"
+          :class="cs('message-action-dropdown__item', action.className)"
+          :style="action.style"
+          @select="handleActionClick(action)"
+        >
+          <component
+            :is="action.component"
+            v-if="action.component && action.visible"
+            :message="message"
+          />
+          <template v-else-if="action.visible">
+            <template v-if="action.icon">
+              <span v-if="typeof action.icon === 'string'" :class="cs('message-action-dropdown__icon')">{{ action.icon }}</span>
+              <component
+                :is="action.icon"
+                v-else
+                :class="cs('message-action-dropdown__icon')"
+              />
+            </template>
+            <span>{{ t(`MessageList.${action.label}`, { defaultValue: action.label }) }}</span>
+          </template>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>
+
+<style lang="scss" scoped>
+.message-action-dropdown__item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  border: none;
+  outline: none;
+  width: 100%;
+  padding: 14px 12px;
+  font-size: 14px;
+  background-color: var(--dropdown-color-default);
+  color: var(--text-color-primary);
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.2s ease;
+
+  &:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 12px;
+    right: 12px;
+    height: 1px;
+    background-color: var(--stroke-color-secondary);
+  }
+
+  &:hover {
+    background-color: var(--dropdown-color-hover);
+  }
+
+  &:active {
+    background-color: var(--dropdown-color-active);
+  }
+}
+
+.message-action-dropdown__icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/index.ts
new file mode 100644
index 0000000..96722b3
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageActionDropdown/index.ts
@@ -0,0 +1,3 @@
+import MessageActionDropdown from './MessageActionDropdown.vue';
+
+export { MessageActionDropdown };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageBubble/MessageBubble.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageBubble/MessageBubble.vue
new file mode 100644
index 0000000..f5ca678
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageBubble/MessageBubble.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { MessageStatus } from '@atomicxcore/core';
+import { MessageActionDropdown } from '../MessageActionDropdown';
+import type { MessageAction } from '../../../../../hooks/useMessageActions';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface MessageBubbleProps {
+  message: MessageInfo;
+  alignment?: 'left' | 'right' | 'two-sided';
+  isLastInChunk?: boolean;
+  messageActionList?: MessageAction[];
+}
+
+withDefaults(defineProps<MessageBubbleProps>(), {
+  message: () => ({} as MessageInfo),
+  alignment: 'two-sided',
+  isLastInChunk: true,
+  messageActionList: undefined,
+});
+</script>
+
+<template>
+  <div class="message-bubble">
+    <div
+      v-if="message.status === MessageStatus.Violation"
+      class="has-risk-content"
+    >
+      hasRiskContent
+    </div>
+    <MessageActionDropdown
+      v-else
+      :messageActionList="messageActionList"
+      :message="message"
+    >
+      <slot />
+    </MessageActionDropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.message-bubble {
+  min-width: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.has-risk-content {
+  padding: 8px;
+  background-color: #fa515129;
+  color: var(--text-color-error);
+  font-size: 14px;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageBubble/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageBubble/index.ts
new file mode 100644
index 0000000..f09bfe0
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageBubble/index.ts
@@ -0,0 +1,3 @@
+import MessageBubble from './MessageBubble.vue';
+
+export { MessageBubble };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageLayout.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageLayout.vue
new file mode 100644
index 0000000..5f45261
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageLayout.vue
@@ -0,0 +1,460 @@
+<script lang="ts" setup>
+import { ref, computed, inject } from 'vue';
+import type { Component, StyleValue } from 'vue';
+import { MessageType, ConversationType, MessageStatus } from '@atomicxcore/core';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import { useChatContext } from '../../../../chat-store/context/useChatContext';
+import { useChatUIState } from '../../../../context/useChatUIState';
+import { isCallMessage, isCreateGroupMessage } from '../../../../utils/call';
+import { getTimeStampAuto } from '../../../../utils/time';
+import { Avatar } from '../../../Avatar';
+import { useMessageListContext } from '../../MessageListContext';
+import { ReadReceiptInfo } from '../../ReadReceiptInfo';
+import { AudioMessage } from '../AudioMessage';
+import { CustomMessage } from '../CustomMessage';
+import { FaceMessage } from '../FaceMessage';
+import { FileMessage } from '../FileMessage';
+import { GroupTipMessage } from '../GroupTipMessage';
+import { ImageMessage } from '../ImageMessage';
+// import { LocationMessage } from '../LocationMessage';
+import { MergerMessage } from '../MergerMessage';
+import { RecalledMessage } from '../RecalledMessage';
+import { TextMessage } from '../TextMessage';
+import { VideoMessage } from '../VideoMessage';
+import { MessageBubble } from './MessageBubble';
+import { MessageStatusIcon } from './MessageMeta';
+import { useMessageLayoutClasses } from './useMessageLayoutClasses';
+import type { MessageAction } from '../../../../hooks/useMessageActions';
+// import type { MessageModel } from '../../../../types/engine';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface MessageLayoutProps {
+  message: MessageInfo;
+  nick?: string;
+  isAggregated?: boolean;
+  isHiddenMessageAvatar?: boolean;
+  removeAvatar?: boolean;
+  isHiddenMessageNick?: boolean;
+  isFirstInChunk?: boolean;
+  isLastInChunk?: boolean;
+  alignment?: 'left' | 'right' | 'two-sided';
+  messageActionList?: MessageAction[];
+  messageAvatar?: Component;
+  className?: string;
+  style?: StyleValue;
+}
+
+const props = withDefaults(defineProps<MessageLayoutProps>(), {
+  message: () => ({}) as MessageInfo,
+  alignment: 'two-sided',
+  nick: undefined,
+  isAggregated: false,
+  isHiddenMessageAvatar: false,
+  removeAvatar: false,
+  isHiddenMessageNick: false,
+  isFirstInChunk: undefined,
+  isLastInChunk: undefined,
+  messageActionList: undefined,
+  messageAvatar: undefined,
+  className: '',
+  style: undefined,
+});
+
+const { t } = useUIKit();
+const isHovered = ref(false);
+const isReadReceiptInfoOpen = ref(false);
+const { activeConversation } = useChatContext();
+
+const shouldRenderAsGroupTip = computed(() => {
+  if (props.message.messageType === MessageType.Custom && isCreateGroupMessage(props.message)) {
+    return true;
+  }
+  if (
+    props.message.messageType === MessageType.Custom
+    && isCallMessage(props.message)
+    && props.message.conversationType === ConversationType.Group
+  ) {
+    return true;
+  }
+  return false;
+});
+
+const showName = computed(() => {
+  if (props.message.conversationType === ConversationType.C2C) {
+    return props.nick || activeConversation.value?.title || props.message.from.nickname || props.message.from.userID;
+  }
+  return props.nick || props.message.from.nameCard || props.message.from.nickname || props.message.from.userID;
+});
+
+const MessageComponentsFactory: Record<MessageType, Component | null> = {
+  [MessageType.Unknown]: null,
+  [MessageType.Stream]: null,
+  // [MessageType.Location]: LocationMessage,
+  [MessageType.Text]: TextMessage,
+  [MessageType.Image]: ImageMessage,
+  [MessageType.Audio]: AudioMessage,
+  [MessageType.Video]: VideoMessage,
+  [MessageType.File]: FileMessage,
+  [MessageType.Face]: FaceMessage,
+  [MessageType.Merged]: MergerMessage,
+  [MessageType.Custom]: CustomMessage,
+  [MessageType.Tips]: GroupTipMessage,
+};
+
+const channel = inject('channel', 'default') as string;
+const { highlightMessageIDSet } = useChatUIState(channel);
+const isHighlighted = computed(() => highlightMessageIDSet.value.has(props.message.msgID));
+
+const messageListContext = useMessageListContext('MessageLayout');
+
+const MessageComponent = computed(() => {
+  const renderers = messageListContext?.messageRenderers;
+  const { messageType } = props.message;
+  if (renderers?.[messageType]) {
+    return renderers[messageType];
+  }
+  return MessageComponentsFactory[messageType];
+});
+
+const isMessageOwner = computed(() => props.message.isSentBySelf);
+const isGroup = computed(() => props.message.conversationType === ConversationType.Group);
+
+const displayTime = computed(() => getTimeStampAuto(props.message.timestamp!));
+
+const showSendStatus = computed(() => (
+  isMessageOwner.value
+  && (props.message.status === MessageStatus.Sending || props.message.status === MessageStatus.SendFail)
+));
+
+const showReadReceipt = computed(() => (
+  isMessageOwner.value
+  && props.message.status === MessageStatus.SendSuccess
+  && props.message.needReadReceipt
+));
+
+const readReceiptText = computed(() => {
+  if (
+    !props.message.needReadReceipt
+    || props.message.status !== MessageStatus.SendSuccess
+    || !props.message.readReceiptInfo
+    || !isMessageOwner.value
+  ) {
+    return '';
+  }
+  const { readCount, unreadCount, isPeerRead } = props.message.readReceiptInfo;
+  if (isGroup.value) {
+    if (unreadCount === undefined || readCount === undefined) {
+      return '';
+    }
+    if (unreadCount > 0) {
+      return `${unreadCount}${t('MessageList.people')}${t('MessageList.unread')}`;
+    }
+    return t('MessageList.all_read');
+  }
+  if (isPeerRead) {
+    return t('MessageList.read');
+  }
+  return t('MessageList.unread');
+});
+
+const messageLayoutClasses = computed(() => useMessageLayoutClasses({
+  isMessageOwner: isMessageOwner.value,
+  alignment: props.alignment,
+  isAggregated: props.isAggregated,
+}));
+
+const layoutClasses = computed(() => messageLayoutClasses.value.layoutClasses);
+const contentClasses = computed(() => messageLayoutClasses.value.contentClasses);
+const headerClasses = computed(() => messageLayoutClasses.value.headerClasses);
+const bodyClasses = computed(() => messageLayoutClasses.value.bodyClasses);
+const avatarClasses = computed(() => messageLayoutClasses.value.avatarClasses);
+const bubbleClasses = computed(() => messageLayoutClasses.value.bubbleClasses);
+const statusClasses = computed(() => messageLayoutClasses.value.statusClasses);
+
+function handleReadReceiptOpen() {
+  isReadReceiptInfoOpen.value = true;
+}
+
+function handleReadReceiptClose() {
+  isReadReceiptInfoOpen.value = false;
+}
+
+// Avatar display logic:
+// - alignment 'left' or 'right': always show avatar regardless of props
+// - removeAvatar=true: completely remove avatar from DOM (user takes full control of layout)
+// - isHiddenMessageAvatar=true: visually hide avatar but keep DOM space (no layout shift)
+const isSingleSideAlignment = computed(() => props.alignment === 'left' || props.alignment === 'right');
+const shouldRenderAvatar = computed(() => {
+  if (isSingleSideAlignment.value) {
+    return true;
+  }
+  return !props.removeAvatar;
+});
+const avatarVisibility = computed(() => {
+  if (isSingleSideAlignment.value) {
+    return 'visible';
+  }
+  return props.isHiddenMessageAvatar ? 'hidden' : 'visible';
+});
+</script>
+
+<template>
+  <RecalledMessage
+    v-if="message.status === MessageStatus.Recalled"
+    class="message-recalled"
+    :message="message"
+  />
+  <GroupTipMessage
+    v-else-if="message.messageType === MessageType.Tips || shouldRenderAsGroupTip"
+    :message="message"
+  />
+  <View
+    v-else-if="MessageComponent"
+    :data-message-id="message.msgID"
+    :class="cs(layoutClasses, {
+      'highlight--normal': isHighlighted,
+    })"
+    :style="style"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <Avatar
+      v-if="shouldRenderAvatar && !messageAvatar"
+      :class="cs(avatarClasses)"
+      :style="{ visibility: avatarVisibility }"
+      :src="message.from.avatarURL"
+      size="sm"
+    />
+    <View
+      v-else-if="shouldRenderAvatar"
+      :class="cs(avatarClasses)"
+      :style="{ visibility: avatarVisibility }"
+    >
+      <component
+        :is="messageAvatar"
+        :message-info="message"
+      />
+    </View>
+    <View :class="cs(contentClasses)">
+      <View v-if="!isAggregated" :class="cs(headerClasses)">
+        <View v-if="!isHiddenMessageNick" :class="cs('message-layout__nick')">
+          {{ showName }}
+        </View>
+        <span class="message-layout__time" :style="{ visibility: isHovered ? 'visible' : 'hidden' }">{{ displayTime }}</span>
+      </View>
+      <View :class="cs(bodyClasses)">
+        <MessageBubble
+          :class="bubbleClasses"
+          :message="message"
+          :alignment="alignment"
+          :isLastInChunk="false"
+          :messageActionList="messageActionList"
+        >
+          <component
+            :is="MessageComponent"
+            :message="message"
+          />
+        </MessageBubble>
+        <View
+          v-if="showSendStatus || showReadReceipt"
+          :class="cs(statusClasses, showSendStatus && 'message-layout__status--centered')"
+        >
+          <MessageStatusIcon
+            v-if="showSendStatus"
+            :status="message.status"
+          />
+          <template v-else-if="showReadReceipt && Boolean(readReceiptText)">
+            <span
+              v-if="!isGroup"
+              class="message-layout__read-status"
+            >
+              {{ readReceiptText }}
+            </span>
+            <span
+              v-else-if="isGroup && message.readReceiptInfo && message.readReceiptInfo.unreadCount > 0"
+              class="message-layout__group-unread"
+              @click="handleReadReceiptOpen"
+            >
+              {{ readReceiptText }}
+            </span>
+            <span
+              v-else-if="isGroup"
+              class="message-layout__group-all-read"
+            >
+              {{ readReceiptText }}
+            </span>
+          </template>
+        </View>
+      </View>
+      <View class="message-layout__reactions" />
+    </View>
+  </View>
+  <ReadReceiptInfo
+    :open="isReadReceiptInfoOpen"
+    :message="message"
+    :read-count="message.readReceiptInfo?.readCount"
+    :unread-count="message.readReceiptInfo?.unreadCount"
+    :is-peer-read="message.readReceiptInfo?.isPeerRead"
+    @on-close="handleReadReceiptClose"
+  />
+</template>
+
+<style lang="scss" scoped>
+@use '../../../../styles/mixins' as mixin;
+
+$message-avatar-size: 32px;
+$message-avatar-gap: 8px;
+
+.message-layout {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+  gap: $message-avatar-gap;
+
+  &--left {
+    flex-direction: row;
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+  }
+
+  &__avatar {
+    flex: 0 0 auto;
+  }
+
+  &__nick {
+    font-size: 12px;
+    max-width: min(70%, 120px);
+    color: var(--text-color-tertiary);
+    @include mixin.text-ellipsis;
+  }
+
+  &__time {
+    font-size: 12px;
+    color: var(--text-color-tertiary);
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  &__read-status,
+  &__group-all-read {
+    font-size: 12px;
+    color: var(--text-color-secondary);
+  }
+
+  &__group-unread {
+    font-size: 12px;
+    color: var(--text-color-link);
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--text-color-link-hover);
+    }
+  }
+
+  &__reactions {
+    display: none;
+  }
+}
+
+.message-layout__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 1 auto;
+  min-width: 0;
+
+  &--left {
+    align-items: flex-start;
+  }
+
+  &--right {
+    align-items: flex-end;
+  }
+
+}
+
+.message-layout__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  &--right {
+    flex-direction: row-reverse;
+  }
+}
+
+.message-layout__body {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 4px;
+  max-width: 90%;
+
+  @include mixin.tablet-and-up {
+    max-width: 80%;
+  }
+
+  @include mixin.desktop-and-up {
+    max-width: 70%;
+  }
+
+  &--left {
+    flex-direction: row;
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+  }
+}
+
+.message-layout__bubble {
+  flex: 0 1 auto;
+}
+
+.message-layout__status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  align-self: stretch;
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--text-color-link);
+
+  &--centered {
+    justify-content: center;
+  }
+}
+
+.message-layout__failed {
+  color: #ff584c;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.highlight {
+  &--normal {
+    animation: background-highlight 1s ease-in-out infinite;
+  }
+}
+
+@keyframes background-highlight {
+  50% {
+    background-color: rgb(255, 199, 126);
+  }
+}
+
+@keyframes media-highlight {
+  50% {
+    box-shadow: 0 1px 20px 0 rgb(255, 199, 126);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/MessageMeta.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/MessageMeta.vue
new file mode 100644
index 0000000..a1cc0ae
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/MessageMeta.vue
@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { View } from '../../../../../baseComp/View';
+import { getTimeStampAuto } from '../../../../../utils/time';
+
+import MessageStatusIcon from './MessageStatusIcon.vue';
+
+interface MessageMetaProps {
+  isGroup: boolean;
+  timestamp: number;
+  flow: string;
+  needReadReceipt?: boolean;
+  readReceiptInfo?: {
+    readCount: number;
+    unreadCount: number;
+    isPeerRead: boolean;
+  };
+  status?: 'unSend' | 'success' | 'fail' | string;
+}
+
+const props = withDefaults(defineProps<MessageMetaProps>(), {
+  timestamp: 0,
+  flow: 'in',
+  needReadReceipt: false,
+  readReceiptInfo: undefined,
+  status: undefined,
+});
+
+const emits = defineEmits(['onReadReceiptTextClick']);
+
+const { t } = useUIKit();
+const classes = useCssModule();
+
+const displayTime = computed(() => getTimeStampAuto(props.timestamp));
+
+const handleGroupUnreadClick = () => {
+  emits('onReadReceiptTextClick');
+};
+
+const shouldShowStatusIcon = computed(() => (
+  props.flow === 'out'
+  && (!props.needReadReceipt
+    || props.status === 'unSend'
+    || props.status === 'fail')));
+
+const readReceiptText = computed(() => {
+  if (
+    !props.needReadReceipt
+    || props.status !== 'success'
+    || !props.readReceiptInfo
+    || props.flow === 'in'
+  ) {
+    return '';
+  }
+
+  const {
+    readCount,
+    unreadCount,
+    isPeerRead,
+  } = props.readReceiptInfo;
+
+  if (props.isGroup) {
+    if (unreadCount === undefined || readCount === undefined) {
+      return '';
+    }
+    if (unreadCount > 0) {
+      return `${unreadCount} ${t('MessageList.unread')} ·`;
+    }
+    return `${t('MessageList.all_read')} ·`;
+  }
+  if (isPeerRead) {
+    return `${t('MessageList.read')} ·`;
+  }
+  return `${t('MessageList.unread')} ·`;
+});
+</script>
+
+<template>
+  <View
+    :class="classes['message-meta']"
+    dir="row"
+    align="center"
+  >
+    <!-- Show status icon case -->
+    <template v-if="shouldShowStatusIcon">
+      <MessageStatusIcon
+        v-if="props.status"
+        :status="props.status"
+      />
+    </template>
+
+    <!-- Show read receipt text case -->
+    <template v-else-if="Boolean(readReceiptText)">
+      <span
+        v-if="readReceiptText && !props.isGroup"
+        :class="classes['message-meta__read-status']"
+      >
+        {{ readReceiptText }}
+      </span>
+      <span
+        v-else-if="readReceiptText && props.isGroup && props.readReceiptInfo && props.readReceiptInfo.unreadCount > 0"
+        :class="classes['message-meta__group-unread']"
+        @click="handleGroupUnreadClick"
+      >
+        {{ readReceiptText }}
+      </span>
+      <span
+        v-else-if="readReceiptText && props.isGroup"
+        :class="classes['message-meta__group-all-read']"
+      >
+        {{ readReceiptText }}
+      </span>
+    </template>
+
+    <!-- Time display -->
+    <span
+      v-if="displayTime"
+      :class="classes['message-meta__time']"
+    >
+      {{ displayTime }}
+    </span>
+  </View>
+</template>
+
+<style lang="scss" module>
+.message-meta {
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-color-secondary);
+
+  &__read-status {
+    font-size: 12px;
+  }
+
+  &__group-unread {
+    font-size: 12px;
+    color: var(--text-color-link);
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--text-color-link-hover);
+    }
+  }
+
+  &__group-all-read {
+    font-size: 12px;
+  }
+
+  &__time {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/MessageStatusIcon.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/MessageStatusIcon.vue
new file mode 100644
index 0000000..be653fc
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/MessageStatusIcon.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { MessageStatus } from '@atomicxcore/core';
+import { IconLiveLoading, IconSuccess, IconErrorToast } from '@tencentcloud/uikit-base-component-vue3';
+import { View } from '../../../../../baseComp/View';
+
+defineProps<{
+  status: MessageStatus;
+}>();
+</script>
+
+<template>
+  <View>
+    <IconLiveLoading
+      v-if="status === MessageStatus.Sending"
+      class="message-meta__status--unSend"
+      :size="16"
+    />
+    <IconSuccess
+      v-else-if="status === MessageStatus.SendSuccess"
+      :size="16"
+    />
+    <IconErrorToast
+      v-else-if="status === MessageStatus.SendFail"
+      :size="16"
+    />
+  </View>
+</template>
+
+<style lang="scss" scoped>
+.message-meta__status--unSend {
+  animation: rotate-infinite 1s linear infinite;
+}
+
+@keyframes rotate-infinite {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/index.ts
new file mode 100644
index 0000000..273d849
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/MessageMeta/index.ts
@@ -0,0 +1,4 @@
+import MessageMeta from './MessageMeta.vue';
+import MessageStatusIcon from './MessageStatusIcon.vue';
+
+export { MessageMeta, MessageStatusIcon };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/index.ts
new file mode 100644
index 0000000..71c91ee
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/index.ts
@@ -0,0 +1,3 @@
+import MessageLayout from './MessageLayout.vue';
+
+export { MessageLayout };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/useMessageLayoutClasses.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/useMessageLayoutClasses.ts
new file mode 100644
index 0000000..7b385ea
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/MessageLayout/useMessageLayoutClasses.ts
@@ -0,0 +1,57 @@
+import cs from 'classnames';
+
+export function useMessageLayoutClasses({
+  isMessageOwner,
+  alignment,
+  isAggregated,
+}: {
+  isMessageOwner: boolean;
+  alignment: 'left' | 'right' | 'two-sided';
+  isAggregated: boolean;
+}) {
+  const isRightAligned
+    = (alignment === 'two-sided' && isMessageOwner)
+      || alignment === 'right';
+
+  const layoutClasses = cs(
+    'message-layout',
+    isRightAligned ? 'message-layout--right' : 'message-layout--left',
+  );
+
+  const contentClasses = cs(
+    'message-layout__content',
+    isRightAligned ? 'message-layout__content--right' : 'message-layout__content--left',
+  );
+
+  const headerClasses = cs(
+    'message-layout__header',
+    isRightAligned && 'message-layout__header--right',
+  );
+
+  const bodyClasses = cs(
+    'message-layout__body',
+    isRightAligned ? 'message-layout__body--right' : 'message-layout__body--left',
+  );
+
+  const bubbleClasses = cs(
+    'message-layout__bubble',
+  );
+
+  const avatarClasses = cs(
+    'message-layout__avatar',
+  );
+
+  const statusClasses = cs(
+    'message-layout__status',
+  );
+
+  return {
+    layoutClasses,
+    contentClasses,
+    headerClasses,
+    bodyClasses,
+    bubbleClasses,
+    avatarClasses,
+    statusClasses,
+  };
+}
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/RecalledMessage/RecalledMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/RecalledMessage/RecalledMessage.vue
new file mode 100644
index 0000000..45eee89
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/RecalledMessage/RecalledMessage.vue
@@ -0,0 +1,74 @@
+<template>
+  <View
+    :class="cs('recalled-message', props.class)"
+    :style="props.style"
+  >
+    <template v-if="isMessageOwner">
+      {{ `${t('MessageList.you')} ${t('MessageList.recalled_a_message')}` }}
+      <View
+        v-if="isTextMessage"
+        role="button"
+        class="recalled-message__button"
+        @click="recallMessageToInput"
+      >
+        {{ t('MessageList.reedit') }}
+      </View>
+    </template>
+    <template v-else>
+      {{ `${otherDisplayName} ${t('MessageList.recalled_a_message')}` }}
+    </template>
+  </View>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { MessageType } from '@atomicxcore/core';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import { useChatUIState } from '../../../../context/useChatUIState';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface IRecalledMessageProps {
+  message: MessageInfo;
+  class?: string;
+  style?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<IRecalledMessageProps>(), {
+  class: undefined,
+  style: undefined,
+});
+
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const { setInputContent, focusInput } = useChatUIState(channel);
+
+const isTextMessage = computed(() => props.message.messageType === MessageType.Text);
+const isMessageOwner = computed(() => props.message.isSentBySelf);
+const otherDisplayName = computed(() => props.message.from.nickname || props.message.from.userID || '');
+
+function recallMessageToInput() {
+  const transformedText = (props.message.messagePayload as any)?.text ?? '';
+  setInputContent(transformedText);
+  focusInput();
+}
+</script>
+
+<style lang="scss" scoped>
+.recalled-message {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+  justify-content: center;
+  font-size: 14px;
+  white-space: pre-wrap;
+  color: var(--text-color-secondary);
+
+  &__button {
+    cursor: pointer;
+    text-decoration: underline;
+    color: var(--text-color-link);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/RecalledMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/RecalledMessage/index.ts
new file mode 100644
index 0000000..e59f941
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/RecalledMessage/index.ts
@@ -0,0 +1,3 @@
+import RecalledMessage from "./RecalledMessage.vue";
+
+export { RecalledMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/TextMessage/TextMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/TextMessage/TextMessage.vue
new file mode 100644
index 0000000..657d839
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/TextMessage/TextMessage.vue
@@ -0,0 +1,243 @@
+<template>
+  <View
+    :class="cs('text-message', {
+      'text-message--flow-in': !message.isSentBySelf,
+      'text-message--flow-out': message.isSentBySelf,
+    })"
+  >
+    <View
+      v-if="$props.message.quoteInfo"
+      :class="cs('text-message__reference', {
+        'text-danger': isOriginMessageHasRecalled || props.message.quoteInfo?.messageType === MessageType.Unknown
+      })"
+      @click="handleReferenceClick"
+    >
+      <template v-if="isOriginMessageHasRecalled || props.message.quoteInfo?.messageType === MessageType.Unknown">
+        {{ t('MessageList.origin_message_has_been_recalled') }}
+      </template>
+      <template v-else>
+        <View class="text-message__reference__header">
+          {{ $props.message.quoteInfo?.sender?.nickname || $props.message.quoteInfo?.sender?.userID }}
+        </View>
+        <View class="text-message__reference__content">
+          {{ quotePreview }}
+        </View>
+      </template>
+    </View>
+    <View class="text-message__content">
+      <template
+        v-for="(item, index) in renderContent"
+        :key="index"
+      >
+        <span
+          v-if="item.name === 'text'"
+          class="text-message__content__text"
+        >
+          {{ item.text }}
+        </span>
+        <img
+          v-else
+          class="text-message__content__img"
+          :src="item.src"
+          :alt="item.emojiKey || ''"
+        >
+      </template>
+    </View>
+  </View>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import { MessageStatus, MessageType } from '@atomicxcore/core';
+import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import { useChatContext } from '../../../../chat-store';
+import { emojiUrlMap, emojiBaseUrl } from '../../../../constants/emoji';
+import { useChatUIState } from '../../../../context/useChatUIState';
+import { useMessageNavigation } from '../../../../hooks/useMessageNavigation';
+import { transformTextWithEmojiKeyToName } from '../../../../utils/emoji';
+import type { MessageInfo, TextMessagePayload } from '@atomicxcore/core';
+
+const props = withDefaults(defineProps<{
+  message: MessageInfo;
+}>(), {
+  message: () => ({} as MessageInfo),
+});
+
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const { messageList } = useChatContext(channel);
+const chatUIState = useChatUIState(channel);
+const { navigateToMessage } = useMessageNavigation(channel);
+
+const messageContent = computed(() => props.message.messagePayload as TextMessagePayload);
+
+const quotePreview = computed(() => {
+  const q = props.message.quoteInfo;
+  if (!q) {
+    return '';
+  }
+  switch (q.messageType) {
+    case MessageType.Text: return transformTextWithEmojiKeyToName((q.messagePayload as TextMessagePayload)?.text || '');
+    case MessageType.Image: return t('MessageList.quote_image');
+    case MessageType.Audio: return t('MessageList.quote_audio');
+    case MessageType.Video: return t('MessageList.quote_video');
+    case MessageType.File: return t('MessageList.quote_file');
+    case MessageType.Face: return t('MessageList.quote_face');
+    case MessageType.Custom: return t('MessageList.quote_custom');
+    case MessageType.Merged: return t('MessageList.quote_merged');
+    default: return t('MessageList.quote_unknown');
+  }
+});
+
+// Emoji key pattern: [TUIEmoji_Xxx]
+const EMOJI_PATTERN = /(\[TUIEmoji_\w+\])/;
+
+type TextNode = { name: 'text'; text: string };
+type EmojiNode = { name: 'img'; src: string; emojiKey: string };
+type RenderNode = TextNode | EmojiNode;
+
+const renderContent = computed((): RenderNode[] => {
+  const raw = messageContent.value?.text ?? '';
+  return raw
+    .split(EMOJI_PATTERN)
+    .filter(segment => segment !== '')
+    .map((segment): RenderNode => {
+      const url = emojiUrlMap[segment];
+      if (url) {
+        return { name: 'img', src: `${emojiBaseUrl}${url}`, emojiKey: segment };
+      }
+      return { name: 'text', text: segment };
+    });
+});
+
+// const referencedInfo = computed(() => {
+//   const quoteInfo = props.message.quoteInfo;
+//   return {
+//     content: (quoteInfo?.messagePayload as TextMessagePayload)?.text,
+//     sender: quoteInfo?.sender?.nickname,
+//     messageID: quoteInfo?.msgID,
+//     sequence: quoteInfo?.sequence,
+//     time: quoteInfo?.timestamp,
+//   };
+// });
+
+const isOriginMessageHasRecalled = computed(() => chatUIState.recalledMessageIDSet.value.has(props.message.quoteInfo?.msgID!));
+
+const handleReferenceClick = () => {
+  if (props.message.quoteInfo?.msgID) {
+    const { msgID } = props.message.quoteInfo;
+    const targetMessage = messageList.value.find(item => item.msgID === msgID);
+
+    if (isOriginMessageHasRecalled.value || targetMessage?.status === MessageStatus.Deleted || targetMessage?.status === MessageStatus.Recalled) {
+      TUIToast.error({
+        message: t('MessageList.origin_message_has_been_recalled'),
+      });
+      return;
+    }
+
+    navigateToMessage({
+      messageID: msgID,
+      cursor: props.message.quoteInfo as unknown as MessageInfo,
+    });
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+@use '../bubble-mixins' as bubble;
+
+.text-message {
+  @include bubble.bubble-base();
+  font-size: 14px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  word-break: break-word;
+  white-space: pre-wrap;
+  position: relative;
+  line-height: 1.3125;
+  font-weight: 500;
+  color: var(--text-color-primary);
+
+  &__reference {
+    margin-bottom: 8px;
+    padding: 10px 16px;
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    position: relative;
+    border-radius: 4px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: #999;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+
+    &__header {
+      font-size: 12px;
+      color: var(--text-color-primary);
+      margin-bottom: 4px;
+    }
+
+    &__content {
+      font-size: 13px;
+      color: var(--text-color-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  &__content {
+    display: block;
+    word-break: break-word;
+    white-space: pre-wrap;
+    position: relative;
+
+    &__text {
+      display: inline;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    &__img {
+      display: inline;
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+      line-height: 1;
+      margin: 0 1px;
+      user-select: text;
+    }
+  }
+}
+
+.text-danger {
+  color: var(--text-color-tertiary);
+  background-color: var(--button-color-secondary-hover);
+
+  &:hover {
+    background-color: var(--button-color-secondary-hover);
+  }
+
+  &:active {
+    background-color: var(--button-color-secondary-active);
+  }
+
+  &::before {
+    background-color: var(--text-color-tertiary);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/TextMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/TextMessage/index.ts
new file mode 100644
index 0000000..577eeaa
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/TextMessage/index.ts
@@ -0,0 +1,3 @@
+import TextMessage from './TextMessage.vue';
+
+export { TextMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/VideoMessage/VideoMessage.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/VideoMessage/VideoMessage.vue
new file mode 100644
index 0000000..e08fdaf
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/VideoMessage/VideoMessage.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import type { MessageInfo, VideoMessagePayload } from '@atomicxcore/core';
+
+interface VideoMessageProps {
+  message: MessageInfo;
+  isLastInChunk?: boolean;
+}
+
+const props = withDefaults(defineProps<VideoMessageProps>(), {
+  isLastInChunk: false,
+  message: () => ({} as MessageInfo),
+});
+
+// SDK uses 200×200 as placeholder before actual dimensions are available
+const isPlaceholderSize = (width: number, height: number): boolean => width === 200 && height === 200;
+
+const messageContent = computed(() =>
+  props.message.messagePayload as VideoMessagePayload,
+);
+
+const videoNaturalSize = ref<{ height: number; aspectRatio: number } | null>(null);
+const loaded = ref(false);
+
+// Priority: video metadata > snapshot > null (for placeholder data)
+const naturalSize = computed(() => {
+  if (videoNaturalSize.value) {
+    return videoNaturalSize.value;
+  }
+
+  const content = messageContent.value;
+
+  if (isPlaceholderSize(content.videoSnapshotWidth, content.videoSnapshotHeight)) {
+    return null;
+  }
+
+  if (content.videoSnapshotWidth && content.videoSnapshotHeight) {
+    return {
+      height: content.videoSnapshotHeight,
+      aspectRatio: content.videoSnapshotWidth / content.videoSnapshotHeight,
+    };
+  }
+
+  return null;
+});
+
+const displaySize = computed(() => {
+  const MAX_HEIGHT = 300;
+  const PLACEHOLDER_HEIGHT = 200;
+  const DEFAULT_RATIO = 3 / 4;
+
+  if (!naturalSize.value) {
+    return {
+      height: PLACEHOLDER_HEIGHT,
+      aspectRatio: DEFAULT_RATIO,
+    };
+  }
+
+  const { aspectRatio } = naturalSize.value;
+
+  if (aspectRatio > 1) {
+    return {
+      aspectRatio,
+      height: 200,
+    };
+  }
+
+  return {
+    aspectRatio,
+    height: MAX_HEIGHT,
+  };
+});
+
+const isMessageOwner = computed(() => props.message.isSentBySelf);
+
+const onVideoLoad = (e: Event) => {
+  const video = e.target as HTMLVideoElement;
+
+  videoNaturalSize.value = {
+    aspectRatio: video.videoWidth / video.videoHeight,
+    height: video.videoHeight,
+  };
+
+  loaded.value = true;
+};
+
+// Reset state when message ID changes (e.g., URL switches from blob to real)
+watch(() => props.message.msgID, () => {
+  loaded.value = false;
+  videoNaturalSize.value = null;
+});
+</script>
+
+<template>
+  <View
+    :class="cs('video-message', {
+      'video-message--last--self': isMessageOwner && isLastInChunk,
+      'video-message--last--other': !isMessageOwner && isLastInChunk,
+      'video-message--loaded': loaded
+    })"
+    :style="{
+      maxHeight: `${displaySize.height}px`,
+      aspectRatio: naturalSize ? `${displaySize.aspectRatio}` : 'auto',
+      width: !loaded ? `${displaySize.height * displaySize.aspectRatio}px` : undefined
+    }"
+  >
+    <div
+      v-if="!loaded"
+      class="video-placeholder"
+    />
+    <video
+      class="video-message__video"
+      :src="messageContent.videoURL"
+      :poster="messageContent.videoSnapshotURL"
+      controls
+      muted
+      :autoplay="false"
+      @loadedmetadata="onVideoLoad"
+    />
+  </View>
+</template>
+
+<style lang="scss" scoped>
+@use '../bubble-mixins' as bubble;
+
+.video-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  @include bubble.bubble-media();
+  background-color: #f5f5f5;
+  max-width: 100%;
+
+  &--last--self {
+    border-bottom-right-radius: 4px;
+  }
+
+  &--last--other {
+    border-bottom-left-radius: 4px;
+  }
+
+  &--loaded {
+    background-color: transparent;
+  }
+}
+
+.video-placeholder {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      90deg,
+      rgba(245, 245, 245, 100%) 0%,
+      rgba(235, 235, 235, 100%) 50%,
+      rgba(245, 245, 245, 100%) 100%
+    );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.video-message__video {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  .video-message--loaded & {
+    opacity: 1;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/VideoMessage/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/VideoMessage/index.ts
new file mode 100644
index 0000000..4cf3f62
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/VideoMessage/index.ts
@@ -0,0 +1,3 @@
+import VideoMessage from './VideoMessage.vue';
+
+export { VideoMessage };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/_bubble-mixins.scss b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/_bubble-mixins.scss
new file mode 100644
index 0000000..f9dcbbf
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/_bubble-mixins.scss
@@ -0,0 +1,23 @@
+// Layer 1: Base bubble appearance (background color + overflow).
+@mixin bubble-base() {
+  overflow: hidden;
+  border-radius: 8px;
+
+  &--flow-in {
+    background-color: var(--bg-color-bubble-reciprocal);
+    border-top-left-radius: 0;
+  }
+
+  &--flow-out {
+    background-color: var(--bg-color-bubble-own);
+    border-top-right-radius: 0;
+  }
+}
+
+// Layer 2: Media message style (Image / Video).
+@mixin bubble-media() {
+  background: none;
+  border-radius: 20px;
+  overflow: hidden;
+  border: 1.5px solid var(--bg-color-bubble-own);
+}
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/index.ts
new file mode 100644
index 0000000..639f2e9
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/Message/index.ts
@@ -0,0 +1,5 @@
+import Message from './Message.vue';
+
+export {
+  Message,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageForward/MessageForward.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageForward/MessageForward.vue
new file mode 100644
index 0000000..1ae31ce
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageForward/MessageForward.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import { ref, computed, inject, watch } from 'vue';
+import { useChatContext } from '../../../chat-store';
+import { useUIKit, IconClose, TUIToast, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { Modal } from '../../../baseComp/Modal';
+import { View } from '../../../baseComp/View';
+import { useChatUIState } from '../../../context/useChatUIState';
+import { UserPicker } from '../../UserPicker';
+import type { UserPickerRef, UserPickerResult } from '../../UserPicker/type';
+import type { ForwardMessageOption } from '@atomicxcore/core';
+
+const { t } = useUIKit();
+const channel = inject('channel', 'default') as string;
+const { isForwardModalOpen, forwardMessages, closeForwardModal } = useChatUIState(channel);
+const {
+  conversationList,
+  forwardMessages: forwardMessagesToConversation,
+  loadConversations,
+} = useChatContext(channel);
+
+// Load conversation list when modal opens
+watch(isForwardModalOpen, (open) => {
+  if (open) {
+    loadConversations();
+  }
+});
+
+// UserPicker ref
+const userPickerRef = ref<UserPickerRef<undefined> | null>(null);
+
+// Track if forward button should be disabled
+const isDisableConfirm = ref(true);
+
+// Convert conversation list to UserPicker data format
+const forwardListDataSource = computed(() =>
+  conversationList.value.map(conversation => ({
+    key: conversation.conversationID,
+    label: conversation.title || conversation.conversationID,
+    avatarUrl: conversation.avatarURL || '',
+  })),
+);
+
+function handleSelectedChange(selectedItems: UserPickerResult) {
+  isDisableConfirm.value = selectedItems.length === 0;
+}
+
+async function forward() {
+  const selectedItems = userPickerRef.value?.getSelectedItems();
+  if (!selectedItems || selectedItems.length === 0) {
+    return;
+  }
+
+  const option: ForwardMessageOption = { forwardType: 'separate' };
+  const forwardPromises = selectedItems.map(
+    item => forwardMessagesToConversation(forwardMessages.value, option, item.key),
+  );
+
+  await Promise.allSettled(forwardPromises);
+  closeForwardModal();
+}
+
+function handleClose() {
+  closeForwardModal();
+}
+</script>
+
+<template>
+  <Modal
+    :open="isForwardModalOpen"
+    content-class="forward-container"
+    @on-close="handleClose"
+  >
+    <View
+      class="forward-header"
+      dir="row"
+    >
+      <IconClose
+        size="28"
+        class="forward-header__close"
+        @click="handleClose"
+      />
+      <span class="forward-header__title">
+        {{ t('MessageList.forward') }}
+      </span>
+      <div class="forward-header__placeholder" />
+    </View>
+
+    <UserPicker
+      ref="userPickerRef"
+      display-mode="list"
+      :data-source="forwardListDataSource"
+      :max-count="10"
+      :on-selected-change="handleSelectedChange"
+      :on-max-count-exceed="() => {
+        TUIToast.error({
+          message: t('MessageList.max_count_exceed'),
+        });
+      }"
+    />
+
+    <View class="forward-footer">
+      <TUIButton
+        radius="rect"
+        color="blue"
+        type="primary"
+        :disabled="isDisableConfirm"
+        @click="forward"
+      >
+        {{ t('MessageList.forward') }}
+      </TUIButton>
+    </View>
+  </Modal>
+</template>
+
+<style lang="scss">
+@use '../../../styles/mixins' as mixin;
+
+.forward-container {
+  padding: 16px;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--text-color-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  @include mixin.mobile {
+    height: 65vh;
+    width: 80vw;
+  }
+
+  @include mixin.tablet-and-up {
+    width: 50vw;
+    height: 60vh;
+  }
+
+  @include mixin.desktop-and-up {
+    width: 480px;
+    height: 60vh;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@use '../../../styles/mixins' as mixin;
+
+$animationDuration: 200ms;
+
+.forward-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--text-color-primary);
+
+  $icon-size: 28px;
+
+  &__close {
+    width: $icon-size;
+    height: $icon-size;
+    flex: 0 0 auto;
+    padding: 6px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--hover-bg-color, rgba(0, 0, 0, 0.04));
+    }
+  }
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  &__placeholder {
+    width: $icon-size;
+    height: $icon-size;
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageForward/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageForward/index.ts
new file mode 100644
index 0000000..3781a72
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageForward/index.ts
@@ -0,0 +1,3 @@
+import MessageForward from './MessageForward.vue';
+
+export { MessageForward };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageListContext.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageListContext.ts
new file mode 100644
index 0000000..f7daca0
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageListContext.ts
@@ -0,0 +1,27 @@
+import { inject } from 'vue';
+import { MessageType } from '@atomicxcore/core';
+import type { Component, Slots } from 'vue';
+
+
+const MessageListContextSymbol = Symbol('MessageListContext');
+
+interface MessageListContext {
+  slots: Slots;
+  /** Custom renderers to override built-in message bubble content by MessageType */
+  messageRenderers?: Record<MessageType, Component>;
+}
+
+function useMessageListContext(componentName: string): MessageListContext {
+  const context = inject<MessageListContext | null>(MessageListContextSymbol, null);
+  if (context === null) {
+    throw new Error(`<${componentName}> must be used within Parent MessageList.`);
+  }
+  return context;
+}
+
+export {
+  MessageListContextSymbol,
+  useMessageListContext,
+};
+
+export type { MessageListContext };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageListH5.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageListH5.vue
new file mode 100644
index 0000000..0d90a80
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageListH5.vue
@@ -0,0 +1,635 @@
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+  provide,
+  useSlots,
+  computed,
+} from 'vue';
+import type { Component } from 'vue';
+import { MessageStatus } from '@atomicxcore/core';
+import { TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { ObserverView } from '../../baseComp/ObserverView';
+import { View } from '../../baseComp/View';
+import { useChatContext } from '../../chat-store';
+import { useChatUIState } from '../../context/useChatUIState';
+import { useReadReceipt } from '../../hooks/useReadReceipt/useReadReceipt';
+import { useScroll } from '../../hooks/useScroll';
+import { isCallMessage, isCreateGroupMessage } from '../../utils/call';
+import { isTypingEndMessage, isTypingMessage, isTypingStartMessage } from '../../utils/chatTypingStatus';
+import { throttle } from '../../utils/lodash';
+import { Message as DefaultMessage } from './Message';
+import { MessageForward } from './MessageForward';
+import { MessageListContextSymbol } from './MessageListContext';
+import { MessageTimeDivider as DefaultMessageTimeDivider } from './MessageTimeDivider';
+import { ScrollToBottom } from './ScrollToBottom';
+import type { MessageAction } from '../../hooks/useMessageActions';
+import type { MessageInfo, MessageType } from '@atomicxcore/core';
+
+// Define message chunk interface
+interface MessageChunk {
+  timestamp: number; // Milliseconds
+  messages: MessageInfo[];
+  key: string;
+}
+
+type PendingInitialScrollTask =
+  | { type: 'bottom' }
+  | { type: 'locate'; messageID: string }
+  | null;
+
+interface MessageListProps {
+  /** channel */
+  channel?: string | undefined;
+  alignment?: 'left' | 'right' | 'two-sided';
+  /** max time between message group (in seconds) */
+  messageAggregationTime?: number | undefined;
+  /** enable read receipt */
+  enableReadReceipt?: boolean | undefined;
+  /** message actions e.g. recall, delete, etc. */
+  messageActionList?: MessageAction[] | undefined;
+  /** custom filter function */
+  filter?: ((message: MessageInfo) => boolean) | undefined;
+  /** custom message component */
+  Message?: Component | undefined;
+  /** custom message timeline component */
+  MessageTimeDivider?: Component | undefined;
+  /** custom message avatar component */
+  messageAvatar?: Component | undefined;
+  /** custom renderers to override built-in message bubble content by MessageType */
+  messageRenderers?: Record<MessageType, Component> | undefined;
+}
+
+const props = withDefaults(defineProps<MessageListProps>(), {
+  /** props */
+  channel: 'default',
+  alignment: 'two-sided',
+  messageAggregationTime: 5 * 60,
+  enableReadReceipt: false,
+  messageActionList: undefined,
+  filter: undefined,
+  /** custom components */
+  Message: undefined,
+  MessageTimeDivider: undefined,
+  messageAvatar: undefined,
+  messageRenderers: undefined,
+});
+
+const slots = useSlots();
+provide(MessageListContextSymbol, {
+  slots,
+  get messageRenderers() {
+    return props.messageRenderers;
+  },
+});
+
+const { t } = useUIKit();
+
+const NEAR_BOTTOM_THRESHOLD = 150;
+const isNearBottom = ref(true);
+const newMessageCount = ref(0);
+const didInitialScroll = ref(false);
+const pendingInitialScrollTask = ref<PendingInitialScrollTask>(null);
+const loadingOlder = ref(false);
+const scrollContainer = ref<HTMLElement | null>(null);
+
+const chatUIState = useChatUIState(props.channel);
+const {
+  activeConversationID,
+  messageList,
+  hasNewerMessages,
+  clearConversationUnreadCount,
+  loadMessages,
+  loadOlderMessages,
+  messageListOnEvent,
+} = useChatContext(props.channel);
+const {
+  enableReadReceipt,
+  highlightMessage,
+  isPeerTyping,
+  recalledMessageIDSet,
+  setIsPeerTyping,
+  listMode,
+  pendingLocateMessage, setPendingLocateMessage,
+} = chatUIState;
+
+provide('channel', props.channel);
+
+const { scrollToBottom, scrollToMessage } = useScroll();
+const {
+  observeMessageList,
+  resetProcessedMessages,
+} = useReadReceipt({
+  enabled: props.enableReadReceipt ?? false,
+  channel: props.channel,
+  containerSelector: '#messageScrollList',
+  getMessageIDFromDom: dom => (dom as HTMLElement).dataset.messageId || '',
+});
+
+async function completeInitialScrollForEmptyList() {
+  pendingInitialScrollTask.value = null;
+  await nextTick();
+  isNearBottom.value = true;
+  didInitialScroll.value = true;
+  observeMessageList();
+}
+
+const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
+
+// Message aggregation logic
+const messageChunks = computed(() => {
+  if (!messageList.value) {
+    return [];
+  }
+
+  // Apply filter first
+  const filteredMessageList = props.filter
+    ? messageList.value.filter(props.filter)
+    : messageList.value.filter(message => message.status !== MessageStatus.Deleted);
+
+  // Clear logic for messageAggregationTime: enable message aggregation when value > 0, otherwise disable
+  if (!props.messageAggregationTime || props.messageAggregationTime <= 0) {
+    // No message aggregation, each message becomes a separate chunk
+    return filteredMessageList.map(message => ({
+      timestamp: message.timestamp ? message.timestamp.getTime() : 0,
+      messages: [message],
+      key: `chunk-${message.msgID}`,
+    }));
+  }
+
+  // Perform message aggregation
+  const chunks: MessageChunk[] = [];
+  // Convert seconds to milliseconds to match Date.getTime() unit
+  const MAX_TIME_BETWEEN_MESSAGE_GROUP = props.messageAggregationTime * 1000;
+
+  filteredMessageList.forEach((message, index, messages) => {
+    const messageTime = message.timestamp ? message.timestamp.getTime() : 0;
+    const prevChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
+    const prevMessage = index > 0 ? messages[index - 1] : undefined;
+
+    const shouldCreateNewChunk = !prevChunk
+      || messageTime - prevChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
+      || prevChunk.messages[0].from.userID !== message.from.userID
+      || message.status === MessageStatus.Recalled
+      || (prevMessage && prevMessage.status === MessageStatus.Recalled)
+      || message.status === MessageStatus.Deleted
+      || (prevMessage && prevMessage.status === MessageStatus.Deleted)
+      || message.status === MessageStatus.Violation
+      || (prevMessage && prevMessage.status === MessageStatus.Violation)
+      || isCallMessage(message)
+      || (prevMessage && isCallMessage(prevMessage))
+      || (prevMessage && isCreateGroupMessage(prevMessage));
+
+    if (shouldCreateNewChunk) {
+      chunks.push({
+        timestamp: messageTime,
+        messages: [message],
+        key: `chunk-${message.msgID}`,
+      });
+    } else {
+      prevChunk.messages.push(message);
+    }
+  });
+
+  return chunks;
+});
+
+// Monitor scroll events
+const handleScroll = throttle(() => {
+  const el = scrollContainer.value;
+  if (!el) {
+    return;
+  }
+  const wasNearBottom = isNearBottom.value;
+  isNearBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_THRESHOLD;
+  if (isNearBottom.value && listMode.value === 'latest') {
+    if (newMessageCount.value > 0) {
+      newMessageCount.value = 0;
+    }
+    // Clear unread on edge: user scrolled back to bottom
+    if (!wasNearBottom && activeConversationID.value) {
+      clearConversationUnreadCount(activeConversationID.value).catch(() => {});
+    }
+  }
+}, 100);
+
+// Initialize message list
+const initializeMessageList = async () => {
+  didInitialScroll.value = false;
+  pendingInitialScrollTask.value = null;
+  newMessageCount.value = 0;
+  resetProcessedMessages();
+
+  const locateInfo = pendingLocateMessage.value;
+  if (locateInfo && locateInfo.conversationID === activeConversationID.value) {
+    listMode.value = 'fragment';
+    pendingInitialScrollTask.value = {
+      type: 'locate',
+      messageID: locateInfo.messageID,
+    };
+    await loadMessages({
+      messageListType: 'history',
+      cursor: {
+        msgID: locateInfo.messageID,
+        sequence: locateInfo.sequence,
+        timestamp: locateInfo.time != null ? new Date(locateInfo.time * 1000) : undefined,
+      } as MessageInfo,
+      direction: 'both',
+    })
+      .catch(async () => {
+        setPendingLocateMessage(null);
+        TUIToast.error({
+          message: t('MessageList.origin_message_has_been_recalled'),
+        });
+        if (!didInitialScroll.value) {
+          listMode.value = 'latest';
+          pendingInitialScrollTask.value = { type: 'bottom' };
+          await loadMessages();
+        }
+      });
+  } else {
+    listMode.value = 'latest';
+    pendingInitialScrollTask.value = { type: 'bottom' };
+    await loadMessages();
+  }
+};
+
+// Load more older messages
+const handleLoadOlder = async () => {
+  if (!didInitialScroll.value || loadingOlder.value || listMode.value === 'fragment') {
+    return;
+  }
+  const el = scrollContainer.value;
+  if (!el || !messageList.value?.length) {
+    return;
+  }
+  const oldScrollHeight = el.scrollHeight;
+  loadingOlder.value = true;
+  try {
+    await loadOlderMessages();
+    await nextTick();
+    if (scrollContainer.value) {
+      scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight - oldScrollHeight;
+    }
+  } finally {
+    loadingOlder.value = false;
+  }
+};
+
+const handleBackToLatest = async () => {
+  if (!activeConversationID.value) {
+    return;
+  }
+  listMode.value = 'latest';
+  newMessageCount.value = 0;
+  await loadMessages();
+  await nextTick();
+  scrollToBottom(scrollContainer.value, 'instant');
+  observeMessageList();
+};
+
+let unsubscribeEvent: (() => void) | null = null;
+
+function handleNewMessage(message: MessageInfo) {
+  if (isTypingMessage(message)) {
+    if (!message.isSentBySelf) {
+      if (isTypingStartMessage(message)) {
+        setIsPeerTyping(true);
+      } else if (isTypingEndMessage(message)) {
+        setIsPeerTyping(false);
+      }
+    }
+    return;
+  }
+
+  // 自己发的消息：fragment 模式先切回 latest，latest 模式直接滚底
+  if (message.isSentBySelf) {
+    if (listMode.value === 'fragment') {
+      handleBackToLatest();
+    } else {
+      nextTick(() => scrollToBottom(scrollContainer.value, 'smooth'));
+    }
+    return;
+  }
+
+  // Other's message
+  if (activeConversationID.value) {
+    clearConversationUnreadCount(activeConversationID.value).catch(() => {});
+  }
+  if (listMode.value === 'fragment') {
+    newMessageCount.value += 1;
+    return;
+  }
+  if (isNearBottom.value) {
+    nextTick(() => scrollToBottom(scrollContainer.value, 'smooth'));
+  } else {
+    newMessageCount.value += 1;
+  }
+}
+
+watch(activeConversationID, () => {
+  setIsPeerTyping(false);
+  recalledMessageIDSet.value = new Set();
+  if (unsubscribeEvent) {
+    unsubscribeEvent();
+  }
+  unsubscribeEvent = messageListOnEvent((event) => {
+    if (event.type === 'onReceiveNewMessage') {
+      handleNewMessage(event.message);
+    }
+  });
+  initializeMessageList();
+});
+
+// Same-conversation search locate
+watch(pendingLocateMessage, (locateInfo) => {
+  if (!locateInfo) {
+    return;
+  }
+  if (locateInfo.conversationID === activeConversationID.value) {
+    initializeMessageList();
+  }
+});
+
+// Fragment 模式下翻到最新时，自动切回 latest
+watch(hasNewerMessages, (hasNewer) => {
+  if (hasNewer === false && listMode.value === 'fragment') {
+    listMode.value = 'latest';
+    newMessageCount.value = 0;
+    nextTick(() => scrollToBottom(scrollContainer.value, 'auto'));
+  }
+});
+
+watch(messageList,
+  async () => {
+    const task = pendingInitialScrollTask.value;
+    if (!task) {
+      return;
+    }
+
+    pendingInitialScrollTask.value = null;
+
+    if (task.type === 'bottom') {
+      scrollToBottom(scrollContainer.value, 'auto');
+      isNearBottom.value = true;
+    } else {
+      await scrollToMessage(scrollContainer.value, task.messageID, {
+        block: 'center',
+        behavior: 'instant',
+      }).catch(() => {});
+      highlightMessage({ messageID: task.messageID, duration: 3000 });
+      setPendingLocateMessage(null);
+    }
+    await completeInitialScrollForEmptyList();
+  },
+  { flush: 'post' },
+);
+
+// Populate recalledMessageIDSet by scanning messageList for recalled messages.
+// UIContext only holds the container (and keeps it append-only across the app
+// lifecycle); MessageList owns the filling logic because only it has access to
+// the messageList data source. Mirrors the legacy MessageListState behaviour
+// of `if (message.isRevoked) recalledMessageIDSet.add(message.ID)`, mapped to
+// the new API where `msgID` replaces `ID` and `MessageStatus.Recalled` replaces
+// the `isRevoked` boolean.
+watch(messageList, (currentMessageList) => {
+  if (!currentMessageList?.length) {
+    return;
+  }
+  let updated: Set<string> | null = null;
+  for (const message of currentMessageList) {
+    if (message.status === MessageStatus.Recalled || message.status === MessageStatus.Deleted) {
+      if (updated === null) {
+        updated = new Set(recalledMessageIDSet.value);
+      }
+      updated.add(message.msgID);
+    }
+  }
+  if (updated !== null) {
+    recalledMessageIDSet.value = updated;
+  }
+}, { immediate: true });
+
+watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {
+  enableReadReceipt.value = newEnableReadReceipt;
+}, {
+  immediate: true,
+});
+
+onMounted(() => {
+  if (scrollContainer.value) {
+    scrollContainer.value.addEventListener('scroll', handleScroll, { passive: true });
+  }
+  unsubscribeEvent = messageListOnEvent((event) => {
+    if (event.type === 'onReceiveNewMessage') {
+      handleNewMessage(event.message);
+    }
+  });
+  initializeMessageList();
+});
+
+onUnmounted(() => {
+  if (scrollContainer.value) {
+    scrollContainer.value.removeEventListener('scroll', handleScroll);
+  }
+  if (unsubscribeEvent) {
+    unsubscribeEvent();
+    unsubscribeEvent = null;
+  }
+});
+
+defineExpose({
+  scrollToBottom: (behavior?: ScrollBehavior) => scrollToBottom(scrollContainer.value, behavior),
+});
+</script>
+
+<template>
+  <div
+    class="message-list"
+    :class="{ 'message-list--initializing': !didInitialScroll }"
+  >
+    <div
+      id="messageScrollList"
+      ref="scrollContainer"
+      class="message-list-container"
+    >
+      <ObserverView
+        v-if="listMode === 'latest' && didInitialScroll"
+        root="#messageScrollList"
+        :rootMargin="'50px 0px 0px 0px'"
+        :threshold="0.1"
+        @on-show="handleLoadOlder"
+      >
+        <div id="loadMore" />
+      </ObserverView>
+
+      <View
+        v-for="(chunk, chunkIndex) in messageChunks"
+        :key="chunk.key"
+        :class="cs('message-chunk--container')"
+      >
+        <!-- <div>11</div> -->
+        <!-- Time Divider -->
+        <component
+          :is="props.MessageTimeDivider || DefaultMessageTimeDivider"
+          :previousMessage="chunkIndex > 0 ? messageChunks[chunkIndex-1].messages[0] : undefined"
+          :currentMessage="chunk.messages[0]"
+        />
+
+        <!-- Message Chunk -->
+        <div class="message-chunk">
+          <template
+            v-for="(message, messageIndex) in chunk.messages"
+            :key="message.msgID"
+          >
+            <component
+              :is="props.Message || DefaultMessage"
+              :message="message"
+              :alignment="props.alignment"
+              :messageActionList="props.messageActionList"
+              :message-avatar="props.messageAvatar"
+              :isAggregated="Boolean(enableMessageAggregation && messageIndex !== 0)"
+              :is-first-in-chunk="Boolean(messageIndex === 0)"
+              :is-last-in-chunk="Boolean(messageIndex === chunk.messages.length - 1)"
+              :isHiddenMessageAvatar="
+                Boolean(enableMessageAggregation && messageIndex !== 0)
+              "
+              :removeAvatar="
+                Boolean(alignment === 'two-sided' && message.isSentBySelf)
+              "
+              :is-hidden-message-nick="
+                Boolean(
+                  (alignment === 'two-sided'
+                    ? enableMessageAggregation && messageIndex !== 0 || message.isSentBySelf
+                    : enableMessageAggregation && messageIndex !== 0)
+                )
+              "
+            />
+          </template>
+        </div>
+      </View>
+      <div style="height: 10px;" />
+    </div>
+    <MessageForward />
+    <div
+      v-if="isPeerTyping"
+      class="message-list__typing-indicator"
+    >
+      {{ t('MessageList.peer_is_typing') }}
+    </div>
+    <ScrollToBottom
+      v-if="listMode === 'fragment' || (!isNearBottom && listMode === 'latest')"
+      :class="cs('scroll-to-bottom')"
+      @click="listMode === 'fragment' ? handleBackToLatest() : scrollToBottom(scrollContainer, 'smooth')"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../../styles/mixins/_scrollbar.scss' as scrollbar;
+
+.message-list {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--bg-color-operate);
+}
+
+.message-list--initializing {
+  .message-list-container {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.message-list-container {
+  flex: 1;
+  height: 100%;
+  padding: 0 10px;
+  overflow: auto;
+  padding-bottom: 12px;
+  @include scrollbar.scrollbar-hidden();
+}
+.message-chunk--container {
+  margin-top: 25px;
+}
+.message-chunk {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.message-action-mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+.message-action-container {
+  position: absolute;
+}
+
+.highlight-shadow {
+  @keyframes shadow-blink {
+    50% {
+      box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
+    }
+  }
+
+  & {
+    box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
+    animation: shadow-blink 1s linear 3;
+  }
+}
+
+.new-message-notification {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--primary-color, #006eff);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: var(--primary-color-hover, #0057cc);
+  }
+}
+
+.message-list__typing-indicator {
+  position: absolute;
+  left: 12px;
+  bottom: 2px;
+  z-index: 10;
+  font-size: 12px;
+  animation: fade-in 0.2s ease-out forwards, breathing 2s ease-in-out 0.2s infinite;
+  color: var(--text-color-secondary, #8f959e);
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes breathing {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+}
+
+.scroll-to-bottom {
+  position: absolute;
+  bottom: 95px;
+  right: 8px;
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageTimeDivider/MessageTimeDivider.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageTimeDivider/MessageTimeDivider.vue
new file mode 100644
index 0000000..4116cce
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageTimeDivider/MessageTimeDivider.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { h, computed, Fragment } from 'vue';
+import { getTimeStampAuto } from '../../../utils/time';
+import type { MessageInfo } from '@atomicxcore/core';
+
+interface MessageTimeDividerProps {
+  previousMessage: MessageInfo | undefined;
+  currentMessage: MessageInfo;
+}
+
+const props = withDefaults(defineProps<MessageTimeDividerProps>(), {
+  previousMessage: undefined,
+  currentMessage: () => ({}) as MessageInfo,
+});
+
+const shouldShowTimeDivider = computed(() => {
+  if (!props.currentMessage?.timestamp) {
+    return false;
+  }
+
+  const prevMs = props.previousMessage?.timestamp
+    ? props.previousMessage.timestamp.getTime()
+    : 0;
+  const currentMs = props.currentMessage.timestamp.getTime();
+
+  // Show divider when messages are more than 5 minutes apart
+  return currentMs - prevMs > 5 * 60 * 1000;
+});
+
+const renderDefaultContent = () => {
+  if (!shouldShowTimeDivider.value) {
+    return h(Fragment, null, []);
+  }
+
+  const currentTimestamp = props.currentMessage.timestamp;
+
+  return h('div', { class: 'message-time-divider' }, [
+    h('span', {}, getTimeStampAuto(currentTimestamp ?? new Date())),
+  ]);
+};
+</script>
+
+<template>
+  <component :is="renderDefaultContent()" />
+</template>
+
+<style lang="scss" scoped>
+.message-time-divider {
+  text-align: center;
+  margin: 10px 0;
+  font-size: 12px;
+  color: var(--text-color-tertiary);
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageTimeDivider/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageTimeDivider/index.ts
new file mode 100644
index 0000000..0cf8367
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/MessageTimeDivider/index.ts
@@ -0,0 +1,3 @@
+import MessageTimeDivider from './MessageTimeDivider.vue';
+
+export { MessageTimeDivider };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ReadReceiptInfo/ReadReceiptInfo.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ReadReceiptInfo/ReadReceiptInfo.vue
new file mode 100644
index 0000000..1f06015
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ReadReceiptInfo/ReadReceiptInfo.vue
@@ -0,0 +1,579 @@
+<script lang="ts" setup>
+import { ref, watch, onUnmounted } from 'vue';
+import { useMessageActionStore } from '../../../chat-store';
+// import { TUIStore, TUIChatService } from '@tencentcloud/chat-uikit-engine-lite';
+import { useUIKit, IconLoading, IconClose } from '@tencentcloud/uikit-base-component-vue3';
+import { Modal } from '../../../baseComp/Modal';
+import { View } from '../../../baseComp/View';
+import { Avatar } from '../../Avatar';
+import type { MessageInfo } from '@atomicxcore/core';
+
+// Props
+interface ReadReceiptInfoProps {
+  /** Message */
+  message: MessageInfo;
+  /** Whether the forward modal is open */
+  open: boolean;
+  /** Read count */
+  readCount?: number;
+  /** Unread count */
+  unreadCount?: number;
+  /** Additional class names for styling */
+  className?: string | undefined;
+  /** Custom style */
+  style?: Record<string, any> | undefined;
+}
+
+const props = withDefaults(defineProps<ReadReceiptInfoProps>(), {
+  message: () => ({}) as MessageInfo,
+  open: false,
+  readCount: 0,
+  unreadCount: 0,
+  className: undefined,
+  style: undefined,
+});
+
+const emits = defineEmits<{
+  onClose: [e?: unknown, reason?: 'backdropClick' | 'escapeKeyDown'];
+}>();
+
+const { t } = useUIKit();
+const {
+  readMemberList,
+  unreadMemberList,
+  hasMoreReadMembers,
+  hasMoreUnreadMembers,
+  loadReadMembers,
+  loadUnreadMembers,
+  loadMoreMembers,
+} = useMessageActionStore(props.message);
+
+// State
+const activeTab = ref<'read' | 'unread'>('read');
+
+// Read users state
+const readLoading = ref(false);
+const readListVisible = ref(false);
+
+// Unread users state
+const unreadLoading = ref(false);
+const unreadListVisible = ref(false);
+
+// Separate loading flag for load-more pagination to prevent concurrent requests
+const loadMoreLoading = ref(false);
+
+// Debounce timer for scroll handler
+let scrollDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+onUnmounted(() => {
+  if (scrollDebounceTimer !== null) {
+    clearTimeout(scrollDebounceTimer);
+  }
+});
+
+// Methods
+const loadReadUsers = async () => {
+  readLoading.value = true;
+  try {
+    await loadReadMembers(100);
+  } catch (error) {
+    console.error('Failed to load read users:', error);
+  } finally {
+    readLoading.value = false;
+  }
+};
+
+const loadUnreadUsers = async () => {
+  unreadLoading.value = true;
+  try {
+    await loadUnreadMembers(50);
+  } catch (error) {
+    console.error('Failed to load unread users:', error);
+  } finally {
+    unreadLoading.value = false;
+  }
+};
+
+const resetReadState = () => {
+  readListVisible.value = false;
+};
+
+const resetUnreadState = () => {
+  unreadListVisible.value = false;
+};
+
+const setActiveTab = (tab: 'read' | 'unread') => {
+  activeTab.value = tab;
+};
+
+const handleScroll = (event: Event) => {
+  // Use currentTarget (the bound element) for accurate scroll measurements
+  const target = (event.currentTarget ?? event.target) as HTMLElement;
+  const { scrollTop, scrollHeight, clientHeight } = target;
+
+  if (scrollHeight - scrollTop - clientHeight >= 50) {
+    return;
+  }
+
+  if (scrollDebounceTimer !== null) {
+    clearTimeout(scrollDebounceTimer);
+  }
+
+  scrollDebounceTimer = setTimeout(() => {
+    scrollDebounceTimer = null;
+
+    if (loadMoreLoading.value) {
+      return;
+    }
+
+    const shouldLoadMore
+      = (activeTab.value === 'read' && hasMoreReadMembers.value && !readLoading.value)
+        || (activeTab.value === 'unread' && hasMoreUnreadMembers.value && !unreadLoading.value);
+
+    if (!shouldLoadMore) {
+      return;
+    }
+
+    loadMoreLoading.value = true;
+    loadMoreMembers(activeTab.value === 'read')
+      .finally(() => {
+        loadMoreLoading.value = false;
+      });
+  }, 200);
+};
+
+const handleClose = (e?: unknown, reason?: 'backdropClick' | 'escapeKeyDown') => {
+  emits('onClose', e, reason);
+};
+
+// Watchers
+watch(() => props.open, (newOpen) => {
+  if (newOpen) {
+    // Reset states
+    resetReadState();
+    resetUnreadState();
+
+    // Load initial data
+    loadReadUsers();
+    loadUnreadUsers();
+  }
+});
+
+// Skip the first trigger that fires simultaneously with `open` becoming true.
+// That initial load is already handled by the open watcher above.
+watch([() => props.readCount, () => props.unreadCount], () => {
+  if (!props.open || !props.message.msgID) {
+    return;
+  }
+  if (readLoading.value || unreadLoading.value) {
+    return;
+  }
+  if (activeTab.value === 'read') {
+    loadReadUsers();
+  } else {
+    loadUnreadUsers();
+  }
+});
+
+// Add visibility class when member list is loaded from store
+watch([() => readMemberList.value.length, readLoading], ([length, loading]) => {
+  if (length > 0 && !loading) {
+    readListVisible.value = true;
+  } else if (length === 0) {
+    readListVisible.value = false;
+  }
+});
+
+watch([() => unreadMemberList.value.length, unreadLoading], ([length, loading]) => {
+  if (length > 0 && !loading) {
+    unreadListVisible.value = true;
+  } else if (length === 0) {
+    unreadListVisible.value = false;
+  }
+});
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    content-class="readReceiptInfo"
+    @on-close="handleClose"
+  >
+    <View class="read-receipt-info__header">
+      <IconClose
+        class="read-receipt-info__close-icon"
+        @click="handleClose"
+      />
+      <View class="read-receipt-info__title">
+        {{ t('MessageList.read_receipt_detail') }}
+      </View>
+    </View>
+
+    <View class="read-receipt-info__tabs">
+      <button
+        :class="[
+          'read-receipt-info__tab-button',
+          { 'read-receipt-info__tab-button--active': activeTab === 'read' }
+        ]"
+        @click="setActiveTab('read')"
+      >
+        {{ t('MessageList.read') }} ({{ readCount }})
+      </button>
+      <button
+        :class="[
+          'read-receipt-info__tab-button',
+          { 'read-receipt-info__tab-button--active': activeTab === 'unread' }
+        ]"
+        @click="setActiveTab('unread')"
+      >
+        {{ t('MessageList.unread') }} ({{ unreadCount }})
+      </button>
+    </View>
+
+    <View class="read-receipt-info__content">
+      <View
+        v-if="activeTab === 'read'"
+        class="read-receipt-info__user-list"
+        @scroll="handleScroll"
+      >
+        <template v-if="readMemberList.length === 0">
+          <View
+            v-if="readLoading"
+            class="read-receipt-info__loading"
+          >
+            <IconLoading class="read-receipt-info__loading-icon" />
+            <View class="read-receipt-info__loading-text">
+              {{ t('MessageList.loading') }}
+            </View>
+          </View>
+          <View
+            v-else
+            class="read-receipt-info__empty"
+          >
+            {{ t('MessageList.no_read_members') }}
+          </View>
+        </template>
+        <template v-else>
+          <div
+            :class="[
+              'read-receipt-info__user-list-container',
+              { 'read-receipt-info__user-list-container--visible': readListVisible }
+            ]"
+          >
+            <View
+              v-for="user in readMemberList"
+              :key="user.userID || ''"
+              class="read-receipt-info__user-item"
+            >
+              <Avatar
+                :src="user.avatarURL ?? ''"
+                :alt="user.friendRemark || user.nameCard || user.nickname || user.userID"
+              />
+              <View class="read-receipt-info__user-item-info">
+                <View class="read-receipt-info__user-item-name">
+                  {{ user.friendRemark || user.nameCard || user.nickname || user.userID }}
+                </View>
+              </View>
+            </View>
+            <View
+              v-if="readLoading"
+              class="read-receipt-info__loading"
+            >
+              <IconLoading class="read-receipt-info__loading-icon" />
+              <View class="read-receipt-info__loading-text">
+                {{ t('MessageList.loading') }}
+              </View>
+            </View>
+            <View
+              v-if="!hasMoreReadMembers"
+              class="read-receipt-info__list-end"
+            >
+              {{ t('MessageList.no_more') }}
+            </View>
+          </div>
+        </template>
+      </View>
+
+      <View
+        v-if="activeTab === 'unread'"
+        class="read-receipt-info__user-list"
+        @scroll="handleScroll"
+      >
+        <template v-if="unreadMemberList.length === 0">
+          <View
+            v-if="unreadLoading"
+            class="read-receipt-info__loading"
+          >
+            <IconLoading class="read-receipt-info__loading-icon" />
+            <View class="read-receipt-info__loading-text">
+              {{ t('MessageList.loading') }}
+            </View>
+          </View>
+          <View
+            v-else
+            class="read-receipt-info__empty"
+          >
+            {{ t('MessageList.no_unread_members') }}
+          </View>
+        </template>
+        <template v-else>
+          <div
+            :class="[
+              'read-receipt-info__user-list-container',
+              { 'read-receipt-info__user-list-container--visible': unreadListVisible }
+            ]"
+          >
+            <View
+              v-for="user in unreadMemberList"
+              :key="user.userID"
+              class="read-receipt-info__user-item"
+            >
+              <Avatar
+                :src="user.avatarURL ?? ''"
+                :alt="user.friendRemark || user.nameCard || user.nickname || user.userID"
+              />
+              <View class="read-receipt-info__user-item-info">
+                <View class="read-receipt-info__user-item-name">
+                  {{ user.friendRemark || user.nameCard || user.nickname || user.userID }}
+                </View>
+              </View>
+            </View>
+            <View
+              v-if="unreadLoading"
+              class="read-receipt-info__loading"
+            >
+              <IconLoading class="read-receipt-info__loading-icon" />
+              <View class="read-receipt-info__loading-text">
+                {{ t('MessageList.loading') }}
+              </View>
+            </View>
+            <View
+              v-if="!hasMoreUnreadMembers"
+              class="read-receipt-info__list-end"
+            >
+              {{ t('MessageList.no_more') }}
+            </View>
+          </div>
+        </template>
+      </View>
+    </View>
+  </Modal>
+</template>
+
+<style lang="scss">
+@use '../../../styles/mixins' as mixin;
+
+.readReceiptInfo {
+  width: 80vw;
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  overflow: hidden;
+
+  @include mixin.tablet-and-up {
+    width: 50vw;
+    height: 60vh;
+  }
+
+  @include mixin.desktop-and-up {
+    width: 360px;
+    height: 480px;
+  }
+}
+
+</style>
+
+<style lang="scss" scoped>
+@use '../../../styles/mixins' as mixin;
+
+:deep(.readReceiptInfo) {
+  width: 80vw;
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  overflow: hidden;
+
+  @include mixin.tablet-and-up {
+    width: 50vw;
+    height: 60vh;
+  }
+
+  @include mixin.desktop-and-up {
+    width: 360px;
+    height: 480px;
+  }
+}
+
+.read-receipt-info {
+  &__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 56px;
+    padding: 0 16px;
+    border-bottom: 1px solid var(--stroke-color-module);
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+  }
+
+  &__close-icon {
+    position: absolute;
+    left: 16px;
+    cursor: pointer;
+    color: var(--text-color-secondary);
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--text-color-primary);
+    }
+  }
+
+  &__tabs {
+    height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--stroke-color-module);
+  }
+
+  &__tab-button {
+    flex: 1;
+    height: 100%;
+    border: none;
+    background: none;
+    font-size: 14px;
+    cursor: pointer;
+    position: relative;
+    transition: color 0.2s;
+    padding: 0;
+    color: var(--text-color-secondary);
+
+    &:hover {
+      color: var(--text-color-primary);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &--active {
+      color: var(--text-color-link);
+      font-weight: 500;
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 2px;
+        background-color: var(--text-color-link);
+        transition: width 0.2s ease;
+      }
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__user-list {
+    flex: 1;
+    overflow-y: auto;
+
+    @include mixin.scrollbar-default;
+  }
+
+  &__user-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 16px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: var(--list-color-hover);
+    }
+
+    &-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &-name {
+      font-size: 14px;
+      line-height: 20px;
+      @include mixin.text-ellipsis;
+      color: var(--text-color-primary);
+    }
+  }
+
+  &__user-list-container {
+    opacity: 0;
+    transform: translateY(10px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+
+    &--visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  &__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+
+    &-icon {
+      animation: loading-spin 1s linear infinite;
+      color: var(--text-color-link);
+    }
+
+    &-text {
+      margin-top: 8px;
+      font-size: 14px;
+      color: var(--text-color-secondary);
+    }
+  }
+
+  &__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100px;
+    font-size: 14px;
+    color: var(--text-color-secondary);
+  }
+
+  &__list-end {
+    text-align: center;
+    padding: 12px 0;
+    font-size: 12px;
+    color: var(--text-color-secondary);
+  }
+}
+
+@keyframes loading-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ReadReceiptInfo/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ReadReceiptInfo/index.ts
new file mode 100644
index 0000000..c9df778
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ReadReceiptInfo/index.ts
@@ -0,0 +1,3 @@
+import ReadReceiptInfo from './ReadReceiptInfo.vue';
+
+export { ReadReceiptInfo };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ScrollToBottom/ScrollToBottom.vue b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ScrollToBottom/ScrollToBottom.vue
new file mode 100644
index 0000000..009e774
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ScrollToBottom/ScrollToBottom.vue
@@ -0,0 +1,50 @@
+<template>
+  <button
+    :class="$style['scroll-to-bottom__button']"
+    @click="emits('click')"
+  >
+    <IconArrowStrokeSelectDown
+      :customClass="$style['scroll-to-bottom__button--icon']"
+      :size="18"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { IconArrowStrokeSelectDown } from '@tencentcloud/uikit-base-component-vue3';
+
+const emits = defineEmits(['click']);
+</script>
+
+<style lang="scss" module>
+.scroll-to-bottom__button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+
+  box-shadow:
+    0 12px 26px 0 var(--shadow-color),
+    0 8px 12px 0 var(--shadow-color);
+  background: var(--dropdown-color-default);
+
+  &:hover {
+    background: var(--dropdown-color-hover);
+  }
+
+  &:active {
+    background: get(dropdown-color-active);
+    box-shadow: none;
+  }
+
+  &--icon {
+    color: var(--text-color-link);
+  }
+}
+</style>
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ScrollToBottom/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ScrollToBottom/index.ts
new file mode 100644
index 0000000..9f8cec0
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/ScrollToBottom/index.ts
@@ -0,0 +1,5 @@
+import ScrollToBottom from './ScrollToBottom.vue';
+
+export {
+  ScrollToBottom,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/en-US.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/en-US.ts
new file mode 100644
index 0000000..ff78f71
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/en-US.ts
@@ -0,0 +1,186 @@
+const MessageList = {
+
+  // GroupTipMessage
+  administrator: 'Administrator',
+  enabled_mute_all_members: 'enabled mute all members',
+  disabled_mute_all_members: 'disabled mute all members',
+  became_new_group_owner: 'became the new group owner',
+  changed_group_name_to: 'changed group name to',
+  published_new_announcement: 'published new group notification',
+  joined_group: 'joined the group',
+  invited: 'invited',
+  group_member: 'Group member',
+  left_group: 'left the group',
+  was: 'was',
+  kicked_out_of_group: 'kicked out of the group',
+  became_admin: 'became admin',
+  admin_privileges_revoked: 'admin privileges revoked',
+  was_muted: 'was muted',
+  was_unmuted: 'was unmuted',
+  group_tip_message: 'Group tip message',
+  changed_group_avatar: 'changed group avatar',
+  changed_group_introduction: 'changed group introduction',
+  changed_group_join_option: 'changed group join option to',
+  changed_group_invite_option: 'changed group invite option to',
+  join_option_any: 'Free Access',
+  join_option_auth: 'Need Approval',
+  join_option_forbid: 'Disabled',
+  invite_option_any: 'Free Invite',
+  invite_option_auth: 'Need Approval',
+  invite_option_forbid: 'Disabled',
+  pinned_a_message: 'pinned a message',
+  unpinned_a_message: 'unpinned a message',
+  people: '',
+
+  // TUIChat
+  download_failed: 'Download failed',
+  create_group: 'Create Group',
+  unread: 'Unread',
+  all_read: 'All Read',
+  read: 'Read',
+  you: 'You',
+  recalled_a_message: 'recalled a message',
+  reedit: 'Re-edit',
+  origin_message_has_been_recalled: 'Original message has been deleted or recalled',
+  forward: 'Forward',
+  copy: 'Copy',
+  recall: 'Recall',
+  quote: 'Quote',
+  delete: 'Delete',
+  max_count_exceed: 'Max Count Exceed',
+  read_receipt_detail: 'Read Receipt Detail',
+  read_count: 'Read Count',
+  unread_count: 'Unread Count',
+  loading: 'Loading',
+  no_read_members: 'No Read Members',
+  no_more: 'No More',
+  no_unread_members: 'No Unread Members',
+  yesterday: 'Yesterday',
+  peer_is_typing: 'Peer is typing',
+
+  copy_success: 'Copied',
+  copy_failed: 'Copy Failed',
+  recall_success: 'Message recalled',
+  recall_failed: 'Recall Failed',
+  recall_time_limit_exceeded: 'Recall time limit exceeded',
+  delete_success: 'Deleted',
+  delete_failed: 'Delete Failed',
+
+  // Quote preview
+  quote_image: '[Image]',
+  quote_audio: '[Audio]',
+  quote_video: '[Video]',
+  quote_file: '[File]',
+  quote_face: '[Emoji]',
+  quote_custom: '[Custom]',
+  quote_merged: '[Chat History]',
+  quote_unknown: '[Message]',
+};
+
+const CallMessage = {
+  start_call: '{{messageSender}} start call',
+  call_ended: 'Call ended',
+  call_duration: 'Call duration',
+  switch_to_audio_call: 'Switch to audio call',
+  switch_to_video_call: 'Switch to video call',
+  cancel_call: 'Cancel call',
+  canceled: 'Canceled',
+  canceled_by_recipient: 'Call canceled by caller',
+  answered: 'Answered',
+  decline_call: 'Decline call',
+  declined: 'Declined',
+  line_busy: 'Line busy',
+  missed_due_to_busy: 'Missed due to busy line',
+  declined_by_recipient: 'Call declined by user',
+  no_answer: 'No answer',
+  no_answer_from_recipient: 'Call wasn\'t answered',
+  no_answer_timeout: 'Call not answered (timeout)',
+};
+
+const RoomMessage = {
+  meeting_in_progress: 'Room in progress',
+  meeting: 'Room',
+  quick_conference: ' \'s Quick Room',
+  initiating: 'Initiating',
+  x_people_have_joined: '{{number}} people have entered the room',
+  waiting_for_members_to_join_the_meeting: 'Waiting members',
+  x_people_are_in_the_meeting: '{{number}} people are in the room',
+  already_joined: 'Already in room',
+  cannot_enter_while_in_other_meeting: 'You are already in another room. Please leave it first',
+  enter_the_meeting: 'Enter',
+  ending_meeting: 'Ending room',
+  the_meeting_has_ended: 'The room has ended',
+  room_does_not_exist_or_has_ended: 'The room does not exist or has ended',
+};
+
+const Emoji = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Guffaw]',
+  '[TUIEmoji_KindSmile]': '[KindSmile]',
+  '[TUIEmoji_Haha]': '[Haha]',
+  '[TUIEmoji_Cheerful]': '[Cheerful]',
+  '[TUIEmoji_Speechless]': '[Speechless]',
+  '[TUIEmoji_Amazed]': '[Amazed]',
+  '[TUIEmoji_Sorrow]': '[Sorrow]',
+  '[TUIEmoji_Complacent]': '[Complacent]',
+  '[TUIEmoji_Silly]': '[Silly]',
+  '[TUIEmoji_Lustful]': '[Lustful]',
+  '[TUIEmoji_Giggle]': '[Giggle]',
+  '[TUIEmoji_Kiss]': '[Kiss]',
+  '[TUIEmoji_Wail]': '[Wail]',
+  '[TUIEmoji_TearsLaugh]': '[TearsLaugh]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[BareTeeth]',
+  '[TUIEmoji_FlareUp]': '[FlareUp]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[StarEyes]',
+  '[TUIEmoji_ShutUp]': '[ShutUp]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Shit]',
+  '[TUIEmoji_Monster]': '[Monster]',
+  '[TUIEmoji_Daemon]': '[Daemon]',
+  '[TUIEmoji_Rage]': '[Rage]',
+  '[TUIEmoji_Fool]': '[Fool]',
+  '[TUIEmoji_Pig]': '[Pig]',
+  '[TUIEmoji_Cow]': '[Cow]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[Skull]',
+  '[TUIEmoji_Bombs]': '[Bombs]',
+  '[TUIEmoji_Coffee]': '[Coffee]',
+  '[TUIEmoji_Cake]': '[Cake]',
+  '[TUIEmoji_Beer]': '[Beer]',
+  '[TUIEmoji_Flower]': '[Flower]',
+  '[TUIEmoji_Watermelon]': '[Watermelon]',
+  '[TUIEmoji_Rich]': '[Rich]',
+  '[TUIEmoji_Heart]': '[Heart]',
+  '[TUIEmoji_Moon]': '[Moon]',
+  '[TUIEmoji_Sun]': '[Sun]',
+  '[TUIEmoji_Star]': '[Star]',
+  '[TUIEmoji_RedPacket]': '[RedPacket]',
+  '[TUIEmoji_Celebrate]': '[Celebrate]',
+  '[TUIEmoji_Bless]': '[Bless]',
+  '[TUIEmoji_Fortune]': '[Fortune]',
+  '[TUIEmoji_Convinced]': '[Convinced]',
+  '[TUIEmoji_Prohibit]': '[Prohibit]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[Knife]',
+  '[TUIEmoji_Like]': '[Like]',
+};
+
+export {
+  MessageList,
+  CallMessage,
+  RoomMessage,
+  Emoji,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/index.ts
new file mode 100644
index 0000000..343e160
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/index.ts
@@ -0,0 +1,9 @@
+import { MessageList as MessageListEn, CallMessage as CallMessageEn, RoomMessage as RoomMessageEn, Emoji as EmojiEn } from './en-US';
+import { MessageList as MessageListZh, CallMessage as CallMessageZh, RoomMessage as RoomMessageZh, Emoji as EmojiZh } from './zh-CN';
+
+const resources = {
+  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn, RoomMessage: RoomMessageEn, Emoji: EmojiEn },
+  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh, RoomMessage: RoomMessageZh, Emoji: EmojiZh },
+};
+
+export { resources };
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/zh-CN.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/zh-CN.ts
new file mode 100644
index 0000000..e248639
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/i18n/zh-CN.ts
@@ -0,0 +1,185 @@
+const MessageList = {
+  // GroupTipMessage
+  administrator: '管理员',
+  enabled_mute_all_members: '开启全员禁言',
+  disabled_mute_all_members: '取消全员禁言',
+  became_new_group_owner: '成为新的群主',
+  changed_group_name_to: '修改群名为',
+  published_new_announcement: '发布新公告',
+  joined_group: '加入群组',
+  invited: '邀请',
+  group_member: '群成员',
+  left_group: '退出群组',
+  was: '被',
+  kicked_out_of_group: '踢出群组',
+  became_admin: '成为管理员',
+  admin_privileges_revoked: '被撤销管理员',
+  was_muted: '被禁言',
+  was_unmuted: '被取消禁言',
+  group_tip_message: '群提示消息',
+  changed_group_avatar: '修改了群头像',
+  changed_group_introduction: '修改了群简介',
+  changed_group_join_option: '修改了入群方式为',
+  changed_group_invite_option: '修改了邀请入群方式为',
+  join_option_any: '自由加入',
+  join_option_auth: '需要验证',
+  join_option_forbid: '禁止加入',
+  invite_option_any: '自由邀请',
+  invite_option_auth: '需要验证',
+  invite_option_forbid: '禁止邀请',
+  pinned_a_message: '置顶了一条消息',
+  unpinned_a_message: '取消置顶了一条消息',
+  people: '人',
+
+  // TUIChat
+  download_failed: '下载失败',
+  create_group: '创建了群组',
+  unread: '未读',
+  all_read: '全部已读',
+  read: '已读',
+  you: '你',
+  recalled_a_message: '撤回了一条消息',
+  reedit: '重新编辑',
+  origin_message_has_been_recalled: '原消息已被删除或撤回',
+  forward: '转发',
+  copy: '复制',
+  recall: '撤回',
+  quote: '引用',
+  delete: '删除',
+  max_count_exceed: '超过最大数量限制',
+  read_receipt_detail: '已读详情',
+  read_count: '已读人数',
+  unread_count: '未读人数',
+  loading: '加载中',
+  no_read_members: '暂无已读成员',
+  no_more: '已加载全部',
+  no_unread_members: '暂无未读成员',
+  yesterday: '昨天',
+  peer_is_typing: '对方正在输入',
+
+  copy_success: '已复制',
+  copy_failed: '复制失败',
+  recall_success: '消息已撤回',
+  recall_failed: '撤回失败',
+  recall_time_limit_exceeded: '撤回时间限制已过期',
+  delete_success: '删除成功',
+  delete_failed: '删除失败',
+
+  // Quote preview
+  quote_image: '[图片]',
+  quote_audio: '[语音]',
+  quote_video: '[视频]',
+  quote_file: '[文件]',
+  quote_face: '[表情]',
+  quote_custom: '[自定义消息]',
+  quote_merged: '[合并消息]',
+  quote_unknown: '[消息]',
+};
+
+const CallMessage = {
+  start_call: '{{messageSender}} 发起通话',
+  call_ended: '通话结束',
+  call_duration: '通话时长',
+  switch_to_audio_call: '切换语音通话',
+  switch_to_video_call: '切换视频通话',
+  cancel_call: '取消通话',
+  canceled: '已取消',
+  canceled_by_recipient: '对方已取消',
+  answered: '已接听',
+  decline_call: '拒绝通话',
+  declined: '已拒绝',
+  line_busy: '对方忙线中',
+  missed_due_to_busy: '忙线未接听',
+  declined_by_recipient: '对方已拒绝',
+  no_answer: '无应答',
+  no_answer_from_recipient: '对方无应答',
+  no_answer_timeout: '超时无应答',
+};
+
+const RoomMessage = {
+  meeting_in_progress: '房间进行中',
+  meeting: '房间',
+  quick_conference: '的快速房间',
+  initiating: '正在发起',
+  x_people_have_joined: '{{number}} 人已进入房间',
+  waiting_for_members_to_join_the_meeting: '等待成员进入房间',
+  x_people_are_in_the_meeting: '{{number}} 人在房间中',
+  already_joined: '已进入',
+  cannot_enter_while_in_other_meeting: '您当前已经在其他房间中，请先离开当前房间',
+  enter_the_meeting: '进入房间',
+  ending_meeting: '正在结束房间',
+  the_meeting_has_ended: '房间已结束',
+  room_does_not_exist_or_has_ended: '房间不存在或已结束',
+};
+
+const Emoji = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[眨眼]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[姨母笑]',
+  '[TUIEmoji_Haha]': '[哈哈哈]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[无语]',
+  '[TUIEmoji_Amazed]': '[惊讶]',
+  '[TUIEmoji_Sorrow]': '[悲伤]',
+  '[TUIEmoji_Complacent]': '[得意]',
+  '[TUIEmoji_Silly]': '[傻了]',
+  '[TUIEmoji_Lustful]': '[色]',
+  '[TUIEmoji_Giggle]': '[憨笑]',
+  '[TUIEmoji_Kiss]': '[亲亲]',
+  '[TUIEmoji_Wail]': '[大哭]',
+  '[TUIEmoji_TearsLaugh]': '[哭笑]',
+  '[TUIEmoji_Trapped]': '[困]',
+  '[TUIEmoji_Mask]': '[口罩]',
+  '[TUIEmoji_Fear]': '[恐惧]',
+  '[TUIEmoji_BareTeeth]': '[龇牙]',
+  '[TUIEmoji_FlareUp]': '[发怒]',
+  '[TUIEmoji_Yawn]': '[打哈欠]',
+  '[TUIEmoji_Tact]': '[机智]',
+  '[TUIEmoji_Stareyes]': '[星星眼]',
+  '[TUIEmoji_ShutUp]': '[闭嘴]',
+  '[TUIEmoji_Sigh]': '[叹气]',
+  '[TUIEmoji_Hehe]': '[呵呵]',
+  '[TUIEmoji_Silent]': '[收声]',
+  '[TUIEmoji_Surprised]': '[惊喜]',
+  '[TUIEmoji_Askance]': '[白眼]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[怪兽]',
+  '[TUIEmoji_Daemon]': '[恶魔]',
+  '[TUIEmoji_Rage]': '[恶魔怒]',
+  '[TUIEmoji_Fool]': '[衰]',
+  '[TUIEmoji_Pig]': '[猪]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骷髅]',
+  '[TUIEmoji_Bombs]': '[炸弹]',
+  '[TUIEmoji_Coffee]': '[咖啡]',
+  '[TUIEmoji_Cake]': '[蛋糕]',
+  '[TUIEmoji_Beer]': '[啤酒]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[瓜]',
+  '[TUIEmoji_Rich]': '[壕]',
+  '[TUIEmoji_Heart]': '[爱心]',
+  '[TUIEmoji_Moon]': '[月亮]',
+  '[TUIEmoji_Sun]': '[太阳]',
+  '[TUIEmoji_Star]': '[星星]',
+  '[TUIEmoji_RedPacket]': '[红包]',
+  '[TUIEmoji_Celebrate]': '[庆祝]',
+  '[TUIEmoji_Bless]': '[福]',
+  '[TUIEmoji_Fortune]': '[发]',
+  '[TUIEmoji_Convinced]': '[服]',
+  '[TUIEmoji_Prohibit]': '[禁]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[刀]',
+  '[TUIEmoji_Like]': '[赞]',
+};
+
+export {
+  MessageList,
+  CallMessage,
+  RoomMessage,
+  Emoji,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/components/MessageListH5/index.ts b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/index.ts
new file mode 100644
index 0000000..6f8cf37
--- /dev/null
+++ b/packages/tuikit-atomicx-vue3/src/components/MessageListH5/index.ts
@@ -0,0 +1,18 @@
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
+import { Message as MessageComponent } from './Message';
+import { CustomMessage as CustomMessageComponent } from './Message/CustomMessage';
+import MessageListH5Component from './MessageListH5.vue';
+
+addI18n('en-US', { translation: { ...resources['en-US'] } });
+addI18n('zh-CN', { translation: { ...resources['zh-CN'] } });
+
+const CustomMessage = CustomMessageComponent;
+const Message = MessageComponent;
+const MessageListH5 = MessageListH5Component;
+
+export {
+  CustomMessage,
+  Message,
+  MessageListH5,
+};
diff --git a/packages/tuikit-atomicx-vue3/src/context/useChatUIState.ts b/packages/tuikit-atomicx-vue3/src/context/useChatUIState.ts
index ec25f05..2386bbc 100644
--- a/packages/tuikit-atomicx-vue3/src/context/useChatUIState.ts
+++ b/packages/tuikit-atomicx-vue3/src/context/useChatUIState.ts
@@ -15,6 +15,13 @@ export interface LocateMessageInfo {
   time?: number;
 }
 
+interface PendingInputCommand {
+  id: number;
+  type: 'set' | 'insert' | 'focus' | 'blur';
+  content?: string | InputContent[];
+  focus?: boolean;
+}
+
 export interface ChatUIStateAPI {
   /**
    * Whether read receipts are enabled. Mirrors the MessageList `enableReadReceipt`
@@ -41,6 +48,9 @@ export interface ChatUIStateAPI {
   /** The message currently staged for quoting. */
   quotedMessage: Ref<MessageInfo | undefined>;
 
+  /** Pending input command for non-TipTap inputs such as MessageInputH5. */
+  pendingInputCommand: Ref<PendingInputCommand | null>;
+
   /** Stage a message for quoting. */
   setQuotedMessage: (message: MessageInfo | undefined) => void;
 
@@ -62,6 +72,9 @@ export interface ChatUIStateAPI {
   /** Blur the message input editor. */
   blurInput: () => void;
 
+  /** Clear a consumed pending input command. */
+  clearPendingInputCommand: (id: number) => void;
+
   /** Update peer typing state for current active conversation. */
   setIsPeerTyping: (value: boolean) => void;
 
@@ -97,6 +110,12 @@ const chatUIStateMap = new Map<string, ChatUIStateAPI>();
 const TYPING_AUTO_CLEAR_DURATION = 5 * 1000;
 const TYPING_ENTER_THROTTLE_DURATION = 5 * 1000;
 const TYPING_RECENT_RECEIVED_MESSAGE_DURATION = 30 * 1000;
+let inputCommandID = 0;
+
+function getNextInputCommandID(): number {
+  inputCommandID += 1;
+  return inputCommandID;
+}
 
 function hasRecentPeerMessage(messageList: MessageInfo[]): boolean {
   const latestPeerMessage = [...messageList].reverse().find(message => !message.isSentBySelf);
@@ -137,6 +156,7 @@ function createChatUIState(channel: string): ChatUIStateAPI {
   };
 
   const quotedMessage = ref<MessageInfo | undefined>(undefined);
+  const pendingInputCommand = ref<PendingInputCommand | null>(null);
   const setQuotedMessage = (message: MessageInfo | undefined): void => {
     quotedMessage.value = message;
   };
@@ -153,7 +173,15 @@ function createChatUIState(channel: string): ChatUIStateAPI {
   };
 
   const setInputContent = (content: string | InputContent[]): void => {
-    if (!editor.value) { return; }
+    if (!editor.value) {
+      pendingInputCommand.value = {
+        id: getNextInputCommandID(),
+        type: 'set',
+        content,
+        focus: true,
+      };
+      return;
+    }
     if (typeof content === 'string') {
       editor.value.commands.setContent(content, true);
     } else {
@@ -163,7 +191,15 @@ function createChatUIState(channel: string): ChatUIStateAPI {
   };
 
   const insertInputContent = (content: string | InputContent[], focus = true): void => {
-    if (!editor.value) { return; }
+    if (!editor.value) {
+      pendingInputCommand.value = {
+        id: getNextInputCommandID(),
+        type: 'insert',
+        content,
+        focus,
+      };
+      return;
+    }
     if (typeof content === 'string') {
       editor.value.commands.insertContent(content);
     } else {
@@ -172,8 +208,38 @@ function createChatUIState(channel: string): ChatUIStateAPI {
     if (focus) { editor.value.commands.focus(); }
   };
 
-  const focusInput = (): void => { editor.value?.commands.focus(); };
-  const blurInput = (): void => { editor.value?.commands.blur(); };
+  const focusInput = (): void => {
+    if (editor.value) {
+      editor.value.commands.focus();
+      return;
+    }
+    if (pendingInputCommand.value?.type === 'set' || pendingInputCommand.value?.type === 'insert') {
+      pendingInputCommand.value = {
+        ...pendingInputCommand.value,
+        focus: true,
+      };
+      return;
+    }
+    pendingInputCommand.value = {
+      id: getNextInputCommandID(),
+      type: 'focus',
+    };
+  };
+  const blurInput = (): void => {
+    if (editor.value) {
+      editor.value.commands.blur();
+      return;
+    }
+    pendingInputCommand.value = {
+      id: getNextInputCommandID(),
+      type: 'blur',
+    };
+  };
+  const clearPendingInputCommand = (id: number): void => {
+    if (pendingInputCommand.value?.id === id) {
+      pendingInputCommand.value = null;
+    }
+  };
 
   const sendTypingStart = throttle(async (): Promise<void> => {
     const snapshot = getChannel(channel).getSnapshot();
@@ -245,6 +311,7 @@ function createChatUIState(channel: string): ChatUIStateAPI {
     highlightMessage,
     recalledMessageIDSet,
     quotedMessage,
+    pendingInputCommand,
     setQuotedMessage,
     clearQuotedMessage,
     setEditorInstance,
@@ -252,6 +319,7 @@ function createChatUIState(channel: string): ChatUIStateAPI {
     insertInputContent,
     focusInput,
     blurInput,
+    clearPendingInputCommand,
     setIsPeerTyping,
     enterTyping,
     leaveTyping,
diff --git a/packages/tuikit-atomicx-vue3/src/report/stateUsageReport.ts b/packages/tuikit-atomicx-vue3/src/report/stateUsageReport.ts
index 3f0134a..64d18f2 100644
--- a/packages/tuikit-atomicx-vue3/src/report/stateUsageReport.ts
+++ b/packages/tuikit-atomicx-vue3/src/report/stateUsageReport.ts
@@ -13,6 +13,13 @@ enum StateUsageType {
   ContactState = 1007,
   ChatEvokeCall = 1020,
   ChatEvokeRoom = 1021,
+
+  RoomState = 1201,
+  RoomParticipantState = 1202,
+  VirtualBackgroundState = 1203,
+  FreeBeautyState = 1204,
+
+  AITranscriberState = 1401,
 }
 
 interface StateUsageReportOptions {
diff --git a/packages/tuikit-atomicx-vue3/src/subEntry/chat/chat.ts b/packages/tuikit-atomicx-vue3/src/subEntry/chat/chat.ts
index 1290ede..750aece 100644
--- a/packages/tuikit-atomicx-vue3/src/subEntry/chat/chat.ts
+++ b/packages/tuikit-atomicx-vue3/src/subEntry/chat/chat.ts
@@ -17,7 +17,6 @@ export { View } from '../../baseComp/View';
 // } from '../../components/ConversationList';
 export {
   MessageInput,
-  MessageInputH5,
   EmojiPicker,
   AttachmentPicker,
   FilePicker,
@@ -26,12 +25,19 @@ export {
   AudioCallPicker,
   VideoCallPicker,
   QuickConferencePicker,
+  MessageInputH5Legacy,
 } from '../../components/MessageInput';
+export {
+  MessageInputH5,
+} from '../../components/MessageInputH5';
 export {
   MessageList,
   Message,
   CustomMessage,
 } from '../../components/MessageList';
+export {
+  MessageListH5,
+} from '../../components/MessageListH5';
 // export {
 //   Search,
 //   SearchAdvanced,