-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Integrate list traces api of agent framework (#25)
* Integrate list traces api of agent framework Signed-off-by: gaobinlong <[email protected]> * Fix import issue Signed-off-by: gaobinlong <[email protected]> * Fix some issues Signed-off-by: gaobinlong <[email protected]> * Add some comments Signed-off-by: gaobinlong <[email protected]> --------- Signed-off-by: gaobinlong <[email protected]>
- Loading branch information
1 parent
491a111
commit ca6ab44
Showing
16 changed files
with
369 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { | ||
| EuiAccordion, | ||
| EuiCodeBlock, | ||
| EuiEmptyPrompt, | ||
| EuiLoadingContent, | ||
| EuiSpacer, | ||
| EuiText, | ||
| EuiMarkdownFormat, | ||
| EuiHorizontalRule, | ||
| } from '@elastic/eui'; | ||
| import React from 'react'; | ||
| import { useFetchAgentFrameworkTraces } from '../hooks/use_fetch_agentframework_traces'; | ||
|
|
||
| interface AgentFrameworkTracesProps { | ||
| traceId: string; | ||
| } | ||
|
|
||
| export const AgentFrameworkTraces: React.FC<AgentFrameworkTracesProps> = (props) => { | ||
| const { data: traces, loading, error } = useFetchAgentFrameworkTraces(props.traceId); | ||
|
|
||
| if (loading) { | ||
| return ( | ||
| <> | ||
| <EuiText>Loading...</EuiText> | ||
| <EuiLoadingContent lines={10} /> | ||
| </> | ||
| ); | ||
| } | ||
| if (error) { | ||
| return ( | ||
| <EuiEmptyPrompt | ||
| iconType="alert" | ||
| iconColor="danger" | ||
| title={<h2>Error loading details</h2>} | ||
| body={error.toString()} | ||
| /> | ||
| ); | ||
| } | ||
| if (!traces?.length) { | ||
| return <EuiText>Data not available.</EuiText>; | ||
| } | ||
|
|
||
| const question = traces[traces.length - 1].input; | ||
| const result = traces[traces.length - 1].output; | ||
| const questionAndResult = `# How was this generated | ||
| #### Question | ||
| ${question} | ||
| #### Result | ||
| ${result} | ||
| `; | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiMarkdownFormat>{questionAndResult}</EuiMarkdownFormat> | ||
|
|
||
| <EuiSpacer size="l" /> | ||
|
|
||
| <EuiText> | ||
| <h3>Response</h3> | ||
| </EuiText> | ||
| {traces | ||
| // if origin exists, it indicates that the trace was generated by a tool, we only show the non-empty traces of tools | ||
| .filter((trace) => trace.origin && (trace.input || trace.output)) | ||
| .map((trace, i) => { | ||
| const stepContent = `Step ${i + 1}`; | ||
| return ( | ||
| <div key={trace.interactionId}> | ||
| <EuiSpacer size="s" /> | ||
| <EuiAccordion id={stepContent} buttonContent={stepContent}> | ||
| {trace.input && ( | ||
| <EuiCodeBlock fontSize="m" paddingSize="s"> | ||
| Input: {trace.input} | ||
| </EuiCodeBlock> | ||
| )} | ||
| {trace.output && ( | ||
| <EuiCodeBlock fontSize="m" paddingSize="s"> | ||
| Output: {trace.output} | ||
| </EuiCodeBlock> | ||
| )} | ||
| </EuiAccordion> | ||
| <EuiHorizontalRule margin="xs" /> | ||
| </div> | ||
| ); | ||
| })} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { | ||
| EuiButtonEmpty, | ||
| EuiFlyoutBody, | ||
| EuiPage, | ||
| EuiPageBody, | ||
| EuiPageContentBody, | ||
| EuiPageHeader, | ||
| EuiButtonIcon, | ||
| EuiPageHeaderSection, | ||
| } from '@elastic/eui'; | ||
| 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(); | ||
| const traceId = chatContext.traceId; | ||
| if (!traceId) { | ||
| return null; | ||
| } | ||
|
|
||
| // docked right or fullscreen with history open | ||
| const showBack = !chatContext.flyoutFullScreen || chatContext.preSelectedTabId === TAB_ID.HISTORY; | ||
|
|
||
| return ( | ||
| <EuiFlyoutBody className="llm-chat-flyout llm-chat-flyout-body"> | ||
| <EuiPage> | ||
| <EuiPageBody> | ||
| <EuiPageHeader> | ||
| <EuiPageHeaderSection> | ||
| {showBack && ( | ||
| <EuiButtonEmpty | ||
| size="xs" | ||
| flush="left" | ||
| onClick={() => { | ||
| chatContext.setSelectedTabId( | ||
| chatContext.flyoutFullScreen ? TAB_ID.HISTORY : TAB_ID.CHAT | ||
| ); | ||
| }} | ||
| iconType="arrowLeft" | ||
| > | ||
| Back | ||
| </EuiButtonEmpty> | ||
| )} | ||
| </EuiPageHeaderSection> | ||
| <EuiPageHeaderSection> | ||
| {!showBack && ( | ||
| <EuiButtonIcon | ||
| aria-label="close" | ||
| size="xs" | ||
| color="text" | ||
| iconType="cross" | ||
| onClick={() => { | ||
| chatContext.setSelectedTabId(TAB_ID.CHAT); | ||
| }} | ||
| /> | ||
| )} | ||
| </EuiPageHeaderSection> | ||
| </EuiPageHeader> | ||
| <EuiPageContentBody> | ||
| <AgentFrameworkTraces traceId={traceId} /> | ||
| </EuiPageContentBody> | ||
| </EuiPageBody> | ||
| </EuiPage> | ||
| </EuiFlyoutBody> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { useEffect, useReducer } from 'react'; | ||
| import { ASSISTANT_API } from '../../common/constants/llm'; | ||
| import { AgentFrameworkTrace } from '../../common/utils/llm_chat/traces'; | ||
| import { useCore } from '../contexts/core_context'; | ||
| import { GenericReducer, genericReducer } from './fetch_reducer'; | ||
|
|
||
| export const useFetchAgentFrameworkTraces = (traceId: string) => { | ||
| const core = useCore(); | ||
| const reducer: GenericReducer<AgentFrameworkTrace[]> = genericReducer; | ||
| const [state, dispatch] = useReducer(reducer, { loading: false }); | ||
|
|
||
| useEffect(() => { | ||
| const abortController = new AbortController(); | ||
| dispatch({ type: 'request' }); | ||
| if (!traceId) { | ||
| dispatch({ type: 'success', payload: undefined }); | ||
| return; | ||
| } | ||
|
|
||
| core.services.http | ||
| .get<AgentFrameworkTrace[]>(`${ASSISTANT_API.TRACE}/${traceId}`) | ||
| .then((payload) => | ||
| dispatch({ | ||
| type: 'success', | ||
| payload, | ||
| }) | ||
| ) | ||
| .catch((error) => dispatch({ type: 'failure', error })); | ||
|
|
||
| return () => abortController.abort(); | ||
| }, [traceId]); | ||
|
|
||
| return { ...state }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.