feat(automatedQA): integrate AI answer generation api DEV-739 (#6735)

### 📣 Summary
This PR implements the flow for activating the AI response generation
feature and calling the actual generation endpoint

### 💭 Notes
- For this to work some changes were necessary in the current
`TabAnalysis` flow, so we could have access to the automated feature as
well.
- Now the `manual_qual` feature is created whenever a question is set
and it's still not there. In the common flow it will happen once the
first question is added. I chose that path instead of automatically
creating the feature when `TabAnalysis` was opened, which i considered
another viable option. This way we won´t create the feature unless the
user really adds a qaQuestion.
- There's a verification logic to decide whether to create the advanced
feature for the AI generation, to patch it or do nothing if all
qaQuestions are already set for it. This is important in the case of new
questions being added.
- Tags and Notes questions don't have `Generate with AI` enabled since
it's not supported for them
- The actual API call to generate the answer is working, but the
generated data is not being parsed and displayed in this PR. We will
take care of this in a follow up work.

### 👀 Preview steps
1. ℹ️ have an account and a project with transcription
2. have QA questions
3. have `autoQAEnabled` feature flag enabled (`?ff_autoQAEnabled=true`)
4. Press Generate with AI button in the analysis tab
5. 🔴 [on main] notice that this won't trigger any action
6. 🟢 [on PR] notice that this triggers activation of the feature for the
existing questions and the API call for generating the answer with AI.

---------

Co-authored-by: Leszek Pietrzak <[email protected]>
Co-authored-by: Leszek <[email protected]>

Author: pauloamorimbr

jsapp/js/api/mutation-defaults/survey-data.ts

@@ -324,6 +324,13 @@ queryClient.setMutationDefaults(
               snapshots: [itemSnapshot],
             }
           }
+          case ActionEnum.automatic_bedrock_qual: {
+            // No optimistic update for automatic_bedrock_qual since
+            // it only supports 'complete' or 'failed' status (no 'in_progress')
+            return {
+              snapshots: [],
+            }
+          }
           default:
             throw new Error(`Unknown action "${action}" is not handled.`)
         }

jsapp/js/components/processing/SingleProcessingContent/TabAnalysis/AnalysisContent/AnalysisQuestionsList/AnalysisQuestionListItem/ResponseForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Group, Modal, Stack, Text } from '@mantine/core'
 import { Box, ThemeIcon } from '@mantine/core'
@@ -19,14 +19,28 @@ interface Props {
   disabled: boolean
   onEdit: (qaQuestion: ResponseQualActionParams) => unknown
   onDelete: (qaQuestion: ResponseQualActionParams) => Promise<unknown>
+  /**
+   * Adds a Generate with AI button. API handling is being served by parent(s), as this component doesn't have all
+   * the required data and it's easier to push this one function up than all the small pieces down.
+   */
+  onGenerateWithAI?: () => Promise<unknown>
 }
 
 /**
  * Displays question type icon, name, and an edit and delete buttons (if user
  * has sufficient permissions). Is being used in multiple other components.
  */
