Skip to content

Commit c6ab9d9

Browse files
author
Shreyas-Microsoft
committed
handle history item list call once clicked
1 parent dc761f3 commit c6ab9d9

File tree

10 files changed

+96
-59
lines changed

10 files changed

+96
-59
lines changed

‎frontend/src/api/api.ts‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -50,44 +50,40 @@ export const fetchChatHistoryInit = (): Conversation[] | null => {
5050
}
5151

5252
export const historyList = async (offset = 0): Promise<Conversation[] | null> => {
53-
const response = await fetch(`/history/list?offset=${offset}`, {
54-
method: 'GET'
55-
})
56-
.then(async res => {
57-
const payload = await res.json()
58-
if (!Array.isArray(payload)) {
59-
console.error('There was an issue fetching your data.')
60-
return null
61-
}
62-
const conversations: Conversation[] = await Promise.all(
63-
payload.map(async (conv: any) => {
64-
let convMessages: ChatMessage[] = []
65-
convMessages = await historyRead(conv.id)
66-
.then(res => {
67-
return res
68-
})
69-
.catch(err => {
70-
console.error('error fetching messages: ', err)
71-
return []
72-
})
73-
const conversation: Conversation = {
74-
id: conv.id,
75-
title: conv.title,
76-
date: conv.createdAt,
77-
messages: convMessages
78-
}
79-
return conversation
80-
})
81-
)
82-
return conversations
83-
})
84-
.catch(_err => {
85-
console.error('There was an issue fetching your data.')
86-
return null
87-
})
53+
try {
54+
const res = await fetch(`/history/list?offset=${offset}`, { method: 'GET' });
55+
const payload = await res.json();
8856

89-
return response
90-
}
57+
if (!Array.isArray(payload)) {
58+
console.error('There was an issue fetching your data.');
59+
return null;
60+
}
61+
62+
const conversations: Conversation[] = await Promise.all(
63+
payload.map(async (conv: any) => {
64+
let convMessages: ChatMessage[] = [];
65+
66+
// try {
67+
// convMessages = await historyRead(conv.id);
68+
// } catch (err) {
69+
// console.error('Error fetching messages:', err);
70+
// }
71+
72+
return {
73+
id: conv.id,
74+
title: conv.title,
75+
date: conv.createdAt,
76+
messages: convMessages,
77+
};
78+
})
79+
);
80+
81+
return conversations;
82+
} catch (err) {
83+
console.error('There was an issue fetching your data.', err);
84+
return null;
85+
}
86+
};
9187

