tuikit-atomicx-vue3 4.5.0 → 4.5.2

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/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

@@ -12,6 +12,9 @@ const MessageInput = {
   cancel: '取消',
   confirm: '确认',
   initiate_call: '发起通话',
+  loading: '加载中...',
+  no_matching_members: '暂无匹配成员',
+  at_all_members: '所有人',
 };
 
 export default MessageInput;

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>

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

@@ -0,0 +1,344 @@
+<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 lastPointer = ref({ x: 0, y: 0 });
+const isError = ref(false);
+
+let pinchStartDistance: number | null = null;
+let pinchStartScale = 1;
+
+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 };
+}
+
+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) {
+  isDragging.value = true;
+  lastPointer.value = { x: event.clientX, y: event.clientY };
+  (event.target as HTMLElement)?.setPointerCapture(event.pointerId);
+}
+
+function handlePointerMove(event: PointerEvent) {
+  if (!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) {
+  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 handleTouchStart(event: TouchEvent) {
+  if (event.touches.length === 2) {
+    pinchStartDistance = getTouchDistance(event.touches);
+    pinchStartScale = scale.value;
+  }
+}
+
+function handleTouchMove(event: TouchEvent) {
+  if (event.touches.length === 2 && pinchStartDistance) {
+    event.preventDefault();
+    const currentDistance = getTouchDistance(event.touches);
+    if (!currentDistance) {
+      return;
+    }
+    const factor = currentDistance / pinchStartDistance;
+    scale.value = clampScale(pinchStartScale * factor);
+  }
+}
+
+function handleTouchEnd() {
+  pinchStartDistance = null;
+}
+
+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"
+                :src="src"
+                :alt="alt || 'image preview'"
+                :style="{
+                  transform: `translate3d(${translate.x}px, ${translate.y}px, 0) scale(${scale})`,
+                }"
+                class="image-preview__img"
+                draggable="false"
+                @error="handleImageError"
+                @wheel.prevent="handleWheel"
+                @dblclick.prevent="handleDoubleClick"
+                @pointerdown="handlePointerDown"
+                @pointermove="handlePointerMove"
+                @pointerup="handlePointerUp"
+                @pointercancel="handlePointerUp"
+                @touchstart.passive="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>

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

@@ -5,28 +5,33 @@ import type { MessageModel } from '../../../types/engine';
 
 interface MessageProps {
   message: MessageModel;
+  nick?: string;
   alignment?: 'left' | 'right' | 'two-sided';
   messageActionList?: MessageAction[] | undefined;
   isAggregated?: boolean;
   isFirstInChunk?: boolean;
   isLastInChunk?: boolean;
   isHiddenMessageAvatar?: boolean;
+  isHiddenMessageNick?: boolean;
   isHiddenMessageMeta?: boolean;
 }
 
 withDefaults(defineProps<MessageProps>(), {
   alignment: 'two-sided',
+  nick: undefined,
   messageActionList: undefined,
   isAggregated: false,
   isFirstInChunk: undefined,
   isLastInChunk: undefined,
   isHiddenMessageAvatar: false,
+  isHiddenMessageNick: false,
   isHiddenMessageMeta: false,
 });
 </script>
 
 <template>
   <MessageLayout
+    :nick="nick"
     :message="message"
     :messageActionList="messageActionList"
     :alignment="alignment"
@@ -34,6 +39,7 @@ withDefaults(defineProps<MessageProps>(), {
     :is-first-in-chunk="isFirstInChunk"
     :is-last-in-chunk="isLastInChunk"
     :is-hidden-message-avatar="isHiddenMessageAvatar"
+    :is-hidden-message-nick="isHiddenMessageNick"
     :is-hidden-message-meta="isHiddenMessageMeta"
   />
 </template>

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

@@ -25,9 +25,11 @@ import type { MessageModel } from '../../../../types/engine';
 
 interface MessageLayoutProps {
   message: MessageModel;
+  nick?: string;
   isAggregated?: boolean;
   isHiddenMessageAvatar?: boolean;
   isHiddenMessageMeta?: boolean;
+  isHiddenMessageNick?: boolean;
   isFirstInChunk?: boolean;
   isLastInChunk?: boolean;
   alignment?: 'left' | 'right' | 'two-sided';
@@ -39,9 +41,11 @@ interface MessageLayoutProps {
 const props = withDefaults(defineProps<MessageLayoutProps>(), {
   message: () => ({}) as MessageModel,
   alignment: 'two-sided',
+  nick: undefined,
   isAggregated: false,
   isHiddenMessageAvatar: false,
   isHiddenMessageMeta: false,
+  isHiddenMessageNick: false,
   isFirstInChunk: undefined,
   isLastInChunk: undefined,
   messageActionList: undefined,
@@ -125,6 +129,9 @@ function handleReadReceiptClose() {
       :src="message.avatar"
     />
     <View :class="cs(wrapperClasses)">
+      <View v-if="!isHiddenMessageNick" :class="cs('message-layout__nick')">
+        {{ props.nick || message.nameCard || message.nick || message.from }}
+      </View>
       <MessageBubble
         :class="bubbleClasses"
         :message="message"
@@ -186,7 +193,7 @@ $message-avatar-gap: 8px;
 
   &__nick {
     font-size: 12px;
-    min-width: min(70%, 200px);
+    max-width: min(70%, 120px);
     color: var(--text-color-tertiary);
     @include mixin.text-ellipsis;
   }

package/src/components/MessageList/Message/MessageLayout/MessageMeta/MessageMeta.vue

@@ -54,13 +54,22 @@ const readReceiptText = computed(() => {
     return '';
   }
 
+  const {
+    readCount,
+    unreadCount,
+    isPeerRead,
+  } = props.readReceiptInfo;
+
   if (props.isGroup) {
-    if (props.readReceiptInfo.unreadCount > 0) {
-      return `${props.readReceiptInfo.unreadCount} ${t('MessageList.unread')} ·`;
+    if (unreadCount === undefined || readCount === undefined) {
+      return '';
+    }
+    if (unreadCount > 0) {
+      return `${unreadCount} ${t('MessageList.unread')} ·`;
     }
     return `${t('MessageList.all_read')} ·`;
   }
-  if (props.readReceiptInfo.isPeerRead) {
+  if (isPeerRead) {
     return `${t('MessageList.read')} ·`;
   }
   return `${t('MessageList.unread')} ·`;