tuikit-atomicx-vue3 5.8.2 → 5.9.0

package/dist/components/ASRTools/components/RealtimeMessageList.js

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

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

@@ -0,0 +1,19 @@
+import { SubtitleDisplayMode } from '../../../types/asr';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    targetLanguage?: string;
+    displayMode?: SubtitleDisplayMode;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    targetLanguage?: string;
+    displayMode?: SubtitleDisplayMode;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/ASRTools/components/Subtitle.js

@@ -0,0 +1,85 @@
+import { defineComponent as D, ref as x, computed as c, onMounted as N, onUnmounted as R, openBlock as o, createElementBlock as a, createElementVNode as l, renderSlot as U, createCommentVNode as d, Fragment as j, renderList as B, unref as _, toDisplayString as u } from "vue";
+import { getMessageDisplayLines as O, getDisplayName as y } from "../utils/display.js";
+import { useAITranscriberState as V } from "../../../states/AITranscriberState/AITranscriberState.js";
+import { RealtimeTranscriberEvent as h } from "../../../types/asr.js";
+import { _ as $ } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const w = {
+  key: 0,
+  class: "asr-subtitle"
+}, A = { class: "subtitle-panel" }, F = {
+  key: 0,
+  class: "subtitle-actions"
+}, H = { class: "subtitle-scroll" }, q = ["title"], z = { class: "subtitle-content" }, G = { class: "subtitle-text primary" }, J = {
+  key: 0,
+  class: "subtitle-text secondary"
+}, K = /* @__PURE__ */ D({
+  __name: "Subtitle",
+  props: {
+    targetLanguage: { default: "" },
+    displayMode: { default: "translation" }
+  },
+  setup(M) {
+    const p = M, { subscribeEvent: T, unsubscribeEvent: I } = V(), i = x({}), n = {}, r = {}, L = c(() => p.targetLanguage), m = c(() => p.displayMode), k = (e, t) => {
+      n[e] && clearTimeout(n[e]), n[e] = setTimeout(t, 3e3);
+    }, S = (e) => {
+      const { speakerUserId: t } = e, s = i.value[t], C = r[t];
+      if (e.isCompleted && C === e.segmentId)
+        return;
+      if (!e.isCompleted) {
+        n[t] && (clearTimeout(n[t]), delete n[t]), delete r[t], i.value[t] = e;
+        return;
+      }
+      const E = !s || s.segmentId !== e.segmentId || !s.isCompleted;
+      i.value[t] = e, E && (r[t] = e.segmentId, k(t, () => {
+        var g, f;
+        (g = i.value[t]) != null && g.isCompleted && ((f = i.value[t]) == null ? void 0 : f.segmentId) === e.segmentId && delete i.value[t], delete n[t], delete r[t];
+      }));
+    }, v = (e) => {
+      S(e.message);
+    };
+    N(() => {
+      T(h.onReceiveTranscriberMessage, v);
+    });
+    const b = c(() => Object.values(i.value).sort((e, t) => (e.timestamp ?? 0) - (t.timestamp ?? 0)).map((e) => ({
+      ...e,
+      lines: O(
+        e,
+        L.value,
+        m.value
+      )
+    })).filter((e) => e.lines.length).map((e) => ({
+      ...e,
+      primaryLine: e.lines[0] || "",
+      secondaryLine: m.value === "bilingual" && e.lines[1] || ""
+    })).slice(-3));
+    return R(() => {
+      I(h.onReceiveTranscriberMessage, v), Object.values(n).forEach((e) => {
+        clearTimeout(e);
+      });
+    }), (e, t) => b.value.length ? (o(), a("div", w, [
+      l("div", A, [
+        e.$slots.actions ? (o(), a("div", F, [
+          U(e.$slots, "actions", {}, void 0, !0)
+        ])) : d("", !0),
+        l("div", H, [
+          (o(!0), a(j, null, B(b.value, (s) => (o(), a("div", {
+            key: s.speakerUserId,
+            class: "subtitle-item"
+          }, [
+            l("span", {
+              class: "subtitle-speaker",
+              title: _(y)(s.speakerUserId)
+            }, u(_(y)(s.speakerUserId)) + "：", 9, q),
+            l("div", z, [
+              l("span", G, u(s.primaryLine), 1),
+              s.secondaryLine ? (o(), a("span", J, u(s.secondaryLine), 1)) : d("", !0)
+            ])
+          ]))), 128))
+        ])
+      ])
+    ])) : d("", !0);
+  }
+}), Z = /* @__PURE__ */ $(K, [["__scopeId", "data-v-5305179d"]]);
+export {
+  Z as default
+};

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