9288
export const historyRead = async (convId: string): Promise<ChatMessage[]> => {
9389
const response = await fetch('/history/read', {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ const mockState = {
2626
isGenerating: false,
2727
isRequestInitiated: false,
2828
failedSections : [],
29-
isFailedReqInitiated : false
29+
isFailedReqInitiated : false,
30+
isLoading : false,
3031
};
3132

3233
const renderChatHistoryList = (stateOverride = {}) => {

‎frontend/src/components/ChatHistory/ChatHistoryListItem.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
} from '@fluentui/react'
1919
import { useBoolean } from '@fluentui/react-hooks'
2020

21-
import { historyDelete, historyList, historyRename } from '../../api'
21+
import { historyDelete, historyList, historyRead, historyRename } from '../../api'
2222
import { Conversation } from '../../api/models'
2323
import { AppStateContext } from '../../state/AppProvider'
2424

@@ -121,9 +121,28 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
121121
setEditTitle(item?.title)
122122
}
123123

124-
const handleSelectItem = () => {
125-
onSelect(item)
126-
appStateContext?.dispatch({ type: 'UPDATE_CURRENT_CHAT', payload: item })
124+
const handleSelectItem = async () => {
125+
if (!item) return;
126+
127+
appStateContext?.dispatch({ type: 'SET_LOADING', payload: true });
128+
try {
129+
// Fetch messages for the selected chat
130+
const messages = await historyRead(item.id);
131+
132+
// Update the global state with the selected chat and its messages
133+
appStateContext?.dispatch({
134+
type: 'UPDATE_CURRENT_CHAT',
135+
payload: { ...item, messages }
136+
});
137+
138+
// Call the onSelect function with updated chat data
139+
onSelect({ ...item, messages });
140+
} catch (error) {
141+
console.error('Error fetching messages:', error);
142+
} finally {
143+
// Stop loading after messages are fetched
144+
appStateContext?.dispatch({ type: 'SET_LOADING', payload: false });
145+
}
127146
}
128147

129148
const truncatedTitle = item?.title?.length > 28 ? `${item.title.substring(0, 28)} ...` : item.title

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ const mockState = {
5353
isGenerating: false,
5454
isRequestInitiated: false,
5555
failedSections : [],
56-
isFailedReqInitiated : false
56+
isFailedReqInitiated : false,
57+
isLoading : false,
5758
};
5859

5960
const mockDispatch = jest.fn();

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ const mockState = {
5555
isGenerating: false,
5656
isRequestInitiated: false,
5757
failedSections : [],
58-
isFailedReqInitiated : false
58+
isFailedReqInitiated : false,
59+
isLoading : false,
5960
}
6061

6162
const renderWithContext = (idx = 0) =>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ const mockState = {
5353
isGenerating: false,
5454
isRequestInitiated: false,
5555
failedSections : [],
56-
isFailedReqInitiated : false
56+
isFailedReqInitiated : false,
57+
isLoading : false,
5758
};
5859
const mockState2 = {
5960
isChatHistoryOpen: false,

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import {
1010
IStackTokens,
1111
mergeStyleSets,
1212
IModalStyles,
13-
PrimaryButton
13+
PrimaryButton,
14+
Spinner,
15+
SpinnerSize
1416
} from '@fluentui/react'
1517
import { SquareRegular, ShieldLockRegular, ErrorCircleRegular } from '@fluentui/react-icons'
1618

@@ -46,6 +48,7 @@ import { AuthNotConfigure } from './Components/AuthNotConfigure'
4648
import { ChatMessageContainer } from './Components/ChatMessageContainer';
4749
import { parseErrorMessage, cleanJSON } from '../../helpers/helpers';
4850

51+
4952
const enum messageStatus {
5053
NotRunning = 'Not Running',
5154
Processing = 'Processing',
@@ -119,6 +122,11 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
119122
const [isModalOpen, setIsModalOpen] = useState(false)
120123
const [modalUrl, setModalUrl] = useState('');
121124
const [finalMessages, setFinalMessages] = useState<ChatMessage[]>([])
125+
if (!appStateContext || !appStateContext.state) {
126+
console.error("AppStateContext is undefined. Ensure AppProvider wraps this component.");
127+
return null; // Prevents execution if context is missing
128+
}
129+
const { currentChat } = appStateContext?.state;
122130

123131
const errorDialogContentProps = {
124132
type: DialogType.close,
@@ -829,19 +837,23 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
829837
) : (
830838
<Stack horizontal className={styles.chatRoot}>
831839
<div className={styles.chatContainer}>
832-
{!messages || messages.length < 1 ? (
840+
{ appStateContext.state.isLoading ? (
841+
<Stack horizontalAlign="center" verticalAlign="center" className={styles.chatLoadingState} style={{padding: 250, paddingBottom: 150}}>
842+
<Spinner label="Loading your chat..." size={SpinnerSize.large} />
843+
</Stack>
844+
): currentChat?.messages && currentChat.messages.length > 0 ? (
845+
<ChatMessageContainer
846+
messages={currentChat.messages}
847+
isLoading={isLoading}
848+
type={type}
849+
onShowCitation={onShowCitation}
850+
showLoadingMessage={showLoadingMessage}
851+
ref={chatMessageStreamEnd}
852+
/>
853+
) : (
833854
<Stack className={styles.chatEmptyState}>
834855
<h1 className={styles.chatEmptyStateTitle}>{ui?.chat_title}</h1>
835856
</Stack>
836-
) : (
837-
<ChatMessageContainer
838-
messages={messages}
839-
isLoading={isLoading}
840-
type={type}
841-
onShowCitation={onShowCitation}
842-
showLoadingMessage={showLoadingMessage}
843-
ref = {chatMessageStreamEnd}
844-
/>
845857
)}
846858

847859
<Stack horizontal className={styles.chatInput}>

‎frontend/src/state/AppProvider.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface AppState {
3333
isRequestInitiated : boolean,
3434
failedSections : Section[],
3535
isFailedReqInitiated : boolean,
36+
isLoading: boolean,
3637
}
3738

3839
export type Action =
@@ -64,6 +65,7 @@ export type Action =
6465
| { type: 'ADD_FAILED_SECTION'; payload: Section }
6566
| { type: 'REMOVED_FAILED_SECTION'; payload: {section : Section} }
6667
| { type: 'UPDATE_SECTION_API_REQ_STATUS'; payload: boolean }
68+
| { type: 'SET_LOADING'; payload: boolean }
6769

6870
const initialState: AppState = {
6971
isChatHistoryOpen: false,
@@ -84,7 +86,8 @@ const initialState: AppState = {
8486
isGenerating: false,
8587
isRequestInitiated: false,
8688
failedSections : [],
87-
isFailedReqInitiated : false
89+
isFailedReqInitiated : false,
90+
isLoading: false,
8891
}
8992

9093
export const AppStateContext = createContext<

‎frontend/src/state/AppReducer.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { Action, AppState } from './AppProvider'
33
// Define the reducer function
44
export const appStateReducer = (state: AppState, action: Action): AppState => {
55
switch (action.type) {
6+
case 'SET_LOADING':
7+
return { ...state, isLoading: action.payload }
68
case 'TOGGLE_CHAT_HISTORY':
79
return { ...state, isChatHistoryOpen: !state.isChatHistoryOpen }
810
case 'UPDATE_CURRENT_CHAT':
9-
return { ...state, currentChat: action.payload }
11+
return { ...state, currentChat: action.payload, isLoading: false }
1012
case 'UPDATE_CHAT_HISTORY_LOADING_STATE':
1113
return { ...state, chatHistoryLoadingState: action.payload }
1214
case 'UPDATE_CHAT_HISTORY':

‎frontend/src/test/test.utils.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const defaultMockState = {
2020
isGenerating: false,
2121
isRequestInitiated: false,
2222
failedSections : [],
23-
isFailedReqInitiated : false
23+
isFailedReqInitiated : false,
24+
isLoading : false,
2425
};
2526

2627
// Create a custom render function

0 commit comments

Comments
 (0)