feat: new ui for response interface generation (#4105)

* feat: codegen body added

* feat: new ui added for response interface

* feat: generate code component added

* chore: default collection tab

* feat: generate data schema

* chore: clean up

* chore: minor code refactor

* fix: only render if `isDrawerOpen` is true

* chore: clean up

* chore: clean up

---------

Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/locales/en.json

@@ -641,7 +641,9 @@
     "title": "Response",
     "video": "Video",
     "waiting_for_connection": "waiting for connection",
-    "xml": "XML"
+    "xml": "XML",
+    "generate_data_schema": "Generate Data Schema",
+    "data_schema": "Data Schema"
   },
   "settings": {
     "accent_color": "Accent color",

packages/hoppscotch-common/src/components.d.ts

@@ -5,229 +5,230 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module 'vue' {
+declare module "vue" {
   export interface GlobalComponents {
-    AccessTokens: typeof import('./components/accessTokens/index.vue')['default']
+    AccessTokens: (typeof import("./components/accessTokens/index.vue"))["default"]
-    AccessTokensGenerateModal: typeof import('./components/accessTokens/GenerateModal.vue')['default']
+    AccessTokensGenerateModal: (typeof import("./components/accessTokens/GenerateModal.vue"))["default"]
-    AccessTokensList: typeof import('./components/accessTokens/List.vue')['default']
+    AccessTokensList: (typeof import("./components/accessTokens/List.vue"))["default"]
-    AccessTokensOverview: typeof import('./components/accessTokens/Overview.vue')['default']
+    AccessTokensOverview: (typeof import("./components/accessTokens/Overview.vue"))["default"]
-    AppActionHandler: typeof import('./components/app/ActionHandler.vue')['default']
+    AppActionHandler: (typeof import("./components/app/ActionHandler.vue"))["default"]
-    AppBanner: typeof import('./components/app/Banner.vue')['default']
+    AppBanner: (typeof import("./components/app/Banner.vue"))["default"]
-    AppContextMenu: typeof import('./components/app/ContextMenu.vue')['default']
+    AppContextMenu: (typeof import("./components/app/ContextMenu.vue"))["default"]
-    AppDeveloperOptions: typeof import('./components/app/DeveloperOptions.vue')['default']
+    AppDeveloperOptions: (typeof import("./components/app/DeveloperOptions.vue"))["default"]
-    AppFooter: typeof import('./components/app/Footer.vue')['default']
+    AppDrawer: (typeof import("./components/app/Drawer.vue"))["default"]
-    AppGitHubStarButton: typeof import('./components/app/GitHubStarButton.vue')['default']
+    AppFooter: (typeof import("./components/app/Footer.vue"))["default"]
-    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppGitHubStarButton: (typeof import("./components/app/GitHubStarButton.vue"))["default"]
-    AppInspection: typeof import('./components/app/Inspection.vue')['default']
+    AppHeader: (typeof import("./components/app/Header.vue"))["default"]
-    AppInterceptor: typeof import('./components/app/Interceptor.vue')['default']
+    AppInspection: (typeof import("./components/app/Inspection.vue"))["default"]
-    AppLogo: typeof import('./components/app/Logo.vue')['default']
+    AppInterceptor: (typeof import("./components/app/Interceptor.vue"))["default"]
-    AppOptions: typeof import('./components/app/Options.vue')['default']
+    AppLogo: (typeof import("./components/app/Logo.vue"))["default"]
-    AppPaneLayout: typeof import('./components/app/PaneLayout.vue')['default']
+    AppOptions: (typeof import("./components/app/Options.vue"))["default"]
-    AppPWAPrompt: typeof import('./components/app/PWAPrompt.vue')['default']
+    AppPaneLayout: (typeof import("./components/app/PaneLayout.vue"))["default"]
-    AppShare: typeof import('./components/app/Share.vue')['default']
+    AppPWAPrompt: (typeof import("./components/app/PWAPrompt.vue"))["default"]
-    AppShortcuts: typeof import('./components/app/Shortcuts.vue')['default']
+    AppShare: (typeof import("./components/app/Share.vue"))["default"]
-    AppShortcutsEntry: typeof import('./components/app/ShortcutsEntry.vue')['default']
+    AppShortcuts: (typeof import("./components/app/Shortcuts.vue"))["default"]
-    AppShortcutsPrompt: typeof import('./components/app/ShortcutsPrompt.vue')['default']
+    AppShortcutsEntry: (typeof import("./components/app/ShortcutsEntry.vue"))["default"]
-    AppSidenav: typeof import('./components/app/Sidenav.vue')['default']
+    AppShortcutsPrompt: (typeof import("./components/app/ShortcutsPrompt.vue"))["default"]
-    AppSpotlight: typeof import('./components/app/spotlight/index.vue')['default']
+    AppSidenav: (typeof import("./components/app/Sidenav.vue"))["default"]
-    AppSpotlightEntry: typeof import('./components/app/spotlight/Entry.vue')['default']
+    AppSpotlight: (typeof import("./components/app/spotlight/index.vue"))["default"]
-    AppSpotlightEntryGQLHistory: typeof import('./components/app/spotlight/entry/GQLHistory.vue')['default']
+    AppSpotlightEntry: (typeof import("./components/app/spotlight/Entry.vue"))["default"]
-    AppSpotlightEntryGQLRequest: typeof import('./components/app/spotlight/entry/GQLRequest.vue')['default']
+    AppSpotlightEntryGQLHistory: (typeof import("./components/app/spotlight/entry/GQLHistory.vue"))["default"]
-    AppSpotlightEntryIconSelected: typeof import('./components/app/spotlight/entry/IconSelected.vue')['default']
+    AppSpotlightEntryGQLRequest: (typeof import("./components/app/spotlight/entry/GQLRequest.vue"))["default"]
-    AppSpotlightEntryRESTHistory: typeof import('./components/app/spotlight/entry/RESTHistory.vue')['default']
+    AppSpotlightEntryIconSelected: (typeof import("./components/app/spotlight/entry/IconSelected.vue"))["default"]
-    AppSpotlightEntryRESTRequest: typeof import('./components/app/spotlight/entry/RESTRequest.vue')['default']
+    AppSpotlightEntryRESTHistory: (typeof import("./components/app/spotlight/entry/RESTHistory.vue"))["default"]
-    AppSpotlightEntryRESTTeamRequestEntry: typeof import('./components/app/spotlight/entry/RESTTeamRequestEntry.vue')['default']
+    AppSpotlightEntryRESTRequest: (typeof import("./components/app/spotlight/entry/RESTRequest.vue"))["default"]
-    AppSpotlightSearch: typeof import('./components/app/SpotlightSearch.vue')['default']
+    AppSpotlightEntryRESTTeamRequestEntry: (typeof import("./components/app/spotlight/entry/RESTTeamRequestEntry.vue"))["default"]
-    AppSupport: typeof import('./components/app/Support.vue')['default']
+    AppSpotlightSearch: (typeof import("./components/app/SpotlightSearch.vue"))["default"]
-    AppWhatsNewDialog: typeof import('./components/app/WhatsNewDialog.vue')['default']
+    AppSupport: (typeof import("./components/app/Support.vue"))["default"]
-    Collections: typeof import('./components/collections/index.vue')['default']
+    AppWhatsNewDialog: (typeof import("./components/app/WhatsNewDialog.vue"))["default"]
-    CollectionsAdd: typeof import('./components/collections/Add.vue')['default']
+    Collections: (typeof import("./components/collections/index.vue"))["default"]
-    CollectionsAddFolder: typeof import('./components/collections/AddFolder.vue')['default']
+    CollectionsAdd: (typeof import("./components/collections/Add.vue"))["default"]
-    CollectionsAddRequest: typeof import('./components/collections/AddRequest.vue')['default']
+    CollectionsAddFolder: (typeof import("./components/collections/AddFolder.vue"))["default"]
-    CollectionsCollection: typeof import('./components/collections/Collection.vue')['default']
+    CollectionsAddRequest: (typeof import("./components/collections/AddRequest.vue"))["default"]
-    CollectionsEdit: typeof import('./components/collections/Edit.vue')['default']
+    CollectionsCollection: (typeof import("./components/collections/Collection.vue"))["default"]
-    CollectionsEditFolder: typeof import('./components/collections/EditFolder.vue')['default']
+    CollectionsEdit: (typeof import("./components/collections/Edit.vue"))["default"]
-    CollectionsEditRequest: typeof import('./components/collections/EditRequest.vue')['default']
+    CollectionsEditFolder: (typeof import("./components/collections/EditFolder.vue"))["default"]
-    CollectionsGraphql: typeof import('./components/collections/graphql/index.vue')['default']
+    CollectionsEditRequest: (typeof import("./components/collections/EditRequest.vue"))["default"]
-    CollectionsGraphqlAdd: typeof import('./components/collections/graphql/Add.vue')['default']
+    CollectionsGraphql: (typeof import("./components/collections/graphql/index.vue"))["default"]
-    CollectionsGraphqlAddFolder: typeof import('./components/collections/graphql/AddFolder.vue')['default']
+    CollectionsGraphqlAdd: (typeof import("./components/collections/graphql/Add.vue"))["default"]
-    CollectionsGraphqlAddRequest: typeof import('./components/collections/graphql/AddRequest.vue')['default']
+    CollectionsGraphqlAddFolder: (typeof import("./components/collections/graphql/AddFolder.vue"))["default"]
-    CollectionsGraphqlCollection: typeof import('./components/collections/graphql/Collection.vue')['default']
+    CollectionsGraphqlAddRequest: (typeof import("./components/collections/graphql/AddRequest.vue"))["default"]
-    CollectionsGraphqlEdit: typeof import('./components/collections/graphql/Edit.vue')['default']
+    CollectionsGraphqlCollection: (typeof import("./components/collections/graphql/Collection.vue"))["default"]
-    CollectionsGraphqlEditFolder: typeof import('./components/collections/graphql/EditFolder.vue')['default']
+    CollectionsGraphqlEdit: (typeof import("./components/collections/graphql/Edit.vue"))["default"]
-    CollectionsGraphqlEditRequest: typeof import('./components/collections/graphql/EditRequest.vue')['default']
+    CollectionsGraphqlEditFolder: (typeof import("./components/collections/graphql/EditFolder.vue"))["default"]
-    CollectionsGraphqlFolder: typeof import('./components/collections/graphql/Folder.vue')['default']
+    CollectionsGraphqlEditRequest: (typeof import("./components/collections/graphql/EditRequest.vue"))["default"]
-    CollectionsGraphqlImportExport: typeof import('./components/collections/graphql/ImportExport.vue')['default']
+    CollectionsGraphqlFolder: (typeof import("./components/collections/graphql/Folder.vue"))["default"]
-    CollectionsGraphqlRequest: typeof import('./components/collections/graphql/Request.vue')['default']
+    CollectionsGraphqlImportExport: (typeof import("./components/collections/graphql/ImportExport.vue"))["default"]
-    CollectionsImportExport: typeof import('./components/collections/ImportExport.vue')['default']
+    CollectionsGraphqlRequest: (typeof import("./components/collections/graphql/Request.vue"))["default"]
-    CollectionsMyCollections: typeof import('./components/collections/MyCollections.vue')['default']
+    CollectionsImportExport: (typeof import("./components/collections/ImportExport.vue"))["default"]
-    CollectionsProperties: typeof import('./components/collections/Properties.vue')['default']
+    CollectionsMyCollections: (typeof import("./components/collections/MyCollections.vue"))["default"]
-    CollectionsRequest: typeof import('./components/collections/Request.vue')['default']
+    CollectionsProperties: (typeof import("./components/collections/Properties.vue"))["default"]
-    CollectionsRunner: typeof import('./components/collections/Runner.vue')['default']
+    CollectionsRequest: (typeof import("./components/collections/Request.vue"))["default"]
-    CollectionsSaveRequest: typeof import('./components/collections/SaveRequest.vue')['default']
+    CollectionsRunner: (typeof import("./components/collections/Runner.vue"))["default"]
-    CollectionsTeamCollections: typeof import('./components/collections/TeamCollections.vue')['default']
+    CollectionsSaveRequest: (typeof import("./components/collections/SaveRequest.vue"))["default"]
-    CookiesAllModal: typeof import('./components/cookies/AllModal.vue')['default']
+    CollectionsTeamCollections: (typeof import("./components/collections/TeamCollections.vue"))["default"]
-    CookiesEditCookie: typeof import('./components/cookies/EditCookie.vue')['default']
+    CookiesAllModal: (typeof import("./components/cookies/AllModal.vue"))["default"]
-    Embeds: typeof import('./components/embeds/index.vue')['default']
+    CookiesEditCookie: (typeof import("./components/cookies/EditCookie.vue"))["default"]
-    EmbedsHeader: typeof import('./components/embeds/Header.vue')['default']
+    Embeds: (typeof import("./components/embeds/index.vue"))["default"]
-    EmbedsRequest: typeof import('./components/embeds/Request.vue')['default']
+    EmbedsHeader: (typeof import("./components/embeds/Header.vue"))["default"]
-    Environments: typeof import('./components/environments/index.vue')['default']
+    EmbedsRequest: (typeof import("./components/embeds/Request.vue"))["default"]
-    EnvironmentsAdd: typeof import('./components/environments/Add.vue')['default']
+    Environments: (typeof import("./components/environments/index.vue"))["default"]
-    EnvironmentsImportExport: typeof import('./components/environments/ImportExport.vue')['default']
+    EnvironmentsAdd: (typeof import("./components/environments/Add.vue"))["default"]
-    EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
+    EnvironmentsImportExport: (typeof import("./components/environments/ImportExport.vue"))["default"]
-    EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
+    EnvironmentsMy: (typeof import("./components/environments/my/index.vue"))["default"]
-    EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
+    EnvironmentsMyDetails: (typeof import("./components/environments/my/Details.vue"))["default"]
-    EnvironmentsProperties: typeof import('./components/environments/Properties.vue')['default']
+    EnvironmentsMyEnvironment: (typeof import("./components/environments/my/Environment.vue"))["default"]
-    EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default']
+    EnvironmentsProperties: (typeof import("./components/environments/Properties.vue"))["default"]
-    EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
+    EnvironmentsSelector: (typeof import("./components/environments/Selector.vue"))["default"]
-    EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
+    EnvironmentsTeams: (typeof import("./components/environments/teams/index.vue"))["default"]
-    EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
+    EnvironmentsTeamsDetails: (typeof import("./components/environments/teams/Details.vue"))["default"]
-    FirebaseLogin: typeof import('./components/firebase/Login.vue')['default']
+    EnvironmentsTeamsEnvironment: (typeof import("./components/environments/teams/Environment.vue"))["default"]
-    FirebaseLogout: typeof import('./components/firebase/Logout.vue')['default']
+    FirebaseLogin: (typeof import("./components/firebase/Login.vue"))["default"]
-    GraphqlAuthorization: typeof import('./components/graphql/Authorization.vue')['default']
+    FirebaseLogout: (typeof import("./components/firebase/Logout.vue"))["default"]
-    GraphqlField: typeof import('./components/graphql/Field.vue')['default']
+    GraphqlAuthorization: (typeof import("./components/graphql/Authorization.vue"))["default"]
-    GraphqlHeaders: typeof import('./components/graphql/Headers.vue')['default']
+    GraphqlField: (typeof import("./components/graphql/Field.vue"))["default"]
-    GraphqlQuery: typeof import('./components/graphql/Query.vue')['default']
+    GraphqlHeaders: (typeof import("./components/graphql/Headers.vue"))["default"]
-    GraphqlRequest: typeof import('./components/graphql/Request.vue')['default']
+    GraphqlQuery: (typeof import("./components/graphql/Query.vue"))["default"]
-    GraphqlRequestOptions: typeof import('./components/graphql/RequestOptions.vue')['default']
+    GraphqlRequest: (typeof import("./components/graphql/Request.vue"))["default"]
-    GraphqlRequestTab: typeof import('./components/graphql/RequestTab.vue')['default']
+    GraphqlRequestOptions: (typeof import("./components/graphql/RequestOptions.vue"))["default"]
-    GraphqlResponse: typeof import('./components/graphql/Response.vue')['default']
+    GraphqlRequestTab: (typeof import("./components/graphql/RequestTab.vue"))["default"]
-    GraphqlSidebar: typeof import('./components/graphql/Sidebar.vue')['default']
+    GraphqlResponse: (typeof import("./components/graphql/Response.vue"))["default"]
-    GraphqlSubscriptionLog: typeof import('./components/graphql/SubscriptionLog.vue')['default']
+    GraphqlSidebar: (typeof import("./components/graphql/Sidebar.vue"))["default"]
-    GraphqlTabHead: typeof import('./components/graphql/TabHead.vue')['default']
+    GraphqlSubscriptionLog: (typeof import("./components/graphql/SubscriptionLog.vue"))["default"]
-    GraphqlType: typeof import('./components/graphql/Type.vue')['default']
+    GraphqlTabHead: (typeof import("./components/graphql/TabHead.vue"))["default"]
-    GraphqlTypeLink: typeof import('./components/graphql/TypeLink.vue')['default']
+    GraphqlType: (typeof import("./components/graphql/Type.vue"))["default"]
-    GraphqlVariable: typeof import('./components/graphql/Variable.vue')['default']
+    GraphqlTypeLink: (typeof import("./components/graphql/TypeLink.vue"))["default"]
-    History: typeof import('./components/history/index.vue')['default']
+    GraphqlVariable: (typeof import("./components/graphql/Variable.vue"))["default"]
-    HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
+    History: (typeof import("./components/history/index.vue"))["default"]
-    HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
+    HistoryGraphqlCard: (typeof import("./components/history/graphql/Card.vue"))["default"]
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HistoryRestCard: (typeof import("./components/history/rest/Card.vue"))["default"]
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppButtonPrimary: (typeof import("@hoppscotch/ui"))["HoppButtonPrimary"]
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppButtonSecondary: (typeof import("@hoppscotch/ui"))["HoppButtonSecondary"]
-    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
+    HoppSmartAnchor: (typeof import("@hoppscotch/ui"))["HoppSmartAnchor"]
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartCheckbox: (typeof import("@hoppscotch/ui"))["HoppSmartCheckbox"]
-    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
+    HoppSmartConfirmModal: (typeof import("@hoppscotch/ui"))["HoppSmartConfirmModal"]
-    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
+    HoppSmartExpand: (typeof import("@hoppscotch/ui"))["HoppSmartExpand"]
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartFileChip: (typeof import("@hoppscotch/ui"))["HoppSmartFileChip"]
-    HoppSmartIntersection: typeof import('@hoppscotch/ui')['HoppSmartIntersection']
+    HoppSmartInput: (typeof import("@hoppscotch/ui"))["HoppSmartInput"]
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartIntersection: (typeof import("@hoppscotch/ui"))["HoppSmartIntersection"]
-    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartItem: (typeof import("@hoppscotch/ui"))["HoppSmartItem"]
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartLink: (typeof import("@hoppscotch/ui"))["HoppSmartLink"]
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartModal: (typeof import("@hoppscotch/ui"))["HoppSmartModal"]
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
+    HoppSmartPicture: (typeof import("@hoppscotch/ui"))["HoppSmartPicture"]
-    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
+    HoppSmartPlaceholder: (typeof import("@hoppscotch/ui"))["HoppSmartPlaceholder"]
-    HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
+    HoppSmartProgressRing: (typeof import("@hoppscotch/ui"))["HoppSmartProgressRing"]
-    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
+    HoppSmartRadio: (typeof import("@hoppscotch/ui"))["HoppSmartRadio"]
-    HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper']
+    HoppSmartRadioGroup: (typeof import("@hoppscotch/ui"))["HoppSmartRadioGroup"]
-    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
+    HoppSmartSelectWrapper: (typeof import("@hoppscotch/ui"))["HoppSmartSelectWrapper"]
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartSlideOver: (typeof import("@hoppscotch/ui"))["HoppSmartSlideOver"]
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    HoppSmartSpinner: (typeof import("@hoppscotch/ui"))["HoppSmartSpinner"]
-    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartTab: (typeof import("@hoppscotch/ui"))["HoppSmartTab"]
-    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
+    HoppSmartTabs: (typeof import("@hoppscotch/ui"))["HoppSmartTabs"]
-    HoppSmartTree: typeof import('@hoppscotch/ui')['HoppSmartTree']
+    HoppSmartToggle: (typeof import("@hoppscotch/ui"))["HoppSmartToggle"]
-    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
+    HoppSmartTree: (typeof import("@hoppscotch/ui"))["HoppSmartTree"]
-    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
+    HoppSmartWindow: (typeof import("@hoppscotch/ui"))["HoppSmartWindow"]
-    HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
+    HoppSmartWindows: (typeof import("@hoppscotch/ui"))["HoppSmartWindows"]
-    HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
+    HttpAuthorization: (typeof import("./components/http/Authorization.vue"))["default"]
-    HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
+    HttpAuthorizationApiKey: (typeof import("./components/http/authorization/ApiKey.vue"))["default"]
-    HttpBody: typeof import('./components/http/Body.vue')['default']
+    HttpAuthorizationBasic: (typeof import("./components/http/authorization/Basic.vue"))["default"]
-    HttpBodyParameters: typeof import('./components/http/BodyParameters.vue')['default']
+    HttpBody: (typeof import("./components/http/Body.vue"))["default"]
-    HttpCodegen: typeof import('./components/http/Codegen.vue')['default']
+    HttpBodyParameters: (typeof import("./components/http/BodyParameters.vue"))["default"]
-    HttpCodegenModal: typeof import('./components/http/CodegenModal.vue')['default']
+    HttpCodegen: (typeof import("./components/http/Codegen.vue"))["default"]
-    HttpHeaders: typeof import('./components/http/Headers.vue')['default']
+    HttpCodegenModal: (typeof import("./components/http/CodegenModal.vue"))["default"]
-    HttpImportCurl: typeof import('./components/http/ImportCurl.vue')['default']
+    HttpHeaders: (typeof import("./components/http/Headers.vue"))["default"]
-    HttpKeyValue: typeof import('./components/http/KeyValue.vue')['default']
+    HttpImportCurl: (typeof import("./components/http/ImportCurl.vue"))["default"]
-    HttpOAuth2Authorization: typeof import('./components/http/OAuth2Authorization.vue')['default']
+    HttpKeyValue: (typeof import("./components/http/KeyValue.vue"))["default"]
-    HttpParameters: typeof import('./components/http/Parameters.vue')['default']
+    HttpOAuth2Authorization: (typeof import("./components/http/OAuth2Authorization.vue"))["default"]
-    HttpPreRequestScript: typeof import('./components/http/PreRequestScript.vue')['default']
+    HttpParameters: (typeof import("./components/http/Parameters.vue"))["default"]
-    HttpRawBody: typeof import('./components/http/RawBody.vue')['default']
+    HttpPreRequestScript: (typeof import("./components/http/PreRequestScript.vue"))["default"]
-    HttpReqChangeConfirmModal: typeof import('./components/http/ReqChangeConfirmModal.vue')['default']
+    HttpRawBody: (typeof import("./components/http/RawBody.vue"))["default"]
-    HttpRequest: typeof import('./components/http/Request.vue')['default']
+    HttpReqChangeConfirmModal: (typeof import("./components/http/ReqChangeConfirmModal.vue"))["default"]
-    HttpRequestOptions: typeof import('./components/http/RequestOptions.vue')['default']
+    HttpRequest: (typeof import("./components/http/Request.vue"))["default"]
-    HttpRequestTab: typeof import('./components/http/RequestTab.vue')['default']
+    HttpRequestOptions: (typeof import("./components/http/RequestOptions.vue"))["default"]
-    HttpRequestVariables: typeof import('./components/http/RequestVariables.vue')['default']
+    HttpRequestTab: (typeof import("./components/http/RequestTab.vue"))["default"]
-    HttpResponse: typeof import('./components/http/Response.vue')['default']
+    HttpRequestVariables: (typeof import("./components/http/RequestVariables.vue"))["default"]
-    HttpResponseMeta: typeof import('./components/http/ResponseMeta.vue')['default']
+    HttpResponse: (typeof import("./components/http/Response.vue"))["default"]
-    HttpSidebar: typeof import('./components/http/Sidebar.vue')['default']
+    HttpResponseMeta: (typeof import("./components/http/ResponseMeta.vue"))["default"]
-    HttpTabHead: typeof import('./components/http/TabHead.vue')['default']
+    HttpSidebar: (typeof import("./components/http/Sidebar.vue"))["default"]
-    HttpTestResult: typeof import('./components/http/TestResult.vue')['default']
+    HttpTabHead: (typeof import("./components/http/TabHead.vue"))["default"]
-    HttpTestResultEntry: typeof import('./components/http/TestResultEntry.vue')['default']
+    HttpTestResult: (typeof import("./components/http/TestResult.vue"))["default"]
-    HttpTestResultEnv: typeof import('./components/http/TestResultEnv.vue')['default']
+    HttpTestResultEntry: (typeof import("./components/http/TestResultEntry.vue"))["default"]
-    HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
+    HttpTestResultEnv: (typeof import("./components/http/TestResultEnv.vue"))["default"]
-    HttpTests: typeof import('./components/http/Tests.vue')['default']
+    HttpTestResultReport: (typeof import("./components/http/TestResultReport.vue"))["default"]
-    HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
+    HttpTests: (typeof import("./components/http/Tests.vue"))["default"]
-    IconLucideActivity: typeof import('~icons/lucide/activity')['default']
+    HttpURLEncodedParams: (typeof import("./components/http/URLEncodedParams.vue"))["default"]
-    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
+    IconLucideActivity: (typeof import("~icons/lucide/activity"))["default"]
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideAlertTriangle: (typeof import("~icons/lucide/alert-triangle"))["default"]
-    IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
+    IconLucideArrowLeft: (typeof import("~icons/lucide/arrow-left"))["default"]
-    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
+    IconLucideArrowUpRight: (typeof import("~icons/lucide/arrow-up-right"))["default"]
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
+    IconLucideBrush: (typeof import("~icons/lucide/brush"))["default"]
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideCheckCircle: (typeof import("~icons/lucide/check-circle"))["default"]
-    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
+    IconLucideChevronRight: (typeof import("~icons/lucide/chevron-right"))["default"]
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
+    IconLucideGlobe: (typeof import("~icons/lucide/globe"))["default"]
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideHelpCircle: (typeof import("~icons/lucide/help-circle"))["default"]
-    IconLucideInfo: typeof import('~icons/lucide/info')['default']
+    IconLucideInbox: (typeof import("~icons/lucide/inbox"))["default"]
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
+    IconLucideInfo: (typeof import("~icons/lucide/info"))["default"]
-    IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
+    IconLucideLayers: (typeof import("~icons/lucide/layers"))["default"]
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideListEnd: (typeof import("~icons/lucide/list-end"))["default"]
-    IconLucideRss: typeof import('~icons/lucide/rss')['default']
+    IconLucideMinus: (typeof import("~icons/lucide/minus"))["default"]
-    IconLucideSearch: typeof import('~icons/lucide/search')['default']
+    IconLucideRss: (typeof import("~icons/lucide/rss"))["default"]
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideSearch: (typeof import("~icons/lucide/search"))["default"]
-    IconLucideX: typeof import('~icons/lucide/x')['default']
+    IconLucideUsers: (typeof import("~icons/lucide/users"))["default"]
-    ImportExportBase: typeof import('./components/importExport/Base.vue')['default']
+    IconLucideX: (typeof import("~icons/lucide/x"))["default"]
-    ImportExportImportExportList: typeof import('./components/importExport/ImportExportList.vue')['default']
+    ImportExportBase: (typeof import("./components/importExport/Base.vue"))["default"]
-    ImportExportImportExportSourcesList: typeof import('./components/importExport/ImportExportSourcesList.vue')['default']
+    ImportExportImportExportList: (typeof import("./components/importExport/ImportExportList.vue"))["default"]
-    ImportExportImportExportStepsFileImport: typeof import('./components/importExport/ImportExportSteps/FileImport.vue')['default']
+    ImportExportImportExportSourcesList: (typeof import("./components/importExport/ImportExportSourcesList.vue"))["default"]
-    ImportExportImportExportStepsMyCollectionImport: typeof import('./components/importExport/ImportExportSteps/MyCollectionImport.vue')['default']
+    ImportExportImportExportStepsFileImport: (typeof import("./components/importExport/ImportExportSteps/FileImport.vue"))["default"]
-    ImportExportImportExportStepsUrlImport: typeof import('./components/importExport/ImportExportSteps/UrlImport.vue')['default']
+    ImportExportImportExportStepsMyCollectionImport: (typeof import("./components/importExport/ImportExportSteps/MyCollectionImport.vue"))["default"]
-    InterceptorsErrorPlaceholder: typeof import('./components/interceptors/ErrorPlaceholder.vue')['default']
+    ImportExportImportExportStepsUrlImport: (typeof import("./components/importExport/ImportExportSteps/UrlImport.vue"))["default"]
-    InterceptorsExtensionSubtitle: typeof import('./components/interceptors/ExtensionSubtitle.vue')['default']
+    InterceptorsErrorPlaceholder: (typeof import("./components/interceptors/ErrorPlaceholder.vue"))["default"]
-    LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
+    InterceptorsExtensionSubtitle: (typeof import("./components/interceptors/ExtensionSubtitle.vue"))["default"]
-    LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
+    LensesHeadersRenderer: (typeof import("./components/lenses/HeadersRenderer.vue"))["default"]
-    LensesRenderersAudioLensRenderer: typeof import('./components/lenses/renderers/AudioLensRenderer.vue')['default']
+    LensesHeadersRendererEntry: (typeof import("./components/lenses/HeadersRendererEntry.vue"))["default"]
-    LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
+    LensesRenderersAudioLensRenderer: (typeof import("./components/lenses/renderers/AudioLensRenderer.vue"))["default"]
-    LensesRenderersImageLensRenderer: typeof import('./components/lenses/renderers/ImageLensRenderer.vue')['default']
+    LensesRenderersHTMLLensRenderer: (typeof import("./components/lenses/renderers/HTMLLensRenderer.vue"))["default"]
-    LensesRenderersJSONLensRenderer: typeof import('./components/lenses/renderers/JSONLensRenderer.vue')['default']
+    LensesRenderersImageLensRenderer: (typeof import("./components/lenses/renderers/ImageLensRenderer.vue"))["default"]
-    LensesRenderersPDFLensRenderer: typeof import('./components/lenses/renderers/PDFLensRenderer.vue')['default']
+    LensesRenderersJSONLensRenderer: (typeof import("./components/lenses/renderers/JSONLensRenderer.vue"))["default"]
-    LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
+    LensesRenderersPDFLensRenderer: (typeof import("./components/lenses/renderers/PDFLensRenderer.vue"))["default"]
-    LensesRenderersVideoLensRenderer: typeof import('./components/lenses/renderers/VideoLensRenderer.vue')['default']
+    LensesRenderersRawLensRenderer: (typeof import("./components/lenses/renderers/RawLensRenderer.vue"))["default"]
-    LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
+    LensesRenderersVideoLensRenderer: (typeof import("./components/lenses/renderers/VideoLensRenderer.vue"))["default"]
-    LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
+    LensesRenderersXMLLensRenderer: (typeof import("./components/lenses/renderers/XMLLensRenderer.vue"))["default"]
-    ModalsNativeCACertificates: typeof import('./../../hoppscotch-selfhost-desktop/src/components/modals/NativeCACertificates.vue')['default']
+    LensesResponseBodyRenderer: (typeof import("./components/lenses/ResponseBodyRenderer.vue"))["default"]
-    ModalsNativeClientCertificates: typeof import('./../../hoppscotch-selfhost-desktop/src/components/modals/NativeClientCertificates.vue')['default']
+    ModalsNativeCACertificates: (typeof import("./../../hoppscotch-selfhost-desktop/src/components/modals/NativeCACertificates.vue"))["default"]
-    ModalsNativeClientCertsAdd: typeof import('./../../hoppscotch-selfhost-desktop/src/components/modals/NativeClientCertsAdd.vue')['default']
+    ModalsNativeClientCertificates: (typeof import("./../../hoppscotch-selfhost-desktop/src/components/modals/NativeClientCertificates.vue"))["default"]
-    ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default']
+    ModalsNativeClientCertsAdd: (typeof import("./../../hoppscotch-selfhost-desktop/src/components/modals/NativeClientCertsAdd.vue"))["default"]
-    RealtimeCommunication: typeof import('./components/realtime/Communication.vue')['default']
+    ProfileUserDelete: (typeof import("./components/profile/UserDelete.vue"))["default"]
-    RealtimeConnectionConfig: typeof import('./components/realtime/ConnectionConfig.vue')['default']
+    RealtimeCommunication: (typeof import("./components/realtime/Communication.vue"))["default"]
-    RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
+    RealtimeConnectionConfig: (typeof import("./components/realtime/ConnectionConfig.vue"))["default"]
-    RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
+    RealtimeLog: (typeof import("./components/realtime/Log.vue"))["default"]
-    RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
+    RealtimeLogEntry: (typeof import("./components/realtime/LogEntry.vue"))["default"]
-    SettingsExtension: typeof import('./components/settings/Extension.vue')['default']
+    RealtimeSubscription: (typeof import("./components/realtime/Subscription.vue"))["default"]
-    SettingsNativeInterceptor: typeof import('./../../hoppscotch-selfhost-desktop/src/components/settings/NativeInterceptor.vue')['default']
+    SettingsExtension: (typeof import("./components/settings/Extension.vue"))["default"]
-    SettingsProxy: typeof import('./components/settings/Proxy.vue')['default']
+    SettingsNativeInterceptor: (typeof import("./../../hoppscotch-selfhost-desktop/src/components/settings/NativeInterceptor.vue"))["default"]
-    Share: typeof import('./components/share/index.vue')['default']
+    SettingsProxy: (typeof import("./components/settings/Proxy.vue"))["default"]
-    ShareCreateModal: typeof import('./components/share/CreateModal.vue')['default']
+    Share: (typeof import("./components/share/index.vue"))["default"]
-    ShareCustomizeModal: typeof import('./components/share/CustomizeModal.vue')['default']
+    ShareCreateModal: (typeof import("./components/share/CreateModal.vue"))["default"]
-    ShareModal: typeof import('./components/share/Modal.vue')['default']
+    ShareCustomizeModal: (typeof import("./components/share/CustomizeModal.vue"))["default"]
-    ShareRequest: typeof import('./components/share/Request.vue')['default']
+    ShareModal: (typeof import("./components/share/Modal.vue"))["default"]
-    ShareTemplatesButton: typeof import('./components/share/templates/Button.vue')['default']
+    ShareRequest: (typeof import("./components/share/Request.vue"))["default"]
-    ShareTemplatesEmbeds: typeof import('./components/share/templates/Embeds.vue')['default']
+    ShareTemplatesButton: (typeof import("./components/share/templates/Button.vue"))["default"]
-    ShareTemplatesLink: typeof import('./components/share/templates/Link.vue')['default']
+    ShareTemplatesEmbeds: (typeof import("./components/share/templates/Embeds.vue"))["default"]
-    SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
+    ShareTemplatesLink: (typeof import("./components/share/templates/Link.vue"))["default"]
-    SmartChangeLanguage: typeof import('./components/smart/ChangeLanguage.vue')['default']
+    SmartAccentModePicker: (typeof import("./components/smart/AccentModePicker.vue"))["default"]
-    SmartColorModePicker: typeof import('./components/smart/ColorModePicker.vue')['default']
+    SmartChangeLanguage: (typeof import("./components/smart/ChangeLanguage.vue"))["default"]
-    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
+    SmartColorModePicker: (typeof import("./components/smart/ColorModePicker.vue"))["default"]
-    TabPrimary: typeof import('./components/tab/Primary.vue')['default']
+    SmartEnvInput: (typeof import("./components/smart/EnvInput.vue"))["default"]
-    TabSecondary: typeof import('./components/tab/Secondary.vue')['default']
+    TabPrimary: (typeof import("./components/tab/Primary.vue"))["default"]
-    Teams: typeof import('./components/teams/index.vue')['default']
+    TabSecondary: (typeof import("./components/tab/Secondary.vue"))["default"]
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    Teams: (typeof import("./components/teams/index.vue"))["default"]
-    TeamsEdit: typeof import('./components/teams/Edit.vue')['default']
+    TeamsAdd: (typeof import("./components/teams/Add.vue"))["default"]
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
+    TeamsEdit: (typeof import("./components/teams/Edit.vue"))["default"]
-    TeamsMemberStack: typeof import('./components/teams/MemberStack.vue')['default']
+    TeamsInvite: (typeof import("./components/teams/Invite.vue"))["default"]
-    TeamsModal: typeof import('./components/teams/Modal.vue')['default']
+    TeamsMemberStack: (typeof import("./components/teams/MemberStack.vue"))["default"]
-    TeamsTeam: typeof import('./components/teams/Team.vue')['default']
+    TeamsModal: (typeof import("./components/teams/Modal.vue"))["default"]
-    Tippy: typeof import('vue-tippy')['Tippy']
+    TeamsTeam: (typeof import("./components/teams/Team.vue"))["default"]
-    WorkspaceCurrent: typeof import('./components/workspace/Current.vue')['default']
+    Tippy: (typeof import("vue-tippy"))["Tippy"]
-    WorkspaceSelector: typeof import('./components/workspace/Selector.vue')['default']
+    WorkspaceCurrent: (typeof import("./components/workspace/Current.vue"))["default"]
+    WorkspaceSelector: (typeof import("./components/workspace/Selector.vue"))["default"]
   }
 }

packages/hoppscotch-common/src/components/app/ActionHandler.vue

@@ -2,6 +2,11 @@
   <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
   <AppShare :show="showShare" @hide-modal="showShare = false" />
   <FirebaseLogin v-if="showLogin" @hide-modal="showLogin = false" />
+  <HttpResponseInterface
+    v-if="isDrawerOpen"
+    :show="isDrawerOpen"
+    @close="isDrawerOpen = false"
+  />
 </template>
 
 <script setup lang="ts">
@@ -11,6 +16,7 @@ import { defineActionHandler } from "~/helpers/actions"
 const showShortcuts = ref(false)
 const showShare = ref(false)
 const showLogin = ref(false)
+const isDrawerOpen = ref(false)
 
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
@@ -23,4 +29,8 @@ defineActionHandler("modals.share.toggle", () => {
 defineActionHandler("modals.login.toggle", () => {
   showLogin.value = !showLogin.value
 })
+
+defineActionHandler("response.schema.toggle", () => {
+  isDrawerOpen.value = !isDrawerOpen.value
+})
 </script>

packages/hoppscotch-common/src/components/app/PaneLayout.vue

@@ -16,7 +16,7 @@
     >
       <Splitpanes
         class="smart-splitter"
-        :horizontal="COLUMN_LAYOUT"
+        :horizontal="COLUMN_LAYOUT || forceColumnLayout"
         @resize="setPaneEvent($event, 'horizontal')"
       >
         <Pane
@@ -79,6 +79,10 @@ const props = defineProps({
     default: null,
   },
   isEmbed: {
+    type: Boolean,
+    defaul: false,
+  },
+  forceColumnLayout: {
     type: Boolean,
     default: false,
   },

packages/hoppscotch-common/src/components/http/ResponseInterface.vue

@@ -0,0 +1,205 @@
+<template>
+  <HoppSmartSlideOver
+    :show="show"
+    :title="t('response.data_schema')"
+    @close="close()"
+  >
+    <template #content>
+      <div class="flex flex-col px-4 flex-1 overflow-y-auto">
+        <div class="flex flex-col">
+          <tippy
+            interactive
+            trigger="click"
+            theme="popover"
+            placement="bottom"
+            :on-shown="() => tippyActions.focus()"
+            class="mt-4"
+          >
+            <HoppSmartSelectWrapper>
+              <HoppButtonSecondary
+                :label="selectedInterface"
+                outline
+                class="flex-1 pr-8"
+              />
+            </HoppSmartSelectWrapper>
+            <template #content="{ hide }">
+              <div class="flex flex-col space-y-2">
+                <div class="sticky top-0 z-10 flex-shrink-0 overflow-x-auto">
+                  <input
+                    v-model="searchQuery"
+                    type="search"
+                    autocomplete="off"
+                    class="input flex w-full !bg-primaryContrast p-4 py-2"
+                    :placeholder="`${t('action.search')}`"
+                  />
+                </div>
+                <div
+                  ref="tippyActions"
+                  class="flex flex-col focus:outline-none"
+                  tabindex="0"
+                  @keyup.escape="hide()"
+                >
+                  <HoppSmartItem
+                    v-for="lang in filteredResponseInterfaces"
+                    :key="lang"
+                    :label="lang"
+                    :info-icon="
+                      lang === selectedInterface ? IconCheck : undefined
+                    "
+                    :active-info-icon="lang === selectedInterface"
+                    @click="
+                      () => {
+                        selectedInterface = lang
+                        hide()
+                      }
+                    "
+                  />
+                  <HoppSmartPlaceholder
+                    v-if="filteredResponseInterfaces.length === 0"
+                    :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
+                  >
+                    <template #icon>
+                      <icon-lucide-search class="svg-icons opacity-75" />
+                    </template>
+                  </HoppSmartPlaceholder>
+                </div>
+              </div>
+            </template>
+          </tippy>
+        </div>
+        <div
+          v-if="errorState"
+          class="my-4 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 font-mono text-red-400"
+        >
+          {{ t("error.something_went_wrong") }}
+        </div>
+        <div
+          v-else-if="selectedInterface"
+          class="my-4 rounded border border-dividerLight flex-1 overflow-hidden flex flex-col"
+        >
+          <div class="flex items-center justify-between pl-4">
+            <label class="truncate font-semibold text-secondaryLight">
+              {{ t("request.generated_code") }}
+            </label>
+            <div class="flex items-center">
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('state.linewrap')"
+                :class="{ '!text-accent': WRAP_LINES }"
+                :icon="IconWrapText"
+                @click.prevent="toggleNestedSetting('WRAP_LINES', 'codeGen')"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.download_file')"
+                :icon="downloadIcon"
+                @click="downloadResponse"
+              />
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.copy')"
+                :icon="copyIcon"
+                @click="copyResponse"
+              />
+            </div>
+          </div>
+          <div
+            class="h-full relative w-full flex flex-col flex-1 rounded-b border-t border-dividerLight"
+          >
+            <div ref="generatedCode" class="absolute inset-0"></div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </HoppSmartSlideOver>
+</template>
+
+<script setup lang="ts">
+import { useCodemirror } from "@composables/codemirror"
+import { useI18n } from "@composables/i18n"
+import { computed, reactive, ref } from "vue"
+import {
+  getResponseBodyText,
+  useCopyResponse,
+  useDownloadResponse,
+} from "~/composables/lens-actions"
+
+import { useService } from "dioc/vue"
+import { useNestedSetting } from "~/composables/settings"
+import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
+import { toggleNestedSetting } from "~/newstore/settings"
+import { RESTTabService } from "~/services/tab/rest"
+import IconCheck from "~icons/lucide/check"
+import IconWrapText from "~icons/lucide/wrap-text"
+import jsonToLanguage from "~/helpers/utils/json-to-language"
+import { watch } from "vue"
+
+const t = useI18n()
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "close"): void
+}>()
+
+const tabs = useService(RESTTabService)
+const selectedInterface = ref<(typeof interfaceLanguages)[number]>("TypeScript")
+const response = computed(() => {
+  const res = tabs.currentActiveTab.value.document.response
+  if (res?.type === "success" || res?.type === "fail") {
+    return getResponseBodyText(res.body)
+  }
+  return ""
+})
+const errorState = ref(false)
+
+const interfaceCode = ref("")
+
+const setInterfaceCode = async () => {
+  const res = await jsonToLanguage(selectedInterface.value, response.value)
+  interfaceCode.value = res.lines.join("\n")
+}
+
+watch(selectedInterface, setInterfaceCode)
+watch(response, setInterfaceCode, { immediate: true })
+
+const close = () => {
+  emit("close")
+}
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const generatedCode = ref<any | null>(null)
+const WRAP_LINES = useNestedSetting("WRAP_LINES", "codeGen")
+
+useCodemirror(
+  generatedCode,
+  interfaceCode,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/plain",
+      readOnly: true,
+      lineWrapping: WRAP_LINES,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
+
+const searchQuery = ref("")
+
+const filteredResponseInterfaces = computed(() => {
+  return interfaceLanguages.filter((lang) =>
+    lang.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
+
+const { copyIcon, copyResponse } = useCopyResponse(interfaceCode)
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "",
+  interfaceCode
+)
+</script>

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

@@ -53,7 +53,7 @@
         >
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="t('app.copy_interface_type')"
+            :title="t('action.more')"
             :icon="IconMore"
           />
           <template #content="{ hide }">
@@ -64,15 +64,14 @@
               @keyup.escape="hide()"
             >
               <HoppSmartItem
-                v-for="(language, index) in interfaceLanguages"
+                :label="t('response.generate_data_schema')"
-                :key="index"
+                :icon="IconNetwork"
-                :label="language"
+                @click="
-                :icon="
+                  () => {
-                  copiedInterfaceLanguage === language
+                    invokeAction('response.schema.toggle')
-                    ? copyInterfaceIcon
+                    hide()
-                    : IconCopy
+                  }
                 "
-                @click="runCopyInterface(language)"
               />
             </div>
           </template>
@@ -234,7 +233,7 @@ 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 IconNetwork from "~icons/lucide/network"
 import * as LJSON from "lossless-json"
 import * as O from "fp-ts/Option"
 import * as E from "fp-ts/Either"
@@ -254,13 +253,11 @@ import {
   useCopyResponse,
   useResponseBody,
   useDownloadResponse,
-  useCopyInterface,
 } from "@composables/lens-actions"
-import { defineActionHandler } from "~/helpers/actions"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
-import interfaceLanguages from "~/helpers/utils/interfaceLanguages"
 
 const t = useI18n()
 
@@ -272,13 +269,6 @@ 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" }
@@ -362,7 +352,6 @@ const filterResponseError = computed(() =>
 )
 
 const { copyIcon, copyResponse } = useCopyResponse(jsonBodyText)
-const { copyInterfaceIcon, copyInterface } = useCopyInterface(jsonBodyText)
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   "application/json",
   jsonBodyText

packages/hoppscotch-common/src/composables/lens-actions.ts

@@ -172,13 +172,17 @@ export function useResponseBody(response: HoppRESTResponse): {
       response.type === "extension_error"
     )
       return ""
-    if (typeof response.body === "string") return response.body
+    return getResponseBodyText(response.body)
-
-    const res = new TextDecoder("utf-8").decode(response.body)
-    // HACK: Temporary trailing null character issue from the extension fix
-    return res.replace(/\0+$/, "")
   })
   return {
     responseBodyText,
   }
 }
+
+export function getResponseBodyText(body: ArrayBuffer): string {
+  if (typeof body === "string") return body
+
+  const res = new TextDecoder("utf-8").decode(body)
+  // HACK: Temporary trailing null character issue from the extension fix
+  return res.replace(/\0+$/, "")
+}

packages/hoppscotch-common/src/helpers/actions.ts

@@ -61,6 +61,7 @@ export type HoppAction =
   | "settings.theme.dark" // Use dark theme
   | "settings.theme.black" // Use black theme
   | "response.preview.toggle" // Toggle response preview
+  | "response.schema.toggle" // Toggle response data schema
   | "response.file.download" // Download response as file
   | "response.copy" // Copy response to clipboard
   | "modals.login.toggle" // Login to Hoppscotch