@scalar/api-client 3.19.3 → 3.20.0

package/dist/v2/blocks/response-block/components/ResponseBodyPreview.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyPreview.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\nimport { prettifyNdjson } from '@/v2/blocks/response-block/helpers/prettify-ndjson'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n  content,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n  /** Decoded body; used when `mode` is `json` for pretty-printed preview (no JSON.parse round-trip). */\n  content?: unknown\n}>()\n\nconst jsonPreviewContent = computed((): string => {\n  const value = content\n  if (typeof value === 'string') {\n    return value\n  }\n  if (value == null) {\n    return ''\n  }\n  return String(value)\n})\n\n/** NDJSON pretty-printed one record per block for the `ndjson` preview. */\nconst ndjsonPreviewContent = computed((): string =>\n  prettifyNdjson(jsonPreviewContent.value),\n)\n\n/**\n * Validates the `src` against an allow-list of safe protocols before it is\n * passed to a rendering element. This blocks XSS vectors such as\n * `javascript:` and `vbscript:` URIs and also prevents accidentally embedding\n * a `data:text/html` payload that could execute script in the app origin.\n *\n * Allowed:\n *   - `blob:` (the standard case — generated client-side by `URL.createObjectURL`)\n *   - `http:` / `https:`\n *   - `data:` URIs whose MIME type is a known safe media kind\n *     (`image/*`, `video/*`, `audio/*`, `application/pdf`, `application/octet-stream`)\n *\n * Anything else (including malformed or relative URLs) collapses to an empty\n * string so the template falls back to the \"Preview unavailable\" message.\n */\nconst safeSrc = computed((): string => {\n  if (!src) {\n    return ''\n  }\n\n  if (/^data:/i.test(src)) {\n    // The MIME type must be one of the known safe kinds AND be terminated by\n    // `;` (parameters / `;base64`) or `,` (start of the payload). Anchoring\n    // at the terminator prevents prefix-matching tricks like\n    // `data:image/png-but-actually-html,…`.\n    return /^data:(?:(?:image|video|audio)\\/[a-z0-9.+-]+|application\\/pdf|application\\/octet-stream)[;,]/i.test(\n      src,\n    )\n      ? src\n      : ''\n  }\n\n  try {\n    const parsed = new URL(src)\n    if (\n      parsed.protocol === 'blob:' ||\n      parsed.protocol === 'http:' ||\n      parsed.protocol === 'https:'\n    ) {\n      return src\n    }\n  } catch {\n    // Malformed or relative URL — refuse to render.\n  }\n\n  return ''\n})\n\nconst error = ref(false)\n\n/**\n * Whether the embedded document is a PDF.\n *\n * PDFs are rendered by the browser's own PDF engine (e.g. PDFium), which runs\n * in an isolated context that cannot reach this app's origin — its DOM,\n * cookies or storage. A PDF's embedded JavaScript therefore cannot be used to\n * attack us, and a strict `sandbox=\"\"` does not confine that engine; it only\n * prevents Chromium from loading the PDF viewer at all (it boots as a scripted\n * extension page), leaving the user with a blank frame. So PDFs are rendered\n * without the `sandbox` attribute, matching the original `<object>` behaviour.\n *\n * Everything else that reaches the iframe (notably `text/html`, the genuine\n * XSS vector) keeps the strict empty sandbox.\n */\nconst isPdf = computed(\n  (): boolean => type.trim().toLowerCase() === 'application/pdf',\n)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <ResponseBodyRaw\n    v-if=\"mode === 'json'\"\n    :content=\"jsonPreviewContent\"\n    language=\"json\"\n    prettyPrintJson />\n  <ResponseBodyRaw\n    v-else-if=\"mode === 'ndjson'\"\n    :content=\"ndjsonPreviewContent\"\n    language=\"json\" />\n  <div\n    v-else-if=\"!error && safeSrc\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"safeSrc\"\n      referrerpolicy=\"no-referrer\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      referrerpolicy=\"no-referrer\"\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      referrerpolicy=\"no-referrer\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </audio>\n    <!--\n      `<object>` would execute scripts inside the embedded document in the\n      app's origin, so we render arbitrary previews inside an `<iframe>`\n      instead. Non-PDF documents (notably `text/html`) get an empty `sandbox`\n      attribute, which disables scripts, forms, popups and same-origin access.\n      PDFs are exempted (see `isPdf` above): the empty sandbox does not confine\n      the browser's PDF engine, it only stops the viewer from loading at all.\n\n      Note: an `error` event on `<iframe>` is not reliably fired for failed\n      navigations — browsers usually fire `load` even when the response is\n      blank or an error page, and a cross-origin sandboxed frame cannot be\n      introspected from JavaScript. There is therefore no useful runtime\n      fallback for an unreachable URL; the URL allow-list above is what\n      keeps unsafe content out in the first place.\n    -->\n    <iframe\n      v-else\n      class=\"aspect-[4/3] w-full border-0\"\n      :src=\"safeSrc\"\n      :sandbox=\"isPdf ? undefined : ''\"\n      referrerpolicy=\"no-referrer\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ResponseBodyPreview.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\nimport { prettifyNdjson } from '@/v2/blocks/response-block/helpers/prettify-ndjson'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n  content,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n  /** Decoded body; used when `mode` is `json` for pretty-printed preview (no JSON.parse round-trip). */\n  content?: unknown\n}>()\n\nconst { translate } = useLocalization()\n\nconst jsonPreviewContent = computed((): string => {\n  const value = content\n  if (typeof value === 'string') {\n    return value\n  }\n  if (value == null) {\n    return ''\n  }\n  return String(value)\n})\n\n/** NDJSON pretty-printed one record per block for the `ndjson` preview. */\nconst ndjsonPreviewContent = computed((): string =>\n  prettifyNdjson(jsonPreviewContent.value),\n)\n\n/**\n * Validates the `src` against an allow-list of safe protocols before it is\n * passed to a rendering element. This blocks XSS vectors such as\n * `javascript:` and `vbscript:` URIs and also prevents accidentally embedding\n * a `data:text/html` payload that could execute script in the app origin.\n *\n * Allowed:\n *   - `blob:` (the standard case — generated client-side by `URL.createObjectURL`)\n *   - `http:` / `https:`\n *   - `data:` URIs whose MIME type is a known safe media kind\n *     (`image/*`, `video/*`, `audio/*`, `application/pdf`, `application/octet-stream`)\n *\n * Anything else (including malformed or relative URLs) collapses to an empty\n * string so the template falls back to the \"Preview unavailable\" message.\n */\nconst safeSrc = computed((): string => {\n  if (!src) {\n    return ''\n  }\n\n  if (/^data:/i.test(src)) {\n    // The MIME type must be one of the known safe kinds AND be terminated by\n    // `;` (parameters / `;base64`) or `,` (start of the payload). Anchoring\n    // at the terminator prevents prefix-matching tricks like\n    // `data:image/png-but-actually-html,…`.\n    return /^data:(?:(?:image|video|audio)\\/[a-z0-9.+-]+|application\\/pdf|application\\/octet-stream)[;,]/i.test(\n      src,\n    )\n      ? src\n      : ''\n  }\n\n  try {\n    const parsed = new URL(src)\n    if (\n      parsed.protocol === 'blob:' ||\n      parsed.protocol === 'http:' ||\n      parsed.protocol === 'https:'\n    ) {\n      return src\n    }\n  } catch {\n    // Malformed or relative URL — refuse to render.\n  }\n\n  return ''\n})\n\nconst error = ref(false)\n\n/**\n * Whether the embedded document is a PDF.\n *\n * PDFs are rendered by the browser's own PDF engine (e.g. PDFium), which runs\n * in an isolated context that cannot reach this app's origin — its DOM,\n * cookies or storage. A PDF's embedded JavaScript therefore cannot be used to\n * attack us, and a strict `sandbox=\"\"` does not confine that engine; it only\n * prevents Chromium from loading the PDF viewer at all (it boots as a scripted\n * extension page), leaving the user with a blank frame. So PDFs are rendered\n * without the `sandbox` attribute, matching the original `<object>` behaviour.\n *\n * Everything else that reaches the iframe (notably `text/html`, the genuine\n * XSS vector) keeps the strict empty sandbox.\n */\nconst isPdf = computed(\n  (): boolean => type.trim().toLowerCase() === 'application/pdf',\n)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <ResponseBodyRaw\n    v-if=\"mode === 'json'\"\n    :content=\"jsonPreviewContent\"\n    language=\"json\"\n    prettyPrintJson />\n  <ResponseBodyRaw\n    v-else-if=\"mode === 'ndjson'\"\n    :content=\"ndjsonPreviewContent\"\n    language=\"json\" />\n  <div\n    v-else-if=\"!error && safeSrc\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      referrerpolicy=\"no-referrer\"\n      :src=\"safeSrc\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      referrerpolicy=\"no-referrer\"\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      referrerpolicy=\"no-referrer\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </audio>\n    <!--\n      `<object>` would execute scripts inside the embedded document in the\n      app's origin, so we render arbitrary previews inside an `<iframe>`\n      instead. Non-PDF documents (notably `text/html`) get an empty `sandbox`\n      attribute, which disables scripts, forms, popups and same-origin access.\n      PDFs are exempted (see `isPdf` above): the empty sandbox does not confine\n      the browser's PDF engine, it only stops the viewer from loading at all.\n\n      Note: an `error` event on `<iframe>` is not reliably fired for failed\n      navigations — browsers usually fire `load` even when the response is\n      blank or an error page, and a cross-origin sandboxed frame cannot be\n      introspected from JavaScript. There is therefore no useful runtime\n      fallback for an unreachable URL; the URL allow-list above is what\n      keeps unsafe content out in the first place.\n    -->\n    <iframe\n      v-else\n      class=\"aspect-[4/3] w-full border-0\"\n      referrerpolicy=\"no-referrer\"\n      :sandbox=\"isPdf ? undefined : ''\"\n      :src=\"safeSrc\" />\n  </div>\n  <ResponseBodyInfo v-else>\n    {{ translate('apiClient.responseBodyPreview.previewUnavailable') }}\n  </ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/response-block/components/ResponseBodyPreview.vue.script.js

@@ -1,12 +1,13 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import ResponseBodyInfo_default from "./ResponseBodyInfo.vue.js";
 import { prettifyNdjson } from "../helpers/prettify-ndjson.js";
 import ResponseBodyRaw_default from "./ResponseBodyRaw.vue.js";
-import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, ref, watch, withCtx } from "vue";
+import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
 //#region src/v2/blocks/response-block/components/ResponseBodyPreview.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
 var _hoisted_2 = ["src", "type"];
 var _hoisted_3 = ["src", "type"];
-var _hoisted_4 = ["src", "sandbox"];
+var _hoisted_4 = ["sandbox", "src"];
 var ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ResponseBodyPreview",
 	props: {
@@ -20,6 +21,7 @@ var ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		content: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		const jsonPreviewContent = computed(() => {
 			const value = __props.content;
 			if (typeof value === "string") return value;
@@ -85,8 +87,8 @@ var ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 			}, [__props.mode === "image" ? (openBlock(), createElementBlock("img", {
 				key: 0,
 				class: normalizeClass(["h-full max-w-full", { rounded: __props.alpha }]),
-				src: safeSrc.value,
 				referrerpolicy: "no-referrer",
+				src: safeSrc.value,
 				onError: _cache[0] || (_cache[0] = ($event) => error.value = true)
 			}, null, 42, _hoisted_1)) : __props.mode === "video" ? (openBlock(), createElementBlock("video", {
 				key: 1,
@@ -110,11 +112,11 @@ var ResponseBodyPreview_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 			}, null, 8, _hoisted_3)], 32)) : (openBlock(), createElementBlock("iframe", {
 				key: 3,
 				class: "aspect-[4/3] w-full border-0",
-				src: safeSrc.value,
+				referrerpolicy: "no-referrer",
 				sandbox: isPdf.value ? void 0 : "",
-				referrerpolicy: "no-referrer"
+				src: safeSrc.value
 			}, null, 8, _hoisted_4))], 2)) : (openBlock(), createBlock(ResponseBodyInfo_default, { key: 3 }, {
-				default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Preview unavailable", -1)])]),
+				default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.responseBodyPreview.previewUnavailable")), 1)]),
 				_: 1
 			}));
 		};

