Latest bug fixes.

Author: hunterjam

README.md

@@ -21,7 +21,7 @@ It leverages Azure Open AI Service and Azure AI Search, to identify relevant doc
 
 This example focuses on a generic use case - chat with your own data, generate a document template using your own data, and exporting the document in a docx format.
 
-The sample data is sourced from 1) generic AI-generated promissory notes and 2) a select set of research and grants published on PubMed and NIH.
+The sample data is sourced from generic AI-generated promissory notes.
 The documents are intended for use as sample data only.
 
 <br/>

docs/TRANSPARENCY_FAQ.md

@@ -3,7 +3,7 @@
     This solution accelerator is an open-source GitHub Repository to help create AI assistants using Azure Open AI Service and Azure AI Search. This can be used by anyone looking for reusable architecture and code snippets to build AI assistants with their own enterprise data. The repository showcases a generic scenario of a user who wants to generate a document template based on a sample set of data.
 
 - ### What can Build your own copilot - Generic Solution Accelerator do? 
-    The sample solution included focuses on a generic use case - chat with your own data, generate a document template using your own data, and exporting the document in a docx format. The sample data is sourced from 1) generic AI-generated promissory notes and 2) a select set of research and grants published on PubMed and NIH. The documents are intended for use as sample data only. The sample solution takes user input in text format and returns LLM responses in text format up to 800 tokens. It uses prompt flow to search data from AI search vector store, summarize the retrieved documents with Azure Open AI.
+    The sample solution included focuses on a generic use case - chat with your own data, generate a document template using your own data, and exporting the document in a docx format. The sample data is sourced from generic AI-generated promissory notes. The documents are intended for use as sample data only. The sample solution takes user input in text format and returns LLM responses in text format up to 800 tokens. It uses prompt flow to search data from AI search vector store, summarize the retrieved documents with Azure Open AI.
 
 - ### What is/are Build your own copilot - Generic Solution Accelerator’s intended use(s)?  
     This repository is to be used only as a solution accelerator following the open-source license terms listed in the GitHub repository. The example scenario’s intended purpose is to help users generate a document template to perform their work more efficiently.

frontend/src/components/DraftCards/SectionCard.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { Stack } from '@fluentui/react'
 import { AppStateContext } from '../../state/AppProvider'
 import { sectionGenerate, SectionGenerateRequest } from '../../api'
@@ -8,6 +8,7 @@ import GenerateIcon from '../../assets/Generate.svg'
 import type { PopoverProps } from '@fluentui/react-components'
 import { Dismiss16Regular } from '@fluentui/react-icons'
 import { Textarea, makeStyles, Text, Popover, PopoverSurface, PopoverTrigger, Button } from '@fluentui/react-components'