-export default function ResponseForm({ qaQuestion, children, onClear, disabled, onEdit, onDelete }: Props) {
+export default function ResponseForm({
+  qaQuestion,
+  children,
+  onClear,
+  disabled,
+  onEdit,
+  onDelete,
+  onGenerateWithAI,
+}: Props) {
   const [opened, { open, close }] = useDisclosure(false)
+  const [isGenerating, setIsGenerating] = useState(false)
 
   const ffAutoQAEnabled = useFeatureFlag(FeatureFlag.autoQAEnabled)
 
@@ -45,6 +59,16 @@ export default function ResponseForm({ qaQuestion, children, onClear, disabled,
     close()
   }
 
+  const handleGenerateWithAI = async () => {
+    if (!onGenerateWithAI) return
+    setIsGenerating(true)
+    try {
+      await onGenerateWithAI()
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
   return (
     <Stack gap='10px'>
       <Group align={'flex-start'} gap={'xs'}>
@@ -108,7 +132,7 @@ export default function ResponseForm({ qaQuestion, children, onClear, disabled,
 
       {/* Hard coded left padding to account for the 32px icon size + 8px gap */}
       {children && <Box pl={'40px'}>{children}</Box>}
-      {!disabled && ffAutoQAEnabled && (
+      {!disabled && ffAutoQAEnabled && onGenerateWithAI && (
         <Group pl={'40px'}>
           <ButtonNew
             variant='transparent'
@@ -118,6 +142,9 @@ export default function ResponseForm({ qaQuestion, children, onClear, disabled,
             disabled={disabled}
             c='var(--mantine-color-blue-5)'
             leftIcon='sparkles'
+            onClick={handleGenerateWithAI}
+            loading={isGenerating}
+            loaderProps={{ type: 'dots' }}
           >
             {t('Generate with AI')}
           </ButtonNew>

jsapp/js/components/processing/SingleProcessingContent/TabAnalysis/AnalysisContent/AnalysisQuestionsList/AnalysisQuestionListItem/index.tsx

@@ -36,7 +36,7 @@ import styles from './index.module.scss'
 
 export interface Props {
   asset: AssetResponse
-  advancedFeature: AdvancedFeatureResponseManualQual
+  advancedFeatureManual: AdvancedFeatureResponseManualQual
   questionXpath: string
   qaQuestion: ResponseQualActionParams
   setQaQuestion: (qualQuestion: ResponseQualActionParams | undefined) => void
@@ -45,6 +45,7 @@ export interface Props {
   moveRow: (uuid: string, oldIndex: number, newIndex: number) => void
   editMode: boolean
   isAnyQuestionBeingEdited: boolean
+  onGenerateWithAI: (qaQuestion: ResponseQualActionParams) => Promise<void>
 }
 
 interface DragItem {
@@ -61,7 +62,7 @@ interface DragItem {
  */
 export default function AnalysisQuestionListItem({
   asset,
-  advancedFeature,
+  advancedFeatureManual,
   questionXpath,
   qaQuestion,
   setQaQuestion,
@@ -70,6 +71,7 @@ export default function AnalysisQuestionListItem({
   moveRow,
   editMode,
   isAnyQuestionBeingEdited,
+  onGenerateWithAI,
 }: Props) {
   const rootUuid = removeDefaultUuidPrefix(submission['meta/rootUuid'])
 
@@ -94,6 +96,7 @@ export default function AnalysisQuestionListItem({
   const mutationSaveAnswer = useAssetsDataSupplementPartialUpdate({ mutation: { scope: { id: 'qa-answer' } } })
   const mutationCreateQuestion = useAssetsAdvancedFeaturesCreate({ mutation: { scope: { id: 'qa-question' } } })
   const mutationPatchQuestion = useAssetsAdvancedFeaturesPartialUpdate({ mutation: { scope: { id: 'qa-question' } } })
+
   const handleSaveAnswer = async (value: ManualQualValue) => {
     await mutationSaveAnswer.mutateAsync({
       uidAsset: asset.uid,
@@ -110,28 +113,27 @@ export default function AnalysisQuestionListItem({
     })
   }
 
-  const isCreate = advancedFeature.uid === LOCALLY_EDITED_PLACEHOLDER_UUID
+  const isCreate = advancedFeatureManual.uid === LOCALLY_EDITED_PLACEHOLDER_UUID
 
   const handleSaveQuestion = async (params: ResponseQualActionParams[]) => {
     if (isCreate) {
       await mutationCreateQuestion.mutateAsync({
         uidAsset: asset.uid,
         data: {
           action: ActionEnum.manual_qual,
-          question_xpath: advancedFeature.question_xpath,
+          question_xpath: advancedFeatureManual.question_xpath,
           params: params,
         },
       })
     } else {
       await mutationPatchQuestion.mutateAsync({
         uidAsset: asset.uid,
-        uidAdvancedFeature: advancedFeature.uid,
+        uidAdvancedFeature: advancedFeatureManual.uid,
         data: {
           params: params,
         },
       })
     }
-    console.log('adf')
     setQaQuestion(undefined)
   }
 
@@ -141,13 +143,13 @@ export default function AnalysisQuestionListItem({
 
   const handleDeleteQuestion = async (qaQuestionToDelete: ResponseQualActionParams) => {
     // Mark the question as deleted by setting options.deleted to true
-    const updatedParams = advancedFeature.params.map((param) =>
+    const updatedParams = advancedFeatureManual.params.map((param: ResponseQualActionParams) =>
       param.uuid === qaQuestionToDelete.uuid ? { ...param, options: { ...param.options, deleted: true } } : param,
     )
 
     await mutationPatchQuestion.mutateAsync({
       uidAsset: asset.uid,
-      uidAdvancedFeature: advancedFeature.uid,
+      uidAdvancedFeature: advancedFeatureManual.uid,
       data: {
         params: updatedParams,
       },
@@ -158,7 +160,7 @@ export default function AnalysisQuestionListItem({
   const handleReorderQuestions = (reorderedParams: ResponseQualActionParams[]) => {
     return mutationPatchQuestion.mutateAsync({
       uidAsset: asset.uid,
-      uidAdvancedFeature: advancedFeature.uid,
+      uidAdvancedFeature: advancedFeatureManual.uid,
       data: {
         params: reorderedParams,
       },
@@ -251,7 +253,7 @@ export default function AnalysisQuestionListItem({
       // Save the reordered questions to the backend
       // The moveRow callback has already updated the visual order in the parent component
       // Here we persist that change to the backend using the current params order
-      await handleReorderQuestions(advancedFeature.params)
+      await handleReorderQuestions(advancedFeatureManual.params)
     },
   })
 
@@ -263,7 +265,7 @@ export default function AnalysisQuestionListItem({
     if (editMode) {
       return (
         <AnalysisQuestionEditor
-          advancedFeature={advancedFeature}
+          advancedFeature={advancedFeatureManual}
           qaQuestion={qaQuestion}
           onSaveQuestion={handleSaveQuestion}
           disabled={disabledAnswer}
@@ -295,6 +297,7 @@ export default function AnalysisQuestionListItem({
             disabled={disabledQuestion}
             onEdit={setQaQuestion}
             onDelete={handleDeleteQuestion}
+            onGenerateWithAI={() => onGenerateWithAI(qaQuestion)}
           >
             <SelectMultipleResponseForm
               qaQuestion={qaQuestion}
@@ -330,6 +333,7 @@ export default function AnalysisQuestionListItem({
             onEdit={setQaQuestion}
             onDelete={handleDeleteQuestion}
             onClear={handleClearSelection}
+            onGenerateWithAI={() => onGenerateWithAI(qaQuestion)}
           >
             <SelectOneResponseForm
               qaQuestion={qaQuestion}
@@ -359,6 +363,7 @@ export default function AnalysisQuestionListItem({
             disabled={disabledQuestion}
             onEdit={setQaQuestion}
             onDelete={handleDeleteQuestion}
+            onGenerateWithAI={() => onGenerateWithAI(qaQuestion)}
           >
             <IntegerResponseForm qaAnswer={queryAnswer.data} disabled={disabledAnswer} onSave={handleSaveAnswer} />
           </ResponseForm>
@@ -371,6 +376,7 @@ export default function AnalysisQuestionListItem({
             disabled={disabledQuestion}
             onEdit={setQaQuestion}
             onDelete={handleDeleteQuestion}
+            onGenerateWithAI={() => onGenerateWithAI(qaQuestion)}
           >
             <TextResponseForm qaAnswer={queryAnswer.data} disabled={disabledAnswer} onSave={handleSaveAnswer} />
           </ResponseForm>