Skip to content

Commit e849bcb

Browse files
Somesh-MicrosoftSomesh-Microsoft
committed
"Updated Sidebar and Chat components to handle disabled state and loading indicators; added isGenerating state to AppProvider and AppReducer"
1 parent deb656e commit e849bcb

File tree

5 files changed

+35
-10
lines changed

5 files changed

+35
-10
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
align-items: center;
4545
border-radius: 8px;
4646
margin: 8px;
47-
47+
cursor: not-allowed;
4848
padding: 8px, 8px, 8px, 8px;
4949
background: var(--Colors-Alpha-Black-5, #0000000D);
5050

‎frontend/src/components/Sidebar/Sidebar.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ const NavigationButton = ({ text, buttonState, onClick }: NavigationButtonProps)
2828
}[buttonState]
2929

3030
const iconElements: { [key: string]: JSX.Element } = {
31-
'Browse': <News28Regular color={fontColor}/>,
32-
'Generate': <Book28Regular color={fontColor}/>,
33-
'Draft': <Notepad28Regular color={fontColor}/>
31+
'Browse': <News28Regular color={fontColor} cursor={ buttonState === NavigationButtonStates.Disabled ? 'not-allowed': 'pointer'}/>,
32+
'Generate': <Book28Regular color={fontColor} cursor={ buttonState === NavigationButtonStates.Disabled ? 'not-allowed': 'pointer'}/>,
33+
'Draft': <Notepad28Regular color={fontColor} cursor={ buttonState === NavigationButtonStates.Disabled ? 'not-allowed': 'pointer'}/>
3434
}
3535

