Skip to content

Commit

Permalink
chat trace in fullscreen mode (#20)
Browse files Browse the repository at this point in the history 
* chat trace in fullscreen mode

Signed-off-by: Hailong Cui <[email protected]>

* chat trace in fullscreen mode

Signed-off-by: Hailong Cui <[email protected]>

---------

Signed-off-by: Hailong Cui <[email protected]>
  • Loading branch information
@Hailong-am @ruanyl
Hailong-am authored and ruanyl committed Nov 20, 2023
1 parent 2b0ae05 commit 94fed43
Show file tree
Hide file tree
Showing 7 changed files with 79 additions and 30 deletions.
13 changes: 13 additions & 0 deletions public/chat_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -26,6 +27,7 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {

let chatPageVisible = false;
let chatHistoryPageVisible = false;
let chatTraceVisible = false;

if (!props.overrideComponent) {
switch (chatContext.selectedTabId) {
Expand All @@ -37,6 +39,10 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {
chatHistoryPageVisible = true;
break;

case 'trace':
chatTraceVisible = true;
break;

default:
break;
}
Expand Down Expand Up @@ -88,6 +94,13 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {
/>
)}
</EuiFlexItem>
<EuiFlexItem
style={props.flyoutFullScreen && chatTraceVisible ? { width: '30%' } : undefined}
grow={!props.flyoutFullScreen}
className={cs({ 'llm-chat-hidden': !chatTraceVisible })}
>
{chatTraceVisible && chatContext.traceId && <LangchainTracesFlyoutBody />}
</EuiFlexItem>
</EuiFlexGroup>
</>
</EuiFlyout>
Expand Down
13 changes: 12 additions & 1 deletion public/chat_header_button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
const [flyoutVisible, setFlyoutVisible] = useState(false);
const [flyoutComponent, setFlyoutComponent] = useState<React.ReactNode | null>(null);
const [selectedTabId, setSelectedTabId] = useState<TabId>('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');
const flyoutFullScreen = chatSize === 'fullscreen';

Expand All @@ -54,7 +56,11 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
sessionId,
setSessionId,
selectedTabId,
setSelectedTabId,
preSelectedTabId,
setSelectedTabId: (tabId: TabId) => {
setPreSelectedTabId(selectedTabId);
setSelectedTabId(tabId);
},
flyoutVisible,
flyoutFullScreen,
setFlyoutVisible,
Expand All @@ -65,19 +71,24 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
currentAccount: props.currentAccount,
title,
setTitle,
traceId,
setTraceId,
}),
[
appId,
sessionId,
flyoutVisible,
flyoutFullScreen,
selectedTabId,
preSelectedTabId,
props.chatEnabled,
props.contentRenderers,
props.actionExecutors,
props.currentAccount,
title,
setTitle,
traceId,
setTraceId,
]
);

