feat: display warning message when we consider to no have enough info…

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

@@ -19,6 +19,8 @@ import { normalizeNewlinesToHtml } from '../../shared/helpers/html'
 import styles from './RightPanelApp.module.scss'
 import { copyDraftSource, trackingEvents } from '@constants/tracking-events'
 import posthog from 'posthog-js'
+import { featureFlags } from '@constants/feature-flags'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
 
 export const RightPanelApp = (): JSX.Element => {
   const { quivrService, ingestionStatus, setIngestionStatus, zendeskConnection } = useQuivrApiContext()
@@ -30,6 +32,7 @@ export const RightPanelApp = (): JSX.Element => {
   const [autoDraft, setAutoDraft] = useState<Autodraft | null>(null)
   const { pasteInEditor, getTicketId, getUser } = useZendesk()
   const client = useClient() as ZAFClient
+  const lowConfidenceWarningEnabled = useFeatureFlagEnabled(featureFlags.LOW_CONFIDENCE_WARNING)
 
   useEffect(() => {
     client.invoke('resize', { width: '100%', height: '450px' })
@@ -124,6 +127,14 @@ export const RightPanelApp = (): JSX.Element => {
                 </span>
               </MessageInfoBox>
             )}
+            {autoDraft && !autoDraft.context_is_enough && lowConfidenceWarningEnabled && (
+              <MessageInfoBox type="warning">
+                <span className={styles.error}>
+                  This draft may be incomplete or inaccurate because not all the necessary information is available.
+                  Please review carefully if you use it.
+                </span>
+              </MessageInfoBox>
+            )}
             <div className={styles.response_separator}></div>
             <div className={styles.response_container}>
               <ResponseContainer

zendesk_app/src/app/components/RightPanelApp/components/ResponseContainer/ResponseContainer.module.scss

@@ -31,6 +31,10 @@
       border: 1px solid var(--success);
     }
 
+    &.low_confidence {
+      border: 1px solid var(--warning);
+    }
+
     &:focus {
       outline: none !important;
       box-shadow: none;

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

@@ -47,8 +47,12 @@ 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 && autosendFeedbackEnabled
+    autoDraft?.prediction?.is_autosendable &&
+    autoDraft?.prediction?.is_accepted === null &&
+    autosendFeedbackEnabled &&
+    autoDraft?.context_is_enough
 
   useEffect(() => {
     if (!manualEditing) {
@@ -76,6 +80,7 @@ export const ResponseContainer = ({
       if (
         autoDraft?.prediction?.is_autosendable &&
         autoDraft?.prediction?.is_accepted === null &&
+        autoDraft?.context_is_enough &&
         htmlContent !== '' &&
         subdomainsEligibleToAutosend.includes(subdomain) &&
         !feedbackModalViewed &&
@@ -180,7 +185,7 @@ export const ResponseContainer = ({
   return (
     <div className={styles.main_container}>
       <div
-        className={`${styles.response_container} ${showAutosendFeedbackButtons ? styles.autosendable : ''}`}
+        className={`${styles.response_container} ${showAutosendFeedbackButtons ? styles.autosendable : ''} ${!autoDraft?.context_is_enough && lowConfidenceWarningEnabled ? styles.low_confidence : ''}`}
         contentEditable={true}
         dangerouslySetInnerHTML={{ __html: htmlContent }}
         onInput={handleInput}

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

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

zendesk_app/src/app/services/quivr.ts

@@ -254,7 +254,7 @@ export class QuivrService {
   async getAutoDraft(ticketId: string): Promise<Autodraft | null> {
     try {
       const response = await this.client.request({
-        url: `${this.apiUrl}/zendesk/autodraft_v2?ticket_id=${ticketId}`,
+        url: `${this.apiUrl}/helpdesk-accounts/autodraft?helpdesk_ticket_id=${ticketId}`,
         type: 'GET',
         headers: {
           Authorization: `Bearer ${this.quivrApiKey}`

zendesk_app/src/app/types/zendesk.d.ts

@@ -107,6 +107,7 @@ export interface Autodraft {
     is_autosendable?: boolean
     is_accepted: boolean | null
   }
+  context_is_enough: boolean
 }
 
 export interface UpdateTicketAnswer {