tuikit-atomicx-vue3 0.1.0

package/src/hooks/useMessageActions.ts

@@ -0,0 +1,161 @@
+import type { Component } from 'vue';
+import { computed } from 'vue';
+import ChatEngine from '@tencentcloud/chat-uikit-engine';
+import {
+  IconCopy,
+  IconMsgRevoke,
+  IconMsgQuote,
+  IconMsgForward,
+  IconMsgDel,
+  TUIToast,
+  i18next,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { useMessageActionState } from '../states/MessageActionState';
+import { isCallMessage } from '../utils/call';
+import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+
+/**
+ * Message action interface
+ */
+interface MessageAction {
+  /** Unique action identifier */
+  key: string;
+  /** Action display label */
+  label: string;
+  /** Action icon component */
+  icon?: Component | string;
+  /** Action click handler function */
+  onClick?: (message: MessageModel) => void;
+  /** Action visibility control */
+  visible?: boolean | ((message: MessageModel) => boolean);
+  /** Custom component */
+  component?: Component;
+  /** Custom class name */
+  className?: string;
+  /** Custom style */
+  style?: Record<string, any>;
+}
+
+/**
+ * Default message action configuration
+ */
+const DEFAULT_ACTIONS: Record<string, MessageAction> = {
+  copy: {
+    key: 'copy',
+    label: 'Copy',
+    visible: (message: MessageModel) => message.type === ChatEngine.TYPES.MSG_TEXT,
+    icon: IconCopy,
+  },
+  recall: {
+    key: 'recall',
+    label: 'Recall',
+    visible: (message: MessageModel) =>
+      !isCallMessage(message) && message.flow === 'out'
+      && message.status === 'success'
+      && Date.now() - message.time * 1000 < 60 * 2 * 1000,
+    icon: IconMsgRevoke,
+  },
+  quote: {
+    key: 'quote',
+    label: 'Quote',
+    visible: (message: MessageModel) => !isCallMessage(message),
+    icon: IconMsgQuote,
+  },
+  forward: {
+    key: 'forward',
+    label: 'Forward',
+    visible: (message: MessageModel) => !isCallMessage(message),
+    icon: IconMsgForward,
+  },
+  delete: {
+    key: 'delete',
+    label: 'Delete',
+    icon: IconMsgDel,
+    visible: true,
+    style: {
+      color: 'var(--text-color-error)',
+    },
+  },
+};
+
+/**
+ * Default action order
+ */
+const DEFAULT_ACTION_ORDER: Array<MessageAction['key']> = ['copy', 'recall', 'quote', 'forward', 'delete'];
+
+/**
+ * Message Actions Hook
+ * Used to get message action list, supports custom actions
+ * @param propsActionList - Custom action list, can be an array of action keys or action objects
+ * @returns Processed message action list
+ */
+function useMessageActions(propsActionList?: Array<MessageAction['key'] | MessageAction>): MessageAction[] {
+  const state = useMessageActionState();
+
+  // Default action handlers
+  const defaultActionHandlers: Record<string, (message: MessageModel) => void> = {
+    copy: (message) => {
+      state.copyTextMessage(message)
+        .then(() => TUIToast.success({
+          message: i18next.t('TUIChat.Copied'),
+        }))
+        .catch(() => TUIToast.error({
+          message: i18next.t('TUIChat.Copy Failed'),
+        }));
+    },
+    recall: (message) => {
+      state.recallMessage(message)
+        .then(() => TUIToast.success({
+          message: i18next.t('TUIChat.Recall Succeed'),
+        }))
+        .catch(err => TUIToast.error({
+          message: err.code === 20016 ? i18next.t('TUIChat.Recall Time Limit Exceeded') : i18next.t('TUIChat.Recall Failed'),
+        }));
+    },
+    quote: state.quoteMessage,
+    forward: (message) => {
+      state.setForwardMessageIDList([message.ID]);
+      state.setIsForwardMessageSelectionDone(true);
+    },
+    delete: (message) => {
+      state.deleteMessage(message)
+        .then(() => TUIToast.success({
+          message: i18next.t('TUIChat.Deleted'),
+        }))
+        .catch(() => TUIToast.error({
+          message: i18next.t('TUIChat.Delete Failed'),
+        }));
+    },
+  };
+
+  // Parse props list
+  const resolvedActions = (propsActionList || DEFAULT_ACTION_ORDER).map((propsAction): MessageAction => {
+    // If props is a string, use default configuration
+    if (typeof propsAction === 'string') {
+      const defaultConfig = DEFAULT_ACTIONS[propsAction];
+      return {
+        ...defaultConfig,
+        onClick: defaultActionHandlers[propsAction],
+      };
+    }
+
+    // If props is an object, override default configuration
+    const defaultActionConfig = DEFAULT_ACTIONS[propsAction.key] || {};
+    return {
+      ...defaultActionConfig,
+      ...propsAction,
+      onClick: propsAction.onClick || defaultActionHandlers[propsAction.key],
+    };
+  });
+
+  // Use computed instead of useMemo to achieve the same optimization effect
+  return computed(() => resolvedActions).value;
+}
+
+export {
+  useMessageActions,
+};
+
+export type {
+  MessageAction,
+};

package/src/hooks/useReadReceipt/useReadReceipt.ts

@@ -0,0 +1,223 @@
+import { onMounted, onUnmounted, watch } from 'vue';
+import { TUIChatService, TUIStore } from '@tencentcloud/chat-uikit-engine';
+import { throttle } from '../../utils/lodash';
+import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface UseReadReceiptOptions {
+  /**
+   * Whether to enable read receipt feature
+   */
+  enabled: boolean;
+
+  /**
+   * Selector or DOM reference for the message list container
+   */
+  containerSelector: string | HTMLElement;
+
+  /**
+   * Selector for message elements, default is '[data-message-id]'
+   */
+  messageSelector?: string;
+
+  /**
+   * Intersection ratio threshold, default is 0.5 (50%)
+   */
+  intersectionThreshold?: number;
+
+  /**
+   * Throttle delay for batch sending, default is 300ms
+   */
+  delay?: number;
+
+  /**
+   * Function to extract message ID from DOM element
+   */
+  getMessageIDFromDom: (dom: Element) => string;
+
+  /**
+   * Function to decide if a message should send read receipt
+   */
+  shouldSendReadReceipt?: (message: IMessageModel) => boolean;
+}
+
+export function useReadReceipt({
+  enabled,
+  containerSelector,
+  messageSelector = '[data-message-id]',
+  getMessageIDFromDom,
+  shouldSendReadReceipt = message => message.flow === 'in',
+  intersectionThreshold = 0.5,
+  delay = 1000,
+}: UseReadReceiptOptions) {
+  // IntersectionObserver instance - 使用普通变量，不需要响应式
+  let observer: IntersectionObserver | null = null;
+  // Message objects pending to send read receipt - 使用普通变量，不需要响应式
+  const pendingReadReceiptMessages = new Map<string, IMessageModel>();
+  // Message IDs that have already been processed - 使用普通变量，不需要响应式
+  const processedMessageIds = new Set<string>();
+
+  // Throttled function to batch send read receipts
+  const sendBatchReadReceipts = throttle(() => {
+    if (pendingReadReceiptMessages.size === 0) {
+      return;
+    }
+    const messagesToSend = Array.from(pendingReadReceiptMessages.values());
+    TUIChatService.sendMessageReadReceipt(messagesToSend)
+      .then(() => {
+        // Successfully sent read receipts
+      })
+      .catch(() => {
+        // Failed to send read receipts
+      });
+    pendingReadReceiptMessages.clear();
+  }, delay, { leading: false, trailing: true });
+
+  // Core logic to check and process a message for read receipt
+  const checkMessageAndSendReadReceipt = (messageID: string) => {
+    if (processedMessageIds.has(messageID)) {
+      return false;
+    }
+    const message = TUIStore.getMessageModel(messageID);
+    if (!message) {
+      return false;
+    }
+    if (shouldSendReadReceipt(message)) {
+      pendingReadReceiptMessages.set(messageID, message);
+      processedMessageIds.add(messageID);
+      sendBatchReadReceipts();
+      return true;
+    }
+    return false;
+  };
+
+  // Initialize IntersectionObserver
+  const initializeObserver = () => {
+    if (!enabled) {
+      return;
+    }
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && entry.intersectionRatio >= intersectionThreshold) {
+            const messageID = getMessageIDFromDom(entry.target);
+            if (messageID) {
+              checkMessageAndSendReadReceipt(messageID);
+            }
+            observer?.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: intersectionThreshold,
+        root: typeof containerSelector === 'string'
+          ? document.querySelector(containerSelector)
+          : containerSelector,
+      },
+    );
+  };
+
+  // Cleanup observer
+  const cleanupObserver = () => {
+    observer?.disconnect();
+    // ensure all pending read receipts are sent
+    sendBatchReadReceipts.flush();
+  };
+
+  // Watch for changes in dependencies and reinitialize observer
+  watch(
+    [() => enabled, () => containerSelector, () => intersectionThreshold],
+    () => {
+      cleanupObserver();
+      initializeObserver();
+    },
+    { immediate: true },
+  );
+
+  // Observe new messages in the container
+  const observeMessageList = () => {
+    if (!observer || !enabled) {
+      return;
+    }
+    const container = typeof containerSelector === 'string'
+      ? document.querySelector(containerSelector)
+      : containerSelector;
+    if (!container) {
+      return;
+    }
+    const messageElements = container.querySelectorAll(messageSelector);
+    messageElements.forEach((element) => {
+      const messageID = getMessageIDFromDom(element);
+      if (!messageID) {
+        return;
+      }
+      if (processedMessageIds.has(messageID)) {
+        return;
+      }
+      const message = TUIStore.getMessageModel(messageID);
+      if (message && shouldSendReadReceipt(message)) {
+        observer?.observe(element);
+      }
+    });
+  };
+
+  // Manually mark visible messages as read (for initial load, etc.)
+  const manuallyMarkVisibleMessagesAsRead = () => {
+    if (!enabled) {
+      return;
+    }
+    const container = typeof containerSelector === 'string'
+      ? document.querySelector(containerSelector)
+      : containerSelector;
+    if (!container) {
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const messageElements = container.querySelectorAll(messageSelector);
+    messageElements.forEach((element) => {
+      const messageID = getMessageIDFromDom(element);
+      if (!messageID) {
+        return;
+      }
+      if (processedMessageIds.has(messageID)) {
+        return;
+      }
+      const elementRect = element.getBoundingClientRect();
+      const isVisible
+        = elementRect.top < containerRect.bottom
+          && elementRect.bottom > containerRect.top
+          && elementRect.height > 0;
+      if (isVisible) {
+        checkMessageAndSendReadReceipt(messageID);
+      }
+    });
+  };
+
+  // Initialize observer on mount
+  onMounted(() => {
+    initializeObserver();
+  });
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    cleanupObserver();
+  });
+
+  // Public API
+  return {
+    /**
+     * Observe new messages, should be called when message list updates
+     */
+    observeMessageList,
+    /**
+     * Manually mark visible messages as read, e.g. after initial load
+     */
+    manuallyMarkVisibleMessagesAsRead,
+    /**
+     * Reset processed message records, e.g. when switching conversation
+     */
+    resetProcessedMessages: () => {
+      processedMessageIds.clear();
+      pendingReadReceiptMessages.clear();
+    },
+  };
+}

