tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/dist/components/BarrageInput/TextEditor/CharacterCountExtension.js

@@ -0,0 +1,93 @@
+import { E as Extension, P as Plugin, a as PluginKey } from "../../../index-t9cbWbGG.js";
+const CharacterCount = Extension.create({
+  name: "characterCount",
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: (text) => text.length,
+      wordCounter: (text) => text.split(" ").filter((word) => word !== "").length
+    };
+  },
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0
+    };
+  },
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      return node.nodeSize;
+    };
+    this.storage.words = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, " ", " ");
+      return this.options.wordCounter(text);
+    };
+  },
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+    return [
+      new Plugin({
+        key: new PluginKey("characterCount"),
+        appendTransaction: (transactions, oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+          const { limit } = this.options;
+          if (limit === null || limit === void 0 || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+            console.warn(
+              `[CharacterCount] Initial content exceeded limit of ${limit} characters. Content was automatically trimmed.`
+            );
+            const tr = newState.tr.deleteRange(from, to);
+            initialEvaluationDone = true;
+            return tr;
+          }
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const { limit } = this.options;
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === void 0) {
+            return true;
+          }
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+          if (newSize <= limit) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+          const isPaste = transaction.getMeta("paste");
+          if (!isPaste) {
+            return false;
+          }
+          const { pos } = transaction.selection.$head;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+          transaction.deleteRange(from, to);
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+          if (updatedSize > limit) {
+            return false;
+          }
+          return true;
+        }
+      })
+    ];
+  }
+});
+export {
+  CharacterCount
+};

package/dist/components/BarrageInput/TextEditor/EditorCore.d.ts

@@ -1,16 +1,17 @@
 import { Editor } from '@tiptap/vue-3';
-import { IInputContent } from '../../../states/MessageInputState';
+import { InputContent } from '../../../states/MessageInputState';
 
 interface EditorOptions {
     element: Element;
     placeholder?: string;
     autoFocus?: boolean;
     disabled?: boolean;
-    onUpdate?: (content: IInputContent[]) => void;
+    onUpdate?: (content: InputContent[]) => void;
     onEnter?: () => void;
     onFocus?: () => void;
     onBlur?: () => void;
+    maxLength?: number;
 }
-declare function createEditor({ element, placeholder, autoFocus, disabled, onUpdate, onEnter, onFocus, onBlur, }: EditorOptions): Editor;
+declare function createEditor({ element, placeholder, autoFocus, disabled, maxLength, onUpdate, onEnter, onFocus, onBlur, }: EditorOptions): Editor;
 export { createEditor };
 export type { Editor };

package/dist/components/BarrageInput/TextEditor/EditorCore.js

@@ -1,6 +1,8 @@
-import { S as StarterKit, P as Placeholder, E as Editor, a as Extension, I as Image } from "../../../index-oR-rgHxX.js";
-import { MessageContentType } from "../../../states/MessageInputState/MessageInputState.js";
+import { S as StarterKit, P as Placeholder, E as Editor, I as Image } from "../../../index-ex2Jv3Tj.js";
 import { isMobile } from "../../../utils/environment.js";
