Merge pull request microsoft#13 from Roopan-Microsoft/Bug10177

'fix' Edit and Delete btn disable when message is generating, After generating the response in Generate section restricting user to move to another sections.

Author: Roopan-Microsoft

frontend/src/components/ChatHistory/ChatHistoryListItem.tsx

@@ -60,7 +60,8 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
   const [errorRename, setErrorRename] = useState<string | undefined>(undefined)
   const [textFieldFocused, setTextFieldFocused] = useState(false)
   const textFieldRef = useRef<ITextField | null>(null)
-
+  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
+  
   const appStateContext = React.useContext(AppStateContext)
   const isSelected = item?.id === appStateContext?.state.currentChat?.id
   const dialogContentProps = {
@@ -95,6 +96,12 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
     }
   }, [appStateContext?.state.currentChat?.id, item?.id])
 
+  useEffect(()=>{
+    let v = appStateContext?.state.isRequestInitiated;
+    if(v!=undefined)
+      setIsButtonDisabled(v && isSelected)
+  },[appStateContext?.state.isRequestInitiated])
+
   const onDelete = async () => {
     const response = await historyDelete(item.id)
     if (!response.ok) {
@@ -267,13 +274,15 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
                   iconProps={{ iconName: 'Delete' }}
                   title="Delete"
                   onClick={toggleDeleteDialog}
+                  disabled={isButtonDisabled}
                   onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
                 />
                 <IconButton
                   className={styles.itemButton}
                   iconProps={{ iconName: 'Edit' }}
                   title="Edit"
                   onClick={onEdit}
+                  disabled={isButtonDisabled}
                   onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
                 />
               </Stack>

frontend/src/components/Sidebar/Sidebar.tsx

@@ -85,6 +85,14 @@ const Sidebar = (): JSX.Element => {
   const navigate = useNavigate()
   const location = useLocation()
   const [name, setName] = useState<string>('')
+  useEffect(() => {
+  if(appStateContext?.state.isRequestInitiated == true){
+    NavigationButtonStates.Disabled
+  }
+  else{
+    NavigationButtonStates.Active
+  }
+})
 
   useEffect(() => {
     if (!appStateContext) {
@@ -113,7 +121,12 @@ const Sidebar = (): JSX.Element => {
   }
 
   const currentView = determineView()
-  const isGenerating = appStateContext?.state.isGenerating
+    // inactive, disabled, active
+    var draftButtonState = NavigationButtonStates.Disabled
+    if (appStateContext?.state.draftedDocument) {
+      draftButtonState = currentView === 'draft' ? NavigationButtonStates.Active : NavigationButtonStates.Inactive
+    }
+  const isGenerating = appStateContext?.state.isRequestInitiated
 
   return (
     <Stack className={styles.sidebarContainer}>
@@ -125,9 +138,9 @@ const Sidebar = (): JSX.Element => {
           text={'Browse'}
           buttonState={
             currentView === 'chat'
-              ? NavigationButtonStates.Active
-              : appStateContext?.state.isGenerating
-                ? NavigationButtonStates.Disabled
+            ? NavigationButtonStates.Active
+            : appStateContext?.state.isRequestInitiated
+              ? NavigationButtonStates.Disabled
                 : NavigationButtonStates.Inactive
           }
           onClick={() => {
@@ -141,9 +154,10 @@ const Sidebar = (): JSX.Element => {
           buttonState={
             currentView === 'generate'
               ? NavigationButtonStates.Active
-              : appStateContext?.state.isGenerating
+              : appStateContext?.state.isRequestInitiated
                 ? NavigationButtonStates.Disabled
                 : NavigationButtonStates.Inactive
+
           }
           onClick={() => {
             if (!isGenerating) {
@@ -153,17 +167,10 @@ const Sidebar = (): JSX.Element => {
         />
         <NavigationButton
           text={'Draft'}
-          buttonState={
-            currentView === 'draft'
-              ? NavigationButtonStates.Active
-              : appStateContext?.state.isGenerating
-                ? NavigationButtonStates.Disabled
-                : NavigationButtonStates.Inactive
-          }
+          buttonState={draftButtonState}
+         
           onClick={() => {
-            if (!isGenerating) {
-              navigate('/draft')
-            }
+            navigate('/draft')
           }}
         />
       </Stack>

frontend/src/pages/chat/Chat.tsx

@@ -287,6 +287,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
     setShowLoadingMessage(true)
     const abortController = new AbortController()
     abortFuncs.current.unshift(abortController)
+    appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: true })
 
     const userMessage: ChatMessage = {
       id: uuid(),
@@ -402,6 +403,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
       setShowLoadingMessage(false)
       appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
       abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
+      appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: false })
       setProcessMessages(messageStatus.Done)
     }
 
@@ -414,6 +416,8 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
     setShowLoadingMessage(true)
     const abortController = new AbortController()
     abortFuncs.current.unshift(abortController)
+    appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: true })
+
 
     const userMessage: ChatMessage = {
       id: uuid(),
@@ -640,6 +644,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
       setShowLoadingMessage(false)
       abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
       setProcessMessages(messageStatus.Done)
+      appStateContext?.dispatch({ type: 'SET_IS_REQUEST_INITIATED', payload: false })
     }
     return abortController.abort()
   }

frontend/src/state/AppProvider.tsx

@@ -30,6 +30,7 @@ export interface AppState {
   draftedDocument: DraftedDocument | null
   draftedDocumentTitle: string
   isGenerating: boolean
+  isRequestInitiated : boolean
 }
 
 export type Action =
@@ -56,6 +57,7 @@ export type Action =
   | { type: 'UPDATE_GENERATE_CHAT'; payload: Conversation | null }
   | { type: 'UPDATE_DRAFTED_DOCUMENT_TITLE'; payload: string }
   | { type: 'GENERATE_ISLODING'; payload: boolean }
+  | { type: 'SET_IS_REQUEST_INITIATED'; payload: boolean }
 
 const initialState: AppState = {
   isChatHistoryOpen: false,
@@ -73,7 +75,8 @@ const initialState: AppState = {
   feedbackState: {},
   draftedDocument: null,
   draftedDocumentTitle: '',
-  isGenerating: false
+  isGenerating: false,
+  isRequestInitiated: false,
 }
 
 export const AppStateContext = createContext<

frontend/src/state/AppReducer.tsx

@@ -103,6 +103,8 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
       return { ...state, draftedDocumentTitle: action.payload }
     case 'GENERATE_ISLODING':
       return { ...state, isGenerating: action.payload }
+      case 'SET_IS_REQUEST_INITIATED' : 
+      return {...state, isRequestInitiated : action.payload}
     default:
       return state
   }