package/dist/v2/blocks/response-block/components/ResponseBodyPreview.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyPreview.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\nimport { prettifyNdjson } from '@/v2/blocks/response-block/helpers/prettify-ndjson'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n  content,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n  /** Decoded body; used when `mode` is `json` for pretty-printed preview (no JSON.parse round-trip). */\n  content?: unknown\n}>()\n\nconst jsonPreviewContent = computed((): string => {\n  const value = content\n  if (typeof value === 'string') {\n    return value\n  }\n  if (value == null) {\n    return ''\n  }\n  return String(value)\n})\n\n/** NDJSON pretty-printed one record per block for the `ndjson` preview. */\nconst ndjsonPreviewContent = computed((): string =>\n  prettifyNdjson(jsonPreviewContent.value),\n)\n\n/**\n * Validates the `src` against an allow-list of safe protocols before it is\n * passed to a rendering element. This blocks XSS vectors such as\n * `javascript:` and `vbscript:` URIs and also prevents accidentally embedding\n * a `data:text/html` payload that could execute script in the app origin.\n *\n * Allowed:\n *   - `blob:` (the standard case — generated client-side by `URL.createObjectURL`)\n *   - `http:` / `https:`\n *   - `data:` URIs whose MIME type is a known safe media kind\n *     (`image/*`, `video/*`, `audio/*`, `application/pdf`, `application/octet-stream`)\n *\n * Anything else (including malformed or relative URLs) collapses to an empty\n * string so the template falls back to the \"Preview unavailable\" message.\n */\nconst safeSrc = computed((): string => {\n  if (!src) {\n    return ''\n  }\n\n  if (/^data:/i.test(src)) {\n    // The MIME type must be one of the known safe kinds AND be terminated by\n    // `;` (parameters / `;base64`) or `,` (start of the payload). Anchoring\n    // at the terminator prevents prefix-matching tricks like\n    // `data:image/png-but-actually-html,…`.\n    return /^data:(?:(?:image|video|audio)\\/[a-z0-9.+-]+|application\\/pdf|application\\/octet-stream)[;,]/i.test(\n      src,\n    )\n      ? src\n      : ''\n  }\n\n  try {\n    const parsed = new URL(src)\n    if (\n      parsed.protocol === 'blob:' ||\n      parsed.protocol === 'http:' ||\n      parsed.protocol === 'https:'\n    ) {\n      return src\n    }\n  } catch {\n    // Malformed or relative URL — refuse to render.\n  }\n\n  return ''\n})\n\nconst error = ref(false)\n\n/**\n * Whether the embedded document is a PDF.\n *\n * PDFs are rendered by the browser's own PDF engine (e.g. PDFium), which runs\n * in an isolated context that cannot reach this app's origin — its DOM,\n * cookies or storage. A PDF's embedded JavaScript therefore cannot be used to\n * attack us, and a strict `sandbox=\"\"` does not confine that engine; it only\n * prevents Chromium from loading the PDF viewer at all (it boots as a scripted\n * extension page), leaving the user with a blank frame. So PDFs are rendered\n * without the `sandbox` attribute, matching the original `<object>` behaviour.\n *\n * Everything else that reaches the iframe (notably `text/html`, the genuine\n * XSS vector) keeps the strict empty sandbox.\n */\nconst isPdf = computed(\n  (): boolean => type.trim().toLowerCase() === 'application/pdf',\n)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <ResponseBodyRaw\n    v-if=\"mode === 'json'\"\n    :content=\"jsonPreviewContent\"\n    language=\"json\"\n    prettyPrintJson />\n  <ResponseBodyRaw\n    v-else-if=\"mode === 'ndjson'\"\n    :content=\"ndjsonPreviewContent\"\n    language=\"json\" />\n  <div\n    v-else-if=\"!error && safeSrc\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      :src=\"safeSrc\"\n      referrerpolicy=\"no-referrer\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      referrerpolicy=\"no-referrer\"\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      referrerpolicy=\"no-referrer\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </audio>\n    <!--\n      `<object>` would execute scripts inside the embedded document in the\n      app's origin, so we render arbitrary previews inside an `<iframe>`\n      instead. Non-PDF documents (notably `text/html`) get an empty `sandbox`\n      attribute, which disables scripts, forms, popups and same-origin access.\n      PDFs are exempted (see `isPdf` above): the empty sandbox does not confine\n      the browser's PDF engine, it only stops the viewer from loading at all.\n\n      Note: an `error` event on `<iframe>` is not reliably fired for failed\n      navigations — browsers usually fire `load` even when the response is\n      blank or an error page, and a cross-origin sandboxed frame cannot be\n      introspected from JavaScript. There is therefore no useful runtime\n      fallback for an unreachable URL; the URL allow-list above is what\n      keeps unsafe content out in the first place.\n    -->\n    <iframe\n      v-else\n      class=\"aspect-[4/3] w-full border-0\"\n      :src=\"safeSrc\"\n      :sandbox=\"isPdf ? undefined : ''\"\n      referrerpolicy=\"no-referrer\" />\n  </div>\n  <ResponseBodyInfo v-else>Preview unavailable</ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,qBAAqB,eAAuB;GAChD,MAAM,QAAQ,QAAA;GACd,IAAI,OAAO,UAAU,UACnB,OAAO;GAET,IAAI,SAAS,MACX,OAAO;GAET,OAAO,OAAO,KAAK;EACrB,CAAC;;EAGD,MAAM,uBAAuB,eAC3B,eAAe,mBAAmB,KAAK,CACzC;;;;;;;;;;;;;;;;EAiBA,MAAM,UAAU,eAAuB;GACrC,IAAI,CAAC,QAAA,KACH,OAAO;GAGT,IAAI,UAAU,KAAK,QAAA,GAAG,GAKpB,OAAO,gGAAgG,KACrG,QAAA,GACF,IACI,QAAA,MACA;GAGN,IAAI;IACF,MAAM,SAAS,IAAI,IAAI,QAAA,GAAG;IAC1B,IACE,OAAO,aAAa,WACpB,OAAO,aAAa,WACpB,OAAO,aAAa,UAEpB,OAAO,QAAA;GAEX,QAAQ,CAER;GAEA,OAAO;EACT,CAAC;EAED,MAAM,QAAQ,IAAI,KAAK;;;;;;;;;;;;;;;EAgBvB,MAAM,QAAQ,eACG,QAAA,KAAK,KAAK,CAAC,CAAC,YAAY,MAAM,iBAC/C;EAEA,YACQ,QAAA,WACC,MAAM,QAAQ,KACvB;;UAIU,QAAA,SAAI,UAAA,UAAA,GADZ,YAIoB,yBAAA;;IAFjB,SAAS,mBAAA;IACV,UAAS;IACT,iBAAA;+BAEW,QAAA,SAAI,YAAA,UAAA,GADjB,YAGoB,yBAAA;;IADjB,SAAS,qBAAA;IACV,UAAS;gCAEG,MAAA,SAAS,QAAA,SAAA,UAAA,GADvB,mBAqDM,OAAA;;IAnDJ,OAAK,eAAA,CAAC,+CAA6C,EAAA,kBACvB,QAAA,MAAK,CAAA,CAAA;OAEzB,QAAA,SAAI,WAAA,UAAA,GADZ,mBAM0B,OAAA;;IAJxB,OAAK,eAAA,CAAC,qBAAmB,EAAA,SACN,QAAA,MAAK,CAAA,CAAA;IACvB,KAAK,QAAA;IACN,gBAAe;IACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;+BAEF,QAAA,SAAI,WAAA,UAAA,GADjB,mBAUQ,SAAA;;IARN,UAAA;IACA,UAAA;IACA,gBAAe;IACf,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;oCAGE,QAAA,SAAI,WAAA,UAAA,GADjB,mBASQ,SAAA;;IAPN,OAAM;IACN,UAAA;IACA,gBAAe;IACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;kDAiBX,mBAKiC,UAAA;;IAH/B,OAAM;IACL,KAAK,QAAA;IACL,SAAS,MAAA,QAAQ,KAAA,IAAS;IAC3B,gBAAe;kDAEnB,YAA+D,0BAAA,EAAA,KAAA,EAAA,GAAA;2BAAnB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAnB,uBAAmB,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"ResponseBodyPreview.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyPreview.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\n\nimport { type MediaPreview } from '@/v2/blocks/response-block/helpers/media-types'\nimport { prettifyNdjson } from '@/v2/blocks/response-block/helpers/prettify-ndjson'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport ResponseBodyInfo from './ResponseBodyInfo.vue'\nimport ResponseBodyRaw from './ResponseBodyRaw.vue'\n\nconst {\n  src,\n  type,\n  mode,\n  alpha = false,\n  content,\n} = defineProps<{\n  src: string\n  type: string\n  mode: MediaPreview\n  alpha?: boolean | undefined\n  /** Decoded body; used when `mode` is `json` for pretty-printed preview (no JSON.parse round-trip). */\n  content?: unknown\n}>()\n\nconst { translate } = useLocalization()\n\nconst jsonPreviewContent = computed((): string => {\n  const value = content\n  if (typeof value === 'string') {\n    return value\n  }\n  if (value == null) {\n    return ''\n  }\n  return String(value)\n})\n\n/** NDJSON pretty-printed one record per block for the `ndjson` preview. */\nconst ndjsonPreviewContent = computed((): string =>\n  prettifyNdjson(jsonPreviewContent.value),\n)\n\n/**\n * Validates the `src` against an allow-list of safe protocols before it is\n * passed to a rendering element. This blocks XSS vectors such as\n * `javascript:` and `vbscript:` URIs and also prevents accidentally embedding\n * a `data:text/html` payload that could execute script in the app origin.\n *\n * Allowed:\n *   - `blob:` (the standard case — generated client-side by `URL.createObjectURL`)\n *   - `http:` / `https:`\n *   - `data:` URIs whose MIME type is a known safe media kind\n *     (`image/*`, `video/*`, `audio/*`, `application/pdf`, `application/octet-stream`)\n *\n * Anything else (including malformed or relative URLs) collapses to an empty\n * string so the template falls back to the \"Preview unavailable\" message.\n */\nconst safeSrc = computed((): string => {\n  if (!src) {\n    return ''\n  }\n\n  if (/^data:/i.test(src)) {\n    // The MIME type must be one of the known safe kinds AND be terminated by\n    // `;` (parameters / `;base64`) or `,` (start of the payload). Anchoring\n    // at the terminator prevents prefix-matching tricks like\n    // `data:image/png-but-actually-html,…`.\n    return /^data:(?:(?:image|video|audio)\\/[a-z0-9.+-]+|application\\/pdf|application\\/octet-stream)[;,]/i.test(\n      src,\n    )\n      ? src\n      : ''\n  }\n\n  try {\n    const parsed = new URL(src)\n    if (\n      parsed.protocol === 'blob:' ||\n      parsed.protocol === 'http:' ||\n      parsed.protocol === 'https:'\n    ) {\n      return src\n    }\n  } catch {\n    // Malformed or relative URL — refuse to render.\n  }\n\n  return ''\n})\n\nconst error = ref(false)\n\n/**\n * Whether the embedded document is a PDF.\n *\n * PDFs are rendered by the browser's own PDF engine (e.g. PDFium), which runs\n * in an isolated context that cannot reach this app's origin — its DOM,\n * cookies or storage. A PDF's embedded JavaScript therefore cannot be used to\n * attack us, and a strict `sandbox=\"\"` does not confine that engine; it only\n * prevents Chromium from loading the PDF viewer at all (it boots as a scripted\n * extension page), leaving the user with a blank frame. So PDFs are rendered\n * without the `sandbox` attribute, matching the original `<object>` behaviour.\n *\n * Everything else that reaches the iframe (notably `text/html`, the genuine\n * XSS vector) keeps the strict empty sandbox.\n */\nconst isPdf = computed(\n  (): boolean => type.trim().toLowerCase() === 'application/pdf',\n)\n\nwatch(\n  () => src,\n  () => (error.value = false),\n)\n</script>\n<template>\n  <ResponseBodyRaw\n    v-if=\"mode === 'json'\"\n    :content=\"jsonPreviewContent\"\n    language=\"json\"\n    prettyPrintJson />\n  <ResponseBodyRaw\n    v-else-if=\"mode === 'ndjson'\"\n    :content=\"ndjsonPreviewContent\"\n    language=\"json\" />\n  <div\n    v-else-if=\"!error && safeSrc\"\n    class=\"flex justify-center overflow-auto rounded-b\"\n    :class=\"{ 'bg-preview p-2': alpha }\">\n    <img\n      v-if=\"mode === 'image'\"\n      class=\"h-full max-w-full\"\n      :class=\"{ rounded: alpha }\"\n      referrerpolicy=\"no-referrer\"\n      :src=\"safeSrc\"\n      @error=\"error = true\" />\n    <video\n      v-else-if=\"mode === 'video'\"\n      autoplay\n      controls\n      referrerpolicy=\"no-referrer\"\n      width=\"100%\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </video>\n    <audio\n      v-else-if=\"mode === 'audio'\"\n      class=\"my-12\"\n      controls\n      referrerpolicy=\"no-referrer\"\n      @error=\"error = true\">\n      <source\n        :src=\"safeSrc\"\n        :type=\"type\" />\n    </audio>\n    <!--\n      `<object>` would execute scripts inside the embedded document in the\n      app's origin, so we render arbitrary previews inside an `<iframe>`\n      instead. Non-PDF documents (notably `text/html`) get an empty `sandbox`\n      attribute, which disables scripts, forms, popups and same-origin access.\n      PDFs are exempted (see `isPdf` above): the empty sandbox does not confine\n      the browser's PDF engine, it only stops the viewer from loading at all.\n\n      Note: an `error` event on `<iframe>` is not reliably fired for failed\n      navigations — browsers usually fire `load` even when the response is\n      blank or an error page, and a cross-origin sandboxed frame cannot be\n      introspected from JavaScript. There is therefore no useful runtime\n      fallback for an unreachable URL; the URL allow-list above is what\n      keeps unsafe content out in the first place.\n    -->\n    <iframe\n      v-else\n      class=\"aspect-[4/3] w-full border-0\"\n      referrerpolicy=\"no-referrer\"\n      :sandbox=\"isPdf ? undefined : ''\"\n      :src=\"safeSrc\" />\n  </div>\n  <ResponseBodyInfo v-else>\n    {{ translate('apiClient.responseBodyPreview.previewUnavailable') }}\n  </ResponseBodyInfo>\n</template>\n<style scoped>\n.light-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n.dark-mode .bg-preview {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' fill-opacity='10%25'%3E%3Crect width='8' height='8' /%3E%3Crect x='8' y='8' width='8' height='8' /%3E%3C/svg%3E\");\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,qBAAqB,eAAuB;GAChD,MAAM,QAAQ,QAAA;GACd,IAAI,OAAO,UAAU,UACnB,OAAO;GAET,IAAI,SAAS,MACX,OAAO;GAET,OAAO,OAAO,KAAK;EACrB,CAAC;;EAGD,MAAM,uBAAuB,eAC3B,eAAe,mBAAmB,KAAK,CACzC;;;;;;;;;;;;;;;;EAiBA,MAAM,UAAU,eAAuB;GACrC,IAAI,CAAC,QAAA,KACH,OAAO;GAGT,IAAI,UAAU,KAAK,QAAA,GAAG,GAKpB,OAAO,gGAAgG,KACrG,QAAA,GACF,IACI,QAAA,MACA;GAGN,IAAI;IACF,MAAM,SAAS,IAAI,IAAI,QAAA,GAAG;IAC1B,IACE,OAAO,aAAa,WACpB,OAAO,aAAa,WACpB,OAAO,aAAa,UAEpB,OAAO,QAAA;GAEX,QAAQ,CAER;GAEA,OAAO;EACT,CAAC;EAED,MAAM,QAAQ,IAAI,KAAK;;;;;;;;;;;;;;;EAgBvB,MAAM,QAAQ,eACG,QAAA,KAAK,KAAK,CAAC,CAAC,YAAY,MAAM,iBAC/C;EAEA,YACQ,QAAA,WACC,MAAM,QAAQ,KACvB;;UAIU,QAAA,SAAI,UAAA,UAAA,GADZ,YAIoB,yBAAA;;IAFjB,SAAS,mBAAA;IACV,UAAS;IACT,iBAAA;+BAEW,QAAA,SAAI,YAAA,UAAA,GADjB,YAGoB,yBAAA;;IADjB,SAAS,qBAAA;IACV,UAAS;gCAEG,MAAA,SAAS,QAAA,SAAA,UAAA,GADvB,mBAqDM,OAAA;;IAnDJ,OAAK,eAAA,CAAC,+CAA6C,EAAA,kBACvB,QAAA,MAAK,CAAA,CAAA;OAEzB,QAAA,SAAI,WAAA,UAAA,GADZ,mBAM0B,OAAA;;IAJxB,OAAK,eAAA,CAAC,qBAAmB,EAAA,SACN,QAAA,MAAK,CAAA,CAAA;IACxB,gBAAe;IACd,KAAK,QAAA;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;+BAEF,QAAA,SAAI,WAAA,UAAA,GADjB,mBAUQ,SAAA;;IARN,UAAA;IACA,UAAA;IACA,gBAAe;IACf,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;oCAGE,QAAA,SAAI,WAAA,UAAA,GADjB,mBASQ,SAAA;;IAPN,OAAM;IACN,UAAA;IACA,gBAAe;IACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAK;OACb,mBAEiB,UAAA;IADd,KAAK,QAAA;IACL,MAAM,QAAA;kDAiBX,mBAKmB,UAAA;;IAHjB,OAAM;IACN,gBAAe;IACd,SAAS,MAAA,QAAQ,KAAA,IAAS;IAC1B,KAAK,QAAA;kDAEV,YAEmB,0BAAA,EAAA,KAAA,EAAA,GAAA;2BADkD,CAAA,gBAAA,gBAAhE,MAAA,SAAA,CAAS,CAAA,kDAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/v2/blocks/response-block/components/ResponseBodyStreaming.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     reader: ReadableStreamDefaultReader<Uint8Array>;
+    contentType?: string;
 };
 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;

package/dist/v2/blocks/response-block/components/ResponseBodyStreaming.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyStreaming.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyStreaming.vue"],"names":[],"mappings":"AAkKA,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,2BAA2B,CAAC,UAAU,CAAC,CAAA;CAChD,CAAC;AAwPF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ResponseBodyStreaming.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyStreaming.vue"],"names":[],"mappings":"AAiNA,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,2BAA2B,CAAC,UAAU,CAAC,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAC;AAgVF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/response-block/components/ResponseBodyStreaming.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyStreaming.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyStreaming.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nconst { reader } = defineProps<{\n  reader: ReadableStreamDefaultReader<Uint8Array>\n}>()\n\nconst loader = useLoadingState()\n\nconst textContent = ref('')\nconst errorRef = ref<Error | null>(null)\nconst contentContainer = ref<HTMLElement | null>(null)\n\n/** Track the current reader to prevent race conditions when reader changes */\nconst currentReader = ref<ReadableStreamDefaultReader<Uint8Array> | null>(null)\n\n/** Current decoder instance - reset for each new stream to prevent buffer corruption */\nconst decoder = ref<TextDecoder | null>(null)\n\n/**\n * Scrolls the content container to the bottom\n */\nconst scrollToBottom = () => {\n  if (contentContainer.value) {\n    contentContainer.value.scrollTop = contentContainer.value.scrollHeight\n  }\n}\n\n// Watch for changes in textContent and scroll to bottom\nwatch(textContent, async () => {\n  // Use nextTick to ensure the DOM has updated\n  await nextTick(scrollToBottom)\n})\n\n/**\n * Reads the stream and appends the content\n */\nasync function readStream(\n  streamReader: ReadableStreamDefaultReader<Uint8Array>,\n) {\n  try {\n    while (loader.isLoading && currentReader.value === streamReader) {\n      const { done, value } = await streamReader.read()\n\n      // Stop if this reader is no longer the current one\n      if (currentReader.value !== streamReader) {\n        break\n      }\n\n      if (done) {\n        void loader.clear()\n        break\n      }\n\n      // Decode the Uint8Array to string and append to content\n      if (value && decoder.value) {\n        textContent.value += decoder.value.decode(value, { stream: true })\n      }\n    }\n  } catch (error) {\n    // Only handle the error if this is still the current reader\n    if (currentReader.value === streamReader) {\n      console.error('Error reading stream:', error)\n      void loader.clear()\n      errorRef.value = error as Error\n    }\n  } finally {\n    // Only finalize decoding if this is still the current reader\n    if (currentReader.value === streamReader && decoder.value) {\n      // Make sure to decode any remaining bytes\n      textContent.value += decoder.value.decode()\n    }\n  }\n}\n\nconst startStreaming = () => {\n  // Cancel the old reader if it exists\n  if (currentReader.value) {\n    currentReader.value.cancel()\n  }\n\n  // Set the new reader as current\n  currentReader.value = reader\n\n  // Reset state and start new stream\n  // Create a new decoder instance to prevent buffer corruption from previous streams\n  decoder.value = new TextDecoder()\n  loader.start()\n  textContent.value = ''\n  errorRef.value = null\n  void readStream(reader)\n}\n\nconst stopStreaming = () => {\n  if (currentReader.value) {\n    currentReader.value.cancel()\n    currentReader.value = null\n  }\n  void loader.clear()\n}\n\n// Start streaming when the reader changes\nwatch(() => reader, startStreaming, { immediate: true })\n\nonBeforeUnmount(stopStreaming)\n</script>\n\n<template>\n  <CollapsibleSection class=\"max-h-content overflow-y-hidden\">\n    <template #title>\n      <div class=\"flex w-full items-center justify-between\">\n        <div>Body</div>\n        <div\n          v-if=\"loader.isLoading\"\n          class=\"mr-2 flex items-center gap-2\">\n          <ScalarLoading\n            :loadingState=\"loader\"\n            size=\"xs\" />\n          <span class=\"text-c-2\"> Listening… </span>\n        </div>\n      </div>\n    </template>\n    <template\n      v-if=\"loader.isLoading\"\n      #actions>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"stopStreaming\">\n        Cancel\n      </ScalarButton>\n    </template>\n\n    <div\n      ref=\"contentContainer\"\n      class=\"text-xxs font-code h-full overflow-auto leading-6 whitespace-pre-wrap\">\n      <template v-if=\"errorRef\">\n        <div class=\"text-red bg-b-danger sticky top-0 border-b p-2\">\n          {{ errorRef.message }}\n        </div>\n      </template>\n      <template v-if=\"textContent\">\n        <div class=\"p-2\">\n          {{ textContent }}\n        </div>\n      </template>\n    </div>\n  </CollapsibleSection>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ResponseBodyStreaming.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyStreaming.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { formatBytes } from '@scalar/helpers/formatters/format-bytes'\nimport { getUtf8ByteLength } from '@scalar/helpers/string/get-utf8-byte-length'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport { createResponseStreamParser } from '../helpers/response-stream'\n\nconst { reader, contentType = 'text/event-stream' } = defineProps<{\n  reader: ReadableStreamDefaultReader<Uint8Array>\n  contentType?: string\n}>()\n\nconst { translate } = useLocalization()\n\nconst loader = useLoadingState()\nconst textContent = ref('')\nconst receivedBytes = ref(0)\nconst { copyToClipboard } = useClipboard()\nlet downloadUrl: string | undefined\n\nconst clearDownload = (): void => {\n  if (downloadUrl) {\n    URL.revokeObjectURL(downloadUrl)\n    downloadUrl = undefined\n  }\n}\n\n/** Export only the bounded displayed transcript, without retaining another raw body. */\nconst downloadText = (): void => {\n  clearDownload()\n  downloadUrl = URL.createObjectURL(\n    new Blob([textContent.value], { type: 'text/plain;charset=utf-8' }),\n  )\n  const link = document.createElement('a')\n  link.href = downloadUrl\n  link.download = 'response-stream.txt'\n  link.click()\n}\nconst errorRef = ref<Error | null>(null)\nconst contentContainer = ref<HTMLElement | null>(null)\nlet currentReader: ReadableStreamDefaultReader<Uint8Array> | null = null\n\n/** Bound the text retained by a connection that can stay open indefinitely. */\nconst MAX_DISPLAY_SIZE = 16 * 1024 * 1024\n\nwatch(textContent, async () => {\n  await nextTick()\n  if (contentContainer.value) {\n    contentContainer.value.scrollTop = contentContainer.value.scrollHeight\n  }\n})\n\nconst cancelReader = (\n  streamReader: ReadableStreamDefaultReader<Uint8Array>,\n): void => {\n  void Promise.resolve(streamReader.cancel()).catch(() => {\n    // A failed or disconnected stream can already be closed when the user cancels.\n  })\n}\n\nconst readStream = async (\n  streamReader: ReadableStreamDefaultReader<Uint8Array>,\n): Promise<void> => {\n  try {\n    let displayedBytes = 0\n    const parser = createResponseStreamParser(contentType, (text) => {\n      displayedBytes += getUtf8ByteLength(text)\n      if (displayedBytes > MAX_DISPLAY_SIZE) {\n        throw new Error(\n          'Stream display reached its 16 MiB limit. Cancelled further reading.',\n        )\n      }\n      textContent.value += text\n    })\n    while (currentReader === streamReader) {\n      const { done, value } = await streamReader.read()\n      if (currentReader !== streamReader) {\n        return\n      }\n      if (done) {\n        parser.finish()\n        void loader.clear()\n        return\n      }\n      receivedBytes.value += value.byteLength\n      parser.push(value)\n    }\n  } catch (error) {\n    if (currentReader === streamReader) {\n      console.error('Error reading stream:', error)\n      errorRef.value = error instanceof Error ? error : new Error(String(error))\n      cancelReader(streamReader)\n      void loader.clear()\n    }\n  } finally {\n    streamReader.releaseLock()\n  }\n}\n\nconst stopStreaming = (): void => {\n  const previous = currentReader\n  currentReader = null\n  if (previous) {\n    cancelReader(previous)\n  }\n  void loader.clear()\n}\n\nconst startStreaming = (): void => {\n  stopStreaming()\n  currentReader = reader\n  loader.start()\n  clearDownload()\n  receivedBytes.value = 0\n  textContent.value = ''\n  errorRef.value = null\n  void readStream(reader)\n}\n\nwatch(() => reader, startStreaming, { immediate: true })\nonBeforeUnmount(() => {\n  stopStreaming()\n  clearDownload()\n})\n</script>\n\n<template>\n  <CollapsibleSection class=\"max-h-content overflow-y-hidden\">\n    <template #title>\n      <div class=\"flex w-full items-center justify-between\">\n        <div>\n          {{ translate('apiClient.responseBodyStreaming.body') }}\n          <span class=\"text-c-2 ml-2 text-xs\">\n            {{ formatBytes(receivedBytes) }} received\n          </span>\n        </div>\n        <div\n          v-if=\"loader.isLoading\"\n          class=\"mr-2 flex items-center gap-2\">\n          <ScalarLoading\n            :loadingState=\"loader\"\n            size=\"xs\" />\n          <span class=\"text-c-2\">{{\n            translate('apiClient.responseBodyStreaming.listening')\n          }}</span>\n        </div>\n      </div>\n    </template>\n    <template #actions>\n      <ScalarButton\n        v-if=\"loader.isLoading\"\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"stopStreaming\">\n        {{ translate('apiClient.responseBodyStreaming.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        v-if=\"textContent\"\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"copyToClipboard(textContent)\">\n        Copy text\n      </ScalarButton>\n      <ScalarButton\n        v-if=\"textContent\"\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"downloadText\">\n        Download text\n      </ScalarButton>\n    </template>\n\n    <div\n      ref=\"contentContainer\"\n      class=\"text-xxs font-code h-full overflow-auto leading-6 whitespace-pre-wrap\">\n      <template v-if=\"errorRef\">\n        <div class=\"text-red bg-b-danger sticky top-0 border-b p-2\">\n          {{ errorRef.message }}\n        </div>\n      </template>\n      <template v-if=\"textContent\">\n        <div class=\"p-2\">\n          {{ textContent }}\n        </div>\n      </template>\n    </div>\n  </CollapsibleSection>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/response-block/components/ResponseBodyStreaming.vue.script.js

@@ -1,108 +1,161 @@
+import { useLocalization } from "../../../features/localization/index.js";
+import { createResponseStreamParser } from "../helpers/response-stream.js";
 import CollapsibleSection_default from "../../../components/layout/CollapsibleSection.vue.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
 import { ScalarButton } from "@scalar/components/button";
+import { getUtf8ByteLength } from "@scalar/helpers/string/get-utf8-byte-length";
+import { useClipboard } from "@scalar/use-hooks/useClipboard";
 import { ScalarLoading, useLoadingState } from "@scalar/components/loading";
+import { formatBytes } from "@scalar/helpers/formatters/format-bytes";
 //#region src/v2/blocks/response-block/components/ResponseBodyStreaming.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex w-full items-center justify-between" };
-var _hoisted_2 = {
+var _hoisted_2 = { class: "text-c-2 ml-2 text-xs" };
+var _hoisted_3 = {
 	key: 0,
 	class: "mr-2 flex items-center gap-2"
 };
-var _hoisted_3 = {
+var _hoisted_4 = { class: "text-c-2" };
+var _hoisted_5 = {
 	key: 0,
 	class: "text-red bg-b-danger sticky top-0 border-b p-2"
 };
-var _hoisted_4 = {
+var _hoisted_6 = {
 	key: 1,
 	class: "p-2"
 };
+var MAX_DISPLAY_SIZE = 16 * 1024 * 1024;
 var ResponseBodyStreaming_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ResponseBodyStreaming",
-	props: { reader: {} },
+	props: {
+		reader: {},
+		contentType: { default: "text/event-stream" }
+	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		const loader = useLoadingState();
 		const textContent = ref("");
+		const receivedBytes = ref(0);
+		const { copyToClipboard } = useClipboard();
+		let downloadUrl;
+		const clearDownload = () => {
+			if (downloadUrl) {
+				URL.revokeObjectURL(downloadUrl);
+				downloadUrl = void 0;
+			}
+		};
+		/** Export only the bounded displayed transcript, without retaining another raw body. */
+		const downloadText = () => {
+			clearDownload();
+			downloadUrl = URL.createObjectURL(new Blob([textContent.value], { type: "text/plain;charset=utf-8" }));
+			const link = document.createElement("a");
+			link.href = downloadUrl;
+			link.download = "response-stream.txt";
+			link.click();
+		};
 		const errorRef = ref(null);
 		const contentContainer = ref(null);
-		/** Track the current reader to prevent race conditions when reader changes */
-		const currentReader = ref(null);
-		/** Current decoder instance - reset for each new stream to prevent buffer corruption */
-		const decoder = ref(null);
-		/**
-		* Scrolls the content container to the bottom
-		*/
-		const scrollToBottom = () => {
-			if (contentContainer.value) contentContainer.value.scrollTop = contentContainer.value.scrollHeight;
-		};
+		let currentReader = null;
+		/** Bound the text retained by a connection that can stay open indefinitely. */
 		watch(textContent, async () => {
-			await nextTick(scrollToBottom);
+			await nextTick();
+			if (contentContainer.value) contentContainer.value.scrollTop = contentContainer.value.scrollHeight;
 		});
-		/**
-		* Reads the stream and appends the content
-		*/
-		async function readStream(streamReader) {
+		const cancelReader = (streamReader) => {
+			Promise.resolve(streamReader.cancel()).catch(() => {});
+		};
+		const readStream = async (streamReader) => {
 			try {
-				while (loader.isLoading && currentReader.value === streamReader) {
+				let displayedBytes = 0;
+				const parser = createResponseStreamParser(__props.contentType, (text) => {
+					displayedBytes += getUtf8ByteLength(text);
+					if (displayedBytes > MAX_DISPLAY_SIZE) throw new Error("Stream display reached its 16 MiB limit. Cancelled further reading.");
+					textContent.value += text;
+				});
+				while (currentReader === streamReader) {
 					const { done, value } = await streamReader.read();
-					if (currentReader.value !== streamReader) break;
+					if (currentReader !== streamReader) return;
 					if (done) {
+						parser.finish();
 						loader.clear();
-						break;
+						return;
 					}
-					if (value && decoder.value) textContent.value += decoder.value.decode(value, { stream: true });
+					receivedBytes.value += value.byteLength;
+					parser.push(value);
 				}
 			} catch (error) {
-				if (currentReader.value === streamReader) {
+				if (currentReader === streamReader) {
 					console.error("Error reading stream:", error);
+					errorRef.value = error instanceof Error ? error : new Error(String(error));
+					cancelReader(streamReader);
 					loader.clear();
-					errorRef.value = error;
 				}
 			} finally {
-				if (currentReader.value === streamReader && decoder.value) textContent.value += decoder.value.decode();
+				streamReader.releaseLock();
 			}
-		}
+		};
+		const stopStreaming = () => {
+			const previous = currentReader;
+			currentReader = null;
+			if (previous) cancelReader(previous);
+			loader.clear();
+		};
 		const startStreaming = () => {
-			if (currentReader.value) currentReader.value.cancel();
-			currentReader.value = __props.reader;
-			decoder.value = new TextDecoder();
+			stopStreaming();
+			currentReader = __props.reader;
 			loader.start();
+			clearDownload();
+			receivedBytes.value = 0;
 			textContent.value = "";
 			errorRef.value = null;
 			readStream(__props.reader);
 		};
-		const stopStreaming = () => {
-			if (currentReader.value) {
-				currentReader.value.cancel();
-				currentReader.value = null;
-			}
-			loader.clear();
-		};
 		watch(() => __props.reader, startStreaming, { immediate: true });
-		onBeforeUnmount(stopStreaming);
+		onBeforeUnmount(() => {
+			stopStreaming();
+			clearDownload();
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(CollapsibleSection_default), { class: "max-h-content overflow-y-hidden" }, createSlots({
-				title: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[1] || (_cache[1] = createElementVNode("div", null, "Body", -1)), unref(loader).isLoading ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(ScalarLoading), {
+			return openBlock(), createBlock(unref(CollapsibleSection_default), { class: "max-h-content overflow-y-hidden" }, {
+				title: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, [createTextVNode(toDisplayString(unref(translate)("apiClient.responseBodyStreaming.body")) + " ", 1), createElementVNode("span", _hoisted_2, toDisplayString(unref(formatBytes)(receivedBytes.value)) + " received ", 1)]), unref(loader).isLoading ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ScalarLoading), {
 					loadingState: unref(loader),
 					size: "xs"
-				}, null, 8, ["loadingState"]), _cache[0] || (_cache[0] = createElementVNode("span", { class: "text-c-2" }, " Listening… ", -1))])) : createCommentVNode("", true)])]),
+				}, null, 8, ["loadingState"]), createElementVNode("span", _hoisted_4, toDisplayString(unref(translate)("apiClient.responseBodyStreaming.listening")), 1)])) : createCommentVNode("", true)])]),
+				actions: withCtx(() => [
+					unref(loader).isLoading ? (openBlock(), createBlock(unref(ScalarButton), {
+						key: 0,
+						size: "sm",
+						variant: "ghost",
+						onClick: stopStreaming
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.responseBodyStreaming.cancel")), 1)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					textContent.value ? (openBlock(), createBlock(unref(ScalarButton), {
+						key: 1,
+						size: "sm",
+						variant: "ghost",
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(copyToClipboard)(textContent.value))
+					}, {
+						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Copy text ", -1)])]),
+						_: 1
+					})) : createCommentVNode("", true),
+					textContent.value ? (openBlock(), createBlock(unref(ScalarButton), {
+						key: 2,
+						size: "sm",
+						variant: "ghost",
+						onClick: downloadText
+					}, {
+						default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Download text ", -1)])]),
+						_: 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)]),
-				_: 2
-			}, [unref(loader).isLoading ? {
-				name: "actions",
-				fn: withCtx(() => [createVNode(unref(ScalarButton), {
-					size: "sm",
-					variant: "ghost",
-					onClick: stopStreaming
-				}, {
-					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
-					_: 1
-				})]),
-				key: "0"
-			} : void 0]), 1024);
+				}, [errorRef.value ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(errorRef.value.message), 1)) : createCommentVNode("", true), textContent.value ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(textContent.value), 1)) : createCommentVNode("", true)], 512)]),
+				_: 1
+			});
 		};
 	}
 });

