tuikit-atomicx-vue3 4.5.0 → 4.5.1

package/dist/subEntry/chat/chat.js

@@ -0,0 +1,89 @@
+import "../../states/LoginState.js";
+import "../../components/UserPicker/index.js";
+import { View as e } from "../../baseComp/View/index.js";
+import { ChatSetting as t } from "../../components/ChatSetting/index.js";
+import { ContactList as s, ContactListItem as o, ContactInfo as a } from "../../components/ContactList/index.js";
+import { ConversationList as n, ConversationActions as r, ConversationListHeader as i, ConversationListContent as c, ConversationPreview as m, ConversationPreviewUI as p, ConversationSearch as C } from "../../components/ConversationList/index.js";
+import { MessageInput as S, EmojiPicker as u, AttachmentPicker as v, FilePicker as g, ImagePicker as $, VideoPicker as d, AudioCallPicker as l, VideoCallPicker as L } from "../../components/MessageInput/index.js";
+import { MessageList as P, Message as f } from "../../components/MessageList/index.js";
+import { Search as h, SearchAdvanced as M, UserAdvanced as A, MessageAdvanced as I, SearchResults as k, SearchResultItem as T, SearchBar as y } from "../../components/Search/index.js";
+import { useMessageActions as V } from "../../hooks/useMessageActions.js";
+import { useSearchState as x } from "../../states/SearchState.js";
+import G from "./server.js";
+import { QuoteTypeEnum as Je, TranslationStatusEnum as Ke, VoiceToTextStatusEnum as Ne } from "../../types/message.js";
+import { VariantType as We, defaultTypeLabels as Xe } from "../../types/search.js";
+import { ConversationType as Ze, MessageType as et, SearchType as tt } from "../../types/engine.js";
+import { CreateConvTypes as ot, GroupLabelTypes as at, GroupType as nt, PageStateTypes as rt, PlaceHolderTypes as it } from "../../types/conversation.js";
+import { ContactItemType as mt, GroupApplicationType as pt } from "../../types/contact.js";
+import { CallMediaType as St } from "../../types/call.js";
+import { useContactListState as w } from "../../states/ContactListState/ContactListState.js";
+import { useC2CSettingState as R } from "../../states/C2CSettingState/C2CSettingState.js";
+import { useGroupSettingState as E } from "../../states/GroupSettingState/GroupSettingState.js";
+import { useMessageListState as U } from "../../states/MessageListState/MessageListState.js";
+import { useMessageInputState as H } from "../../states/MessageInputState/MessageInputState.js";
+import { useMessageActionState as b } from "../../states/MessageActionState/MessageActionState.js";
+import { useConversationListState as j } from "../../states/ConversationListState/ConversationListState.js";
+import { GroupInviteType as vt, GroupMemberRole as gt, GroupPermission as $t } from "../../states/GroupSettingState/types.js";
+import "../../components/Avatar/Avatar.js";
+import "../../components/Avatar/constants/avatar.js";
+G.getInstance().init();
+const re = h, ie = M, ce = I, me = A, pe = y, Ce = k, Se = T, ue = n, ve = r, ge = i, $e = c, de = m, le = p, Le = C, Pe = s, fe = o, he = a, Me = P, Ae = f, Ie = S, ke = u, Te = v, ye = g, Ve = $, xe = d, Ge = l, we = L, Re = t, Ee = e, Ue = V, He = j, be = b, je = H, Be = U, Fe = x, _e = w, Qe = R, qe = E;
+export {
+  Te as AttachmentPicker,
+  Ge as AudioCallPicker,
+  St as CallMediaType,
+  Re as ChatSetting,
+  he as ContactInfo,
+  mt as ContactItemType,
+  Pe as ContactList,
+  fe as ContactListItem,
+  ve as ConversationActions,
+  ue as ConversationList,
+  $e as ConversationListContent,
+  ge as ConversationListHeader,
+  de as ConversationPreview,
+  le as ConversationPreviewUI,
+  Le as ConversationSearch,
+  Ze as ConversationType,
+  ot as CreateConvTypes,
+  ke as EmojiPicker,
+  ye as FilePicker,
+  pt as GroupApplicationType,
+  vt as GroupInviteType,
+  at as GroupLabelTypes,
+  gt as GroupMemberRole,
+  $t as GroupPermission,
+  nt as GroupType,
+  Ve as ImagePicker,
+  Ae as Message,
+  ce as MessageAdvanced,
+  Ie as MessageInput,
+  Me as MessageList,
+  et as MessageType,
+  rt as PageStateTypes,
+  it as PlaceHolderTypes,
+  Je as QuoteTypeEnum,
+  re as Search,
+  ie as SearchAdvanced,
+  pe as SearchBar,
+  Se as SearchResultItem,
+  Ce as SearchResults,
+  tt as SearchType,
+  Ke as TranslationStatusEnum,
+  me as UserAdvanced,
+  We as VariantType,
+  we as VideoCallPicker,
+  xe as VideoPicker,
+  Ee as View,
+  Ne as VoiceToTextStatusEnum,
+  Xe as defaultTypeLabels,
+  Qe as useC2CSettingState,
+  _e as useContactListState,
+  He as useConversationListState,
+  qe as useGroupSettingState,
+  be as useMessageActionState,
+  Ue as useMessageActions,
+  je as useMessageInputState,
+  Be as useMessageListState,
+  Fe as useSearchState
+};

