chore: add ai renames at more places (#4244)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/collections/AddRequest.vue

@@ -6,13 +6,28 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
+      <div class="flex gap-1">
         <HoppSmartInput
           v-model="editingName"
+          class="flex-grow"
           placeholder=" "
           :label="t('action.label')"
           input-styles="floating-input"
           @submit="addRequest"
         />
+        <HoppButtonSecondary
+          v-if="canDoRequestNameGeneration"
+          v-tippy="{ theme: 'tooltip' }"
+          :icon="IconSparkle"
+          :disabled="isGenerateRequestNamePending"
+          class="rounded-md"
+          :class="{
+            'animate-pulse': isGenerateRequestNamePending,
+          }"
+          :title="t('ai_experiments.generate_request_name')"
+          @click="generateRequestName(props.requestContext)"
+        />
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -39,6 +54,9 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
+import { useRequestNameGeneration } from "~/composables/ai-experiments"
+import { HoppRESTRequest } from "@hoppscotch/data"
+import IconSparkle from "~icons/lucide/sparkles"
 
 const toast = useToast()
 const t = useI18n()
@@ -47,10 +65,12 @@ const props = withDefaults(
   defineProps<{
     show: boolean
     loadingState: boolean
+    requestContext: HoppRESTRequest | null
   }>(),
   {
     show: false,
     loadingState: false,
+    requestContext: null,
   }
 )
 
@@ -61,6 +81,12 @@ const emit = defineEmits<{
 
 const editingName = ref("")
 
+const {
+  generateRequestName,
+  isGenerateRequestNamePending,
+  canDoRequestNameGeneration,
+} = useRequestNameGeneration(editingName)
+
 const tabs = useService(RESTTabService)
 watch(
   () => props.show,

packages/hoppscotch-common/src/components/collections/EditRequest.vue

@@ -16,7 +16,7 @@
           @submit="editRequest"
         />
         <HoppButtonSecondary
-          v-if="showGenerateRequestNameButton"
+          v-if="canDoRequestNameGeneration"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconSparkle"
           :disabled="isGenerateRequestNamePending"
@@ -25,7 +25,7 @@
             'animate-pulse': isGenerateRequestNamePending,
           }"
           :title="t('ai_experiments.generate_request_name')"
-          @click="generateRequestName"
+          @click="generateRequestName(props.requestContext)"
         />
       </div>
     </template>
@@ -53,12 +53,7 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
-import * as E from "fp-ts/Either"
+import { useRequestNameGeneration } from "~/composables/ai-experiments"
-import { computed, ref } from "vue"
-
-import { useSetting } from "~/composables/settings"
-import { useReadonlyStream } from "~/composables/stream"
-import { platform } from "~/platform"
 import IconSparkle from "~icons/lucide/sparkles"
 
 const toast = useToast()
@@ -84,58 +79,13 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: string): void
 }>()
 
-const ENABLE_AI_EXPERIMENTS = useSetting("ENABLE_AI_EXPERIMENTS")
-
 const editingName = useVModel(props, "modelValue")
 
