tuikit-atomicx-vue3 4.5.4 → 5.0.0

package/dist/components/ASRTools/RealtimeMessageList.js

@@ -0,0 +1,70 @@
+import { defineComponent as M, ref as d, onMounted as k, computed as x, watch as I, nextTick as L, createElementBlock as a, openBlock as l, Fragment as f, renderList as v, createElementVNode as c, toDisplayString as m, unref as _ } from "vue";
+import { formatTimestampToTime as y } from "../../utils/utils.js";
+import { getDisplayName as S } from "./utils.js";
+import { useAITranscriberState as B } from "../../states/AITranscriberState/AITranscriberState.js";
+import { _ as R } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const A = { class: "title" }, C = { class: "speaker" }, E = { class: "timestamp" }, H = 60 * 1e3, b = /* @__PURE__ */ M({
+  __name: "RealtimeMessageList",
+  setup(w) {
+    const r = d(), i = d(!1), { realtimeMessageList: u } = B(), h = () => {
+      if (!r.value)
+        return !1;
+      const { scrollTop: n, scrollHeight: o, clientHeight: e } = r.value;
+      return Math.ceil(n + e) >= o - 50;
+    }, p = () => {
+      !r.value || i.value || requestAnimationFrame(() => {
+        r.value && (r.value.scrollTop = r.value.scrollHeight);
+      });
+    };
+    k(() => {
+      p();
+    });
+    const g = () => {
+      r.value && (i.value = !h());
+    }, T = x(() => {
+      const n = u.value.filter((t) => {
+        var s;
+        return (s = t.sourceText) == null ? void 0 : s.trim();
+      }).sort((t, s) => t.timestamp - s.timestamp);
+      if (n.length === 0)
+        return [];
+      const o = [];
+      let e = null;
+      return n.forEach((t) => {
+        const s = t.speakerUserId || "unknown";
+        !e || s !== e.sender || t.timestamp - e.startMsTs > H ? (e = {
+          sender: s,
+          startMsTs: t.timestamp,
+          messages: [t]
+        }, o.push(e)) : e.messages.push(t);
+      }), o;
+    });
+    return I(() => u.value.length, () => {
+      L(() => {
+        i.value || p();
+      });
+    }), (n, o) => (l(), a("div", {
+      ref_key: "conversationContainerRef",
+      ref: r,
+      class: "conversation",
+      onScroll: g
+    }, [
+      (l(!0), a(f, null, v(T.value, (e) => (l(), a("div", {
+        key: `${e.sender}-${e.startMsTs}`,
+        class: "conversation-group"
+      }, [
+        c("div", A, [
+          c("span", C, m(_(S)(e.sender)), 1),
+          c("span", E, m(_(y)(e.startMsTs)), 1)
+        ]),
+        (l(!0), a(f, null, v(e.messages, (t, s) => (l(), a("div", {
+          key: t.segmentId || s,
+          class: "content"
+        }, m(t.sourceText), 1))), 128))
+      ]))), 128))
+    ], 544));
+  }
+}), q = /* @__PURE__ */ R(b, [["__scopeId", "data-v-569c9de5"]]);
+export {
+  q as default
+};

package/dist/components/ASRTools/RealtimeMessageList.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ASRTools/Subtitle.js

