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

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

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>