From 19b1ceaab6439d906c8ae730d6a58d888132a18b Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Mon, 8 Jan 2024 15:09:40 +0800 Subject: [PATCH 01/12] feat: some optimization for customized render function Signed-off-by: SuZhou-Joe --- common/types/chat_saved_object_attributes.ts | 4 ++-- public/index.ts | 2 +- public/tabs/chat/messages/message_bubble.tsx | 10 ++-------- public/tabs/chat/messages/message_content.tsx | 17 +++++++---------- public/types.ts | 9 ++++++++- server/parsers/visualization_card_parser.ts | 1 + 6 files changed, 21 insertions(+), 22 deletions(-) diff --git a/common/types/chat_saved_object_attributes.ts b/common/types/chat_saved_object_attributes.ts index 608f83ff..b32cce5e 100644 --- a/common/types/chat_saved_object_attributes.ts +++ b/common/types/chat_saved_object_attributes.ts @@ -43,11 +43,11 @@ export interface IOutput { type: 'output'; traceId?: string; // used for tracing agent calls toolsUsed?: string[]; - // TODO: ppl_visualization type may need to be removed in the PR which replaces ppl query render from visualization to data grid. @suzhou - contentType: 'error' | 'markdown' | 'visualization' | 'ppl_visualization' | 'ppl_data_grid'; + contentType: 'error' | 'markdown' | 'visualization' | 'ppl_data_grid' | string; content: string; suggestedActions?: ISuggestedAction[]; messageId?: string; + isVisualization?: boolean; } export type IMessage = IInput | IOutput; diff --git a/public/index.ts b/public/index.ts index cdce4ade..4c3ba3a2 100644 --- a/public/index.ts +++ b/public/index.ts @@ -12,4 +12,4 @@ export function plugin(initializerContext: PluginInitializerContext) { return new AssistantPlugin(initializerContext); } -export { AssistantSetup } from './types'; +export { AssistantSetup, RenderProps } from './types'; diff --git a/public/tabs/chat/messages/message_bubble.tsx b/public/tabs/chat/messages/message_bubble.tsx index 8a704e2a..7b0892aa 100644 --- a/public/tabs/chat/messages/message_bubble.tsx +++ b/public/tabs/chat/messages/message_bubble.tsx @@ -133,13 +133,7 @@ export const MessageBubble: React.FC = React.memo((props) => ); } - // if (['visualization', 'ppl_visualization'].includes(props.contentType)) { - // return <>{props.children}; - // } - - const isVisualization = ['visualization', 'ppl_visualization'].includes( - props.message.contentType - ); + const isVisualization = props.message.isVisualization; return ( = React.memo((props) => = React.memo((props) ); - case 'ppl_visualization': { - const render = chatContext.contentRenderers[props.message.contentType]; - if (!render) return null; - return ( -
{render({ query: props.message.content })}
- ); - } - // content types registered by plugins unknown to assistant default: { const message = props.message as IMessage; - return chatContext.contentRenderers[message.contentType]?.(message.content) ?? null; + return ( + chatContext.contentRenderers[message.contentType]?.(message.content, { + props, + chatContext, + }) ?? null + ); } } }); diff --git a/public/types.ts b/public/types.ts index ba4a90d6..9a035042 100644 --- a/public/types.ts +++ b/public/types.ts @@ -6,9 +6,16 @@ import { DashboardStart } from '../../../src/plugins/dashboard/public'; import { EmbeddableSetup, EmbeddableStart } from '../../../src/plugins/embeddable/public'; import { IMessage, ISuggestedAction } from '../common/types/chat_saved_object_attributes'; +import { IChatContext } from './contexts/chat_context'; +import { MessageContentProps } from './tabs/chat/messages/message_content'; + +export interface RenderProps { + props: MessageContentProps; + chatContext: IChatContext; +} // TODO should pair with server side registered output parser -export type ContentRenderer = (content: unknown) => React.ReactElement; +export type ContentRenderer = (content: unknown, renderProps: RenderProps) => React.ReactElement; export type ActionExecutor = (params: Record) => void; export interface AssistantActions { send: (input: IMessage) => Promise; diff --git a/server/parsers/visualization_card_parser.ts b/server/parsers/visualization_card_parser.ts index 7b4c9898..4fc5b02d 100644 --- a/server/parsers/visualization_card_parser.ts +++ b/server/parsers/visualization_card_parser.ts @@ -35,6 +35,7 @@ export const VisualizationCardParser = { type: 'output', content: id, contentType: 'visualization', + isVisualization: true, suggestedActions: [ { message: 'View in Visualize', From 7aa46f3df68b9b16e6b87a4ec2b1b8c09fd88b29 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Mon, 8 Jan 2024 15:34:30 +0800 Subject: [PATCH 02/12] fix: unit test Signed-off-by: SuZhou-Joe --- .../chat/messages/message_bubble.test.tsx | 1 + .../chat/messages/message_content.test.tsx | 32 ++++++++++++++++++- .../parsers/visualization_card_parser.test.ts | 8 +++++ 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/public/tabs/chat/messages/message_bubble.test.tsx b/public/tabs/chat/messages/message_bubble.test.tsx index a836f478..20fc2919 100644 --- a/public/tabs/chat/messages/message_bubble.test.tsx +++ b/public/tabs/chat/messages/message_bubble.test.tsx @@ -102,6 +102,7 @@ describe('', () => { type: 'output', contentType: 'visualization', content: 'vis_id_mock', + isVisualization: true, }} /> ); diff --git a/public/tabs/chat/messages/message_content.test.tsx b/public/tabs/chat/messages/message_content.test.tsx index 5f02a6bb..7b9eaca4 100644 --- a/public/tabs/chat/messages/message_content.test.tsx +++ b/public/tabs/chat/messages/message_content.test.tsx @@ -86,10 +86,40 @@ describe('', () => { type: 'output', contentType: 'ppl_visualization', content: 'mock ppl query', + isVisualization: true, }} /> ); - expect(pplVisualizationRenderMock).toHaveBeenCalledWith({ query: 'mock ppl query' }); + expect(pplVisualizationRenderMock.mock.calls[0]).toMatchInlineSnapshot(` + Array [ + "mock ppl query", + Object { + "chatContext": Object { + "contentRenderers": Object { + "ppl_visualization": [MockFunction] { + "calls": Array [ + [Circular], + ], + "results": Array [ + Object { + "type": "return", + "value": undefined, + }, + ], + }, + }, + }, + "props": Object { + "message": Object { + "content": "mock ppl query", + "contentType": "ppl_visualization", + "isVisualization": true, + "type": "output", + }, + }, + }, + ] + `); }); it('should render customized render content', () => { diff --git a/server/parsers/visualization_card_parser.test.ts b/server/parsers/visualization_card_parser.test.ts index 32aa0757..4602ad83 100644 --- a/server/parsers/visualization_card_parser.test.ts +++ b/server/parsers/visualization_card_parser.test.ts @@ -29,18 +29,21 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, { content: 'id2', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, { content: 'id3', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, ]); }); @@ -66,12 +69,14 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, { content: 'id2', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, ]); }); @@ -110,6 +115,7 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, ]); }); @@ -137,12 +143,14 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, { content: 'id2', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', + isVisualization: true, }, ]); }); From 2ba8744c1e1fe892c1d3de0835cbc21d83d4ee3d Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Mon, 8 Jan 2024 15:42:11 +0800 Subject: [PATCH 03/12] feat: optimize arguments Signed-off-by: SuZhou-Joe --- public/tabs/chat/messages/message_content.test.tsx | 7 ++++++- public/tabs/chat/messages/message_content.tsx | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/public/tabs/chat/messages/message_content.test.tsx b/public/tabs/chat/messages/message_content.test.tsx index 7b9eaca4..15755995 100644 --- a/public/tabs/chat/messages/message_content.test.tsx +++ b/public/tabs/chat/messages/message_content.test.tsx @@ -92,7 +92,12 @@ describe('', () => { ); expect(pplVisualizationRenderMock.mock.calls[0]).toMatchInlineSnapshot(` Array [ - "mock ppl query", + Object { + "content": "mock ppl query", + "contentType": "ppl_visualization", + "isVisualization": true, + "type": "output", + }, Object { "chatContext": Object { "contentRenderers": Object { diff --git a/public/tabs/chat/messages/message_content.tsx b/public/tabs/chat/messages/message_content.tsx index 178d1bff..950e0be2 100644 --- a/public/tabs/chat/messages/message_content.tsx +++ b/public/tabs/chat/messages/message_content.tsx @@ -41,7 +41,7 @@ export const MessageContent: React.FC = React.memo((props) default: { const message = props.message as IMessage; return ( - chatContext.contentRenderers[message.contentType]?.(message.content, { + chatContext.contentRenderers[message.contentType]?.(message, { props, chatContext, }) ?? null From 8f1659f491193556c7d5108a19140fda3c32501d Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Mon, 8 Jan 2024 16:01:26 +0800 Subject: [PATCH 04/12] feat: update message bubble Signed-off-by: SuZhou-Joe --- public/index.ts | 1 + public/tabs/chat/messages/message_bubble.test.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/public/index.ts b/public/index.ts index 4c3ba3a2..a16d3c12 100644 --- a/public/index.ts +++ b/public/index.ts @@ -13,3 +13,4 @@ export function plugin(initializerContext: PluginInitializerContext) { } export { AssistantSetup, RenderProps } from './types'; +export { IMessage } from '../common/types/chat_saved_object_attributes'; diff --git a/public/tabs/chat/messages/message_bubble.test.tsx b/public/tabs/chat/messages/message_bubble.test.tsx index 20fc2919..8a2aafc4 100644 --- a/public/tabs/chat/messages/message_bubble.test.tsx +++ b/public/tabs/chat/messages/message_bubble.test.tsx @@ -115,6 +115,7 @@ describe('', () => { type: 'output', contentType: 'ppl_visualization', content: 'vis_id_mock', + isVisualization: true, }} /> ); From 718fc3fe9cb6ac7cb10641baf38f375db99d3506 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Wed, 10 Jan 2024 17:03:09 +0800 Subject: [PATCH 05/12] feat: add some comment Signed-off-by: SuZhou-Joe --- public/tabs/chat/messages/message_bubble.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/tabs/chat/messages/message_bubble.tsx b/public/tabs/chat/messages/message_bubble.tsx index 7b0892aa..11470272 100644 --- a/public/tabs/chat/messages/message_bubble.tsx +++ b/public/tabs/chat/messages/message_bubble.tsx @@ -148,6 +148,10 @@ export const MessageBubble: React.FC = React.memo((props) => Date: Wed, 10 Jan 2024 17:06:46 +0800 Subject: [PATCH 06/12] feat: update PR template Signed-off-by: SuZhou-Joe --- .github/PULL_REQUEST_TEMPLATE.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 19d54289..6c7e55f5 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -6,11 +6,9 @@ ### Check List - [ ] New functionality includes testing. - - [ ] All tests pass, including unit test, integration test and doctest -- [ ] New functionality has been documented. - - [ ] New functionality has javadoc added - - [ ] New functionality has user manual doc added -- [ ] Commits are signed per the DCO using --signoff + - [ ] All tests pass, including unit test, integration test. +- [ ] New functionality has user manual doc added. +- [ ] Commits are signed per the DCO using --signoff. By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license. For more information on following Developer Certificate of Origin and signing off your commits, please check [here](https://github.com/opensearch-project/OpenSearch/blob/main/CONTRIBUTING.md#developer-certificate-of-origin). From c119dbf235d59fd45381caf35d09182e017e0c93 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Wed, 10 Jan 2024 17:18:00 +0800 Subject: [PATCH 07/12] feat: update Signed-off-by: SuZhou-Joe --- public/tabs/chat/messages/message_content.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/public/tabs/chat/messages/message_content.test.tsx b/public/tabs/chat/messages/message_content.test.tsx index 15755995..a2bc38e7 100644 --- a/public/tabs/chat/messages/message_content.test.tsx +++ b/public/tabs/chat/messages/message_content.test.tsx @@ -101,6 +101,7 @@ describe('', () => { Object { "chatContext": Object { "contentRenderers": Object { + "customized_content_type": [MockFunction], "ppl_visualization": [MockFunction] { "calls": Array [ [Circular], From 21529315e33ad400155e35d862ced219b26de83e Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Wed, 10 Jan 2024 17:23:36 +0800 Subject: [PATCH 08/12] feat: update comment Signed-off-by: SuZhou-Joe --- public/tabs/chat/messages/message_bubble.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/tabs/chat/messages/message_bubble.tsx b/public/tabs/chat/messages/message_bubble.tsx index 11470272..0fcac380 100644 --- a/public/tabs/chat/messages/message_bubble.tsx +++ b/public/tabs/chat/messages/message_bubble.tsx @@ -150,7 +150,7 @@ export const MessageBubble: React.FC = React.memo((props) => Date: Wed, 10 Jan 2024 17:40:24 +0800 Subject: [PATCH 09/12] feat: remove some of the ppl_visualization code Signed-off-by: SuZhou-Joe --- common/types/chat_saved_object_attributes.ts | 2 +- .../chat/messages/message_content.test.tsx | 55 +------------------ public/utils/notebook.ts | 5 +- 3 files changed, 7 insertions(+), 55 deletions(-) diff --git a/common/types/chat_saved_object_attributes.ts b/common/types/chat_saved_object_attributes.ts index b32cce5e..3e90dedf 100644 --- a/common/types/chat_saved_object_attributes.ts +++ b/common/types/chat_saved_object_attributes.ts @@ -43,7 +43,7 @@ export interface IOutput { type: 'output'; traceId?: string; // used for tracing agent calls toolsUsed?: string[]; - contentType: 'error' | 'markdown' | 'visualization' | 'ppl_data_grid' | string; + contentType: 'error' | 'markdown' | 'visualization' | string; content: string; suggestedActions?: ISuggestedAction[]; messageId?: string; diff --git a/public/tabs/chat/messages/message_content.test.tsx b/public/tabs/chat/messages/message_content.test.tsx index a2bc38e7..3b0f736d 100644 --- a/public/tabs/chat/messages/message_content.test.tsx +++ b/public/tabs/chat/messages/message_content.test.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { MessageContent } from './message_content'; import * as chatContextExports from '../../../contexts/chat_context'; @@ -15,13 +15,11 @@ jest.mock('../../../components/core_visualization', () => { }); describe('', () => { - const pplVisualizationRenderMock = jest.fn(); const customizedRenderMock = jest.fn(); beforeEach(() => { jest.spyOn(chatContextExports, 'useChatContext').mockReturnValue({ contentRenderers: { - ppl_visualization: pplVisualizationRenderMock, customized_content_type: customizedRenderMock, }, }); @@ -79,55 +77,6 @@ describe('', () => { expect(screen.queryAllByText('title')).toHaveLength(1); }); - it('should render ppl visualization', () => { - render( - - ); - expect(pplVisualizationRenderMock.mock.calls[0]).toMatchInlineSnapshot(` - Array [ - Object { - "content": "mock ppl query", - "contentType": "ppl_visualization", - "isVisualization": true, - "type": "output", - }, - Object { - "chatContext": Object { - "contentRenderers": Object { - "customized_content_type": [MockFunction], - "ppl_visualization": [MockFunction] { - "calls": Array [ - [Circular], - ], - "results": Array [ - Object { - "type": "return", - "value": undefined, - }, - ], - }, - }, - }, - "props": Object { - "message": Object { - "content": "mock ppl query", - "contentType": "ppl_visualization", - "isVisualization": true, - "type": "output", - }, - }, - }, - ] - `); - }); - it('should render customized render content', () => { render( ', () => { }} /> ); - expect(customizedRenderMock).toHaveBeenCalledWith('mock customized content'); + expect(customizedRenderMock.mock.calls[0]).toMatchInlineSnapshot(); }); }); diff --git a/public/utils/notebook.ts b/public/utils/notebook.ts index f67d092d..c9f4f54d 100644 --- a/public/utils/notebook.ts +++ b/public/utils/notebook.ts @@ -92,6 +92,9 @@ export const convertMessagesToParagraphs = (messages: IMessage[], username: stri }); break; + /** + * TODO migrate ppl_data_grid logic to dashboards-observerability + */ case 'ppl_data_grid': const queryText = message.content; Object.assign(paragraph, { @@ -121,7 +124,7 @@ export const convertMessagesToParagraphs = (messages: IMessage[], username: stri }); break; - // error and ppl_visualization contentType will not be handled currently. + // error will not be handled currently. default: break; } From c178be984b13ddeb116839866f44b77370934701 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Thu, 11 Jan 2024 11:34:16 +0800 Subject: [PATCH 10/12] feat: optimize code Signed-off-by: SuZhou-Joe --- common/types/chat_saved_object_attributes.ts | 2 +- .../tabs/chat/messages/message_bubble.test.tsx | 4 ++-- public/tabs/chat/messages/message_bubble.tsx | 6 +++--- .../chat/messages/message_content.test.tsx | 18 +++++++++++++++++- .../parsers/visualization_card_parser.test.ts | 16 ++++++++-------- server/parsers/visualization_card_parser.ts | 2 +- 6 files changed, 32 insertions(+), 16 deletions(-) diff --git a/common/types/chat_saved_object_attributes.ts b/common/types/chat_saved_object_attributes.ts index 3e90dedf..c836f3b1 100644 --- a/common/types/chat_saved_object_attributes.ts +++ b/common/types/chat_saved_object_attributes.ts @@ -47,7 +47,7 @@ export interface IOutput { content: string; suggestedActions?: ISuggestedAction[]; messageId?: string; - isVisualization?: boolean; + fullWidth?: boolean; } export type IMessage = IInput | IOutput; diff --git a/public/tabs/chat/messages/message_bubble.test.tsx b/public/tabs/chat/messages/message_bubble.test.tsx index 8a2aafc4..629aa137 100644 --- a/public/tabs/chat/messages/message_bubble.test.tsx +++ b/public/tabs/chat/messages/message_bubble.test.tsx @@ -102,7 +102,7 @@ describe('', () => { type: 'output', contentType: 'visualization', content: 'vis_id_mock', - isVisualization: true, + fullWidth: true, }} /> ); @@ -115,7 +115,7 @@ describe('', () => { type: 'output', contentType: 'ppl_visualization', content: 'vis_id_mock', - isVisualization: true, + fullWidth: true, }} /> ); diff --git a/public/tabs/chat/messages/message_bubble.tsx b/public/tabs/chat/messages/message_bubble.tsx index 0fcac380..a23b2404 100644 --- a/public/tabs/chat/messages/message_bubble.tsx +++ b/public/tabs/chat/messages/message_bubble.tsx @@ -133,7 +133,7 @@ export const MessageBubble: React.FC = React.memo((props) => ); } - const isVisualization = props.message.isVisualization; + const fullWidth = props.message.fullWidth; return ( = React.memo((props) => * When using minWidth the content width inside may be larger than the container itself, * especially in data grid case that the content will change its size according to fullScreen or not. */ - style={isVisualization ? { width: '100%' } : {}} + style={fullWidth ? { width: '100%' } : {}} hasShadow={false} hasBorder={false} paddingSize="l" @@ -175,7 +175,7 @@ export const MessageBubble: React.FC = React.memo((props) => justifyContent="flexStart" style={{ paddingLeft: 10 }} > - {!isVisualization && ( + {!fullWidth && ( {(copy) => ( diff --git a/public/tabs/chat/messages/message_content.test.tsx b/public/tabs/chat/messages/message_content.test.tsx index 3b0f736d..a61dc646 100644 --- a/public/tabs/chat/messages/message_content.test.tsx +++ b/public/tabs/chat/messages/message_content.test.tsx @@ -87,6 +87,22 @@ describe('', () => { }} /> ); - expect(customizedRenderMock.mock.calls[0]).toMatchInlineSnapshot(); + expect(customizedRenderMock.mock.calls[0][0]).toMatchInlineSnapshot(` + Object { + "content": "mock customized content", + "contentType": "customized_content_type", + "type": "output", + } + `); + expect(customizedRenderMock.mock.calls[0][1].props).toMatchInlineSnapshot(` + Object { + "message": Object { + "content": "mock customized content", + "contentType": "customized_content_type", + "type": "output", + }, + } + `); + expect(customizedRenderMock.mock.calls[0][1].chatContext).not.toBeUndefined(); }); }); diff --git a/server/parsers/visualization_card_parser.test.ts b/server/parsers/visualization_card_parser.test.ts index 4602ad83..7284c373 100644 --- a/server/parsers/visualization_card_parser.test.ts +++ b/server/parsers/visualization_card_parser.test.ts @@ -29,21 +29,21 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, { content: 'id2', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, { content: 'id3', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, ]); }); @@ -69,14 +69,14 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, { content: 'id2', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, ]); }); @@ -115,7 +115,7 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, ]); }); @@ -143,14 +143,14 @@ describe('VisualizationCardParser', () => { contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, { content: 'id2', contentType: 'visualization', suggestedActions: [{ actionType: 'view_in_dashboards', message: 'View in Visualize' }], type: 'output', - isVisualization: true, + fullWidth: true, }, ]); }); diff --git a/server/parsers/visualization_card_parser.ts b/server/parsers/visualization_card_parser.ts index 4fc5b02d..ebe9b651 100644 --- a/server/parsers/visualization_card_parser.ts +++ b/server/parsers/visualization_card_parser.ts @@ -35,7 +35,7 @@ export const VisualizationCardParser = { type: 'output', content: id, contentType: 'visualization', - isVisualization: true, + fullWidth: true, suggestedActions: [ { message: 'View in Visualize', From 7cf75084974321760582c36556916feb94e4ff73 Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Thu, 11 Jan 2024 11:39:54 +0800 Subject: [PATCH 11/12] refactor: use messageRender to replace contentRender Signed-off-by: SuZhou-Joe --- public/chat_header_button.test.tsx | 12 ++++++------ public/chat_header_button.tsx | 8 ++++---- public/contexts/__tests__/chat_context.test.tsx | 2 +- public/contexts/chat_context.tsx | 4 ++-- public/hooks/use_chat_actions.test.tsx | 2 +- public/plugin.tsx | 12 ++++++------ public/tabs/chat/messages/message_content.test.tsx | 2 +- public/tabs/chat/messages/message_content.tsx | 2 +- public/types.ts | 4 ++-- 9 files changed, 24 insertions(+), 24 deletions(-) diff --git a/public/chat_header_button.test.tsx b/public/chat_header_button.test.tsx index ecf38337..f7c3c773 100644 --- a/public/chat_header_button.test.tsx +++ b/public/chat_header_button.test.tsx @@ -60,7 +60,7 @@ describe('', () => { ', () => { ', () => { ', () => { ', () => { ', () => { ; + messageRenderers: Record; actionExecutors: Record; assistantActions: AssistantActions; currentAccount: UserAccount; @@ -70,7 +70,7 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => { setFlyoutVisible, setFlyoutComponent, userHasAccess: props.userHasAccess, - contentRenderers: props.contentRenderers, + messageRenderers: props.messageRenderers, actionExecutors: props.actionExecutors, currentAccount: props.currentAccount, title, @@ -86,7 +86,7 @@ export const HeaderChatButton = (props: HeaderChatButtonProps) => { selectedTabId, preSelectedTabId, props.userHasAccess, - props.contentRenderers, + props.messageRenderers, props.actionExecutors, props.currentAccount, title, diff --git a/public/contexts/__tests__/chat_context.test.tsx b/public/contexts/__tests__/chat_context.test.tsx index 0616a301..07516fd5 100644 --- a/public/contexts/__tests__/chat_context.test.tsx +++ b/public/contexts/__tests__/chat_context.test.tsx @@ -18,7 +18,7 @@ describe('useChatContext', () => { setFlyoutVisible: jest.fn(), setFlyoutComponent: jest.fn(), userHasAccess: true, - contentRenderers: {}, + messageRenderers: {}, actionExecutors: {}, currentAccount: { username: 'foo', tenant: '' }, setTitle: jest.fn(), diff --git a/public/contexts/chat_context.tsx b/public/contexts/chat_context.tsx index 04df189a..9b8a29dc 100644 --- a/public/contexts/chat_context.tsx +++ b/public/contexts/chat_context.tsx @@ -4,7 +4,7 @@ */ import React, { useContext } from 'react'; -import { ActionExecutor, ContentRenderer, UserAccount, TabId } from '../types'; +import { ActionExecutor, UserAccount, TabId, MessageRenderer } from '../types'; export interface IChatContext { appId?: string; @@ -18,7 +18,7 @@ export interface IChatContext { setFlyoutVisible: React.Dispatch>; setFlyoutComponent: React.Dispatch>; userHasAccess: boolean; - contentRenderers: Record; + messageRenderers: Record; actionExecutors: Record; currentAccount: UserAccount; title?: string; diff --git a/public/hooks/use_chat_actions.test.tsx b/public/hooks/use_chat_actions.test.tsx index 4b23c8e2..513cab4e 100644 --- a/public/hooks/use_chat_actions.test.tsx +++ b/public/hooks/use_chat_actions.test.tsx @@ -75,7 +75,7 @@ describe('useChatActions hook', () => { flyoutVisible: false, flyoutFullScreen: false, userHasAccess: false, - contentRenderers: {}, + messageRenderers: {}, currentAccount: { username: '', tenant: '', diff --git a/public/plugin.tsx b/public/plugin.tsx index 7aa4424e..8e335939 100644 --- a/public/plugin.tsx +++ b/public/plugin.tsx @@ -20,7 +20,7 @@ import { AssistantActions, AssistantSetup, AssistantStart, - ContentRenderer, + MessageRenderer, SetupDependencies, } from './types'; @@ -49,7 +49,7 @@ export class AssistantPlugin core: CoreSetup, setupDeps: SetupDependencies ): AssistantSetup { - const contentRenderers: Record = {}; + const messageRenderers: Record = {}; const actionExecutors: Record = {}; const assistantActions: AssistantActions = {} as AssistantActions; /** @@ -95,7 +95,7 @@ export class AssistantPlugin { - if (contentType in contentRenderers) + registerMessageRenderer: (contentType, render) => { + if (contentType in messageRenderers) console.warn(`Content renderer type ${contentType} is already registered.`); - contentRenderers[contentType] = render; + messageRenderers[contentType] = render; }, registerActionExecutor: (actionType, execute) => { if (actionType in actionExecutors) diff --git a/public/tabs/chat/messages/message_content.test.tsx b/public/tabs/chat/messages/message_content.test.tsx index a61dc646..832701ad 100644 --- a/public/tabs/chat/messages/message_content.test.tsx +++ b/public/tabs/chat/messages/message_content.test.tsx @@ -19,7 +19,7 @@ describe('', () => { beforeEach(() => { jest.spyOn(chatContextExports, 'useChatContext').mockReturnValue({ - contentRenderers: { + messageRenderers: { customized_content_type: customizedRenderMock, }, }); diff --git a/public/tabs/chat/messages/message_content.tsx b/public/tabs/chat/messages/message_content.tsx index 950e0be2..5b0be173 100644 --- a/public/tabs/chat/messages/message_content.tsx +++ b/public/tabs/chat/messages/message_content.tsx @@ -41,7 +41,7 @@ export const MessageContent: React.FC = React.memo((props) default: { const message = props.message as IMessage; return ( - chatContext.contentRenderers[message.contentType]?.(message, { + chatContext.messageRenderers[message.contentType]?.(message, { props, chatContext, }) ?? null diff --git a/public/types.ts b/public/types.ts index 9a035042..d0698774 100644 --- a/public/types.ts +++ b/public/types.ts @@ -15,7 +15,7 @@ export interface RenderProps { } // TODO should pair with server side registered output parser -export type ContentRenderer = (content: unknown, renderProps: RenderProps) => React.ReactElement; +export type MessageRenderer = (message: IMessage, renderProps: RenderProps) => React.ReactElement; export type ActionExecutor = (params: Record) => void; export interface AssistantActions { send: (input: IMessage) => Promise; @@ -37,7 +37,7 @@ export interface SetupDependencies { } export interface AssistantSetup { - registerContentRenderer: (contentType: string, render: ContentRenderer) => void; + registerMessageRenderer: (contentType: string, render: MessageRenderer) => void; registerActionExecutor: (actionType: string, execute: ActionExecutor) => void; /** * Returns true if chat UI is enabled. From d83c7c382110ee5d2431c09d13da95098c24655c Mon Sep 17 00:00:00 2001 From: SuZhou-Joe Date: Thu, 11 Jan 2024 12:04:51 +0800 Subject: [PATCH 12/12] fix: update snapshot Signed-off-by: SuZhou-Joe --- .../agent_framework_traces.test.tsx.snap | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/public/components/__snapshots__/agent_framework_traces.test.tsx.snap b/public/components/__snapshots__/agent_framework_traces.test.tsx.snap index e543776a..fc74dc36 100644 --- a/public/components/__snapshots__/agent_framework_traces.test.tsx.snap +++ b/public/components/__snapshots__/agent_framework_traces.test.tsx.snap @@ -7,17 +7,23 @@ HTMLCollection [ class="euiMarkdownFormat" >
-

+

How was this generated

-

+

Question

-

+

Result

@@ -66,7 +72,11 @@ HTMLCollection [ viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg" - /> + > + +