@@ -0,0 +1,51 @@
+import { defineComponent as M, ref as h, onMounted as C, computed as S, onUnmounted as k, createElementBlock as i, createCommentVNode as x, openBlock as a, Fragment as E, renderList as y, createElementVNode as m, toDisplayString as p, unref as N } from "vue";
+import { getDisplayName as R } from "./utils.js";
+import { useAITranscriberState as D } from "../../states/AITranscriberState/AITranscriberState.js";
+import { RealtimeTranscriberEvent as b } from "../../types/asr.js";
+import { _ as j } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const B = {
+  key: 0,
+  class: "asr-subtitle"
+}, O = { class: "subtitle-speaker" }, U = { class: "subtitle-text" }, V = /* @__PURE__ */ M({
+  __name: "Subtitle",
+  setup(w) {
+    const { subscribeEvent: v, unsubscribeEvent: _ } = D(), n = h({}), s = {}, r = {}, f = (e, t) => {
+      s[e] && clearTimeout(s[e]), s[e] = setTimeout(t, 3e3);
+    }, g = (e) => {
+      const { speakerUserId: t } = e, o = n.value[t], T = r[t];
+      if (e.isCompleted && T === e.segmentId)
+        return;
+      if (!e.isCompleted) {
+        s[t] && (clearTimeout(s[t]), delete s[t]), delete r[t], n.value[t] = e;
+        return;
+      }
+      const I = !o || o.segmentId !== e.segmentId || !o.isCompleted;
+      n.value[t] = e, I && (r[t] = e.segmentId, f(t, () => {
+        var u, d;
+        (u = n.value[t]) != null && u.isCompleted && ((d = n.value[t]) == null ? void 0 : d.segmentId) === e.segmentId && delete n.value[t], delete s[t], delete r[t];
+      }));
+    }, c = (e) => {
+      g(e.message);
+    };
+    C(() => {
+      v(b.onReceiveTranscriberMessage, c);
+    });
+    const l = S(() => Object.values(n.value));
+    return k(() => {
+      _(b.onReceiveTranscriberMessage, c), Object.values(s).forEach((e) => {
+        clearTimeout(e);
+      });
+    }), (e, t) => l.value.length ? (a(), i("div", B, [
+      (a(!0), i(E, null, y(l.value, (o) => (a(), i("div", {
+        key: o.speakerUserId,
+        class: "subtitle-item"
+      }, [
+        m("span", O, p(N(R)(o.speakerUserId)) + "：", 1),
+        m("span", U, p(o.sourceText), 1)
+      ]))), 128))
+    ])) : x("", !0);
+  }
+}), z = /* @__PURE__ */ j(V, [["__scopeId", "data-v-0c248ab0"]]);
+export {
+  z as default
+};

package/dist/components/ASRTools/Subtitle.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,4 @@
+import { default as RealtimeMessageList } from './RealtimeMessageList.vue';
+import { default as Subtitle } from './Subtitle.vue';
+
+export { Subtitle, RealtimeMessageList };

package/dist/components/ASRTools/index.js

@@ -0,0 +1,6 @@
+import { default as a } from "./RealtimeMessageList.js";
+import { default as f } from "./Subtitle.js";
+export {
+  a as RealtimeMessageList,
+  f as Subtitle
+};

package/dist/components/ASRTools/utils.d.ts

@@ -0,0 +1 @@
+export declare const getDisplayName: (userId: string) => string;

package/dist/components/ASRTools/utils.js

@@ -0,0 +1,8 @@
+import { useRoomParticipantState as m } from "../../states/RoomParticipantState/index.js";
+const { participantList: r } = m(), t = (o) => {
+  const e = r.value.find((s) => s.userId === o);
+  return (e == null ? void 0 : e.nameCard) || (e == null ? void 0 : e.userName) || (e == null ? void 0 : e.userId) || o;
+};
+export {
+  t as getDisplayName
+};

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

