Merge pull request microsoft#282 from microsoft/fetch-history-US

Roopan-Microsoft · web-flow · commit c3e807e1de44 · 2025-03-19T22:27:31.000+05:30
fix: fetch history on button click and not on web page load
diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
@@ -50,44 +50,40 @@ export const fetchChatHistoryInit = (): Conversation[] | null => {
 }
 
 export const historyList = async (offset = 0): Promise<Conversation[] | null> => {
-  const response = await fetch(`/history/list?offset=${offset}`, {
-    method: 'GET'
-  })
-    .then(async res => {
-      const payload = await res.json()
-      if (!Array.isArray(payload)) {
-        console.error('There was an issue fetching your data.')
-        return null
-      }
-      const conversations: Conversation[] = await Promise.all(
-        payload.map(async (conv: any) => {
-          let convMessages: ChatMessage[] = []
-          convMessages = await historyRead(conv.id)
-            .then(res => {
-              return res
-            })
-            .catch(err => {
-              console.error('error fetching messages: ', err)
-              return []
-            })
-          const conversation: Conversation = {
-            id: conv.id,
-            title: conv.title,
-            date: conv.createdAt,
-            messages: convMessages
-          }
-          return conversation
-        })
-      )
-      return conversations
-    })
-    .catch(_err => {
-      console.error('There was an issue fetching your data.')
-      return null
-    })
+  try {
+    const res = await fetch(`/history/list?offset=${offset}`, { method: 'GET' });
+    const payload = await res.json();
 
-  return response
-}
+    if (!Array.isArray(payload)) {
+      console.error('There was an issue fetching your data.');
+      return null;
+    }
+
+    const conversations: Conversation[] = await Promise.all(
+      payload.map(async (conv: any) => {
+        let convMessages: ChatMessage[] = [];
+        
+        // try {
+        //   convMessages = await historyRead(conv.id);
+        // } catch (err) {
+        //   console.error('Error fetching messages:', err);
+        // }
+
+        return {
+          id: conv.id,
+          title: conv.title,
+          date: conv.createdAt,
+          messages: convMessages,
+        };
+      })
+    );
+
+    return conversations;
+  } catch (err) {
+    console.error('There was an issue fetching your data.', err);
+    return null;
+  }
+};
 
 export const historyRead = async (convId: string): Promise<ChatMessage[]> => {
   const response = await fetch('/history/read', {
diff --git a/frontend/src/components/ChatHistory/ChatHistoryList.test.tsx b/frontend/src/components/ChatHistory/ChatHistoryList.test.tsx
@@ -26,7 +26,8 @@ const mockState = {
   isGenerating: false,
   isRequestInitiated: false,
   failedSections : [],
-  isFailedReqInitiated : false
+  isFailedReqInitiated : false,
+  isLoading : false,
 };
 
 const renderChatHistoryList = (stateOverride = {}) => {
diff --git a/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -18,7 +18,7 @@ import {
 } from '@fluentui/react'
 import { useBoolean } from '@fluentui/react-hooks'
 
-import { historyDelete, historyList, historyRename } from '../../api'
+import { historyDelete, historyList, historyRead, historyRename } from '../../api'
 import { Conversation } from '../../api/models'
 import { AppStateContext } from '../../state/AppProvider'
 
@@ -121,9 +121,28 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
     setEditTitle(item?.title)
   }
 
-  const handleSelectItem = () => {
-    onSelect(item)
-    appStateContext?.dispatch({ type: 'UPDATE_CURRENT_CHAT', payload: item })
+  const handleSelectItem = async () => {
+    if (!item) return;
+
+    appStateContext?.dispatch({ type: 'SET_LOADING', payload: true });
+    try {
+      // Fetch messages for the selected chat
+      const messages = await historyRead(item.id);
+      
+      // Update the global state with the selected chat and its messages
+      appStateContext?.dispatch({ 
+        type: 'UPDATE_CURRENT_CHAT', 
+        payload: { ...item, messages } 
+      });
+    
+      // Call the onSelect function with updated chat data
+      onSelect({ ...item, messages });
+    } catch (error) {
+      console.error('Error fetching messages:', error);
+    } finally {
+      // Stop loading after messages are fetched
+      appStateContext?.dispatch({ type: 'SET_LOADING', payload: false });
+    }
   }
 
   const truncatedTitle = item?.title?.length > 28 ? `${item.title.substring(0, 28)} ...` : item.title
diff --git a/frontend/src/components/ChatHistory/ChatHistoryPanel.test.tsx b/frontend/src/components/ChatHistory/ChatHistoryPanel.test.tsx
@@ -53,7 +53,8 @@ const mockState = {
   isGenerating: false,
   isRequestInitiated: false,
   failedSections : [],
-  isFailedReqInitiated : false
+  isFailedReqInitiated : false,
+  isLoading : false,
 };
  
 const mockDispatch = jest.fn();
diff --git a/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx b/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
@@ -73,7 +73,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
   const handleHistoryClick = () => {
     appStateContext?.dispatch({ type: 'TOGGLE_CHAT_HISTORY' })
   }
- 
+
   const onShowContextualMenu = React.useCallback((ev: React.MouseEvent<HTMLElement>) => {
     ev.preventDefault() // don't navigate
     setShowContextualMenu(true)
diff --git a/frontend/src/components/DraftCards/SectionCard.test.tsx b/frontend/src/components/DraftCards/SectionCard.test.tsx
@@ -55,7 +55,8 @@ const mockState = {
   isGenerating: false,
   isRequestInitiated: false,
   failedSections : [],
-  isFailedReqInitiated : false
+  isFailedReqInitiated : false,
+  isLoading : false,
 }
 
 const renderWithContext = (idx = 0) =>
diff --git a/frontend/src/components/Sidebar/Sidebar.test.tsx b/frontend/src/components/Sidebar/Sidebar.test.tsx
@@ -53,7 +53,8 @@ const mockState = {
   isGenerating: false,
   isRequestInitiated: false,
   failedSections : [],
-  isFailedReqInitiated : false
+  isFailedReqInitiated : false,
+  isLoading : false,
 };
 const mockState2 = {
   isChatHistoryOpen: false,
diff --git a/frontend/src/pages/chat/Chat.tsx b/frontend/src/pages/chat/Chat.tsx
@@ -10,7 +10,9 @@ import {
   IStackTokens,
   mergeStyleSets,
   IModalStyles,
-  PrimaryButton
+  PrimaryButton,
+  Spinner,
+  SpinnerSize
 } from '@fluentui/react'
 import { SquareRegular, ShieldLockRegular, ErrorCircleRegular } from '@fluentui/react-icons'
 
@@ -46,6 +48,7 @@ import { AuthNotConfigure } from './Components/AuthNotConfigure'
 import { ChatMessageContainer } from './Components/ChatMessageContainer';
 import { parseErrorMessage, cleanJSON } from '../../helpers/helpers';
 
+
 const enum messageStatus {
   NotRunning = 'Not Running',
   Processing = 'Processing',
@@ -119,6 +122,11 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalUrl, setModalUrl] = useState('');
   const [finalMessages, setFinalMessages] = useState<ChatMessage[]>([])
+  if (!appStateContext || !appStateContext.state) {
+    console.error("AppStateContext is undefined. Ensure AppProvider wraps this component.");
+    return null; // Prevents execution if context is missing
+  }
+  const { currentChat } = appStateContext?.state;
 
   const errorDialogContentProps = {
     type: DialogType.close,
@@ -422,6 +430,9 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
     let conversation
     if (conversationId) {
       conversation = appStateContext?.state?.chatHistory?.find(conv => conv.id === conversationId)
+      if(!conversation){
+        conversation = appStateContext?.state?.currentChat
+      }
       if (!conversation) {
         console.error('Conversation not found.')
         setIsLoading(false)
@@ -460,6 +471,9 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
         let resultConversation
         if (conversationId) {
           resultConversation = appStateContext?.state?.chatHistory?.find(conv => conv.id === conversationId)
+          if(!resultConversation){
+            resultConversation = appStateContext?.state?.currentChat
+          }
           if (!resultConversation) {
             console.error('Conversation not found.')
             setIsLoading(false)
@@ -530,6 +544,9 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
         let resultConversation
         if (conversationId) {
           resultConversation = appStateContext?.state?.chatHistory?.find(conv => conv.id === conversationId)
+          if(!resultConversation){
+            resultConversation = appStateContext?.state?.currentChat
+          }
           if (!resultConversation) {
             console.error('Conversation not found.')
             setIsLoading(false)
@@ -585,6 +602,9 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
         let resultConversation
         if (conversationId) {
           resultConversation = appStateContext?.state?.chatHistory?.find(conv => conv.id === conversationId)
+          if(!resultConversation){
+            resultConversation = appStateContext?.state?.currentChat
+          }
           if (!resultConversation) {
             console.error('Conversation not found.')
             setIsLoading(false)
@@ -817,19 +837,23 @@ const Chat = ({ type = ChatType.Browse }: Props) => {
       ) : (
         <Stack horizontal className={styles.chatRoot}>
           <div className={styles.chatContainer}>
-            {!messages || messages.length < 1 ? (
+            { appStateContext.state.isLoading ? (
+              <Stack horizontalAlign="center" verticalAlign="center" className={styles.chatLoadingState} style={{padding: 250, paddingBottom: 150}}>
+                <Spinner label="Loading your chat..." size={SpinnerSize.large} />
+              </Stack>
+            ): currentChat?.messages && currentChat.messages.length > 0 ? (
+              <ChatMessageContainer
+                messages={currentChat.messages}
+                isLoading={isLoading}
+                type={type}
+                onShowCitation={onShowCitation}
+                showLoadingMessage={showLoadingMessage}
+                ref={chatMessageStreamEnd}
+              />
+            ) : (
               <Stack className={styles.chatEmptyState}>
                 <h1 className={styles.chatEmptyStateTitle}>{ui?.chat_title}</h1>
               </Stack>
-            ) : (
-                <ChatMessageContainer
-                messages={messages}
-                  isLoading={isLoading}
-                  type={type}
-                  onShowCitation={onShowCitation}
-                  showLoadingMessage={showLoadingMessage}
-                  ref = {chatMessageStreamEnd}
-                />
             )}
 
             <Stack horizontal className={styles.chatInput}>
diff --git a/frontend/src/pages/layout/Layout.tsx b/frontend/src/pages/layout/Layout.tsx
@@ -3,7 +3,7 @@ import { Link, Outlet, useLocation } from 'react-router-dom'
 import { Dialog, Stack, TextField } from '@fluentui/react'
 import { CopyRegular } from '@fluentui/react-icons'
 
-import { CosmosDBStatus } from '../../api'
+import { CosmosDBStatus, Conversation, historyList, ChatHistoryLoadingState } from '../../api'
 import Contoso from '../../assets/Contoso.svg'
 import { HistoryButton, ShareButton } from '../../components/common/Button'
 import { AppStateContext } from '../../state/AppProvider'
@@ -39,6 +39,49 @@ const Layout = () => {
 
   const handleHistoryClick = () => {
     appStateContext?.dispatch({ type: 'TOGGLE_CHAT_HISTORY' })
+    
+    // Fetch chat history if it's not already loaded
+    if(!appStateContext?.state.chatHistory) {
+      appStateContext?.dispatch({ type: 'UPDATE_CHAT_HISTORY_LOADING_STATE', payload: ChatHistoryLoadingState.Loading })    
+      fetchChatHistory()
+        .then(res => {
+          if (res) {
+            appStateContext?.dispatch({ type: 'UPDATE_CHAT_HISTORY_LOADING_STATE', payload: ChatHistoryLoadingState.Success })
+          } else {
+            appStateContext?.dispatch({ type: 'UPDATE_CHAT_HISTORY_LOADING_STATE', payload: ChatHistoryLoadingState.Fail })
+            appStateContext?.dispatch({
+              type: 'SET_COSMOSDB_STATUS',
+              payload: { cosmosDB: false, status: CosmosDBStatus.NotWorking }
+            })
+          }
+        })
+        .catch(_err => {
+          appStateContext?.dispatch({ type: 'UPDATE_CHAT_HISTORY_LOADING_STATE', payload: ChatHistoryLoadingState.Fail })
+          appStateContext?.dispatch({
+            type: 'SET_COSMOSDB_STATUS',
+            payload: { cosmosDB: false, status: CosmosDBStatus.NotWorking }
+          })
+        })
+    }
+  }
+
+  const fetchChatHistory = async (offset = 0): Promise<Conversation[] | null> => {
+    const result = await historyList(offset)
+      .then(response => {
+        if (response) {
+          appStateContext?.dispatch({ type: 'FETCH_CHAT_HISTORY', payload: response })
+        } else {
+          appStateContext?.dispatch({ type: 'FETCH_CHAT_HISTORY', payload: null })
+        }
+        return response
+      })
+      .catch(_err => {
+        appStateContext?.dispatch({ type: 'UPDATE_CHAT_HISTORY_LOADING_STATE', payload: ChatHistoryLoadingState.Fail })
+        appStateContext?.dispatch({ type: 'FETCH_CHAT_HISTORY', payload: null })
+        console.error('There was an issue fetching your data.')
+        return null
+      })
+    return result
   }
 
   useEffect(() => {
diff --git a/frontend/src/state/AppProvider.tsx b/frontend/src/state/AppProvider.tsx
diff --git a/frontend/src/state/AppReducer.tsx b/frontend/src/state/AppReducer.tsx
diff --git a/frontend/src/test/test.utils.tsx b/frontend/src/test/test.utils.tsx
diff --git a/start.cmd b/start.cmd

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {`
`73`	`73`	`const handleHistoryClick = () => {`
`74`	`74`	`appStateContext?.dispatch({ type: 'TOGGLE_CHAT_HISTORY' })`
`75`	`75`	`}`
`76`		`-`
	`76`	`+`
`77`	`77`	`const onShowContextualMenu = React.useCallback((ev: React.MouseEvent<HTMLElement>) => {`
`78`	`78`	`ev.preventDefault() // don't navigate`
`79`	`79`	`setShowContextualMenu(true)`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,8 @@ const mockState = {`
`55`	`55`	`isGenerating: false,`
`56`	`56`	`isRequestInitiated: false,`
`57`	`57`	`failedSections : [],`
`58`		`- isFailedReqInitiated : false`
	`58`	`+ isFailedReqInitiated : false,`
	`59`	`+ isLoading : false,`
`59`	`60`	`}`
`60`	`61`
`61`	`62`	`const renderWithContext = (idx = 0) =>`