Fix some issues

Signed-off-by: gaobinlong <[email protected]>

public/chat_flyout.tsx

@@ -11,6 +11,7 @@ import { ChatPage } from './tabs/chat/chat_page';
 import { ChatWindowHeader } from './tabs/chat_window_header';
 import { ChatHistoryPage } from './tabs/history/chat_history_page';
 import { AgentFrameworkTracesFlyoutBody } from './components/agent_framework_traces_flyout_body';
+import { TAB_ID } from './utils/constants';
 
 let chatHistoryPageLoaded = false;
 
@@ -31,15 +32,15 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {
 
   if (!props.overrideComponent) {
     switch (chatContext.selectedTabId) {
-      case 'chat':
+      case TAB_ID.CHAT:
         chatPageVisible = true;
         break;
 
-      case 'history':
+      case TAB_ID.HISTORY:
         chatHistoryPageVisible = true;
         break;
 
-      case 'trace':
+      case TAB_ID.TRACE:
         chatTraceVisible = true;
         break;
 

public/chat_header_button.tsx

@@ -15,6 +15,7 @@ import { ChatStateProvider } from './hooks/use_chat_state';
 import './index.scss';
 import chatIcon from './assets/chat.svg';
 import { ActionExecutor, AssistantActions, ContentRenderer, UserAccount, TabId } from './types';
+import { TAB_ID } from './utils/constants';
 
 interface HeaderChatButtonProps {
   application: ApplicationStart;
@@ -33,7 +34,7 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
   const [title, setTitle] = useState<string>();
   const [flyoutVisible, setFlyoutVisible] = useState(false);
   const [flyoutComponent, setFlyoutComponent] = useState<React.ReactNode | null>(null);
-  const [selectedTabId, setSelectedTabId] = useState<TabId>('chat');
+  const [selectedTabId, setSelectedTabId] = useState<TabId>(TAB_ID.CHAT);
   const [preSelectedTabId, setPreSelectedTabId] = useState<TabId | undefined>(undefined);
   const [traceId, setTraceId] = useState<string | undefined>(undefined);
   const [chatSize, setChatSize] = useState<number | 'fullscreen' | 'dock-right'>('dock-right');

public/components/agent_framework_traces.tsx

@@ -45,8 +45,8 @@ export const AgentFrameworkTraces: React.FC<AgentFrameworkTracesProps> = (props)
     return <EuiText>Data not available.</EuiText>;
   }
 
-  const question = traces[0].input;
-  const result = traces[0].output;
+  const question = traces[traces.length - 1].input;
+  const result = traces[traces.length - 1].output;
   const questionAndResult = `# How was this generated
 #### Question
 ${question}
@@ -64,7 +64,7 @@ ${result}
         <h3>Response</h3>
       </EuiText>
       {traces
-        .filter((trace) => trace.origin?.includes('Tool') && (trace.input || trace.output))
+        .filter((trace) => trace.origin && (trace.input || trace.output))
         .map((trace, i) => {
           const stepContent = `Step ${i + 1}`;
           return (

public/components/agent_framework_traces_flyout_body.tsx

@@ -16,6 +16,7 @@ import {
 import React from 'react';
 import { useChatContext } from '../contexts/chat_context';
 import { AgentFrameworkTraces } from './agent_framework_traces';
+import { TAB_ID } from '../utils/constants';
 
 export const AgentFrameworkTracesFlyoutBody: React.FC = () => {
   const chatContext = useChatContext();
@@ -25,7 +26,7 @@ export const AgentFrameworkTracesFlyoutBody: React.FC = () => {
   }
 
   // docked right or fullscreen with history open
-  const showBack = !chatContext.flyoutFullScreen || chatContext.preSelectedTabId === 'history';
+  const showBack = !chatContext.flyoutFullScreen || chatContext.preSelectedTabId === TAB_ID.HISTORY;
 
   return (
     <EuiFlyoutBody className="llm-chat-flyout llm-chat-flyout-body">
@@ -38,7 +39,9 @@ export const AgentFrameworkTracesFlyoutBody: React.FC = () => {
                   size="xs"
                   flush="left"
                   onClick={() => {
-                    chatContext.setSelectedTabId(chatContext.flyoutFullScreen ? 'history' : 'chat');
+                    chatContext.setSelectedTabId(
+                      chatContext.flyoutFullScreen ? TAB_ID.HISTORY : TAB_ID.CHAT
+                    );
                   }}
                   iconType="arrowLeft"
                 >
@@ -54,7 +57,7 @@ export const AgentFrameworkTracesFlyoutBody: React.FC = () => {
                   color="text"
                   iconType="cross"
                   onClick={() => {
-                    chatContext.setSelectedTabId('chat');
+                    chatContext.setSelectedTabId(TAB_ID.CHAT);
                   }}
                 />
               )}

public/hooks/use_chat_actions.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { TAB_ID } from '../utils/constants';
 import { ASSISTANT_API } from '../../common/constants/llm';
 import {
   IMessage,
@@ -52,7 +53,7 @@ export const useChatActions = (): AssistantActions => {
         !chatContext.sessionId &&
         response.sessionId &&
         core.services.sessions.options?.page === 1 &&
-        chatContext.selectedTabId === 'history'
+        chatContext.selectedTabId === TAB_ID.HISTORY
       ) {
         core.services.sessions.reload();
       }
@@ -81,7 +82,7 @@ export const useChatActions = (): AssistantActions => {
     chatContext.setTitle(title);
     // Chat page will always visible in fullscreen mode, we don't need to change the tab anymore
     if (!chatContext.flyoutFullScreen) {
-      chatContext.setSelectedTabId('chat');
+      chatContext.setSelectedTabId(TAB_ID.CHAT);
     }
     chatContext.setFlyoutComponent(null);
     if (!sessionId) {
@@ -102,7 +103,7 @@ export const useChatActions = (): AssistantActions => {
 
   const openChatUI = () => {
     chatContext.setFlyoutVisible(true);
-    chatContext.setSelectedTabId('chat');
+    chatContext.setSelectedTabId(TAB_ID.CHAT);
   };
 
   const executeAction = async (suggestedAction: ISuggestedAction, message: IMessage) => {

public/tabs/chat/messages/message_footer.tsx

@@ -31,12 +31,7 @@ export const MessageFooter: React.FC<MessageFooterProps> = React.memo((props) =>
           size="xs"
           flush="left"
           onClick={() => {
-            chatContext.setFlyoutComponent(
-              <AgentFrameworkTracesFlyoutBody
-                closeFlyout={() => chatContext.setFlyoutComponent(null)}
-                traceId={traceId}
-              />
-            );
+            chatContext.setFlyoutComponent(<AgentFrameworkTracesFlyoutBody />);
           }}
         >
           How was this generated?

public/tabs/chat_window_header.tsx

@@ -22,6 +22,7 @@ import { useCore } from '../contexts/core_context';
 import { useChatState } from '../hooks/use_chat_state';
 import { useSaveChat } from '../hooks/use_save_chat';
 import chatIcon from '../assets/chat.svg';
+import { TAB_ID } from '../utils/constants';
 interface ChatWindowHeaderProps {
   flyoutFullScreen: boolean;
   toggleFlyoutFullScreen: () => void;
@@ -157,10 +158,10 @@ export const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = React.memo((pro
                   chatContext.setFlyoutComponent(undefined);
                   // Back to chat tab if history page already visible
                   chatContext.setSelectedTabId(
-                    chatContext.selectedTabId === 'history' ? 'chat' : 'history'
+                    chatContext.selectedTabId === TAB_ID.HISTORY ? TAB_ID.CHAT : TAB_ID.HISTORY
                   );
                 }}
-                display={chatContext.selectedTabId === 'history' ? 'fill' : undefined}
+                display={chatContext.selectedTabId === TAB_ID.HISTORY ? 'fill' : undefined}
               />
             </EuiFlexItem>
           </EuiFlexGroup>

public/tabs/history/chat_history_page.tsx

@@ -20,6 +20,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
 import { useDebounce, useObservable } from 'react-use';
 import cs from 'classnames';
+import { TAB_ID } from 'public/utils/constants';
 import { useChatActions } from '../../hooks/use_chat_actions';
 import { useChatContext } from '../../contexts/chat_context';
 import { useCore } from '../../contexts/core_context';
@@ -64,7 +65,7 @@ export const ChatHistoryPage: React.FC<ChatHistoryPageProps> = React.memo((props
   }, []);
 
   const handleBack = useCallback(() => {
-    setSelectedTabId('chat');
+    setSelectedTabId(TAB_ID.CHAT);
   }, [setSelectedTabId]);
 
   const handleHistoryDeleted = useCallback(

public/utils/constants.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export enum TAB_ID {
+  CHAT = 'chat',
+  COMPOSE = 'compose',
+  INSIGHTS = 'insights',
+  HISTORY = 'history',
+  TRACE = 'trace',
+}

server/services/storage/agent_framework_storage_service.ts

@@ -201,17 +201,15 @@ export class AgentFrameworkStorageService implements StorageService {
         }>;
       }>;
 
-      return response.body.traces
-        .map((item) => ({
-          interactionId: item.interaction_id,
-          parentInteractionId: item.parent_interaction_id,
-          input: item.input,
-          output: item.response,
-          createTime: item.create_time,
-          origin: item.origin,
-          traceNumber: item.trace_number,
-        }))
-        .reverse();
+      return response.body.traces.map((item) => ({
+        interactionId: item.interaction_id,
+        parentInteractionId: item.parent_interaction_id,
+        input: item.input,
+        output: item.response,
+        createTime: item.create_time,
+        origin: item.origin,
+        traceNumber: item.trace_number,
+      }));
     } catch (error) {
       throw new Error('get traces failed, reason:' + JSON.stringify(error.meta?.body));
     }