From 0b5a424b69209aeb21ce4588b6af3bc5f64821bc Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Mon, 30 Sep 2024 22:21:14 +0530
Subject: [PATCH] feat: modify body with ai & feedback on ai requests
 `hoppscotch-common` bindings (#4386)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
---
 packages/hoppscotch-common/locales/en.json    |  10 +-
 packages/hoppscotch-common/package.json       |   1 +
 .../components/aiexperiments/MergeView.vue    |  82 ++++++++++
 .../aiexperiments/ModifyBodyModal.vue         | 140 ++++++++++++++++++
 .../src/components/collections/AddRequest.vue |  92 ++++++++++--
 .../components/collections/EditRequest.vue    |  91 ++++++++++--
 .../components/collections/SaveRequest.vue    |  90 +++++++++--
 .../collections/graphql/AddRequest.vue        |  88 +++++++++--
 .../collections/graphql/EditRequest.vue       |  88 +++++++++--
 .../src/components/http/RawBody.vue           |  24 +++
 .../src/composables/ai-experiments.ts         | 122 ++++++++++++++-
 .../src/platform/experiments.ts               |  28 +++-
 pnpm-lock.yaml                                |  14 ++
 13 files changed, 791 insertions(+), 79 deletions(-)
 create mode 100644 packages/hoppscotch-common/src/components/aiexperiments/MergeView.vue
 create mode 100644 packages/hoppscotch-common/src/components/aiexperiments/ModifyBodyModal.vue

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index b1e96397a..875ff64d5 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -1138,6 +1138,14 @@
   },
   "ai_experiments": {
     "generate_request_name": "Generate Request Name Using AI",
-    "generate_or_modify_request_body": "Generate or Modify Request Body"
+    "generate_or_modify_request_body": "Generate or Modify Request Body",
+    "modify_with_ai": "Modify with AI",
+    "generate_or_modify_request_body_input_placeholder": "Enter your prompt to modify request body",
+    "accept_change": "Accept Change",
+    "feedback_success": "Feedback submitted successfully",
+    "feedback_failure": "Failed to submit feedback",
+    "feedback_thank_you": "Thank you for your feedback!",
+    "feedback_cta_text_long": "Rate the generation, helps us to improve",
+    "feedback_cta_request_name": "Did you like name generated?"
   }
 }
diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json
index 66302da93..62ebd7590 100644
--- a/packages/hoppscotch-common/package.json
+++ b/packages/hoppscotch-common/package.json
@@ -30,6 +30,7 @@
     "@codemirror/language": "6.10.1",
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/lint": "6.5.0",
+    "@codemirror/merge": "6.7.0",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
     "@codemirror/view": "6.25.1",