@@ -1,3 +1,32 @@
+/**
+ * @module AudioSettingPanelComponent
+ * @description 音频设置面板组件
+ *
+ * 用于展示音频设置面板，支持自定义视图展示。
+ *
+ * @props
+ * @prop {boolean} micTestVisible - 是否显示麦克风测试按钮，默认 true
+ * @prop {boolean} inputVolumeLevelVisible - 是否显示输入音量等级，默认 true
+ * @prop {boolean} inputVolumeVisible - 是否支持输入音量设置，默认 true
+ * @prop {boolean} speakerTestVisible - 是否支持扬声器测试，默认 true
+ * @prop {boolean} outputVolumeVisible - 是否支持输出音量设置，默认 true
+ *
+ * @example
+ * <template>
+ *   <AudioSettingPanel />
+ * </template>
+ *
+ * <script setup>
+ * import { AudioSettingPanel } from '@tuikit-atomicx-vue3/room';
+ * </script>
+ *
+ * <style scoped>
+ * .audio-setting-panel-container {
+ *   width: 400px;
+ *   height: 300px;
+ * }
+ * </style>
+ */
 declare const AudioSettingPanel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     micTestVisible: {
         type: BooleanConstructor;

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

@@ -1,5 +1,49 @@
 import { default as Avatar } from './Avatar.vue';
 import { DEFAULT_USER_AVATAR, DEFAULT_GROUP_AVATAR_WORK, DEFAULT_GROUP_AVATAR_PUBLIC, DEFAULT_GROUP_AVATAR_MEETING, DEFAULT_GROUP_AVATAR_AVCHATROOM, DEFAULT_GROUP_AVATAR_COMMON } from './constants/avatar';
 
+/**
+ * 头像组件
+ * @component Avatar
+ * @description 头像组件，用于展示用户或群组头像，支持图片、文字、在线状态和未读消息徽章等功能。
+ *
+ * @props
+ * @prop {string} src - 头像图片 URL
+ * @prop {'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number} size - 头像尺寸，支持预设尺寸或自定义数值，默认 'md'
+ * @prop {'circular' | 'square' | 'rounded'} shape - 头像形状，圆形/方形/圆角，默认 'circular'
+ * @prop {string} alt - 图片替代文本，也用于生成文字头像
+ * @prop {string} className - 自定义类名
+ * @prop {CSSProperties} style - 自定义样式
+ * @prop {boolean} isShowOnlineStatus - 是否显示在线状态指示器，默认 false
+ * @prop {boolean} isOnline - 用户是否在线
+ * @prop {number} unreadCount - 未读消息数量，为 true 时显示小红点，为数字时显示具体数量
+ * @prop {number} maxUnreadCount - 最大未读消息数量，超过时显示 max+，默认 99
+ * @prop {boolean} isDotUnreadCount - 是否以小红点形式显示未读消息，默认 false
+ *
+ * @emits
+ * @emit {void} click - 点击头像时触发（通过 onClick prop 传入）
+ *
+ * @example
+ * <template>
+ *   <Avatar
+ *     :src="userAvatar"
+ *     size="lg"
+ *     shape="circular"
+ *     :is-show-online-status="true"
+ *     :is-online="true"
+ *     :unread-count="5"
+ *     @click="handleClick"
+ *   />
+ * </template>
+ *
+ * <script setup>
+ * import { Avatar } from 'tuikit-atomicx-vue3';
+ *
+ * const userAvatar = 'https://example.com/avatar.png';
+ *
+ * function handleClick() {
+ *   console.log('Avatar clicked');
+ * }
+ * </script>
+ */
 export { Avatar, DEFAULT_USER_AVATAR, DEFAULT_GROUP_AVATAR_WORK, DEFAULT_GROUP_AVATAR_PUBLIC, DEFAULT_GROUP_AVATAR_MEETING, DEFAULT_GROUP_AVATAR_AVCHATROOM, DEFAULT_GROUP_AVATAR_COMMON, };
 export type { AvatarSize, AvatarShape, AvatarProps } from './Avatar.vue';

package/dist/components/BarrageInput/BarrageInput.js

@@ -64,7 +64,7 @@ const H = { class: "live-message-input" }, F = { class: "input-actions" }, E = /
       ], 6)
     ]));
   }
-}), N = /* @__PURE__ */ C(E, [["__scopeId", "data-v-634306b9"]]);
+}), N = /* @__PURE__ */ C(E, [["__scopeId", "data-v-5f074ba6"]]);
 export {
   N as default
 };

package/dist/components/BarrageInput/BarrageInputH5.js

