tuikit-atomicx-vue3 0.1.0

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

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import cs from 'classnames';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IImageMessageProps {
+  message: IMessageModel;
+  isLastInChunk?: boolean;
+}
+
+interface IImageMessageContent {
+  url: string;
+  width: number;
+  height: number;
+  showName: string;
+}
+
+const props = withDefaults(defineProps<IImageMessageProps>(), {
+  isLastInChunk: false,
+  message: () => ({} as IMessageModel),
+});
+
+const messageContent = props.message.getMessageContent() as IImageMessageContent;
+
+const windowResize = ref(false);
+const loaded = ref(false);
+const naturalSize = ref<{ height: number; aspectRatio: number } | null>(
+  messageContent.width && messageContent.height
+    ? { height: messageContent.height, aspectRatio: messageContent.width / messageContent.height }
+    : null,
+);
+
+const isMessageOwner = computed(() => props.message.flow === 'out');
+
+// Calculate final display size
+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) {
+    // If image is horizontal, reduce height to 200
+    return {
+      aspectRatio,
+      height: 200,
+    };
+  }
+  // If image is vertical, fix height to 400
+  return {
+    aspectRatio,
+    height: 400,
+  };
+});
+
+const onResize = () => {
+  windowResize.value = true;
+};
+
+const onImageLoad = (e: Event) => {
+  const img = e.target as HTMLImageElement;
+  naturalSize.value = {
+    aspectRatio: img.naturalWidth / img.naturalHeight,
+    height: img.naturalHeight,
+  };
+  loaded.value = true;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', onResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize);
+});
+
+// Reset loading state when message ID changes
+watch(() => props.message.ID, () => {
+  loaded.value = false;
+  naturalSize.value = messageContent.width && messageContent.height
+    ? { height: messageContent.height, aspectRatio: messageContent.width / messageContent.height }
+    : null;
+});
+</script>
+
+<template>
+  <div
+    :class="cs('image-message', {
+      'image-message--last--self': isMessageOwner && isLastInChunk,
+      'image-message--last--other': !isMessageOwner && isLastInChunk,
+      'image-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="image-placeholder"
+    />
+    <img
+      :src="messageContent.url"
+      :class="cs('image', {
+        'image--loaded': loaded
+      })"
+      @load="onImageLoad"
+    >
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.image-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  width: 100%;
+
+  &--last--self {
+    border-bottom-right-radius: 4px;
+  }
+
+  &--last--other {
+    border-bottom-left-radius: 4px;
+  }
+}
+
+.image-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;
+}
+
+.image {
+  max-width: 100%; // Ensure image doesn't exceed container
+  max-height: 100%;
+  width: 100%; // Keep original image ratio
+  height: auto;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &--loaded {
+    opacity: 1;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+</style>

package/src/components/BarrageList/Message/ImageMessage/index.ts

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

package/src/components/BarrageList/Message/MergerMessage/MergerMessage.vue

@@ -0,0 +1,6 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  [Merger Message]
+</template>

package/src/components/BarrageList/Message/MergerMessage/index.ts

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

package/src/components/BarrageList/Message/Message.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { MessageLayout } from './MessageLayout';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IMessageProps {
+  message: IMessageModel;
+  isLastInChunk?: boolean;
+}
+
+const props = withDefaults(defineProps<IMessageProps>(), {
+  message: () => ({} as IMessageModel),
+  isLastInChunk: true,
+});
+
+const message = ref(props.message);
+const isLastInChunk = ref(props.isLastInChunk);
+</script>
+
+<template>
+  <MessageLayout
+    :message="message"
+    :is-last-in-chunk="isLastInChunk"
+  />
+</template>
+
+<style lang="scss" scoped>
+</style>

package/src/components/BarrageList/Message/MessageLayout/MessageBubble/MessageBubble.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="message-bubble"
+    :class="
+      cs({
+        [`bubble-${flow}`]: flow && true,
+        'all-round-radius': !isLastInChunk,
+        'no-background': MEDIA_MESSAGE_TYPE.includes(message.type),
+        'highlight--normal': isHighlighted,
+        'highlight--media': isHighlighted && isMediaMessage,
+      })
+    "
+  >
+    <div v-if="message.hasRiskContent" class="has-risk-content">
+      {{ t('This message contains risky content') }}
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, computed, defineProps, withDefaults } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import cs from 'classnames';
+import { useBarrageListState } from '../../../../../states/BarrageListState';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+interface IMessageBubbleProps {
+  message: IMessageModel;
+  isLastInChunk: boolean;
+}
+
+const { t } = useUIKit();
+
+const MEDIA_MESSAGE_TYPE = [TUIChatEngine.TYPES.MSG_IMAGE, TUIChatEngine.TYPES.MSG_VIDEO];
+
+const props = withDefaults(defineProps<IMessageBubbleProps>(), {
+  message: () => ({}) as IMessageModel,
+  isLastInChunk: false,
+});
+
+const { message, isLastInChunk } = toRefs(props);
+const { highlightMessageIDList } = useBarrageListState();
+
+const isMediaMessage = computed(() => MEDIA_MESSAGE_TYPE.includes(message.value.type));
+const isHighlighted = computed(() => highlightMessageIDList.value.includes(message.value.ID));
+
+const { flow } = message.value;
+</script>
+
+<style lang="scss" scoped>
+$message-bubble-border-radius: 8px;
+
+.message-bubble {
+  border-radius: $message-bubble-border-radius;
+  flex: 1;
+
+  &.all-round-radius {
+    border-radius: $message-bubble-border-radius;
+  }
+}
+
+.bubble-in {
+  border-top-left-radius: 0px;
+}
+
+.bubble-out {
+  border-top-right-radius: 0px;
+}
+
+.no-background {
+  background: none;
+}
+
+.has-risk-content {
+  padding: 8px;
+  background-color: #fa515129;
+  color: var(--text-color-error);
+  font-size: 14px;
+}
+
+.highlight {
+  &--normal {
+    animation: background-highlight 1s ease-in-out infinite;
+  }
+  &--media {
+    animation: media-highlight 1s ease-in-out infinite;
+  }
+}
+
+@keyframes background-highlight {
+  50% {
+    background-color: rgba(255, 156, 25, 1);
+  }
+}
+
+@keyframes media-highlight {
+  50% {
+    box-shadow: 0 1px 20px 0 rgb(255, 150, 13);
+  }
+}
+</style>

package/src/components/BarrageList/Message/MessageLayout/MessageBubble/index.ts

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

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

@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import { toRefs, computed, withDefaults, defineProps } from 'vue';
+import TencentCloudChat from '@tencentcloud/chat-uikit-engine';
+import cs from 'classnames';
+import { CustomMessage } from '../CustomMessage';
+import { FaceMessage } from '../FaceMessage';
+import { GroupTipMessage } from '../GroupTipMessage';
+import { ImageMessage } from '../ImageMessage';
+import { MergerMessage } from '../MergerMessage';
+import { RecalledMessage } from '../RecalledMessage';
+import { TextMessage } from '../TextMessage';
+import { MessageBubble } from './MessageBubble';
+import { MessageMeta } from './MessageMeta';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IMessageLayoutProps {
+  message: IMessageModel;
+  isLastInChunk?: boolean;
+  // messageActionList?: IMessageAction[];
+  className?: string;
+  style?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<IMessageLayoutProps>(), {
+  message: () => ({}) as IMessageModel,
+  isLastInChunk: true,
+  messageActionList: () => [],
+  className: '',
+  style: () => ({}),
+});
+
+const {
+  message,
+  isLastInChunk,
+  // messageActionList,
+  className,
+  style,
+} = toRefs(props);
+
+const MessageComponentsFactory = {
+  [TencentCloudChat.TYPES.MSG_TEXT]: TextMessage,
+  [TencentCloudChat.TYPES.MSG_IMAGE]: ImageMessage,
+  [TencentCloudChat.TYPES.MSG_FACE]: FaceMessage,
+  [TencentCloudChat.TYPES.MSG_MERGER]: MergerMessage,
+  [TencentCloudChat.TYPES.MSG_CUSTOM]: CustomMessage,
+  [TencentCloudChat.TYPES.MSG_GRP_TIP]: GroupTipMessage,
+};
+
+const MessageComponent = computed(() => MessageComponentsFactory[message.value.type as any]);
+
+const isMessageOwner = computed(() => message.value.flow === 'out');
+</script>
+
+<template>
+  <RecalledMessage v-if="message.isRevoked" class="message-recalled" :message="message" />
+  <GroupTipMessage
+    v-else-if="
+      message.type === TencentCloudChat.TYPES.MSG_GRP_TIP || message.type === TencentCloudChat.TYPES.MSG_CUSTOM
+    "
+    :message="message"
+  />
+  <div
+    v-else-if="MessageComponent"
+    :data-message-id="message.ID"
+    :class="
+      cs(
+        'message-layout',
+        {
+          'message-layout--self': isMessageOwner,
+          [`message-layout--not-last${isMessageOwner ? '--self' : ''}`]: !isLastInChunk,
+        },
+        className
+      )
+    "
+    :style="style"
+  >
+    <div :class="cs('message-layout__wrapper', { 'message-layout__wrapper--self': isMessageOwner })">
+      <div
+        :class="
+          cs('message-layout__wrapper__middle', {
+            'message-layout__wrapper__middle--self': isMessageOwner,
+          })
+        "
+      >
+        <div
+          v-if="isLastInChunk && message.type !== TencentCloudChat.TYPES.MSG_TEXT"
+          :class="cs('message-layout__nick')"
+        >
+          {{ message.nick + ': ' }}
+        </div>
+        <MessageBubble
+          :class="
+            cs({
+              [`message-layout__bubble--last${isMessageOwner ? '--self' : ''}`]: isLastInChunk,
+            })
+          "
+          :message="message"
+          :is-last-in-chunk="isLastInChunk"
+        >
+          <component :is="MessageComponent" :message="message" :is-last-in-chunk="isLastInChunk" />
+        </MessageBubble>
+      </div>
+      <MessageMeta
+        v-if="isLastInChunk"
+        :class="
+          cs('message-layout__meta', {
+            'message-layout__meta--self': isMessageOwner,
+          })
+        "
+        :status="message.status"
+        :is-show-read-status="true"
+        :timestamp="message.time"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../../../../styles/mixins/text' as text;
+
+$aggregation-distance-desktop: 40px;
+$message-bubble-border-radius: 8px;
+
+.message-layout {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  position: relative;
+
+  &--self {
+    // flex-direction: row-reverse;
+  }
+
+  &--not-last {
+    padding-left: $aggregation-distance-desktop;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    flex: 1 1 auto;
+
+    &--self {
+    }
+
+    &__middle {
+      flex-direction: row;
+      display: flex;
+      gap: 4px;
+      position: relative;
+      align-items: flex-start;
+
+      &__bubble {
+        flex: 1 1 auto;
+      }
+    }
+  }
+
+  &__avatar {
+    flex: 0 0 auto;
+  }
+
+  &__nick {
+    font-size: 12px;
+    // min-width: min(70%, 200px);
+
+    color: #7cd7f1;
+
+    @include text.text-ellipsis;
+  }
+
+  &__bubble {
+    background-color: yellow;
+    display: flex;
+    flex: 1 1 auto;
+    &--last {
+      border-bottom-left-radius: $message-bubble-border-radius;
+    }
+
+    &--last--self {
+      border-bottom-right-radius: $message-bubble-border-radius;
+    }
+  }
+
+  &__meta {
+    flex: 0 0 auto;
+    align-self: flex-end;
+  }
+
+  &__failed {
+    color: #ff584c;
+    margin-left: 8px;
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="cs('message-meta', props.class)"
+    :style="props.style"
+  >
+    <span
+      v-if="props.isShowTime"
+      class="message-meta__time"
+    >{{ getTimeStampAuto(props.timestamp) }}</span>
+    <div
+      v-if="props.status && props.isShowSendStatus"
+      class="message-meta__status"
+    >
+      <MessageStatusIcon :status="props.status" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cs from 'classnames';
+import { getTimeStampAuto } from '../../../../../utils/time';
+import MessageStatusIcon from './MessageStatusIcon.vue';
+
+interface IMessageMetaProps {
+  timestamp: number;
+  /**
+   * - unSend: not sent
+   * - success: sent successfully
+   * - fail: sending failed
+   */
+  isShowSendStatus?: boolean;
+  isShowReadStatus?: boolean;
+  isShowTime?: boolean;
+  status?: string;
+  class?: string;
+  style?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<IMessageMetaProps>(), {
+  isShowSendStatus: false,
+  isShowReadStatus: false,
+  isShowTime: false,
+  status: undefined,
+  class: undefined,
+  style: undefined,
+});
+</script>
+
+<style lang="scss" scoped>
+.message-meta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+
+  .time {
+    line-height: 1;
+  }
+
+  &__status {
+    color: #2a7bfa;
+  }
+}
+</style>

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/MessageStatusIcon.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
+
+defineProps<{
+  status: string;
+}>();
+</script>
+
+<template>
+  <IconLoading
+    v-if="status === 'unSend'"
+    class="message-meta__status--unSend"
+    :size="16"
+  />
+  <IconSuccess
+    v-else-if="status === 'success'"
+    name="&#xe60a;"
+    :size="16"
+  />
+</template>
+
+<style lang="scss" scoped>
+.message-meta__status--unSend {
+  animation: rotate-infinite 1s linear infinite;
+}
+
+@keyframes rotate-infinite {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/index.ts

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

package/src/components/BarrageList/Message/MessageLayout/index.ts

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