tuikit-atomicx-vue3 0.1.0

package/dist/components/MessageList/MessageList.js

@@ -0,0 +1,212 @@
+import { defineComponent, useSlots, provide, ref, computed, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, unref, withCtx, renderList, createBlock, normalizeClass, resolveDynamicComponent } from "vue";
+import { c as cs } from "../../index-BF6QB9jF.js";
+import ObserverView from "../../baseComp/ObserverView/ObserverView.js";
+import View from "../../baseComp/View/View.js";
+import { useScroll } from "../../hooks/useScroll.js";
+import { useMessageListState } from "../../states/MessageListState/MessageListState.js";
+import { throttle } from "../../utils/lodash.js";
+import { _ as _sfc_main$1 } from "../../Message.vue_vue_type_script_setup_true_lang-BV0PxtjX.js";
+import MessageForward from "./MessageForward/MessageForward.js";
+import { MessageListContextSymbol } from "./MessageListContext.js";
+import DefaultMessageTimeDivider from "./MessageTimeDivider/MessageTimeDivider.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "message-list" };
+const _hoisted_2 = { class: "message-chunk" };
+const autoScrollThreshold = 150;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MessageList",
+  props: {
+    alignment: { default: "two-sided" },
+    messageAggregationTime: { default: 5 * 60 },
+    enableReadReceipt: { type: Boolean, default: false },
+    messageActionList: { default: void 0 },
+    filter: { type: Function, default: void 0 },
+    Message: { default: void 0 },
+    MessageTimeDivider: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    provide(MessageListContextSymbol, { slots });
+    const isFinishFirstRender = ref(false);
+    const distanceToBottom = ref(0);
+    const isLoadingHistory = ref(false);
+    const scrollContainer = ref(null);
+    const storeDistanceToBottom = ref(0);
+    const {
+      messageList,
+      loadMoreOlderMessage,
+      activeConversationID,
+      isDisableScroll,
+      setIsDisableScroll
+    } = useMessageListState();
+    const { scrollToBottom } = useScroll();
+    const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
+    const messageChunks = computed(() => {
+      if (!messageList.value) {
+        return [];
+      }
+      const filteredMessageList = props.filter ? messageList.value.filter(props.filter) : messageList.value.filter((message) => !message.isDeleted);
+      if (!props.messageAggregationTime || props.messageAggregationTime <= 0) {
+        return filteredMessageList.map((message) => ({
+          timestamp: message.time,
+          messages: [message],
+          key: `chunk-${message.ID}`
+        }));
+      }
+      const chunks = [];
+      const MAX_TIME_BETWEEN_MESSAGE_GROUP = props.messageAggregationTime;
+      filteredMessageList.forEach((message, index, messages) => {
+        const messageTime = message.time;
+        const lastChunk = chunks[chunks.length - 1];
+        const shouldCreateNewChunk = !lastChunk || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP || lastChunk.messages[0].from !== message.from || message.isRevoked || index > 0 && messages[index - 1].isRevoked;
+        if (shouldCreateNewChunk) {
+          chunks.push({
+            timestamp: messageTime,
+            messages: [message],
+            key: `chunk-${message.ID}`
+          });
+        } else {
+          lastChunk.messages.push(message);
+        }
+      });
+      return chunks;
+    });
+    const handleScroll = throttle(() => {
+      if (!scrollContainer.value) {
+        return;
+      }
+      distanceToBottom.value = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
+      if (distanceToBottom.value > autoScrollThreshold) {
+        setIsDisableScroll(true);
+      }
+      if (distanceToBottom.value < autoScrollThreshold) {
+        setIsDisableScroll(false);
+      }
+    }, 100);
+    const initializeMessageList = async () => {
+      isFinishFirstRender.value = false;
+      setIsDisableScroll(false);
+    };
+    const loadMoreHistory = async () => {
+      var _a;
+      if (!isFinishFirstRender.value || isLoadingHistory.value || !((_a = messageList.value) == null ? void 0 : _a.length)) {
+        return;
+      }
+      setIsDisableScroll(true);
+      isLoadingHistory.value = true;
+      if (!scrollContainer.value) {
+        isLoadingHistory.value = false;
+        return;
+      }
+      storeDistanceToBottom.value = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
+      await loadMoreOlderMessage();
+      await nextTick();
+      if (scrollContainer.value) {
+        const newScrollTop = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight - storeDistanceToBottom.value;
+        scrollContainer.value.scrollTop = Math.max(0, Math.min(
+          scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight,
+          newScrollTop
+        ));
+      }
+      isLoadingHistory.value = false;
+    };
+    watch(activeConversationID, () => {
+      initializeMessageList();
+    });
+    watch(messageList, (newMessages, oldMessages) => {
+      if (oldMessages === void 0 && newMessages && !isFinishFirstRender.value) {
+        nextTick(() => {
+          scrollToBottom({ behavior: "instant" });
+          isFinishFirstRender.value = true;
+        });
+        return;
+      }
+      if (!oldMessages || !newMessages || !newMessages.length) {
+        return;
+      }
+      const newLastMessage = newMessages[newMessages.length - 1];
+      const oldLastMessage = oldMessages[oldMessages.length - 1];
+      if ((newLastMessage == null ? void 0 : newLastMessage.ID) !== (oldLastMessage == null ? void 0 : oldLastMessage.ID)) {
+        const shouldAutoScroll = newLastMessage.flow === "out" || !isDisableScroll.value && distanceToBottom.value < autoScrollThreshold;
+        if (shouldAutoScroll) {
+          scrollToBottom({ behavior: "smooth" });
+        }
+      }
+    });
+    onMounted(() => {
+      if (scrollContainer.value) {
+        scrollContainer.value.addEventListener("scroll", handleScroll);
+      }
+      initializeMessageList();
+    });
+    onUnmounted(() => {
+      if (scrollContainer.value) {
+        scrollContainer.value.removeEventListener("scroll", handleScroll);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            id: "messageScrollList",
+            ref_key: "scrollContainer",
+            ref: scrollContainer,
+            class: "message-list-container"
+          }, [
+            createVNode(unref(ObserverView), {
+              root: "#messageScrollList",
+              rootMargin: "50px 0px 0px 0px",
+              threshold: 0.1,
+              onOnShow: loadMoreHistory
+            }, {
+              default: withCtx(() => _cache[0] || (_cache[0] = [
+                createElementVNode("div", { id: "loadMore" }, null, -1)
+              ])),
+              _: 1,
+              __: [0]
+            }),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(messageChunks.value, (chunk, chunkIndex) => {
+              return openBlock(), createBlock(unref(View), {
+                key: chunk.key,
+                class: normalizeClass(unref(cs)("message-chunk--container"))
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(props.MessageTimeDivider || unref(DefaultMessageTimeDivider)), {
+                    "previous-message": chunkIndex > 0 ? messageChunks.value[chunkIndex - 1].messages[0] : void 0,
+                    message: chunk.messages[0]
+                  }, null, 8, ["previous-message", "message"])),
+                  createElementVNode("div", _hoisted_2, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(chunk.messages, (message, messageIndex) => {
+                      return openBlock(), createBlock(resolveDynamicComponent(props.Message || unref(_sfc_main$1)), {
+                        key: message.ID,
+                        message,
+                        alignment: props.alignment,
+                        messageActionList: props.messageActionList,
+                        isAggregated: Boolean(enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1),
+                        "is-first-in-chunk": Boolean(messageIndex === 0),
+                        "is-last-in-chunk": Boolean(messageIndex === chunk.messages.length - 1),
+                        isHiddenMessageAvatar: Boolean(
+                          _ctx.alignment === "two-sided" ? enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1 || message.flow === "out" : enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
+                        ),
+                        isHiddenMessageMeta: Boolean(
+                          enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
+                        )
+                      }, null, 8, ["message", "alignment", "messageActionList", "isAggregated", "is-first-in-chunk", "is-last-in-chunk", "isHiddenMessageAvatar", "isHiddenMessageMeta"]);
+                    }), 128))
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["class"]);
+            }), 128))
+          ], 512)
+        ]),
+        createVNode(unref(MessageForward))
+      ], 64);
+    };
+  }
+});
+const MessageList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e0764a88"]]);
+export {
+  MessageList as default
+};

