tuikit-atomicx-vue3 0.1.0

package/dist/handler/translator.js

@@ -0,0 +1,140 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import ChatEngine, { TUIStore, TUIChatService, TUIUserService } from "@tencentcloud/chat-uikit-engine";
+const _Translator = class _Translator {
+  constructor() {
+    __publicField(this, "translationCache", /* @__PURE__ */ new Map());
+    if (_Translator.instance) {
+      return _Translator.instance;
+    }
+    _Translator.instance = this;
+  }
+  async get(messageID) {
+    const cache = this.translationCache.get(messageID);
+    if (cache !== void 0) {
+      return cache;
+    }
+    const currentMessage = TUIStore.getMessageModel(messageID);
+    if (!currentMessage) {
+      return Promise.reject("message not found");
+    }
+    const { text } = currentMessage.getMessageContent() || {};
+    const textList = [];
+    const splittingList = await this.getNickList(currentMessage);
+    for (let i = 0; i < text.length; ++i) {
+      const item = text[i];
+      if (item.name === "img") {
+        textList.push({ type: "face", value: item.src });
+        continue;
+      }
+      const { transSplittingList, atNickList } = this.getSplitResult(item.text, splittingList);
+      for (let j = 0; j < transSplittingList.length; ++j) {
+        textList.push({ type: "text", value: transSplittingList[j] });
+        if (j < atNickList.length) {
+          textList.push({ type: "mention", value: atNickList[j] });
+        }
+      }
+    }
+    const needTranslateTextIndex = [];
+    const needTranslateText = textList.filter((item, index) => {
+      if (item.type === "text" && item.value.trim() !== "") {
+        needTranslateTextIndex.push(index);
+        return true;
+      }
+      return false;
+    }).map((item) => item.value);
+    if (needTranslateText.length === 0) {
+      this.translationCache.set(currentMessage.ID, textList);
+      return textList;
+    }
+    const translationResult = await this.getTranslationStandard(needTranslateText);
+    translationResult.forEach((item, index) => {
+      textList[needTranslateTextIndex[index]].value = item;
+    });
+    this.translationCache.set(currentMessage.ID, textList);
+    return textList;
+  }
+  getTranslationStandard(originTextList) {
+    return new Promise((resolve, reject) => {
+      TUIChatService.translateText({
+        sourceTextList: originTextList,
+        sourceLanguage: "auto"
+      }).then((response) => {
+        const {
+          data: { translatedTextList }
+        } = response;
+        resolve(translatedTextList);
+      }).catch((error) => {
+        reject(error);
+      });
+    });
+  }
+  /**
+   * the nick list is used to split the text by @ + {nick or userID}
+   * @param message
+   * @returns e.g. ['@james', '@john']
+   */
+  async getNickList(message) {
+    const splittingList = [];
+    const { atUserList = [] } = message;
+    const atAllID = ChatEngine.TYPES.MSG_AT_ALL;
+    if (atUserList.includes(atAllID)) {
+      splittingList.push("@所有人");
+    }
+    if (atUserList.length > 0) {
+      const { data: userProfileList } = await TUIUserService.getUserProfile({ userIDList: atUserList });
+      userProfileList.forEach((user) => {
+        const atNick = `@${user.nick || user.userID}`;
+        splittingList.push(atNick);
+      });
+    }
+    return Array.from(new Set(splittingList));
+  }
+  /**
+   * Splits the given text into substrings based on the provided splitString array.
+   *
+   * @param {string} text - The text to be split.
+   * @param {string[]} splitString - The array of strings to split the text by.
+   * @return {{ transSplittingList: string[]; atNickList: string[] }} - An object containing two arrays:
+   *   - transSplittingList: An array of substrings extracted from the text.
+   *   - atNickList: An array of split strings that were found in the text.
+   */
+  getSplitResult(text, splitString) {
+    let searchStartPos = 0;
+    const transSplittingList = [];
+    const atNickList = [];
+    while (searchStartPos < text.length) {
+      const nextAtCharPos = text.indexOf("@", searchStartPos);
+      if (nextAtCharPos === -1) {
+        transSplittingList.push(text.substring(searchStartPos));
+        break;
+      }
+      let found = false;
+      for (let i = 0; i < splitString.length; ++i) {
+        const pos = text.indexOf(splitString[i], nextAtCharPos);
+        if (pos !== -1 && pos === nextAtCharPos) {
+          transSplittingList.push(text.substring(searchStartPos, pos));
+          atNickList.push(splitString[i]);
+          searchStartPos = pos + splitString[i].length;
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        transSplittingList.push(text.substring(searchStartPos));
+        break;
+      }
+    }
+    return {
+      transSplittingList,
+      atNickList
+    };
+  }
+};
+__publicField(_Translator, "instance");
+let Translator = _Translator;
+const translator = new Translator();
+export {
+  translator
+};

package/dist/handler/voiceConverter.d.ts

@@ -0,0 +1,8 @@
+declare class VoiceConverter {
+    static instance: VoiceConverter | undefined;
+    private convertCache;
+    constructor();
+    get(messageID: string): Promise<string>;
+}
+export declare const voiceConverter: VoiceConverter;
+export {};

package/dist/handler/voiceConverter.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { TUIStore, TUIChatService } from "@tencentcloud/chat-uikit-engine";
+const _VoiceConverter = class _VoiceConverter {
+  constructor() {
+    __publicField(this, "convertCache", /* @__PURE__ */ new Map());
+    if (_VoiceConverter.instance) {
+      return;
+    }
+    _VoiceConverter.instance = this;
+  }
+  async get(messageID) {
+    const cache = this.convertCache.get(messageID);
+    if (cache !== void 0) {
+      return cache;
+    }
+    const currentMessage = TUIStore.getMessageModel(messageID);
+    if (!currentMessage) {
+      return Promise.reject("message not found");
+    }
+    const response = await TUIChatService.convertVoiceToText({
+      message: currentMessage
+    });
+    const { data: { result = "" } = {} } = response;
+    if (result) {
+      this.convertCache.set(currentMessage.ID, result);
+    }
+    return result;
+  }
+};
+__publicField(_VoiceConverter, "instance");
+let VoiceConverter = _VoiceConverter;
+const voiceConverter = new VoiceConverter();
+export {
+  voiceConverter
+};

package/dist/hooks/useAudioControl.d.ts

@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+
+interface IUseAudioControlProps {
+    url: string;
+    audioId?: string;
+}
+interface IUseAudioControlReturn {
+    isPlaying: ReturnType<typeof ref<boolean>>;
+    progress: ReturnType<typeof ref<number>>;
+    duration: ReturnType<typeof ref<number | undefined>>;
+    isLoading: ReturnType<typeof ref<boolean>>;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    setProgress: (newProgress: number) => void;
+}
+/**
+ * Vue 3 Hook for audio control
+ *
+ * This Hook encapsulates audio control functionality, providing reactive state and methods
+ *
+ * @param props Configuration parameters
+ * @returns Audio control related states and methods
+ */
+export declare function useAudioControl(props: IUseAudioControlProps): IUseAudioControlReturn;
+export {};

package/dist/hooks/useAudioControl.js

@@ -0,0 +1,135 @@
+import { ref, onMounted, onUnmounted } from "vue";
+const audioInstances = /* @__PURE__ */ new Map();
+const AUDIO_PLAY_EVENT = "AUDIO_PLAY_EVENT";
+const createAudioPlayEvent = (audioId) => new CustomEvent(AUDIO_PLAY_EVENT, {
+  detail: { audioId }
+});
+function useAudioControl(props) {
+  const { url } = props;
+  const audioId = props.audioId || `audio-${url}`;
+  const isPlaying = ref(false);
+  const progress = ref(0);
+  const duration = ref(void 0);
+  const isLoading = ref(true);
+  const audio = ref(null);
+  const play = () => {
+    if (!audio.value) {
+      return;
+    }
+    window.dispatchEvent(createAudioPlayEvent(audioId));
+    audio.value.play();
+    isPlaying.value = true;
+  };
+  const pause = () => {
+    if (!audio.value) {
+      return;
+    }
+    audio.value.pause();
+    isPlaying.value = false;
+  };
+  const stop = () => {
+    if (!audio.value) {
+      return;
+    }
+    audio.value.pause();
+    audio.value.currentTime = 0;
+    isPlaying.value = false;
+    progress.value = 0;
+  };
+  const setProgress = (newProgress) => {
+    if (!audio.value || duration.value === void 0) {
+      return;
+    }
+    const validProgress = Math.max(0, Math.min(1, newProgress));
+    audio.value.currentTime = duration.value * validProgress;
+    progress.value = validProgress;
+  };
+  const handleTimeUpdate = () => {
+    if (!audio.value || !duration.value) {
+      return;
+    }
+    progress.value = audio.value.currentTime / duration.value;
+  };
+  const handleEnded = () => {
+    isPlaying.value = false;
+    progress.value = 0;
+  };
+  const handleAudioPlay = (e) => {
+    const event = e;
+    if (event.detail.audioId !== audioId && isPlaying.value) {
+      pause();
+    }
+  };
+  onMounted(() => {
+    window.addEventListener(AUDIO_PLAY_EVENT, handleAudioPlay);
+    let audioInstance = audioInstances.get(audioId);
+    const handleLoadedMetadata = () => {
+      if (!audioInstance) {
+        return;
+      }
+      duration.value = audioInstance.duration;
+      isLoading.value = false;
+    };
+    const handleError = () => {
+      console.error("Audio load error:", url);
+      isLoading.value = false;
+    };
+    if (!audioInstance || audioInstance.src !== url) {
+      isLoading.value = true;
+      duration.value = void 0;
+      if (audioInstance) {
+        audioInstance.pause();
+        audioInstance.src = "";
+        audioInstance.load();
+        audioInstance.removeEventListener("loadedmetadata", handleLoadedMetadata);
+        audioInstance.removeEventListener("error", handleError);
+        audioInstance.removeEventListener("timeupdate", handleTimeUpdate);
+        audioInstance.removeEventListener("ended", handleEnded);
+      }
+      audioInstance = new Audio(url);
+      audioInstance.addEventListener("loadedmetadata", handleLoadedMetadata);
+      audioInstance.addEventListener("error", handleError);
+      audioInstance.addEventListener("timeupdate", handleTimeUpdate);
+      audioInstance.addEventListener("ended", handleEnded);
+      audioInstances.set(audioId, audioInstance);
+      audio.value = audioInstance;
+      isPlaying.value = false;
+      progress.value = 0;
+    } else {
+      audio.value = audioInstance;
+      audioInstance.removeEventListener("timeupdate", handleTimeUpdate);
+      audioInstance.removeEventListener("ended", handleEnded);
+      audioInstance.addEventListener("timeupdate", handleTimeUpdate);
+      audioInstance.addEventListener("ended", handleEnded);
+      if (audioInstance.duration) {
+        duration.value = audioInstance.duration;
+        isLoading.value = false;
+      }
+    }
+  });
+  onUnmounted(() => {
+    window.removeEventListener(AUDIO_PLAY_EVENT, handleAudioPlay);
+    if (audioInstances.has(audioId)) {
+      const instance = audioInstances.get(audioId);
+      instance.removeEventListener("timeupdate", handleTimeUpdate);
+      instance.removeEventListener("ended", handleEnded);
+      instance.pause();
+      instance.src = "";
+      instance.load();
+      audioInstances.delete(audioId);
+    }
+  });
+  return {
+    isPlaying,
+    progress,
+    duration,
+    isLoading,
+    play,
+    pause,
+    stop,
+    setProgress
+  };
+}
+export {
+  useAudioControl
+};

package/dist/hooks/useMessageActions.d.ts

@@ -0,0 +1,33 @@
+import { Component } from 'vue';
+import { 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>;
+}
+/**
+ * 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
+ */
+declare function useMessageActions(propsActionList?: Array<MessageAction['key'] | MessageAction>): MessageAction[];
+export { useMessageActions, };
+export type { MessageAction, };

package/dist/hooks/useMessageActions.js

@@ -0,0 +1,91 @@
+import { computed } from "vue";
+import ChatEngine from "@tencentcloud/chat-uikit-engine";
+import { IconMsgDel, IconMsgForward, IconMsgQuote, IconMsgRevoke, IconCopy, TUIToast, i18next } from "@tencentcloud/uikit-base-component-vue3";
+import { useMessageActionState } from "../states/MessageActionState/MessageActionState.js";
+import { isCallMessage } from "../utils/call.js";
+const DEFAULT_ACTIONS = {
+  copy: {
+    key: "copy",
+    label: "Copy",
+    visible: (message) => message.type === ChatEngine.TYPES.MSG_TEXT,
+    icon: IconCopy
+  },
+  recall: {
+    key: "recall",
+    label: "Recall",
+    visible: (message) => !isCallMessage(message) && message.flow === "out" && message.status === "success" && Date.now() - message.time * 1e3 < 60 * 2 * 1e3,
+    icon: IconMsgRevoke
+  },
+  quote: {
+    key: "quote",
+    label: "Quote",
+    visible: (message) => !isCallMessage(message),
+    icon: IconMsgQuote
+  },
+  forward: {
+    key: "forward",
+    label: "Forward",
+    visible: (message) => !isCallMessage(message),
+    icon: IconMsgForward
+  },
+  delete: {
+    key: "delete",
+    label: "Delete",
+    icon: IconMsgDel,
+    visible: true,
+    style: {
+      color: "var(--text-color-error)"
+    }
+  }
+};
+const DEFAULT_ACTION_ORDER = ["copy", "recall", "quote", "forward", "delete"];
+function useMessageActions(propsActionList) {
+  const state = useMessageActionState();
+  const defaultActionHandlers = {
+    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")
+      }));
+    }
+  };
+  const resolvedActions = (propsActionList || DEFAULT_ACTION_ORDER).map((propsAction) => {
+    if (typeof propsAction === "string") {
+      const defaultConfig = DEFAULT_ACTIONS[propsAction];
+      return {
+        ...defaultConfig,
+        onClick: defaultActionHandlers[propsAction]
+      };
+    }
+    const defaultActionConfig = DEFAULT_ACTIONS[propsAction.key] || {};
+    return {
+      ...defaultActionConfig,
+      ...propsAction,
+      onClick: propsAction.onClick || defaultActionHandlers[propsAction.key]
+    };
+  });
+  return computed(() => resolvedActions).value;
+}
+export {
+  useMessageActions
+};