+import { CharacterCount } from "./CharacterCountExtension.js";
+import { E as Extension } from "../../../index-t9cbWbGG.js";
+import { MessageContentType } from "../../../states/MessageInputState/type.js";
 function createEmojiExtension() {
   return Image.extend({
     name: MessageContentType.EMOJI,
@@ -114,6 +116,7 @@ function createEditor({
   placeholder = "",
   autoFocus = false,
   disabled = false,
+  maxLength,
   onUpdate,
   onEnter,
   onFocus,
@@ -121,6 +124,9 @@ function createEditor({
 }) {
   const createBaseExtensions = (enterHandler) => [
     StarterKit,
+    CharacterCount.configure({
+      limit: maxLength
+    }),
     createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : void 0),
     createEmojiExtension(),
     createImageExtension(),

package/dist/components/BarrageInput/TextEditor/TextEditor.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../TextEditor.vue_vue_type_script_setup_true_lang-w_I4bsmJ.js";
+import { TextEditor as _sfc_main } from "./index.js";
 export {
   _sfc_main as default
 };

package/dist/components/BarrageInput/TextEditor/TextEditor.vue.d.ts

@@ -2,6 +2,7 @@ interface ITextEditorProps {
     autoFocus?: boolean;
     disabled?: boolean;
     placeholder?: string;
+    maxLength?: number;
 }
 declare function __VLS_template(): {
     prefix?(_: {}): any;

package/dist/components/BarrageInput/TextEditor/index.js

@@ -1,4 +1,127 @@
-import { _ } from "../../../TextEditor.vue_vue_type_script_setup_true_lang-w_I4bsmJ.js";
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, renderSlot, toDisplayString } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { createEditor } from "./EditorCore.js";
+import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
+import { useMessageInputState } from "../../../states/MessageInputState/MessageInputState.js";
+const disabled = "_disabled_3es4w_13";
+const editor = "_editor_3es4w_30";
+const styles = {
+  "input-wrapper": "_input-wrapper_3es4w_1",
+  disabled,
+  "input-prefix": "_input-prefix_3es4w_17",
+  "input-suffix": "_input-suffix_3es4w_23",
+  editor,
+  "disabled-editor": "_disabled-editor_3es4w_37"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextEditor",
+  props: {
+    autoFocus: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    placeholder: { default: "" },
+    maxLength: {}
+  },
+  emits: ["focus", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { activeConversation } = useConversationListState();
+    const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
+    const editorRef = ref(null);
+    const isFocused = ref(props.autoFocus);
+    const placeholderText = computed(() => props.placeholder || t("Say something"));
+    let editorInstance = null;
+    const createEditorInstance = (p) => {
+      const element = editorRef.value;
+      if (!element || p.disabled) {
+        return;
+      }
+      if (!element.dataset.editorCreated) {
+        editorInstance = createEditor({
+          element,
+          placeholder: placeholderText.value,
+          autoFocus: p.autoFocus,
+          disabled: p.disabled,
+          maxLength: p.maxLength,
+          onUpdate: (content) => {
+            updateRawValue(content);
+          },
+          onEnter: () => {
+            sendMessage();
+            setContent("");
+          },
+          onFocus: () => {
+            isFocused.value = true;
+            emit("focus");
+          },
+          onBlur: () => {
+            isFocused.value = false;
+            emit("blur");
+          }
+        });
+        element.dataset.editorCreated = "true";
+        setEditorInstance(editorInstance);
+      }
+    };
+    const destroyEditorInstance = () => {
+      var _a;
+      editorInstance == null ? void 0 : editorInstance.destroy();
+      (_a = editorRef.value) == null ? void 0 : _a.removeAttribute("data-editor-created");
+      setEditorInstance(null);
+    };
+    watch(
+      () => props.disabled,
+      async (newDisabled, oldDisabled) => {
+        if (newDisabled !== oldDisabled) {
+          if (newDisabled) {
+            destroyEditorInstance();
+          } else {
+            await nextTick();
+            createEditorInstance(props);
+          }
+        }
+      }
+    );
+    onMounted(() => {
+      createEditorInstance(props);
+    });
+    onUnmounted(() => {
+      destroyEditorInstance();
+    });
+    watch(activeConversation, (newConversation, oldConversation) => {
+      if ((newConversation == null ? void 0 : newConversation.conversationID) !== (oldConversation == null ? void 0 : oldConversation.conversationID)) {
+        setContent("");
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(styles)["input-wrapper"], props.disabled && unref(styles).disabled])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(styles)["input-prefix"])
+        }, [
+          renderSlot(_ctx.$slots, "prefix")
+        ], 2),
+        !props.disabled ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "editorRef",
+          ref: editorRef,
+          class: normalizeClass(unref(styles)["editor"])
+        }, null, 2)) : createCommentVNode("", true),
+        props.disabled ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass([unref(styles)["disabled-editor"]])
+        }, toDisplayString(placeholderText.value), 3)) : createCommentVNode("", true),
+        createElementVNode("span", {
+          class: normalizeClass(unref(styles)["input-suffix"])
+        }, [
+          renderSlot(_ctx.$slots, "suffix")
+        ], 2)
+      ], 2);
+    };
+  }
+});
 export {
-  _ as TextEditor
+  _sfc_main as TextEditor
 };

package/dist/components/BarrageInput/index.d.ts