@@ -0,0 +1,45 @@
+import { SubtitleDisplayMode } from '../../../types/asr';
+
+declare function __VLS_template(): {
+    actions?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    targetLanguage?: string;
+    displayMode?: SubtitleDisplayMode;
+}>, {
+    targetLanguage: string;
+    displayMode: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    targetLanguage?: string;
+    displayMode?: SubtitleDisplayMode;
+}>, {
+    targetLanguage: string;
+    displayMode: string;
+}>>> & Readonly<{}>, {
+    targetLanguage: string;
+    displayMode: SubtitleDisplayMode;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

package/dist/components/ASRTools/index.js

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

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

@@ -0,0 +1,7 @@
+import { SubtitleDisplayMode, TranscriberLanguage, TranscriberMessage } from '../../../types';
+
+export declare const getDisplayName: (userId: string) => string;
+export declare const hasDisplayableText: (value: unknown) => boolean;
+export declare const getTranslationText: (message: TranscriberMessage, targetLanguage: TranscriberLanguage | "") => string;
+export declare const hasTranslationText: (message: TranscriberMessage) => boolean;
+export declare const getMessageDisplayLines: (message: TranscriberMessage, targetLanguage: TranscriberLanguage | "", displayMode: SubtitleDisplayMode) => string[];

package/dist/components/ASRTools/utils/display.js

@@ -0,0 +1,45 @@
+import l from "../../../states/RoomParticipantState/index.js";
+const { participantList: u } = l(), a = (t) => {
+  if (typeof t == "string")
+    return t.trim();
+  if (typeof t == "number" || typeof t == "boolean")
+    return String(t).trim();
+  if (t && typeof t == "object") {
+    const n = t.text ?? t.translationText ?? t.value;
+    if (typeof n == "string" || typeof n == "number" || typeof n == "boolean")
+      return String(n).trim();
+  }
+  return "";
+}, d = (t) => {
+  const n = u.value.find((r) => r.userId === t);
+  return (n == null ? void 0 : n.nameCard) || (n == null ? void 0 : n.userName) || (n == null ? void 0 : n.userId) || t;
+}, c = (t) => !!a(t), x = (t) => t ? t instanceof Map ? t.size : Array.isArray(t) ? t.length : 0 : 0, T = (t, n) => {
+  if (!n || !t.translationTexts)
+    return "";
+  if (t.translationTexts instanceof Map) {
+    const r = String(n).toLowerCase(), o = Array.from(t.translationTexts.entries()).find(
+      ([s]) => String(s).toLowerCase() === r
+    ), e = Array.from(t.translationTexts.values()).find((s) => c(s));
+    return a((o == null ? void 0 : o[1]) || e);
+  }
+  if (Array.isArray(t.translationTexts)) {
+    const r = t.translationTexts, o = String(n).toLowerCase(), e = r.find((i) => {
+      var f;
+      return ((f = i == null ? void 0 : i.language) == null ? void 0 : f.toLowerCase()) === o;
+    }), s = r.find((i) => c(i == null ? void 0 : i.text));
+    return a(
+      (e == null ? void 0 : e.text) || (s == null ? void 0 : s.text)
+    );
+  }
+  return "";
+}, g = (t) => x(t.translationTexts) > 0, p = (t, n, r) => {
+  const o = a(t.sourceText), e = a(T(t, n));
+  return r === "translation" ? [o || e].filter(Boolean) : [o, e].filter(Boolean);
+};
+export {
+  d as getDisplayName,
+  p as getMessageDisplayLines,
+  T as getTranslationText,
+  c as hasDisplayableText,
+  g as hasTranslationText
+};

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

@@ -1,17 +1,17 @@
-import { defineComponent as T, ref as g, computed as K, watch as x, nextTick as V, onMounted as w, onUnmounted as L, openBlock as n, createElementBlock as l, normalizeClass as d, unref as o, createElementVNode as h, renderSlot as E, createCommentVNode as I, toDisplayString as M } from "vue";
-import { useUIKit as U, TUIToast as A } from "@tencentcloud/uikit-base-component-vue3";
-import { useMessageInputState as D } from "../MessageInputState.js";
-import { ERROR_MESSAGE as N } from "../constants.js";
-import { createEditor as $ } from "./EditorCore.js";
-import z from "../../../states/ConversationListState/ConversationListState.js";
-const G = "_disabled_jp6u3_13", O = "_editor_jp6u3_30", i = {
+import { defineComponent as M, ref as g, computed as V, watch as l, nextTick as L, onMounted as U, onUnmounted as A, openBlock as c, createElementBlock as p, normalizeClass as n, unref as i, createElementVNode as E, renderSlot as I, createCommentVNode as B, toDisplayString as D } from "vue";
+import { useUIKit as N, TUIToast as $ } from "@tencentcloud/uikit-base-component-vue3";
+import { useMessageInputState as z } from "../MessageInputState.js";
+import { ERROR_MESSAGE as G } from "../constants.js";
+import { createEditor as O } from "./EditorCore.js";
+import P from "../../../states/ConversationListState/ConversationListState.js";
+const q = "_disabled_jp6u3_13", C = "_editor_jp6u3_30", s = {
   "input-wrapper": "_input-wrapper_jp6u3_1",
-  disabled: G,
+  disabled: q,
   "input-prefix": "_input-prefix_jp6u3_17",
   "input-suffix": "_input-suffix_jp6u3_23",
-  editor: O,
+  editor: C,
   "disabled-editor": "_disabled-editor_jp6u3_39"
-}, W = /* @__PURE__ */ T({
+}, Z = /* @__PURE__ */ M({
   __name: "TextEditor",
   props: {
     autoFocus: { type: Boolean, default: !0 },
@@ -20,80 +20,93 @@ const G = "_disabled_jp6u3_13", O = "_editor_jp6u3_30", i = {
     maxLength: {}
   },
   emits: ["focus", "blur"],
-  setup(B, { emit: F }) {
-    const r = B, c = F, { t: p } = U(), { activeConversation: R } = z(), { inputRawValue: S, updateRawValue: j, sendMessage: k, setEditorInstance: f, setContent: m } = D(), u = g(null), _ = g(r.autoFocus), b = K(() => r.placeholder || p("BarrageInput.saySomething"));
-    let s = null;
-    const v = (e) => {
-      const t = u.value;
-      !t || e.disabled || t.dataset.editorCreated || (s = $({
+  setup(F, { emit: R }) {
+    const o = F, f = R, { t: m } = N(), { activeConversation: S } = P(), { inputRawValue: j, updateRawValue: k, sendMessage: T, setEditorInstance: _, setContent: b } = z(), d = g(null), v = g(o.autoFocus), u = V(() => o.placeholder || m("BarrageInput.saySomething"));
+    let r = null;
+    const h = (e) => {
+      const t = d.value;
+      !t || e.disabled || t.dataset.editorCreated || (r = O({
         element: t,
-        placeholder: b.value,
+        placeholder: u.value,
         autoFocus: e.autoFocus,
         disabled: e.disabled,
         maxLength: e.maxLength,
         onUpdate: (a) => {
-          j(a);
+          k(a);
         },
         onEnter: async () => {
           try {
-            const a = S.value;
-            m(""), await k(a);
+            const a = j.value;
+            b(""), await T(a);
           } catch (a) {
-            A.error({
-              message: p(N[a.code] || "BarrageInput.sendFailed")
+            $.error({
+              message: m(G[a.code] || "BarrageInput.sendFailed")
             });
           }
         },
         onFocus: () => {
           var a;
-          _.value = !0, navigator && "virtualKeyboard" in navigator && ((a = navigator == null ? void 0 : navigator.virtualKeyboard) == null || a.show()), c("focus");
+          v.value = !0, navigator && "virtualKeyboard" in navigator && ((a = navigator == null ? void 0 : navigator.virtualKeyboard) == null || a.show()), f("focus");
         },
         onBlur: () => {
           var a;
-          _.value = !1, navigator && "virtualKeyboard" in navigator && ((a = navigator == null ? void 0 : navigator.virtualKeyboard) == null || a.hide()), c("blur");
+          v.value = !1, navigator && "virtualKeyboard" in navigator && ((a = navigator == null ? void 0 : navigator.virtualKeyboard) == null || a.hide()), f("blur");
         }
-      }), t.dataset.editorCreated = "true", f(s));
-    }, y = () => {
+      }), t.dataset.editorCreated = "true", _(r));
+    }, x = () => {
       var e;
-      s == null || s.destroy(), (e = u.value) == null || e.removeAttribute("data-editor-created"), f(null);
+      r == null || r.destroy(), (e = d.value) == null || e.removeAttribute("data-editor-created"), _(null);
+    }, w = (e) => {
+      var a, y;
+      if (!r)
+        return;
+      const t = (y = (a = r.extensionManager) == null ? void 0 : a.extensions) == null ? void 0 : y.find(
+        (K) => K.name === "placeholder"
+      );
+      t && (t.options.placeholder = e, r.view.dispatch(r.state.tr));
     };
-    return x(
-      () => r.disabled,
+    return l(
+      () => o.disabled,
       async (e, t) => {
-        e !== t && (e ? y() : (await V(), v(r)));
+        e !== t && (e ? x() : (await L(), h(o)));
       }
-    ), w(() => {
-      v(r);
-    }), L(() => {
-      y();
-    }), x(R, (e, t) => {
-      (e == null ? void 0 : e.conversationID) !== (t == null ? void 0 : t.conversationID) && m("");
-    }), (e, t) => (n(), l("div", {
-      class: d([o(i)["input-wrapper"], r.disabled && o(i).disabled])
+    ), l(
+      u,
+      (e) => {
+        !r || o.disabled || w(e);
+      }
+    ), U(() => {
+      h(o);
+    }), A(() => {
+      x();
+    }), l(S, (e, t) => {
+      (e == null ? void 0 : e.conversationID) !== (t == null ? void 0 : t.conversationID) && b("");
+    }), (e, t) => (c(), p("div", {
+      class: n([i(s)["input-wrapper"], o.disabled && i(s).disabled])
     }, [
-      h("div", {
-        class: d(o(i)["input-prefix"])
+      E("div", {
+        class: n(i(s)["input-prefix"])
       }, [
-        E(e.$slots, "prefix")
+        I(e.$slots, "prefix")
       ], 2),
-      r.disabled ? I("", !0) : (n(), l("div", {
+      o.disabled ? B("", !0) : (c(), p("div", {
         key: 0,
         ref_key: "editorRef",
-        ref: u,
-        class: d(o(i).editor)
+        ref: d,
+        class: n(i(s).editor)
       }, null, 2)),
-      r.disabled ? (n(), l("div", {
+      o.disabled ? (c(), p("div", {
         key: 1,
-        class: d([o(i)["disabled-editor"]])
-      }, M(b.value), 3)) : I("", !0),
-      h("span", {
-        class: d(o(i)["input-suffix"])
+        class: n([i(s)["disabled-editor"]])
+      }, D(u.value), 3)) : B("", !0),
+      E("span", {
+        class: n(i(s)["input-suffix"])
       }, [
-        E(e.$slots, "suffix")
+        I(e.$slots, "suffix")
       ], 2)
     ], 2));
   }
 });
 export {
-  W as TextEditor
+  Z as TextEditor
 };