fix: Section generate issue fix

frontend/src/api/api.ts

@@ -372,14 +372,6 @@ export const historyMessageFeedback = async (messageId: string, feedback: string
 }
 
 export const sectionGenerate = async (options: SectionGenerateRequest): Promise<Response> => {
-  // set timeout to 10 seconds
-  const abortController = new AbortController()
-  const abortSignal = abortController.signal
-
-  const timeout = setTimeout(() => {
-    abortController.abort()
-  }, 10000)
-
   let body = JSON.stringify({
     sectionTitle: options.sectionTitle,
     sectionDescription: options.sectionDescription
@@ -390,15 +382,12 @@ export const sectionGenerate = async (options: SectionGenerateRequest): Promise<
     headers: {
       'Content-Type': 'application/json'
     },
-    body: body,
-    signal: abortSignal
+    body: body
   })
     .then(res => {
-      clearTimeout(timeout)
       return res
     })
     .catch(_err => {
-      clearTimeout(timeout)
       console.error('There was an issue fetching your data.')
       return new Response(
         JSON.stringify({ section_content: 'There was an issue fetching your data. Please try again.' })

frontend/src/components/ChatHistory/ChatHistoryList.test.tsx

@@ -25,6 +25,8 @@ const mockState = {
   draftedDocumentTitle: '',
   isGenerating: false,
   isRequestInitiated: false,
+  failedSections : [],
+  isFailedReqInitiated : false
 };
 
 const renderChatHistoryList = (stateOverride = {}) => {

frontend/src/components/ChatHistory/ChatHistoryPanel.test.tsx

@@ -52,6 +52,8 @@ const mockState = {
   draftedDocumentTitle: 'Some Title',
   isGenerating: false,
   isRequestInitiated: false,
+  failedSections : [],
+  isFailedReqInitiated : false
 };
 
 const mockDispatch = jest.fn();

frontend/src/components/DraftCards/SectionCard.test.tsx

@@ -53,7 +53,9 @@ const mockState = {
   draftedDocumentTitle: '',
 
   isGenerating: false,
-  isRequestInitiated: false
+  isRequestInitiated: false,
+  failedSections : [],
+  isFailedReqInitiated : false
 }
 
 const renderWithContext = (idx = 0) =>

frontend/src/components/DraftCards/SectionCard.tsx

@@ -138,32 +138,72 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     setCharCount(sectionContent.length)
   }, [location])
 
+
+  useEffect(() => {
+    if (appStateContext.state?.failedSections.length >0 && appStateContext.state?.failedSections[0].title === sectionTitle && isLoading && !appStateContext.state.isFailedReqInitiated) {
+      console.log("appStateContext.state?.failedSections", appStateContext.state?.failedSections);
+      const tempItem = {
+        title: sectionTitle,
+        description: sectionDescription,
+        content: sectionContent
+      }
+        appStateContext?.dispatch({ type: 'REMOVED_FAILED_SECTION', payload: {section : tempItem} })
+        appStateContext?.dispatch({ type: 'UPDATE_SECTION_API_REQ_STATUS', payload:  true })
+        fetchSectionContent(sectionTitle,sectionDescription, 'failed');      
+    }
+  }, [appStateContext.state.failedSections]);
+
   const handleOpenChange: PopoverProps['onOpenChange'] = (e, data) => setIsPopoverOpen(data.open || false)
 
-  async function fetchSectionContent(sectionTitle: string, sectionDescription: string) {
+  async function fetchSectionContent(sectionTitle: string, sectionDescription: string , isReqFrom = '') {
     setIsLoading(true)
     const sectionGenerateRequest: SectionGenerateRequest = { sectionTitle, sectionDescription }
 
     const response = await sectionGenerate(sectionGenerateRequest)
     const responseBody = await response.json()
 
-    const updatedSection: Section = {
-      title: sectionTitle,
-      description: sectionDescription,
-      content: responseBody.section_content
-    }
-    appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
-    let content = updatedSection.content || ''
+    if(responseBody?.error?.includes("429")) {
+      console.log("retriggerd !!!")
+      const failedSectionItems = {
+        title: sectionTitle,
+        description: sectionDescription,
+        content: sectionContent
+      }
+      appStateContext?.dispatch({ type: 'ADD_FAILED_SECTION', payload:  failedSectionItems })
+      if(isReqFrom == 'failed')
+      appStateContext?.dispatch({ type: 'UPDATE_SECTION_API_REQ_STATUS', payload:  false })
+
+      setTimeout(()=>{
+      },5000)
+
+    }else{
+      const updatedSection: Section = {
+        title: sectionTitle,
+        description: sectionDescription,
+        content: responseBody.section_content
+      }
+      appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
+      let content = updatedSection.content || ''
+
+      // limit the character count to 2000
+      if (content.length > sectionCharacterLimit) {
+        content = content.slice(0, sectionCharacterLimit)
+      }
+
+      setCharCount(content.length)
+      setIsLoading(false)
+
+      appStateContext?.dispatch({ type: 'REMOVED_FAILED_SECTION', payload: {section : updatedSection} })
 
-    // limit the character count to 2000
-    if (content.length > sectionCharacterLimit) {
-      content = content.slice(0, sectionCharacterLimit)
+      if(isReqFrom == 'failed')
+        appStateContext?.dispatch({ type: 'UPDATE_SECTION_API_REQ_STATUS', payload:  false })
     }
 
-    setCharCount(content.length)
-    setIsLoading(false)
+
   }
 
+
+
   useEffect(() => {
     if (sectionContent === '' && !isLoading && !isManuallyCleared) {
       fetchSectionContent(sectionTitle, sectionDescription)

frontend/src/components/Sidebar/Sidebar.test.tsx

@@ -52,6 +52,8 @@ const mockState = {
   draftedDocumentTitle: '',
   isGenerating: false,
   isRequestInitiated: false,
+  failedSections : [],
+  isFailedReqInitiated : false
 };
 const mockState2 = {
   isChatHistoryOpen: false,

frontend/src/pages/draft/Draft.tsx

@@ -1,12 +1,13 @@
-import { useContext } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import styles from './Draft.module.css'
 import { useLocation, useNavigate } from 'react-router-dom'
 import TitleCard from '../../components/DraftCards/TitleCard'
 import SectionCard from '../../components/DraftCards/SectionCard'
 import { Document, Packer, Paragraph, TextRun } from 'docx'
 import { saveAs } from 'file-saver'
 import { AppStateContext } from '../../state/AppProvider'
-import { CommandBarButton, Stack } from '@fluentui/react'
+import { CommandBarButton, Stack } from '@fluentui/react';
+import { Section } from '../../api/models'
 
 const Draft = (): JSX.Element => {
   const appStateContext = useContext(AppStateContext)
@@ -16,9 +17,24 @@ const Draft = (): JSX.Element => {
   // get draftedDocument from context
   const draftedDocument = appStateContext?.state.draftedDocument
   const sections = draftedDocument?.sections ?? []
+
+  const [sectionItems , setSectionItems] = useState<Section[]>([])
   const aiWarningLabel = 'AI-generated content may be incorrect'
 
   // redirect to home page if draftedDocument is empty
+
+  useEffect(() => {
+    sections.forEach((item, index) => {
+      setTimeout(() => {
+        setSectionItems((prev) => [...prev, item]); 
+      }, index * 500); 
+    });
+  }, []); 
+
+  useEffect(()=>{
+    console.log("sectionItems", sectionItems)
+  },[sectionItems])
+
   if (!draftedDocument) {
     navigate('/')
   }
@@ -100,7 +116,7 @@ const Draft = (): JSX.Element => {
   return (
     <Stack className={styles.container}>
       <TitleCard />
-      {(sections ?? []).map((_, index) => (
+      {(sectionItems ?? []).map((_, index : any) => (
         <SectionCard key={index} sectionIdx={index} />
       ))}
       <Stack className={styles.buttonContainer}>

frontend/src/state/AppProvider.tsx

@@ -30,7 +30,9 @@ export interface AppState {
   draftedDocument: DraftedDocument | null
   draftedDocumentTitle: string
   isGenerating: boolean
-  isRequestInitiated : boolean
+  isRequestInitiated : boolean,
+  failedSections : Section[],
+  isFailedReqInitiated : boolean,
 }
 
 export type Action =
@@ -59,6 +61,10 @@ export type Action =
   | { type: 'GENERATE_ISLODING'; payload: boolean }
   | { type: 'SET_IS_REQUEST_INITIATED'; payload: boolean }
 
+  | { type: 'ADD_FAILED_SECTION'; payload: Section }
+  | { type: 'REMOVED_FAILED_SECTION'; payload: {section : Section} }
+  | { type: 'UPDATE_SECTION_API_REQ_STATUS'; payload: boolean }
+
 const initialState: AppState = {
   isChatHistoryOpen: false,
   chatHistoryLoadingState: ChatHistoryLoadingState.Loading,
@@ -77,6 +83,8 @@ const initialState: AppState = {
   draftedDocumentTitle: '',
   isGenerating: false,
   isRequestInitiated: false,
+  failedSections : [],
+  isFailedReqInitiated : false
 }
 
 export const AppStateContext = createContext<

frontend/src/state/AppReducer.tsx

@@ -105,6 +105,19 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
       return { ...state, isGenerating: action.payload }
       case 'SET_IS_REQUEST_INITIATED' : 
       return {...state, isRequestInitiated : action.payload}
+    case 'ADD_FAILED_SECTION':
+       var tempFailedSections = [...state.failedSections];
+       const exists = tempFailedSections.some((item) => item.title === action.payload.title);
+       if (!exists) 
+        tempFailedSections.push(action.payload);
+        return { ...state , failedSections : [...tempFailedSections]  }
+     case 'REMOVED_FAILED_SECTION' : 
+      var tempFailedSections = [...state.failedSections];
+      tempFailedSections = state.failedSections.filter((item) => item.title !== action.payload.section.title);
+      return { ...state , failedSections : [...tempFailedSections] }
+    case 'UPDATE_SECTION_API_REQ_STATUS' : 
+      return {...state, isFailedReqInitiated : action.payload}
+
     default:
       return state
   }

frontend/src/test/test.utils.tsx

@@ -19,6 +19,8 @@ const defaultMockState = {
   draftedDocumentTitle: '',
   isGenerating: false,
   isRequestInitiated: false,
+  failedSections : [],
+  isFailedReqInitiated : false
 };
 
 // Create a custom render function