tuikit-atomicx-vue3 4.5.0 → 4.5.2

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/ConversationPreviewUI.vue

@@ -47,6 +47,7 @@
             :conversation="conversation"
             v-bind="actionsConfig"
             @close="handleCloseActionsModal"
+            @dropdown-visible-change="handleDropdownVisibleChange"
           />
           <component
             :is="LastMessageTimestamp"
@@ -103,6 +104,7 @@ const { activeConversation, setActiveConversation } = useConversationListState()
 
 const conversationPreviewRef = ref<HTMLElement>();
 const isActionMenuActive = ref(false);
+const isDropdownOpen = ref(false);
 
 const { isHovered } = useMouseHover(conversationPreviewRef);
 const { getEventHandlers } = useLongPress(() => {
@@ -115,6 +117,10 @@ const longPressEvents = getEventHandlers();
 
 watch(isHovered, (newValue) => {
   if (!isH5) {
+    // Don't hide when dropdown is open
+    if (!newValue && isDropdownOpen.value) {
+      return;
+    }
     isActionMenuActive.value = newValue;
   }
 });
@@ -127,6 +133,15 @@ const handleClick = () => {
 const handleCloseActionsModal = () => {
   isActionMenuActive.value = false;
 };
+
+const handleDropdownVisibleChange = (visible: boolean) => {
+  console.log('[ConversationPreview] dropdown visible changed:', visible);
+  isDropdownOpen.value = visible;
+  // When dropdown closes and mouse is not hovering, hide actions
+  if (!visible && !isHovered.value) {
+    isActionMenuActive.value = false;
+  }
+};
 </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,17 @@ 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',
+    'group_id_already_used': 'The group ID for creating the group chat is already in use, please choose a different group ID.',
   },
 };

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

@@ -64,7 +64,17 @@ 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': '@所有人',
+    'group_id_already_used': '当前创建群聊的群ID已被使用，请选择其他群ID',
   },
 };

package/src/components/MessageInput/MessageInput.module.scss

@@ -7,6 +7,7 @@
   flex-shrink: 0;
   padding: 10px;
   gap: 4px;
+  text-align: start;
 
   &__toolbar {
     display: flex;

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);
+  }
+}
+

package/src/components/MessageInput/TextEditor/EditorCore.ts

@@ -1,48 +1,72 @@
-import Image from '@tiptap/extension-image';
+/**
+ * EditorCore - Pure functional utilities for Tiptap editor
+ * Provides extension configuration and content conversion
+ */
 import Placeholder from '@tiptap/extension-placeholder';
 import StarterKit from '@tiptap/starter-kit';
-import { Extension, Editor } from '@tiptap/vue-3';
 import { MessageContentType } from '../../../states/MessageInputState';
-import { CharacterCount } from './extensions/characterCountExtension';
-import { createImageExtension } from './extensions/imageExtension';
+import {
+  CharacterCount,
+  createEmojiExtension,
+  createEnterKeyExtension,
+  createImageExtension,
+  createMentionExtension,
+} from './extensions';
 import type { InputContent } from '../../../states/MessageInputState';
-import type { JSONContent, EditorOptions as TiptapEditorOptions } from '@tiptap/vue-3';
+import type { JSONContent, Extensions } from '@tiptap/vue-3';
 import './Editor.scss';
 
