tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/src/components/MessageInput/TextEditor/extensions/imageExtension.ts

@@ -0,0 +1,79 @@
+import Image from '@tiptap/extension-image';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+function createImageExtension() {
+  return Image.extend({
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        HTMLAttributes: {
+          class: 'message-image',
+        },
+      };
+    },
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        fileData: {
+          default: null,
+          parseHTML: () => null,
+          renderHTML: () => ({}),
+        },
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          key: new PluginKey('imagePaste'),
+          props: {
+            handlePaste: (view, event) => {
+              const items = Array.from(event.clipboardData?.items || []);
+              const images = items.filter(item => item.type.indexOf('image') === 0);
+
+              if (images.length === 0) {
+                return false; // Let default handler process
+              }
+
+              images.forEach((item) => {
+                const file = item.getAsFile();
+
+                if (file) {
+                  const reader = new FileReader();
+                  reader.onload = (readerEvent) => {
+                    const dataUrl = readerEvent.target?.result as string;
+
+                    const node = view.state.schema.nodes.image.create({
+                      src: dataUrl,
+                      fileData: file,
+                    });
+
+                    const transaction = view.state.tr.replaceSelectionWith(node);
+                    view.dispatch(transaction);
+                  };
+
+                  reader.onerror = (error) => {
+                    console.error('[MessageInput]::Failed to read image file:', error);
+                  };
+
+                  reader.onabort = () => {
+                    console.warn('[MessageInput]::Image file reading was aborted.');
+                  };
+
+                  reader.readAsDataURL(file);
+                }
+              });
+
+              return true; // Prevent default paste behavior
+            },
+          },
+        }),
+      ];
+    },
+  }).configure({
+    inline: true,
+  });
+}
+
+export {
+  createImageExtension,
+};

package/src/components/MessageInput/TextEditor/extensions/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Extensions Index - Centralized export for all Tiptap extensions
+ */
+export { CharacterCount } from './characterCountExtension';
+export { createEmojiExtension } from './emojiExtension';
+export { createEnterKeyExtension } from './enterKeyExtension';
+export { createImageExtension } from './imageExtension';
+export { createMentionExtension } from './mentionExtension';

package/src/components/MessageInput/TextEditor/extensions/mentionExtension.ts