Expand Down
54 changes: 40 additions & 14 deletions public/components/langchain_traces_flyout_body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<LangchainTracesFlyoutBodyProps> = (props) => {
return (
<EuiFlyoutBody className="llm-chat-flyout llm-chat-flyout-body">
<EuiPage>
<EuiPageBody>
<EuiPageHeader>
<EuiButtonEmpty
style={{ marginLeft: '-8px' }}
size="xs"
onClick={props.closeFlyout}
iconType="arrowLeft"
>
Back
</EuiButtonEmpty>
<EuiPageHeaderSection>
{showBack && (
<EuiButtonEmpty
size="xs"
flush="left"
onClick={() => {
chatContext.setSelectedTabId(chatContext.flyoutFullScreen ? 'history' : 'chat');
}}
iconType="arrowLeft"
>
Back
</EuiButtonEmpty>
)}
</EuiPageHeaderSection>
<EuiPageHeaderSection>
{!showBack && (
<EuiButtonIcon
aria-label="close"
size="xs"
color="text"
iconType="cross"
onClick={() => {
chatContext.setSelectedTabId('chat');
}}
/>
)}
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContentBody>
<LangchainTraces traceId={props.traceId} />
<LangchainTraces traceId={traceId} />
</EuiPageContentBody>
</EuiPageBody>
</EuiPage>
Expand Down
5 changes: 4 additions & 1 deletion public/contexts/chat_context.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ export interface IChatContext {
sessionId?: string;
setSessionId: React.Dispatch<React.SetStateAction<string | undefined>>;
selectedTabId: TabId;
setSelectedTabId: React.Dispatch<React.SetStateAction<TabId>>;
preSelectedTabId?: TabId;
setSelectedTabId: (tabId: TabId) => void;
flyoutVisible: boolean;
flyoutFullScreen: boolean;
setFlyoutVisible: React.Dispatch<React.SetStateAction<boolean>>;
Expand All @@ -22,6 +23,8 @@ export interface IChatContext {
currentAccount: UserAccount;
title?: string;
setTitle: React.Dispatch<React.SetStateAction<string | undefined>>;
traceId?: string;
setTraceId: React.Dispatch<React.SetStateAction<string | undefined>>;
}
export const ChatContext = React.createContext<IChatContext | null>(null);

Expand Down
12 changes: 4 additions & 8 deletions public/hooks/use_chat_actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -103,12 +101,10 @@ export const useChatActions = (): AssistantActions => {
}

case 'view_trace':
chatContext.setFlyoutComponent(
<LangchainTracesFlyoutBody
closeFlyout={() => chatContext.setFlyoutComponent(null)}
traceId={suggestedAction.metadata.traceId}
/>
);
if ('traceId' in message) {
chatContext.setSelectedTabId('trace');
chatContext.setTraceId(message.traceId);
}
break;

default:
Expand Down
10 changes: 5 additions & 5 deletions public/tabs/chat_window_header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,19 @@ export const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = React.memo((pro
);

const dockBottom = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor">
<path d="M0 1.99406C0 0.892771 0.894514 0 1.99406 0H14.0059C15.1072 0 16 0.894514 16 1.99406V14.0059C16 15.1072 15.1055 16 14.0059 16H1.99406C0.892771 16 0 15.1055 0 14.0059V1.99406ZM1 1.99406V14.0059C1 14.5539 1.44579 15 1.99406 15H14.0059C14.5539 15 15 14.5542 15 14.0059V1.99406C15 1.44606 14.5542 1 14.0059 1H1.99406C1.44606 1 1 1.44579 1 1.99406Z" />
<rect x="0.5" y="15" width="9.5" height="15" transform="rotate(-90 0.5 15)" />
<path d="M3 1H13C14.1046 1 15 1.89543 15 3V13C15 14.1046 14.1046 15 13 15H3C1.89543 15 1 14.1046 1 13V3C1 1.89543 1.89543 1 3 1ZM3 2C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H3Z" />
<path d="M3 9.5C3 9.22386 3.22386 9 3.5 9H12.5C12.7761 9 13 9.22386 13 9.5V12.5C13 12.7761 12.7761 13 12.5 13H3.5C3.22386 13 3 12.7761 3 12.5V9.5Z" />
</g>
</svg>
);

const dockRight = () => (
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor">
<path d="M0 1.99406C0 0.892771 0.894514 0 1.99406 0H14.0059C15.1072 0 16 0.894514 16 1.99406V14.0059C16 15.1072 15.1055 16 14.0059 16H1.99406C0.892771 16 0 15.1055 0 14.0059V1.99406ZM1 1.99406V14.0059C1 14.5539 1.44579 15 1.99406 15H14.0059C14.5539 15 15 14.5542 15 14.0059V1.99406C15 1.44606 14.5542 1 14.0059 1H1.99406C1.44606 1 1 1.44579 1 1.99406Z" />
<rect x="9" y="0.5" width="6" height="14.5" />
<path d="M3 1H13C14.1046 1 15 1.89543 15 3V13C15 14.1046 14.1046 15 13 15H3C1.89543 15 1 14.1046 1 13V3C1 1.89543 1.89543 1 3 1ZM3 2C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H3Z" />
<path d="M9 3.5C9 3.22386 9.22386 3 9.5 3H12.5C12.7761 3 13 3.22386 13 3.5V12.5C13 12.7761 12.7761 13 12.5 13H9.5C9.22386 13 9 12.7761 9 12.5V3.5Z" />
</g>
</svg>
);
Expand Down
2 changes: 1 addition & 1 deletion public/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

0 comments on commit 94fed43

Please sign in to comment.