-function createEmojiExtension() {
-  return Image.extend({
-    name: MessageContentType.EMOJI,
-    inline: true,
-    group: 'inline',
-    draggable: true,
-    addOptions() {
-      return {
-        ...this.parent?.(),
-        HTMLAttributes: {
-          class: 'message-emoji',
-        },
-      };
-    },
-  });
+// ============================================================================
+// Extension Configuration
+// ============================================================================
+
+interface ExtensionOptions {
+  placeholder?: string;
+  maxLength?: number;
+  showPlaceholderOnlyWhenEditable?: boolean;
+  onEnter?: () => void;
 }
 
-function createEnterKeyExtension(options?: { onEnter?: (() => void) | undefined }) {
-  return Extension.create({
-    addKeyboardShortcuts() {
-      return {
-        'Enter': () => {
-          options?.onEnter?.();
-          return true;
-        },
-        'Mod-Enter': ({ editor }) => {
-          editor.commands.setHardBreak();
-          return true;
-        },
-      };
-    },
-  });
+/**
+ * Create all editor extensions with given options
+ */
+function createExtensions(options: ExtensionOptions = {}): Extensions {
+  const {
+    placeholder = '',
+    maxLength,
+    showPlaceholderOnlyWhenEditable = true,
+    onEnter,
+  } = options;
+
+  return [
+    StarterKit.configure({
+      bold: false,
+      italic: false,
+      strike: false,
+      code: false,
+    }),
+    CharacterCount.configure({
+      limit: maxLength,
+    }),
+    createEnterKeyExtension(onEnter),
+    createEmojiExtension(),
+    createImageExtension(),
+    createMentionExtension(),
+    Placeholder.configure({
+      placeholder,
+      showOnlyWhenEditable: showPlaceholderOnlyWhenEditable,
+    }),
+  ];
 }
 
+// ============================================================================
+// Content Conversion
+// ============================================================================
+
+/**
+ * Convert Tiptap JSON content to business InputContent array
+ * Uses simple switch-case for clarity (no over-engineered registry pattern)
+ */
 function convertEditorContent(node: JSONContent): InputContent[] {
   if (!node?.content) {
     return [];
@@ -57,11 +81,13 @@ function convertEditorContent(node: JSONContent): InputContent[] {
             content: child.text,
           }]
           : [];
+
       case 'image':
         return [{
           type: MessageContentType.IMAGE,
           content: child.attrs?.fileData,
         }];
+
       case 'emoji':
         return [{
           type: MessageContentType.EMOJI,
@@ -71,81 +97,35 @@ function convertEditorContent(node: JSONContent): InputContent[] {
             text: child.attrs?.title,
           },
         }];
+
       case 'hardBreak':
         return [{
           type: MessageContentType.TEXT,
           content: '\n',
         }];
+
+      case 'mention':
+        return [{
+          type: MessageContentType.MENTION,
+          content: {
+            id: child.attrs?.id,
+            label: child.attrs?.label,
+            mentionSuggestionChar: child.attrs?.mentionSuggestionChar,
+          },
+        }];
+
       default:
+        // Recursively handle nested content (e.g., paragraph nodes)
         return convertEditorContent(child);
     }
   });
 }
 
-interface EditorOptions {
-  element: Element;
-  placeholder?: string;
-  autoFocus?: boolean;
-  disabled?: boolean;
-  maxLength?: number;
-  isPlaceholderOnlyShowWhenEditable?: boolean;
-  onUpdate?: (content: InputContent[]) => void;
-  onEnter?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-function createEditor({
-  element,
-  placeholder = '',
-  autoFocus = false,
-  disabled = false,
-  isPlaceholderOnlyShowWhenEditable = true,
-  maxLength = undefined,
-  onUpdate,
-  onEnter,
-  onFocus,
-  onBlur,
-}: EditorOptions) {
-  const createBaseExtensions = (enterHandler?: () => void) => [
-    StarterKit.configure({
-      bold: false,
-      italic: false,
-      strike: false,
-      code: false,
-    }),
-    CharacterCount.configure({
-      limit: maxLength,
-    }),
-    createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : undefined),
-    createEmojiExtension(),
-    createImageExtension(),
-    Placeholder.configure({
-      placeholder,
-      showOnlyWhenEditable: isPlaceholderOnlyShowWhenEditable,
-    }),
-  ];
-
-  const editorConfig: Partial<TiptapEditorOptions> = {
-    element,
-    autofocus: autoFocus,
-    editable: !disabled,
-    extensions: createBaseExtensions(onEnter),
-    onUpdate: ({ editor }) => {
-      const content = convertEditorContent(editor.getJSON());
-      onUpdate?.(content);
-    },
-    onFocus,
-    onBlur,
-  };
-
-  return new Editor(editorConfig);
-}
+// ============================================================================
+// Exports
+// ============================================================================
 
 export {
-  createEditor,
-};
-
-export type {
-  Editor,
+  createExtensions,
+  convertEditorContent,
 };