@@ -0,0 +1,87 @@
+/**
+ * TipTap Mention Extension Configuration
+ * @description Enables @ mention functionality in the editor
+ * Data management is handled by MentionSuggestion component via GroupSettingState
+ */
+import Mention from '@tiptap/extension-mention';
+import { VueRenderer } from '@tiptap/vue-3';
+import { useConversationListState } from '../../../../states/ConversationListState';
+import { useGroupSettingState, GroupType } from '../../../../states/GroupSettingState';
+import { ConversationType } from '../../../../types/engine';
+import MentionSuggestion from './MentionSuggestion.vue';
+import type { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
+
+interface MentionComponentRef {
+  onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+}
+
+/**
+ * Create Mention extension for @ member functionality
+ * @returns Configured Mention extension
+ */
+export function createMentionExtension() {
+  return Mention.configure({
+    deleteTriggerWithBackspace: true,
+    HTMLAttributes: {
+      class: 'uikit-message-input-mention-tag',
+    },
+    suggestion: {
+      char: '@',
+      // Items are now managed inside the component via GroupSettingState
+      items: () => [],
+      render: () => {
+        let component: VueRenderer | null = null;
+        let element: HTMLElement | null = null;
+
+        const destroy = () => {
+          if (element?.parentNode) {
+            element.parentNode.removeChild(element);
+          }
+          component?.destroy();
+          component = null;
+          element = null;
+        };
+
+        return {
+          onStart: (props: SuggestionProps) => {
+            const { activeConversation } = useConversationListState();
+            const { memberCount, groupType } = useGroupSettingState();
+            if (
+              activeConversation.value?.type === ConversationType.GROUP
+              && memberCount.value
+              && memberCount.value > 1
+              && groupType.value !== GroupType.AVCHATROOM
+            ) {
+              component = new VueRenderer(MentionSuggestion, {
+                props,
+                editor: props.editor,
+              });
+
+              if (component.element) {
+                element = component.element as HTMLElement;
+                document.body.appendChild(element);
+              }
+            }
+          },
+
+          onUpdate(props: SuggestionProps) {
+            component?.updateProps(props);
+          },
+
+          onKeyDown(props: SuggestionKeyDownProps) {
+            if (props.event.key === 'Escape') {
+              destroy();
+              return true;
+            }
+
+            return (component?.ref as unknown as MentionComponentRef)?.onKeyDown?.(props) || false;
+          },
+
+          onExit() {
+            destroy();
+          },
+        };
+      },
+    },
+  });
+}

package/src/components/MessageInput/VideoCallPicker/VideoCallPicker.vue

@@ -76,7 +76,7 @@ const props = withDefaults(defineProps<VideoCallPickerProps>(), {
 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();
@@ -85,13 +85,15 @@ const isPrivateConversation = 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) {
@@ -235,7 +237,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/i18n/en-US.ts

@@ -12,6 +12,9 @@ const MessageInput = {
   cancel: 'Cancel',
   confirm: 'Confirm',
   initiate_call: 'Initiate call',
+  loading: 'Loading...',
+  no_matching_members: 'No matching members',
+  at_all_members: 'All members',
 };
 
 export default MessageInput;

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

@@ -8,6 +8,13 @@ const MessageInput = {
   unknown: '未知',
   enter_a_message: '输入消息',
   send: '发送',
+  select_call_members: '选择成员',
+  cancel: '取消',
+  confirm: '确认',
+  initiate_call: '发起通话',
+  loading: '加载中...',
+  no_matching_members: '暂无匹配成员',
+  at_all_members: '所有人',
 };
 
 export default MessageInput;

package/src/components/MessageInput/types.d.ts

@@ -28,6 +28,7 @@ export interface MessageInputProps {
   hideSendButton?: boolean;
   placeholder?: string;
   attachmentPickerMode?: MessageInputAttachmentPickerMode;
+  maxLength?: number;
   actions?: MessageInputActions;
   slots?: MessageInputSlots;
 }

package/src/components/MessageList/Message/CustomMessage/CallMessage/CallMessage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useCssModule } from 'vue';
-import { IconCall1Filled, IconVideoDefaultFilled } from '@tencentcloud/uikit-base-component-vue3';
+import { IconCall1Filled, IconVideoDefaultFilled, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { View } from '../../../../../baseComp/View';
 import { useConversationListState } from '../../../../../states/ConversationListState';
 import { ConversationType } from '../../../../../types/engine';
@@ -12,10 +12,12 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+
+const { t } = useUIKit();
 const classes = useCssModule();
 const { activeConversation } = useConversationListState();
 
-const text = computed(() => parseCallMessageText(props.message));
+const text = computed(() => parseCallMessageText(props.message, t));
 const payload = computed(() => parseCallMessage(props.message));
 
 const callAgain = () => {

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { ConversationType } from '../../../../types/engine';
@@ -28,20 +29,20 @@ const { t } = useUIKit();
 
 const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
-const renderText = () => {
+const renderText = computed(() => {
   if (messageContent.businessID === 'group_create') {
     return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
   }
   if (isCallMessage(props.message) && props.message.conversationType === ConversationType.GROUP) {
-    return parseCallMessageText(props.message);
+    return parseCallMessageText(props.message, t);
   }
   return resolveGroupTipMessage(props.message).text;
-};
+});
 </script>
 
 <template>
   <div :class="cs('group-tip-message')">
-    {{ renderText() }}
+    {{ renderText }}
   </div>
 </template>
 

package/src/components/MessageList/Message/ImageMessage/ImageMessage.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import cs from 'classnames';
+import ImagePreview from './ImagePreview.vue';
 import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
 interface ImageMessageProps {
@@ -15,6 +16,8 @@ interface ImageMessageContent {
   showName?: string;
 }
 
+defineOptions({ inheritAttrs: false });
+
 const MAX_HEIGHT = 320;
 const MIN_HEIGHT = 50;
 const DEFAULT_ASPECT_RATIO = 4 / 3;
@@ -58,6 +61,9 @@ 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
@@ -180,6 +186,30 @@ 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);
@@ -195,6 +225,14 @@ watch(() => messageContent.value.url, () => {
   fetchBlobDimensions();
 });
 
+watch(isPreviewOpen, (open) => {
+  if (open) {
+    lockBodyScroll();
+  } else {
+    unlockBodyScroll();
+  }
+});
+
 onMounted(() => {
   initializeLazyLoading();
   fetchBlobDimensions();
@@ -205,12 +243,14 @@ onUnmounted(() => {
   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',
@@ -221,6 +261,9 @@ onUnmounted(() => {
       height: `${displaySize.height}px`,
       aspectRatio: `${displaySize.aspectRatio}`,
     }"
+    role="button"
+    tabindex="0"
+    @click="handlePreviewOpen"
   >
     <!-- skeleton -->
     <div
@@ -249,6 +292,12 @@ onUnmounted(() => {
       @error="handleImageError"
     >
   </div>
+  <ImagePreview
+    :open="isPreviewOpen"
+    :src="messageContent.url"
+    :alt="messageContent.showName || 'image message preview'"
+    @close="handlePreviewClose"
+  />
 </template>
 
 <style lang="scss" scoped>