-const currentUser = useReadonlyStream(
+const {
-  platform.auth.getCurrentUserStream(),
+  generateRequestName,
-  platform.auth.getCurrentUser()
+  canDoRequestNameGeneration,
-)
+  isGenerateRequestNamePending,
-
+} = useRequestNameGeneration(editingName)
-const isGenerateRequestNamePending = ref(false)
-
-const showGenerateRequestNameButton = computed(() => {
-  // Request generation applies only to the authenticated state
-  if (!currentUser.value) {
-    return false
-  }
-
-  return ENABLE_AI_EXPERIMENTS.value && !!platform.experiments?.aiExperiments
-})
-
-const generateRequestName = async () => {
-  const generateRequestNameForPlatform =
-    platform.experiments?.aiExperiments?.generateRequestName
-
-  if (!props.requestContext || !generateRequestNameForPlatform) {
-    toast.error(t("request.generate_name_error"))
-    return
-  }
-
-  isGenerateRequestNamePending.value = true
-
-  platform.analytics?.logEvent({
-    type: "EXPERIMENTS_GENERATE_REQUEST_NAME_WITH_AI",
-    platform: "rest",
-  })
-
-  const result = await generateRequestNameForPlatform(
-    JSON.stringify(props.requestContext)
-  )
-
-  if (result && E.isLeft(result)) {
-    toast.error(t("request.generate_name_error"))
-
-    isGenerateRequestNamePending.value = false
-
-    return
-  }
-
-  editingName.value = result.right
-
-  isGenerateRequestNamePending.value = false
-}
 
 const editRequest = () => {
   if (editingName.value.trim() === "") {

packages/hoppscotch-common/src/components/collections/SaveRequest.vue

@@ -8,14 +8,29 @@
   >
     <template #body>
       <div class="flex flex-col">
+        <div class="flex gap-1">
           <HoppSmartInput
             v-model="requestName"
+            class="flex-grow"
             styles="relative flex"
             placeholder=" "
             :label="t('request.name')"
             input-styles="floating-input"
             @submit="saveRequestAs"
           />
+          <HoppButtonSecondary
+            v-if="canDoRequestNameGeneration"
+            v-tippy="{ theme: 'tooltip' }"
+            :icon="IconSparkle"
+            :disabled="isGenerateRequestNamePending"
+            class="rounded-md"
+            :class="{
+              'animate-pulse': isGenerateRequestNamePending,
+            }"
+            :title="t('ai_experiments.generate_request_name')"
+            @click="generateRequestName(requestContext)"
+          />
+        </div>
 
         <label class="p-4">
           {{ t("collection.select_location") }}
@@ -69,6 +84,7 @@ import * as TE from "fp-ts/TaskEither"
 import { pipe } from "fp-ts/function"
 import { cloneDeep } from "lodash-es"
 import { computed, nextTick, reactive, ref, watch } from "vue"
+import { useRequestNameGeneration } from "~/composables/ai-experiments"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import {
   createRequestInCollection,
@@ -86,6 +102,7 @@ import { platform } from "~/platform"
 import { GQLTabService } from "~/services/tab/graphql"
 import { RESTTabService } from "~/services/tab/rest"
 import { TeamWorkspace } from "~/services/workspace.service"
+import IconSparkle from "~icons/lucide/sparkles"
 
 const t = useI18n()
 const toast = useToast()
@@ -144,8 +161,26 @@ const reqName = computed(() => {
   return gqlRequestName.value
 })
 
+const requestContext = computed(() => {
+  if (props.request) {
+    return props.request
+  }
+
+  if (props.mode === "rest") {
+    return RESTTabs.currentActiveTab.value.document.request
+  }
+
+  return GQLTabs.currentActiveTab.value.document.request
+})
+
 const requestName = ref(reqName.value)
 
+const {
+  canDoRequestNameGeneration,
+  generateRequestName,
+  isGenerateRequestNamePending,
+} = useRequestNameGeneration(requestName)
+
 watch(
   () => [RESTTabs.currentActiveTab.value, GQLTabs.currentActiveTab.value],
   () => {

packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue

@@ -6,13 +6,28 @@
     @close="emit('hide-modal')"
   >
     <template #body>
+      <div class="flex gap-1 items-center">
         <HoppSmartInput
           v-model="editingName"
+          class="flex-grow"
           placeholder=" "
           :label="t('action.label')"
           input-styles="floating-input"
           @submit="addRequest"
         />
+        <HoppButtonSecondary
+          v-if="canDoRequestNameGeneration"
+          v-tippy="{ theme: 'tooltip' }"
+          :icon="IconSparkle"
+          :disabled="isGenerateRequestNamePending"
+          class="rounded-md"
+          :class="{
+            'animate-pulse': isGenerateRequestNamePending,
+          }"
+          :title="t('ai_experiments.generate_request_name')"
+          @click="generateRequestName(props.requestContext)"
+        />
+      </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
@@ -33,11 +48,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import { HoppRESTRequest } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
+import { ref, watch } from "vue"
+
+import { useRequestNameGeneration } from "~/composables/ai-experiments"
 import { GQLTabService } from "~/services/tab/graphql"
+import IconSparkle from "~icons/lucide/sparkles"
 
 const toast = useToast()
 const t = useI18n()
@@ -47,6 +66,7 @@ const tabs = useService(GQLTabService)
 const props = defineProps<{
   show: boolean
   folderPath?: string
+  requestContext: HoppRESTRequest | null
 }>()
 
 const emit = defineEmits<{
@@ -62,6 +82,12 @@ const emit = defineEmits<{
 
 const editingName = ref("")
 
+const {
+  generateRequestName,
+  isGenerateRequestNamePending,
+  canDoRequestNameGeneration,
+} = useRequestNameGeneration(editingName)
+
 watch(
   () => props.show,
   (show) => {

packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue

@@ -8,7 +8,7 @@
     <template #body>
       <div class="flex gap-1">
         <HoppSmartInput
-          v-model="requestUpdateData.name"
+          v-model="editingName"
           class="flex-grow"
           placeholder=" "
           :label="t('action.label')"
@@ -16,7 +16,7 @@
           @submit="saveRequest"
         />
         <HoppButtonSecondary
-          v-if="showGenerateRequestNameButton"
+          v-if="canDoRequestNameGeneration"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconSparkle"
           :disabled="isGenerateRequestNamePending"
@@ -51,13 +51,9 @@
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppGQLRequest } from "@hoppscotch/data"
-import * as E from "fp-ts/Either"
+import { ref, watch } from "vue"
-import { computed, ref, watch } from "vue"
+import { useRequestNameGeneration } from "~/composables/ai-experiments"
-
-import { useSetting } from "~/composables/settings"
-import { useReadonlyStream } from "~/composables/stream"
 import { editGraphqlRequest } from "~/newstore/collections"
-import { platform } from "~/platform"
 import IconSparkle from "~icons/lucide/sparkles"
 
 const t = useI18n()
@@ -76,75 +72,30 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const requestUpdateData = ref({ name: null as string | null })
+const editingName = ref("")
 
 watch(
   () => props.editingRequestName,
   (val) => {
-    requestUpdateData.value.name = val
+    editingName.value = val
   }
 )
 
-const ENABLE_AI_EXPERIMENTS = useSetting("ENABLE_AI_EXPERIMENTS")
+const {
-
+  canDoRequestNameGeneration,
-const currentUser = useReadonlyStream(
+  generateRequestName,
-  platform.auth.getCurrentUserStream(),
+  isGenerateRequestNamePending,
-  platform.auth.getCurrentUser()
+} = useRequestNameGeneration(editingName)
-)
-
-const isGenerateRequestNamePending = ref(false)
-
-const showGenerateRequestNameButton = computed(() => {
-  // Request generation applies only to the authenticated state
-  if (!currentUser.value) {
-    return false
-  }
-
-  return ENABLE_AI_EXPERIMENTS.value && !!platform.experiments?.aiExperiments
-})
-
-const generateRequestName = async () => {
-  const generateRequestNameForPlatform =
-    platform.experiments?.aiExperiments?.generateRequestName
-
-  if (!props.requestContext || !generateRequestNameForPlatform) {
-    toast.error(t("request.generate_name_error"))
-    return
-  }
-
-  isGenerateRequestNamePending.value = true
-
-  platform.analytics?.logEvent({
-    type: "EXPERIMENTS_GENERATE_REQUEST_NAME_WITH_AI",
-    platform: "gql",
-  })
-
-  const result = await generateRequestNameForPlatform(
-    JSON.stringify(props.requestContext)
-  )
-
-  if (result && E.isLeft(result)) {
-    toast.error(t("request.generate_name_error"))
-
-    isGenerateRequestNamePending.value = false
-
-    return
-  }
-
-  requestUpdateData.value.name = result.right
-
-  isGenerateRequestNamePending.value = false
-}
 
 const saveRequest = () => {
-  if (!requestUpdateData.value.name) {
+  if (!editingName.value) {
     toast.error(`${t("collection.invalid_name")}`)
     return
   }
 
   const requestUpdated = {
     ...(props.request as any),
-    name: requestUpdateData.value.name || (props.request as any).name,
+    name: editingName.value || (props.request as any).name,
   }
 
   editGraphqlRequest(props.folderPath, props.requestIndex, requestUpdated)
@@ -153,7 +104,7 @@ const saveRequest = () => {
 }
 
 const hideModal = () => {
-  requestUpdateData.value = { name: null }
+  editingName.value = ""
   emit("hide-modal")
 }
 </script>

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -116,6 +116,7 @@
     <CollectionsGraphqlAddRequest
       :show="showModalAddRequest"
       :folder-path="editingFolderPath"
+      :request-context="requestContext"
       @add-request="onAddRequest($event)"
       @hide-modal="displayModalAddRequest(false)"
     />
@@ -330,6 +331,10 @@ const filteredCollections = computed(() => {
   return filteredCollections
 })
 
+const requestContext = computed(() => {
+  return tabs.currentActiveTab.value.document.request
+})
+
 const displayModalAdd = (shouldDisplay: boolean) => {
   showModalAdd.value = shouldDisplay
 }

packages/hoppscotch-common/src/components/collections/index.vue

@@ -116,6 +116,7 @@
     <CollectionsAddRequest
       :show="showModalAddRequest"
       :loading-state="modalLoadingState"
+      :request-context="requestContext"
       @add-request="onAddRequest"
       @hide-modal="displayModalAddRequest(false)"
     />
@@ -790,6 +791,10 @@ const addRequest = (payload: {
   displayModalAddRequest(true)
 }
 
+const requestContext = computed(() => {
+  return tabs.currentActiveTab.value.document.request
+})
+
 const onAddRequest = (requestName: string) => {
   const newRequest = {
     ...cloneDeep(tabs.currentActiveTab.value.document.request),

packages/hoppscotch-common/src/composables/ai-experiments.ts

@@ -0,0 +1,78 @@
+import { computed, Ref, ref } from "vue"
+import { useReadonlyStream } from "./stream"
+import { platform } from "~/platform"
+import { useSetting } from "./settings"
+import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
+import { useToast } from "@composables/toast"
+import { useI18n } from "@composables/i18n"
+import * as E from "fp-ts/Either"
+import { useRoute } from "vue-router"
+
+export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
+  const toast = useToast()
+  const t = useI18n()
+  const route = useRoute()
+
+  const targetPage = computed(() => {
+    return route.fullPath.includes("/graphql") ? "gql" : "rest"
+  })
+
+  const isGenerateRequestNamePending = ref(false)
+
+  const generateRequestNameForPlatform =
+    platform.experiments?.aiExperiments?.generateRequestName
+
+  const currentUser = useReadonlyStream(
+    platform.auth.getCurrentUserStream(),
+    platform.auth.getCurrentUser()
+  )
+
+  const ENABLE_AI_EXPERIMENTS = useSetting("ENABLE_AI_EXPERIMENTS")
+
+  const canDoRequestNameGeneration = computed(() => {
+    // Request generation applies only to the authenticated state
+    if (!currentUser.value) {
+      return false
+    }
+
+    return ENABLE_AI_EXPERIMENTS.value && !!platform.experiments?.aiExperiments
+  })
+
+  const generateRequestName = async (
+    requestContext: HoppRESTRequest | HoppGQLRequest | null
+  ) => {
+    if (!requestContext || !generateRequestNameForPlatform) {
+      toast.error(t("request.generate_name_error"))
+      return
+    }
+
+    isGenerateRequestNamePending.value = true
+
+    platform.analytics?.logEvent({
+      type: "EXPERIMENTS_GENERATE_REQUEST_NAME_WITH_AI",
+      platform: targetPage.value,
+    })
+
+    const result = await generateRequestNameForPlatform(
+      JSON.stringify(requestContext)
+    )
+
+    if (result && E.isLeft(result)) {
+      toast.error(t("request.generate_name_error"))
+
+      isGenerateRequestNamePending.value = false
+
+      return
+    }
+
+    targetNameRef.value = result.right
+
+    isGenerateRequestNamePending.value = false
+  }
+
+  return {
+    generateRequestName,
+    isGenerateRequestNamePending,
+    canDoRequestNameGeneration,
+  }
+}

packages/hoppscotch-common/src/helpers/import-export/import/insomnia.ts

@@ -126,6 +126,7 @@ const getHoppReqAuth = (req: InsomniaRequestResource): HoppRESTAuth => {
         isPKCE: false,
         tokenEndpoint: replaceVarTemplating(auth.accessTokenUrl ?? ""),
       },
+      addTo: "HEADERS",
     }
   else if (auth.type === "bearer")
     return {