package/dist/hooks/useReadReceipt/useReadReceipt.d.ts

@@ -0,0 +1,47 @@
+import { 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 declare function useReadReceipt({ enabled, containerSelector, messageSelector, getMessageIDFromDom, shouldSendReadReceipt, intersectionThreshold, delay, }: UseReadReceiptOptions): {
+    /**
+     * Observe new messages, should be called when message list updates
+     */
+    observeMessageList: () => void;
+    /**
+     * Manually mark visible messages as read, e.g. after initial load
+     */
+    manuallyMarkVisibleMessagesAsRead: () => void;
+    /**
+     * Reset processed message records, e.g. when switching conversation
+     */
+    resetProcessedMessages: () => void;
+};
+export {};

package/dist/hooks/useReadReceipt/useReadReceipt.js

@@ -0,0 +1,150 @@
+import { watch, onMounted, onUnmounted } from "vue";
+import { TUIChatService, TUIStore } from "@tencentcloud/chat-uikit-engine";
+import { throttle } from "../../utils/lodash.js";
+function useReadReceipt({
+  enabled,
+  containerSelector,
+  messageSelector = "[data-message-id]",
+  getMessageIDFromDom,
+  shouldSendReadReceipt = (message) => message.flow === "in",
+  intersectionThreshold = 0.5,
+  delay = 1e3
+}) {
+  let observer = null;
+  const pendingReadReceiptMessages = /* @__PURE__ */ new Map();
+  const processedMessageIds = /* @__PURE__ */ new Set();
+  const sendBatchReadReceipts = throttle(() => {
+    if (pendingReadReceiptMessages.size === 0) {
+      return;
+    }
+    const messagesToSend = Array.from(pendingReadReceiptMessages.values());
+    TUIChatService.sendMessageReadReceipt(messagesToSend).then(() => {
+    }).catch(() => {
+    });
+    pendingReadReceiptMessages.clear();
+  }, delay, { leading: false, trailing: true });
+  const checkMessageAndSendReadReceipt = (messageID) => {
+    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;
+  };
+  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 == null ? void 0 : observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: intersectionThreshold,
+        root: typeof containerSelector === "string" ? document.querySelector(containerSelector) : containerSelector
+      }
+    );
+  };
+  const cleanupObserver = () => {
+    observer == null ? void 0 : observer.disconnect();
+    sendBatchReadReceipts.flush();
+  };
+  watch(
+    [() => enabled, () => containerSelector, () => intersectionThreshold],
+    () => {
+      cleanupObserver();
+      initializeObserver();
+    },
+    { immediate: true }
+  );
+  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 == null ? void 0 : observer.observe(element);
+      }
+    });
+  };
+  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);
+      }
+    });
+  };
+  onMounted(() => {
+    initializeObserver();
+  });
+  onUnmounted(() => {
+    cleanupObserver();
+  });
+  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();
+    }
+  };
+}
+export {
+  useReadReceipt
+};

package/dist/hooks/useRoomActions/index.d.ts

@@ -0,0 +1,5 @@
+import { ActionType, RoomAction } from '../../types';
+
+export default function useRoomActions(options?: {
+    actionList: RoomAction[];
+}): ActionType<RoomAction>[];