package/dist/v2/blocks/response-block/components/ResponseBodyStreaming.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyStreaming.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyStreaming.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nconst { reader } = defineProps<{\n  reader: ReadableStreamDefaultReader<Uint8Array>\n}>()\n\nconst loader = useLoadingState()\n\nconst textContent = ref('')\nconst errorRef = ref<Error | null>(null)\nconst contentContainer = ref<HTMLElement | null>(null)\n\n/** Track the current reader to prevent race conditions when reader changes */\nconst currentReader = ref<ReadableStreamDefaultReader<Uint8Array> | null>(null)\n\n/** Current decoder instance - reset for each new stream to prevent buffer corruption */\nconst decoder = ref<TextDecoder | null>(null)\n\n/**\n * Scrolls the content container to the bottom\n */\nconst scrollToBottom = () => {\n  if (contentContainer.value) {\n    contentContainer.value.scrollTop = contentContainer.value.scrollHeight\n  }\n}\n\n// Watch for changes in textContent and scroll to bottom\nwatch(textContent, async () => {\n  // Use nextTick to ensure the DOM has updated\n  await nextTick(scrollToBottom)\n})\n\n/**\n * Reads the stream and appends the content\n */\nasync function readStream(\n  streamReader: ReadableStreamDefaultReader<Uint8Array>,\n) {\n  try {\n    while (loader.isLoading && currentReader.value === streamReader) {\n      const { done, value } = await streamReader.read()\n\n      // Stop if this reader is no longer the current one\n      if (currentReader.value !== streamReader) {\n        break\n      }\n\n      if (done) {\n        void loader.clear()\n        break\n      }\n\n      // Decode the Uint8Array to string and append to content\n      if (value && decoder.value) {\n        textContent.value += decoder.value.decode(value, { stream: true })\n      }\n    }\n  } catch (error) {\n    // Only handle the error if this is still the current reader\n    if (currentReader.value === streamReader) {\n      console.error('Error reading stream:', error)\n      void loader.clear()\n      errorRef.value = error as Error\n    }\n  } finally {\n    // Only finalize decoding if this is still the current reader\n    if (currentReader.value === streamReader && decoder.value) {\n      // Make sure to decode any remaining bytes\n      textContent.value += decoder.value.decode()\n    }\n  }\n}\n\nconst startStreaming = () => {\n  // Cancel the old reader if it exists\n  if (currentReader.value) {\n    currentReader.value.cancel()\n  }\n\n  // Set the new reader as current\n  currentReader.value = reader\n\n  // Reset state and start new stream\n  // Create a new decoder instance to prevent buffer corruption from previous streams\n  decoder.value = new TextDecoder()\n  loader.start()\n  textContent.value = ''\n  errorRef.value = null\n  void readStream(reader)\n}\n\nconst stopStreaming = () => {\n  if (currentReader.value) {\n    currentReader.value.cancel()\n    currentReader.value = null\n  }\n  void loader.clear()\n}\n\n// Start streaming when the reader changes\nwatch(() => reader, startStreaming, { immediate: true })\n\nonBeforeUnmount(stopStreaming)\n</script>\n\n<template>\n  <CollapsibleSection class=\"max-h-content overflow-y-hidden\">\n    <template #title>\n      <div class=\"flex w-full items-center justify-between\">\n        <div>Body</div>\n        <div\n          v-if=\"loader.isLoading\"\n          class=\"mr-2 flex items-center gap-2\">\n          <ScalarLoading\n            :loadingState=\"loader\"\n            size=\"xs\" />\n          <span class=\"text-c-2\"> Listening… </span>\n        </div>\n      </div>\n    </template>\n    <template\n      v-if=\"loader.isLoading\"\n      #actions>\n      <ScalarButton\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"stopStreaming\">\n        Cancel\n      </ScalarButton>\n    </template>\n\n    <div\n      ref=\"contentContainer\"\n      class=\"text-xxs font-code h-full overflow-auto leading-6 whitespace-pre-wrap\">\n      <template v-if=\"errorRef\">\n        <div class=\"text-red bg-b-danger sticky top-0 border-b p-2\">\n          {{ errorRef.message }}\n        </div>\n      </template>\n      <template v-if=\"textContent\">\n        <div class=\"p-2\">\n          {{ textContent }}\n        </div>\n      </template>\n    </div>\n  </CollapsibleSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,SAAS,gBAAgB;EAE/B,MAAM,cAAc,IAAI,EAAE;EAC1B,MAAM,WAAW,IAAkB,IAAI;EACvC,MAAM,mBAAmB,IAAwB,IAAI;;EAGrD,MAAM,gBAAgB,IAAoD,IAAI;;EAG9E,MAAM,UAAU,IAAwB,IAAI;;;;EAK5C,MAAM,uBAAuB;GAC3B,IAAI,iBAAiB,OACnB,iBAAiB,MAAM,YAAY,iBAAiB,MAAM;EAE9D;EAGA,MAAM,aAAa,YAAY;GAE7B,MAAM,SAAS,cAAc;EAC/B,CAAC;;;;EAKD,eAAe,WACb,cACA;GACA,IAAI;IACF,OAAO,OAAO,aAAa,cAAc,UAAU,cAAc;KAC/D,MAAM,EAAE,MAAM,UAAU,MAAM,aAAa,KAAK;KAGhD,IAAI,cAAc,UAAU,cAC1B;KAGF,IAAI,MAAM;MACR,OAAY,MAAM;MAClB;KACF;KAGA,IAAI,SAAS,QAAQ,OACnB,YAAY,SAAS,QAAQ,MAAM,OAAO,OAAO,EAAE,QAAQ,KAAK,CAAC;IAErE;GACF,SAAS,OAAO;IAEd,IAAI,cAAc,UAAU,cAAc;KACxC,QAAQ,MAAM,yBAAyB,KAAK;KAC5C,OAAY,MAAM;KAClB,SAAS,QAAQ;IACnB;GACF,UAAU;IAER,IAAI,cAAc,UAAU,gBAAgB,QAAQ,OAElD,YAAY,SAAS,QAAQ,MAAM,OAAO;GAE9C;EACF;EAEA,MAAM,uBAAuB;GAE3B,IAAI,cAAc,OAChB,cAAc,MAAM,OAAO;GAI7B,cAAc,QAAQ,QAAA;GAItB,QAAQ,QAAQ,IAAI,YAAY;GAChC,OAAO,MAAM;GACb,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,WAAgB,QAAA,MAAM;EACxB;EAEA,MAAM,sBAAsB;GAC1B,IAAI,cAAc,OAAO;IACvB,cAAc,MAAM,OAAO;IAC3B,cAAc,QAAQ;GACxB;GACA,OAAY,MAAM;EACpB;EAGA,YAAY,QAAA,QAAQ,gBAAgB,EAAE,WAAW,KAAK,CAAC;EAEvD,gBAAgB,aAAa;;uBAI3B,YAuCqB,MAAA,0BAAA,GAAA,EAvCD,OAAM,kCAAiC,GAAA,YAAA;IAC9C,OAAK,cAWR,CAVN,mBAUM,OAVN,YAUM,CAAA,OAAA,OAAA,OAAA,KATJ,mBAAe,OAAA,MAAV,QAAI,EAAA,IAED,MAAA,MAAA,CAAM,CAAC,aAAA,UAAA,GADf,mBAOM,OAPN,YAOM,CAJJ,YAEc,MAAA,aAAA,GAAA;KADX,cAAc,MAAA,MAAA;KACf,MAAK;6DACP,mBAA0C,QAAA,EAApC,OAAM,WAAU,GAAC,gBAAY,EAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;2BA4BnC,CAbN,mBAaM,OAAA;cAZA;KAAJ,KAAI;KACJ,OAAM;QACU,SAAA,SAAA,UAAA,GACd,mBAEM,OAFN,YAEM,gBADD,SAAA,MAAS,OAAO,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGP,YAAA,SAAA,UAAA,GACd,mBAEM,OAFN,YAEM,gBADD,YAAA,KAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,CAAA,CAAA;;OApBZ,MAAA,MAAA,CAAM,CAAC,YAAA;UACZ;sBAMc,CALf,YAKe,MAAA,YAAA,GAAA;KAJb,MAAK;KACL,SAAQ;KACP,SAAO;;4BAEV,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFyB,YAEzB,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"ResponseBodyStreaming.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyStreaming.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarLoading, useLoadingState } from '@scalar/components/loading'\nimport { formatBytes } from '@scalar/helpers/formatters/format-bytes'\nimport { getUtf8ByteLength } from '@scalar/helpers/string/get-utf8-byte-length'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { nextTick, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport { createResponseStreamParser } from '../helpers/response-stream'\n\nconst { reader, contentType = 'text/event-stream' } = defineProps<{\n  reader: ReadableStreamDefaultReader<Uint8Array>\n  contentType?: string\n}>()\n\nconst { translate } = useLocalization()\n\nconst loader = useLoadingState()\nconst textContent = ref('')\nconst receivedBytes = ref(0)\nconst { copyToClipboard } = useClipboard()\nlet downloadUrl: string | undefined\n\nconst clearDownload = (): void => {\n  if (downloadUrl) {\n    URL.revokeObjectURL(downloadUrl)\n    downloadUrl = undefined\n  }\n}\n\n/** Export only the bounded displayed transcript, without retaining another raw body. */\nconst downloadText = (): void => {\n  clearDownload()\n  downloadUrl = URL.createObjectURL(\n    new Blob([textContent.value], { type: 'text/plain;charset=utf-8' }),\n  )\n  const link = document.createElement('a')\n  link.href = downloadUrl\n  link.download = 'response-stream.txt'\n  link.click()\n}\nconst errorRef = ref<Error | null>(null)\nconst contentContainer = ref<HTMLElement | null>(null)\nlet currentReader: ReadableStreamDefaultReader<Uint8Array> | null = null\n\n/** Bound the text retained by a connection that can stay open indefinitely. */\nconst MAX_DISPLAY_SIZE = 16 * 1024 * 1024\n\nwatch(textContent, async () => {\n  await nextTick()\n  if (contentContainer.value) {\n    contentContainer.value.scrollTop = contentContainer.value.scrollHeight\n  }\n})\n\nconst cancelReader = (\n  streamReader: ReadableStreamDefaultReader<Uint8Array>,\n): void => {\n  void Promise.resolve(streamReader.cancel()).catch(() => {\n    // A failed or disconnected stream can already be closed when the user cancels.\n  })\n}\n\nconst readStream = async (\n  streamReader: ReadableStreamDefaultReader<Uint8Array>,\n): Promise<void> => {\n  try {\n    let displayedBytes = 0\n    const parser = createResponseStreamParser(contentType, (text) => {\n      displayedBytes += getUtf8ByteLength(text)\n      if (displayedBytes > MAX_DISPLAY_SIZE) {\n        throw new Error(\n          'Stream display reached its 16 MiB limit. Cancelled further reading.',\n        )\n      }\n      textContent.value += text\n    })\n    while (currentReader === streamReader) {\n      const { done, value } = await streamReader.read()\n      if (currentReader !== streamReader) {\n        return\n      }\n      if (done) {\n        parser.finish()\n        void loader.clear()\n        return\n      }\n      receivedBytes.value += value.byteLength\n      parser.push(value)\n    }\n  } catch (error) {\n    if (currentReader === streamReader) {\n      console.error('Error reading stream:', error)\n      errorRef.value = error instanceof Error ? error : new Error(String(error))\n      cancelReader(streamReader)\n      void loader.clear()\n    }\n  } finally {\n    streamReader.releaseLock()\n  }\n}\n\nconst stopStreaming = (): void => {\n  const previous = currentReader\n  currentReader = null\n  if (previous) {\n    cancelReader(previous)\n  }\n  void loader.clear()\n}\n\nconst startStreaming = (): void => {\n  stopStreaming()\n  currentReader = reader\n  loader.start()\n  clearDownload()\n  receivedBytes.value = 0\n  textContent.value = ''\n  errorRef.value = null\n  void readStream(reader)\n}\n\nwatch(() => reader, startStreaming, { immediate: true })\nonBeforeUnmount(() => {\n  stopStreaming()\n  clearDownload()\n})\n</script>\n\n<template>\n  <CollapsibleSection class=\"max-h-content overflow-y-hidden\">\n    <template #title>\n      <div class=\"flex w-full items-center justify-between\">\n        <div>\n          {{ translate('apiClient.responseBodyStreaming.body') }}\n          <span class=\"text-c-2 ml-2 text-xs\">\n            {{ formatBytes(receivedBytes) }} received\n          </span>\n        </div>\n        <div\n          v-if=\"loader.isLoading\"\n          class=\"mr-2 flex items-center gap-2\">\n          <ScalarLoading\n            :loadingState=\"loader\"\n            size=\"xs\" />\n          <span class=\"text-c-2\">{{\n            translate('apiClient.responseBodyStreaming.listening')\n          }}</span>\n        </div>\n      </div>\n    </template>\n    <template #actions>\n      <ScalarButton\n        v-if=\"loader.isLoading\"\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"stopStreaming\">\n        {{ translate('apiClient.responseBodyStreaming.cancel') }}\n      </ScalarButton>\n      <ScalarButton\n        v-if=\"textContent\"\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"copyToClipboard(textContent)\">\n        Copy text\n      </ScalarButton>\n      <ScalarButton\n        v-if=\"textContent\"\n        size=\"sm\"\n        variant=\"ghost\"\n        @click=\"downloadText\">\n        Download text\n      </ScalarButton>\n    </template>\n\n    <div\n      ref=\"contentContainer\"\n      class=\"text-xxs font-code h-full overflow-auto leading-6 whitespace-pre-wrap\">\n      <template v-if=\"errorRef\">\n        <div class=\"text-red bg-b-danger sticky top-0 border-b p-2\">\n          {{ errorRef.message }}\n        </div>\n      </template>\n      <template v-if=\"textContent\">\n        <div class=\"p-2\">\n          {{ textContent }}\n        </div>\n      </template>\n    </div>\n  </CollapsibleSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAM,mBAAmB,KAAK,OAAO;;;;;;;;EA/BrC,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,SAAS,gBAAgB;EAC/B,MAAM,cAAc,IAAI,EAAE;EAC1B,MAAM,gBAAgB,IAAI,CAAC;EAC3B,MAAM,EAAE,oBAAoB,aAAa;EACzC,IAAI;EAEJ,MAAM,sBAA4B;GAChC,IAAI,aAAa;IACf,IAAI,gBAAgB,WAAW;IAC/B,cAAc,KAAA;GAChB;EACF;;EAGA,MAAM,qBAA2B;GAC/B,cAAc;GACd,cAAc,IAAI,gBAChB,IAAI,KAAK,CAAC,YAAY,KAAK,GAAG,EAAE,MAAM,2BAA2B,CAAC,CACpE;GACA,MAAM,OAAO,SAAS,cAAc,GAAG;GACvC,KAAK,OAAO;GACZ,KAAK,WAAW;GAChB,KAAK,MAAM;EACb;EACA,MAAM,WAAW,IAAkB,IAAI;EACvC,MAAM,mBAAmB,IAAwB,IAAI;EACrD,IAAI,gBAAgE;;EAKpE,MAAM,aAAa,YAAY;GAC7B,MAAM,SAAS;GACf,IAAI,iBAAiB,OACnB,iBAAiB,MAAM,YAAY,iBAAiB,MAAM;EAE9D,CAAC;EAED,MAAM,gBACJ,iBACS;GACT,QAAa,QAAQ,aAAa,OAAO,CAAC,CAAC,CAAC,YAAY,CAExD,CAAC;EACH;EAEA,MAAM,aAAa,OACjB,iBACkB;GAClB,IAAI;IACF,IAAI,iBAAiB;IACrB,MAAM,SAAS,2BAA2B,QAAA,cAAc,SAAS;KAC/D,kBAAkB,kBAAkB,IAAI;KACxC,IAAI,iBAAiB,kBACnB,MAAM,IAAI,MACR,qEACF;KAEF,YAAY,SAAS;IACvB,CAAC;IACD,OAAO,kBAAkB,cAAc;KACrC,MAAM,EAAE,MAAM,UAAU,MAAM,aAAa,KAAK;KAChD,IAAI,kBAAkB,cACpB;KAEF,IAAI,MAAM;MACR,OAAO,OAAO;MACd,OAAY,MAAM;MAClB;KACF;KACA,cAAc,SAAS,MAAM;KAC7B,OAAO,KAAK,KAAK;IACnB;GACF,SAAS,OAAO;IACd,IAAI,kBAAkB,cAAc;KAClC,QAAQ,MAAM,yBAAyB,KAAK;KAC5C,SAAS,QAAQ,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,KAAK,CAAC;KACzE,aAAa,YAAY;KACzB,OAAY,MAAM;IACpB;GACF,UAAU;IACR,aAAa,YAAY;GAC3B;EACF;EAEA,MAAM,sBAA4B;GAChC,MAAM,WAAW;GACjB,gBAAgB;GAChB,IAAI,UACF,aAAa,QAAQ;GAEvB,OAAY,MAAM;EACpB;EAEA,MAAM,uBAA6B;GACjC,cAAc;GACd,gBAAgB,QAAA;GAChB,OAAO,MAAM;GACb,cAAc;GACd,cAAc,QAAQ;GACtB,YAAY,QAAQ;GACpB,SAAS,QAAQ;GACjB,WAAgB,QAAA,MAAM;EACxB;EAEA,YAAY,QAAA,QAAQ,gBAAgB,EAAE,WAAW,KAAK,CAAC;EACvD,sBAAsB;GACpB,cAAc;GACd,cAAc;EAChB,CAAC;;uBAIC,YA2DqB,MAAA,0BAAA,GAAA,EA3DD,OAAM,kCAAiC,GAAA;IAC9C,OAAK,cAkBR,CAjBN,mBAiBM,OAjBN,YAiBM,CAhBJ,mBAKM,OAAA,MAAA,CAAA,gBAAA,gBAJD,MAAA,SAAA,CAAS,CAAA,sCAAA,CAAA,IAA2C,KACvD,CAAA,GAAA,mBAEO,QAFP,YAEO,gBADF,MAAA,WAAA,CAAW,CAAC,cAAA,KAAa,CAAA,IAAI,cAClC,CAAA,CAAA,CAAA,GAGM,MAAA,MAAA,CAAM,CAAC,aAAA,UAAA,GADf,mBASM,OATN,YASM,CANJ,YAEc,MAAA,aAAA,GAAA;KADX,cAAc,MAAA,MAAA;KACf,MAAK;mCACP,mBAES,QAFT,YAES,gBADP,MAAA,SAAA,CAAS,CAAA,2CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,CAAA;IAKN,SAAO,cAOD;KALP,MAAA,MAAA,CAAM,CAAC,aAAA,UAAA,GADf,YAMe,MAAA,YAAA,GAAA;;MAJb,MAAK;MACL,SAAQ;MACP,SAAO;;6BACiD,CAAA,gBAAA,gBAAtD,MAAA,SAAA,CAAS,CAAA,wCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;KAGN,YAAA,SAAA,UAAA,GADR,YAMe,MAAA,YAAA,GAAA;;MAJb,MAAK;MACL,SAAQ;MACP,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAA,CAAe,CAAC,YAAA,KAAW;;6BAErC,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFwC,eAExC,EAAA,CAAA,EAAA,CAAA;;;KAEQ,YAAA,SAAA,UAAA,GADR,YAMe,MAAA,YAAA,GAAA;;MAJb,MAAK;MACL,SAAQ;MACP,SAAO;;6BAEV,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFwB,mBAExB,EAAA,CAAA,EAAA,CAAA;;;;2BAgBI,CAbN,mBAaM,OAAA;cAZA;KAAJ,KAAI;KACJ,OAAM;QACU,SAAA,SAAA,UAAA,GACd,mBAEM,OAFN,YAEM,gBADD,SAAA,MAAS,OAAO,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGP,YAAA,SAAA,UAAA,GACd,mBAEM,OAFN,YAEM,gBADD,YAAA,KAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,CAAA,CAAA"}

