tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/src/components/AudioSettingPanel/index.vue

@@ -4,11 +4,12 @@
       <div class="section-title">
         {{ t('Microphone') }}
       </div>
-      <div class="row">
+      <div class="row" v-if="microphoneList.length > 0">
         <span class="label">{{ t('Select device') }}</span>
         <TUISelect
           v-model="currentMicrophoneId"
           class="select"
+          :placeholder="t('Unrecognized device')"
         >
           <TUIOption
             v-for="item in microphoneList"
@@ -35,11 +36,12 @@
       <div class="section-title">
         {{ t('Speaker') }}
       </div>
-      <div class="row">
+      <div class="row" v-if="speakerList.length > 0">
         <span class="label">{{ t('Select device') }}</span>
         <TUISelect
           v-model="currentSpeakerId"
           class="select"
+          :placeholder="t('Unrecognized device')"
         >
           <TUIOption
             v-for="item in speakerList"

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -38,7 +38,7 @@ import { ref, withDefaults, defineProps, defineEmits, computed, nextTick } from
 import { useUIKit, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
 import { useLoginState } from '../../states/LoginState';
-import { useMessageInputState } from '../../states/MessageInputState';
+import { useMessageInputState } from './MessageInputState';
 import BarrageInput from './BarrageInput.vue';
 import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
 import { ERROR_MESSAGE } from './constants';

package/src/components/BarrageInput/EmojiPicker/EmojiPicker.vue

@@ -34,7 +34,7 @@ import { useUIKit, IconEmoji } from '@tencentcloud/uikit-base-component-vue3';
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
 import { emojiUrlMap, emojiBaseUrl } from '../../../constants/emoji';
 import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';
-import { useMessageInputState, MessageContentType } from '../../../states/MessageInputState';
+import { useMessageInputState, MessageContentType } from '../MessageInputState';
 import styles from './EmojiPicker.module.scss';
 
 const props = defineProps<{

package/src/components/BarrageInput/MessageInputState.ts

@@ -0,0 +1,160 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { useBarrageState } from '../../states/BarrageState';
+import { transformTextWithEmojiNameToKey } from '../../utils';
+import { MessageContentType } from './type';
+import { convertInputContentToEditorNode } from './utils';
+import type { InputContent } from './type';
+import type { Editor } from '@tiptap/vue-3';
+
+/**
+ * Message Input Store
+ *
+ * This store manages the state and operations related to the chat message input, including:
+ * - Raw input value (text or structured content)
+ * - Editor instance management
+ * - Content manipulation (insertion, updating, etc.)
+ * - Message sending functionality
+ */
+interface MessageInputState {
+  inputRawValue: Ref<string | InputContent[]>;
+}
+
+interface MessageInputAction {
+  updateRawValue: (value: string | InputContent[]) => void;
+  setEditorInstance: (editor: Editor | null) => void;
+  setContent: (value: string | InputContent[]) => void;
+  insertContent: (value: string | InputContent[], focus?: boolean) => void;
+  focusEditor: () => void;
+  blurEditor: () => void;
+  sendMessage: (msg?: string | InputContent[]) => void;
+}
+
+const { sendTextMessage } = useBarrageState();
+
+const editor = ref<Editor | null>(null);
+const inputRawValue = ref<string | InputContent[]>('');
+
+/* =====================================================
+ * MessageInputActions begin
+ * ===================================================== */
+const updateRawValue = (value: string | InputContent[]) => {
+  if (typeof value !== 'string' && !Array.isArray(value)) {
+    console.warn('Invalid input type for updateRawValue');
+    return;
+  }
+  if (typeof value === 'string') {
+    inputRawValue.value = value.trim();
+  } else {
+    inputRawValue.value = value?.length > 0 ? value : '';
+  }
+};
+
+const setEditorInstance = (instance: Editor | null) => {
+  if (editor.value) {
+    editor.value.destroy();
+  }
+  editor.value = instance;
+};
+
+const setContent = (content: string | InputContent[]) => {
+  if (!editor.value) {
+    return;
+  }
+  if (typeof content === 'string') {
+    editor.value.commands.setContent(content, true);
+  } else {
+    const editorContent = content.map(convertInputContentToEditorNode);
+    editor.value.commands.setContent(editorContent, true);
+  }
+  editor.value.commands.focus();
+};
+
+const insertContent = (content: string | InputContent[], focus = true) => {
+  if (!editor.value) {
+    return;
+  }
+  if (typeof content === 'string') {
+    editor.value.commands.insertContent(content);
+  } else {
+    const editorContent = content.map(convertInputContentToEditorNode);
+    editor.value.commands.insertContent(editorContent);
+  }
+  if (focus) {
+    editor.value.commands.focus();
+  }
+};
+
+const focusEditor = () => {
+  editor.value?.commands.focus();
+};
+
+const blurEditor = () => {
+  editor.value?.commands.blur();
+};
+
+const sendMessage = async (msg?: string | InputContent[]) => {
+  const messageToSend = msg ?? inputRawValue.value;
+  if (!messageToSend) {
+    return;
+  }
+
+  if (typeof messageToSend === 'string') {
+    sendTextMessage({
+      text: transformTextWithEmojiNameToKey(messageToSend),
+    });
+    return;
+  }
+
+  let mergedText = '';
+  const sendAccumulatedText = async () => {
+    if (mergedText) {
+      await sendTextMessage({
+        text: transformTextWithEmojiNameToKey(mergedText),
+      });
+      mergedText = '';
+    }
+  };
+
+  const messageProcessors = {
+    [MessageContentType.TEXT]: (content: string) => content,
+    [MessageContentType.EMOJI]: (content: { url: string; key: string; text: string }) => content.key,
+  };
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const item of messageToSend) {
+    if (!item.type || !messageProcessors[item.type]) {
+      throw new Error(`Invalid message type: ${item.type}`);
+    }
+
+    const processor = messageProcessors[item.type] as (content: never) => string;
+    // eslint-disable-next-line no-await-in-loop
+    const result = await processor(item.content as never);
+
+    if ([MessageContentType.TEXT, MessageContentType.EMOJI].includes(item.type)) {
+      mergedText += result;
+    }
+  }
+
+  await sendAccumulatedText();
+};
+
+/* =====================================================
+ * MessageInputActions end
+ * ===================================================== */
+
+function useMessageInputState(): MessageInputState & MessageInputAction {
+  return {
+    inputRawValue,
+    updateRawValue,
+    setEditorInstance,
+    setContent,
+    insertContent,
+    focusEditor,
+    blurEditor,
+    sendMessage,
+  };
+}
+
+export { useMessageInputState, MessageContentType };
+export type { InputContent };

package/src/components/BarrageInput/TextEditor/TextEditor.vue

@@ -24,7 +24,7 @@
 import { ref, onMounted, onUnmounted, computed, watch, withDefaults, defineProps, nextTick, defineEmits } from 'vue';
 import { TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useConversationListState } from '../../../states/ConversationListState';
-import { useMessageInputState } from '../../../states/MessageInputState';
+import { useMessageInputState } from '../MessageInputState';
 import { ERROR_MESSAGE } from '../constants';
 import { createEditor } from './EditorCore';
 import styles from './TextEditor.module.scss';

package/src/components/BarrageInput/type.ts

@@ -0,0 +1,26 @@
+enum MessageContentType {
+  TEXT = 'text',
+  EMOJI = 'emoji',
+}
+
+type ContentTypeMap = {
+  [key in MessageContentType]: key extends MessageContentType.TEXT
+  ? string
+  : key extends MessageContentType.EMOJI
+  ? { url: string; key: string; text: string }
+  : never;
+};
+
+interface InputContent<T extends MessageContentType = MessageContentType> {
+  type: T;
+  content: ContentTypeMap[T];
+}
+
+export {
+  MessageContentType,
+};
+
+export type {
+  ContentTypeMap,
+  InputContent,
+};

package/src/components/BarrageInput/utils.ts

@@ -0,0 +1,45 @@
+import { MessageContentType } from './type';
+import type { InputContent } from './type';
+
+function convertInputContentToEditorNode(item: InputContent) {
+  switch (item.type) {
+    case MessageContentType.TEXT:
+      return {
+        type: 'text',
+        text: item.content,
+      };
+    case MessageContentType.IMAGE: {
+      const imageFile = item.content as File;
+      const imageUrl = URL.createObjectURL(imageFile);
+      return {
+        type: MessageContentType.IMAGE,
+        attrs: {
+          src: imageUrl,
+          alt: imageFile?.name,
+          fileData: imageFile,
+          title: imageFile?.name,
+        },
+      };
+    }
+    case MessageContentType.EMOJI: {
+      const emoticonContent = item.content as { url: string; key: string; text: string };
+      return {
+        type: MessageContentType.EMOJI,
+        attrs: {
+          src: emoticonContent.url,
+          alt: emoticonContent.key,
+          title: emoticonContent.text,
+        },
+      };
+    }
+    default:
+      return {
+        type: 'text',
+        text: String(item.content),
+      };
+  }
+}
+
+export {
+  convertInputContentToEditorNode,
+};

package/src/components/BarrageList/BarrageList.vue

@@ -2,34 +2,21 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, nextTick, watch, provide, useSlots, withDefaults, defineProps } from 'vue';
 import type { Component, CSSProperties } from 'vue';
