tuikit-atomicx-vue3 3.4.1 → 4.3.0

package/dist/components/BarrageList/BarrageListH5.js

@@ -1,151 +1,124 @@
-import { defineComponent as q, useSlots as J, ref as i, provide as Q, watch as w, nextTick as F, onMounted as W, onUnmounted as X, createElementBlock as k, openBlock as d, Fragment as $, createElementVNode as v, createVNode as N, createBlock as z, createCommentVNode as E, normalizeStyle as S, unref as r, withCtx as Y, renderList as Z, resolveDynamicComponent as ee, toDisplayString as O } from "vue";
-import te from "../../baseComp/ObserverView/ObserverView.js";
-import { throttle as oe } from "../../utils/lodash.js";
-import { useScroll as le } from "../../hooks/useScroll.js";
-import { Message as se } from "./Message/index.js";
-import re from "./MessageForward/MessageForward.js";
-import { MessageListContextSymbol as ae } from "./MessageListContext.js";
-import { useUIKit as ie } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent as K, useSlots as P, ref as i, provide as j, watch as N, nextTick as J, onMounted as Q, onUnmounted as R, createElementBlock as x, openBlock as p, normalizeStyle as _, createElementVNode as k, createBlock as q, createCommentVNode as w, Fragment as W, renderList as X, unref as r, resolveDynamicComponent as Y, toDisplayString as D } from "vue";
+import { useUIKit as Z } from "@tencentcloud/uikit-base-component-vue3";
+import { useScroll as ee } from "../../hooks/useScroll.js";
+import { useLoginState as te } from "../../states/LoginState.js";
+import { throttle as se } from "../../utils/lodash.js";
+import { useBarrageListState as oe } from "./BarrageListState.js";
 import ne from "./ClickAction/UserActionMenu.js";
