tuikit-atomicx-vue3 0.1.0

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

@@ -0,0 +1,209 @@
+<template>
+  <View class="text-message">
+    <View
+      v-if="referencedInfo.content"
+      :class="cs('text-message__reference', {
+        'text-danger': isOriginMessageHasRecalled
+      })"
+      @click="handleReferenceClick"
+    >
+      <template v-if="isOriginMessageHasRecalled">
+        {{ t('TUIChat.origin message has been recalled') }}
+      </template>
+      <template v-else>
+        <View class="text-message__reference__header">
+          {{ referencedInfo.sender }}
+        </View>
+        <View class="text-message__reference__content">
+          {{ referencedInfo.content }}
+        </View>
+      </template>
+    </View>
+    <View class="text-message__content">
+      <template
+        v-for="(item, index) in messageContent.text"
+        :key="index"
+      >
+        <span
+          v-if="item.name === 'text'"
+          class="text-message__content__text"
+        >
+          {{ item.text }}
+        </span>
+        <img
+          v-else
+          class="text-message__content__img"
+          :src="item.src"
+          :alt="item.emojiKey || ''"
+        >
+      </template>
+    </View>
+  </View>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { TUIStore } from '@tencentcloud/chat-uikit-engine';
+import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import { safeJSONParse } from '../../../../utils/json';
+import { useScroll } from '../../../../hooks/useScroll';
+import { useMessageListState } from '../../../../states/MessageListState';
+import type { ICloudCustomData } from '../../../../types/message';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+const props = withDefaults(defineProps<{
+  message: IMessageModel;
+}>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const { t } = useUIKit();
+const { scrollToMessage } = useScroll();
+const {
+  highlightMessageIDSet,
+  recalledMessageIDSet,
+  highlightMessage,
+} = useMessageListState();
+
+const messageContent = computed(() => props.message.getMessageContent() as {
+  showName: string;
+  text: Array<{
+    name: 'text';
+    text: string;
+  } | {
+    name: 'img';
+    src: string;
+    emojiKey?: string;
+  }>;
+});
+
+const referencedInfo = computed(() => {
+  const cloudCustomData = safeJSONParse(props.message?.cloudCustomData, {}) as Partial<ICloudCustomData>;
+  const content = cloudCustomData?.messageReply?.messageAbstract || '';
+  const sender = cloudCustomData?.messageReply?.messageSender || '';
+  const messageID = cloudCustomData?.messageReply?.messageID || '';
+  return {
+    content,
+    sender,
+    messageID,
+  };
+});
+
+const isOriginMessageHasRecalled = computed(() => recalledMessageIDSet.value.has(referencedInfo.value.messageID));
+
+const handleReferenceClick = () => {
+  if (referencedInfo.value.messageID) {
+    const { messageID } = referencedInfo.value;
+
+    const messageModel = TUIStore.getMessageModel(messageID);
+    if (isOriginMessageHasRecalled.value || !messageModel || messageModel.isDeleted || messageModel.isRevoked) {
+      TUIToast.error({
+        message: t('TUIChat.Message has been deleted or recalled'),
+      });
+      return;
+    }
+
+    const isExist = highlightMessageIDSet.value.has(messageID);
+
+    if (!isExist) {
+      highlightMessage({
+        messageID,
+        duration: 3000,
+      });
+    }
+
+    scrollToMessage(messageID, {
+      block: 'center',
+      skipIfVisible: true,
+      behavior: 'instant',
+    }).catch(() => {});
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+.text-message {
+  font-size: 14px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  word-break: break-word;
+  white-space: pre-wrap;
+  position: relative;
+  line-height: 1.3125;
+  font-weight: 500;
+  color: var(--text-color-primary);
+
+  &__reference {
+    margin-bottom: 8px;
+    padding: 10px 16px;
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    position: relative;
+    border-radius: 4px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: #999;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+
+    &__header {
+      font-size: 12px;
+      color: var(--text-color-primary);
+      margin-bottom: 4px;
+    }
+
+    &__content {
+      font-size: 13px;
+      color: var(--text-color-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  &__content {
+    display: block;
+    word-break: break-word;
+    white-space: pre-wrap;
+    position: relative;
+
+    &__text {
+      display: inline;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    &__img {
+      display: inline;
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+      line-height: 1;
+      margin: 0 1px;
+    }
+  }
+}
+
+.text-danger {
+  color: var(--text-color-error);
+  background-color: var(--toast-color-error);
+
+  &::before {
+    background-color: var(--text-color-error);
+  }
+}
+</style>

package/src/components/MessageList/Message/TextMessage/index.ts

@@ -0,0 +1,3 @@
+import TextMessage from './TextMessage.vue';
+
+export { TextMessage };

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

@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import cs from 'classnames';
+import { View } from '../../../../baseComp/View';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IVideoMessageProps {
+  message: IMessageModel;
+  isLastInChunk?: boolean;
+}
+
+interface IVideoMessageContent {
+  showName: string;
+  snapshotHeight: number;
+  snapshotWidth: number;
+  snapshotUrl: string;
+  url: string;
+}
+
+const props = withDefaults(defineProps<IVideoMessageProps>(), {
+  isLastInChunk: false,
+  message: () => ({} as IMessageModel),
+});
+
+const messageContent = props.message.getMessageContent() as IVideoMessageContent;
+
+const windowResize = ref(false);
+const loaded = ref(false);
+const naturalSize = ref<{ height: number; aspectRatio: number } | null>(
+  messageContent.snapshotWidth && messageContent.snapshotHeight
+    ? {
+      height: messageContent.snapshotHeight,
+      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
+    }
+    : null,
+);
+
+const isMessageOwner = computed(() => props.message.flow === 'out');
+
+const displaySize = computed(() => {
+  const MAX_HEIGHT = 400;
+  const DEFAULT_RATIO = 3 / 4;
+
+  if (!naturalSize.value) {
+    return {
+      height: MAX_HEIGHT,
+      aspectRatio: DEFAULT_RATIO,
+    };
+  }
+
+  const { aspectRatio } = naturalSize.value;
+
+  if (aspectRatio > 1) {
+    return {
+      aspectRatio,
+      height: 200,
+    };
+  }
+  return {
+    aspectRatio,
+    height: MAX_HEIGHT,
+  };
+});
+
+const onResize = () => {
+  windowResize.value = true;
+};
+
+const onVideoLoad = (e: Event) => {
+  const video = e.target as HTMLVideoElement;
+  naturalSize.value = {
+    aspectRatio: video.videoWidth / video.videoHeight,
+    height: video.videoHeight,
+  };
+  loaded.value = true;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', onResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize);
+});
+
+watch(() => props.message.ID, () => {
+  loaded.value = false;
+  naturalSize.value = messageContent.snapshotWidth && messageContent.snapshotHeight
+    ? {
+      height: messageContent.snapshotHeight,
+      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
+    }
+    : null;
+});
+</script>
+
+<template>
+  <View
+    :class="cs('video-message', {
+      'video-message--last--self': isMessageOwner && isLastInChunk,
+      'video-message--last--other': !isMessageOwner && isLastInChunk,
+      'video-message--loaded': loaded
+    })"
+    :style="{
+      minHeight: windowResize ? 'auto' : `${displaySize.height}px`,
+      maxHeight: `${displaySize.height}px`,
+      aspectRatio: naturalSize ? `${displaySize.aspectRatio}` : 'auto',
+      width: !loaded ? `${displaySize.height * displaySize.aspectRatio}px` : undefined
+    }"
+  >
+    <div
+      v-if="!loaded"
+      class="video-placeholder"
+    />
+    <video
+      class="video-message__video"
+      :src="messageContent.url"
+      :poster="messageContent.snapshotUrl"
+      controls
+      muted
+      :autoplay="false"
+      @loadedmetadata="onVideoLoad"
+    />
+  </View>
+</template>
+
+<style lang="scss" scoped>
+.video-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  background-color: #f5f5f5;
+  max-width: 100%;
+
+  &--last--self {
+    border-bottom-right-radius: 4px;
+  }
+
+  &--last--other {
+    border-bottom-left-radius: 4px;
+  }
+
+  &--loaded {
+    background-color: transparent;
+  }
+}
+
+.video-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      90deg,
+      rgba(245, 245, 245, 100%) 0%,
+      rgba(235, 235, 235, 100%) 50%,
+      rgba(245, 245, 245, 100%) 100%
+    );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.video-message__video {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  .video-message--loaded & {
+    opacity: 1;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>

package/src/components/MessageList/Message/VideoMessage/index.ts

@@ -0,0 +1,3 @@
+import VideoMessage from './VideoMessage.vue';
+
+export { VideoMessage };

package/src/components/MessageList/Message/index.ts

@@ -0,0 +1,5 @@
+import Message from './Message.vue';
+
+export {
+  Message,
+};

package/src/components/MessageList/MessageForward/ForwardListItem.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+import { IconCheckSm } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
+import { View } from '../../../baseComp/View';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { Avatar } from '../../Avatar';
+
+const props = defineProps<{
+  conversationID: string;
+  isSelected: boolean;
+}>();
+
+const { conversationList } = useConversationListState();
+
+const conversation = computed(() => conversationList.value?.find(_conversation => _conversation.conversationID === props.conversationID));
+
+const conversationName = computed(() => conversation.value?.getShowName() || conversation.value?.conversationID || '');
+
+const conversationAvatar = computed(() => conversation.value?.getAvatar());
+</script>
+
+<template>
+  <View
+    :class="cs('forward-list-item', { 'forward-list-item--selected': props.isSelected })"
+  >
+    <Avatar
+      :src="conversationAvatar"
+      :style="{ marginRight: '8px' }"
+    />
+    <View class="forward-item__info">
+      <View class="forward-item__name">
+        {{ conversationName }}
+      </View>
+    </View>
+    <IconCheckSm
+      v-if="props.isSelected"
+      class="forward-item__checkbox"
+    />
+  </View>
+</template>
+
+<style lang="scss" scoped>
+@use '../../../styles/mixins/index' as mixin;
+
+.forward-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--dropdown-color-hover);
+  }
+}
+
+.forward-item {
+  &__info {
+    flex: 1;
+    margin-left: 12px;
+  }
+
+  &__name {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__checkbox {
+    color: #1890ff;
+  }
+}
+</style>

package/src/components/MessageList/MessageForward/MessageForward.vue

@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import ChatEngine from '@tencentcloud/chat-uikit-engine';
+import { useUIKit, IconClose, TUIToast, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { DialogTitle } from 'reka-ui';
+import { Modal } from '../../../baseComp/Modal';
+import { View } from '../../../baseComp/View';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { useMessageActionState } from '../../../states/MessageActionState';
+import { UserPicker } from '../../UserPicker';
+import type { IUserPickerRef, IUserPickerRow } from '../../UserPicker/type';
+import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+
+const { t } = useUIKit();
+const {
+  forwardMessageIDList,
+  forwardConversationIDList,
+  isForwardMessageSelectionDone,
+  forwardMessage,
+} = useMessageActionState();
+
+const {
+  conversationList,
+} = useConversationListState();
+
+// UserPicker ref
+const userPickerRef = ref<IUserPickerRef<undefined> | null>(null);
+
+// Convert conversation list to UserPicker data format
+const forwardListDataSource = computed((): Array<IUserPickerRow<undefined>> => {
+  if (!conversationList.value) {
+    return [];
+  }
+
+  return conversationList.value.map((conversation: IConversationModel) => {
+    const { type, remark, groupProfile, userProfile } = conversation;
+    const userPickerRow: IUserPickerRow<undefined> = {
+      key: conversation.conversationID,
+      label: '',
+      avatarUrl: conversation.getAvatar() || '',
+    };
+
+    // resolve c2c conversation
+    if (type === ChatEngine.TYPES.CONV_C2C) {
+      const userDisplayName = remark || userProfile?.nick || userProfile?.userID;
+      userPickerRow.label = userDisplayName || '';
+    }
+
+    // resolve group conversation
+    if (type === ChatEngine.TYPES.CONV_GROUP) {
+      const groupDisplayName = groupProfile?.name || groupProfile?.groupID;
+      userPickerRow.label = groupDisplayName || '';
+    }
+
+    return userPickerRow;
+  });
+});
+
+// Track if forward button should be disabled
+const isDisableConfirm = ref(true);
+
+function handleSelectedChange(selectedItems: Array<IUserPickerRow<undefined>>) {
+  isDisableConfirm.value = selectedItems.length === 0;
+  // Update forwardConversationIDList to maintain compatibility with existing logic
+  forwardConversationIDList.value = selectedItems.map(item => item.key);
+}
+
+function forward() {
+  if (!isForwardMessageSelectionDone.value) {
+    return;
+  }
+
+  const selectedConversationList = userPickerRef.value?.getSelectedItems();
+
+  if (selectedConversationList && selectedConversationList.length > 0) {
+    forwardMessage({
+      messageIDList: forwardMessageIDList.value,
+      conversationIDList: selectedConversationList.map(item => item.key),
+      isMergeForward: false,
+    });
+    closeMessageForward();
+  }
+}
+
+function closeMessageForward() {
+  forwardMessageIDList.value = [];
+  forwardConversationIDList.value = [];
+  isForwardMessageSelectionDone.value = false;
+}
+</script>
+
+<template>
+  <Modal
+    :open="isForwardMessageSelectionDone"
+    content-class="forward-container"
+    @on-close="closeMessageForward"
+  >
+    <View
+      class="forward-header"
+      dir="row"
+    >
+      <IconClose
+        size="28"
+        class="forward-header__close"
+        @click="closeMessageForward"
+      />
+      <span class="forward-header__title">
+        {{ t('TUIChat.Forward') }}
+      </span>
+      <div class="forward-header__placeholder" />
+    </View>
+
+    <UserPicker
+      ref="userPickerRef"
+      display-mode="list"
+      :data-source="forwardListDataSource"
+      :max-count="10"
+      :on-selected-change="handleSelectedChange"
+      :on-max-count-exceed="() => {
+        TUIToast.error({
+          message: t('TUIChat.Max Count Exceed'),
+        });
+      }"
+    />
+
+    <View class="forward-footer">
+      <TUIButton
+        shape="rect"
+        color="blue"
+        type="primary"
+        :disabled="isDisableConfirm"
+        @click="forward"
+      >
+        {{ t('TUIChat.Forward') }}
+      </TUIButton>
+    </View>
+  </Modal>
+</template>
+
+<style lang="scss">
+@use '../../../styles/mixins' as mixin;
+
+.forward-container {
+  padding: 16px;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--text-color-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  @include mixin.mobile {
+    height: 65vh;
+    width: 80vw;
+  }
+
+  @include mixin.tablet-and-up {
+    width: 50vw;
+    height: 60vh;
+  }
+
+  @include mixin.desktop-and-up {
+    width: 480px;
+    height: 60vh;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@use '../../../styles/mixins' as mixin;
+
+$animationDuration: 200ms;
+
+.forward-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--text-color-primary);
+
+  $icon-size: 28px;
+
+  &__close {
+    width: $icon-size;
+    height: $icon-size;
+    flex: 0 0 auto;
+    padding: 6px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--hover-bg-color, rgba(0, 0, 0, 0.04));
+    }
+  }
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    text-align: center;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  &__placeholder {
+    width: $icon-size; // 与关闭按钮同宽，保持视觉平衡
+    height: $icon-size;
+  }
+}
+</style>

package/src/components/MessageList/MessageForward/index.ts

@@ -0,0 +1,3 @@
+import MessageForward from './MessageForward.vue';
+
+export { MessageForward };