@webitel/ui-chats 0.1.40 → 0.1.42

package/src/ui/messaging/composables/useChatScroll.ts

@@ -1,8 +1,9 @@
-import { useScroll } from '@vueuse/core';
+import { useResizeObserver, useScroll } from '@vueuse/core';
 import {
 	type ComputedRef,
 	computed,
 	nextTick,
+	onUnmounted,
 	type Ref,
 	ref,
 	watch,
@@ -10,105 +11,180 @@ import {
 
 import type { ChatMessageType } from '../types/ChatMessage.types';
 
-export const useChatScroll = (
-	element: Ref<HTMLElement | null> = null,
-	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>,
-	isLoading?: Ref<boolean> | ComputedRef<boolean>,
-) => {
-	/* @author ye.pohranichna
-  why 136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
-	const defaultThreshold = 136;
-	const { arrivedState } = useScroll(element);
-
-	const newUnseenMessagesCount = ref<number>(0);
-	const showScrollToBottomBtn = ref<boolean>(false);
-	/* @author ye.pohranichna
-    the distance where the scrollToBottomBtn must be shown/hide. */
-	const threshold = ref<number>(defaultThreshold);
-	const isLoadingNextMessages = ref<boolean>(false);
-	const lastVisibleMessageEl = ref<HTMLElement | null>(null);
-
-	const isLastMessageIsMy = computed<boolean>(
-		() => lastMessage.value?.member?.self,
-	);
-	const lastMessage = computed<ChatMessageType>(() => messages.value?.at(-1));
-	const handleChatScroll = () => {
-		const wrapper = element.value;
-		if (!wrapper) return;
-
-		handleShowScrollToBottomBtn(wrapper);
-	};
+import { useScrollToBottomBtn } from './useScrollToBottomBtn';
 
-	const handleChatResize = () => {
-		const wrapper = element.value;
-		if (!wrapper) return;
+export interface UseChatScrollOptions {
+	chatContainer: Ref<HTMLElement | null>;
+	chatContent: Ref<HTMLElement | null>;
+	messages: Ref<ChatMessageType[]> | ComputedRef<ChatMessageType[]>;
+	chatId: ComputedRef<string>;
+	isChatClosed: ComputedRef<boolean>;
+	isLoading?: Ref<boolean> | ComputedRef<boolean>;
+	onBeforeStart?: (options: {
+		scrollToBottom: (behavior?: ScrollBehavior) => void;
+	}) => void;
+}
 
-		updateThreshold(wrapper);
-		handleShowScrollToBottomBtn(wrapper);
-	};
+export const useChatScroll = ({
+	chatContainer,
+	chatContent,
+	messages,
+	chatId,
+	isChatClosed,
+	isLoading,
+	onBeforeStart = (options) => {
+		options.scrollToBottom();
+	},
+}: UseChatScrollOptions) => {
+	const { arrivedState } = useScroll(chatContainer);
 
-	const handleShowScrollToBottomBtn = (el: HTMLElement) => {
-		if (arrivedState.bottom) {
-			resetScrollToBottomBtn();
-			return;
-			/* @author ye.pohranichna
-          quit the function because we are already at the bottom */
-		}
+	const {
+		showScrollToBottomBtn,
+		handleChatScroll,
+		resetScrollToBottomBtn,
+		updateScrollToBottomBtnVisibility,
+		updateThreshold,
+	} = useScrollToBottomBtn(chatContainer, arrivedState);
 
-		const { scrollTop, scrollHeight, clientHeight } = el;
-		const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
-		showScrollToBottomBtn.value = distanceFromBottom > threshold.value;
-	};
+	let isLoadingNextMessages = false;
+	let lastVisibleMessageEl: HTMLElement | null = null;
+	let prevScrollHeight = 0;
+	let resizeObserver: ResizeObserver | null = null;
+	let isViewportTransition = false;
+	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * 2 tolerates subpixel scrollTop/clientHeight rounding that can leave
+	 * their sum a fraction short of scrollHeight at the very bottom.
+	 */
+	const bottomThreshold = 2;
 
-	const resetScrollToBottomBtn = (): void => {
-		newUnseenMessagesCount.value = 0;
-		showScrollToBottomBtn.value = false;
-	};
+	const newUnseenMessagesCount = ref(0);
 
-	const updateThreshold = (el: HTMLElement) => {
-		/* @author ye.pohranichna
-         need to update if clientHeight was changed
-         https://webitel.atlassian.net/browse/WTEL-7136 */
-		threshold.value = Math.max(defaultThreshold, el.clientHeight * 0.3);
-	};
+	const lastMessage = computed(() => messages.value?.at(-1));
+	const isLastMessageMy = computed(() => !!lastMessage.value?.member?.self);
 
 	const handleBtnAfterNewMessage = () => {
-		if (arrivedState.bottom || isLastMessageIsMy.value) {
-			scrollToBottom('smooth');
-		} else {
+		if (isLastMessageMy.value) {
+			scrollToBottom('instant');
+		} else if (!arrivedState.bottom) {
 			newUnseenMessagesCount.value += 1;
 		}
 	};
 
 	const scrollToBottom = (behavior: ScrollBehavior = 'instant') => {
-		element?.value.scrollTo({
-			top: element?.value.scrollHeight,
-			behavior: behavior === 'instant' ? 'auto' : behavior,
+		chatContainer.value?.scrollTo({
+			top: chatContainer.value?.scrollHeight,
+			behavior,
 		});
 
 		newUnseenMessagesCount.value = 0;
-		showScrollToBottomBtn.value = false;
-	};
 
+		resetScrollToBottomBtn();
+	};
 	const getTopMessageEl = () => {
 		// help to fix chat viewing position when new messages was loaded
-		if (!element.value?.children) return;
-		lastVisibleMessageEl.value =
-			element.value?.getElementsByClassName('chat-message')[0] ?? null;
+		if (!chatContainer.value?.children) return;
+		lastVisibleMessageEl =
+			(chatContainer.value?.getElementsByClassName(
+				'chat-message',
+			)[0] as HTMLElement) ?? null;
 	};
 
 	const loadNextMessages = (
-		canLoadMore: boolean | undefined,
+		canLoadMore: boolean,
 		onLoadNextMessages: () => void,
 	) => {
-		if (isLoadingNextMessages.value || isLoading?.value || !canLoadMore) return;
+		if (isLoadingNextMessages || isLoading?.value || !canLoadMore) return;
 
-		isLoadingNextMessages.value = true;
+		isLoadingNextMessages = true;
 		getTopMessageEl();
 
 		onLoadNextMessages();
 	};
 
+	const startStickToBottomObserving = () => {
+		if (!chatContent.value) return;
+
+		prevScrollHeight = chatContainer.value?.scrollHeight ?? 0;
+
+		resizeObserver = new ResizeObserver(() => {
+			const el = chatContainer.value;
+			if (!el) return;
+
+			const newScrollHeight = el.scrollHeight;
+
+			if (isViewportTransition) {
+				prevScrollHeight = newScrollHeight;
+				updateScrollToBottomBtnVisibility(el);
+				return;
+			}
+
+			const wasNearBottom =
+				el.scrollTop + el.clientHeight >= prevScrollHeight - bottomThreshold;
+			const contentGrown = newScrollHeight > prevScrollHeight;
+
+			/**
+			 * @author PolinaSukhorukova-webitel
+			 *
+			 * arrivedState.bottom lags after programmatic scrollTo,
+			 * so the distance is also checked manually.
+			 */
+			const shouldScrollToBottom =
+				contentGrown && (arrivedState.bottom || wasNearBottom);
+
+			if (shouldScrollToBottom) {
+				scrollToBottom('instant');
+			}
+
+			prevScrollHeight = newScrollHeight;
+			updateScrollToBottomBtnVisibility(el);
+		});
+
+		resizeObserver.observe(chatContent.value);
+	};
+
+	const stopStickToBottomObserving = () => {
+		resizeObserver?.disconnect();
+		resizeObserver = null;
+	};
+
+	useResizeObserver(chatContainer, () => {
+		const el = chatContainer.value;
+		if (!el) return;
+
+		updateThreshold(el.clientHeight);
+		updateScrollToBottomBtnVisibility(el);
+	});
+
+	const resetScrollState = () => {
+		stopStickToBottomObserving();
+		prevScrollHeight = 0;
+		newUnseenMessagesCount.value = 0;
+		resetScrollToBottomBtn();
+	};
+
+	const onFullscreenChange = () => {
+		isViewportTransition = true;
+
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+
+		viewportTransitionTimer = setTimeout(() => {
+			isViewportTransition = false;
+			viewportTransitionTimer = null;
+		}, 500);
+	};
+
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * WTEL-9968 (https://webitel.atlassian.net/browse/WTEL-9968)
+	 * to avoid extra bottom scroll when chat is in fullscreen
+	 */
+
+	document.addEventListener('fullscreenchange', onFullscreenChange);
+
 	watch(
 		() => messages.value?.length,
 		(newValue, oldValue) => {
@@ -123,25 +199,59 @@ export const useChatScroll = (
 	watch(
 		() => isLoading?.value,
 		async (loading) => {
-			if (loading || !isLoadingNextMessages.value) return;
+			// restore scroll position after older messages are prepended:
+			// scroll to the previously top message so the view doesn't jump
+			if (loading || !isLoadingNextMessages) return;
 
 			await nextTick();
 
-			element.value?.scrollTo({
-				top: lastVisibleMessageEl.value?.offsetTop,
+			chatContainer.value?.scrollTo({
+				top: lastVisibleMessageEl?.offsetTop,
 				behavior: 'auto',
 			});
 
-			isLoadingNextMessages.value = false;
+			isLoadingNextMessages = false;
 		},
 	);
 
+	watch(
+		() => chatId.value,
+		async () => {
+			resetScrollState();
+
+			if (isChatClosed.value) return;
+
+			await nextTick();
+
+			onBeforeStart?.({
+				scrollToBottom,
+			});
+
+			startStickToBottomObserving();
+		},
+		{
+			immediate: true,
+		},
+	);
+
+	watch(
+		() => arrivedState.bottom,
+		(bottom) => {
+			if (bottom) newUnseenMessagesCount.value = 0;
+		},
+	);
+
+	onUnmounted(() => {
+		stopStickToBottomObserving();
+		document.removeEventListener('fullscreenchange', onFullscreenChange);
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+	});
+
 	return {
 		showScrollToBottomBtn,
 		newUnseenMessagesCount,
 		scrollToBottom,
 		loadNextMessages,
 		handleChatScroll,
-		handleChatResize,
 	};
 };

package/src/ui/messaging/composables/useObserveHeightUntilStable.ts

@@ -0,0 +1,75 @@
+import { onUnmounted, type Ref } from 'vue';
+
+/**
+ * @author PolinaSukhorukova-webitel
+ *
+ * Fires the callback on every resize and disconnects itself
+ * once clientHeight is unchanged twice in a row.
+ */
+
+export const useObserveHeightUntilStable = (
+	chatContainer: Ref<HTMLElement | null>,
+	callback: () => void,
+) => {
+	let observer: ResizeObserver | null = null;
+	let isViewportTransition = false;
+	let viewportTransitionTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const onFullscreenChange = () => {
+		isViewportTransition = true;
+
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+
+		viewportTransitionTimer = setTimeout(() => {
+			isViewportTransition = false;
+			viewportTransitionTimer = null;
+		}, 500);
+	};
+
+	const stopObserve = () => {
+		observer?.disconnect();
+		observer = null;
+	};
+
+	const startObserve = () => {
+		if (!chatContainer.value) return;
+
+		let lastClientHeight = chatContainer.value.clientHeight;
+		let stableCount = 0;
+
+		observer = new ResizeObserver(() => {
+			const currentClientHeight = chatContainer.value?.clientHeight;
+
+			if (!isViewportTransition) callback();
+
+			if (currentClientHeight === lastClientHeight) {
+				stableCount++;
+				if (stableCount >= 2) stopObserve();
+			} else {
+				stableCount = 0;
+				lastClientHeight = currentClientHeight;
+			}
+		});
+
+		observer.observe(chatContainer.value);
+	};
+
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * WTEL-9968 (https://webitel.atlassian.net/browse/WTEL-9968)
+	 * to avoid extra bottom scroll when chat is in fullscreen
+	 */
+	document.addEventListener('fullscreenchange', onFullscreenChange);
+
+	onUnmounted(() => {
+		stopObserve();
+		document.removeEventListener('fullscreenchange', onFullscreenChange);
+		if (viewportTransitionTimer) clearTimeout(viewportTransitionTimer);
+	});
+
+	return {
+		startObserve,
+		stopObserve,
+	};
+};

package/src/ui/messaging/composables/useScrollToBottomBtn.ts

@@ -0,0 +1,51 @@
+import type { UseScrollReturn } from '@vueuse/core';
+import { type Ref, ref } from 'vue';
+
+export const useScrollToBottomBtn = (
+	chatContainer: Ref<HTMLElement | null>,
+	arrivedState: UseScrollReturn['arrivedState'],
+) => {
+	const showScrollToBottomBtn = ref(false);
+	/* @author ye.pohranichna
+	why 136px? because: https://webitel.atlassian.net/browse/WTEL-7136 */
+	const defaultThreshold = 136;
+	/* @author ye.pohranichna
+	the distance where the scrollToBottomBtn must be shown/hide. */
+	const threshold = ref(defaultThreshold);
+
+	const handleChatScroll = () => {
+		const wrapper = chatContainer.value;
+		if (!wrapper) return;
+
+		updateScrollToBottomBtnVisibility(wrapper);
+	};
+
+	const resetScrollToBottomBtn = () => {
+		showScrollToBottomBtn.value = false;
+	};
+
+	const updateScrollToBottomBtnVisibility = (el: HTMLElement) => {
+		if (arrivedState.bottom) {
+			resetScrollToBottomBtn();
+			return;
+			/* @author ye.pohranichna
+			quit the function because we are already at the bottom */
+		}
+
+		const { scrollTop, scrollHeight, clientHeight } = el;
+		const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+		showScrollToBottomBtn.value = distanceFromBottom > threshold.value;
+	};
+
+	const updateThreshold = (clientHeight: number) => {
+		threshold.value = Math.max(defaultThreshold, clientHeight * 0.3);
+	};
+
+	return {
+		showScrollToBottomBtn,
+		handleChatScroll,
+		resetScrollToBottomBtn,
+		updateScrollToBottomBtnVisibility,
+		updateThreshold,
+	};
+};

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

@@ -72,8 +72,7 @@
 
   <script setup lang="ts">
 import { ComponentSize } from '@webitel/ui-sdk/enums';
-import { computed, defineEmits, defineProps, inject } from 'vue';
-
+import { computed, inject } from 'vue';
 import type { ChatMessageType } from '../../../types/ChatMessage.types';
 import { useChatMessageFile } from '../composables/useChatMessageFile';
 import { MessageAction } from '../enums/MessageAction.enum';

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

@@ -20,8 +20,7 @@
 
 <script setup lang="ts">
 import { prettifyFileSize } from '@webitel/ui-sdk/scripts';
-import { computed, defineProps } from 'vue';
-
+import { computed } from 'vue';
 import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
 const props = withDefaults(

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

@@ -17,8 +17,6 @@
   setup
   lang="ts"
 >
-import { defineEmits, defineProps } from 'vue';
-
 import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
 const props = defineProps<{

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

@@ -30,8 +30,7 @@
 <script setup lang="ts">
 import { WtPlayer, WtVidstackPlayer } from '@webitel/ui-sdk/components';
 import { ComponentSize } from '@webitel/ui-sdk/enums';
-import { computed, defineEmits, defineProps } from 'vue';
-
+import { computed } from 'vue';
 import type { ChatMessageFile } from '../../../../types/ChatMessage.types';
 
 const props = defineProps<{

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

@@ -24,7 +24,7 @@ interface IChatMessageSizeExceededErrorProps {
 	selfSide?: boolean;
 }
 
-const props = withDefaults(defineProps<IChatMessageSizeExceededErrorProps>(), {
+withDefaults(defineProps<IChatMessageSizeExceededErrorProps>(), {
 	selfSide: false,
 });
 </script>

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

@@ -12,7 +12,7 @@
   lang="ts"
 >
 import { prettifyTime } from '@webitel/ui-sdk/scripts';
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 
 const props = withDefaults(
 	defineProps<{

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

@@ -1,5 +1,5 @@
 export interface ChatMessageType {
-	id: number;
+	id: number | string;
 	date?: number;
 	file?: ChatMessageFile;
 	member: ChatMember;
@@ -24,10 +24,11 @@ export type ChatMessageFile = {
 	mime?: string;
 	url?: string;
 	streamUrl?: string;
+	malware?: boolean;
 };
 
 export type ChatMember = {
-	id: number;
+	id: number | string;
 	name: string;
 	type: string;
 	userId?: number;

package/src/ui/the-chat-container.vue

@@ -18,6 +18,8 @@
         :without-avatars="props.withoutAvatars"
         :agent-name="props.agentName"
         :contact="props.contact"
+        :chat-id="props.chatId"
+        :is-chat-closed="props.isChatClosed"
         @[ChatAction.LoadNextMessages]="emit(ChatAction.LoadNextMessages)"
       />
     </slot>
@@ -83,6 +85,8 @@ const props = withDefaults(
 		readonly?: boolean; // hide chat footer with textarea and action-buttons
 		agentName?: string;
 		contact?: WebitelContactsContact;
+		chatId?: string;
+		isChatClosed?: boolean;
 	}>(),
 	{
 		size: ComponentSize.MD,
@@ -91,6 +95,8 @@ const props = withDefaults(
 		canLoadNextMessages: false,
 		isNextMessagesLoading: false,
 		readonly: false,
+		chatId: '',
+		isChatClosed: false,
 	},
 );
 
@@ -163,5 +169,6 @@ function sendFile(files: File[]) {
   flex-direction: column;
   height: 100%;
   width: 100%;
+  gap: var(--spacing-2xs);
 }
 </style>

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

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

package/src/ui/utils/emitter.ts

@@ -1,6 +1,6 @@
 import mitt from 'mitt';
 
-import type { ChatMessageType } from '../../../types/ui';
+import type { ChatMessageType } from '../messaging/types/ChatMessage.types';
 
 export type UiChatsEmitterEvents = {
 	insertAtCursor: {

package/types/adapters/chat-web-sdk/toChatMessage.d.ts

@@ -0,0 +1,23 @@
+import type { IMessage } from '@webitel/chat-web-sdk';
+import type { ChatMessageType } from '../../types';
+export interface ToChatMessageOptions {
+    /**
+     * Decide whether a message is authored by the current agent / "self" side.
+     * Result is written to `ChatMember.self`, which drives outgoing-bubble
+     * alignment in the UI. The message alone cannot know who "self" is — that
+     * is presentation context the caller owns (e.g. compare `sender.contact`
+     * against the logged-in account).
+     */
+    isSelf?: (message: IMessage) => boolean;
+}
+/**
+ * Map a single `@webitel/chat-web-sdk` message (`IMessage`) into the
+ * `@webitel/ui-chats` presentation contract (`ChatMessageType`).
+ *
+ * Anti-corruption layer: keeps `ui-chats` free of any backend/SDK coupling.
+ */
+export declare const mapMessageToChatMessage: (message: IMessage, options?: ToChatMessageOptions) => ChatMessageType;
+/**
+ * Batch variant of {@link mapMessageToChatMessage} for message history pages.
+ */
+export declare const mapMessagesToChatMessages: (messages: readonly IMessage[], options?: ToChatMessageOptions) => ChatMessageType[];

package/types/adapters/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Adapters mapping external data sources into the `@webitel/ui-chats`
+ * presentation contract (`ChatMessageType`, …).
+ *
+ * Consuming this entry pulls `@webitel/chat-web-sdk` (declared as an optional
+ * peerDependency). The core `@webitel/ui-chats/ui` entry stays free of it.
+ */
+export { mapMessagesToChatMessages, mapMessageToChatMessage, type ToChatMessageOptions, } from './chat-web-sdk/toChatMessage';

package/types/types/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Public data contract of `@webitel/ui-chats`.
+ *
+ * These are the plain, transport-agnostic shapes the UI components accept.
+ * External data sources (e.g. `@webitel/chat-web-sdk`) must be mapped into
+ * them — see `@webitel/ui-chats/adapters`.
+ */
+export type { ChatMember, ChatMessageChatInfo, ChatMessageFile, ChatMessageType, ChatVia, ContactInfo, } from '../ui/messaging/types/ChatMessage.types';

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

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

package/types/ui/index.d.ts

@@ -1,3 +1,7 @@
-export { ChatAction } from "./chat-footer/modules/user-input/enums/ChatAction.enum";
-export type { ChatMessageType } from "./messaging/types/ChatMessage.types";
-export { default as ChatContainer } from "./the-chat-container.vue";
+export { ChatAction } from './chat-footer/modules/user-input/enums/ChatAction.enum';
+export { useChatScroll } from './messaging/composables/useChatScroll';
+export { useObserveHeightUntilStable } from './messaging/composables/useObserveHeightUntilStable';
+export { useChatMessageFile } from './messaging/modules/message/composables/useChatMessageFile';
+export { MessageAction } from './messaging/modules/message/enums/MessageAction.enum';
+export type { ChatMessageFile, ChatMessageType, } from './messaging/types/ChatMessage.types';
+export { default as ChatContainer } from './the-chat-container.vue';

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

@@ -7,15 +7,19 @@ type __VLS_Props = {
     withoutAvatars?: boolean;
     agentName?: string;
     contact?: WebitelContactsContact;
+    chatId?: string;
+    isChatClosed?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     loadNextMessages: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onLoadNextMessages?: () => any;
 }>, {
+    chatId: string;
+    isChatClosed: boolean;
+    isLoading: boolean;
     withoutAvatars: boolean;
     next: boolean;
-    isLoading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;