tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.7

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>>;

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

@@ -1,17 +1,12 @@
-import { defineComponent as T, toRefs as E, computed as c, createBlock as u, createElementBlock as _, createCommentVNode as n, unref as e, openBlock as l, normalizeStyle as k, normalizeClass as m, createElementVNode as p, createVNode as v, toDisplayString as C, withCtx as G, resolveDynamicComponent as P } from "vue";
-import a from "@tencentcloud/chat-uikit-engine";
-import { c as r } from "../../../../index-DPczIrgX.js";
-import { CustomMessage as h } from "../CustomMessage/index.js";
-import I from "../FaceMessage/FaceMessage.js";
-import { GroupTipMessage as g } from "../GroupTipMessage/index.js";
-import Y from "../ImageMessage/ImageMessage.js";
-import w from "../MergerMessage/MergerMessage.js";
-import R from "../RecalledMessage/RecalledMessage.js";
-import b from "../TextMessage/TextMessage.js";
-import x from "./MessageBubble/MessageBubble.js";
-import B from "./MessageMeta/MessageMeta.js";
-import { _ as N } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const L = ["data-message-id"], $ = /* @__PURE__ */ T({
+import { defineComponent as C, toRefs as h, computed as c, createElementBlock as i, createCommentVNode as p, openBlock as m, normalizeStyle as M, normalizeClass as o, unref as e, createElementVNode as d, createVNode as x, toDisplayString as I, withCtx as b, createBlock as w, resolveDynamicComponent as B } from "vue";
+import { c as l } from "../../../../index-DPczIrgX.js";
+import { useLoginState as N } from "../../../../states/LoginState.js";
+import { CustomMessage as L } from "../CustomMessage/index.js";
+import T from "../TextMessage/TextMessage.js";
+import S from "./MessageBubble/MessageBubble.js";
+import { BarrageType as n } from "../../../../states/BarrageState/BarrageState.js";
+import { _ as V } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const $ = ["data-message-id"], z = /* @__PURE__ */ C({
   __name: "MessageLayout",
   props: {
     message: { default: () => ({}) },
@@ -19,90 +14,70 @@ const L = ["data-message-id"], $ = /* @__PURE__ */ T({
     className: { default: "" },
     style: { default: () => ({}) }
   },
-  setup(f) {
-    const d = f, {
+  setup(_) {
+    const g = _, { loginUserInfo: f } = N(), {
       message: s,
-      isLastInChunk: t,
-      // messageActionList,
+      isLastInChunk: a,
       className: y,
-      style: M
-    } = E(d), S = {
-      [a.TYPES.MSG_TEXT]: b,
-      [a.TYPES.MSG_IMAGE]: Y,
-      [a.TYPES.MSG_FACE]: I,
-      [a.TYPES.MSG_MERGER]: w,
-      [a.TYPES.MSG_CUSTOM]: h,
-      [a.TYPES.MSG_GRP_TIP]: g
-    }, i = c(() => S[s.value.type]), o = c(() => s.value.flow === "out");
-    return (D, F) => e(s).isRevoked ? (l(), u(e(R), {
+      style: v
+    } = h(g), k = {
+      [n.text]: T,
+      [n.custom]: L
+    }, u = c(() => k[s.value.messageType]), t = c(() => {
+      var r;
+      return s.value.sender.userId === ((r = f.value) == null ? void 0 : r.userId);
+    });
+    return (r, D) => u.value ? (m(), i("div", {
       key: 0,
-      class: "message-recalled",
-      message: e(s)
-    }, null, 8, ["message"])) : e(s).type === e(a).TYPES.MSG_GRP_TIP || e(s).type === e(a).TYPES.MSG_CUSTOM ? (l(), u(e(g), {
-      key: 1,
-      message: e(s)
-    }, null, 8, ["message"])) : i.value ? (l(), _("div", {
-      key: 2,
-      "data-message-id": e(s).ID,
-      class: m(
-        e(r)(
+      "data-message-id": e(s).sequence,
+      class: o(
+        e(l)(
           "message-layout",
           {
-            "message-layout--self": o.value,
-            [`message-layout--not-last${o.value ? "--self" : ""}`]: !e(t)
+            "message-layout--self": t.value,
+            [`message-layout--not-last${t.value ? "--self" : ""}`]: !e(a)
           },
           e(y)
         )
       ),
-      style: k(e(M))
+      style: M(e(v))
     }, [
-      p("div", {
-        class: m(e(r)("message-layout__wrapper", { "message-layout__wrapper--self": o.value }))
+      d("div", {
+        class: o(e(l)("message-layout__wrapper", { "message-layout__wrapper--self": t.value }))
       }, [
-        p("div", {
-          class: m(
-            e(r)("message-layout__wrapper__middle", {
-              "message-layout__wrapper__middle--self": o.value
+        d("div", {
+          class: o(
+            e(l)("message-layout__wrapper__middle", {
+              "message-layout__wrapper__middle--self": t.value
             })
           )
         }, [
-          e(t) && e(s).type !== e(a).TYPES.MSG_TEXT ? (l(), _("div", {
+          e(a) && e(s).messageType !== e(n).text ? (m(), i("div", {
             key: 0,
-            class: m(e(r)("message-layout__nick"))
-          }, C(e(s).nick + ": "), 3)) : n("", !0),
-          v(e(x), {
-            class: m(
-              e(r)({
-                [`message-layout__bubble--last${o.value ? "--self" : ""}`]: e(t)
+            class: o(e(l)("message-layout__nick"))
+          }, I(e(s).sender.nameCard || e(s).sender.userName || e(s).sender.userId + ": "), 3)) : p("", !0),
+          x(e(S), {
+            class: o(
+              e(l)({
+                [`message-layout__bubble--last${t.value ? "--self" : ""}`]: e(a)
               })
             ),
             message: e(s),
-            "is-last-in-chunk": e(t)
+            "is-last-in-chunk": e(a)
           }, {
-            default: G(() => [
-              (l(), u(P(i.value), {
+            default: b(() => [
+              (m(), w(B(u.value), {
                 message: e(s),
-                "is-last-in-chunk": e(t)
+                "is-last-in-chunk": e(a)
               }, null, 8, ["message", "is-last-in-chunk"]))
             ]),
             _: 1
           }, 8, ["class", "message", "is-last-in-chunk"])
-        ], 2),
-        e(t) ? (l(), u(e(B), {
-          key: 0,
-          class: m(
-            e(r)("message-layout__meta", {
-              "message-layout__meta--self": o.value
-            })
-          ),
-          status: e(s).status,
-          "is-show-read-status": !0,
-          timestamp: e(s).time
-        }, null, 8, ["class", "status", "timestamp"])) : n("", !0)
+        ], 2)
       ], 2)
-    ], 14, L)) : n("", !0);
+    ], 14, $)) : p("", !0);
   }
-}), Z = /* @__PURE__ */ N($, [["__scopeId", "data-v-cd1d60a2"]]);
+}), G = /* @__PURE__ */ V(z, [["__scopeId", "data-v-340717fb"]]);
 export {
-  Z as default
+  G as default
 };

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

@@ -1,26 +1,24 @@
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { Barrage } from '../../../../states/BarrageState';
 
 interface IMessageLayoutProps {
-    message: IMessageModel;
+    message: Barrage;
     isLastInChunk?: boolean;
     className?: string;
     style?: Record<string, any>;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageLayoutProps>, {
-    message: () => IMessageModel;
+    message: () => Barrage;
     isLastInChunk: boolean;
-    messageActionList: () => never[];
     className: string;
     style: () => {};
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageLayoutProps>, {
-    message: () => IMessageModel;
+    message: () => Barrage;
     isLastInChunk: boolean;
-    messageActionList: () => never[];
     className: string;
     style: () => {};
 }>>> & Readonly<{}>, {
     style: Record<string, any>;
-    message: IMessageModel;
+    message: Barrage;
     className: string;
     isLastInChunk: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;