diff --git a/packages/hoppscotch-common/src/components/aiexperiments/MergeView.vue b/packages/hoppscotch-common/src/components/aiexperiments/MergeView.vue
new file mode 100644
index 000000000..05efd5d26
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/aiexperiments/MergeView.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { jsonLanguage } from "@codemirror/lang-json"
+import { MergeView } from "@codemirror/merge"
+import { onUnmounted, ref, watch } from "vue"
+import { basicSetup, baseTheme } from "@helpers/editor/themes/baseTheme"
+import { EditorState } from "@codemirror/state"
+
+type MergeViewContent = {
+  content: string
+  langMime: string
+}
+
+const props = defineProps<{
+  contentLeft: MergeViewContent
+  contentRight: MergeViewContent
+}>()
+
+const diffEditor = ref<Element | null>(null)
+let mergeView: MergeView | null = null
+
+watch(
+  () => props.contentRight,
+  () => {
+    if (!mergeView) {
+      return
+    }
+
+    if (!props.contentRight.content) {
+      return
+    }
+
+    mergeView.b.dispatch({
+      changes: {
+        from: 0,
+        to: mergeView.b.state.doc.length,
+        insert: props.contentRight.content,
+      },
+    })
+  }
+)
+
+watch(
+  diffEditor,
+  () => {
+    if (!diffEditor.value) {
+      return
+    }
+
+    mergeView = new MergeView({
+      a: {
+        doc: props.contentLeft.content,
+        extensions: [
+          jsonLanguage,
+          basicSetup,
+          baseTheme,
+          EditorState.readOnly.of(true),
+        ],
+      },
+      b: {
+        doc: props.contentRight.content,
+        extensions: [jsonLanguage, baseTheme, basicSetup],
+      },
+      // @ts-expect-error attribute mismatch
+      parent: diffEditor.value,
+      highlightChanges: false,
+    })
+  },
+  {
+    immediate: true,
+  }
+)
+
+onUnmounted(() => {
+  if (mergeView) {
+    mergeView.destroy()
+  }
+})
+</script>
+
+<template>
+  <div ref="diffEditor"></div>
+</template>
diff --git a/packages/hoppscotch-common/src/components/aiexperiments/ModifyBodyModal.vue b/packages/hoppscotch-common/src/components/aiexperiments/ModifyBodyModal.vue
new file mode 100644
index 000000000..66957de27
--- /dev/null
+++ b/packages/hoppscotch-common/src/components/aiexperiments/ModifyBodyModal.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import IconArrowRight from "~icons/lucide/arrow-right"
+import IconThumbsUp from "~icons/lucide/thumbs-up"
+import IconThumbsDown from "~icons/lucide/thumbs-down"
+import {
+  useModifyRequestBody,
+  useSubmitFeedback,
+} from "~/composables/ai-experiments"
+import { ref } from "vue"
+import { useI18n } from "~/composables/i18n"
+
+const t = useI18n()
+
+const props = defineProps<{
+  currentBody: string
+}>()
+
+const emit = defineEmits<{
+  (e: "closeModal"): void
+  (e: "updateBody", body: string): void
+}>()
+
+const generatedBodyContent = ref("")
+
+const userPrompt = ref("")
+
+const { modifyRequestBody, isModifyRequestBodyPending, lastTraceID } =
+  useModifyRequestBody(props.currentBody, userPrompt, generatedBodyContent)
+
+const submittedFeedback = ref(false)
+
+const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
+</script>
+
+<template>
+  <HoppSmartModal styles="sm:max-w-3xl" full-width>
+    <template #body>
+      <div class="flex flex-col border-b border-divider transition relative">
+        <div class="flex items-center pt-3 pb-3 sticky">
+          <input
+            id="command"
+            v-model="userPrompt"
+            v-focus
+            type="text"
+            autocomplete="off"
+            name="command"
+            :placeholder="`${t(
+              'ai_experiments.generate_or_modify_request_body_input_placeholder'
+            )}`"
+            class="flex flex-1 bg-transparent px-6 text-base text-secondaryDark"
+          />
+
+          <HoppButtonSecondary
+            :icon="IconArrowRight"
+            class="mr-6 rounded-md"
+            outline
+            filled
+            :loading="isModifyRequestBodyPending"
+            :disabled="!userPrompt || isModifyRequestBodyPending"
+            @click="modifyRequestBody"
+          />
+        </div>
+
+        <div>
+          <AiexperimentsMergeView
+            :content-left="{
+              content: currentBody ?? '',
+              langMime: 'application/json',
+            }"
+            :content-right="{
+              content: generatedBodyContent,
+              langMime: 'application/json',
+            }"
+          ></AiexperimentsMergeView>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex gap-1 px-6 py-3 justify-between items-center w-full">
+        <div
+          v-if="lastTraceID && !submittedFeedback"
+          class="flex items-center gap-2"
+        >
+          <p>{{ t("ai_experiments.feedback_cta_text_long") }}</p>
+          <template v-if="!isSubmitFeedbackPending">
+            <HoppButtonSecondary
+              :icon="IconThumbsUp"
+              outline
+              @click="
+                async () => {
+                  if (lastTraceID) {
+                    await submitFeedback('positive', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+
+            <HoppButtonSecondary
+              :icon="IconThumbsDown"
+              outline
+              @click="submitFeedback('negative', lastTraceID)"
+            />
+          </template>
+
+          <HoppSmartSpinner v-else />
+        </div>
+
+        <div v-if="submittedFeedback">
+          <p>{{ t("ai_experiments.feedback_thank_you") }}</p>
+        </div>
+
+        <div class="ml-auto space-x-2">
+          <HoppButtonSecondary
+            :label="t('action.cancel')"
+            outline
+            @click="
+              () => {
+                emit('closeModal')
+              }
+            "
+          />
+          <HoppButtonSecondary
+            :label="t('ai_experiments.accept_change')"
+            outline
+            filled
+            :disabled="isModifyRequestBodyPending || !generatedBodyContent"
+            @click="
+              () => {
+                emit('updateBody', generatedBodyContent)
+                emit('closeModal')
+              }
+            "
+          />
+        </div>
+      </div>
+    </template>
+  </HoppSmartModal>
+</template>
diff --git a/packages/hoppscotch-common/src/components/collections/AddRequest.vue b/packages/hoppscotch-common/src/components/collections/AddRequest.vue
index 8633cf823..011c67dfb 100644
--- a/packages/hoppscotch-common/src/components/collections/AddRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/AddRequest.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="t('request.new')"
-    @close="$emit('hide-modal')"
+    @close="hideModal"
   >
     <template #body>
       <div class="flex gap-1">
@@ -30,20 +30,61 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex space-x-2">
-        <HoppButtonPrimary
-          :label="t('action.save')"
-          :loading="loadingState"
-          outline
-          @click="addRequest"
-        />
-        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          outline
-          filled
-          @click="hideModal"
-        />
-      </span>
+      <div class="flex justify-between items-center w-full">
+        <div class="flex space-x-2">
+          <HoppButtonPrimary
+            :label="t('action.save')"
+            :loading="loadingState"
+            outline
+            @click="addRequest"
+          />
+          <HoppButtonSecondary
+            :label="t('action.cancel')"
+            outline
+            filled
+            @click="hideModal"
+          />
+        </div>
+
+        <div
+          v-if="lastTraceID && !submittedFeedback"
+          class="flex items-center gap-2"
+        >
+          <p>{{ t("ai_experiments.feedback_cta_request_name") }}</p>
+          <template v-if="!isSubmitFeedbackPending">
+            <HoppButtonSecondary
+              :icon="IconThumbsUp"
+              outline
+              @click="
+                async () => {
+                  if (lastTraceID) {
+                    await submitFeedback('positive', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+            <HoppButtonSecondary
+              :icon="IconThumbsDown"
+              outline
+              @click="
+                () => {
+                  if (lastTraceID) {
+                    submitFeedback('negative', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+          </template>
+          <template v-else>
+            <HoppSmartSpinner />
+          </template>
+        </div>
+        <div v-if="submittedFeedback">
+          <p>{{ t("ai_experiments.feedback_thank_you") }}</p>
+        </div>
+      </div>
     </template>
   </HoppSmartModal>
 </template>
@@ -54,9 +95,14 @@ 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 {
+  useRequestNameGeneration,
+  useSubmitFeedback,
+} from "~/composables/ai-experiments"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import IconSparkle from "~icons/lucide/sparkles"
+import IconThumbsUp from "~icons/lucide/thumbs-up"
+import IconThumbsDown from "~icons/lucide/thumbs-down"
 
 const toast = useToast()
 const t = useI18n()
@@ -85,8 +131,22 @@ const {
   generateRequestName,
   isGenerateRequestNamePending,
   canDoRequestNameGeneration,
+  lastTraceID,
 } = useRequestNameGeneration(editingName)
 
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      submittedFeedback.value = false
+      lastTraceID.value = null
+    }
+  }
+)
+
+const submittedFeedback = ref(false)
+const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
+
 const tabs = useService(RESTTabService)
 watch(
   () => props.show,
diff --git a/packages/hoppscotch-common/src/components/collections/EditRequest.vue b/packages/hoppscotch-common/src/components/collections/EditRequest.vue
index cfcd72c70..be3901e6d 100644
--- a/packages/hoppscotch-common/src/components/collections/EditRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/EditRequest.vue
@@ -30,20 +30,61 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex space-x-2">
-        <HoppButtonPrimary
-          :label="t('action.save')"
-          :loading="loadingState"
-          outline
-          @click="editRequest"
-        />
-        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          outline
-          filled
-          @click="hideModal"
-        />
-      </span>
+      <div class="flex justify-between items-center w-full">
+        <div class="flex space-x-2">
+          <HoppButtonPrimary
+            :label="t('action.save')"
+            :loading="loadingState"
+            outline
+            @click="editRequest"
+          />
+          <HoppButtonSecondary
+            :label="t('action.cancel')"
+            outline
+            filled
+            @click="hideModal"
+          />
+        </div>
+
+        <div
+          v-if="lastTraceID && !submittedFeedback"
+          class="flex items-center gap-2"
+        >
+          <p>{{ t("ai_experiments.feedback_cta_request_name") }}</p>
+          <template v-if="!isSubmitFeedbackPending">
+            <HoppButtonSecondary
+              :icon="IconThumbsUp"
+              outline
+              @click="
+                async () => {
+                  if (lastTraceID) {
+                    await submitFeedback('positive', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+            <HoppButtonSecondary
+              :icon="IconThumbsDown"
+              outline
+              @click="
+                () => {
+                  if (lastTraceID) {
+                    submitFeedback('negative', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+          </template>
+          <template v-else>
+            <HoppSmartSpinner />
+          </template>
+        </div>
+        <div v-if="submittedFeedback">
+          <p>{{ t("ai_experiments.feedback_thank_you") }}</p>
+        </div>
+      </div>
     </template>
   </HoppSmartModal>
 </template>
@@ -53,8 +94,14 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
-import { useRequestNameGeneration } from "~/composables/ai-experiments"
+import { ref, watch } from "vue"
+import {
+  useRequestNameGeneration,
+  useSubmitFeedback,
+} from "~/composables/ai-experiments"
 import IconSparkle from "~icons/lucide/sparkles"
+import IconThumbsUp from "~icons/lucide/thumbs-up"
+import IconThumbsDown from "~icons/lucide/thumbs-down"
 
 const toast = useToast()
 const t = useI18n()
@@ -85,8 +132,22 @@ const {
   generateRequestName,
   canDoRequestNameGeneration,
   isGenerateRequestNamePending,
+  lastTraceID,
 } = useRequestNameGeneration(editingName)
 
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      submittedFeedback.value = false
+      lastTraceID.value = null
+    }
+  }
+)
+
+const submittedFeedback = ref(false)
+const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
+
 const editRequest = () => {
   if (editingName.value.trim() === "") {
     toast.error(t("request.invalid_name"))
diff --git a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
index 569af1a73..7531b10ee 100644
--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -52,20 +52,61 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex space-x-2">
-        <HoppButtonPrimary
-          :label="`${t('action.save')}`"
-          :loading="modalLoadingState"
-          outline
-          @click="saveRequestAs"
-        />
-        <HoppButtonSecondary
-          :label="`${t('action.cancel')}`"
-          outline
-          filled
-          @click="hideModal"
-        />
-      </span>
+      <div class="flex justify-between items-center w-full">
+        <div class="flex space-x-2">
+          <HoppButtonPrimary
+            :label="`${t('action.save')}`"
+            :loading="modalLoadingState"
+            outline
+            @click="saveRequestAs"
+          />
+          <HoppButtonSecondary
+            :label="`${t('action.cancel')}`"
+            outline
+            filled
+            @click="hideModal"
+          />
+        </div>
+
+        <div
+          v-if="lastTraceID && !submittedFeedback"
+          class="flex items-center gap-2"
+        >
+          <p>{{ t("ai_experiments.feedback_cta_request_name") }}</p>
+          <template v-if="!isSubmitFeedbackPending">
+            <HoppButtonSecondary
+              :icon="IconThumbsUp"
+              outline
+              @click="
+                async () => {
+                  if (lastTraceID) {
+                    await submitFeedback('positive', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+            <HoppButtonSecondary
+              :icon="IconThumbsDown"
+              outline
+              @click="
+                () => {
+                  if (lastTraceID) {
+                    submitFeedback('negative', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+          </template>
+          <template v-else>
+            <HoppSmartSpinner />
+          </template>
+        </div>
+        <div v-if="submittedFeedback">
+          <p>{{ t("ai_experiments.feedback_thank_you") }}</p>
+        </div>
+      </div>
     </template>
   </HoppSmartModal>
 </template>
@@ -84,7 +125,10 @@ 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 {
+  useRequestNameGeneration,
+  useSubmitFeedback,
+} from "~/composables/ai-experiments"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import {
   createRequestInCollection,
@@ -103,6 +147,8 @@ import { GQLTabService } from "~/services/tab/graphql"
 import { RESTTabService } from "~/services/tab/rest"
 import { TeamWorkspace } from "~/services/workspace.service"
 import IconSparkle from "~icons/lucide/sparkles"
+import IconThumbsDown from "~icons/lucide/thumbs-down"
+import IconThumbsUp from "~icons/lucide/thumbs-up"
 
 const t = useI18n()
 const toast = useToast()
@@ -185,8 +231,22 @@ const {
   canDoRequestNameGeneration,
   generateRequestName,
   isGenerateRequestNamePending,
+  lastTraceID,
 } = useRequestNameGeneration(requestName)
 
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      submittedFeedback.value = false
+      lastTraceID.value = null
+    }
+  }
+)
+
+const submittedFeedback = ref(false)
+const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
+
 watch(
   () => [RESTTabs.currentActiveTab.value, GQLTabs.currentActiveTab.value],
   () => {
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue b/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
index e123cc8f9..757c76022 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue
@@ -30,19 +30,60 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex space-x-2">
-        <HoppButtonPrimary
-          :label="t('action.save')"
-          outline
-          @click="addRequest"
-        />
-        <HoppButtonSecondary
-          :label="t('action.cancel')"
-          outline
-          filled
-          @click="hideModal"
-        />
-      </span>
+      <div class="flex justify-between items-center w-full">
+        <div class="flex space-x-2">
+          <HoppButtonPrimary
+            :label="t('action.save')"
+            outline
+            @click="addRequest"
+          />
+          <HoppButtonSecondary
+            :label="t('action.cancel')"
+            outline
+            filled
+            @click="hideModal"
+          />
+        </div>
+
+        <div
+          v-if="lastTraceID && !submittedFeedback"
+          class="flex items-center gap-2"
+        >
+          <p>{{ t("ai_experiments.feedback_cta_request_name") }}</p>
+          <template v-if="!isSubmitFeedbackPending">
+            <HoppButtonSecondary
+              :icon="IconThumbsUp"
+              outline
+              @click="
+                async () => {
+                  if (lastTraceID) {
+                    await submitFeedback('positive', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+            <HoppButtonSecondary
+              :icon="IconThumbsDown"
+              outline
+              @click="
+                () => {
+                  if (lastTraceID) {
+                    submitFeedback('negative', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+          </template>
+          <template v-else>
+            <HoppSmartSpinner />
+          </template>
+        </div>
+        <div v-if="submittedFeedback">
+          <p>{{ t("ai_experiments.feedback_thank_you") }}</p>
+        </div>
+      </div>
     </template>
   </HoppSmartModal>
 </template>
@@ -54,9 +95,14 @@ import { HoppRESTRequest } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
 import { ref, watch } from "vue"
 
-import { useRequestNameGeneration } from "~/composables/ai-experiments"
+import {
+  useRequestNameGeneration,
+  useSubmitFeedback,
+} from "~/composables/ai-experiments"
 import { GQLTabService } from "~/services/tab/graphql"
 import IconSparkle from "~icons/lucide/sparkles"
+import IconThumbsUp from "~icons/lucide/thumbs-up"
+import IconThumbsDown from "~icons/lucide/thumbs-down"
 
 const toast = useToast()
 const t = useI18n()
@@ -86,8 +132,22 @@ const {
   generateRequestName,
   isGenerateRequestNamePending,
   canDoRequestNameGeneration,
+  lastTraceID,
 } = useRequestNameGeneration(editingName)
 
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      submittedFeedback.value = false
+      lastTraceID.value = null
+    }
+  }
+)
+
+const submittedFeedback = ref(false)
+const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
+
 watch(
   () => props.show,
   (show) => {
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue b/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
index 2f9c0886e..142beca47 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue
@@ -30,19 +30,60 @@
       </div>
     </template>
     <template #footer>
-      <span class="flex space-x-2">
-        <HoppButtonPrimary
-          :label="`${t('action.save')}`"
-          outline
-          @click="saveRequest"
-        />
-        <HoppButtonSecondary
-          :label="`${t('action.cancel')}`"
-          outline
-          filled
-          @click="hideModal"
-        />
-      </span>
+      <div class="flex justify-between items-center w-full">
+        <div class="flex space-x-2">
+          <HoppButtonPrimary
+            :label="`${t('action.save')}`"
+            outline
+            @click="saveRequest"
+          />
+          <HoppButtonSecondary
+            :label="`${t('action.cancel')}`"
+            outline
+            filled
+            @click="hideModal"
+          />
+        </div>
+
+        <div
+          v-if="lastTraceID && !submittedFeedback"
+          class="flex items-center gap-2"
+        >
+          <p>{{ t("ai_experiments.feedback_cta_request_name") }}</p>
+          <template v-if="!isSubmitFeedbackPending">
+            <HoppButtonSecondary
+              :icon="IconThumbsUp"
+              outline
+              @click="
+                async () => {
+                  if (lastTraceID) {
+                    await submitFeedback('positive', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+            <HoppButtonSecondary
+              :icon="IconThumbsDown"
+              outline
+              @click="
+                () => {
+                  if (lastTraceID) {
+                    submitFeedback('negative', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
+            />
+          </template>
+          <template v-else>
+            <HoppSmartSpinner />
+          </template>
+        </div>
+        <div v-if="submittedFeedback">
+          <p>{{ t("ai_experiments.feedback_thank_you") }}</p>
+        </div>
+      </div>
     </template>
   </HoppSmartModal>
 </template>
@@ -52,9 +93,14 @@ import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppGQLRequest } from "@hoppscotch/data"
 import { ref, watch } from "vue"
-import { useRequestNameGeneration } from "~/composables/ai-experiments"
+import {
+  useRequestNameGeneration,
+  useSubmitFeedback,
+} from "~/composables/ai-experiments"
 import { editGraphqlRequest } from "~/newstore/collections"
 import IconSparkle from "~icons/lucide/sparkles"
+import IconThumbsUp from "~icons/lucide/thumbs-up"
+import IconThumbsDown from "~icons/lucide/thumbs-down"
 
 const t = useI18n()
 const toast = useToast()
@@ -85,8 +131,22 @@ const {
   canDoRequestNameGeneration,
   generateRequestName,
   isGenerateRequestNamePending,
+  lastTraceID,
 } = useRequestNameGeneration(editingName)
 
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      submittedFeedback.value = false
+      lastTraceID.value = null
+    }
+  }
+)
+
+const submittedFeedback = ref(false)
+const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
+
 const saveRequest = () => {
   if (!editingName.value) {
     toast.error(`${t("collection.invalid_name")}`)
diff --git a/packages/hoppscotch-common/src/components/http/RawBody.vue b/packages/hoppscotch-common/src/components/http/RawBody.vue
index 42fc11c9f..35532f615 100644
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -42,6 +42,13 @@
           :icon="prettifyIcon"
           @click="prettifyRequestBody"
         />
+        <HoppButtonSecondary
+          v-if="shouldEnableAIFeatures"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('ai_experiments.modify_with_ai')"
+          :icon="IconSparkles"
+          @click="showModifyBodyModal"
+        />
         <label for="payload">
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
@@ -62,6 +69,13 @@
     <div class="h-full relative flex flex-col flex-1">
       <div ref="rawBodyParameters" class="absolute inset-0"></div>
     </div>
+
+    <AiexperimentsModifyBodyModal
+      v-if="isModifyBodyModalOpen"
+      :current-body="codemirrorValue ?? ''"
+      @close-modal="isModifyBodyModalOpen = false"
+      @update-body="(updatedBody) => (codemirrorValue = updatedBody)"
+    ></AiexperimentsModifyBodyModal>
   </div>
 </template>
 
@@ -73,6 +87,7 @@ import IconFilePlus from "~icons/lucide/file-plus"
 import IconWand2 from "~icons/lucide/wand-2"
 import IconCheck from "~icons/lucide/check"
 import IconInfo from "~icons/lucide/info"
+import IconSparkles from "~icons/lucide/sparkles"
 import { computed, reactive, Ref, ref, watch } from "vue"
 import * as TO from "fp-ts/TaskOption"
 import { pipe } from "fp-ts/function"
@@ -90,6 +105,7 @@ import xmlFormat from "xml-formatter"
 import { useNestedSetting } from "~/composables/settings"
 import { toggleNestedSetting } from "~/newstore/settings"
 import * as LJSON from "lossless-json"
+import { useAIExperiments } from "~/composables/ai-experiments"
 
 type PossibleContentTypes = Exclude<
   ValidContentTypes,
@@ -203,6 +219,14 @@ const prettifyRequestBody = () => {
   }
 }
 
+const isModifyBodyModalOpen = ref(false)
+
+const showModifyBodyModal = () => {
+  isModifyBodyModalOpen.value = true
+}
+
+const { shouldEnableAIFeatures } = useAIExperiments()
+
 const prettifyXML = (xml: string) => {
   return xmlFormat(xml, {
     indentation: "  ",
diff --git a/packages/hoppscotch-common/src/composables/ai-experiments.ts b/packages/hoppscotch-common/src/composables/ai-experiments.ts
index 24ebcd696..0bdac1f92 100644
--- a/packages/hoppscotch-common/src/composables/ai-experiments.ts
+++ b/packages/hoppscotch-common/src/composables/ai-experiments.ts
@@ -38,6 +38,8 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
     return ENABLE_AI_EXPERIMENTS.value && !!platform.experiments?.aiExperiments
   })
 
+  const lastTraceID = ref<string | null>(null)
+
   const generateRequestName = async (
     requestContext: HoppRESTRequest | HoppGQLRequest | null
   ) => {
@@ -65,7 +67,8 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
       return
     }
 
-    targetNameRef.value = result.right
+    targetNameRef.value = result.right.request_name
+    lastTraceID.value = result.right.trace_id
 
     isGenerateRequestNamePending.value = false
   }
@@ -74,5 +77,122 @@ export const useRequestNameGeneration = (targetNameRef: Ref<string>) => {
     generateRequestName,
     isGenerateRequestNamePending,
     canDoRequestNameGeneration,
+    lastTraceID,
+  }
+}
+
+export const useAIExperiments = () => {
+  const currentUser = useReadonlyStream(
+    platform.auth.getCurrentUserStream(),
+    platform.auth.getCurrentUser()
+  )
+
+  const ENABLE_AI_EXPERIMENTS = useSetting("ENABLE_AI_EXPERIMENTS")
+
+  const shouldEnableAIFeatures = computed(() => {
+    // Request generation applies only to the authenticated state
+    if (!currentUser.value) {
+      return false
+    }
+
+    return ENABLE_AI_EXPERIMENTS.value && !!platform.experiments?.aiExperiments
+  })
+
+  return {
+    shouldEnableAIFeatures,
+  }
+}
+
+export const useModifyRequestBody = (
+  currentRequestBody: string,
+  userPromptRef: Ref<string>,
+  generatedRequestBodyRef: Ref<string>
+) => {
+  const toast = useToast()
+  const t = useI18n()
+
+  const lastTraceID = ref<string | null>(null)
+
+  const isModifyRequestBodyPending = ref(false)
+
+  const modifyRequestBodyForPlatform =
+    platform.experiments?.aiExperiments?.modifyRequestBody
+
+  const modifyRequestBody = async () => {
+    isModifyRequestBodyPending.value = true
+
+    if (!modifyRequestBodyForPlatform) {
+      toast.error(t("request.modify_request_body_error"))
+      isModifyRequestBodyPending.value = false
+      return
+    }
+
+    const result = await modifyRequestBodyForPlatform(
+      currentRequestBody ?? "",
+      userPromptRef.value
+    )
+
+    if (result && E.isLeft(result)) {
+      toast.error(t("request.modify_request_body_error"))
+      isModifyRequestBodyPending.value = false
+      return
+    }
+
+    generatedRequestBodyRef.value = result.right.modified_body
+    lastTraceID.value = result.right.trace_id
+
+    isModifyRequestBodyPending.value = false
+    return result.right
+  }
+
+  return {
+    modifyRequestBody,
+    isModifyRequestBodyPending,
+    lastTraceID,
+  }
+}
+
+export const useSubmitFeedback = () => {
+  const submitFeedbackForPlatform =
+    platform.experiments?.aiExperiments?.submitFeedback
+
+  const t = useI18n()
+  const toast = useToast()
+
+  const isSubmitFeedbackPending = ref(false)
+
+  const submitFeedback = async (
+    rating: "positive" | "negative",
+    traceID: string
+  ) => {
+    if (!submitFeedbackForPlatform) {
+      toast.error(t("ai_experiments.feedback_failure"))
+
+      return
+    }
+
+    isSubmitFeedbackPending.value = true
+
+    const res = await submitFeedbackForPlatform(
+      rating === "positive" ? 1 : -1,
+      traceID
+    )
+
+    if (E.isLeft(res)) {
+      toast.error(t("ai_experiments.feedback_failure"))
+      isSubmitFeedbackPending.value = false
+      return
+    }
+
+    isSubmitFeedbackPending.value = false
+
+    toast.success(t("ai_experiments.feedback_success"))
+
+    return E.right(undefined)
+  }
+
+  return {
+    submitFeedback,
+    isSubmitFeedbackPending,
   }
 }
diff --git a/packages/hoppscotch-common/src/platform/experiments.ts b/packages/hoppscotch-common/src/platform/experiments.ts
index 562784c0f..ef66a4dee 100644
--- a/packages/hoppscotch-common/src/platform/experiments.ts
+++ b/packages/hoppscotch-common/src/platform/experiments.ts
@@ -3,8 +3,30 @@ import * as E from "fp-ts/Either"
 export type ExperimentsPlatformDef = {
   aiExperiments?: {
     enableAIExperiments: boolean
-    generateRequestName: (
-      requestInfo: string
-    ) => Promise<E.Either<string, string>>
+    generateRequestName?: (requestInfo: string) => Promise<
+      E.Either<
+        string,
+        {
+          request_name: string
+          trace_id: string
+        }
+      >
+    >
+    modifyRequestBody?: (
+      requestBody: string,
+      userPrompt: string
+    ) => Promise<
+      E.Either<
+        string,
+        {
+          modified_body: string
+          trace_id: string
+        }
+      >
+    >
+    submitFeedback?: (
+      rating: -1 | 1,
+      traceID: string
+    ) => Promise<E.Either<string, void>>
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 476503e2e..61e0f1cfd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -417,6 +417,9 @@ importers:
       '@codemirror/lint':
         specifier: 6.5.0
         version: 6.5.0
+      '@codemirror/merge':
+        specifier: 6.7.0
+        version: 6.7.0
       '@codemirror/search':
         specifier: 6.5.6
         version: 6.5.6
@@ -2326,6 +2329,9 @@ packages:
   '@codemirror/lint@6.5.0':
     resolution: {integrity: sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==}
 
+  '@codemirror/merge@6.7.0':
+    resolution: {integrity: sha512-hVGhYZMBKLnb0Q8NXZ06uR1oFOuiMLNs/igZov5PpOqCaxQLGQA5y2zRojn1G6SyBQ0/nYM3aFeJb5kr4xlZag==}
+
   '@codemirror/search@6.5.6':
     resolution: {integrity: sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==}
 
@@ -13948,6 +13954,14 @@ snapshots:
       '@codemirror/view': 6.25.1
       crelt: 1.0.6
 
+  '@codemirror/merge@6.7.0':
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.25.1
+      '@lezer/highlight': 1.2.0
+      style-mod: 4.1.2
+
   '@codemirror/search@6.5.6':
     dependencies:
       '@codemirror/state': 6.4.1