trace events are sent back sorted by timestamp in descending order

jay-hodgson · Sep 24, 2024 · c0fc40d · c0fc40d
1 parent f83c791
commit c0fc40d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/packages/synapse-react-client/src/components/SynapseChat/SynapseChat.tsx b/packages/synapse-react-client/src/components/SynapseChat/SynapseChat.tsx
@@ -76,10 +76,12 @@ export const SynapseChat: React.FunctionComponent<SynapseChatProps> = ({
   // Keep track of the text that the user is currently typing into the textfield
   const [userChatTextfieldValue, setUserChatTextfieldValue] = useState('')
   const [initialMessageProcessed, setInitialMessageProcessed] = useState(false)
+  // const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
   const { mutate: sendChatMessageToAgent } = useSendChatMessageToAgent(
     {
       onSuccess: data => {
         // whenever the response is returned, set the last interaction response text
+        // await delay(6000)
         setCurrentResponse(data.responseText)
       },
       onError: err => {
@@ -282,21 +284,24 @@ export const SynapseChat: React.FunctionComponent<SynapseChatProps> = ({
                       placement="bottom"
                       title={
                         <div style={{ textAlign: 'center' }}>
-                          {traceEvents?.page?.map((event, index) => {
-                            return (
-                              <Typography key={`${index}-${event.message}`}>
-                                {event.message}
-                              </Typography>
-                            )
-                          })}
+                          {traceEvents?.page
+                            ?.slice()
+                            .reverse()
+                            .map((event, index) => {
+                              return (
+                                <Typography key={`${index}-${event.message}`}>
+                                  {event.message}
+                                </Typography>
+                              )
+                            })}
                         </div>
                       }
                     >
                       <Typography
                         sx={{ textAlign: 'center' }}
                         variant="body1Italic"
                       >
-                        {traceEvents.page[traceEvents.page.length - 1].message}
+                        {traceEvents.page[0].message}
                       </Typography>
                     </Tooltip>
                   )}

diff --git a/packages/synapse-react-client/src/mocks/chat/mockChat.ts b/packages/synapse-react-client/src/mocks/chat/mockChat.ts
@@ -81,20 +81,20 @@ export const mockTraceEventsResponse1: TraceEventsResponse = {
 export const mockTraceEventsResponse2: TraceEventsResponse = {
   jobId: ':id',
   page: [
-    ...mockTraceEventsResponse1.page,
     {
       timestamp: 1695567700, // Example timestamp (in seconds)
       message: 'Gathering entity metadata',
     },
+    ...mockTraceEventsResponse1.page,
   ],
 }
 export const mockTraceEventsResponse3: TraceEventsResponse = {
   jobId: ':id',
   page: [
-    ...mockTraceEventsResponse2.page,
     {
       timestamp: 1695567800, // Example timestamp (in seconds)
       message: 'Combining search results and entity metadata',
     },
+    ...mockTraceEventsResponse2.page,
   ],
 }
diff --git a/packages/synapse-react-client/src/mocks/msw/handlers/chatHandlers.ts b/packages/synapse-react-client/src/mocks/msw/handlers/chatHandlers.ts
@@ -59,9 +59,9 @@ export const getChatbotHandlers = (
     async (_req, res, ctx) => {
       //mock showing progress (increasing number of items)
       traceCallCount++
-      if (traceCallCount == 2) {
+      if (traceCallCount == 1) {
         return res(ctx.status(201), ctx.json(mockTraceEventsResponse1))
-      } else if (traceCallCount == 3) {
+      } else if (traceCallCount == 2) {
         return res(ctx.status(201), ctx.json(mockTraceEventsResponse2))
       } else return res(ctx.status(201), ctx.json(mockTraceEventsResponse3))
     },