From 94fed43179e150bf606c3365c487e6a53ea90f98 Mon Sep 17 00:00:00 2001 From: Hailong Cui Date: Mon, 13 Nov 2023 17:11:36 +0800 Subject: [PATCH] chat trace in fullscreen mode (#20) * chat trace in fullscreen mode Signed-off-by: Hailong Cui * chat trace in fullscreen mode Signed-off-by: Hailong Cui --------- Signed-off-by: Hailong Cui --- public/chat_flyout.tsx | 13 +++++ public/chat_header_button.tsx | 13 ++++- .../langchain_traces_flyout_body.tsx | 54 ++++++++++++++----- public/contexts/chat_context.tsx | 5 +- public/hooks/use_chat_actions.tsx | 12 ++--- public/tabs/chat_window_header.tsx | 10 ++-- public/types.ts | 2 +- 7 files changed, 79 insertions(+), 30 deletions(-) diff --git a/public/chat_flyout.tsx b/public/chat_flyout.tsx index a6a280a2..37c67191 100644 --- a/public/chat_flyout.tsx +++ b/public/chat_flyout.tsx @@ -10,6 +10,7 @@ import { useChatContext } from './contexts/chat_context'; import { ChatPage } from './tabs/chat/chat_page'; import { ChatWindowHeader } from './tabs/chat_window_header'; import { ChatHistoryPage } from './tabs/history/chat_history_page'; +import { LangchainTracesFlyoutBody } from './components/langchain_traces_flyout_body'; let chatHistoryPageLoaded = false; @@ -26,6 +27,7 @@ export const ChatFlyout: React.FC = (props) => { let chatPageVisible = false; let chatHistoryPageVisible = false; + let chatTraceVisible = false; if (!props.overrideComponent) { switch (chatContext.selectedTabId) { @@ -37,6 +39,10 @@ export const ChatFlyout: React.FC = (props) => { chatHistoryPageVisible = true; break; + case 'trace': + chatTraceVisible = true; + break; + default: break; } @@ -88,6 +94,13 @@ export const ChatFlyout: React.FC = (props) => { /> )} + + {chatTraceVisible && chatContext.traceId && } + diff --git a/public/chat_header_button.tsx b/public/chat_header_button.tsx index acd34c36..ce21f666 100644 --- a/public/chat_header_button.tsx +++ b/public/chat_header_button.tsx @@ -34,6 +34,8 @@ export const HeaderChatButton: React.FC = (props) => { const [flyoutVisible, setFlyoutVisible] = useState(false); const [flyoutComponent, setFlyoutComponent] = useState(null); const [selectedTabId, setSelectedTabId] = useState('chat'); + const [preSelectedTabId, setPreSelectedTabId] = useState(undefined); + const [traceId, setTraceId] = useState(undefined); const [chatSize, setChatSize] = useState('dock-right'); const flyoutFullScreen = chatSize === 'fullscreen'; @@ -54,7 +56,11 @@ export const HeaderChatButton: React.FC = (props) => { sessionId, setSessionId, selectedTabId, - setSelectedTabId, + preSelectedTabId, + setSelectedTabId: (tabId: TabId) => { + setPreSelectedTabId(selectedTabId); + setSelectedTabId(tabId); + }, flyoutVisible, flyoutFullScreen, setFlyoutVisible, @@ -65,6 +71,8 @@ export const HeaderChatButton: React.FC = (props) => { currentAccount: props.currentAccount, title, setTitle, + traceId, + setTraceId, }), [ appId, @@ -72,12 +80,15 @@ export const HeaderChatButton: React.FC = (props) => { flyoutVisible, flyoutFullScreen, selectedTabId, + preSelectedTabId, props.chatEnabled, props.contentRenderers, props.actionExecutors, props.currentAccount, title, setTitle, + traceId, + setTraceId, ] ); diff --git a/public/components/langchain_traces_flyout_body.tsx b/public/components/langchain_traces_flyout_body.tsx index f76771f6..6509d742 100644 --- a/public/components/langchain_traces_flyout_body.tsx +++ b/public/components/langchain_traces_flyout_body.tsx @@ -10,32 +10,58 @@ import { EuiPageBody, EuiPageContentBody, EuiPageHeader, + EuiButtonIcon, + EuiPageHeaderSection, } from '@elastic/eui'; import React from 'react'; +import { useChatContext } from '../contexts/chat_context'; import { LangchainTraces } from './langchain_traces'; -interface LangchainTracesFlyoutBodyProps { - traceId: string; - closeFlyout: () => void; -} +export const LangchainTracesFlyoutBody: React.FC = () => { + const chatContext = useChatContext(); + const traceId = chatContext.traceId; + if (!traceId) { + return null; + } + + // docked right or fullscreen with history open + const showBack = !chatContext.flyoutFullScreen || chatContext.preSelectedTabId === 'history'; -export const LangchainTracesFlyoutBody: React.FC = (props) => { return ( - - Back - + + {showBack && ( + { + chatContext.setSelectedTabId(chatContext.flyoutFullScreen ? 'history' : 'chat'); + }} + iconType="arrowLeft" + > + Back + + )} + + + {!showBack && ( + { + chatContext.setSelectedTabId('chat'); + }} + /> + )} + - + diff --git a/public/contexts/chat_context.tsx b/public/contexts/chat_context.tsx index 6f8ceb84..c0807be3 100644 --- a/public/contexts/chat_context.tsx +++ b/public/contexts/chat_context.tsx @@ -11,7 +11,8 @@ export interface IChatContext { sessionId?: string; setSessionId: React.Dispatch>; selectedTabId: TabId; - setSelectedTabId: React.Dispatch>; + preSelectedTabId?: TabId; + setSelectedTabId: (tabId: TabId) => void; flyoutVisible: boolean; flyoutFullScreen: boolean; setFlyoutVisible: React.Dispatch>; @@ -22,6 +23,8 @@ export interface IChatContext { currentAccount: UserAccount; title?: string; setTitle: React.Dispatch>; + traceId?: string; + setTraceId: React.Dispatch>; } export const ChatContext = React.createContext(null); diff --git a/public/hooks/use_chat_actions.tsx b/public/hooks/use_chat_actions.tsx index 7770a31a..50a1e9fc 100644 --- a/public/hooks/use_chat_actions.tsx +++ b/public/hooks/use_chat_actions.tsx @@ -3,8 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; -import { LangchainTracesFlyoutBody } from '../components/langchain_traces_flyout_body'; import { ASSISTANT_API } from '../../common/constants/llm'; import { IMessage, ISuggestedAction } from '../../common/types/chat_saved_object_attributes'; import { useChatContext } from '../contexts/chat_context'; @@ -103,12 +101,10 @@ export const useChatActions = (): AssistantActions => { } case 'view_trace': - chatContext.setFlyoutComponent( - chatContext.setFlyoutComponent(null)} - traceId={suggestedAction.metadata.traceId} - /> - ); + if ('traceId' in message) { + chatContext.setSelectedTabId('trace'); + chatContext.setTraceId(message.traceId); + } break; default: diff --git a/public/tabs/chat_window_header.tsx b/public/tabs/chat_window_header.tsx index de6e2e43..e9a6934d 100644 --- a/public/tabs/chat_window_header.tsx +++ b/public/tabs/chat_window_header.tsx @@ -55,10 +55,10 @@ export const ChatWindowHeader: React.FC = React.memo((pro ); const dockBottom = () => ( - + - - + + ); @@ -66,8 +66,8 @@ export const ChatWindowHeader: React.FC = React.memo((pro const dockRight = () => ( - - + + ); diff --git a/public/types.ts b/public/types.ts index b02c0626..1797799d 100644 --- a/public/types.ts +++ b/public/types.ts @@ -46,4 +46,4 @@ export interface ChatConfig { terms_accepted: boolean; } -export type TabId = 'chat' | 'compose' | 'insights' | 'history'; +export type TabId = 'chat' | 'compose' | 'insights' | 'history' | 'trace';