@@ -22,11 +22,11 @@ const Z = { class: "live-message-input-h5" }, $ = { class: "input-actions" }, ee
     maxLength: { default: 80 }
   },
   emits: ["focus", "blur"],
-  setup(x, { emit: w }) {
-    const c = w, { t: o } = z(), e = x, d = i(() => e.placeholder || o("Say something")), { loginUserInfo: b } = q(), { audienceList: B } = O(), C = i(() => ["message-input-container-h5", e.containerClass].join(" ")), h = i(() => {
+  setup(x, { emit: b }) {
+    const c = b, { t: o } = z(), e = x, d = i(() => e.placeholder || o("Say something")), { loginUserInfo: w } = q(), { audienceList: B } = O(), C = i(() => ["message-input-container-h5", e.containerClass].join(" ")), h = i(() => {
       const t = B.value.find((p) => {
         var f;
-        return p.userId === ((f = b.value) == null ? void 0 : f.userId);
+        return p.userId === ((f = w.value) == null ? void 0 : f.userId);
       });
       return e.disabled || (t == null ? void 0 : t.isMessageDisabled);
     }), { inputRawValue: m, setContent: I, sendMessage: T, blurEditor: E, focusEditor: H } = J(), n = r(!1), s = r(!1), l = r(!1), k = () => {
@@ -95,7 +95,7 @@ const Z = { class: "live-message-input-h5" }, $ = { class: "input-actions" }, ee
       })) : u("", !0)
     ]));
   }
-}), ce = /* @__PURE__ */ Y(ee, [["__scopeId", "data-v-fcdaa865"]]);
+}), ce = /* @__PURE__ */ Y(ee, [["__scopeId", "data-v-b8b202e0"]]);
 export {
   ce as default
 };

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