package/src/hooks/useRoomActions/index.ts

@@ -0,0 +1,18 @@
+import useRoomAudioAction from './useRoomAudioAction';
+import useRoomVideoAction from './useRoomVideoAction';
+import useRoomScreenAction from './useRoomScreenAction';
+import { ActionType, RoomAction } from '../../types';
+export default function useRoomActions(options?: {
+  actionList: RoomAction[];
+}): ActionType<RoomAction>[] {
+  const roomActionObj = {
+    [RoomAction.AudioAction]: useRoomAudioAction(),
+    [RoomAction.VideoAction]: useRoomVideoAction(),
+    [RoomAction.ScreenAction]: useRoomScreenAction(),
+  };
+
+  if (options && options.actionList && options.actionList.length > 0) {
+    return options.actionList.map(action => roomActionObj[action]);
+  }
+  return Object.values(roomActionObj);
+}

package/src/hooks/useRoomActions/useRoomAudioAction.ts

@@ -0,0 +1,68 @@
+import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-js';
+import { RoomAction } from '../../types';
+import { useI18n } from '../../locales';
+import TUIMessageBox from '../../baseComp/MessageBox';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomEngine } from '../useRoomEngine';
+// import { MESSAGE_DURATION } from '../../../../constants/message';
+import { reactive, computed, defineComponent } from 'vue';
+import { useRoomState } from '../../states/RoomState';
+
+const { currentRoom } = useRoomState();
+
+export default function useRoomAudioAction() {
+  const { t } = useI18n();
+  const roomEngine = useRoomEngine();
+  let stateForAllAudio = false;
+
+  // todo: 测试在点击确定期间有其他管理员改变状态的 case
+
+  function toggleRoomAudio() {
+    stateForAllAudio = !currentRoom.value?.isMicrophoneDisableForAllUser;
+    TUIMessageBox({
+      title: currentRoom.value?.isMicrophoneDisableForAllUser
+        ? t('Enable all audios')
+        : t('All current and new members will be muted'),
+      message: currentRoom.value?.isMicrophoneDisableForAllUser
+        ? t('After unlocking, users can freely turn on the microphone')
+        : t('Members will not be able to open the microphone'),
+      confirmButtonText: t('Confirm'),
+      cancelButtonText: t('Cancel'),
+      callback: async action => {
+        if (action === 'confirm') {
+          doToggleRoomAudio();
+        }
+      },
+    });
+  }
+
+  async function doToggleRoomAudio() {
+    if (currentRoom.value?.isMicrophoneDisableForAllUser === stateForAllAudio) {
+      const tipMessage = stateForAllAudio
+        ? t('All audios disabled')
+        : t('All audios enabled');
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: tipMessage,
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+      return;
+    }
+    await roomEngine.instance?.disableDeviceForAllUserByAdmin({
+      isDisable: stateForAllAudio,
+      device: TUIMediaDevice.kMicrophone,
+    });
+  }
+
+  const roomAudioAction = reactive({
+    key: RoomAction.AudioAction,
+    icon: defineComponent({}),
+    label: computed(() =>
+      currentRoom.value?.isMicrophoneDisableForAllUser
+        ? t('Lift all mute')
+        : t('All mute')
+    ),
+    handler: toggleRoomAudio,
+  });
+  return roomAudioAction;
+}