+import { useLocation } from 'react-router-dom'
 
 interface SectionCardProps {
   sectionIdx: number
@@ -56,7 +57,7 @@ const useStyles = makeStyles({
     margin: '0.5rem 0',
     padding: '0.5rem',
     '&::selection': {
-      backgroundColor: '#FFD6A5',
+      backgroundColor: '#FFD6A5'
     }
   },
 
@@ -111,12 +112,13 @@ const useStyles = makeStyles({
 })
 
 const SectionCard = ({ sectionIdx }: SectionCardProps) => {
+  const location = useLocation()
   const classes = useStyles()
   const [isLoading, setIsLoading] = useState(false)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const appStateContext = useContext(AppStateContext)
   const [charCount, setCharCount] = useState(0)
-  const [wasInitialized, setWasInitialized] = useState(false)
+  const [isManuallyCleared, setIsManuallyCleared] = useState(false)
 
   if (!appStateContext) {
     throw new Error('useAppState must be used within a AppStateProvider')
@@ -132,6 +134,10 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
   const sectionContent = section.content
   const sectionCharacterLimit = 2000
 
+  useEffect(() => {
+    setCharCount(sectionContent.length)
+  }, [location])
+
   const handleOpenChange: PopoverProps['onOpenChange'] = (e, data) => setIsPopoverOpen(data.open || false)
 
   async function fetchSectionContent(sectionTitle: string, sectionDescription: string) {
@@ -148,7 +154,7 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     }
     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)
@@ -158,10 +164,11 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     setIsLoading(false)
   }
 
-  if (sectionContent === '' && !isLoading && !wasInitialized) {
-    fetchSectionContent(sectionTitle, sectionDescription)
-    setWasInitialized(true)
-  }
+  useEffect(() => {
+    if (sectionContent === '' && !isLoading && !isManuallyCleared) {
+      fetchSectionContent(sectionTitle, sectionDescription)
+    }
+  }, [sectionContent, isLoading, isManuallyCleared])
 
   return (
     <Stack className={classes.sectionCard}>
@@ -191,7 +198,7 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
               appearance="outline"
               size="large"
               defaultValue={sectionDescription}
-              className={ classes.popoverTextarea }
+              className={classes.popoverTextarea}
               textarea={{ className: classes.popoverTextarea }}
             />
 
@@ -229,6 +236,11 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
               maxLength={sectionCharacterLimit}
               onChange={(e, data) => {
                 const content = data.value || ''
+                if (content === '') {
+                  setIsManuallyCleared(true)
+                } else {
+                  setIsManuallyCleared(false)
+                }
                 setCharCount(content.length)
                 const updatedSection: Section = {
                   title: sectionTitle,

frontend/src/components/DraftCards/TitleCard.tsx

@@ -1,10 +1,9 @@
 import { Stack, TextField } from '@fluentui/react'
 import { makeStyles, Text } from '@fluentui/react-components'
-import React from 'react'
+import React, { useContext } from 'react'
+import { AppStateContext } from '../../state/AppProvider'
 
-interface TitleCardProps {
-  onTitleChange: (value: string) => void
-}
+interface TitleCardProps {}
 
 const useStyles = makeStyles({
   sectionTitle: {
@@ -15,12 +14,19 @@ const useStyles = makeStyles({
   }
 })
 
-const TitleCard: React.FC<TitleCardProps> = ({ onTitleChange }) => {
+const TitleCard: React.FC<TitleCardProps> = () => {
+  const appStateContext = useContext(AppStateContext)
   const classes = useStyles()
   const handleChange = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    onTitleChange(event.currentTarget.value)
+    appStateContext?.dispatch({ type: 'UPDATE_DRAFTED_DOCUMENT_TITLE', payload: event.currentTarget.value })
+  }
+
+  if (!appStateContext) {
+    throw new Error('useAppState must be used within a AppStateProvider')
   }
 
+  const title = appStateContext.state.draftedDocumentTitle === null ? '' : appStateContext.state.draftedDocumentTitle
+
   return (
     <Stack style={{ marginBottom: '1rem' }}>
       <Text className={classes.sectionTitle}>Draft Document</Text>
@@ -29,6 +35,7 @@ const TitleCard: React.FC<TitleCardProps> = ({ onTitleChange }) => {
         onChange={handleChange}
         placeholder="Enter title here"
         styles={{ root: { width: '100%' } }} // Adjust styles as needed
+        value={title}
       />
     </Stack>
   )

frontend/src/pages/chat/Chat.tsx

@@ -63,7 +63,7 @@ const enum contentTemplateSections {
   NewLine = '\n\n',
   Intro = 'The proposal will include the following sections:',
   Closing = 'Does this look good? If so, you can **generate the document** now. You can also ask me to **add an item** or **change the order of the sections**.',
-  JSONParseError = 'Could not create a template, please try again and ask for a document type.',
+  JSONParseError = 'I was unable to find content related to your query and could not generate a template. Please try again.',
   JSONStructureError = 'Unable to render the sections within the template. Please try again.'
 }
 
@@ -80,8 +80,7 @@ const modalStyles: IModalStyles = {
     borderRadius: '8px'
   },
   root: undefined,
-  scrollableContent: 
-  {
+  scrollableContent: {
     minWidth: '800px'
   },
   layer: undefined,
@@ -931,7 +930,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
                         <Answer
                           answer={{
                             answer:
-                              type === ChatType.Browse ? answer.content : generateTemplateSections(jsonDraftDocument),
+                              type === ChatType.Browse ? answer.content : generateTemplateSections(answer.content),
                             citations: parseCitationFromMessage(messages[index - 1]),
                             message_id: answer.id,
                             feedback: answer.feedback
@@ -984,31 +983,32 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
                 </Stack>
               )}
               <Stack>
-                {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && type === ChatType.Template && (
-                  <CommandBarButton
-                    role="button"
-                    styles={{
-                      icon: {
-                        color: '#FFFFFF'
-                      },
-                      iconDisabled: {
-                        color: '#BDBDBD !important'
-                      },
-                      root: {
-                        color: '#FFFFFF',
-                        background: '#0F6CBD'
-                      },
-                      rootDisabled: {
-                        background: '#F0F0F0'
-                      }
-                    }}
-                    className={styles.newChatIcon}
-                    iconProps={{ iconName: 'Add' }}
-                    onClick={newChat}
-                    disabled={disabledButton()}
-                    aria-label="start a new chat button"
-                  />
-                )}
+                {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured &&
+                  type === ChatType.Template && (
+                    <CommandBarButton
+                      role="button"
+                      styles={{
+                        icon: {
+                          color: '#FFFFFF'
+                        },
+                        iconDisabled: {
+                          color: '#BDBDBD !important'
+                        },
+                        root: {
+                          color: '#FFFFFF',
+                          background: '#0F6CBD'
+                        },
+                        rootDisabled: {
+                          background: '#F0F0F0'
+                        }
+                      }}
+                      className={styles.newChatIcon}
+                      iconProps={{ iconName: 'Add' }}
+                      onClick={newChat}
+                      disabled={disabledButton()}
+                      aria-label="start a new chat button"
+                    />
+                  )}
                 <CommandBarButton
                   role="button"
                   styles={{
@@ -1026,7 +1026,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
                       background: '#F0F0F0'
                     }
                   }}
-                  className={ styles.clearChatBroom }
+                  className={styles.clearChatBroom}
                   iconProps={{ iconName: 'Broom' }}
                   onClick={
                     appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured &&
@@ -1079,7 +1079,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
                   onClick={generateDocument} //Update for Document Generation
                   disabled={draftDocument === undefined || disabledButton()}
                   aria-label="generate draft"
-                  title='Generate Draft'
+                  title="Generate Draft"
                 />
               )}
             </Stack>

frontend/src/pages/draft/Draft.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext } from 'react'
+import { useContext } from 'react'
 import styles from './Draft.module.css'
 import { useLocation, useNavigate } from 'react-router-dom'
 import TitleCard from '../../components/DraftCards/TitleCard'
@@ -11,7 +11,6 @@ import { CommandBarButton, Stack } from '@fluentui/react'
 const Draft = (): JSX.Element => {
   const appStateContext = useContext(AppStateContext)
   const location = useLocation()
-  const [title, setTitle] = useState('')
   const navigate = useNavigate()
 
   // get draftedDocument from context
@@ -33,7 +32,7 @@ const Draft = (): JSX.Element => {
             new Paragraph({
               children: [
                 new TextRun({
-                  text: title,
+                  text: getTitle(),
                   bold: true,
                   size: 24
                 }),
@@ -64,16 +63,19 @@ const Draft = (): JSX.Element => {
                       text: '',
                       break: 1 // Add a new line after the section title
                     }),
-                    ...section.content.split('\n').map((line, lineIndex) => [
-                      new TextRun({
-                        text: line,
-                        size: 16
-                      }),
-                      new TextRun({
-                        text: '',
-                        break: 1 // Add a new line after each line of content
-                      })
-                    ]).flat()
+                    ...section.content
+                      .split('\n')
+                      .map((line, lineIndex) => [
+                        new TextRun({
+                          text: line,
+                          size: 16
+                        }),
+                        new TextRun({
+                          text: '',
+                          break: 1 // Add a new line after each line of content
+                        })
+                      ])
+                      .flat()
                   ]
                 })
             )
@@ -83,21 +85,21 @@ const Draft = (): JSX.Element => {
     })
 
     Packer.toBlob(doc).then(blob => {
-      saveAs(blob, `DraftTemplate-${sanitizeTitle(title)}.docx`)
+      saveAs(blob, `DraftTemplate-${sanitizeTitle(getTitle())}.docx`)
     })
   }
 
-  const handleTitleChange = (newTitle: string) => {
-    setTitle(newTitle)
+  function getTitle() {
+    if (appStateContext === undefined) return ''
+    return appStateContext.state.draftedDocumentTitle === null ? '' : appStateContext.state.draftedDocumentTitle
   }
-
   function sanitizeTitle(title: string): string {
     return title.replace(/[^a-zA-Z0-9]/g, '')
   }
 
   return (
     <Stack className={styles.container}>
-      <TitleCard onTitleChange={handleTitleChange} />
+      <TitleCard />
       {(sections ?? []).map((_, index) => (
         <SectionCard key={index} sectionIdx={index} />
       ))}

frontend/src/state/AppProvider.tsx

@@ -1,5 +1,4 @@
-import React, { createContext, ReactNode, useEffect, 
-  useReducer } from 'react'
+import React, { createContext, ReactNode, useEffect, useReducer } from 'react'
 
 import {
   ChatHistoryLoadingState,
@@ -29,6 +28,7 @@ export interface AppState {
   frontendSettings: FrontendSettings | null
   feedbackState: { [answerId: string]: Feedback.Neutral | Feedback.Positive | Feedback.Negative }
   draftedDocument: DraftedDocument | null
+  draftedDocumentTitle: string
 }
 
 export type Action =
@@ -53,6 +53,7 @@ export type Action =
   | { type: 'UPDATE_DRAFTED_DOCUMENT'; payload: DraftedDocument }
   | { type: 'UPDATE_BROWSE_CHAT'; payload: Conversation | null }
   | { type: 'UPDATE_GENERATE_CHAT'; payload: Conversation | null }
+  | { type: 'UPDATE_DRAFTED_DOCUMENT_TITLE'; payload: string }
 
 const initialState: AppState = {
   isChatHistoryOpen: false,
@@ -68,7 +69,8 @@ const initialState: AppState = {
   },
   frontendSettings: null,
   feedbackState: {},
-  draftedDocument: null
+  draftedDocument: null,
+  draftedDocumentTitle: ''
 }
 
 export const AppStateContext = createContext<