package/dist/components/MessageList/MessageList.vue.d.ts

@@ -0,0 +1,66 @@
+import { Component } from 'vue';
+import { MessageAction } from '../../hooks/useMessageActions';
+import { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IMessageListProps {
+    alignment?: 'left' | 'right' | 'two-sided';
+    /** max time between message group */
+    messageAggregationTime?: number | undefined;
+    /** enable read receipt */
+    enableReadReceipt?: boolean | undefined;
+    /** message actions e.g. recall, delete, etc. */
+    messageActionList?: MessageAction[] | undefined;
+    /** custom filter function */
+    filter?: ((message: MessageModel) => boolean) | undefined;
+    /** custom message component */
+    Message?: Component | undefined;
+    /** custom message timeline component */
+    MessageTimeDivider?: Component | undefined;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
+    /** props */
+    alignment: string;
+    messageAggregationTime: number;
+    enableReadReceipt: boolean;
+    messageActionList: undefined;
+    filter: undefined;
+    /** custom components */
+    Message: undefined;
+    MessageTimeDivider: undefined;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
+    /** props */
+    alignment: string;
+    messageAggregationTime: number;
+    enableReadReceipt: boolean;
+    messageActionList: undefined;
+    filter: undefined;
+    /** custom components */
+    Message: undefined;
+    MessageTimeDivider: undefined;
+}>>> & Readonly<{}>, {
+    filter: (message: MessageModel) => boolean;
+    messageActionList: MessageAction[];
+    Message: Component;
+    messageAggregationTime: number;
+    MessageTimeDivider: Component;
+    enableReadReceipt: boolean;
+    alignment: "left" | "right" | "two-sided";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageList/MessageListContext.d.ts

@@ -0,0 +1,3 @@
+declare const MessageListContextSymbol: unique symbol;
+declare function useMessageListContext(componentName: string): never;
+export { MessageListContextSymbol, useMessageListContext, };

package/dist/components/MessageList/MessageListContext.js

@@ -0,0 +1,13 @@
+import { inject } from "vue";
+const MessageListContextSymbol = Symbol("MessageListContext");
+function useMessageListContext(componentName) {
+  const context = inject(MessageListContextSymbol, null);
+  if (context === null) {
+    throw new Error(`<${componentName}> must be used within Parent MessageList.`);
+  }
+  return context;
+}
+export {
+  MessageListContextSymbol,
+  useMessageListContext
+};

package/dist/components/MessageList/MessageTimeDivider/MessageTimeDivider.js

@@ -0,0 +1,38 @@
+import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, h, Fragment } from "vue";
+import { getTimeStampAuto } from "../../../utils/time.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MessageTimeDivider",
+  props: {
+    previousMessage: { default: void 0 },
+    message: { default: () => ({}) }
+  },
+  setup(__props) {
+    const props = __props;
+    const shouldShowTimeDivider = computed(() => {
+      var _a, _b;
+      if (!((_a = props.message) == null ? void 0 : _a.time)) {
+        return false;
+      }
+      const prevTime = ((_b = props.previousMessage) == null ? void 0 : _b.time) || 0;
+      const currentTime = props.message.time;
+      return currentTime - prevTime > 5 * 60;
+    });
+    const renderDefaultContent = () => {
+      if (!shouldShowTimeDivider.value) {
+        return h(Fragment, null, []);
+      }
+      const currentTime = props.message.time;
+      return h("div", { class: "message-time-divider" }, [
+        h("span", {}, getTimeStampAuto(currentTime * 1e3))
+      ]);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(renderDefaultContent()));
+    };
+  }
+});
+const DefaultMessageTimeDivider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1f3e276c"]]);
+export {
+  DefaultMessageTimeDivider as default
+};

package/dist/components/MessageList/MessageTimeDivider/MessageTimeDivider.vue.d.ts

@@ -0,0 +1,34 @@
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+
+interface IMessageTimeDividerProps {
+    previousMessage: IMessageModel | undefined;
+    message: IMessageModel;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageTimeDividerProps>, {
+    previousMessage: undefined;
+    message: () => IMessageModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageTimeDividerProps>, {
+    previousMessage: undefined;
+    message: () => IMessageModel;
+}>>> & Readonly<{}>, {
+    message: IMessageModel;
+    previousMessage: IMessageModel | undefined;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/MessageList/MessageTimeDivider/index.d.ts

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

package/dist/components/MessageList/MessageTimeDivider/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./MessageTimeDivider.js";
+export {
+  default2 as MessageTimeDivider
+};