package/dist/v2/blocks/response-block/components/ResponseBodyToggle.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyToggle.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyToggle.vue"],"names":[],"mappings":"AA8BA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAC;AAqEF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ResponseBodyToggle.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyToggle.vue"],"names":[],"mappings":"AAqCA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAC;AA8EF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/response-block/components/ResponseBodyToggle.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyToggle.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyToggle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineProps<{\n  modelValue: boolean\n}>()\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', true)\">\n      Preview\n    </button>\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': !modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', false)\">\n      Raw\n    </button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ResponseBodyToggle.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyToggle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useLocalization } from '@/v2/features/localization'\n\ndefineProps<{\n  modelValue: boolean\n}>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', true)\">\n      {{ translate('apiClient.responseBodyToggle.preview') }}\n    </button>\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': !modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', false)\">\n      {{ translate('apiClient.responseBodyToggle.raw') }}\n    </button>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/response-block/components/ResponseBodyToggle.vue.script.js

@@ -1,4 +1,5 @@
-import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, withModifiers } from "vue";
+import { useLocalization } from "../../../features/localization/index.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withModifiers } from "vue";
 //#region src/v2/blocks/response-block/components/ResponseBodyToggle.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "text-c-3 text-xxs -my-1 flex justify-center gap-0.5 rounded p-0.5" };
 var ResponseBodyToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -6,16 +7,17 @@ var ResponseBodyToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 	props: { modelValue: { type: Boolean } },
 	emits: ["update:modelValue"],
 	setup(__props) {
+		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("button", {
 				class: normalizeClass(["hover:bg-b-3 rounded px-1", { "bg-b-3 text-c-1 cursor-default": __props.modelValue }]),
 				type: "button",
 				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("update:modelValue", true), ["stop"]))
-			}, " Preview ", 2), createElementVNode("button", {
+			}, toDisplayString(unref(translate)("apiClient.responseBodyToggle.preview")), 3), createElementVNode("button", {
 				class: normalizeClass(["hover:bg-b-3 rounded px-1", { "bg-b-3 text-c-1 cursor-default": !__props.modelValue }]),
 				type: "button",
 				onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.$emit("update:modelValue", false), ["stop"]))