-import { useLoginState as ue } from "../../states/LoginState.js";
-import { useLiveState as ce } from "../../states/LiveState/index.js";
-import { useBarrageListState as ve } from "../../states/BarrageListState/BarrageListState.js";
-import { _ as me } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const fe = { class: "message-chunk" }, de = {
+import { Message as le } from "./Message/index.js";
+import { MessageListContextSymbol as re } from "./MessageListContext.js";
+import { useLiveListState as ae } from "../../states/LiveListState/LiveListState.js";
+import { _ as ie } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const ue = { class: "message-chunk" }, ce = {
   key: 0,
   class: "message-group-tip"
-}, pe = { class: "message-group-tip-name" }, ge = { class: "message-group-tip-action" }, C = 150, he = /* @__PURE__ */ q({
+}, ve = { class: "message-group-tip-name" }, me = { class: "message-group-tip-action" }, T = 150, de = /* @__PURE__ */ K({
   __name: "BarrageListH5",
   props: {
-    messageAggregationTime: { default: 5 * 60 },
-    filter: { type: Function, default: void 0 },
     Message: { default: void 0 },
-    MessageTimeDivider: { default: void 0 },
-    LocalNoticeMessage: { default: void 0 },
     containerStyle: {},
     itemStyle: {},
     height: {},
     style: {}
   },
-  setup(U) {
-    const { t: L } = ie(), m = U, V = J(), { loginUserInfo: T } = ue(), { currentLive: G } = ce(), c = i({}), x = i(!1), H = i({}), I = i(null), K = (o) => {
-      if (!e.value)
+  setup(F) {
+    const { t: B } = Z(), c = F, O = P(), { loginUserInfo: I } = te(), { currentLive: M } = ae(), u = i(), C = i(!1), b = i({}), A = i(null), L = i(!1), g = i(!1), h = i(0), o = i(null), { messageList: y, messageGroupTip: v } = oe(), { scrollToBottom: E } = ee(), V = (e) => {
+      if (!o.value)
         return {
           position: "fixed",
-          top: `${o.bottom + 5}px`,
-          left: `${o.left}px`,
+          top: `${e.bottom + 5}px`,
+          left: `${e.left}px`,
           zIndex: 1e3
         };
-      const t = e.value.getBoundingClientRect(), l = 120, s = 10, n = 5;
-      let a = o.bottom + n;
-      return a + l > t.bottom - s && (a = o.top - l - n), a < t.top + s && (a = t.top + s), {
+      const t = o.value.getBoundingClientRect(), s = 120, n = 10, a = 5;
+      let l = e.bottom + a;
+      return l + s > t.bottom - n && (l = e.top - s - a), l < t.top + n && (l = t.top + n), {
         position: "fixed",
-        top: `${a}px`,
-        left: `${o.left}px`,
+        top: `${l}px`,
+        left: `${e.left}px`,
         zIndex: 1e3
       };
     };
-    Q(ae, {
-      slots: V,
-      nickClick: (o) => {
-        var u, A, D;
-        const { message: t, event: l } = o, s = ((u = T.value) == null ? void 0 : u.userId) === ((A = G.value) == null ? void 0 : A.liveOwner.userId), n = ((D = T.value) == null ? void 0 : D.userId) === t.from;
-        if (!s || n)
+    j(re, {
+      slots: O,
+      nickClick: (e) => {
+        var m, d, f;
+        const { message: t, event: s } = e, n = ((m = I.value) == null ? void 0 : m.userId) === ((d = M.value) == null ? void 0 : d.liveOwner.userId), a = ((f = I.value) == null ? void 0 : f.userId) === t.sender.userId;
+        if (!n || a)
           return;
-        c.value = t, I.value = l.currentTarget;
-        const a = l.currentTarget.getBoundingClientRect();
-        H.value = K(a), x.value = !0;
+        u.value = t, A.value = s.currentTarget;
+        const l = s.currentTarget.getBoundingClientRect();
+        b.value = V(l), C.value = !0;
       }
     });
-    const p = i(!1), g = i(!1), h = i(0), y = i(!1), e = i(null), { messageGroupTip: f, messageList: _, loadMoreMessage: P, currentConversationID: R } = ve(), { scrollToBottom: M } = le(), B = oe(() => {
-      e.value && (h.value = e.value.scrollHeight - e.value.scrollTop - e.value.clientHeight, h.value > C && (g.value = !0), h.value < C && (g.value = !1));
-    }, 100), b = async () => {
-      p.value = !1, g.value = !1;
-    }, j = async () => {
-      var t;
-      if (!p.value || y.value || !((t = _.value) != null && t.length))
-        return;
-      if (y.value = !0, !e.value) {
-        y.value = !1;
-        return;
-      }
-      const o = e.value.scrollHeight - e.value.scrollTop - e.value.clientHeight;
-      if (await P(), await F(), e.value) {
-        const l = e.value.scrollHeight - e.value.clientHeight - o;
-        e.value.scrollTop = Math.max(
-          0,
-          Math.min(e.value.scrollHeight - e.value.clientHeight, l)
-        );
-      }
-      y.value = !1;
+    const $ = se(() => {
+      o.value && (h.value = o.value.scrollHeight - o.value.scrollTop - o.value.clientHeight, h.value > T && (g.value = !0), h.value < T && (g.value = !1));
+    }, 100), H = async () => {
+      L.value = !1, g.value = !1;
+    };
+    N(() => {
+      var e;
+      return (e = M.value) == null ? void 0 : e.liveId;
+    }, () => {
+      H();
+    }), N(() => {
+      var e;
+      return (e = y.value) == null ? void 0 : e.length;
+    }, (e) => {
+      var n;
+      const t = y.value[e - 1], s = y.value[e - 2];
+      s === void 0 && t && !L.value && J(() => {
+        E({ behavior: "instant" }), L.value = !0;
+      }), !(!s || !t || !e) && (t == null ? void 0 : t.sequence) !== (s == null ? void 0 : s.sequence) && (t.sender.userId === ((n = I.value) == null ? void 0 : n.userId) || !g.value && h.value < T) && E({ behavior: "smooth" });
+    });
+    const G = () => {
+      const e = document.activeElement;
+      e && typeof e.blur == "function" && e.blur();
     };
-    return w(R, () => {
-      b();
-    }), w(_, (o, t) => {
-      if (t === void 0 && o && !p.value && F(() => {
-        M({ behavior: "instant" }), p.value = !0;
-      }), !t || !o || !o.length)
-        return;
-      const l = o[o.length - 1], s = t[t.length - 1];
-      (l == null ? void 0 : l.ID) !== (s == null ? void 0 : s.ID) && (l.flow === "out" || !g.value && h.value < C) && M({ behavior: "smooth" });
-    }), W(() => {
-      e.value && e.value.addEventListener("scroll", B), b();
-    }), X(() => {
-      e.value && e.value.removeEventListener("scroll", B);
-    }), (o, t) => {
-      var l, s, n, a;
-      return d(), k($, null, [
-        v("div", {
-          class: "message-list",
-          style: S({ height: m.height, ...m.style })
+    return Q(() => {
+      o.value && o.value.addEventListener("scroll", $), H();
+    }), R(() => {
+      o.value && o.value.removeEventListener("scroll", $);
+    }), (e, t) => {
+      var s, n, a, l, m, d, f, U, z;
+      return p(), x("div", {
+        class: "message-list",
+        style: _({ height: c.height, ...c.style })
+      }, [
+        k("div", {
+          id: "messageScrollList",
+          ref_key: "scrollContainer",
+          ref: o,
+          class: "message-list-container",
+          style: _(c.containerStyle),
+          onTouchstart: G
         }, [
-          v("div", {
-            id: "messageScrollList",
-            ref_key: "scrollContainer",
-            ref: e,
-            class: "message-list-container",
-            style: S(m.containerStyle)
-          }, [
-            N(r(te), {
-              root: "#messageScrollList",
-              rootMargin: "50px 0px 0px 0px",
-              threshold: 0.1,
-              onOnShow: j
-            }, {
-              default: Y(() => [...t[1] || (t[1] = [
-                v("div", { id: "loadMore" }, null, -1)
-              ])]),
-              _: 1
-            }),
-            v("div", fe, [
-              (d(!0), k($, null, Z(r(_), (u) => (d(), z(ee(m.Message || r(se)), {
-                key: u.ID + u.isRevoked + u.status,
-                class: "message-item",
-                style: S(m.itemStyle),
-                message: u,
-                "is-last-in-chunk": !0
-              }, null, 8, ["style", "message"]))), 128))
-            ])
-          ], 4),
-          r(f) ? (d(), k("div", de, [
-            v("div", pe, O(((l = r(f)) == null ? void 0 : l.nameCard) || ((s = r(f)) == null ? void 0 : s.userName) || ((n = r(f)) == null ? void 0 : n.userId)), 1),
-            v("div", ge, O(((a = r(f)) == null ? void 0 : a.displayAction) === "enter" ? r(L)("Come in") : r(L)("Leave")), 1)
-          ])) : E("", !0)
-        ], 4),
-        N(r(re)),
-        x.value ? (d(), z(ne, {
+          k("div", ue, [
+            (p(!0), x(W, null, X(r(y), (S) => (p(), q(Y(c.Message || r(le)), {
+              key: S.sequence + S.timestampInSecond,
+              style: _(c.itemStyle),
+              message: S,
+              "is-last-in-chunk": !0
+            }, null, 8, ["style", "message"]))), 128))
+          ]),
+          r(v) ? (p(), x("div", ce, [
+            k("div", ve, D(((s = r(v)) == null ? void 0 : s.nameCard) || ((n = r(v)) == null ? void 0 : n.userName) || ((a = r(v)) == null ? void 0 : a.userId)), 1),
+            k("div", me, D(((l = r(v)) == null ? void 0 : l.displayAction) === "enter" ? r(B)("Come in") : r(B)("Leave")), 1)
+          ])) : w("", !0)
+        ], 36),
+        C.value && u.value ? (p(), q(ne, {
           key: 0,
-          "user-id": c.value.from,
-          "user-name": c.value.nameCard || c.value.nick || c.value.from,
-          "avatar-url": c.value.avatar,
-          style: S(H.value),
-          "click-target": I.value,
-          onClose: t[0] || (t[0] = (u) => x.value = !1)
-        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : E("", !0)
-      ], 64);
+          "user-id": (m = u.value) == null ? void 0 : m.sender.userId,
+          "user-name": ((d = u.value) == null ? void 0 : d.sender.nameCard) || ((f = u.value) == null ? void 0 : f.sender.userName) || ((U = u.value) == null ? void 0 : U.sender.userId),
+          "avatar-url": (z = u.value) == null ? void 0 : z.sender.avatarUrl,
+          style: _(b.value),
+          "click-target": A.value,
+          onClose: t[0] || (t[0] = (S) => C.value = !1)
+        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : w("", !0)
+      ], 4);
     };
   }
-}), Ae = /* @__PURE__ */ me(he, [["__scopeId", "data-v-2787bca3"]]);
+}), xe = /* @__PURE__ */ ie(de, [["__scopeId", "data-v-c0c678f4"]]);
 export {
-  Ae as default
+  xe as default
 };

package/dist/components/BarrageList/BarrageListH5.vue.d.ts

@@ -1,47 +1,18 @@
 import { Component, CSSProperties } from 'vue';
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
 interface IMessageListProps {
-    /** message actions e.g. recall, delete, etc. */
-    /** 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;
     style?: CSSProperties;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
-    /** props */
-    filter: undefined;
-    enableReadReceipt: boolean;
-    messageAggregationTime: number;
-    /** custom components */
     Message: undefined;
-    MessageTimeDivider: undefined;
-    LocalNoticeMessage: undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
-    /** props */
-    filter: undefined;
-    enableReadReceipt: boolean;
-    messageAggregationTime: number;
-    /** custom components */
     Message: undefined;
-    MessageTimeDivider: undefined;
-    LocalNoticeMessage: undefined;
 }>>> & Readonly<{}>, {
-    filter: (message: IMessageModel) => boolean;
     Message: Component;
-    messageAggregationTime: number;
-    MessageTimeDivider: Component;
-    LocalNoticeMessage: Component;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/components/BarrageList/BarrageListState.d.ts

@@ -0,0 +1,58 @@
+import { Barrage } from '../../states/BarrageState';
+
+interface IMessageGroupTip {
+    avatarUrl: string;
+    nameCard: string;
+    roomCustomInfo: Record<string, any>;
+    userId: string;
+    userName: string;
+    userRole: number;
+    displayAction: 'enter' | 'leave';
+}
+declare function useBarrageListState(): {
+    messageList: import('vue').Ref<{
+        messageType: import('../../states/BarrageState').BarrageType;
+        textContent?: string | undefined;
+        extensionInfo?: (Record<string, string> | null) | undefined;
+        businessId?: string | undefined;
+        data?: string | undefined;
+        liveId: string;
+        sender: {
+            userId: string;
+            userName: string;
+            nameCard: string;
+            avatarUrl: string;
+            userRole: import('@tencentcloud/tuiroom-engine-js').TUIRole;
+            hasAudioStream: boolean;
+            hasVideoStream: boolean;
+            hasScreenStream: boolean;
+            isMessageDisabled: boolean;
+            roomCustomInfo: Record<string, any>;
+        };
+        sequence: number;
+        timestampInSecond: number;
+    }[], Barrage[] | {
+        messageType: import('../../states/BarrageState').BarrageType;
+        textContent?: string | undefined;
+        extensionInfo?: (Record<string, string> | null) | undefined;
+        businessId?: string | undefined;
+        data?: string | undefined;
+        liveId: string;
+        sender: {
+            userId: string;
+            userName: string;
+            nameCard: string;
+            avatarUrl: string;
+            userRole: import('@tencentcloud/tuiroom-engine-js').TUIRole;
+            hasAudioStream: boolean;
+            hasVideoStream: boolean;
+            hasScreenStream: boolean;
+            isMessageDisabled: boolean;
+            roomCustomInfo: Record<string, any>;
+        };
+        sequence: number;
+        timestampInSecond: number;
+    }[]>;
+    messageGroupTip: import('vue').Ref<IMessageGroupTip | undefined, IMessageGroupTip | undefined>;
+};
+export { useBarrageListState };

package/dist/components/BarrageList/BarrageListState.js

@@ -0,0 +1,106 @@
+import { ref as o, watch as d, onUnmounted as M } from "vue";
+import { TUIRoomEvents as m } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as S } from "../../hooks/useRoomEngine.js";
+import { useLiveListState as T } from "../../states/LiveListState/LiveListState.js";
+import { useBarrageState as _ } from "../../states/BarrageState/BarrageState.js";
+const n = S(), { currentLive: C } = T(), { messageList: f } = _(), v = o(), i = o([]), g = o(0), r = o([]), c = o(!1), a = o([]), p = o(!1), E = 1e3, G = 2e3, A = 1e3, L = 20, w = 10;
+let l = null, u = null;
+const h = () => {
+  n.instance && l && (n.instance.off(m.onRemoteUserEnterRoom, l), l = null), n.instance && u && (n.instance.off(m.onRemoteUserLeaveRoom, u), u = null);
+}, P = (e) => {
+  if (e.length <= E)
+    return e;
+  const t = e.length - E;
+  return e.slice(t);
+}, Q = async () => {
+  if (!(c.value || r.value.length === 0)) {
+    c.value = !0;
+    try {
+      let e = [];
+      for (; r.value.length > 0; ) {
+        const t = r.value.splice(0, 1)[0];
+        e.push(...t);
+        const s = [...i.value || [], ...e];
+        i.value = P(s), e = [], r.value.length > 0 && await new Promise((U) => setTimeout(U, A));
+      }
+    } finally {
+      c.value = !1;
+    }
+  }
+}, y = (e) => {
+  const t = e.slice(g.value);
+  if (g.value = e.length, t.length === 0) {
+    i.value = e;
+    return;
+  }
+  for (let s = 0; s < t.length; s += L)
+    r.value.push(t.slice(s, s + L));
+  Q();
+}, N = async () => {
+  if (!(p.value || a.value.length === 0)) {
+    p.value = !0;
+    try {
+      for (; a.value.length > 0; ) {
+        const e = a.value.splice(0, 1)[0];
+        v.value = e, await new Promise((t) => {
+          setTimeout(t, G);
+        }), v.value = void 0;
+      }
+    } catch (e) {
+      console.error("[BarrageListState] processMessageGroupTipQueue error", e);
+    } finally {
+      p.value = !1;
+    }
+  }
+}, R = (e) => {
+  a.value.push(e), a.value.length > w && (a.value = a.value.slice(-2)), N();
+}, B = () => {
+  var e, t;
+  h(), l = ({ userInfo: s }) => {
+    R({
+      avatarUrl: s.avatarUrl,
+      nameCard: s.nameCard,
+      roomCustomInfo: s.roomCustomInfo,
+      userId: s.userId,
+      userName: s.userName,
+      userRole: s.userRole,
+      displayAction: "enter"
+    });
+  }, u = ({ userInfo: s }) => {
+    R({
+      avatarUrl: s.avatarUrl,
+      nameCard: s.nameCard,
+      roomCustomInfo: s.roomCustomInfo,
+      userId: s.userId,
+      userName: s.userName,
+      userRole: s.userRole,
+      displayAction: "leave"
+    });
+  }, l && ((e = n.instance) == null || e.on(m.onRemoteUserEnterRoom, l)), u && ((t = n.instance) == null || t.on(m.onRemoteUserLeaveRoom, u));
+};
+d(() => f.value.length, (e) => {
+  e > 0 && y(f.value);
+}, {
+  immediate: !0
+});
+const O = () => {
+  i.value = [], g.value = 0, r.value = [], c.value = !1, v.value = void 0, a.value = [];
+};
+d(() => {
+  var e;
+  return (e = C.value) == null ? void 0 : e.liveId;
+}, (e, t) => {
+  !e && t ? O() : B();
+});
+M(() => {
+  h();
+});
+function Y() {
+  return {
+    messageList: i,
+    messageGroupTip: v
+  };
+}
+export {
+  Y as useBarrageListState
+};

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

@@ -1,37 +1,29 @@
-import { defineComponent as f, toRefs as _, computed as n, createElementBlock as i, openBlock as l, normalizeClass as b, unref as e, createCommentVNode as v, renderSlot as E, toDisplayString as I } from "vue";
-import r from "@tencentcloud/chat-uikit-engine";
-import { c as M } from "../../../../../index-DPczIrgX.js";
-import { useUIKit as k } from "@tencentcloud/uikit-base-component-vue3";
-import { useBarrageListState as S } from "../../../../../states/BarrageListState/BarrageListState.js";
-import { _ as C } from "../../../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const y = {
-  key: 0,
-  class: "has-risk-content"
-}, B = /* @__PURE__ */ f({
+import { defineComponent as c, toRefs as f, createElementBlock as m, openBlock as d, normalizeClass as i, unref as e, renderSlot as p } from "vue";
+import { c as b } from "../../../../../index-DPczIrgX.js";
+import { useLoginState as _ } from "../../../../../states/LoginState.js";
+import { _ as g } from "../../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const I = /* @__PURE__ */ c({
   __name: "MessageBubble",
   props: {
     message: { default: () => ({}) },
     isLastInChunk: { type: Boolean, default: !1 }
   },
-  setup(c) {
-    const { t: u } = k(), t = [r.TYPES.MSG_IMAGE, r.TYPES.MSG_VIDEO], m = c, { message: s, isLastInChunk: d } = _(m), { highlightMessageIDList: p } = S(), g = n(() => t.includes(s.value.type)), o = n(() => p.value.includes(s.value.ID)), { flow: a } = s.value;
-    return (h, D) => (l(), i("div", {
-      class: b([
+  setup(t) {
+    var o;
+    const { loginUserInfo: a } = _(), n = t, { message: r, isLastInChunk: l } = f(n), s = r.value.sender.userId === ((o = a.value) == null ? void 0 : o.userId) ? "in" : "out";
+    return (u, v) => (d(), m("div", {
+      class: i([
         "message-bubble",
-        e(M)({
-          [`bubble-${e(a)}`]: e(a) && !0,
-          "all-round-radius": !e(d),
-          "no-background": t.includes(e(s).type),
-          "highlight--normal": o.value,
-          "highlight--media": o.value && g.value
+        e(b)({
+          [`bubble-${e(s)}`]: e(s) && !0,
+          "all-round-radius": !e(l)
         })
       ])
     }, [
-      e(s).hasRiskContent ? (l(), i("div", y, I(e(u)("This message contains risky content")), 1)) : v("", !0),
-      E(h.$slots, "default", {}, void 0, !0)
+      p(u.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), x = /* @__PURE__ */ C(B, [["__scopeId", "data-v-2548c596"]]);
+}), L = /* @__PURE__ */ g(I, [["__scopeId", "data-v-c2f22426"]]);
 export {
-  x as default
+  L as default
 };

package/dist/components/BarrageList/Message/MessageLayout/MessageBubble/MessageBubble.vue.d.ts

@@ -1,20 +1,20 @@
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { Barrage } from '../../../../../states/BarrageState';
 
 interface IMessageBubbleProps {
-    message: IMessageModel;
+    message: Barrage;
     isLastInChunk: boolean;
 }
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageBubbleProps>, {
-    message: () => IMessageModel;
+    message: () => Barrage;
     isLastInChunk: boolean;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageBubbleProps>, {
-    message: () => IMessageModel;
+    message: () => Barrage;
     isLastInChunk: boolean;
 }>>> & Readonly<{}>, {
-    message: IMessageModel;
+    message: Barrage;
     isLastInChunk: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;