feat: convert json to interfaces (#3566)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue

@@ -44,6 +44,39 @@
           :icon="copyIcon"
           @click="copyResponse"
         />
+        <tippy
+          v-if="response.body"
+          interactive
+          trigger="click"
+          theme="popover"
+          :on-shown="() => copyInterfaceTippyActions.focus()"
+        >
+          <HoppButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('app.copy_interface_type')"
+            :icon="IconMore"
+          />
+          <template #content="{ hide }">
+            <div
+              ref="copyInterfaceTippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.escape="hide()"
+            >
+              <HoppSmartItem
+                v-for="(language, index) in interfaceLanguages"
+                :key="index"
+                :label="language"
+                :icon="
+                  copiedInterfaceLanguage === language
+                    ? copyInterfaceIcon
+                    : IconCopy
+                "
+                @click="runCopyInterface(language)"
+              />
+            </div>
+          </template>
+        </tippy>
       </div>
     </div>
     <div
@@ -201,7 +234,9 @@
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
 import IconFilter from "~icons/lucide/filter"
+import IconMore from "~icons/lucide/more-horizontal"
 import IconHelpCircle from "~icons/lucide/help-circle"
+import IconCopy from "~icons/lucide/copy"
 import * as LJSON from "lossless-json"
 import * as O from "fp-ts/Option"
 import * as E from "fp-ts/Either"
@@ -221,9 +256,11 @@ import {
   useCopyResponse,
   useResponseBody,
   useDownloadResponse,
+  useCopyInterface,
 } from "@composables/lens-actions"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
 
 const t = useI18n()
 
@@ -235,6 +272,13 @@ const { responseBodyText } = useResponseBody(props.response)
 
 const toggleFilter = ref(false)
 const filterQueryText = ref("")
+const copiedInterfaceLanguage = ref("")
+
+const runCopyInterface = (language: string) => {
+  copyInterface(language).then(() => {
+    copiedInterfaceLanguage.value = language
+  })
+}
 
 type BodyParseError =
   | { type: "JSON_PARSE_FAILED" }
@@ -319,6 +363,7 @@ const filterResponseError = computed(() =>
 )
 
 const { copyIcon, copyResponse } = useCopyResponse(jsonBodyText)
+const { copyInterfaceIcon, copyInterface } = useCopyInterface(jsonBodyText)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/json",
   jsonBodyText
@@ -327,6 +372,7 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
 // Template refs
 const tippyActions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
+const copyInterfaceTippyActions = ref<any | null>(null)
 const linewrapEnabled = ref(true)
 
 const { cursor } = useCodemirror(