@webitel/ui-chats 0.0.2

package/src/ui/messaging/modules/message/components/details/chat-message-blocked-error.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="chat-message-blocked-error">
+    <wt-icon
+      icon="protection-error"
+      color="error"
+    />
+    <!-- TODO: move chat locales from cc-workspaces to this pkg -->
+    <p>
+      <!-- {{ t('workspaceSec.chat.chatsFileBlocked') }} -->
+      {{ t('@webitel/ui-chats.ui.messaging.chatsFileBlocked') }}
+    </p>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss">
+.chat-message-blocked-error {
+  @extend %typo-body-1;
+  background: var(--p-error-highlight-color);
+  border-radius: var(--spacing-xs);
+  padding: var(--spacing-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+  white-space: pre-line;
+  text-align: center;
+
+  //width limit for blocking error message
+  max-width: 132px;
+}
+</style>
+<script setup lang="ts">
+</script>

package/src/ui/messaging/modules/message/components/details/chat-message-document.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="chat-message-document"
+    :class="{ 'chat-message-document--right': props.selfSide }"
+    @click="downloadDocument"
+  >
+    <div class="chat-message-document__icon-wrapper">
+      <wt-icon class="chat-message-document__icon" icon="attach" />
+    </div>
+    <div class="chat-message-document__info-wrapper">
+      <a class="chat-message-document__name" :title="props.file.name">
+        {{ props.file.name }}
+      </a>
+      <div class="chat-message-document__size">
+        {{ documentSize }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { prettifyFileSize } from '@webitel/ui-sdk/scripts';
+import { computed, defineProps } from 'vue';
+
+import { ChatMessageFile } from '../../../../types/ChatMessage.types';
+
+const props = withDefaults(defineProps<{
+  file: ChatMessageFile;
+  selfSide?: boolean;
+}>(),{
+  selfSide: false,
+});
+const documentSize = computed(() => {
+  if (!props.file) return '';
+  return prettifyFileSize(props.file.size);
+});
+
+function downloadDocument() {
+  if (!props.file) return;
+  const a = document.createElement('a');
+  a.href = props.file.url;
+  a.target = '_blank';
+  a.download = props.file.name;
+  a.click();
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-message-document {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  padding: var(--spacing-xs);
+  background: var(--primary-light-color);
+  border-radius: var(--border-radius);
+
+  &__icon-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-right: var(--spacing-xs);
+    padding: var(--spacing-2xs);
+  }
+
+  &__info-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 0;
+  }
+
+  &__name {
+    @extend %typo-subtitle-2;
+    cursor: pointer;
+    overflow-wrap: break-word;
+    color: var(--text-main-color);
+  }
+
+  &__size {
+    @extend %typo-caption;
+    color: var(--text-main-color);
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+    background: var(--secondary-light-color);
+
+    .chat-message-new-document__icon-wrapper {
+      margin-right: 0;
+      margin-left: var(--spacing-xs);
+    }
+  }
+}
+</style>

package/src/ui/messaging/modules/message/components/details/chat-message-image.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="chat-message-image" @click="emit('open', props.file)">
+    <img
+      class="chat-message-image__img"
+      :src="props.file.url"
+      :alt="props.file.name"
+      draggable="false"
+    >
+  </div>
+</template>
+
+
+<script setup lang="ts">
+
+import { defineEmits, defineProps } from 'vue';
+
+import { ChatMessageFile } from '../../../../types/ChatMessage.types';
+
+const props = defineProps<{
+  file: ChatMessageFile,
+}>();
+const emit = defineEmits<{
+  open: [ChatMessageFile],
+}>();
+
+</script>
+
+
+<style lang="scss" scoped>
+.chat-message-image {
+  cursor: pointer;
+
+  &__img {
+    @extend %typo-body-1;
+    max-height: var(--chat-file-max-height);
+    max-width: var(--chat-file-max-width);
+    width: 100%;
+  }
+}
+</style>

package/src/ui/messaging/modules/message/components/details/chat-message-player.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="chat-message-player"
+    @click="emit('open', props.file)"
+  >
+    <wt-player
+      :src="mediaUrl"
+      :mime="props.type"
+      :autoplay="false"
+      :hide-duration="type.includes('video')"
+      reset-on-end
+      reset-volume
+      @initialized="handlePlayerInitialize"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { computed, defineEmits, defineProps } from 'vue';
+
+import { ChatMessageFile } from '../../../../types/ChatMessage.types';
+
+const props = defineProps<{
+  file:  ChatMessageFile,
+  type: string,
+}>();
+const emit = defineEmits<{
+  open: [ChatMessageFile],
+  initialized: [object],
+}>();
+
+const mediaUrl = computed(() => props.file.streamUrl || props.file.url);
+
+function handlePlayerInitialize(player) {
+  emit('initialized', player);
+};
+
+</script>
+
+<style lang="scss" scoped>
+.chat-message-player {
+  .wt-player :deep(.plyr) {
+    .wt-player__close-icon,
+    .plyr__volume {
+      display: none;
+    }
+
+    &.plyr--video {
+      max-height: var(--chat-file-max-height);
+      max-width: var(--chat-file-max-width);
+    }
+  }
+}
+</style>

package/src/ui/messaging/modules/message/components/details/chat-message-text.vue

@@ -0,0 +1,46 @@
+<template>
+  <p
+    class="chat-message-text"
+    v-html="text"
+  />
+</template>
+
+<script setup lang="ts">
+import Autolinker from 'autolinker';
+import {computed, defineProps} from 'vue';
+
+const props = defineProps<{
+  text: string;
+}>();
+
+const text = computed(() => {
+  // ATTENTION: not all libs are suitable for this case, because we want to preserve "<" signs
+  // https://my.webitel.com/browse/DEV-2848
+  return Autolinker.link(props.text, {
+    newWindow: true,
+    sanitizeHtml: true, // DONT FORGET TO SANITIZE, OR USE DOM PURIFY
+    className: 'chat-message-new-text__link',
+  });
+})
+</script>
+
+<style lang="scss" scoped>
+
+.chat-message-text {
+  @extend %typo-body-1;
+  overflow-wrap: anywhere;
+  white-space: pre-line; // read \n as "new line"
+  padding: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background: var(--primary-light-color);
+  color: var(--primary-on-color);
+  place-self: flex-start;
+
+  // reset links inside text
+  :deep(.chat-message-text__link) {
+    color: revert;
+    text-decoration: revert;
+  }
+}
+
+</style>

package/src/ui/messaging/modules/message/components/details/chat-message-time.vue

@@ -0,0 +1,37 @@
+<template>
+  <aside class="chat-message-time">
+    <div class="chat-message-time__sent-at">
+      {{ time }}
+    </div>
+  </aside>
+</template>
+
+
+<script setup lang="ts">
+import { prettifyTime } from '@webitel/ui-sdk/scripts';
+import { computed, defineProps } from 'vue';
+
+
+const props = withDefaults(defineProps<{
+  date?: string | number // timestamp
+}>(), {
+  date: '',
+});
+
+const time = computed(() => prettifyTime(props.date));
+</script>
+
+<style lang="scss" scoped>
+.chat-message-time {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+
+  &__sent-at {
+    @extend %typo-caption;
+    color: var(--text-main-color);
+    white-space: nowrap;
+  }
+}
+</style>

package/src/ui/messaging/modules/message/composables/useChatMessageFile.ts

@@ -0,0 +1,38 @@
+import { computed, type Ref, toRef } from 'vue';
+
+import { ChatMessageFile } from '../../../types/ChatMessage.types';
+
+export function useChatMessageFile(
+  file: ChatMessageFile | Ref<ChatMessageFile>,
+) {
+  const fileRef = toRef(file);
+
+  const type = computed(() => {
+    return fileRef.value?.mime;
+  });
+
+  const image = computed(() => {
+    const isImage = type.value?.includes('image');
+    const isHEIC = type.value?.includes('heic');
+
+    if (isHEIC) return null;
+
+    return isImage && fileRef.value; //https://webitel.atlassian.net/browse/WTEL-6268
+  });
+
+  const media = computed(() => {
+    const isMedia =
+      type.value?.includes('audio') || type.value?.includes('video');
+    return isMedia && fileRef.value;
+  });
+
+  const document = computed(() => {
+    return !media.value && !image.value && fileRef.value;
+  });
+
+  return {
+    image,
+    media,
+    document,
+  };
+}

package/src/ui/messaging/types/ChatMessage.types.ts

@@ -0,0 +1,12 @@
+export type ChatMessageType = {
+  id: string;
+};
+
+export type ChatMessageFile = {
+  id?: string;
+  name?: string;
+  size?: string;
+  mime?: string;
+  url?: string;
+  streamUrl?: string;
+};

package/src/ui/utils/ResultCallbacks.types.ts

@@ -0,0 +1 @@
+export { ResultCallbacks } from '@webitel/ui-sdk/src/types';

package/src/ui/utils/emitter.ts

@@ -0,0 +1,12 @@
+import mitt from "mitt";
+
+export type UiChatsEmitterEvents = {
+    insertAtCursor: { text: string };
+    focusOnTextField: undefined;
+};
+
+export const createUiChatsEmitter = () => {
+    const uiChatsEmitter = mitt<UiChatsEmitterEvents>();
+
+    return uiChatsEmitter;
+};

package/types/index.d.ts

@@ -0,0 +1 @@
+export {};

package/types/locale/en/en.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    '@webitel/ui-chats': {
+        ui: {
+            messaging: {
+                chatsFileBlocked: string;
+            };
+        };
+    };
+};
+export default _default;

