tuikit-atomicx-vue3 4.5.0 → 4.5.1

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

@@ -14,7 +14,11 @@ import cs from 'classnames';
 import { ObserverView } from '../../baseComp/ObserverView';
 import { View } from '../../baseComp/View';
 import { useScroll } from '../../hooks/useScroll';
+import { useConversationListState } from '../../states/ConversationListState';
+import { useGroupSettingState } from '../../states/GroupSettingState';
 import { useMessageListState } from '../../states/MessageListState';
+import { ConversationType, MessageType } from '../../types/engine';
+import { isCallMessage } from '../../utils/call';
 import { throttle } from '../../utils/lodash';
 import { Message as DefaultMessage } from './Message';
 import { MessageForward } from './MessageForward';
@@ -22,7 +26,7 @@ import { MessageListContextSymbol } from './MessageListContext';
 import { MessageTimeDivider as DefaultMessageTimeDivider } from './MessageTimeDivider';
 import { ScrollToBottom } from './ScrollToBottom';
 import type { MessageAction } from '../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../types/engine';
 
 // Define message chunk interface
 interface MessageChunk {
@@ -80,8 +84,12 @@ const {
   setEnableReadReceipt,
 } = useMessageListState();
 
+const { getGroupMemberList } = useGroupSettingState();
+
 const { scrollToBottom } = useScroll();
+const { activeConversation } = useConversationListState();
 
+const isGroup = computed(() => activeConversation.value?.type === ConversationType.GROUP);
 const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
 
 // Message aggregation logic
@@ -110,18 +118,21 @@ const messageChunks = computed(() => {
 
   filteredMessageList.forEach((message, index, messages) => {
     const messageTime = message.time;
-    const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
-    const lastMessage = index > 0 ? messages[index - 1] : undefined;
+    const prevChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
+    const prevMessage = index > 0 ? messages[index - 1] : undefined;
 
-    const shouldCreateNewChunk = !lastChunk
-      || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
-      || lastChunk.messages[0].from !== message.from
+    const shouldCreateNewChunk = !prevChunk
+      || messageTime - prevChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
+      || prevChunk.messages[0].from !== message.from
       || message.isRevoked
-      || (lastMessage && lastMessage.isRevoked)
+      || (prevMessage && prevMessage.isRevoked)
       || message.status === 'fail'
-      || (lastMessage && lastMessage.status === 'fail')
+      || (prevMessage && prevMessage.status === 'fail')
       || message.hasRiskContent
-      || (lastMessage && lastMessage.hasRiskContent);
+      || (prevMessage && prevMessage.hasRiskContent)
+      || isCallMessage(message)
+      || (prevMessage && isCallMessage(prevMessage))
+      || (prevMessage && prevMessage.type === MessageType.CUSTOM && prevMessage.getMessageContent().businessID === 'group_create');
 
     if (shouldCreateNewChunk) {
       chunks.push({
@@ -130,7 +141,7 @@ const messageChunks = computed(() => {
         key: `chunk-${message.ID}`,
       });
     } else {
-      lastChunk.messages.push(message);
+      prevChunk.messages.push(message);
     }
   });
 
@@ -222,6 +233,9 @@ watch(messageList, (newMessages, oldMessages) => {
       scrollToBottom({ behavior: 'instant' });
       isFinishFirstRender.value = true;
     });
+    if (isGroup.value) {
+      getGroupMemberList();
+    }
     return;
   }
 
@@ -306,14 +320,22 @@ onUnmounted(() => {
               :message="message"
               :alignment="props.alignment"
               :messageActionList="props.messageActionList"
-              :isAggregated="Boolean(enableMessageAggregation && messageIndex !== chunk.messages.length - 1)"
+              :isAggregated="Boolean(enableMessageAggregation && messageIndex !== 0)"
               :is-first-in-chunk="Boolean(messageIndex === 0)"
               :is-last-in-chunk="Boolean(messageIndex === chunk.messages.length - 1)"
               :isHiddenMessageAvatar="
                 Boolean(
                   alignment === 'two-sided'
-                    ? (enableMessageAggregation && messageIndex !== chunk.messages.length - 1 || message.flow === 'out')
-                    : (enableMessageAggregation && messageIndex !== chunk.messages.length - 1 )
+                    ? (enableMessageAggregation && messageIndex !== 0 || message.flow === 'out')
+                    : (enableMessageAggregation && messageIndex !== 0 )
+                )
+              "
+              :is-hidden-message-nick="
+                Boolean(
+                  !isGroup
+                    || (alignment === 'two-sided'
+                      ? enableMessageAggregation && messageIndex !== 0 || message.flow === 'out'
+                      : enableMessageAggregation && messageIndex !== 0)
                 )
               "
               :isHiddenMessageMeta="
@@ -354,7 +376,7 @@ onUnmounted(() => {
   @include scrollbar.scrollbar-hidden();
 }
 .message-chunk--container {
-  margin-top: 10px;
+  margin-top: 25px;
 }
 .message-chunk {
   display: flex;