3636
const buttonStyle = {
@@ -58,6 +58,7 @@ const Sidebar = (): JSX.Element => {
5858
const navigate = useNavigate()
5959
const location = useLocation();
6060
const [name, setName] = useState<string>("")
61+
const [isLoading, setIsLoading] = useState<boolean>()
6162

6263
useEffect(() => {
6364
if (!appStateContext) { throw new Error('useAppState must be used within a AppStateProvider') }
@@ -72,6 +73,11 @@ const Sidebar = (): JSX.Element => {
7273
}
7374
}, [])
7475

76+
useEffect(() => {
77+
setIsLoading(appStateContext?.state.isGenerating)
78+
console.log(appStateContext?.state.isGenerating)
79+
}, [appStateContext?.state.isGenerating])
80+
7581
// determine url from react-router-dom
7682
const determineView = () => {
7783
const url = location.pathname
@@ -86,15 +92,14 @@ const Sidebar = (): JSX.Element => {
8692
// inactive, disabled, active
8793
var draftButtonState = NavigationButtonStates.Disabled
8894
if (appStateContext?.state.draftedDocument) { draftButtonState = currentView === 'draft' ? NavigationButtonStates.Active : NavigationButtonStates.Inactive }
89-
9095
return (
9196
<Stack className={styles.sidebarContainer}>
9297
<Stack horizontal className={styles.avatarContainer}>
93-
<Avatar color="colorful" name={name} />
98+
<Avatar color="colorful" name={name} />
9499
</Stack>
95-
<Stack className={styles.sidebarNavigationContainer}>
96-
<NavigationButton text={"Browse"} buttonState={currentView === 'chat' ? NavigationButtonStates.Active : NavigationButtonStates.Inactive} onClick={() => { navigate("/chat") }} />
97-
<NavigationButton text={"Generate"} buttonState={currentView === 'generate' ? NavigationButtonStates.Active : NavigationButtonStates.Inactive} onClick={() => { navigate("/generate") }} />
100+
<Stack className={styles.sidebarNavigationContainer}>
101+
<NavigationButton text={"Browse"} buttonState={currentView === 'chat' ? NavigationButtonStates.Active : (appStateContext?.state.isGenerating ? NavigationButtonStates.Disabled : NavigationButtonStates.Inactive)} onClick={() => { navigate("/chat") }} />
102+
<NavigationButton text={"Generate"} buttonState={currentView === 'generate' ? NavigationButtonStates.Active : (appStateContext?.state.isGenerating ? NavigationButtonStates.Disabled : NavigationButtonStates.Inactive)} onClick={() => { navigate("/generate") }} />
98103
<NavigationButton text={"Draft"} buttonState={draftButtonState} onClick={() => { navigate("/draft") }} />
99104
</Stack>
100105
</Stack>

‎frontend/src/pages/chat/Chat.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,10 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
155155
processTemplateResponse()
156156
}, [location])
157157

158+
useEffect(() => {
159+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: appStateContext?.state.isGenerating})
160+
}, [isLoading])
161+
158162
useEffect(() => {
159163
if (
160164
appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.Working &&
@@ -279,6 +283,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
279283

280284
const makeApiRequestWithoutCosmosDB = async (question: string, conversationId?: string) => {
281285
setIsLoading(true)
286+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: true })
282287
setShowLoadingMessage(true)
283288
const abortController = new AbortController()
284289
abortFuncs.current.unshift(abortController)
@@ -395,6 +400,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
395400
} finally {
396401
setIsLoading(false)
397402
setShowLoadingMessage(false)
403+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
398404
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
399405
setProcessMessages(messageStatus.Done)
400406
}
@@ -404,6 +410,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
404410

405411
const makeApiRequestWithCosmosDB = async (question: string, conversationId?: string) => {
406412
setIsLoading(true)
413+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: true })
407414
setShowLoadingMessage(true)
408415
const abortController = new AbortController()
409416
abortFuncs.current.unshift(abortController)
@@ -423,6 +430,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
423430
if (!conversation) {
424431
console.error('Conversation not found.')
425432
setIsLoading(false)
433+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
426434
setShowLoadingMessage(false)
427435
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
428436
return
@@ -468,6 +476,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
468476
} else {
469477
setMessages([...messages, userMessage, errorChatMsg])
470478
setIsLoading(false)
479+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
471480
setShowLoadingMessage(false)
472481
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
473482
return
@@ -529,6 +538,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
529538
if (!resultConversation) {
530539
console.error('Conversation not found.')
531540
setIsLoading(false)
541+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
532542
setShowLoadingMessage(false)
533543
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
534544
return
@@ -549,6 +559,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
549559
}
550560
if (!resultConversation) {
551561
setIsLoading(false)
562+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
552563
setShowLoadingMessage(false)
553564
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
554565
return
@@ -582,6 +593,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
582593
if (!resultConversation) {
583594
console.error('Conversation not found.')
584595
setIsLoading(false)
596+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
585597
setShowLoadingMessage(false)
586598
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
587599
return
@@ -598,6 +610,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
598610
}
599611
setMessages([...messages, userMessage, errorChatMsg])
600612
setIsLoading(false)
613+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
601614
setShowLoadingMessage(false)
602615
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
603616
return
@@ -612,6 +625,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
612625
}
613626
if (!resultConversation) {
614627
setIsLoading(false)
628+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
615629
setShowLoadingMessage(false)
616630
abortFuncs.current = abortFuncs.current.filter(a => a !== abortController)
617631
return
@@ -747,6 +761,7 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
747761
abortFuncs.current.forEach(a => a.abort())
748762
setShowLoadingMessage(false)
749763
setIsLoading(false)
764+
appStateContext?.dispatch({ type: 'GENERATE_ISLODING', payload: false })
750765
}
751766

752767
useEffect(() => {

‎frontend/src/state/AppProvider.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface AppState {
2929
feedbackState: { [answerId: string]: Feedback.Neutral | Feedback.Positive | Feedback.Negative }
3030
draftedDocument: DraftedDocument | null
3131
draftedDocumentTitle: string
32+
isGenerating: boolean
3233
}
3334

3435
export type Action =
@@ -54,6 +55,7 @@ export type Action =
5455
| { type: 'UPDATE_BROWSE_CHAT'; payload: Conversation | null }
5556
| { type: 'UPDATE_GENERATE_CHAT'; payload: Conversation | null }
5657
| { type: 'UPDATE_DRAFTED_DOCUMENT_TITLE'; payload: string }
58+
| { type: 'GENERATE_ISLODING'; payload: boolean }
5759

5860
const initialState: AppState = {
5961
isChatHistoryOpen: false,
@@ -70,7 +72,8 @@ const initialState: AppState = {
7072
frontendSettings: null,
7173
feedbackState: {},
7274
draftedDocument: null,
73-
draftedDocumentTitle: ''
75+
draftedDocumentTitle: '',
76+
isGenerating: false
7477
}
7578

7679
export const AppStateContext = createContext<

‎frontend/src/state/AppReducer.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
101101
return { ...state, generateChat: action.payload }
102102
case 'UPDATE_DRAFTED_DOCUMENT_TITLE':
103103
return { ...state, draftedDocumentTitle: action.payload }
104+
case 'GENERATE_ISLODING':
105+
return { ...state, isGenerating: action.payload }
104106
default:
105107
return state
106108
}

0 commit comments

Comments
 (0)