tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/dist/components/LiveStreamView/DefaultStreamViewUI.js

@@ -1,49 +1,121 @@
-import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, Fragment, createElementVNode, createVNode, unref, toDisplayString } from "vue";
-import { DeviceStatus } from "../../types/device.js";
-import { CoGuestStatus } from "../../types/coGuest.js";
+import { defineComponent, ref, computed, watch, nextTick, onUnmounted, createElementBlock, openBlock, createCommentVNode, Fragment, createVNode, unref, createBlock, createElementVNode, toDisplayString } from "vue";
 import { useCoGuestState } from "../../states/CoGuestState.js";
 import Avatar from "../Avatar/Avatar.js";
 import AudioIcon from "../../baseComp/AudioIcon.js";
 import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { DeviceStatus } from "../../types/device.js";
+import { CoGuestStatus } from "../../types/coGuest.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = { class: "stream-cover" };
 const _hoisted_2 = {
   key: 0,
   class: "no-video-container"
 };
-const _hoisted_3 = { class: "user-details" };
-const _hoisted_4 = { class: "username" };
-const _hoisted_5 = {
+const _hoisted_3 = {
   key: 1,
-  class: "empty-position"
+  class: "mask"
 };
-const _hoisted_6 = {
-  key: 0,
-  class: "text"
+const _hoisted_4 = {
+  key: 1,
+  class: "user-details"
 };
-const _hoisted_7 = {
+const _hoisted_5 = { class: "username" };
+const _hoisted_6 = {
   key: 1,
-  class: "text"
+  class: "empty-position"
 };
+const _hoisted_7 = ["title"];
+const _hoisted_8 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DefaultStreamViewUI",
   props: {
-    userInfo: { default: void 0 },
-    containerStyle: { default: void 0 }
+    userInfo: {},
+    streamViewInfoList: {}
   },
   setup(__props) {
-    const { t } = useUIKit();
     const props = __props;
+    const { t } = useUIKit();
+    const canvasRef = ref(null);
     const { localCoGuestStatus } = useCoGuestState();
-    const { speakingUsers } = useLiveSeatState();
+    const { speakingUsers, seatList } = useLiveSeatState();
+    const seatListWithUser = computed(() => {
+      return seatList.value.filter((item) => item.userInfo && item.userInfo.userId !== "");
+    });
+    const currentStreamViewSize = computed(() => {
+      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
+        var _a, _b;
+        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
+      });
+      if (!currentStreamViewInfo) return { width: 0, height: 0 };
+      return {
+        width: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width),
+        height: parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height)
+      };
+    });
     const avatarSize = computed(() => {
-      var _a, _b;
-      const radio = 4.9;
-      if (parseInt(((_a = props.containerStyle) == null ? void 0 : _a.width) || "0") / radio > 80) {
-        return Math.ceil(parseInt(((_b = props.containerStyle) == null ? void 0 : _b.width) || "0") / radio);
+      const defaultAvatarSize = 54;
+      const minSize = Math.min(currentStreamViewSize.value.width, currentStreamViewSize.value.height);
+      if (minSize < defaultAvatarSize + 10) {
+        return minSize - 10;
+      }
+      return defaultAvatarSize;
+    });
+    const needCanvasMaskList = computed(() => {
+      const currentStreamViewInfo = props.streamViewInfoList.find((item) => {
+        var _a, _b;
+        return ((_a = item.userInfo) == null ? void 0 : _a.userId) === ((_b = props.userInfo) == null ? void 0 : _b.userId);
+      });
+      if (!currentStreamViewInfo) return [];
+      return props.streamViewInfoList.filter((item) => {
+        const isHigher = item.region.zIndex > (currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.zIndex);
+        const isHorizontalOverlap = parseInt(item.region.left) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) && parseInt(item.region.left) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.width);
+        const isVerticalOverlap = parseInt(item.region.top) > parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) && parseInt(item.region.top) < parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top) + parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.height);
+        return isHigher && isHorizontalOverlap && isVerticalOverlap;
+      }).map((item) => {
+        return {
+          left: parseInt(item.region.left) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.left),
+          top: parseInt(item.region.top) - parseInt(currentStreamViewInfo == null ? void 0 : currentStreamViewInfo.region.top),
+          width: parseInt(item.region.width),
+          height: parseInt(item.region.height)
+        };
+      });
+    });
+    const drawCanvas = () => {
+      if (!canvasRef.value) return;
+      const canvas = canvasRef.value;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+      ctx.fillStyle = "#1F2024";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      needCanvasMaskList.value.forEach((item) => {
+        ctx.clearRect(item.left, item.top, item.width, item.height);
+      });
+    };
+    let resizeObserver = null;
+    watch(() => needCanvasMaskList.value.length, async () => {
+      if (needCanvasMaskList.value.length > 0) {
+        await nextTick();
+        if (canvasRef.value) {
+          drawCanvas();
+          resizeObserver = new ResizeObserver(() => {
+            drawCanvas();
+          });
+          resizeObserver.observe(canvasRef.value);
+        }
+      } else {
+        if (resizeObserver && canvasRef.value) {
+          resizeObserver.unobserve(canvasRef.value);
+        }
+      }
+    }, { immediate: true });
+    onUnmounted(() => {
+      if (resizeObserver && canvasRef.value) {
+        resizeObserver.unobserve(canvasRef.value);
       }
-      return 80;
     });
     const displayName = computed(() => {
       var _a, _b;
@@ -61,6 +133,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1, [
         _ctx.userInfo.userId ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           !isVideoAvailable.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            needCanvasMaskList.value.length > 0 ? (openBlock(), createElementBlock("canvas", {
+              key: 0,
+              ref_key: "canvasRef",
+              ref: canvasRef,
+              class: "canvas-mask"
+            }, null, 512)) : (openBlock(), createElementBlock("div", _hoisted_3)),
             createVNode(unref(Avatar), {
               class: "avatar",
               size: avatarSize.value,
@@ -68,23 +146,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               alt: displayName.value
             }, null, 8, ["size", "src", "alt"])
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3, [
-            createVNode(AudioIcon, {
+          seatListWithUser.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            !isAudioAvailable.value ? (openBlock(), createBlock(AudioIcon, {
+              key: 0,
+              class: "audio-icon",
               isMuted: !isAudioAvailable.value,
-              audioVolume: unref(speakingUsers).get(_ctx.userInfo.userId) || 0,
-              size: "small"
-            }, null, 8, ["isMuted", "audioVolume"]),
-            createElementVNode("div", _hoisted_4, toDisplayString(displayName.value), 1)
-          ])
+              audioVolume: unref(speakingUsers).get(_ctx.userInfo.userId) || 0
+            }, null, 8, ["isMuted", "audioVolume"])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_5, toDisplayString(displayName.value), 1)
+          ])) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
-        !_ctx.userInfo.userId ? (openBlock(), createElementBlock("div", _hoisted_5, [
-          unref(localCoGuestStatus) === unref(CoGuestStatus).Connected ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(unref(t)("Waiting for connection")), 1)) : (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(t)("Waiting for connection")), 1))
+        !_ctx.userInfo.userId ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          unref(localCoGuestStatus) === unref(CoGuestStatus).Connected ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "text",
+            title: unref(t)("Waiting for connection")
+          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_7)) : (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: "text",
+            title: unref(t)("Waiting for connection")
+          }, toDisplayString(unref(t)("Waiting for connection")), 9, _hoisted_8))
         ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4b3410c3"]]);