@@ -1,4 +1,4 @@
-import { E as l, P as h, a as f } from "../../../index-DuAffztD.js";
+import { E as l, P as h, a as f } from "../../../index-HtVpxdZh.js";
 const m = l.create({
   name: "characterCount",
   addOptions() {

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

@@ -1,9 +1,9 @@
-import { I as u } from "../../../index-hHVD-MG2.js";
-import { S as g, P as x } from "../../../index-CTthrJb2.js";
-import { E as p } from "../../../index-DXC5bPY4.js";
+import { I as u } from "../../../index-CuUwOoxX.js";
+import { S as g, P as x } from "../../../index-BEX5WhEf.js";
+import { E as p } from "../../../index-D5A7Nao-.js";
 import { isMobile as y } from "../../../utils/environment.js";
 import { CharacterCount as M } from "./CharacterCountExtension.js";
-import { E as T } from "../../../index-DuAffztD.js";
+import { E as T } from "../../../index-HtVpxdZh.js";
 import { MessageContentType as a } from "../../../states/MessageInputState/type.js";
 function b() {
   return u.extend({

package/dist/components/BarrageList/BarrageList.js

@@ -1,21 +1,26 @@
-import { defineComponent as K, ref as i, useSlots as j, provide as J, watch as F, nextTick as Q, onMounted as R, onUnmounted as W, createElementBlock as k, openBlock as c, Fragment as H, createElementVNode as h, createBlock as O, createCommentVNode as M, normalizeStyle as C, renderList as X, unref as l, resolveDynamicComponent as Y, toDisplayString as T } 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 { 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 = {
+import { defineComponent as Q, ref as i, useSlots as W, provide as X, watch as V, nextTick as Z, onMounted as ee, onUnmounted as te, createElementBlock as S, openBlock as u, Fragment as M, createElementVNode as h, createBlock as x, createCommentVNode as T, normalizeStyle as I, renderList as se, unref as n, resolveDynamicComponent as oe, toDisplayString as b } from "vue";
+import { useUIKit as ne } from "@tencentcloud/uikit-base-component-vue3";
+import { useScroll as re } from "../../hooks/useScroll.js";
+import { useLoginState as ae } from "../../states/LoginState.js";
+import { throttle as le } from "../../utils/lodash.js";
+import { useBarrageListState as ie, isGiftMessage as ue } from "./BarrageListState.js";
+import ce from "./ClickAction/UserActionMenu.js";
+import { Message as me } from "./Message/index.js";
+import { MessageListContextSymbol as ve } from "./MessageListContext.js";
+import { LiveGiftEvents as H } from "../../types/gift.js";
+import { BarrageType as de } from "../../types/barrage.js";
+import { useLiveListState as fe } from "../../states/LiveListState/LiveListState.js";
+import { useLiveGiftState as pe } from "../../states/LiveGiftState/LiveGiftState.js";
+import ge from "./Message/GiftMessage/GiftMessage.js";
+import { useBarrageState as ye } from "../../states/BarrageState/BarrageState.js";
+import { _ as Se } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const he = { class: "message-chunk" }, Ie = {
   key: 0,
   class: "empty-message"
-}, ve = {
+}, _e = {
   key: 0,
   class: "message-group-tip"
-}, me = { class: "message-group-tip-name" }, de = { class: "message-group-tip-action" }, b = 150, pe = /* @__PURE__ */ K({
+}, Le = { class: "message-group-tip-name" }, Ce = { class: "message-group-tip-action" }, G = 150, ke = /* @__PURE__ */ Q({
   __name: "BarrageList",
   props: {
     Message: { default: void 0 },
@@ -25,100 +30,128 @@ const ue = { class: "message-chunk" }, ce = {
     style: {}
   },
   setup(P) {
-    const { t: I } = Z(), v = P, o = i(null), V = j(), { loginUserInfo: L } = te(), { currentLive: A } = ae(), u = i(), x = i(!1), $ = i({}), N = i(null), B = i(!1), y = i(!1), _ = i(0), { messageList: m, messageGroupTip: d } = oe(), { scrollToBottom: U } = ee(), G = (e) => {
-      if (!o.value)
+    const { t: C } = ne(), m = P, r = i(null), R = W(), { loginUserInfo: k } = ae(), { currentLive: A } = fe(), c = i(), E = i(!1), N = i({}), $ = i(null), B = i(!1), _ = i(!1), L = i(0), { messageList: v, messageGroupTip: f } = ie(), { appendLocalTip: J } = ye(), { subscribeEvent: K, unsubscribeEvent: Y } = pe(), { scrollToBottom: q } = re(), F = (e) => {
+      const t = v.value.at(-1);
+      let s = 0;
+      t && (s = t.sequence + 1);
+      const o = {
+        liveId: e.liveId,
+        sender: e.sender,
+        sequence: s,
+        timestampInSecond: Date.now() / 1e3,
+        messageType: de.custom,
+        textContent: "",
+        extensionInfo: null,
+        businessId: "gift",
+        data: JSON.stringify({
+          type: "gift",
+          giftInfo: e.giftInfo,
+          count: e.giftCount
+        })
+      };
+      J(o);
+    }, j = (e) => {
+      if (!r.value)
         return {
           position: "fixed",
           top: `${e.bottom + 5}px`,
           left: `${e.left}px`,
           zIndex: 1e3
         };
-      const t = o.value.getBoundingClientRect(), s = 120, n = 10, a = 5;
-      let r = e.bottom + a;
-      return r + s > t.bottom - n && (r = e.top - s - a), r < t.top + n && (r = t.top + n), {
+      const t = r.value.getBoundingClientRect(), s = 120, o = 10, l = 5;
+      let a = e.bottom + l;
+      return a + s > t.bottom - o && (a = e.top - s - l), a < t.top + o && (a = t.top + o), {
         position: "fixed",
-        top: `${r}px`,
+        top: `${a}px`,
         left: `${e.left}px`,
         zIndex: 1e3
       };
     };
-    J(re, {
-      slots: V,
+    X(ve, {
+      slots: R,
       nickClick: (e) => {
-        var p, f, g;
-        const { message: t, event: s } = e, n = ((p = L.value) == null ? void 0 : p.userId) === ((f = A.value) == null ? void 0 : f.liveOwner.userId), a = ((g = L.value) == null ? void 0 : g.userId) === t.sender.userId;
-        if (!n || a)
+        var p, g, y;
+        const { message: t, event: s } = e, o = ((p = k.value) == null ? void 0 : p.userId) === ((g = A.value) == null ? void 0 : g.liveOwner.userId), l = ((y = k.value) == null ? void 0 : y.userId) === t.sender.userId;
+        if (!o || l)
           return;
-        u.value = t, N.value = s.currentTarget;
-        const r = s.currentTarget.getBoundingClientRect();
-        $.value = G(r), x.value = !0;
+        c.value = t, $.value = s.currentTarget;
+        const a = s.currentTarget.getBoundingClientRect();
+        N.value = j(a), E.value = !0;
       }
     });
-    const z = se(() => {
-      o.value && (_.value = o.value.scrollHeight - o.value.scrollTop - o.value.clientHeight, _.value > b && (y.value = !0), _.value < b && (y.value = !1));
-    }, 100), E = async () => {
-      B.value = !1, y.value = !1;
+    const O = le(() => {
+      r.value && (L.value = r.value.scrollHeight - r.value.scrollTop - r.value.clientHeight, L.value > G && (_.value = !0), L.value < G && (_.value = !1));
+    }, 100), U = async () => {
+      B.value = !1, _.value = !1;
     };
-    return F(() => {
+    return V(() => {
       var e;
       return (e = A.value) == null ? void 0 : e.liveId;
     }, () => {
-      E();
-    }), F(() => {
+      U();
+    }), V(() => {
       var e;
-      return (e = m.value) == null ? void 0 : e.length;
+      return (e = v.value) == null ? void 0 : e.length;
     }, (e) => {
-      var n;
-      const t = m.value[e - 1], s = m.value[e - 2];
-      s === void 0 && t && !B.value && Q(() => {
-        U({ behavior: "instant" }), B.value = !0;
-      }), !(!s || !t || !e) && (t == null ? void 0 : t.sequence) !== (s == null ? void 0 : s.sequence) && (t.sender.userId === ((n = L.value) == null ? void 0 : n.userId) || !y.value && _.value < b) && U({ behavior: "smooth" });
-    }), R(() => {
-      o.value && o.value.addEventListener("scroll", z), E();
-    }), W(() => {
-      o.value && o.value.removeEventListener("scroll", z);
+      var o;
+      const t = v.value[e - 1], s = v.value[e - 2];
+      s === void 0 && t && !B.value && Z(() => {
+        q({ behavior: "instant" }), B.value = !0;
+      }), !(!s || !t || !e) && (t == null ? void 0 : t.sequence) !== (s == null ? void 0 : s.sequence) && (t.sender.userId === ((o = k.value) == null ? void 0 : o.userId) || !_.value && L.value < G) && q({ behavior: "smooth" });
+    }), ee(() => {
+      r.value && r.value.addEventListener("scroll", O), U(), K(H.ON_RECEIVE_GIFT_MESSAGE, F);
+    }), te(() => {
+      r.value && r.value.removeEventListener("scroll", O), Y(H.ON_RECEIVE_GIFT_MESSAGE, F);
     }), (e, t) => {
-      var s, n, a, r, p, f, g, q, w, D;
-      return c(), k(H, null, [
+      var s, o, l, a, p, g, y, w, z, D;
+      return u(), S(M, null, [
         h("div", {
           class: "message-list",
-          style: C({ height: v.height, ...v.style })
+          style: I({ height: m.height, ...m.style })
         }, [
           h("div", {
             id: "messageScrollList",
             ref_key: "scrollContainer",
-            ref: o,
+            ref: r,
             class: "message-list-container",
-            style: C(v.containerStyle)
+            style: I(m.containerStyle)
           }, [
-            h("div", ue, [
-              (c(!0), k(H, null, X(l(m), (S) => (c(), O(Y(v.Message || l(le)), {
-                key: S.sequence + S.timestampInSecond,
-                style: C(v.itemStyle),
-                message: S,
-                "is-last-in-chunk": !0
-              }, null, 8, ["style", "message"]))), 128))
+            h("div", he, [
+              (u(!0), S(M, null, se(n(v), (d) => (u(), S(M, {
+                key: d.sequence + d.timestampInSecond
+              }, [
+                n(ue)(d) ? (u(), x(n(ge), {
+                  key: 0,
+                  style: I(m.itemStyle),
+                  message: d
+                }, null, 8, ["style", "message"])) : (u(), x(oe(m.Message || n(me)), {
+                  key: 1,
+                  style: I(m.itemStyle),
+                  message: d,
+                  "is-last-in-chunk": !0
+                }, null, 8, ["style", "message"]))
+              ], 64))), 128))
             ]),
-            (s = l(m)) != null && s.length ? M("", !0) : (c(), k("div", ce, T(l(I)("No message yet")), 1))
+            (s = n(v)) != null && s.length ? T("", !0) : (u(), S("div", Ie, b(n(C)("BarrageList.NoMessageYet")), 1))
           ], 4),
-          l(d) ? (c(), k("div", ve, [
-            h("div", me, T(((n = l(d)) == null ? void 0 : n.nameCard) || ((a = l(d)) == null ? void 0 : a.userName) || ((r = l(d)) == null ? void 0 : r.userId)), 1),
-            h("div", de, T(((p = l(d)) == null ? void 0 : p.displayAction) === "enter" ? l(I)("Come in") : l(I)("Leave")), 1)
-          ])) : M("", !0)
+          n(f) ? (u(), S("div", _e, [
+            h("div", Le, b(((o = n(f)) == null ? void 0 : o.nameCard) || ((l = n(f)) == null ? void 0 : l.userName) || ((a = n(f)) == null ? void 0 : a.userId)), 1),
+            h("div", Ce, b(((p = n(f)) == null ? void 0 : p.displayAction) === "enter" ? n(C)("BarrageList.ComeIn") : n(C)("BarrageList.Leave")), 1)
+          ])) : T("", !0)
         ], 4),
-        x.value && u.value ? (c(), O(ne, {
+        E.value && c.value ? (u(), x(ce, {
           key: 0,
-          "user-id": (f = u.value) == null ? void 0 : f.sender.userId,
-          "user-name": ((g = u.value) == null ? void 0 : g.sender.nameCard) || ((q = u.value) == null ? void 0 : q.sender.userName) || ((w = u.value) == null ? void 0 : w.sender.userId),
-          "avatar-url": (D = u.value) == null ? void 0 : D.sender.avatarUrl,
-          style: C($.value),
-          "click-target": N.value,
-          onClose: t[0] || (t[0] = (S) => x.value = !1)
-        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : M("", !0)
+          "user-id": (g = c.value) == null ? void 0 : g.sender.userId,
+          "user-name": ((y = c.value) == null ? void 0 : y.sender.nameCard) || ((w = c.value) == null ? void 0 : w.sender.userName) || ((z = c.value) == null ? void 0 : z.sender.userId),
+          "avatar-url": (D = c.value) == null ? void 0 : D.sender.avatarUrl,
+          style: I(N.value),
+          "click-target": $.value,
+          onClose: t[0] || (t[0] = (d) => E.value = !1)
+        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : T("", !0)
       ], 64);
     };
   }
-}), Be = /* @__PURE__ */ ie(pe, [["__scopeId", "data-v-bc639779"]]);
+}), De = /* @__PURE__ */ Se(ke, [["__scopeId", "data-v-83cd0827"]]);
 export {
-  Be as default
+  De as default
 };