-			}, " Raw ", 2)]);
+			}, toDisplayString(unref(translate)("apiClient.responseBodyToggle.raw")), 3)]);
 		};
 	}
 });

package/dist/v2/blocks/response-block/components/ResponseBodyToggle.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyToggle.vue.script.js","names":["$emit"],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyToggle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineProps<{\n  modelValue: boolean\n}>()\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', true)\">\n      Preview\n    </button>\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': !modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', false)\">\n      Raw\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;uBASE,mBAgBM,OAhBN,YAgBM,CAdJ,mBAMS,UAAA;IALP,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCACW,QAAA,WAAU,CAAA,CAAA;IACtD,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,IAAA,GAAA,CAAA,MAAA,CAAA;MAA6B,aAEjD,CAAA,GACA,mBAMS,UAAA;IALP,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCAAA,CACY,QAAA,WAAU,CAAA,CAAA;IACvD,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,KAAA,GAAA,CAAA,MAAA,CAAA;MAA8B,SAElD,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ResponseBodyToggle.vue.script.js","names":["$emit"],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyToggle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useLocalization } from '@/v2/features/localization'\n\ndefineProps<{\n  modelValue: boolean\n}>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', true)\">\n      {{ translate('apiClient.responseBodyToggle.preview') }}\n    </button>\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': !modelValue }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', false)\">\n      {{ translate('apiClient.responseBodyToggle.raw') }}\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;EAWA,MAAM,EAAE,cAAc,gBAAgB;;uBAGpC,mBAgBM,OAhBN,YAgBM,CAdJ,mBAMS,UAAA;IALP,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCACW,QAAA,WAAU,CAAA,CAAA;IACtD,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,IAAA,GAAA,CAAA,MAAA,CAAA;sBACf,MAAA,SAAA,CAAS,CAAA,sCAAA,CAAA,GAAA,CAAA,GAEd,mBAMS,UAAA;IALP,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCAAA,CACY,QAAA,WAAU,CAAA,CAAA;IACvD,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,KAAA,GAAA,CAAA,MAAA,CAAA;sBACf,MAAA,SAAA,CAAS,CAAA,kCAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

