Merge pull request #29 from microsoft/adesousa_microsoft/template-generation-update

generate template loading state fix

Author: andrewldesousa

frontend/src/components/DraftCards/SectionCard.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react'
 import { Stack } from "@fluentui/react"
+import { AppStateContext } from '../../state/AppProvider'
 import { sectionGenerate, SectionGenerateRequest } from '../../api';
 import { Section } from '../../api/models'
 import { Spinner } from "@fluentui/react";
@@ -10,9 +11,7 @@ import { Textarea, makeStyles, Text, Popover, PopoverSurface, PopoverTrigger, Bu
 
 
 interface SectionCardProps {
-    section: Section;
-    onValueChange: (key: number, value: string) => void;
-    index: number;
+    sectionIdx: number
 }
 
 const useStyles = makeStyles({
@@ -83,34 +82,41 @@ const useStyles = makeStyles({
 
 });
 
-const SectionCard: React.FC<SectionCardProps> = ({ section, onValueChange, index }) => {
+const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     const classes = useStyles()
     const [isLoading, setIsLoading] = React.useState(false)
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
-    const [textareaValue, setTextareaValue] = useState(section.content);
+    const appStateContext = React.useContext(AppStateContext)
+
+    if (!appStateContext) { throw new Error('useAppState must be used within a AppStateProvider') }
+    
+    const section = appStateContext.state.draftedDocument?.sections[sectionIdx]
+    if (!section) { throw new Error('Section not found') }
 
     const sectionTitle = section.title
     const sectionDescription = section.description
     const sectionContent = section.content
 
-    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        onValueChange(index, event.target.value);
-        setTextareaValue(event.target.value);
-    };
-
     const handleOpenChange: PopoverProps["onOpenChange"] = (e, data) => setIsPopoverOpen(data.open || false);
 
     async function fetchSectionContent(sectionTitle: string, sectionDescription: string) {
         setIsLoading(true)
         const sectionGenerateRequest: SectionGenerateRequest = { sectionTitle, sectionDescription }
+        
         const response = await sectionGenerate(sectionGenerateRequest)
         const responseBody = await response.json()
-        setTextareaValue(responseBody.section_content)
+
+        const updatedSection: Section = { title: sectionTitle, description: sectionDescription, content: responseBody.section_content }
+        appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
+
         setIsLoading(false)
     }
 
+    if (sectionContent === '' && !isLoading) { fetchSectionContent(sectionTitle, sectionDescription) }
+
     return (
         <Stack
+            // add margin bottom unless it's the last section
             style={{ marginBottom: '1rem' }}
         >
             <Stack horizontal horizontalAlign="space-between" verticalAlign="center" style={{ marginBottom: '1rem' }} >
@@ -171,8 +177,12 @@ const SectionCard: React.FC<SectionCardProps> = ({ section, onValueChange, index
                         appearance="outline"
                         size="large"
                         defaultValue={sectionContent}
-                        value={textareaValue}
-                        onChange={handleChange}
+                        
+                        onChange={(e, data) => {
+                            const updatedSection: Section = { title: sectionTitle, description: sectionDescription, content: data.value || '' }
+                            appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
+                        }}
+
                         textarea={{ className: classes.sectionContentTextarea }}
                         style={{ width: '100%', height: '100%' }}
                     />
@@ -183,4 +193,4 @@ const SectionCard: React.FC<SectionCardProps> = ({ section, onValueChange, index
     )
 }
 
-export default SectionCard
+export default SectionCard

frontend/src/components/Sidebar/Sidebar.module.css

@@ -39,6 +39,19 @@
     padding: 8px, 8px, 8px, 8px;
 }
 
+.navigationButtonDisabled {
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    margin: 8px;
+
+    padding: 8px, 8px, 8px, 8px;
+    background: var(--Colors-Alpha-Black-5, #0000000D);
+
+    box-shadow: 0px 0px 2px 0px #0000003D;
+    box-shadow: 0px 2px 4px 0px #00000047;
+}
+
 .navigationButton:hover {
     background-color: #EDEBE9;
     cursor: pointer;

frontend/src/components/Sidebar/Sidebar.tsx

@@ -7,24 +7,42 @@ import { AppStateContext } from '../../state/AppProvider'
 import { getUserInfo } from '../../api'
 import { useNavigate, useLocation } from 'react-router-dom'
 
+
+enum NavigationButtonStates {
+  Active = 'active',
+  Inactive = 'inactive',
+  Disabled = 'disabled'
+}
+
 interface NavigationButtonProps {
   text: string
-  isActive: boolean
+  buttonState: NavigationButtonStates
   onClick: () => void
 }
 
-const NavigationButton = ({ text, isActive, onClick }: NavigationButtonProps) => {
-  const fontColor = isActive ? '#367AF6' : '#BEBBB8'
+const NavigationButton = ({ text, buttonState, onClick }: NavigationButtonProps) => {
+  const fontColor = {
+    [NavigationButtonStates.Active]: '#367AF6',
+    [NavigationButtonStates.Inactive]: '#BEBBB8',
+    [NavigationButtonStates.Disabled]: '#797775'
+  }[buttonState]
+
   const iconElements: { [key: string]: JSX.Element } = {
     'Browse': <News28Regular color={fontColor}/>,
     'Generate': <Book28Regular color={fontColor}/>,
     'Draft': <Notepad28Regular color={fontColor}/>
   }
 
+  const buttonStyle = {
+    [NavigationButtonStates.Active]: styles.navigationButtonActive,
+    [NavigationButtonStates.Inactive]: styles.navigationButton,
+    [NavigationButtonStates.Disabled]: styles.navigationButtonDisabled
+  }[buttonState]
+
   const icon = iconElements[text]
 
   return (
-    <Stack onClick={onClick} className={isActive ? styles.navigationButtonActive : styles.navigationButton}>
+    <Stack onClick={buttonState === NavigationButtonStates.Inactive ? onClick : () => {}} className={buttonStyle}>
       <Button appearance="transparent"
         size="large"
         icon={icon}
@@ -65,15 +83,19 @@ const Sidebar = (): JSX.Element => {
 
   const currentView = determineView()
 
+  // inactive, disabled, active
+  var draftButtonState = NavigationButtonStates.Disabled
+  if (appStateContext?.state.draftedDocument) { draftButtonState = currentView === 'draft' ? NavigationButtonStates.Active : NavigationButtonStates.Inactive }
+
   return (
     <Stack className={styles.sidebarContainer}>
       <Stack horizontal className={styles.avatarContainer}>
         <Avatar color="colorful" name={name} />
       </Stack>
       <Stack className={styles.sidebarNavigationContainer}>
-        <NavigationButton text={"Browse"} isActive={currentView === 'chat'} onClick={() => { navigate("/chat") }} />
-        <NavigationButton text={"Generate"} isActive={currentView === 'generate'} onClick={() => { navigate("/generate") }} />
-        <NavigationButton text={"Draft"} isActive={currentView === 'draft'} onClick={() => { navigate("/draft") }} />
+        <NavigationButton text={"Browse"} buttonState={currentView === 'chat' ? NavigationButtonStates.Active : NavigationButtonStates.Inactive} onClick={() => { navigate("/chat") }} />
+        <NavigationButton text={"Generate"} buttonState={currentView === 'generate' ? NavigationButtonStates.Active : NavigationButtonStates.Inactive} onClick={() => { navigate("/generate") }} />
+        <NavigationButton text={"Draft"} buttonState={draftButtonState} onClick={() => { navigate("/draft") }} />
       </Stack>
     </Stack>
   )

frontend/src/pages/chat/Chat.tsx

@@ -147,7 +147,9 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
   const navigate = useNavigate();
 
   const navigateToDraftPage = (parameter: DraftedDocument) => {
-    navigate('/draft', { state: { parameter } });
+    // update DraftedDocument in the state
+    appStateContext?.dispatch({ type: 'UPDATE_DRAFTED_DOCUMENT', payload: parameter });
+    navigate('/draft');
   };
 
   let assistantMessage = {} as ChatMessage
@@ -666,11 +668,9 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
       setDraftDocument(draftDocument)
     }
   }
+
   const generateDocument = async () => {
     if (draftDocument !== undefined) {
-      setIsProcessingTemplate(true)
-      await getTemplateContent()
-      setIsProcessingTemplate(false)
       navigateToDraftPage(draftDocument);
     }
   }
@@ -1023,8 +1023,8 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
                         background: '#F0F0F0'
                       }
                     }}
-                    className={styles.generateDocumentIcon
-                    }
+
+                    className={styles.generateDocumentIcon}
                     iconProps={{ iconName: 'Edit' }}
                     onClick={generateDocument} //Update for Document Generation
                     disabled={disabledButton()}

frontend/src/pages/draft/Draft.tsx

@@ -1,19 +1,24 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import styles from './Draft.module.css'
 import { useLocation } from 'react-router-dom';
 import TitleCard from '../../components/DraftCards/TitleCard'
 import SectionCard from '../../components/DraftCards/SectionCard'
 import { DraftedDocument } from '../../api'
 import { Document, Packer, Paragraph, TextRun } from 'docx';
 import { saveAs } from 'file-saver';
+import { AppStateContext } from "../../state/AppProvider";
 
-const Draft = (): JSX.Element => {
 
+const Draft = (): JSX.Element => {
+  const appStateContext = useContext(AppStateContext)
   const location = useLocation();
-  const { parameter } = location.state as { parameter: DraftedDocument };
-  const [sections, setSections] = useState(parameter.sections);
+  const { generateContentOnLoad } = location.state as { generateContentOnLoad: Boolean };
   const [title, setTitle] = useState('');
 
+  // get draftedDocument from context
+  const draftedDocument = appStateContext?.state.draftedDocument;
+  const sections = draftedDocument?.sections ?? [];
+
   const exportToWord = () => {
     const doc = new Document({
       sections: [
@@ -64,13 +69,6 @@ const Draft = (): JSX.Element => {
     });
   };
 
-  const handleValueChange = (key: number, value: string) => {
-    const updatedSections = sections.map((section, index) =>
-      index === key ? { ...section, content: value } : section
-    );
-    setSections(updatedSections);
-  };
-
   const handleTitleChange = (newTitle: string) => {
     setTitle(newTitle);
   };
@@ -83,10 +81,7 @@ const Draft = (): JSX.Element => {
       </div>
 
       <TitleCard onTitleChange={handleTitleChange} />
-      
-      {sections.map((section, index) => (
-        <SectionCard key={index} section={section} onValueChange={handleValueChange} index={index} />
-      ))}
+      {(sections ?? []).map((_, index) => (<SectionCard key={index} sectionIdx={index} />))}
     </div>
   )
 }

frontend/src/state/AppProvider.tsx

@@ -6,6 +6,7 @@ import {
   Conversation,
   CosmosDBHealth,
   CosmosDBStatus,
+  DraftedDocument,
   Section,
   Feedback,
   FrontendSettings,
@@ -25,6 +26,7 @@ export interface AppState {
   currentChat: Conversation | null
   frontendSettings: FrontendSettings | null
   feedbackState: { [answerId: string]: Feedback.Neutral | Feedback.Positive | Feedback.Negative }
+  draftedDocument: DraftedDocument | null
 }
 
 export type Action =
@@ -46,6 +48,7 @@ export type Action =
     }
   | { type: 'GET_FEEDBACK_STATE'; payload: string }
   | { type: 'UPDATE_SECTION'; payload: { sectionIdx: number; section: Section } }
+  | { type: 'UPDATE_DRAFTED_DOCUMENT'; payload: DraftedDocument }
 
 const initialState: AppState = {
   isChatHistoryOpen: false,
@@ -58,7 +61,8 @@ const initialState: AppState = {
     status: CosmosDBStatus.NotConfigured
   },
   frontendSettings: null,
-  feedbackState: {}
+  feedbackState: {},
+  draftedDocument: null
 }
 
 export const AppStateContext = createContext<

frontend/src/state/AppReducer.tsx

@@ -74,6 +74,27 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
           [action.payload.answerId]: action.payload.feedback
         }
       }
+    case 'UPDATE_SECTION':
+        const sectionIdx = action.payload.sectionIdx
+  
+        if (!state.draftedDocument?.sections || sectionIdx >= state.draftedDocument.sections.length) {
+          console.error('Section not found')
+          return state
+        }
+  
+        // create new sections list
+        const updatedSections = [...state.draftedDocument.sections]
+        updatedSections[sectionIdx] = action.payload.section
+  
+        return {
+          ...state,
+          draftedDocument: {
+            ...state.draftedDocument,
+            sections: updatedSections
+          }
+        }
+    case 'UPDATE_DRAFTED_DOCUMENT':
+      return { ...state, draftedDocument: action.payload }
     default:
       return state
   }