DH-4799 [ai][admin-console] use natural language response from the en…

…gine when hitting Run on the query editor page
Dataherald · May 7, 2024 · a5db14c · a5db14c
1 parent 28694ec
commit a5db14c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/apps/ai/clients/admin-console/src/components/query/custom-response-dialog.tsx b/apps/ai/clients/admin-console/src/components/query/custom-response-dialog.tsx
@@ -18,7 +18,7 @@ import { Textarea } from '@/components/ui/textarea'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { DialogDescription } from '@radix-ui/react-dialog'
 import { Info } from 'lucide-react'
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import * as Yup from 'yup'
 
@@ -60,6 +60,11 @@ const CustomResponseDialog: FC<CustomResponseDialogProps> = ({
     onClose(formValues.customResponse)
   }
 
+  useEffect(
+    () => form.reset({ customResponse: initialValue }),
+    [form, initialValue],
+  )
+
   return (
     <Dialog open={isOpen} onOpenChange={handleCancel}>
       <DialogContent onInteractOutside={(e) => e.preventDefault()}>

diff --git a/apps/ai/clients/admin-console/src/components/query/workspace.tsx b/apps/ai/clients/admin-console/src/components/query/workspace.tsx
@@ -74,8 +74,9 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
   const lastUpdatedDate: Date = new Date(last_updated)
   const [currentSqlQuery, setCurrentSqlQuery] = useState(sql_query)
   const [verificationStatus, setVerifiedStatus] = useState<QueryStatus>(status)
-  const [textResponse, setCustomResponse] = useState<string>(response)
-  const [textResponseHasChanges, setTextResponseHasChanges] = useState(false)
+  const [customResponse, setCustomResponse] = useState<string>(response)
+  const [customResponseHasChanges, setcustomResponseHasChanges] =
+    useState(false)
   const [openEditResponseDialog, setOpenEditResponseDialog] = useState(false)
   const [savingQuery, setSavingQuery] = useState(false)
   const [loadingSqlQueryResults, setLoadingQueryResults] = useState(false)
@@ -113,7 +114,7 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
       setSavingQuery(true)
       await onPatchQuery({
         query_status: verificationStatus,
-        custom_response: textResponse,
+        custom_response: customResponse,
         sql_query: currentSqlQuery,
       })
       if (isVerified(verificationStatus)) {
@@ -159,19 +160,23 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
 
   const handleVerifyChange = (verificationStatus: QueryWorkspaceStatus) => {
     setVerifiedStatus(verificationStatus)
-    if (isRejected(verificationStatus) && !textResponseHasChanges) {
+    if (isRejected(verificationStatus) && !customResponseHasChanges) {
       setOpenEditResponseDialog(true)
     }
   }
 
-  const handleCloseEditDialog = (newCustomResponse = textResponse) => {
+  const handleCloseEditDialog = (newCustomResponse = customResponse) => {
     setCustomResponse(newCustomResponse)
     setOpenEditResponseDialog(false)
   }
 
   useEffect(() => {
-    setTextResponseHasChanges(textResponse !== response)
-  }, [response, textResponse])
+    setcustomResponseHasChanges(customResponse !== query.response)
+  }, [query.response, customResponse])
+
+  useEffect(() => {
+    setCustomResponse(query.response)
+  }, [query])
 
   const rejectedBanner = (
     <div className="h-full flex items-center justify-center gap-2 text-muted-foreground">
@@ -235,7 +240,7 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
             <LoadingSqlQueryResults />
           </div>
         ) : (
-          textResponse && (
+          customResponse && (
             <div className="bg-white flex flex-col px-5 pt-3 pb-5 rounded-xl border">
               <div className="flex items-center justify-between gap-3">
                 <div className="flex items-center gap-2">
@@ -256,7 +261,7 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
                   Edit
                 </Button>
               </div>
-              <div className="break-words">{textResponse}</div>
+              <div className="break-words">{customResponse}</div>
               {(isVerified(verificationStatus) ||
                 isRejected(verificationStatus)) && (
                 <Alert
@@ -409,7 +414,7 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
         }
         description="Compose the question's response message that will be sent to the Slack thread"
         isOpen={openEditResponseDialog}
-        initialValue={textResponse}
+        initialValue={customResponse}
         onClose={handleCloseEditDialog}
       ></CustomResponseDialog>
       <Toaster />