package/dist/v2/blocks/response-block/components/ResponseBodyVirtual.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyVirtual.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyVirtual.vue"],"names":[],"mappings":"AAqEA,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC3C,CAAC;AAyGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"ResponseBodyVirtual.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyVirtual.vue"],"names":[],"mappings":"AA2EA,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC3C,CAAC;AAgHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/response-block/components/ResponseBodyVirtual.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyVirtual.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyVirtual.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { formatJsonOrYamlString } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\n\nconst { content, data, headers } = defineProps<{\n  content: string\n  data: unknown\n  headers: { name: string; value: string }[]\n}>()\n\nconst textContent = computed(() => formatJsonOrYamlString(content))\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n</script>\n\n<template>\n  <CollapsibleSection class=\"!max-h-100% response-body-virtual overflow-x-auto\">\n    <template #title>Body</template>\n    <template\n      v-if=\"responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div class=\"font-code text-xxs rounded-t border-x border-t px-2.5 py-1.5\">\n      This response body is massive! Syntax highlighting won't work here.\n    </div>\n    <ScalarVirtualText\n      containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n      contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n      :lineHeight=\"20\"\n      searchable\n      :text=\"textContent\" />\n  </CollapsibleSection>\n</template>\n\n<style>\n.response-body-virtual[data-headlessui-state='open'],\n.response-body-virtual[data-headlessui-state='open'] .diclosure-panel {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ResponseBodyVirtual.vue.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyVirtual.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { formatJsonOrYamlString } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\n\nconst { content, data, headers } = defineProps<{\n  content: string\n  data: unknown\n  headers: { name: string; value: string }[]\n}>()\n\nconst { translate } = useLocalization()\n\nconst textContent = computed(() => formatJsonOrYamlString(content))\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n</script>\n\n<template>\n  <CollapsibleSection class=\"!max-h-100% response-body-virtual overflow-x-auto\">\n    <template #title>\n      {{ translate('apiClient.responseBodyVirtual.body') }}\n    </template>\n    <template\n      v-if=\"responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div class=\"font-code text-xxs rounded-t border-x border-t px-2.5 py-1.5\">\n      {{ translate('apiClient.responseBodyVirtual.largeBodyHint') }}\n    </div>\n    <ScalarVirtualText\n      containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n      contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n      :lineHeight=\"20\"\n      searchable\n      :text=\"textContent\" />\n  </CollapsibleSection>\n</template>\n\n<style>\n.response-body-virtual[data-headlessui-state='open'],\n.response-body-virtual[data-headlessui-state='open'] .diclosure-panel {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/response-block/components/ResponseBodyVirtual.vue.script.js

