refactor: move AI request naming style to settings (#4636)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>

packages/hoppscotch-common/locales/en.json

@@ -793,6 +793,11 @@
     "short_codes_description": "Short codes which were created by you.",
     "sidebar_on_left": "Sidebar on left",
     "ai_experiments": "AI Experiments",
+    "ai_request_naming_style": "Request Naming Style",
+    "ai_request_naming_style_descriptive_with_spaces": "Descriptive With Spaces",
+    "ai_request_naming_style_camel_case": "Camel Case ( camelCase )",
+    "ai_request_naming_style_snake_case": "Snake Case ( snake_case )",
+    "ai_request_naming_style_pascal_case": "Pascal Case ( PascalCase )",
     "sync": "Synchronise",
     "sync_collections": "Collections",
     "sync_description": "These settings are synced to cloud.",

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

@@ -49,6 +49,8 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
       return
     }
 
+    const namingStyle = useSetting("AI_REQUEST_NAMING_STYLE").value
+
     isGenerateRequestNamePending.value = true
 
     platform.analytics?.logEvent({
@@ -57,7 +59,8 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
     })
 
     const result = await generateRequestNameForPlatform(
-      JSON.stringify(requestContext)
+      JSON.stringify(requestContext),
+      namingStyle
     )
 
     if (result && E.isLeft(result)) {

packages/hoppscotch-common/src/newstore/settings.ts

@@ -73,6 +73,11 @@ export type SettingsDef = {
 
   HAS_OPENED_SPOTLIGHT: boolean
   ENABLE_AI_EXPERIMENTS: boolean
+  AI_REQUEST_NAMING_STYLE:
+    | "DESCRIPTIVE_WITH_SPACES"
+    | "camelCase"
+    | "snake_case"
+    | "PascalCase"
 }
 
 export const getDefaultSettings = (): SettingsDef => ({
@@ -123,6 +128,7 @@ export const getDefaultSettings = (): SettingsDef => ({
 
   HAS_OPENED_SPOTLIGHT: false,
   ENABLE_AI_EXPERIMENTS: true,
+  AI_REQUEST_NAMING_STYLE: "DESCRIPTIVE_WITH_SPACES",
 })
 
 type ApplySettingPayload = {

packages/hoppscotch-common/src/pages/settings.vue

@@ -79,6 +79,64 @@
                   {{ t("settings.ai_experiments") }}
                 </HoppSmartToggle>
               </div>
+              <div
+                v-if="hasAIExperimentsSupport && ENABLE_AI_EXPERIMENTS"
+                class="flex items-center"
+              >
+                <div class="flex flex-col space-y-2 w-full">
+                  <label class="text-secondaryLight">{{
+                    t("settings.ai_request_naming_style")
+                  }}</label>
+                  <div class="flex">
+                    <tippy
+                      interactive
+                      trigger="click"
+                      theme="popover"
+                      :on-shown="() => namingStyleTippyActions?.focus()"
+                    >
+                      <HoppSmartSelectWrapper>
+                        <HoppButtonSecondary
+                          class="flex flex-1 !justify-start rounded-none pr-8"
+                          :label="activeNamingStyle?.label"
+                          outline
+                        />
+                      </HoppSmartSelectWrapper>
+                      <template #content="{ hide }">
+                        <div
+                          ref="namingStyleTippyActions"
+                          class="flex flex-col focus:outline-none"
+                          tabindex="0"
+                          @keyup.escape="hide()"
+                        >
+                          <HoppSmartLink
+                            v-for="style in supportedNamingStyles"
+                            :key="style"
+                            class="flex flex-1"
+                            @click="
+                              () => {
+                                AI_REQUEST_NAMING_STYLE = style.id
+                                hide()
+                              }
+                            "
+                          >
+                            <HoppSmartItem
+                              :label="style.label"
+                              :active-info-icon="
+                                AI_REQUEST_NAMING_STYLE === style.id
+                              "
+                              :info-icon="
+                                AI_REQUEST_NAMING_STYLE === style.id
+                                  ? IconDone
+                                  : null
+                              "
+                            />
+                          </HoppSmartLink>
+                        </div>
+                      </template>
+                    </tippy>
+                  </div>
+                </div>
+              </div>
             </div>
           </section>
         </div>
@@ -185,6 +243,7 @@ import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
 import { platform } from "~/platform"
+import IconDone from "~icons/lucide/check"
 
 const t = useI18n()
 const colorMode = useColorMode()
@@ -214,6 +273,32 @@ const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 const ENABLE_AI_EXPERIMENTS = useSetting("ENABLE_AI_EXPERIMENTS")
+const AI_REQUEST_NAMING_STYLE = useSetting("AI_REQUEST_NAMING_STYLE")
+
+const supportedNamingStyles = [
+  {
+    id: "DESCRIPTIVE_WITH_SPACES" as const,
+    label: t("settings.ai_request_naming_style_descriptive_with_spaces"),
+  },
+  {
+    id: "camelCase" as const,
+    label: t("settings.ai_request_naming_style_camel_case"),
+  },
+  {
+    id: "snake_case" as const,
+    label: t("settings.ai_request_naming_style_snake_case"),
+  },
+  {
+    id: "PascalCase" as const,
+    label: t("settings.ai_request_naming_style_pascal_case"),
+  },
+]
+
+const activeNamingStyle = computed(() =>
+  supportedNamingStyles.find(
+    (style) => style.id === AI_REQUEST_NAMING_STYLE.value
+  )
+)
 
 const hasPlatformTelemetry = Boolean(platform.platformFeatureFlags.hasTelemetry)
 
@@ -253,4 +338,6 @@ const getColorModeName = (colorMode: string) => {
       return "settings.system_mode"
   }
 }
+
+const namingStyleTippyActions = ref<any | null>(null)
 </script>

packages/hoppscotch-common/src/platform/experiments.ts

@@ -3,7 +3,10 @@ import * as E from "fp-ts/Either"
 export type ExperimentsPlatformDef = {
   aiExperiments?: {
     enableAIExperiments: boolean
-    generateRequestName?: (requestInfo: string) => Promise<
+    generateRequestName?: (
+      requestInfo: string,
+      namingStyle: string
+    ) => Promise<
       E.Either<
         string,
         {

packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts

@@ -75,6 +75,10 @@ const SettingsDefSchema = z.object({
 
   HAS_OPENED_SPOTLIGHT: z.optional(z.boolean()),
   ENABLE_AI_EXPERIMENTS: z.optional(z.boolean()),
+  AI_REQUEST_NAMING_STYLE: z
+    .string()
+    .optional()
+    .catch("DESCRIPTIVE_WITH_SPACES"),
 })
 
 const HoppRESTRequestSchema = entityReference(HoppRESTRequest)