package/src/hooks/useRoomActions/useRoomScreenAction.ts

@@ -0,0 +1,68 @@
+import { computed, reactive } from 'vue';
+import { TUIRole, TUIMediaDevice } from '@tencentcloud/tuiroom-engine-js';
+import { IconAllMembersShareScreen, IconHostShareScreen } from '@tencentcloud/uikit-base-component-vue3';
+import { ActionType, RoomAction } from '../../types';
+import { useI18n } from '../../locales';
+// import TUIMessageBox from '@/core/components/common/base/MessageBox';
+import useRoomEngine from '../useRoomEngine';
+import useUserState from '../../states/UserState/index';
+import { useRoomState } from '../../states/RoomState';
+
+const { userWithScreenOn } = useUserState()
+const { currentRoom } = useRoomState();
+
+export default function useRoomScreenAction(): ActionType<RoomAction> {
+  const { t } = useI18n();
+  const roomEngine = useRoomEngine();
+  let stateForScreenShare = false;
+  async function toggleAllScreenShare() {
+    await roomEngine.instance?.disableDeviceForAllUserByAdmin({
+      isDisable: stateForScreenShare,
+      device: TUIMediaDevice.kScreen,
+    });
+  }
+
+  function toggleRoomScreen() {
+    stateForScreenShare = !currentRoom.value?.isScreenShareDisableForAllUser;
+    if (!userWithScreenOn.value || userWithScreenOn.value.userRole !== TUIRole.kGeneralUser) {
+      toggleAllScreenShare();
+      return;
+    }
+    TUIMessageBox({
+      title: t(
+        'Is it turned on that only the host/admin can share the screen?'
+      ),
+      message: t(
+        "Other member is sharing the screen is now, the member's sharing will be terminated after you turning on"
+      ),
+      confirmButtonText: t('Confirm'),
+      cancelButtonText: t('Cancel'),
+      callback: async action => {
+        if (action === 'confirm') {
+          await roomEngine.instance?.closeRemoteDeviceByAdmin({
+            userId: userWithScreenOn.value?.userId as string,
+            device: TUIMediaDevice.kScreen,
+          });
+          toggleAllScreenShare();
+        }
+      },
+    });
+  }
+
+  const roomScreenAction = reactive({
+    key: RoomAction.ScreenAction,
+    label: computed(() =>
+      currentRoom.value?.isScreenShareDisableForAllUser
+        ? t('All members can share screen')
+        : t('Screen sharing for host/admin only')
+    ),
+    icon: computed(() =>
+      currentRoom.value?.isScreenShareDisableForAllUser
+        ? IconAllMembersShareScreen
+        : IconHostShareScreen
+    ),
+    handler: toggleRoomScreen,
+  });
+
+  return roomScreenAction;
+}

