feat: integrate new generate route in Zendesk (#78)

Author: m-thenot

zendesk_app/src/app/components/RightPanelApp/RightPanelApp.tsx

@@ -26,13 +26,24 @@ export const RightPanelApp = (): JSX.Element => {
   const { quivrService, ingestionStatus, setIngestionStatus, zendeskConnection } = useQuivrApiContext()
   const [iterationRequest, setIterationRequest] = useState('')
   const { actionButtons, isChatEnabled } = useActionButtons()
-  const { loading, response, setResponse, submitTask, ticketAnswerId, setTicketAnswerId, isError } =
-    useExecuteZendeskTaskContext()
+  const {
+    loading,
+    response,
+    setResponse,
+    submitTask,
+    ticketAnswerId,
+    isAutoDraftDisplayed,
+    setTicketAnswerId,
+    isError
+  } = useExecuteZendeskTaskContext()
   const [ongoingTask, setOngoingTask] = useState(false)
   const [autoDraft, setAutoDraft] = useState<Autodraft | null>(null)
   const { pasteInEditor, getTicketId, getUser } = useZendesk()
   const client = useClient() as ZAFClient
   const lowConfidenceWarningEnabled = useFeatureFlagEnabled(featureFlags.LOW_CONFIDENCE_WARNING)
+  const showLowConfidenceWarning = Boolean(
+    autoDraft && !autoDraft.context_is_enough && lowConfidenceWarningEnabled && isAutoDraftDisplayed && !ongoingTask
+  )
 
   useEffect(() => {
     client.invoke('resize', { width: '100%', height: '450px' })
@@ -127,7 +138,7 @@ export const RightPanelApp = (): JSX.Element => {
                 </span>
               </MessageInfoBox>
             )}
-            {autoDraft && !autoDraft.context_is_enough && lowConfidenceWarningEnabled && (
+            {showLowConfidenceWarning && (
               <MessageInfoBox type="warning">
                 <span className={styles.error}>
                   This draft may be incomplete or inaccurate because not all the necessary information is available.
@@ -144,6 +155,7 @@ export const RightPanelApp = (): JSX.Element => {
                 setResponseContent={setResponse}
                 ongoingTask={ongoingTask}
                 ticketAnswerId={ticketAnswerId}
+                showLowConfidenceWarning={showLowConfidenceWarning}
               ></ResponseContainer>
             </div>
             <div className={styles.response_separator}></div>

zendesk_app/src/app/components/RightPanelApp/components/ResponseContainer/ResponseContainer.tsx

@@ -25,6 +25,7 @@ interface ResponseContainerProps {
   autoDraft: Autodraft | null
   onCopyDraft: () => Promise<void>
   ticketAnswerId?: string
+  showLowConfidenceWarning: boolean
 }
 
 export const ResponseContainer = ({
@@ -33,7 +34,8 @@ export const ResponseContainer = ({
   ongoingTask,
   autoDraft,
   onCopyDraft,
-  ticketAnswerId
+  ticketAnswerId,
+  showLowConfidenceWarning
 }: ResponseContainerProps): JSX.Element => {
   const [htmlContent, setHtmlContent] = useState('')
   const [manualEditing, setManualEditing] = useState(false)
@@ -47,7 +49,6 @@ export const ResponseContainer = ({
   const openModal = useModal(client)
   const autosendFeedbackModalEnabled = useFeatureFlagEnabled(featureFlags.AUTOSEND_FEEDBACK_MODAL)
   const autosendFeedbackEnabled = useFeatureFlagEnabled(featureFlags.AUTOSEND_FEEDBACK)
-  const lowConfidenceWarningEnabled = useFeatureFlagEnabled(featureFlags.LOW_CONFIDENCE_WARNING)
   const showAutosendFeedbackButtons =
     autoDraft?.prediction?.is_autosendable &&
     autoDraft?.prediction?.is_accepted === null &&
@@ -185,7 +186,7 @@ export const ResponseContainer = ({
   return (
     <div className={styles.main_container}>
       <div
-        className={`${styles.response_container} ${showAutosendFeedbackButtons ? styles.autosendable : ''} ${!autoDraft?.context_is_enough && lowConfidenceWarningEnabled ? styles.low_confidence : ''}`}
+        className={`${styles.response_container} ${showAutosendFeedbackButtons ? styles.autosendable : ''} ${showLowConfidenceWarning ? styles.low_confidence : ''}`}
         contentEditable={true}
         dangerouslySetInnerHTML={{ __html: htmlContent }}
         onInput={handleInput}

zendesk_app/src/app/constants/feature-flags.ts

@@ -1,5 +1,6 @@
 export const featureFlags = {
   AUTOSEND_FEEDBACK_MODAL: 'autosend-feedback-modal',
   AUTOSEND_FEEDBACK: 'autosend-feedback',
-  LOW_CONFIDENCE_WARNING: 'low-confidence-warning'
+  LOW_CONFIDENCE_WARNING: 'low-confidence-warning',
+  GENERATE_V2: 'generate-v2'
 }

zendesk_app/src/app/contexts/ExecuteZendeskTaskProvider.tsx

@@ -4,12 +4,15 @@ import { useQuivrApiContext } from '../hooks/useQuivrApiContext'
 import { useZendesk } from '../hooks/useZendesk'
 import { ZendeskTask } from '../types/zendesk'
 import { ZAFClient } from './ClientProvider'
+import { featureFlags } from '@constants/feature-flags'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
 
 const agentPrompt = 'Vous êtes un assistant attentionné,  votre objectif est de satisfaire la demande du client.'
 
 interface ExecuteZendeskTaskContextProps {
   loading: boolean
   response: string
+  isAutoDraftDisplayed: boolean
   setResponse: (r: string) => void
   submitTask: (task: ZendeskTask, options: { iterationRequest?: string; onFinish?: () => void }) => Promise<void>
   ticketAnswerId?: string
@@ -33,6 +36,7 @@ export const ExecuteZendeskTaskProvider = ({ children }: { children: ReactNode }
   const [ticketAnswerId, setTicketAnswerId] = useState<string | undefined>(undefined)
   const [previousTask, setPreviousTask] = useState<{ task: ZendeskTask; chatId: string } | null>(null)
   const client = useClient() as ZAFClient
+  const generateV2Enabled = useFeatureFlagEnabled(featureFlags.GENERATE_V2)
 
   const submitTask = async (task: ZendeskTask, options: { iterationRequest?: string; onFinish?: () => void }) => {
     if (!quivrService) return
@@ -56,7 +60,11 @@ export const ExecuteZendeskTaskProvider = ({ children }: { children: ReactNode }
       const userInput = await getUserInput(client)
       const user = await getUser(client)
 
-      await quivrService.executeZendeskTask(
+      const executeTask = (
+        generateV2Enabled ? quivrService.executeZendeskTaskV2 : quivrService.executeZendeskTask
+      ).bind(quivrService)
+
+      await executeTask(
         task,
         chatId,
         task === 'iterate' && iterationRequest ? iterationRequest : agentPrompt,
@@ -98,6 +106,7 @@ export const ExecuteZendeskTaskProvider = ({ children }: { children: ReactNode }
         loading,
         response,
         setResponse,
+        isAutoDraftDisplayed: !Boolean(previousTask),
         submitTask,
         ticketAnswerId,
         setTicketAnswerId,

zendesk_app/src/app/services/quivr.ts

@@ -124,14 +124,55 @@ export class QuivrService {
     }
   }
 
+  async executeZendeskTaskV2(
+    task: ZendeskTask,
+    chatId: string,
+    custom_instructions: string,
+    ticketId: string,
+    draft_answer: string,
+    user: ZendeskUser,
+    onStreamMessage: (message: string, ticketAnswerId?: string) => void,
+    onStreamError?: (error: string | null) => void
+  ): Promise<string> {
+    const url = new URL(`${this.apiUrl}/helpdesk-accounts/tickets/${ticketId}/tasks/${task}`)
+
+    const response = await fetch(url.toString(), {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.quivrApiKey}`,
+        'Content-Type': 'application/json',
+        Accept: 'text/event-stream'
+      },
+      body: JSON.stringify({
+        draft_answer: draft_answer,
+        custom_instructions: custom_instructions,
+        chat_id: chatId,
+        zt_input: {
+          support_agent: {
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            platform_user_id: user.id
+          }
+        }
+      })
+    })
+
+    if (!response.body) {
+      throw new Error('ReadableStream not supported or no body in response.')
+    }
+
+    return this.processStream(response.body, onStreamMessage, onStreamError)
+  }
+
   async executeZendeskTask(
     task: ZendeskTask,
     chatId: string,
     prompt: string,
     ticketId: string,
     content: string,
     user: ZendeskUser,
-    onStreamMessage: (message: string) => void,
+    onStreamMessage: (message: string, ticketAnswerId?: string) => void,
     onStreamError?: (error: string | null) => void
   ): Promise<string> {
     const url = new URL(`${this.apiUrl}/zendesk/task/${task}`)