package/dist/subEntry/chat/index.d.ts

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

package/dist/subEntry/chat/index.js

@@ -0,0 +1,81 @@
+import '../../styles/index.css';
+import { useLoginState as o } from "../../states/LoginState.js";
+import { UserPicker as r } from "../../components/UserPicker/index.js";
+import { AttachmentPicker as i, AudioCallPicker as n, ChatSetting as p, ContactInfo as A, ContactList as T, ContactListItem as c, ConversationActions as u, ConversationList as C, ConversationListContent as S, ConversationListHeader as m, ConversationPreview as L, ConversationPreviewUI as P, ConversationSearch as l, EmojiPicker as v, FilePicker as R, ImagePicker as _, Message as U, MessageAdvanced as f, MessageInput as g, MessageList as y, Search as M, SearchAdvanced as d, SearchBar as x, SearchResultItem as E, SearchResults as G, UserAdvanced as V, VideoCallPicker as I, VideoPicker as h, View as O, useC2CSettingState as k, useContactListState as F, useConversationListState as D, useGroupSettingState as b, useMessageActionState as w, useMessageActions as H, useMessageInputState as B, useMessageListState as N, useSearchState as j } from "./chat.js";
+import { QuoteTypeEnum as Q, TranslationStatusEnum as W, VoiceToTextStatusEnum as q } from "../../types/message.js";
+import { VariantType as J, defaultTypeLabels as X } from "../../types/search.js";
+import { ConversationType as Z, MessageType as $, SearchType as ee } from "../../types/engine.js";
+import { CreateConvTypes as oe, GroupLabelTypes as ae, GroupType as re, PageStateTypes as se, PlaceHolderTypes as ie } from "../../types/conversation.js";
+import { ContactItemType as pe, GroupApplicationType as Ae } from "../../types/contact.js";
+import { CallMediaType as ce } from "../../types/call.js";
+import { default as Ce } from "../../components/Avatar/Avatar.js";
+import { DEFAULT_GROUP_AVATAR_AVCHATROOM as me, DEFAULT_GROUP_AVATAR_COMMON as Le, DEFAULT_GROUP_AVATAR_MEETING as Pe, DEFAULT_GROUP_AVATAR_PUBLIC as le, DEFAULT_GROUP_AVATAR_WORK as ve, DEFAULT_USER_AVATAR as Re } from "../../components/Avatar/constants/avatar.js";
+import { GroupInviteType as Ue, GroupMemberRole as fe, GroupPermission as ge } from "../../states/GroupSettingState/types.js";
+export {
+  i as AttachmentPicker,
+  n as AudioCallPicker,
+  Ce as Avatar,
+  ce as CallMediaType,
+  p as ChatSetting,
+  A as ContactInfo,
+  pe as ContactItemType,
+  T as ContactList,
+  c as ContactListItem,
+  u as ConversationActions,
+  C as ConversationList,
+  S as ConversationListContent,
+  m as ConversationListHeader,
+  L as ConversationPreview,
+  P as ConversationPreviewUI,
+  l as ConversationSearch,
+  Z as ConversationType,
+  oe as CreateConvTypes,
+  me as DEFAULT_GROUP_AVATAR_AVCHATROOM,
+  Le as DEFAULT_GROUP_AVATAR_COMMON,
+  Pe as DEFAULT_GROUP_AVATAR_MEETING,
+  le as DEFAULT_GROUP_AVATAR_PUBLIC,
+  ve as DEFAULT_GROUP_AVATAR_WORK,
+  Re as DEFAULT_USER_AVATAR,
+  v as EmojiPicker,
+  R as FilePicker,
+  Ae as GroupApplicationType,
+  Ue as GroupInviteType,
+  ae as GroupLabelTypes,
+  fe as GroupMemberRole,
+  ge as GroupPermission,
+  re as GroupType,
+  _ as ImagePicker,
+  U as Message,
+  f as MessageAdvanced,
+  g as MessageInput,
+  y as MessageList,
+  $ as MessageType,
+  se as PageStateTypes,
+  ie as PlaceHolderTypes,
+  Q as QuoteTypeEnum,
+  M as Search,
+  d as SearchAdvanced,
+  x as SearchBar,
+  E as SearchResultItem,
+  G as SearchResults,
+  ee as SearchType,
+  W as TranslationStatusEnum,
+  V as UserAdvanced,
+  r as UserPicker,
+  J as VariantType,
+  I as VideoCallPicker,
+  h as VideoPicker,
+  O as View,
+  q as VoiceToTextStatusEnum,
+  X as defaultTypeLabels,
+  k as useC2CSettingState,
+  F as useContactListState,
+  D as useConversationListState,
+  b as useGroupSettingState,
+  o as useLoginState,
+  w as useMessageActionState,
+  H as useMessageActions,
+  B as useMessageInputState,
+  N as useMessageListState,
+  j as useSearchState
+};