@@ -12,45 +12,25 @@ declare const BarrageInput: import('vue').DefineComponent<import('vue').ExtractP
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    autoFocus: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    containerClass: {
+    width: {
         type: import('vue').PropType<string>;
-        default: string;
-    };
-    containerStyle: {
-        type: import('vue').PropType<Record<string, any>>;
-        default: () => {};
-    };
-    minHeight: {
-        type: import('vue').PropType<string>;
-        default: string;
     };
     maxHeight: {
         type: import('vue').PropType<string>;
         default: string;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    focus: () => void;
-    blur: () => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    height: {
+    minHeight: {
         type: import('vue').PropType<string>;
         default: string;
     };
-    placeholder: {
-        type: import('vue').PropType<string>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
     autoFocus: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
+    maxLength: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
     containerClass: {
         type: import('vue').PropType<string>;
         default: string;
@@ -59,26 +39,10 @@ declare const BarrageInput: import('vue').DefineComponent<import('vue').ExtractP
         type: import('vue').PropType<Record<string, any>>;
         default: () => {};
     };
-    minHeight: {
-        type: import('vue').PropType<string>;
-        default: string;
-    };
-    maxHeight: {
-        type: import('vue').PropType<string>;
-        default: string;
-    };
-}>> & Readonly<{
-    onBlur?: (() => any) | undefined;
-    onFocus?: (() => any) | undefined;
-}>, {
-    height: string;
-    disabled: boolean;
-    autoFocus: boolean;
-    containerClass: string;
-    containerStyle: Record<string, any>;
-    minHeight: string;
-    maxHeight: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    focus: () => void;
+    blur: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     height: {
         type: import('vue').PropType<string>;
         default: string;
@@ -90,42 +54,25 @@ declare const BarrageInput: import('vue').DefineComponent<import('vue').ExtractP
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
-    autoFocus: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
-    containerClass: {
+    width: {
         type: import('vue').PropType<string>;
-        default: string;
-    };
-    containerStyle: {
-        type: import('vue').PropType<Record<string, any>>;
-        default: () => {};
-    };
-    minHeight: {
-        type: import('vue').PropType<string>;
-        default: string;
     };
     maxHeight: {
         type: import('vue').PropType<string>;
         default: string;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    height: {
+    minHeight: {
         type: import('vue').PropType<string>;
         default: string;
     };
-    placeholder: {
-        type: import('vue').PropType<string>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-        default: boolean;
-    };
     autoFocus: {
         type: import('vue').PropType<boolean>;
         default: boolean;
     };
+    maxLength: {
+        type: import('vue').PropType<number>;
+        default: number;
+    };
     containerClass: {
         type: import('vue').PropType<string>;
         default: string;
@@ -134,21 +81,17 @@ declare const BarrageInput: import('vue').DefineComponent<import('vue').ExtractP
         type: import('vue').PropType<Record<string, any>>;
         default: () => {};
     };
-    minHeight: {
-        type: import('vue').PropType<string>;
-        default: string;
-    };
-    maxHeight: {
-        type: import('vue').PropType<string>;
-        default: string;
-    };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+}>, {
     height: string;
     disabled: boolean;
+    maxHeight: string;
+    minHeight: string;
     autoFocus: boolean;
+    maxLength: number;
     containerClass: string;
     containerStyle: Record<string, any>;
-    minHeight: string;
-    maxHeight: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { BarrageInput, BarrageInputH5 };

package/dist/components/BarrageList/BarrageList.js

@@ -2,14 +2,14 @@ import { defineComponent, useSlots, ref, provide, watch, nextTick, onMounted, on
 import ObserverView from "../../baseComp/ObserverView/ObserverView.js";
 import { throttle } from "../../utils/lodash.js";
 import { useScroll } from "../../hooks/useScroll.js";
-import { useBarrageListState } from "../../states/BarrageListState/BarrageListState.js";
-import { _ as _sfc_main$1 } from "../../Message.vue_vue_type_script_setup_true_lang-mEw2syBo.js";
+import { Message as _sfc_main$1 } from "./Message/index.js";
 import MessageForward from "./MessageForward/MessageForward.js";
 import { MessageListContextSymbol } from "./MessageListContext.js";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import UserActionMenu from "./ClickAction/UserActionMenu.js";
 import { useLoginState } from "../../states/LoginState.js";
 import { useLiveState } from "../../states/LiveState/index.js";
+import { useBarrageListState } from "../../states/BarrageListState/BarrageListState.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = { class: "message-chunk" };
 const _hoisted_2 = {

package/dist/components/BarrageList/BarrageListH5.js

@@ -2,14 +2,14 @@ import { defineComponent, useSlots, ref, provide, watch, nextTick, onMounted, on
 import ObserverView from "../../baseComp/ObserverView/ObserverView.js";
 import { throttle } from "../../utils/lodash.js";
 import { useScroll } from "../../hooks/useScroll.js";
-import { useBarrageListState } from "../../states/BarrageListState/BarrageListState.js";
-import { _ as _sfc_main$1 } from "../../Message.vue_vue_type_script_setup_true_lang-mEw2syBo.js";
+import { Message as _sfc_main$1 } from "./Message/index.js";
 import MessageForward from "./MessageForward/MessageForward.js";
 import { MessageListContextSymbol } from "./MessageListContext.js";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import UserActionMenu from "./ClickAction/UserActionMenu.js";
 import { useLoginState } from "../../states/LoginState.js";
 import { useLiveState } from "../../states/LiveState/index.js";
+import { useBarrageListState } from "../../states/BarrageListState/BarrageListState.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = { class: "message-chunk" };
 const _hoisted_2 = {

package/dist/components/BarrageList/Message/CustomMessage/CustomMessage.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../../CustomMessage.vue_vue_type_script_setup_true_lang-By3MsAd0.js";
+import { CustomMessage as _sfc_main } from "./index.js";
 export {
   _sfc_main as default
 };

package/dist/components/BarrageList/Message/CustomMessage/index.js

@@ -1,4 +1,12 @@
-import { _ } from "../../../../CustomMessage.vue_vue_type_script_setup_true_lang-By3MsAd0.js";
+import { defineComponent } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CustomMessage",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return " [Custom Message] ";
+    };
+  }
+});
 export {
-  _ as CustomMessage
+  _sfc_main as CustomMessage
 };

package/dist/components/BarrageList/Message/GroupTipMessage/GroupTipMessage.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../../GroupTipMessage.vue_vue_type_style_index_0_lang-Dw2-5Ner.js";
+import { GroupTipMessage as _sfc_main } from "./index.js";
 export {
   _sfc_main as default
 };

package/dist/components/BarrageList/Message/GroupTipMessage/index.js

@@ -1,4 +1,30 @@
-import { _ } from "../../../../GroupTipMessage.vue_vue_type_style_index_0_lang-Dw2-5Ner.js";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, toDisplayString } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { c as cs } from "../../../../index-BF6QB9jF.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupTipMessage",
+  props: {
+    message: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    const messageContent = props.message.getMessageContent();
+    const renderText = () => {
+      switch (messageContent.businessID) {
+        case "group_create":
+          return `${messageContent.showName || ""} ${t("TUIChat.create group")}`;
+        default:
+          return messageContent.text;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(cs)("group-tip-message"))
+      }, toDisplayString(renderText()), 3);
+    };
+  }
+});
 export {
-  _ as GroupTipMessage
+  _sfc_main as GroupTipMessage
 };

package/dist/components/BarrageList/Message/Message.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../Message.vue_vue_type_script_setup_true_lang-mEw2syBo.js";
+import { Message as _sfc_main } from "./index.js";
 export {
   _sfc_main as default
 };

package/dist/components/BarrageList/Message/MessageLayout/MessageBubble/MessageBubble.js

@@ -1,8 +1,8 @@
 import { defineComponent, toRefs, computed, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, renderSlot, toDisplayString } from "vue";
-import ChatEngine from "@tencentcloud/chat-uikit-engine";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
 import { c as cs } from "../../../../../index-BF6QB9jF.js";
-import { useBarrageListState } from "../../../../../states/BarrageListState/BarrageListState.js";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { useBarrageListState } from "../../../../../states/BarrageListState/BarrageListState.js";
 import { _ as _export_sfc } from "../../../../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = {
   key: 0,
@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const { t } = useUIKit();
-    const MEDIA_MESSAGE_TYPE = [ChatEngine.TYPES.MSG_IMAGE, ChatEngine.TYPES.MSG_VIDEO];
+    const MEDIA_MESSAGE_TYPE = [TUIChatEngine.TYPES.MSG_IMAGE, TUIChatEngine.TYPES.MSG_VIDEO];
     const props = __props;
     const { message, isLastInChunk } = toRefs(props);
     const { highlightMessageIDList } = useBarrageListState();

package/dist/components/BarrageList/Message/MessageLayout/MessageLayout.js

@@ -1,9 +1,9 @@
 import { defineComponent, toRefs, computed, createBlock, createElementBlock, createCommentVNode, unref, openBlock, normalizeStyle, normalizeClass, createElementVNode, createVNode, toDisplayString, withCtx, resolveDynamicComponent } from "vue";
-import ChatEngine from "@tencentcloud/chat-uikit-engine";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
 import { c as cs } from "../../../../index-BF6QB9jF.js";
-import { _ as _sfc_main$2 } from "../../../../CustomMessage.vue_vue_type_script_setup_true_lang-By3MsAd0.js";
+import { CustomMessage as _sfc_main$2 } from "../CustomMessage/index.js";
 import FaceMessage from "../FaceMessage/FaceMessage.js";
-import { _ as _sfc_main$1 } from "../../../../GroupTipMessage.vue_vue_type_style_index_0_lang-Dw2-5Ner.js";
+import { GroupTipMessage as _sfc_main$1 } from "../GroupTipMessage/index.js";
 import ImageMessage from "../ImageMessage/ImageMessage.js";
 import MergerMessage from "../MergerMessage/MergerMessage.js";
 import RecalledMessage from "../RecalledMessage/RecalledMessage.js";
@@ -30,12 +30,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       style
     } = toRefs(props);
     const MessageComponentsFactory = {
-      [ChatEngine.TYPES.MSG_TEXT]: TextMessage,
-      [ChatEngine.TYPES.MSG_IMAGE]: ImageMessage,
-      [ChatEngine.TYPES.MSG_FACE]: FaceMessage,
-      [ChatEngine.TYPES.MSG_MERGER]: MergerMessage,
-      [ChatEngine.TYPES.MSG_CUSTOM]: _sfc_main$2,
-      [ChatEngine.TYPES.MSG_GRP_TIP]: _sfc_main$1
+      [TUIChatEngine.TYPES.MSG_TEXT]: TextMessage,
+      [TUIChatEngine.TYPES.MSG_IMAGE]: ImageMessage,
+      [TUIChatEngine.TYPES.MSG_FACE]: FaceMessage,
+      [TUIChatEngine.TYPES.MSG_MERGER]: MergerMessage,
+      [TUIChatEngine.TYPES.MSG_CUSTOM]: _sfc_main$2,
+      [TUIChatEngine.TYPES.MSG_GRP_TIP]: _sfc_main$1
     };
     const MessageComponent = computed(() => MessageComponentsFactory[message.value.type]);
     const isMessageOwner = computed(() => message.value.flow === "out");
@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         key: 0,
         class: "message-recalled",
         message: unref(message)
-      }, null, 8, ["message"])) : unref(message).type === unref(ChatEngine).TYPES.MSG_GRP_TIP || unref(message).type === unref(ChatEngine).TYPES.MSG_CUSTOM ? (openBlock(), createBlock(unref(_sfc_main$1), {
+      }, null, 8, ["message"])) : unref(message).type === unref(TUIChatEngine).TYPES.MSG_GRP_TIP || unref(message).type === unref(TUIChatEngine).TYPES.MSG_CUSTOM ? (openBlock(), createBlock(unref(_sfc_main$1), {
         key: 1,
         message: unref(message)
       }, null, 8, ["message"])) : MessageComponent.value ? (openBlock(), createElementBlock("div", {
@@ -72,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               })
             )
           }, [
-            unref(isLastInChunk) && unref(message).type !== unref(ChatEngine).TYPES.MSG_TEXT ? (openBlock(), createElementBlock("div", {
+            unref(isLastInChunk) && unref(message).type !== unref(TUIChatEngine).TYPES.MSG_TEXT ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(unref(cs)("message-layout__nick"))
             }, toDisplayString(unref(message).nick + ": "), 3)) : createCommentVNode("", true),

package/dist/components/BarrageList/Message/RecalledMessage/RecalledMessage.js

@@ -1,5 +1,5 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, Fragment, createTextVNode, createCommentVNode, toDisplayString } from "vue";
-import ChatEngine from "@tencentcloud/chat-uikit-engine";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { c as cs } from "../../../../index-BF6QB9jF.js";
 import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const setInputValue = (text) => {
       console.log("Set input value:", text);
     };
-    const isTextMessage = computed(() => props.message.type === ChatEngine.TYPES.MSG_TEXT);
+    const isTextMessage = computed(() => props.message.type === TUIChatEngine.TYPES.MSG_TEXT);
     const isMessageOwner = computed(() => props.message.flow === "out");
     const otherDisplayName = computed(() => props.message.nick || props.message.from || "");
     function recallMessageToInput() {

package/dist/components/BarrageList/Message/TextMessage/TextMessage.js

@@ -3,9 +3,9 @@ import { TUIStore } from "@tencentcloud/chat-uikit-engine";
 import { useUIKit, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
 import { c as cs } from "../../../../index-BF6QB9jF.js";
 import { useScroll } from "../../../../hooks/useScroll.js";
-import { useBarrageListState } from "../../../../states/BarrageListState/BarrageListState.js";
 import { safeJSONParse } from "../../../../utils/json.js";
 import { useMessageListContext } from "../../MessageListContext.js";
+import { useBarrageListState } from "../../../../states/BarrageListState/BarrageListState.js";
 import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = { class: "text-message" };
 const _hoisted_2 = { class: "text-message__reference__header" };