package/types/ui/chat-container.vue.d.ts

@@ -0,0 +1,31 @@
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { ResultCallbacks } from './utils/ResultCallbacks.types';
+import { ChatMessageType } from './messaging/types/ChatMessage.types';
+import { ChatAction, SharedActionSlots } from './chat-footer/modules/user-input/types/ChatAction.types';
+type __VLS_Props = {
+    messages: ChatMessageType[];
+    chatActions?: ChatAction[];
+    size?: ComponentSize;
+};
+type __VLS_Slots = {
+    main: () => any;
+    footer: () => any;
+} & SharedActionSlots;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "action:sendMessage": (text: string, options: ResultCallbacks) => any;
+    "action:attachFiles": (files: File[], options: ResultCallbacks) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onAction:sendMessage"?: (text: string, options: ResultCallbacks) => any;
+    "onAction:attachFiles"?: (files: File[], options: ResultCallbacks) => any;
+}>, {
+    size: ComponentSize;
+    chatActions: ChatAction[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/ui/chat-footer/components/chat-footer-wrapper.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/ui/chat-footer/modules/user-input/components/actions/attach-files-action.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    attachFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onAttachFiles?: (files: File[]) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/chat-footer/modules/user-input/components/actions/emoji-picker-action.vue.d.ts

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

package/types/ui/chat-footer/modules/user-input/components/actions/send-message-action.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    sendMessage: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onSendMessage?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/chat-footer/modules/user-input/components/chat-input-actions-bar.vue.d.ts

@@ -0,0 +1,21 @@
+import { ChatAction } from '../types/ChatAction.types';
+import { SharedActionSlots } from '../types/ChatAction.types';
+type __VLS_Props = {
+    actions: ChatAction[];
+};
+type __VLS_Slots = SharedActionSlots;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    sendMessage: () => any;
+    attachFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSendMessage?: () => any;
+    onAttachFiles?: (files: File[]) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/ui/chat-footer/modules/user-input/components/chat-text-field.vue.d.ts

@@ -0,0 +1,11 @@
+import { MaybeRef } from 'vue';
+type __VLS_ModelProps = {
+    'text': MaybeRef<string>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:text": (value: MaybeRef<string>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:text"?: (value: MaybeRef<string>) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/chat-footer/modules/user-input/types/ChatAction.types.d.ts

@@ -0,0 +1,10 @@
+export declare const ChatAction: {
+    readonly SendMessage: "sendMessage";
+    readonly AttachFiles: "attachFiles";
+    readonly EmojiPicker: "emojiPicker";
+    readonly QuickReplies: "quickReplies";
+};
+export type ChatAction = (typeof ChatAction)[keyof typeof ChatAction];
+export type SharedActionSlots = {
+    [key in `action:${ChatAction}`]?: () => any;
+};

package/types/ui/chat-input/components/actions/attach-files-action.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    attachFiles: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onAttachFiles?: (files: File[]) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/chat-input/components/actions/emoji-picker-action.vue.d.ts

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

package/types/ui/chat-input/components/actions/send-message-action.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClick?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/chat-input/components/chat-input-actions-bar.vue.d.ts

@@ -0,0 +1,21 @@
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { ChatAction } from '../enums/ChatAction.enum';
+type __VLS_Props = {
+    actions: ChatAction[];
+    size: ComponentSize;
+};
+declare var __VLS_2: "sendMessage" | "attachFiles" | "emojiPicker", __VLS_3: {
+    key: "sendMessage" | "attachFiles" | "emojiPicker";
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/ui/chat-input/components/chat-input-actions-wrapper.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/ui/chat-input/components/chat-input.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_ModelProps = {
+    'draft': string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:draft": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:draft"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/ui/chat-input/components/chat-text-field.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    'text': string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:text": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:text"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/chat-input/enums/ChatAction.enum.d.ts

@@ -0,0 +1,6 @@
+export declare const ChatAction: {
+    readonly SendMessage: "sendMessage";
+    readonly AttachFiles: "attachFiles";
+    readonly EmojiPicker: "emojiPicker";
+};
+export type ChatAction = (typeof ChatAction)[keyof typeof ChatAction];

package/types/ui/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChatContainerComponent } from './chat-container.vue';
+export { ChatAction } from './chat-footer/modules/user-input/types/ChatAction.types';

package/types/ui/messaging/components/chat-messages-container.vue.d.ts

@@ -0,0 +1,7 @@
+import { ChatMessageType } from '../types/ChatMessage.types';
+type __VLS_Props = {
+    messages: ChatMessageType[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/ui/messaging/modules/message/components/chat-message.vue.d.ts

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    message: object;
+    showAvatar?: boolean;
+    username?: string;
+};
+declare var __VLS_1: {}, __VLS_44: {};
+type __VLS_Slots = {} & {
+    'before-message'?: (props: typeof __VLS_1) => any;
+} & {
+    'after-message'?: (props: typeof __VLS_44) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "open-image": () => any;
+    "initialized-player": (args_0: object) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onOpen-image"?: () => any;
+    "onInitialized-player"?: (args_0: object) => any;
+}>, {
+    username: string;
+    showAvatar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};