package/dist/{chat → subEntry/chat}/server.js

@@ -4,10 +4,10 @@ var s = (o, t, i) => u(o, typeof t != "symbol" ? t + "" : t, i);
 import { ref as I } from "vue";
 import U from "@tencentcloud/chat-uikit-engine";
 import T, { TUIConstants as g, TUILogin as S } from "@tencentcloud/tui-core";
-import { useLoginState as m } from "../states/LoginState.js";
-import { ChatSceneType as l } from "../statistical/const.js";
-import { useStatistical as C } from "../statistical/statistical.js";
-import { isPC as p } from "../utils/env.js";
+import { useLoginState as m } from "../../states/LoginState.js";
+import { ChatSceneType as l } from "../../statistical/const.js";
+import { useStatistical as C } from "../../statistical/statistical.js";
+import { isPC as p } from "../../utils/env.js";
 const { setChatScene: N } = C(), e = class e {
   constructor() {
     s(this, "isReady", !1);

package/dist/{useId-CtirfF0W.js → useId-D5WE76CM.js}

@@ -1,4 +1,4 @@
-import { i } from "./Teleport-CSEuZbpM.js";
+import { i } from "./Teleport-DFrneqLM.js";
 import * as t from "vue";
 let n = 0;
 function u(d, e = "reka") {

package/dist/{utils-DaB7eSu5.js → utils-CttDpxqz.js}

@@ -1,4 +1,4 @@
-import { g as E } from "./Teleport-CSEuZbpM.js";
+import { g as E } from "./Teleport-DFrneqLM.js";
 const m = "menu.itemSelect", x = ["Enter", " "], S = [
   "ArrowDown",
   "PageUp",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -16,8 +16,8 @@
       "import": "./dist/index.js"
     },
     "./chat": {
-      "types": "./dist/chat/index.d.ts",
-      "import": "./dist/chat/index.js"
+      "types": "./dist/subEntry/chat/index.d.ts",
+      "import": "./dist/subEntry/chat/index.js"
     },
     "./live": {
       "types": "./dist/subEntry/live/index.d.ts",
@@ -56,12 +56,14 @@
     "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.7",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.5.0",
-    "@tencentcloud/uikit-base-component-vue3": "1.3.0",
-    "vue": "^3.4.21"
+    "@tencentcloud/tuiroom-engine-js": "~3.5.1-beta.1",
+    "@tencentcloud/uikit-base-component-vue3": "1.3.1",
+    "vue": "^3.4.0"
   },
   "dependencies": {
     "@tencentcloud/universal-api": "^2.4.0",
+    "@tiptap/extension-mention": "^2.11.5",
+    "@tiptap/suggestion": "2.11.5",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/pm": "^3.1.0",

package/src/components/ConversationList/ConversationPreview/ConversationPreview.scss

@@ -71,6 +71,14 @@
     color: var(--text-color-secondary, #666);
 
     @include mixins.text-ellipsis();
+
+    &__drafts {
+      color: var(--text-color-error);
+    }
+
+    &__at-info {
+      color: var(--text-color-error);
+    }
   }
 
   &__external {

package/src/components/ConversationList/ConversationPreview/ConversationPreviewAbstract.vue

@@ -1,11 +1,12 @@
 <template>
   <div :class="$style.conversationPreview__abstract">
     <template v-if="draftTextAbstract">
-      <label :class="$style.conversationPreview__drafts">[{{ t('TUIConversation.Drafts') }}]</label>
+      <label :class="$style.conversationPreview__abstract__drafts">[{{ t('TUIConversation.Drafts') }}]</label>
       {{ ' ' }}
       {{ draftTextAbstract }}
     </template>
     <template v-else>
+      <label v-if="atInfoPreview" :class="$style['conversationPreview__abstract__at-info']">{{ atInfoPreview }}</label>
       {{ latestMessagePreview }}
     </template>
   </div>
@@ -14,6 +15,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { ConversationType } from '../../../types';
 import { JSONStringToParse } from '../../../utils';
 import { getLatestMessagePreview } from './utils';
 import type { ConversationModel } from '../../../types';
@@ -30,6 +32,35 @@ const draftTextAbstract = computed(() => {
 });
 
 const latestMessagePreview = computed(() => getLatestMessagePreview(props.conversation, t));
+
+/**
+ * Get group @ info preview text.
+ * atTypeArray[0] values: 1 = someone @me, 2 = @all, 3 = @all + someone @me
+ */
+const atInfoPreview = computed(() => {
+  const { type, groupAtInfoList } = props?.conversation || {};
+
+  // Only show @ info for group conversations with valid groupAtInfoList
+  if (type !== ConversationType.GROUP || !groupAtInfoList?.length) {
+    return '';
+  }
+
+  const atInfoTextList: string[] = [
+    `[${t('TUIConversation.someone_at_me')}]`,
+    `[${t('TUIConversation.at_all')}]`,
+    `[${t('TUIConversation.at_all')}][${t('TUIConversation.someone_at_me')}]`,
+  ];
+
+  let atInfo = '';
+  groupAtInfoList.forEach((item) => {
+    const atType = item?.atTypeArray?.[0];
+    if (atType && atType >= 1 && atType <= 3) {
+      atInfo = atInfoTextList[atType - 1];
+    }
+  });
+
+  return atInfo;
+});
 </script>
 
 <style lang="scss" module>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewTitle.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { ConversationModel } from '../../../types';
+import { computed } from 'vue';
+import type { ConversationModel } from '../../../types/engine';
 
 const props = defineProps<{
   conversation: ConversationModel;
 }>();
 
-const title =props?.conversation?.getShowName?.() || '';
+const title = computed(() => props?.conversation?.getShowName?.() || '');
 </script>
 
 <style lang="scss" module>

package/src/components/ConversationList/ConversationPreview/utils.ts

@@ -1,5 +1,9 @@
 import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import type { ConversationModel } from '../../../types';
+import { MessageType, ConversationType } from '../../../types/engine';
+import { transformTextWithEmojiKeyToName, safeJSONParse } from '../../../utils';
+import { parseCallMessageText } from '../../../utils/call';
+import { resolveGroupTipMessage } from '../../MessageList/Message/GroupTipMessage/resolveGroupTipMessage';
+import type { ConversationModel, MessageModel } from '../../../types/engine';
 
 export const generateHighlightTitle = (
   conversation: ConversationModel,
@@ -20,36 +24,102 @@ export const generateHighlightTitle = (
 };
 
 export const getLatestMessagePreview = (conversation: ConversationModel, t: (key: string) => string) => {
-  const { lastMessage } = conversation || {};
+  const { draftText } = conversation || {};
+
+  // Handle draft message
+  if (draftText) {
+    if (typeof draftText === 'string') {
+      return draftText;
+    }
+    const draftInfo = safeJSONParse(draftText, { abstract: '' });
+    return draftInfo.abstract;
+  }
+
+  // Handle special operation type messages
+  const OPERATION_MESSAGES: Record<number, string> = {
+    4: t('TUIConversation.you_have_been_removed_from_the_group'),
+    5: t('TUIConversation.the_group_chat_has_been_disbanded'),
+    8: t('TUIConversation.you_have_left_the_group_chat'),
+  };
+  if (conversation.operationType && OPERATION_MESSAGES[conversation.operationType]) {
+    return OPERATION_MESSAGES[conversation.operationType];
+  }
+
+  const { lastMessage } = conversation;
+
   if (!lastMessage) {
     return '';
   }
 
-  const { type, payload } = lastMessage;
-  const { nick, userID } = lastMessage.nick || lastMessage?.from || {};
-
-  const senderName = nick || userID || '';
-
-  switch (type) {
-    case TUIChatEngine.TYPES.MSG_TEXT:
-      return payload.text || '';
-    case TUIChatEngine.TYPES.MSG_IMAGE:
-      return `[${t('TUIConversation.Image')}]`;
-    case TUIChatEngine.TYPES.MSG_AUDIO:
-      return `[${t('TUIConversation.Audio')}]`;
-    case TUIChatEngine.TYPES.MSG_VIDEO:
-      return `[${t('TUIConversation.Video')}]`;
-    case TUIChatEngine.TYPES.MSG_FILE:
-      return `[${t('TUIConversation.File')}]`;
-    case TUIChatEngine.TYPES.MSG_CUSTOM:
-      return `[${t('TUIConversation.Custom')}]`;
-    case TUIChatEngine.TYPES.MSG_LOCATION:
-      return `[${t('TUIConversation.Location')}]`;
-    case TUIChatEngine.TYPES.MSG_FACE:
-      return `[${t('TUIConversation.Emoji')}]`;
-    case TUIChatEngine.TYPES.MSG_MERGER:
-      return `[${t('TUIConversation.Chat History')}]`;
-    default:
-      return senderName ? `${senderName}: ${payload?.text || ''}` : payload?.text || '';
+  const isGroupConversation = conversation.type === ConversationType.GROUP;
+  const typedLastMessage = lastMessage as unknown as MessageModel;
+  const { type, payload } = typedLastMessage;
+
+  let messageContent = '';
+
+  if (lastMessage?.isRevoked) {
+    messageContent = t('TUIConversation.recalled_a_message');
+  } else {
+    switch (type) {
+      case MessageType.TEXT:
+        messageContent = transformTextWithEmojiKeyToName(payload.text || '');
+        break;
+      case MessageType.IMAGE:
+        messageContent = `[${t('TUIConversation.Image')}]`;
+        break;
+      case MessageType.AUDIO:
+        messageContent = `[${t('TUIConversation.Audio')}]`;
+        break;
+      case MessageType.VIDEO:
+        messageContent = `[${t('TUIConversation.Video')}]`;
+        break;
+      case MessageType.FILE:
+        messageContent = `[${t('TUIConversation.File')}]`;
+        break;
+      case MessageType.CUSTOM: {
+        const data = safeJSONParse(payload?.data, { businessID: undefined });
+        // Handle CallKit signaling message
+        if (data?.businessID === 1) {
+          try {
+            messageContent = parseCallMessageText(typedLastMessage, t);
+          } catch {
+            messageContent = `[${t('TUIConversation.call_message')}]`;
+          }
+        } else {
+          messageContent = `[${t('TUIConversation.Custom')}]`;
+        }
+        break;
+      }
+      case MessageType.LOCATION:
+        messageContent = `[${t('TUIConversation.Location')}]`;
+        break;
+      case MessageType.FACE:
+        messageContent = `[${t('TUIConversation.Face')}]`;
+        break;
+      case MessageType.MERGER:
+        messageContent = `[${t('TUIConversation.Chat History')}]`;
+        break;
+      case MessageType.GRP_TIP:
+        return resolveGroupTipMessage(typedLastMessage)?.text;
+      default:
+        messageContent = `[${t('TUIConversation.unknown_message')}]`;
+        break;
+    }
   }
+
+  if (isGroupConversation) {
+    let senderName = '';
+    if (lastMessage?.fromAccount === TUIChatEngine.getMyUserID()) {
+      senderName = t('TUIConversation.me');
+    } else {
+      // Priority: friendRemark > nameCard > nick > userID
+      senderName = conversation.remark
+        || typedLastMessage?.nameCard
+        || lastMessage?.nick
+        || lastMessage.fromAccount;
+    }
+    return senderName ? `${senderName}: ${messageContent}` : messageContent;
+  }
+
+  return messageContent;
 };

package/src/components/ConversationList/i18n/en-US.ts

@@ -64,7 +64,16 @@ export default {
     'File': 'File',
     'Custom': 'Custom',
     'Location': 'Location',
-    'Emoji': 'Emoji',
+    'Face': 'Face',
     'Chat History': 'Chat History',
+    'call_message': 'Call Message',
+    'unknown_message': 'Unknown Message',
+    'me': 'Me',
+    'recalled_a_message': 'recalled a message',
+    'you_have_been_removed_from_the_group': 'You have been removed from the group by the group administrator',
+    'the_group_chat_has_been_disbanded': 'The group chat has been disbanded',
+    'you_have_left_the_group_chat': 'You have left the group chat',
+    'someone_at_me': 'You were mentioned',
+    'at_all': '@All',
   },
 };

package/src/components/ConversationList/i18n/zh-CN.ts

@@ -64,7 +64,16 @@ export default {
     'File': '文件',
     'Custom': '自定义消息',
     'Location': '位置',
-    'Emoji': '表情',
+    'Face': '动画表情',
     'Chat History': '聊天记录',
+    'call_message': '通话消息',
+    'unknown_message': '消息',
+    'me': '我',
+    'recalled_a_message': '撤回了一条消息',
+    'you_have_been_removed_from_the_group': '你已被群管理员移出该群',
+    'the_group_chat_has_been_disbanded': '该群聊已解散',
+    'you_have_left_the_group_chat': '你已退出该群聊',
+    'someone_at_me': '有人@我',
+    'at_all': '@所有人',
   },
 };

package/src/components/LiveScenePanel/index.vue

@@ -196,6 +196,7 @@ const selectMaterial = async (type: TRTCMediaSourceType) => {
         name: t('Screen'),
         screen: {
           resolution: TRTCVideoResolution.TRTCVideoResolution_1920_1080,
+          systemAudio: true,
           fps: 15,
         },
       });

package/src/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.vue

@@ -16,60 +16,57 @@
     <IconClose
       :class="styles['quoted__message__preview__close']"
       size="16"
-      @click="handleClose"
+      @click="handleCloseQuotedMessage"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
-import TencentCloudChat from '@tencentcloud/chat';
+import { watch, onUnmounted } from 'vue';
 import { useUIKit, IconClose } from '@tencentcloud/uikit-base-component-vue3';
-import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageActionState } from '../../../states/MessageActionState';
 import { useMessageInputState } from '../../../states/MessageInputState';
+import { MessageType } from '../../../types/engine';
+import { transformTextWithEmojiKeyToName } from '../../../utils';
 import styles from './QuotedMessagePreview.module.scss';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../types/engine';
 
 const { t } = useUIKit();
-const { activeConversation } = useConversationListState();
 const { focusEditor } = useMessageInputState();
 const { quotedMessage, clearQuotedMessage } = useMessageActionState();
 
-// Watch referencedMessage changes
+onUnmounted(() => {
+  clearQuotedMessage();
+});
+
 watch(quotedMessage, (newVal) => {
   if (newVal) {
     focusEditor();
   }
 });
 
-// Watch conversation changes
-watch(activeConversation, () => {
-  clearQuotedMessage();
-});
-
-const handleClose = () => {
+const handleCloseQuotedMessage = () => {
   clearQuotedMessage();
 };
 
-const calculateReferenceContent = (message: IMessageModel | undefined): string => {
+const calculateReferenceContent = (message: MessageModel | undefined): string => {
   if (!message) {
     return 'no reference';
   }
   switch (message.type) {
-    case TencentCloudChat.TYPES.MSG_TEXT:
-      return message.payload?.text;
-    case TencentCloudChat.TYPES.MSG_IMAGE:
+    case MessageType.TEXT:
+      return transformTextWithEmojiKeyToName(message.payload?.text || '');
+    case MessageType.IMAGE:
       return t('MessageInput.image');
-    case TencentCloudChat.TYPES.MSG_AUDIO:
+    case MessageType.AUDIO:
       return t('MessageInput.audio');
-    case TencentCloudChat.TYPES.MSG_VIDEO:
+    case MessageType.VIDEO:
       return t('MessageInput.video');
-    case TencentCloudChat.TYPES.MSG_FILE:
+    case MessageType.FILE:
       return t('MessageInput.file');
-    case TencentCloudChat.TYPES.MSG_LOCATION:
+    case MessageType.LOCATION:
       return t('MessageInput.location');
-    case TencentCloudChat.TYPES.MSG_CUSTOM:
+    case MessageType.CUSTOM:
       return t('MessageInput.custom_message');
     default:
       return t('MessageInput.unknown');

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

@@ -39,7 +39,9 @@
     height: 20px;
     user-select: text;
     pointer-events: none;
+    vertical-align: bottom;
   }
+
   .message-image {
     display: inline-block;
     width: 100px;
@@ -57,3 +59,26 @@
   pointer-events: none;
 }
 
+// Mention tag styles (Telegram-style)
+.uikit-message-input-mention-tag {
+  display: inline;
+  padding: 2px 4px;
+  margin: 0 2px;
+  border-radius: 4px;
+  background-color: rgba(0, 122, 255, 0.1);
+  color: #007AFF;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: rgba(0, 122, 255, 0.15);
+  }
+
+  // Selected state (when backspacing)
+  &.ProseMirror-selectednode {
+    background-color: rgba(0, 122, 255, 0.2);
+  }
+}
+