package/src/hooks/useRoomActions/useRoomVideoAction.ts

@@ -0,0 +1,67 @@
+import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-js';
+import { RoomAction } from '../../types';
+import { useI18n } from '../../locales';
+import { useRoomState } from '../../states/RoomState';
+import TUIMessageBox from '../../baseComp/MessageBox';
+import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomEngine } from '../useRoomEngine';
+// import { MESSAGE_DURATION } from '@/core/constants/message';
+import { computed, defineComponent, reactive } from 'vue';
+
+export default function useRoomVideoAction() {
+  const { t } = useI18n();
+  const { currentRoom } = useRoomState();
+  const roomEngine = useRoomEngine();
+
+  let stateForAllVideo = false;
+
+  function toggleRoomVideo() {
+    stateForAllVideo = !currentRoom.value?.isCameraDisableForAllUser;
+    TUIMessageBox({
+      title: currentRoom.value?.isCameraDisableForAllUser
+        ? t('Enable all videos')
+        : t('All and new members will be banned from the camera'),
+      message: currentRoom.value?.isCameraDisableForAllUser
+        ? t('After unlocking, users can freely turn on the camera')
+        : t('Members will not be able to open the camera'),
+      confirmButtonText: t('Confirm'),
+      cancelButtonText: t('Cancel'),
+      callback: async action => {
+        if (action === 'confirm') {
+          doToggleRoomVideo();
+        }
+      },
+    });
+  }
+
+  async function doToggleRoomVideo() {
+    if (currentRoom.value?.isCameraDisableForAllUser === stateForAllVideo) {
+      const tipMessage = stateForAllVideo
+        ? t('All videos disabled')
+        : t('All videos enabled');
+      TUIToast({
+        type: TOAST_TYPE.SUCCESS,
+        message: tipMessage,
+        // duration: MESSAGE_DURATION.NORMAL,
+      });
+      return;
+    }
+    await roomEngine.instance?.disableDeviceForAllUserByAdmin({
+      isDisable: stateForAllVideo,
+      device: TUIMediaDevice.kCamera,
+    });
+  }
+
+  const roomVideoAction = reactive({
+    key: RoomAction.VideoAction,
+    icon: defineComponent({}),
+    label: computed(() =>
+      currentRoom.value?.isCameraDisableForAllUser
+        ? t('Lift stop all video')
+        : t('All stop video')
+    ),
+    handler: toggleRoomVideo,
+  });
+
+  return roomVideoAction;
+}

package/src/hooks/useRoomEngine.ts

@@ -0,0 +1,30 @@
+import TUIRoomEngine, { TUIRoomDeviceManager, TRTCCloud } from '@tencentcloud/tuiroom-engine-js';
+
+const roomEngine: Record<string, TUIRoomEngine | null> = { instance: null };
+const deviceManager: { instance: TUIRoomDeviceManager | null | undefined } = {
+  instance: null,
+};
+
+TUIRoomEngine.once('ready', () => {
+  // todo: 这里的 enableSEI 确认有没有优化方式
+  TRTCCloud.callExperimentalAPI(
+    JSON.stringify({
+      api: 'enableSEI',
+      params: {
+        enable: true,
+      },
+    })
+  );
+  roomEngine.instance = new TUIRoomEngine();
+  deviceManager.instance = roomEngine.instance?.getMediaDeviceManager();
+});
+
+export function useDeviceManager() {
+  return deviceManager;
+}
+
+export function useRoomEngine() {
+  return roomEngine;
+}
+
+export default useRoomEngine;