fix: raw lens renderer download option uses direct arraybuffer binary value instead of text

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -39,12 +39,18 @@
 
 <script setup lang="ts">
 import { ref, computed, reactive } from "@nuxtjs/composition-api"
+import { flow, pipe } from "fp-ts/function"
+import * as S from "fp-ts/string"
+import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
+import * as A from "fp-ts/Array"
+import * as O from "fp-ts/Option"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { useI18n } from "~/helpers/utils/composables"
 import useResponseBody from "~/helpers/lenses/composables/useResponseBody"
 import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
 import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
+import { objFieldMatches } from "~/helpers/functional/object"
 
 const t = useI18n()
 
@@ -54,18 +60,31 @@ const props = defineProps<{
 
 const { responseBodyText } = useResponseBody(props.response)
 
-const responseType = computed(() => {
+const rawResponseBody = computed(() =>
-  return (
+  props.response.type === "fail" || props.response.type === "success"
-    props.response.headers.find((h) => h.key.toLowerCase() === "content-type")
+    ? props.response.body
-      .value || ""
+    : new ArrayBuffer(0)
+)
+
+const responseType = computed(() =>
+  pipe(
+    props.response,
+    O.fromPredicate(objFieldMatches("type", ["fail", "success"] as const)),
+    O.chain(
+      // Try getting content-type
+      flow(
+        (res) => res.headers,
+        A.findFirst((h) => h.key.toLowerCase() === "content-type"),
+        O.map(flow((h) => h.value, S.split(";"), RNEA.head, S.toLowerCase))
+      )
+    ),
+    O.getOrElse(() => "text/plain")
   )
-    .split(";")[0]
+)
-    .toLowerCase()
-})
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
-  responseBodyText
+  rawResponseBody
 )
 
 const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)

packages/hoppscotch-app/helpers/functional/object.ts

@@ -1,5 +1,6 @@
 import { pipe } from "fp-ts/function"
 import cloneDeep from "lodash/cloneDeep"
+import isEqual from "lodash/isEqual"
 
 export const objRemoveKey =
   <T, K extends keyof T>(key: K) =>
@@ -8,3 +9,12 @@ export const objRemoveKey =
       delete e[key]
       return e
     })
+
+export const objFieldMatches =
+  <T, K extends keyof T, V extends T[K]>(
+    fieldName: K,
+    matches: ReadonlyArray<V>
+  ) =>
+  // eslint-disable-next-line no-unused-vars
+  (obj: T): obj is T & { [_ in K]: V } =>
+    matches.findIndex((x) => isEqual(obj[fieldName], x)) !== -1

packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts

@@ -5,7 +5,7 @@ export type downloadResponseReturnType = (() => void) | Ref<any>
 
 export default function useDownloadResponse(
   contentType: string,
-  responseBodyText: Ref<string>
+  responseBody: Ref<string | ArrayBuffer>
 ): {
   downloadIcon: Ref<string>
   downloadResponse: () => void
@@ -15,7 +15,7 @@ export default function useDownloadResponse(
   const t = useI18n()
 
   const downloadResponse = () => {
-    const dataToWrite = responseBodyText.value
+    const dataToWrite = responseBody.value
     const file = new Blob([dataToWrite], { type: contentType })
     const a = document.createElement("a")
     const url = URL.createObjectURL(file)