import ViewLayoutCollapse_default from "../../../components/ViewLayout/ViewLayoutCollapse.vue.js";
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
import { ScalarLoading, useLoadingState } from "@scalar/components";
//#region src/views/Request/ResponseSection/ResponseBodyStreaming.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = { class: "flex w-full items-center justify-between" };
var _hoisted_2 = {
	key: 0,
	class: "mr-2 flex items-center gap-2"
};
var _hoisted_3 = {
	key: 0,
	class: "text-red bg-b-danger sticky top-0 border-b p-2"
};
var _hoisted_4 = {
	key: 1,
	class: "p-2"
};
var ResponseBodyStreaming_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "ResponseBodyStreaming",
	props: { reader: {} },
	setup(__props) {
		const loader = useLoadingState();
		const textContent = ref("");
		const errorRef = ref(null);
		const decoder = new TextDecoder();
		const contentContainer = ref(null);
		/**
		* Scrolls the content container to the bottom
		*/
		const scrollToBottom = () => {
			if (contentContainer.value) contentContainer.value.scrollTop = contentContainer.value.scrollHeight;
		};
		watch(textContent, () => {
			nextTick(scrollToBottom);
		});
		/**
		* Reads the stream and appends the content
		*/
		async function readStream() {
			try {
				while (loader.isLoading) {
					const { done, value } = await __props.reader.read();
					if (done) {
						loader.clear();
						break;
					}
					if (value) textContent.value += decoder.decode(value, { stream: true });
				}
			} catch (error) {
				console.error("Error reading stream:", error);
				loader.clear();
				errorRef.value = error;
			} finally {
				textContent.value += decoder.decode();
			}
		}
		onMounted(() => {
			loader.start();
			readStream();
			errorRef.value = null;
		});
		onBeforeUnmount(() => {
			__props.reader.cancel();
			loader.clear();
		});
		return (_ctx, _cache) => {
			return openBlock(), createBlock(ViewLayoutCollapse_default, { class: "max-h-content overflow-y-hidden" }, {
				title: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[1] || (_cache[1] = createElementVNode("div", null, "Body", -1)), unref(loader).isActive ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(ScalarLoading), {
					loader: unref(loader),
					size: "xs"
				}, null, 8, ["loader"]), _cache[0] || (_cache[0] = createElementVNode("span", { class: "text-c-2" }, " Listening… ", -1))])) : createCommentVNode("", true)])]),
				default: withCtx(() => [createElementVNode("div", {
					ref_key: "contentContainer",
					ref: contentContainer,
					class: "text-xxs font-code h-full overflow-auto leading-6 whitespace-pre-wrap"
				}, [errorRef.value ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(errorRef.value.message), 1)) : createCommentVNode("", true), textContent.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(textContent.value), 1)) : createCommentVNode("", true)], 512)]),
				_: 1
			});
		};
	}
});
//#endregion
export { ResponseBodyStreaming_vue_vue_type_script_setup_true_lang_default as default };

//# sourceMappingURL=ResponseBodyStreaming.vue.script.js.map