fix: update copy + improve ux on ai experiments (#4393)

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

packages/hoppscotch-common/locales/en.json

@@ -1140,12 +1140,14 @@
     "generate_request_name": "Generate Request Name Using AI",
     "generate_or_modify_request_body": "Generate or Modify Request Body",
     "modify_with_ai": "Modify with AI",
+    "generate": "Generate",
     "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?"
+    "feedback_cta_request_name": "Did you like the generated name?",
+    "modify_request_body_error": "Failed to modify request body"
   }
 }

packages/hoppscotch-common/src/components/aiexperiments/ModifyBodyModal.vue

@@ -48,16 +48,30 @@ const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
               'ai_experiments.generate_or_modify_request_body_input_placeholder'
             )}`"
             class="flex flex-1 bg-transparent px-6 text-base text-secondaryDark"
+            @keypress="
+              async (e) => {
+                if (e.key === 'Enter') {
+                  await modifyRequestBody()
+                  submittedFeedback = false
+                }
+              }
+            "
           />
 
           <HoppButtonSecondary
             :icon="IconArrowRight"
-            class="mr-6 rounded-md"
+            class="mr-6 rounded-md flex flex-col-reverse"
+            :label="t('ai_experiments.generate')"
             outline
             filled
             :loading="isModifyRequestBodyPending"
             :disabled="!userPrompt || isModifyRequestBodyPending"
-            @click="modifyRequestBody"
+            @click="
+              async () => {
+                await modifyRequestBody()
+                submittedFeedback = false
+              }
+            "
           />
         </div>
 
@@ -100,7 +114,14 @@ const { submitFeedback, isSubmitFeedbackPending } = useSubmitFeedback()
             <HoppButtonSecondary
               :icon="IconThumbsDown"
               outline
-              @click="submitFeedback('negative', lastTraceID)"
+              @click="
+                async () => {
+                  if (lastTraceID) {
+                    await submitFeedback('negative', lastTraceID)
+                    submittedFeedback = true
+                  }
+                }
+              "
             />
           </template>
 

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

@@ -25,7 +25,12 @@
             'animate-pulse': isGenerateRequestNamePending,
           }"
           :title="t('ai_experiments.generate_request_name')"
-          @click="generateRequestName(props.requestContext)"
+          @click="
+            async () => {
+              await generateRequestName(props.requestContext)
+              submittedFeedback = false
+            }
+          "
         />
       </div>
     </template>

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

@@ -25,7 +25,12 @@
             'animate-pulse': isGenerateRequestNamePending,
           }"
           :title="t('ai_experiments.generate_request_name')"
-          @click="generateRequestName(props.requestContext)"
+          @click="
+            async () => {
+              await generateRequestName(props.requestContext)
+              submittedFeedback = false
+            }
+          "
         />
       </div>
     </template>

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

@@ -28,7 +28,12 @@
               'animate-pulse': isGenerateRequestNamePending,
             }"
             :title="t('ai_experiments.generate_request_name')"
-            @click="generateRequestName(requestContext)"
+            @click="
+              async () => {
+                await generateRequestName(requestContext)
+                submittedFeedback = false
+              }
+            "
           />
         </div>
 

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

@@ -25,7 +25,12 @@
             'animate-pulse': isGenerateRequestNamePending,
           }"
           :title="t('ai_experiments.generate_request_name')"
-          @click="generateRequestName(props.requestContext)"
+          @click="
+            async () => {
+              await generateRequestName(props.requestContext)
+              submittedFeedback = false
+            }
+          "
         />
       </div>
     </template>

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

@@ -25,7 +25,12 @@
             'animate-pulse': isGenerateRequestNamePending,
           }"
           :title="t('ai_experiments.generate_request_name')"
-          @click="generateRequestName"
+          @click="
+            async () => {
+              await generateRequestName(props.requestContext)
+              submittedFeedback = false
+            }
+          "
         />
       </div>
     </template>

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

@@ -122,7 +122,7 @@ export const useModifyRequestBody = (
     isModifyRequestBodyPending.value = true
 
     if (!modifyRequestBodyForPlatform) {
-      toast.error(t("request.modify_request_body_error"))
+      toast.error(t("ai_experiments.modify_request_body_error"))
       isModifyRequestBodyPending.value = false
       return
     }
@@ -133,7 +133,7 @@ export const useModifyRequestBody = (
     )
 
     if (result && E.isLeft(result)) {
-      toast.error(t("request.modify_request_body_error"))
+      toast.error(t("ai_experiments.modify_request_body_error"))
       isModifyRequestBodyPending.value = false
       return
     }
@@ -186,8 +186,6 @@ export const useSubmitFeedback = () => {
 
     isSubmitFeedbackPending.value = false
 
-    toast.success(t("ai_experiments.feedback_success"))
-
     return E.right(undefined)
   }