btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

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

Browse Source 
Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
This commit is contained in:
Akash K
2024-08-07 21:43:32 +05:30
committed by GitHub
parent 1fdb0f2d04
commit 31b691bb37
9 changed files with 221 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/hoppscotch-common/src/components/collections/AddRequest.vue
View File

@@ -6,13 +6,28 @@
@close="$emit('hide-modal')"
>
<template #body>
<HoppSmartInput
v-model="editingName"
placeholder=" "
:label="t('action.label')"
input-styles="floating-input"
@submit="addRequest"
/>
<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,

66
packages/hoppscotch-common/src/components/collections/EditRequest.vue
View File

@@ -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 { computed, ref } from "vue"
import { useSetting } from "~/composables/settings"
import { useReadonlyStream } from "~/composables/stream"
import { platform } from "~/platform"
import { useRequestNameGeneration } from "~/composables/ai-experiments"
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(
platform.auth.getCurrentUserStream(),
platform.auth.getCurrentUser()
)
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 {
generateRequestName,
canDoRequestNameGeneration,
isGenerateRequestNamePending,
} = useRequestNameGeneration(editingName)
const editRequest = () => {
if (editingName.value.trim() === "") {

51
packages/hoppscotch-common/src/components/collections/SaveRequest.vue
View File

@@ -8,14 +8,29 @@
>
<template #body>
<div class="flex flex-col">
<HoppSmartInput
v-model="requestName"
styles="relative flex"
placeholder=" "
:label="t('request.name')"
input-styles="floating-input"
@submit="saveRequestAs"
/>
<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],
() => {

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

@@ -6,13 +6,28 @@
@close="emit('hide-modal')"
>
<template #body>
<HoppSmartInput
v-model="editingName"
placeholder=" "
:label="t('action.label')"
input-styles="floating-input"
@submit="addRequest"
/>
<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) => {

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

@@ -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 { computed, ref, watch } from "vue"
import { useSetting } from "~/composables/settings"
import { useReadonlyStream } from "~/composables/stream"
import { ref, watch } from "vue"
import { useRequestNameGeneration } from "~/composables/ai-experiments"
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 currentUser = useReadonlyStream(
platform.auth.getCurrentUserStream(),
platform.auth.getCurrentUser()
)
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 {
canDoRequestNameGeneration,
generateRequestName,
isGenerateRequestNamePending,
} = useRequestNameGeneration(editingName)
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>

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

@@ -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
}

5
packages/hoppscotch-common/src/components/collections/index.vue
View File

@@ -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),

78
packages/hoppscotch-common/src/composables/ai-experiments.ts Normal file
View File

@@ -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,
}
}

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

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