-import { ObserverView } from '../../baseComp/ObserverView';
-import { throttle } from '../../utils/lodash';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useScroll } from '../../hooks/useScroll';
-import { useBarrageListState } from '../../states/BarrageListState';
+import { useLiveListState } from '../../states/LiveListState';
+import { useLoginState } from '../../states/LoginState';
+import { throttle } from '../../utils/lodash';
+import { useBarrageListState } from './BarrageListState';
+import UserActionMenu from './ClickAction/UserActionMenu.vue';
 import { Message as DefaultMessage } from './Message';
-import { MessageForward } from './MessageForward';
 import { MessageListContextSymbol } from './MessageListContext';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import UserActionMenu from './ClickAction/UserActionMenu.vue';
-import { useLoginState } from '../../states/LoginState';
-import { useLiveState } from '../../states/LiveState';
+import type { Barrage } from '../../states/BarrageState';
 
 const { t } = useUIKit();
 
 interface IMessageListProps {
-  /** message actions e.g. recall, delete, etc. */
-  // messageActionList?: IMessageAction[] | undefined;
-  /** max time between message group */
-  messageAggregationTime?: number | undefined;
-  /** custom filter function */
-  filter?: ((message: IMessageModel) => boolean) | undefined;
-  /** custom message component */
   Message?: Component | undefined;
-  /** custom message timeline component */
-  MessageTimeDivider?: Component | undefined;
-  /** custom local notification message component */
-  LocalNoticeMessage?: Component | undefined;
   containerStyle?: CSSProperties | undefined;
   itemStyle?: CSSProperties | undefined;
   height?: string;
@@ -37,25 +24,27 @@ interface IMessageListProps {
 }
 
 const props = withDefaults(defineProps<IMessageListProps>(), {
-  /** props */
-  filter: undefined,
-  enableReadReceipt: false,
-  messageAggregationTime: 5 * 60,
-  /** custom components */
   Message: undefined,
-  MessageTimeDivider: undefined,
-  LocalNoticeMessage: undefined,
 });
-
+const scrollContainer = ref<HTMLElement | null>(null);
 const slots = useSlots();
 const { loginUserInfo } = useLoginState();
-const { currentLive } = useLiveState();
-const currentMessage = ref<IMessageModel>({} as IMessageModel);
+const { currentLive } = useLiveListState();
+const currentMessage = ref<Barrage>();
 const showActionMenu = ref<boolean>(false);
 const actionMenuStyle = ref<CSSProperties>({});
 
 const nickClickTarget = ref<HTMLElement | null>(null);
 
+const autoScrollThreshold = 150;
+const isFinishFirstRender = ref<boolean>(false);
+const isDisableAutoScroll = ref<boolean>(false);
+const distanceToBottom = ref<number>(0);
+
+const { messageList, messageGroupTip } = useBarrageListState();
+
+const { scrollToBottom } = useScroll();
+
 // Calculate action menu position to prevent overflow beyond scrollContainer boundaries
 const calculateActionMenuPosition = (targetRect: DOMRect) => {
   if (!scrollContainer.value) {
@@ -96,10 +85,10 @@ const calculateActionMenuPosition = (targetRect: DOMRect) => {
 
 provide(MessageListContextSymbol, {
   slots,
-  nickClick: (payload: { message: IMessageModel; event: MouseEvent }) => {
-    const { message, event } = payload;
+  nickClick: (data: { message: Barrage; event: MouseEvent }) => {
+    const { message, event } = data;
     const isOwner = loginUserInfo.value?.userId === currentLive.value?.liveOwner.userId;
-    const isMe = loginUserInfo.value?.userId === message.from;
+    const isMe = loginUserInfo.value?.userId === message.sender.userId;
     if (!isOwner || isMe) {
       return;
     }
@@ -111,25 +100,14 @@ provide(MessageListContextSymbol, {
   },
 });
 
-const autoScrollThreshold = 150;
-const isFinishFirstRender = ref<boolean>(false);
-const isDisableAutoScroll = ref<boolean>(false);
-const distanceToBottom = ref<number>(0);
-const isLoadingHistory = ref<boolean>(false);
-const scrollContainer = ref<HTMLElement | null>(null);
-
-const { messageGroupTip, messageList, loadMoreMessage, currentConversationID } = useBarrageListState();
-
-const { scrollToBottom } = useScroll();
-
 // Monitor scroll events
 const handleScroll = throttle(() => {
   if (!scrollContainer.value) {
     return;
   }
 
-  distanceToBottom.value =
-    scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
+  distanceToBottom.value
+    = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
 
   if (distanceToBottom.value > autoScrollThreshold) {
     isDisableAutoScroll.value = true;
@@ -147,52 +125,15 @@ const initializeMessageList = async () => {
   isDisableAutoScroll.value = false;
 };
 
-// Load more history messages
-const loadMoreHistory = async () => {
-  // Skip if initial loading or already loading
-  if (!isFinishFirstRender.value || isLoadingHistory.value || !messageList.value?.length) {
-    return;
-  }
-
-  isLoadingHistory.value = true;
-
-  // Record current distance from bottom
-  if (!scrollContainer.value) {
-    isLoadingHistory.value = false;
-    return;
-  }
-
-  // Calculate distance from bottom before loading
-  const distanceFromBottom =
-    scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
-
-  // Load more messages
-  await loadMoreMessage();
-
-  // Wait for DOM update
-  await nextTick();
-
-  // Restore scroll position to maintain the same distance from bottom
-  if (scrollContainer.value) {
-    const newScrollTop = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight - distanceFromBottom;
-
-    // Ensure scroll position is within valid range
-    scrollContainer.value.scrollTop = Math.max(
-      0,
-      Math.min(scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight, newScrollTop)
-    );
-  }
-
-  isLoadingHistory.value = false;
-};
-
-watch(currentConversationID, () => {
+watch(() => currentLive.value?.liveId, () => {
   initializeMessageList();
 });
 
-// Monitor message list changes
-watch(messageList, (newMessages, oldMessages) => {
-  if (oldMessages === undefined && newMessages && !isFinishFirstRender.value) {
+watch(() => messageList.value?.length, (length) => {
+  const newMessage = messageList.value[length - 1];
+  const oldMessage = messageList.value[length - 2];
+
+  if (oldMessage === undefined && newMessage && !isFinishFirstRender.value) {
     // Switch to a new conversation
     nextTick(() => {
       scrollToBottom({ behavior: 'instant' });
@@ -200,15 +141,13 @@ watch(messageList, (newMessages, oldMessages) => {
     });
   }
 
-  if (!oldMessages || !newMessages || !newMessages.length) {
+  if (!oldMessage || !newMessage || !length) {
     return;
   }
 
-  const newLastMessage = newMessages[newMessages.length - 1];
-  const oldLastMessage = oldMessages[oldMessages.length - 1];
-  if (newLastMessage?.ID !== oldLastMessage?.ID) {
-    const shouldAutoScroll =
-      newLastMessage.flow === 'out' || (!isDisableAutoScroll.value && distanceToBottom.value < autoScrollThreshold);
+  if (newMessage?.sequence !== oldMessage?.sequence) {
+    const shouldAutoScroll
+      = newMessage.sender.userId === loginUserInfo.value?.userId || (!isDisableAutoScroll.value && distanceToBottom.value < autoScrollThreshold);
     if (shouldAutoScroll) {
       scrollToBottom({ behavior: 'smooth' });
     } else {
@@ -233,41 +172,40 @@ onUnmounted(() => {
 
 <template>
   <div class="message-list" :style="{ height: props.height, ...props.style }">
-    <div id="messageScrollList" ref="scrollContainer" class="message-list-container" :style="props.containerStyle">
-      <ObserverView
-        root="#messageScrollList"
-        :rootMargin="'50px 0px 0px 0px'"
-        :threshold="0.1"
-        @on-show="loadMoreHistory"
-      >
-        <div id="loadMore"></div>
-      </ObserverView>
-
+    <div
+      id="messageScrollList"
+      ref="scrollContainer"
+      class="message-list-container"
+      :style="props.containerStyle"
+    >
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
+        <template v-for="message in messageList" :key="message.sequence + message.timestampInSecond">
           <component
-            :style="props.itemStyle"
             :is="props.Message || DefaultMessage"
+            :style="props.itemStyle"
             :message="message"
             :is-last-in-chunk="true"
           />
         </template>
       </div>
-      <div class="empty-message" v-if="!messageList?.length">{{ t('No message yet') }}</div>
+      <div v-if="!messageList?.length" class="empty-message">
+        {{ t('No message yet') }}
+      </div>
     </div>
-    <div class="message-group-tip" v-if="messageGroupTip">
-      <div class="message-group-tip-name">{{ messageGroupTip?.nameCard || messageGroupTip?.userName || messageGroupTip?.userId }}</div>
+    <div v-if="messageGroupTip" class="message-group-tip">
+      <div class="message-group-tip-name">
+        {{ messageGroupTip?.nameCard || messageGroupTip?.userName || messageGroupTip?.userId }}
+      </div>
       <div class="message-group-tip-action">
         {{ messageGroupTip?.displayAction === 'enter' ? t('Come in') : t('Leave') }}
       </div>
     </div>
   </div>
-  <MessageForward />
   <UserActionMenu
-    v-if="showActionMenu"
-    :user-id="currentMessage.from"
-    :user-name="currentMessage.nameCard || currentMessage.nick || currentMessage.from"
-    :avatar-url="currentMessage.avatar"
+    v-if="showActionMenu && currentMessage"
+    :user-id="currentMessage?.sender.userId"
+    :user-name="currentMessage?.sender.nameCard || currentMessage?.sender.userName || currentMessage?.sender.userId"
+    :avatar-url="currentMessage?.sender.avatarUrl"
     :style="actionMenuStyle"
     :click-target="nickClickTarget"
     @close="showActionMenu = false"
@@ -286,21 +224,25 @@ onUnmounted(() => {
   overflow: hidden;
   background-color: var(--bg-color-operate);
 }
+
 .message-list-container {
   flex: 1;
   height: 100%;
   padding: 10px;
   @include scrollbar.scrollbar-thin();
 }
+
 .message-chunk--container {
   margin-top: 10px;
 }
+
 .message-chunk {
   display: flex;
   flex-direction: column;
   gap: 8px;
   height: 0;
 }
+
 .empty-message {
   text-align: center;
   color: var(--text-color-secondary);
@@ -310,12 +252,14 @@ onUnmounted(() => {
   align-items: center;
   height: 100%;
 }
+
 .message-action-mask {
   position: absolute;
   width: 100%;
   height: 100%;
   background: transparent;
 }
+
 .message-action-container {
   position: absolute;
 }
@@ -367,7 +311,7 @@ onUnmounted(() => {
   .message-group-tip-name {
     color: var(--uikit-color-theme-8);
   }
-  .message-group-tip-action {
-  }
+
+  .message-group-tip-action {}
 }
 </style>