tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/src/components/MessageInput/AudioCallPicker/AudioCallPicker.vue

@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<AudioCallPickerProps>(), {
 const styles = useCssModule();
 const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
-const { allMembers, getGroupMemberList, memberCount } = useGroupSettingState();
+const { allMembers, getGroupMemberList, memberCount, currentUserID } = useGroupSettingState();
 
 const isGroupCallDialogVisible = ref(false);
 const groupMemberPickerRef = ref();
@@ -83,13 +83,15 @@ const isC2CConversation = computed(() =>
   activeConversation.value?.type === ConversationType.C2C,
 );
 
-const groupMemberOptions = computed(() =>
-  allMembers.value?.map((member: any) => ({
+const groupMemberOptions = computed(() => {
+  const restructuredMembers = allMembers.value?.map(member => ({
     key: member.userID,
     label: member.nick || member.userID,
     avatarUrl: member.avatar,
-  })) ?? [],
-);
+  })) ?? [];
+
+  return restructuredMembers.filter(member => member.key !== currentUserID.value);
+});
 
 const canStartCall = computed(() => {
   if (!activeConversation.value || props.disabled) {
@@ -229,7 +231,7 @@ const handleConfirmGroupCall = () => initiateGroupCall();
 
 <style>
 .group-call-dialog {
-  background: white;
+  background: var(--bg-color-operate);
   border-radius: 8px;
   max-width: 500px;
   max-height: 70vh;

package/src/components/MessageInput/MessageInput.vue

@@ -23,6 +23,7 @@
           :autoFocus="autoFocus"
           :disabled="disabled"
           :placeholder="placeholder"
+          :maxLength="maxLength"
         >
           <template #inputPrefix>
             <slot name="inputPrefix" />
@@ -77,6 +78,7 @@ const props = withDefaults(defineProps<MessageInputProps>(), {
   disabled: false,
   hideSendButton: false,
   placeholder: undefined,
+  maxLength: undefined,
   attachmentPickerMode: 'collapsed',
   actions: () => ['EmojiPicker', 'ImagePicker', 'FilePicker', 'VideoPicker'],
 });

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,71 +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,
+  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
+// ============================================================================
 
-function createImageExtension() {
-  return Image.extend({
-    addOptions() {
-      return {
-        ...this.parent?.(),
-        HTMLAttributes: {
-          class: 'message-image',
-        },
-      };
-    },
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        fileData: {
-          default: null,
-          parseHTML: element => element.getAttribute('file-data'),
-          renderHTML: attributes => attributes.fileData ? { 'file-data': attributes.fileData } : {},
-        },
-      };
-    },
-  }).configure({
-    inline: true,
-  });
+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 [];
@@ -80,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,
@@ -94,71 +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;
-  isPlaceholderOnlyShowWhenEditable?: boolean;
-  onUpdate?: (content: InputContent[]) => void;
-  onEnter?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}
-
-function createEditor({
-  element,
-  placeholder = '',
-  autoFocus = false,
-  disabled = false,
-  isPlaceholderOnlyShowWhenEditable = true,
-  onUpdate,
-  onEnter,
-  onFocus,
-  onBlur,
-}: EditorOptions) {
-  const createBaseExtensions = (enterHandler?: () => void) => [
-    StarterKit,
-    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,
 };

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -3,10 +3,10 @@
     <div :class="styles['input-prefix']">
       <slot name="inputPrefix" />
     </div>
-    <div
-      ref="editorDomRef"
-      :key="props.disabled ? 'disabled' : 'enabled'"
+    <EditorContent
+      :editor="editor"
       :class="styles['editor']"
+      class="message-input"
     />
     <div :class="styles['input-suffix']">
       <slot name="inputSuffix" />
@@ -15,90 +15,107 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
+import { computed, watch, onBeforeUnmount } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useEditor, EditorContent } from '@tiptap/vue-3';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageInputState } from '../../../states/MessageInputState';
-import { createEditor } from './EditorCore';
+import { createExtensions, convertEditorContent } from './EditorCore';
 import styles from './TextEditor.module.scss';
-import type { Editor } from './EditorCore';
 
 interface TextEditorProps {
   autoFocus?: boolean;
   disabled?: boolean;
   placeholder?: string;
+  maxLength?: number;
 }
 
 const props = withDefaults(defineProps<TextEditorProps>(), {
   autoFocus: true,
   disabled: false,
   placeholder: undefined,
+  maxLength: undefined,
 });
 
-const { t } = useUIKit();
+const { t, language } = useUIKit();
 const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
-const editorDomRef = ref<HTMLDivElement | null>(null);
-const isFocused = ref(props.autoFocus);
+const computedPlaceholder = computed(() => props.placeholder ?? t('MessageInput.enter_a_message'));
 
-let editorInstance: Editor | null = null;
+// Handle Enter key to send message
+const handleEnter = () => {
+  sendMessage();
+  setContent('');
+};
 
-onMounted(() => {
-  const element = editorDomRef.value;
-  if (!element) {
-    return;
+// Create editor using Tiptap's official useEditor composable
+const editor = useEditor({
+  autofocus: props.autoFocus,
+  editable: !props.disabled,
+  extensions: createExtensions({
+    placeholder: computedPlaceholder.value,
+    maxLength: props.maxLength,
+    showPlaceholderOnlyWhenEditable: props.placeholder === undefined,
+    onEnter: handleEnter,
+  }),
+  onUpdate: ({ editor: editorInstance }) => {
+    const content = convertEditorContent(editorInstance.getJSON());
+    updateRawValue(content);
+  },
+});
+
+// Sync editor instance to global state
+watch(editor, (newEditor) => {
+  setEditorInstance(newEditor ?? null);
+}, { immediate: true });
+
+// Reactive: disabled prop
+watch(() => props.disabled, (newDisabled) => {
+  editor.value?.setEditable(!newDisabled);
+  if (newDisabled) {
+    setContent('');
   }
+});
 
-  element.classList.add('message-input');
+// Reactive: placeholder (including language change)
+watch([computedPlaceholder, language], () => {
+  if (!editor.value) {
+    return;
+  }
 
-  if (!element.dataset.editorCreated) {
-    editorInstance = createEditor({
-      element,
-      placeholder: props.placeholder ?? t('MessageInput.enter_a_message'),
-      isPlaceholderOnlyShowWhenEditable: props.placeholder === undefined,
-      autoFocus: props.autoFocus,
-      disabled: props.disabled,
-      onUpdate: (content) => {
-        updateRawValue(content);
-      },
-      onEnter: () => {
-        sendMessage();
-        setContent('');
-      },
-      onFocus: () => {
-        isFocused.value = true;
-      },
-      onBlur: () => {
-        isFocused.value = false;
-      },
-    });
-    element.dataset.editorCreated = 'true';
-    setEditorInstance(editorInstance);
+  const placeholderExtension = editor.value.extensionManager.extensions.find(
+    ext => ext.name === 'placeholder',
+  );
+  if (placeholderExtension) {
+    placeholderExtension.options.placeholder = computedPlaceholder.value;
+    editor.value.view.updateState(editor.value.state);
   }
 });
 
-onUnmounted(() => {
-  const element = editorDomRef.value;
-  if (editorInstance && element) {
-    editorInstance.destroy();
-    element.removeAttribute('data-editor-created');
-    setEditorInstance(null);
+// Reactive: maxLength
+watch(() => props.maxLength, (newMaxLength) => {
+  if (!editor.value) {
+    return;
+  }
+
+  const characterCountExtension = editor.value.extensionManager.extensions.find(
+    ext => ext.name === 'characterCount',
+  );
+  if (characterCountExtension) {
+    characterCountExtension.options.limit = newMaxLength;
   }
 });
 
+// Clear content when conversation changes
 watch(activeConversation, (newConversation, oldConversation) => {
   if (newConversation?.conversationID !== oldConversation?.conversationID) {
     setContent('');
   }
 });
 
-watch(() => props.disabled, (newDisabled) => {
-  if (editorInstance) {
-    editorInstance.setEditable(!newDisabled);
-    if (newDisabled) {
-      setContent('');
-    }
-  }
+// Cleanup on unmount
+onBeforeUnmount(() => {
+  setEditorInstance(null);
 });
 </script>