+const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4091c326"]]);
 export {
   DefaultStreamViewUI as default
 };

package/dist/components/LiveStreamView/DefaultStreamViewUI.vue.d.ts

@@ -1,36 +1,19 @@
 import { SeatUserInfo } from '../../types';
 
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    userInfo?: SeatUserInfo;
-    containerStyle?: {
-        width: string;
-        height: string;
-        top: string;
-        left: string;
-    };
-}>, {
-    containerStyle: undefined;
-    userInfo: undefined;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    userInfo?: SeatUserInfo;
-    containerStyle?: {
-        width: string;
-        height: string;
-        top: string;
-        left: string;
-    };
-}>, {
-    containerStyle: undefined;
-    userInfo: undefined;
-}>>> & Readonly<{}>, {
+interface Props {
     userInfo: SeatUserInfo;
-    containerStyle: {
-        width: string;
-        height: string;
-        top: string;
-        left: string;
-    };
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    streamViewInfoList: Array<{
+        userInfo: SeatUserInfo;
+        region: {
+            left: string;
+            top: string;
+            width: string;
+            height: string;
+            zIndex: number;
+        };
+    }>;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -41,11 +24,3 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         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];
-} & {};

package/dist/components/LiveStreamView/index.js

@@ -7,8 +7,8 @@ import { useLiveState } from "../../states/LiveState/index.js";
 import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 import { addI18n } from "../../i18n/index.js";