@@ -1,10 +1,12 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import CollapsibleSection_default from "../../../components/layout/CollapsibleSection.vue.js";
 import { processResponseBody } from "../helpers/process-response-body.js";
 import ResponseBodyDownload_default from "./ResponseBodyDownload.vue.js";
-import { computed, createBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { computed, createBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { formatJsonOrYamlString } from "@scalar/oas-utils/helpers";
 import { ScalarVirtualText } from "@scalar/components/virtual-text";
 //#region src/v2/blocks/response-block/components/ResponseBodyVirtual.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "font-code text-xxs rounded-t border-x border-t px-2.5 py-1.5" };
 var ResponseBodyVirtual_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ResponseBodyVirtual",
 	props: {
@@ -13,6 +15,7 @@ var ResponseBodyVirtual_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		headers: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		const textContent = computed(() => formatJsonOrYamlString(__props.content));
 		const responseBody = computed(() => processResponseBody({
 			data: __props.data,
@@ -20,8 +23,8 @@ var ResponseBodyVirtual_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(CollapsibleSection_default), { class: "!max-h-100% response-body-virtual overflow-x-auto" }, createSlots({
-				title: withCtx(() => [_cache[0] || (_cache[0] = createTextVNode("Body", -1))]),
-				default: withCtx(() => [_cache[1] || (_cache[1] = createElementVNode("div", { class: "font-code text-xxs rounded-t border-x border-t px-2.5 py-1.5" }, " This response body is massive! Syntax highlighting won't work here. ", -1)), createVNode(unref(ScalarVirtualText), {
+				title: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.responseBodyVirtual.body")), 1)]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, toDisplayString(unref(translate)("apiClient.responseBodyVirtual.largeBodyHint")), 1), createVNode(unref(ScalarVirtualText), {
 					containerClass: "custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen",
 					contentClass: "language-plaintext whitespace-pre font-code text-base",
 					lineHeight: 20,

package/dist/v2/blocks/response-block/components/ResponseBodyVirtual.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponseBodyVirtual.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyVirtual.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { formatJsonOrYamlString } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\n\nconst { content, data, headers } = defineProps<{\n  content: string\n  data: unknown\n  headers: { name: string; value: string }[]\n}>()\n\nconst textContent = computed(() => formatJsonOrYamlString(content))\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n</script>\n\n<template>\n  <CollapsibleSection class=\"!max-h-100% response-body-virtual overflow-x-auto\">\n    <template #title>Body</template>\n    <template\n      v-if=\"responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div class=\"font-code text-xxs rounded-t border-x border-t px-2.5 py-1.5\">\n      This response body is massive! Syntax highlighting won't work here.\n    </div>\n    <ScalarVirtualText\n      containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n      contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n      :lineHeight=\"20\"\n      searchable\n      :text=\"textContent\" />\n  </CollapsibleSection>\n</template>\n\n<style>\n.response-body-virtual[data-headlessui-state='open'],\n.response-body-virtual[data-headlessui-state='open'] .diclosure-panel {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAgBA,MAAM,cAAc,eAAe,uBAAuB,QAAA,OAAO,CAAC;EAElE,MAAM,eAAe,eACnB,oBAAoB;GAClB,MAAG,QAAA;GACH,SAAM,QAAA;EACR,CAAC,CACH;;uBAIE,YAmBqB,MAAA,0BAAA,GAAA,EAnBD,OAAM,oDAAmD,GAAA,YAAA;IAChE,OAAK,cAAK,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAJ,QAAI,EAAA,EAAA,CAAA;2BAWf,CAAA,OAAA,OAAA,OAAA,KAFN,mBAEM,OAAA,EAFD,OAAM,+DAA8D,GAAC,yEAE1E,EAAA,IACA,YAKwB,MAAA,iBAAA,GAAA;KAJtB,gBAAe;KACf,cAAa;KACZ,YAAY;KACb,YAAA;KACC,MAAM,YAAA;;;OAfD,aAAA,MAAa,UAAA;UAClB;sBAI0C,CAH3C,YAG2C,8BAAA;KAFxC,UAAU,aAAA,MAAa;KACvB,MAAM,aAAA,MAAa;KACnB,MAAM,aAAA,MAAa,UAAU"}
+{"version":3,"file":"ResponseBodyVirtual.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/response-block/components/ResponseBodyVirtual.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarVirtualText } from '@scalar/components/virtual-text'\nimport { formatJsonOrYamlString } from '@scalar/oas-utils/helpers'\nimport { computed } from 'vue'\n\nimport { processResponseBody } from '@/v2/blocks/response-block/helpers/process-response-body'\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport ResponseBodyDownload from './ResponseBodyDownload.vue'\n\nconst { content, data, headers } = defineProps<{\n  content: string\n  data: unknown\n  headers: { name: string; value: string }[]\n}>()\n\nconst { translate } = useLocalization()\n\nconst textContent = computed(() => formatJsonOrYamlString(content))\n\nconst responseBody = computed(() =>\n  processResponseBody({\n    data,\n    headers,\n  }),\n)\n</script>\n\n<template>\n  <CollapsibleSection class=\"!max-h-100% response-body-virtual overflow-x-auto\">\n    <template #title>\n      {{ translate('apiClient.responseBodyVirtual.body') }}\n    </template>\n    <template\n      v-if=\"responseBody.dataUrl\"\n      #actions>\n      <ResponseBodyDownload\n        :filename=\"responseBody.attachmentFilename\"\n        :href=\"responseBody.dataUrl\"\n        :type=\"responseBody.mimeType?.essence\" />\n    </template>\n    <div class=\"font-code text-xxs rounded-t border-x border-t px-2.5 py-1.5\">\n      {{ translate('apiClient.responseBodyVirtual.largeBodyHint') }}\n    </div>\n    <ScalarVirtualText\n      containerClass=\"custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen\"\n      contentClass=\"language-plaintext whitespace-pre font-code text-base\"\n      :lineHeight=\"20\"\n      searchable\n      :text=\"textContent\" />\n  </CollapsibleSection>\n</template>\n\n<style>\n.response-body-virtual[data-headlessui-state='open'],\n.response-body-virtual[data-headlessui-state='open'] .diclosure-panel {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,cAAc,eAAe,uBAAuB,QAAA,OAAO,CAAC;EAElE,MAAM,eAAe,eACnB,oBAAoB;GAClB,MAAG,QAAA;GACH,SAAM,QAAA;EACR,CAAC,CACH;;uBAIE,YAqBqB,MAAA,0BAAA,GAAA,EArBD,OAAM,oDAAmD,GAAA,YAAA;IAChE,OAAK,cACuC,CAAA,gBAAA,gBAAlD,MAAA,SAAA,CAAS,CAAA,oCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;2BAYR,CAFN,mBAEM,OAFN,YAEM,gBADD,MAAA,SAAA,CAAS,CAAA,6CAAA,CAAA,GAAA,CAAA,GAEd,YAKwB,MAAA,iBAAA,GAAA;KAJtB,gBAAe;KACf,cAAa;KACZ,YAAY;KACb,YAAA;KACC,MAAM,YAAA;;;OAfD,aAAA,MAAa,UAAA;UAClB;sBAI0C,CAH3C,YAG2C,8BAAA;KAFxC,UAAU,aAAA,MAAa;KACvB,MAAM,aAAA,MAAa;KACnB,MAAM,aAAA,MAAa,UAAU"}