-import { resource as resource$1 } from "./i18n/zh-CN/index.js";
 import { resource } from "./i18n/en-US/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
 const _hoisted_1 = {
   key: 0,
   class: "live-stream-placeholder"
@@ -270,9 +270,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, { userInfo: item.userInfo }), void 0, true),
                 !_ctx.$slots.streamViewUI ? (openBlock(), createBlock(DefaultStreamViewUI, {
                   key: 0,
-                  containerStyle: item.region,
+                  streamViewInfoList: needPlayStreamViewInfo.value,
                   userInfo: item.userInfo
-                }, null, 8, ["containerStyle", "userInfo"])) : createCommentVNode("", true)
+                }, null, 8, ["streamViewInfoList", "userInfo"])) : createCommentVNode("", true)
               ], 4);
             }), 128))
           ])) : createCommentVNode("", true),
@@ -282,10 +282,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LiveStreamView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-80a8bddb"]]);
+const LiveStreamViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a84f78de"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {
   DefaultStreamViewUI,
-  LiveStreamView
+  LiveStreamViewComponent as LiveStreamView
 };

package/dist/components/LiveStreamView/index.vue.d.ts

@@ -1,6 +1,8 @@
+import { SeatUserInfo } from '../../types';
+
 declare function __VLS_template(): {
     streamViewUI?(_: {
-        userInfo: import('../..').SeatUserInfo | undefined;
+        userInfo: SeatUserInfo;
     }): any;
     localVideo?(_: {
         style: {

package/dist/components/MessageInput/AttachmentPicker/AttachmentPicker.js

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

package/dist/components/MessageInput/AttachmentPicker/FilePicker.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-D0cP-aFi.js";
+import { _ as _sfc_main } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-CaSj3Gh_.js";
 export {
   _sfc_main as default
 };

package/dist/components/MessageInput/AttachmentPicker/ImagePicker.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-DzBHwcSi.js";
+import { _ as _sfc_main } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-CrzGMmrh.js";
 export {
   _sfc_main as default
 };

package/dist/components/MessageInput/AttachmentPicker/VideoPicker.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DAv8_NWh.js";
+import { _ as _sfc_main } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DTv6TJKr.js";
 export {
   _sfc_main as default
 };

package/dist/components/MessageInput/AttachmentPicker/index.js

@@ -1,10 +1,92 @@
-import { _ } from "../../../AttachmentPicker.vue_vue_type_script_setup_true_lang-B9tVChd9.js";
-import { _ as _2 } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-D0cP-aFi.js";
-import { _ as _3 } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-DzBHwcSi.js";
-import { _ as _4 } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DAv8_NWh.js";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createBlock, withCtx, createVNode, createElementVNode, Fragment, renderList, resolveDynamicComponent, mergeProps } from "vue";
+import { useUIKit, IconPlus } from "@tencentcloud/uikit-base-component-vue3";
+import { P as PopoverRoot_default, a as PopoverTrigger_default, b as PopoverPortal_default, c as PopoverContent_default } from "../../../PopoverTrigger-ByOI-vdB.js";
+import { s as styles } from "../../../AttachmentPicker.module-0_DWsAtr.js";
+import { _ as _sfc_main$1 } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-CaSj3Gh_.js";
+import { _ as _sfc_main$2 } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-CrzGMmrh.js";
+import { _ as _sfc_main$3 } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DTv6TJKr.js";
+const _hoisted_1 = { class: "flex flex-col gap-2.5" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AttachmentPicker",
+  props: {
+    className: { default: "" },
+    attachmentPickerMode: { default: "collapsed" }
+  },
+  setup(__props) {
+    const ICON_SIZE = {
+      COLLAPSED: 18,
+      EXPANDED: 24
+    };
+    const props = __props;
+    const { t } = useUIKit();
+    const isCollapsed = computed(() => props.attachmentPickerMode === "collapsed");
+    const pickerItems = computed(() => [
+      { type: "file", Component: _sfc_main$1 },
+      { type: "image", Component: _sfc_main$2 },
+      { type: "video", Component: _sfc_main$3 }
+    ].map(({ type, Component }) => ({
+      Component,
+      props: {
+        label: isCollapsed.value ? t(`MessageInput.${type}`) : "",
+        iconSize: isCollapsed.value ? ICON_SIZE.COLLAPSED : ICON_SIZE.EXPANDED
+      }
+    })));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(styles)["attachment-picker"], _ctx.className])
+      }, [
+        isCollapsed.value ? (openBlock(), createBlock(unref(PopoverRoot_default), { key: 0 }, {
+          default: withCtx(() => [
+            createVNode(unref(PopoverTrigger_default), { as: "span" }, {
+              default: withCtx(() => [
+                createVNode(unref(IconPlus), {
+                  class: normalizeClass(unref(styles)["attachment-picker__icon"]),
+                  size: "24"
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            }),
+            createVNode(unref(PopoverPortal_default), null, {
+              default: withCtx(() => [
+                createVNode(unref(PopoverContent_default), {
+                  side: "top",
+                  align: "start",
+                  "side-offset": 5,
+                  class: "rounded-lg p-5 w-[260px] bg-white shadow-sm border will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_1, [
+                      createElementVNode("div", {
+                        class: normalizeClass(unref(styles)["attachment-picker__popup"])
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(pickerItems.value, (picker, index) => {
+                          return openBlock(), createBlock(resolveDynamicComponent(picker.Component), mergeProps({ key: index }, { ref_for: true }, picker.props), null, 16);
+                        }), 128))
+                      ], 2)
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(unref(styles)["attachment-picker--expanded"])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(pickerItems.value, (picker, index) => {
+            return openBlock(), createBlock(resolveDynamicComponent(picker.Component), mergeProps({ key: index }, { ref_for: true }, picker.props), null, 16);
+          }), 128))
+        ], 2))
+      ], 2);
+    };
+  }
+});
 export {
-  _ as AttachmentPicker,
-  _2 as FilePicker,
-  _3 as ImagePicker,
-  _4 as VideoPicker
+  _sfc_main as AttachmentPicker,
+  _sfc_main$1 as FilePicker,
+  _sfc_main$2 as ImagePicker,
+  _sfc_main$3 as VideoPicker
 };

package/dist/components/MessageInput/EmojiPicker/EmojiPicker.js

@@ -1,9 +1,10 @@
 import { defineComponent, onMounted, createElementBlock, openBlock, createVNode, unref, withCtx, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList } from "vue";
 import { useUIKit, IconEmoji } from "@tencentcloud/uikit-base-component-vue3";
-import { P as PopoverRoot_default, a as PopoverTrigger_default, b as PopoverPortal_default, c as PopoverContent_default } from "../../../PopoverTrigger-BhQt39dx.js";
+import { P as PopoverRoot_default, a as PopoverTrigger_default, b as PopoverPortal_default, c as PopoverContent_default } from "../../../PopoverTrigger-ByOI-vdB.js";
 import { emojiUrlMap, emojiBaseUrl } from "../../../constants/emoji.js";
 import { transformTextWithEmojiKeyToName } from "../../../utils/emoji.js";
-import { useMessageInputState, MessageContentType } from "../../../states/MessageInputState/MessageInputState.js";
+import { useMessageInputState } from "../../../states/MessageInputState/MessageInputState.js";
+import { MessageContentType } from "../../../states/MessageInputState/type.js";
 import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
 const styles = {
   "emoji-picker__icon": "_emoji-picker__icon_kyu4g_1",
@@ -100,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-01fb363c"]]);
+const EmojiPickerComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-01fb363c"]]);
 export {
-  EmojiPicker as default
+  EmojiPickerComponent as default
 };

package/dist/components/MessageInput/MessageInput.js

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

package/dist/components/MessageInput/QuotedMessagePreview/QuotedMessagePreview.js

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

package/dist/components/MessageInput/QuotedMessagePreview/index.js

@@ -1,4 +1,91 @@
-import { _ } from "../../../QuotedMessagePreview.vue_vue_type_script_setup_true_lang-C8lXN2Qm.js";
+import { defineComponent, watch, createElementBlock, createCommentVNode, unref, openBlock, normalizeClass, createElementVNode, createVNode, toDisplayString } from "vue";
+import TencentCloudChat from "@tencentcloud/chat";
+import { useUIKit, IconClose } from "@tencentcloud/uikit-base-component-vue3";
+import { useMessageActionState } from "../../../states/MessageActionState/MessageActionState.js";
+import { useMessageInputState } from "../../../states/MessageInputState/MessageInputState.js";
+import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
+const quoted__message__preview = "_quoted__message__preview_1u7zw_1";
+const quoted__message__preview__content = "_quoted__message__preview__content_1u7zw_15";
+const quoted__message__preview__close = "_quoted__message__preview__close_1u7zw_44";
+const styles = {
+  quoted__message__preview,
+  "slide-in": "_slide-in_1u7zw_1",
+  quoted__message__preview__content,
+  "quoted__message__preview__content--header": "_quoted__message__preview__content--header_1u7zw_23",
+  "quoted__message__preview__content--title": "_quoted__message__preview__content--title_1u7zw_29",
+  "quoted__message__preview__content--text": "_quoted__message__preview__content--text_1u7zw_34",
+  quoted__message__preview__close
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "QuotedMessagePreview",
+  setup(__props) {
+    const { t } = useUIKit();
+    const { currentConversation } = useConversationListState();
+    const { focusEditor } = useMessageInputState();
+    const { quotedMessage, clearQuotedMessage } = useMessageActionState();
+    watch(quotedMessage, (newVal) => {
+      if (newVal) {
+        focusEditor();
+      }
+    });
+    watch(currentConversation, () => {
+      clearQuotedMessage();
+    });
+    const handleClose = () => {
+      clearQuotedMessage();
+    };
+    const calculateReferenceContent = (message) => {
+      var _a;
+      if (!message) {
+        return "no reference";
+      }
+      switch (message.type) {
+        case TencentCloudChat.TYPES.MSG_TEXT:
+          return (_a = message.payload) == null ? void 0 : _a.text;
+        case TencentCloudChat.TYPES.MSG_IMAGE:
+          return t("MessageInput.image");
+        case TencentCloudChat.TYPES.MSG_AUDIO:
+          return t("MessageInput.audio");
+        case TencentCloudChat.TYPES.MSG_VIDEO:
+          return t("MessageInput.video");
+        case TencentCloudChat.TYPES.MSG_FILE:
+          return t("MessageInput.file");
+        case TencentCloudChat.TYPES.MSG_LOCATION:
+          return t("MessageInput.location");
+        case TencentCloudChat.TYPES.MSG_CUSTOM:
+          return t("MessageInput.custom_message");
+        default:
+          return t("MessageInput.unknown");
+      }
+    };
+    return (_ctx, _cache) => {
+      return unref(quotedMessage) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(unref(styles)["quoted__message__preview"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(styles)["quoted__message__preview__content"])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(styles)["quoted__message__preview__content--header"])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(styles)["quoted__message__preview__content--title"])
+            }, toDisplayString(unref(quotedMessage).nick || unref(quotedMessage).from), 3)
+          ], 2),
+          createElementVNode("div", {
+            class: normalizeClass(unref(styles)["quoted__message__preview__content--text"])
+          }, toDisplayString(calculateReferenceContent(unref(quotedMessage))), 3)
+        ], 2),
+        createVNode(unref(IconClose), {
+          class: normalizeClass(unref(styles)["quoted__message__preview__close"]),
+          size: "16",
+          onClick: handleClose
+        }, null, 8, ["class"])
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
 export {
-  _ as QuotedMessagePreview
+  _sfc_main as QuotedMessagePreview
 };

package/dist/components/MessageInput/SendButton/SendButton.js

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

package/dist/components/MessageInput/SendButton/SendButton.vue.d.ts

@@ -1,8 +1,8 @@
-interface Props {
-    onClick?: (e: MouseEvent) => void;
+interface SendButtonProps {
+    onClick?: (e: TouchEvent) => void;
     disabled?: boolean;
 }
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SendButtonProps>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<SendButtonProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/dist/components/MessageInput/SendButton/index.js

@@ -1,4 +1,35 @@
-import { _ } from "../../../SendButton.vue_vue_type_script_setup_true_lang-BqIeqUyN.js";
+import { defineComponent, createBlock, openBlock, unref, withCtx, createTextVNode, toDisplayString } from "vue";
+import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SendButton",
+  props: {
+    onClick: { type: Function },
+    disabled: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const { t } = useUIKit();
+    function onSendButtonClick(e) {
+      if (!props.disabled && props.onClick) {
+        props.onClick(e);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TUIButton), {
+        type: "primary",
+        shape: "round",
+        size: "medium",
+        disabled: _ctx.disabled,
+        onClick: onSendButtonClick
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(unref(t)("MessageInput.send")), 1)
+        ]),
+        _: 1
+      }, 8, ["disabled"]);
+    };
+  }
+});
 export {
-  _ as SendButton
+  _sfc_main as SendButton
 };

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

@@ -1,12 +1,12 @@
 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;