@patternfly/chatbot 6.5.0-prerelease.22 → 6.5.0-prerelease.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DeepThinking/DeepThinking.d.ts +11 -0
- package/dist/cjs/DeepThinking/DeepThinking.js +30 -2
- package/dist/cjs/DeepThinking/DeepThinking.test.js +39 -0
- package/dist/cjs/MarkdownContent/MarkdownContent.d.ts +39 -0
- package/dist/cjs/MarkdownContent/MarkdownContent.js +181 -0
- package/dist/cjs/MarkdownContent/MarkdownContent.test.d.ts +1 -0
- package/dist/cjs/MarkdownContent/MarkdownContent.test.js +192 -0
- package/dist/cjs/MarkdownContent/index.d.ts +2 -0
- package/dist/cjs/MarkdownContent/index.js +23 -0
- package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.d.ts +3 -1
- package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js +3 -2
- package/dist/cjs/Message/LinkMessage/LinkMessage.d.ts +5 -1
- package/dist/cjs/Message/LinkMessage/LinkMessage.js +4 -3
- package/dist/cjs/Message/ListMessage/OrderedListMessage.d.ts +9 -1
- package/dist/cjs/Message/ListMessage/OrderedListMessage.js +2 -1
- package/dist/cjs/Message/ListMessage/UnorderedListMessage.d.ts +7 -1
- package/dist/cjs/Message/ListMessage/UnorderedListMessage.js +2 -1
- package/dist/cjs/Message/Message.js +2 -155
- package/dist/cjs/Message/TableMessage/TableMessage.d.ts +6 -1
- package/dist/cjs/Message/TableMessage/TableMessage.js +3 -2
- package/dist/cjs/Message/TextMessage/TextMessage.d.ts +8 -1
- package/dist/cjs/Message/TextMessage/TextMessage.js +3 -2
- package/dist/cjs/Message/UserFeedback/UserFeedback.d.ts +2 -0
- package/dist/cjs/Message/UserFeedback/UserFeedback.js +5 -5
- package/dist/cjs/MessageBar/MessageBar.js +18 -4
- package/dist/cjs/ToolCall/ToolCall.d.ts +9 -0
- package/dist/cjs/ToolCall/ToolCall.js +19 -3
- package/dist/cjs/ToolCall/ToolCall.test.js +31 -0
- package/dist/cjs/ToolResponse/ToolResponse.d.ts +15 -0
- package/dist/cjs/ToolResponse/ToolResponse.js +48 -2
- package/dist/cjs/ToolResponse/ToolResponse.test.js +60 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +4 -1
- package/dist/css/main.css +82 -9
- package/dist/css/main.css.map +1 -1
- package/dist/dynamic/MarkdownContent/package.json +1 -0
- package/dist/esm/DeepThinking/DeepThinking.d.ts +11 -0
- package/dist/esm/DeepThinking/DeepThinking.js +27 -2
- package/dist/esm/DeepThinking/DeepThinking.test.js +39 -0
- package/dist/esm/MarkdownContent/MarkdownContent.d.ts +39 -0
- package/dist/esm/MarkdownContent/MarkdownContent.js +174 -0
- package/dist/esm/MarkdownContent/MarkdownContent.test.d.ts +1 -0
- package/dist/esm/MarkdownContent/MarkdownContent.test.js +187 -0
- package/dist/esm/MarkdownContent/index.d.ts +2 -0
- package/dist/esm/MarkdownContent/index.js +2 -0
- package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.d.ts +3 -1
- package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js +3 -2
- package/dist/esm/Message/LinkMessage/LinkMessage.d.ts +5 -1
- package/dist/esm/Message/LinkMessage/LinkMessage.js +4 -3
- package/dist/esm/Message/ListMessage/OrderedListMessage.d.ts +9 -1
- package/dist/esm/Message/ListMessage/OrderedListMessage.js +2 -1
- package/dist/esm/Message/ListMessage/UnorderedListMessage.d.ts +7 -1
- package/dist/esm/Message/ListMessage/UnorderedListMessage.js +2 -1
- package/dist/esm/Message/Message.js +3 -156
- package/dist/esm/Message/TableMessage/TableMessage.d.ts +6 -1
- package/dist/esm/Message/TableMessage/TableMessage.js +3 -2
- package/dist/esm/Message/TextMessage/TextMessage.d.ts +8 -1
- package/dist/esm/Message/TextMessage/TextMessage.js +3 -2
- package/dist/esm/Message/UserFeedback/UserFeedback.d.ts +2 -0
- package/dist/esm/Message/UserFeedback/UserFeedback.js +6 -6
- package/dist/esm/MessageBar/MessageBar.js +18 -4
- package/dist/esm/ToolCall/ToolCall.d.ts +9 -0
- package/dist/esm/ToolCall/ToolCall.js +16 -3
- package/dist/esm/ToolCall/ToolCall.test.js +31 -0
- package/dist/esm/ToolResponse/ToolResponse.d.ts +15 -0
- package/dist/esm/ToolResponse/ToolResponse.js +45 -2
- package/dist/esm/ToolResponse/ToolResponse.test.js +60 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx +14 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownDeepThinking.tsx +26 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownToolCall.tsx +29 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownToolResponse.tsx +200 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +32 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +15 -1
- package/src/DeepThinking/DeepThinking.test.tsx +48 -0
- package/src/DeepThinking/DeepThinking.tsx +50 -4
- package/src/MarkdownContent/MarkdownContent.test.tsx +207 -0
- package/src/MarkdownContent/MarkdownContent.tsx +264 -0
- package/src/MarkdownContent/index.ts +2 -0
- package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +4 -0
- package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +5 -1
- package/src/Message/LinkMessage/LinkMessage.scss +5 -0
- package/src/Message/LinkMessage/LinkMessage.tsx +24 -2
- package/src/Message/ListMessage/ListMessage.scss +8 -0
- package/src/Message/ListMessage/OrderedListMessage.tsx +16 -2
- package/src/Message/ListMessage/UnorderedListMessage.tsx +12 -2
- package/src/Message/Message.tsx +21 -181
- package/src/Message/QuickResponse/QuickResponse.scss +3 -1
- package/src/Message/TableMessage/TableMessage.scss +11 -0
- package/src/Message/TableMessage/TableMessage.tsx +18 -2
- package/src/Message/TextMessage/TextMessage.scss +8 -0
- package/src/Message/TextMessage/TextMessage.tsx +29 -2
- package/src/Message/UserFeedback/UserFeedback.scss +28 -1
- package/src/Message/UserFeedback/UserFeedback.tsx +22 -12
- package/src/MessageBar/AttachButton.scss +0 -1
- package/src/MessageBar/MessageBar.scss +11 -2
- package/src/MessageBar/MessageBar.tsx +22 -3
- package/src/MessageBar/MicrophoneButton.scss +0 -1
- package/src/MessageBar/SendButton.scss +0 -1
- package/src/MessageBar/StopButton.scss +0 -1
- package/src/ToolCall/ToolCall.test.tsx +40 -0
- package/src/ToolCall/ToolCall.tsx +37 -3
- package/src/ToolResponse/ToolResponse.scss +10 -0
- package/src/ToolResponse/ToolResponse.test.tsx +75 -0
- package/src/ToolResponse/ToolResponse.tsx +78 -6
- package/src/index.ts +3 -0
- package/src/main.scss +1 -0
|
@@ -116,4 +116,64 @@ describe('ToolResponse', () => {
|
|
|
116
116
|
expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
|
|
117
117
|
expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
|
|
118
118
|
}));
|
|
119
|
+
it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
|
|
120
|
+
const toggleContent = '**Bold toggle**';
|
|
121
|
+
const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { toggleContent: toggleContent, isToggleContentMarkdown: true })));
|
|
122
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
123
|
+
expect(screen.getByText('Bold toggle')).toBeTruthy();
|
|
124
|
+
});
|
|
125
|
+
it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
|
|
126
|
+
const toggleContent = '**Bold toggle**';
|
|
127
|
+
render(_jsx(ToolResponse, Object.assign({}, defaultProps, { toggleContent: toggleContent })));
|
|
128
|
+
expect(screen.getByText('**Bold toggle**')).toBeTruthy();
|
|
129
|
+
});
|
|
130
|
+
it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
|
|
131
|
+
const subheading = '**Bold subheading**';
|
|
132
|
+
const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { subheading: subheading, isSubheadingMarkdown: true })));
|
|
133
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
134
|
+
expect(screen.getByText('Bold subheading')).toBeTruthy();
|
|
135
|
+
});
|
|
136
|
+
it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
|
|
137
|
+
const subheading = '**Bold subheading**';
|
|
138
|
+
render(_jsx(ToolResponse, Object.assign({}, defaultProps, { subheading: subheading })));
|
|
139
|
+
expect(screen.getByText('**Bold subheading**')).toBeTruthy();
|
|
140
|
+
});
|
|
141
|
+
it('should render body as markdown when isBodyMarkdown is true', () => {
|
|
142
|
+
const body = '**Bold body**';
|
|
143
|
+
const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true })));
|
|
144
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
145
|
+
expect(screen.getByText('Bold body')).toBeTruthy();
|
|
146
|
+
});
|
|
147
|
+
it('should not render body as markdown when isBodyMarkdown is false', () => {
|
|
148
|
+
const body = '**Bold body**';
|
|
149
|
+
render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body })));
|
|
150
|
+
expect(screen.getByText('**Bold body**')).toBeTruthy();
|
|
151
|
+
});
|
|
152
|
+
it('should render cardTitle as markdown when isCardTitleMarkdown is true', () => {
|
|
153
|
+
const cardTitle = '**Bold card title**';
|
|
154
|
+
const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardTitle: cardTitle, isCardTitleMarkdown: true })));
|
|
155
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
156
|
+
expect(screen.getByText('Bold card title')).toBeTruthy();
|
|
157
|
+
});
|
|
158
|
+
it('should not render cardTitle as markdown when isCardTitleMarkdown is false', () => {
|
|
159
|
+
const cardTitle = '**Bold card title**';
|
|
160
|
+
render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardTitle: cardTitle })));
|
|
161
|
+
expect(screen.getByText('**Bold card title**')).toBeTruthy();
|
|
162
|
+
});
|
|
163
|
+
it('should render cardBody as markdown when isCardBodyMarkdown is true', () => {
|
|
164
|
+
const cardBody = '**Bold card body**';
|
|
165
|
+
const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardBody: cardBody, isCardBodyMarkdown: true })));
|
|
166
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
167
|
+
expect(screen.getByText('Bold card body')).toBeTruthy();
|
|
168
|
+
});
|
|
169
|
+
it('should not render cardBody as markdown when isCardBodyMarkdown is false', () => {
|
|
170
|
+
const cardBody = '**Bold card body**';
|
|
171
|
+
render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardBody: cardBody })));
|
|
172
|
+
expect(screen.getByText('**Bold card body**')).toBeTruthy();
|
|
173
|
+
});
|
|
174
|
+
it('should pass markdownContentProps to MarkdownContent component', () => {
|
|
175
|
+
const body = '**Bold body**';
|
|
176
|
+
const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true, markdownContentProps: { isPrimary: true } })));
|
|
177
|
+
expect(container.querySelector('.pf-m-primary')).toBeTruthy();
|
|
178
|
+
});
|
|
119
179
|
});
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -40,6 +40,8 @@ export { default as ImagePreview } from './ImagePreview';
|
|
|
40
40
|
export * from './ImagePreview';
|
|
41
41
|
export { default as LoadingMessage } from './LoadingMessage';
|
|
42
42
|
export * from './LoadingMessage';
|
|
43
|
+
export { default as MarkdownContent } from './MarkdownContent';
|
|
44
|
+
export * from './MarkdownContent';
|
|
43
45
|
export { default as Message } from './Message';
|
|
44
46
|
export * from './Message';
|
|
45
47
|
export { default as MessageBar } from './MessageBar';
|
package/dist/esm/index.js
CHANGED
|
@@ -41,6 +41,8 @@ export { default as ImagePreview } from './ImagePreview';
|
|
|
41
41
|
export * from './ImagePreview';
|
|
42
42
|
export { default as LoadingMessage } from './LoadingMessage';
|
|
43
43
|
export * from './LoadingMessage';
|
|
44
|
+
export { default as MarkdownContent } from './MarkdownContent';
|
|
45
|
+
export * from './MarkdownContent';
|
|
44
46
|
export { default as Message } from './Message';
|
|
45
47
|
export * from './Message';
|
|
46
48
|
export { default as MessageBar } from './MessageBar';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/ImagePreview/ImagePreview.test.tsx","../src/ImagePreview/ImagePreview.tsx","../src/ImagePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/SuperscriptMessage/SuperscriptMessage.tsx","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/Onboarding/Onboarding.test.tsx","../src/Onboarding/Onboarding.tsx","../src/Onboarding/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/SourcesCardBase/SourcesCardBase.test.tsx","../src/SourcesCardBase/SourcesCardBase.tsx","../src/SourcesCardBase/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolCall/ToolCall.test.tsx","../src/ToolCall/ToolCall.tsx","../src/ToolCall/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/monaco-editor.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-highlight.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
|
|
1
|
+
{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/ImagePreview/ImagePreview.test.tsx","../src/ImagePreview/ImagePreview.tsx","../src/ImagePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/MarkdownContent/MarkdownContent.test.tsx","../src/MarkdownContent/MarkdownContent.tsx","../src/MarkdownContent/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/SuperscriptMessage/SuperscriptMessage.tsx","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/Onboarding/Onboarding.test.tsx","../src/Onboarding/Onboarding.tsx","../src/Onboarding/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/SourcesCardBase/SourcesCardBase.test.tsx","../src/SourcesCardBase/SourcesCardBase.tsx","../src/SourcesCardBase/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolCall/ToolCall.test.tsx","../src/ToolCall/ToolCall.tsx","../src/ToolCall/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/monaco-editor.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-highlight.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/chatbot",
|
|
3
|
-
"version": "6.5.0-prerelease.
|
|
3
|
+
"version": "6.5.0-prerelease.24",
|
|
4
4
|
"description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithFeedback.tsx
CHANGED
|
@@ -7,8 +7,10 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
|
|
|
7
7
|
const [hasCloseButton, setHasCloseButton] = useState(false);
|
|
8
8
|
const [hasTextArea, setHasTextArea] = useState(false);
|
|
9
9
|
const [hasChildren, setHasChildren] = useState(false);
|
|
10
|
+
const [hasPrivacyStatement, setHasPrivacyStatement] = useState(false);
|
|
10
11
|
|
|
11
|
-
const children = <>
|
|
12
|
+
const children = <>This is additional content.</>;
|
|
13
|
+
const privacyStatement = 'Do not share any personal or other sensitive information in your feedback.';
|
|
12
14
|
|
|
13
15
|
return (
|
|
14
16
|
<>
|
|
@@ -33,6 +35,15 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
|
|
|
33
35
|
label="Has additional content"
|
|
34
36
|
id="has-children"
|
|
35
37
|
/>
|
|
38
|
+
<Checkbox
|
|
39
|
+
isChecked={hasPrivacyStatement}
|
|
40
|
+
onChange={() => {
|
|
41
|
+
setHasPrivacyStatement(!hasPrivacyStatement);
|
|
42
|
+
}}
|
|
43
|
+
name="feedback-card-with-privacy"
|
|
44
|
+
label="Has privacy statement"
|
|
45
|
+
id="has-privacy"
|
|
46
|
+
/>
|
|
36
47
|
</FormGroup>
|
|
37
48
|
</FlexItem>
|
|
38
49
|
<FlexItem>
|
|
@@ -51,6 +62,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
|
|
|
51
62
|
alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
|
|
52
63
|
hasTextArea,
|
|
53
64
|
children: hasChildren ? children : undefined,
|
|
65
|
+
privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
|
|
54
66
|
// eslint-disable-next-line no-console
|
|
55
67
|
onClose: () => console.log('closed feedback form'),
|
|
56
68
|
focusOnLoad: false
|
|
@@ -73,6 +85,7 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
|
|
|
73
85
|
alert(`Selected ${quickResponse} and received the additional feedback: ${additionalFeedback}`),
|
|
74
86
|
hasTextArea,
|
|
75
87
|
children: hasChildren ? children : undefined,
|
|
88
|
+
privacyStatement: hasPrivacyStatement ? privacyStatement : undefined,
|
|
76
89
|
// eslint-disable-next-line no-console
|
|
77
90
|
onClose: () => console.log('closed feedback form'),
|
|
78
91
|
focusOnLoad: false
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import Message from '@patternfly/chatbot/dist/dynamic/Message';
|
|
3
|
+
import patternflyAvatar from './patternfly_avatar.jpg';
|
|
4
|
+
|
|
5
|
+
export const MessageWithMarkdownDeepThinkingExample: FunctionComponent = () => (
|
|
6
|
+
<Message
|
|
7
|
+
name="Bot"
|
|
8
|
+
role="bot"
|
|
9
|
+
avatar={patternflyAvatar}
|
|
10
|
+
content="This example shows how to use Markdown formatting in deep thinking content. Note the use of shouldRetainStyles to maintain proper formatting:"
|
|
11
|
+
deepThinking={{
|
|
12
|
+
shouldRetainStyles: true,
|
|
13
|
+
toggleContent: 'Show thinking',
|
|
14
|
+
subheading: '> Thought for 3 seconds',
|
|
15
|
+
isSubheadingMarkdown: true,
|
|
16
|
+
body: `I considered **multiple approaches** to answer your question:
|
|
17
|
+
|
|
18
|
+
1. *Direct response* - Quick but less comprehensive
|
|
19
|
+
2. *Research-based* - Thorough but time-consuming
|
|
20
|
+
3. **Balanced approach** - Combines speed and accuracy
|
|
21
|
+
|
|
22
|
+
I chose option 3 because it provides the best user experience.`,
|
|
23
|
+
isBodyMarkdown: true
|
|
24
|
+
}}
|
|
25
|
+
/>
|
|
26
|
+
);
|
package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownToolCall.tsx
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import Message from '@patternfly/chatbot/dist/dynamic/Message';
|
|
3
|
+
import patternflyAvatar from './patternfly_avatar.jpg';
|
|
4
|
+
|
|
5
|
+
export const MessageWithMarkdownToolCallExample: FunctionComponent = () => (
|
|
6
|
+
<Message
|
|
7
|
+
name="Bot"
|
|
8
|
+
role="bot"
|
|
9
|
+
avatar={patternflyAvatar}
|
|
10
|
+
content="This example shows how to use Markdown formatting in tool call content. Note the use of shouldRetainStyles to maintain proper formatting:"
|
|
11
|
+
toolCall={{
|
|
12
|
+
shouldRetainStyles: true,
|
|
13
|
+
titleText: "Calling 'data_processor'",
|
|
14
|
+
expandableContent: `**Processing data** from the following sources:
|
|
15
|
+
|
|
16
|
+
- Database query results
|
|
17
|
+
- API responses
|
|
18
|
+
- *Local cache*
|
|
19
|
+
|
|
20
|
+
\`\`\`json
|
|
21
|
+
{
|
|
22
|
+
"status": "processing",
|
|
23
|
+
"items": 42
|
|
24
|
+
}
|
|
25
|
+
\`\`\``,
|
|
26
|
+
isExpandableContentMarkdown: true
|
|
27
|
+
}}
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
|
|
2
|
+
import Message from '@patternfly/chatbot/dist/dynamic/Message';
|
|
3
|
+
import patternflyAvatar from './patternfly_avatar.jpg';
|
|
4
|
+
import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
|
|
5
|
+
import {
|
|
6
|
+
Button,
|
|
7
|
+
DescriptionList,
|
|
8
|
+
DescriptionListDescription,
|
|
9
|
+
DescriptionListGroup,
|
|
10
|
+
DescriptionListTerm,
|
|
11
|
+
ExpandableSection,
|
|
12
|
+
ExpandableSectionVariant,
|
|
13
|
+
Flex,
|
|
14
|
+
FlexItem,
|
|
15
|
+
Label
|
|
16
|
+
} from '@patternfly/react-core';
|
|
17
|
+
export const MessageWithToolResponseExample: FunctionComponent = () => {
|
|
18
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
19
|
+
const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
|
|
20
|
+
setIsExpanded(isExpanded);
|
|
21
|
+
};
|
|
22
|
+
const toolResponseBody = `The tool processed **3 database queries** and returned the following results:
|
|
23
|
+
|
|
24
|
+
1. User data - *42 records*
|
|
25
|
+
2. Transaction history - *128 records*
|
|
26
|
+
3. Analytics metrics - *15 data points*
|
|
27
|
+
|
|
28
|
+
\`\`\`json
|
|
29
|
+
{
|
|
30
|
+
"status": "success",
|
|
31
|
+
"execution_time": "0.12s"
|
|
32
|
+
}
|
|
33
|
+
\`\`\``;
|
|
34
|
+
return (
|
|
35
|
+
<Message
|
|
36
|
+
name="Bot"
|
|
37
|
+
role="bot"
|
|
38
|
+
avatar={patternflyAvatar}
|
|
39
|
+
content="This example shows how to use Markdown formatting in tool response content. Note the use of shouldRetainStyles to maintain proper formatting:"
|
|
40
|
+
toolResponse={{
|
|
41
|
+
shouldRetainStyles: true,
|
|
42
|
+
isToggleContentMarkdown: true,
|
|
43
|
+
toggleContent: '**Tool response:** data_query_tool',
|
|
44
|
+
isSubheadingMarkdown: true,
|
|
45
|
+
subheading: '> Completed in 0.12 seconds',
|
|
46
|
+
body: toolResponseBody,
|
|
47
|
+
isBodyMarkdown: true,
|
|
48
|
+
cardTitle: (
|
|
49
|
+
<Flex
|
|
50
|
+
alignItems={{
|
|
51
|
+
default: 'alignItemsCenter'
|
|
52
|
+
}}
|
|
53
|
+
justifyContent={{
|
|
54
|
+
default: 'justifyContentSpaceBetween'
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
57
|
+
<FlexItem>
|
|
58
|
+
<Flex
|
|
59
|
+
direction={{
|
|
60
|
+
default: 'column'
|
|
61
|
+
}}
|
|
62
|
+
gap={{
|
|
63
|
+
default: 'gapXs'
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
<FlexItem
|
|
67
|
+
grow={{
|
|
68
|
+
default: 'grow'
|
|
69
|
+
}}
|
|
70
|
+
>
|
|
71
|
+
<Flex
|
|
72
|
+
gap={{
|
|
73
|
+
default: 'gapXs'
|
|
74
|
+
}}
|
|
75
|
+
>
|
|
76
|
+
<FlexItem>
|
|
77
|
+
<WrenchIcon
|
|
78
|
+
style={{
|
|
79
|
+
color: 'var(--pf-t--global--icon--color--brand--default'
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
</FlexItem>
|
|
83
|
+
<FlexItem>toolName</FlexItem>
|
|
84
|
+
</Flex>
|
|
85
|
+
</FlexItem>
|
|
86
|
+
<FlexItem>
|
|
87
|
+
<Flex
|
|
88
|
+
gap={{
|
|
89
|
+
default: 'gapSm'
|
|
90
|
+
}}
|
|
91
|
+
style={{
|
|
92
|
+
fontSize: '12px',
|
|
93
|
+
fontWeight: '400'
|
|
94
|
+
}}
|
|
95
|
+
>
|
|
96
|
+
<FlexItem>Execution time:</FlexItem>
|
|
97
|
+
<FlexItem>0.12 seconds</FlexItem>
|
|
98
|
+
</Flex>
|
|
99
|
+
</FlexItem>
|
|
100
|
+
</Flex>
|
|
101
|
+
</FlexItem>
|
|
102
|
+
<FlexItem>
|
|
103
|
+
<Button
|
|
104
|
+
variant="plain"
|
|
105
|
+
aria-label="Copy tool response to clipboard"
|
|
106
|
+
icon={
|
|
107
|
+
<CopyIcon
|
|
108
|
+
style={{
|
|
109
|
+
color: 'var(--pf-t--global--icon--color--subtle)'
|
|
110
|
+
}}
|
|
111
|
+
/>
|
|
112
|
+
}
|
|
113
|
+
></Button>
|
|
114
|
+
</FlexItem>
|
|
115
|
+
</Flex>
|
|
116
|
+
),
|
|
117
|
+
cardBody: (
|
|
118
|
+
<>
|
|
119
|
+
<DescriptionList
|
|
120
|
+
style={{
|
|
121
|
+
'--pf-v6-c-description-list--RowGap': 'var(--pf-t--global--spacer--md)'
|
|
122
|
+
}}
|
|
123
|
+
aria-label="Tool response"
|
|
124
|
+
>
|
|
125
|
+
<DescriptionListGroup
|
|
126
|
+
style={{
|
|
127
|
+
'--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)'
|
|
128
|
+
}}
|
|
129
|
+
>
|
|
130
|
+
<DescriptionListTerm>Parameters</DescriptionListTerm>
|
|
131
|
+
<DescriptionListDescription>
|
|
132
|
+
<Flex
|
|
133
|
+
direction={{
|
|
134
|
+
default: 'column'
|
|
135
|
+
}}
|
|
136
|
+
>
|
|
137
|
+
<FlexItem>Optional description text for parameters.</FlexItem>
|
|
138
|
+
<FlexItem>
|
|
139
|
+
<Flex
|
|
140
|
+
gap={{
|
|
141
|
+
default: 'gapSm'
|
|
142
|
+
}}
|
|
143
|
+
>
|
|
144
|
+
<FlexItem>
|
|
145
|
+
<Label variant="outline" color="blue">
|
|
146
|
+
type
|
|
147
|
+
</Label>
|
|
148
|
+
</FlexItem>
|
|
149
|
+
<FlexItem>
|
|
150
|
+
<Label variant="outline" color="blue">
|
|
151
|
+
properties
|
|
152
|
+
</Label>
|
|
153
|
+
</FlexItem>
|
|
154
|
+
<FlexItem>
|
|
155
|
+
<Label variant="outline" color="blue">
|
|
156
|
+
label
|
|
157
|
+
</Label>
|
|
158
|
+
</FlexItem>
|
|
159
|
+
<FlexItem>
|
|
160
|
+
<Label variant="outline" color="blue">
|
|
161
|
+
label
|
|
162
|
+
</Label>
|
|
163
|
+
</FlexItem>
|
|
164
|
+
</Flex>
|
|
165
|
+
</FlexItem>
|
|
166
|
+
</Flex>
|
|
167
|
+
</DescriptionListDescription>
|
|
168
|
+
</DescriptionListGroup>
|
|
169
|
+
<DescriptionListGroup
|
|
170
|
+
style={{
|
|
171
|
+
'--pf-v6-c-description-list__group--RowGap': 'var(--pf-t--global--spacer--xs)'
|
|
172
|
+
}}
|
|
173
|
+
>
|
|
174
|
+
<DescriptionListTerm>Response</DescriptionListTerm>
|
|
175
|
+
<DescriptionListDescription>
|
|
176
|
+
<ExpandableSection
|
|
177
|
+
variant={ExpandableSectionVariant.truncate}
|
|
178
|
+
toggleTextExpanded="show less of response"
|
|
179
|
+
toggleTextCollapsed="show more of response"
|
|
180
|
+
onToggle={onToggle}
|
|
181
|
+
isExpanded={isExpanded}
|
|
182
|
+
style={{
|
|
183
|
+
'--pf-v6-c-expandable-section__content--Opacity': '1',
|
|
184
|
+
'--pf-v6-c-expandable-section__content--PaddingInlineStart': 0,
|
|
185
|
+
'--pf-v6-c-expandable-section__content--TranslateY': 0,
|
|
186
|
+
'--pf-v6-c-expandable-section--m-expand-top__content--TranslateY': 0
|
|
187
|
+
}}
|
|
188
|
+
>
|
|
189
|
+
Descriptive text about the tool response, including completion status, details on the data that was
|
|
190
|
+
processed, or anything else relevant to the use case.
|
|
191
|
+
</ExpandableSection>
|
|
192
|
+
</DescriptionListDescription>
|
|
193
|
+
</DescriptionListGroup>
|
|
194
|
+
</DescriptionList>
|
|
195
|
+
</>
|
|
196
|
+
)
|
|
197
|
+
}}
|
|
198
|
+
/>
|
|
199
|
+
);
|
|
200
|
+
};
|
|
@@ -349,3 +349,35 @@ An attachment dropzone allows users to upload files via drag and drop.
|
|
|
349
349
|
```js file="./FileDropZone.tsx"
|
|
350
350
|
|
|
351
351
|
```
|
|
352
|
+
|
|
353
|
+
## Examples with Markdown
|
|
354
|
+
|
|
355
|
+
The ChatBot supports Markdown formatting in several message components, allowing you to display rich, formatted content. This is particularly useful when you need to include code snippets, lists, emphasis, or other formatted text. The following examples demonstrate different ways you can use Markdown in a few of the ChatBot components, but this is not an exhaustive list of all Markdown customizations you can make.
|
|
356
|
+
|
|
357
|
+
To enable Markdown rendering, use the appropriate Markdown flag prop (such as `isBodyMarkdown`, `isSubheadingMarkdown`, or `isExpandableContentMarkdown`) depending on the component and content you're formatting.
|
|
358
|
+
|
|
359
|
+
**Important:** When using Markdown in these components, set `shouldRetainStyles: true` to retain the styling of the context the Markdown is used in. This ensures that Markdown content maintains the proper font sizes, colors, and other styling properties of its parent component. For example, Markdown passed into a toggle will retain the ChatBot toggle styling, while Markdown in a card body will maintain the appropriate card body styling. Without this prop, the Markdown may override the contextual styles and create inconsistencies with the rest of the ChatBot interface.
|
|
360
|
+
|
|
361
|
+
### Tool calls with Markdown
|
|
362
|
+
|
|
363
|
+
When displaying tool call information, you can use Markdown in the expandable content to provide formatted details about what the tool is processing. This is useful for showing structured data, code snippets, or formatted lists.
|
|
364
|
+
|
|
365
|
+
```ts file="./MessageWithMarkdownToolCall.tsx"
|
|
366
|
+
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Deep thinking with Markdown
|
|
370
|
+
|
|
371
|
+
Deep thinking content can include Markdown formatting in both the subheading and body to better communicate the LLM's reasoning process. This allows you to emphasize key points, structure thought processes with lists, or include other formatting.
|
|
372
|
+
|
|
373
|
+
```ts file="./MessageWithMarkdownDeepThinking.tsx"
|
|
374
|
+
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
### Tool responses with Markdown
|
|
378
|
+
|
|
379
|
+
Tool response cards support Markdown in multiple areas, including the toggle content, subheading, and body. Use `shouldRetainStyles: true` along with the appropriate Markdown flag props to ensure proper formatting and spacing.
|
|
380
|
+
|
|
381
|
+
```ts file="./MessageWithMarkdownToolResponse.tsx"
|
|
382
|
+
|
|
383
|
+
```
|
|
@@ -52,6 +52,20 @@ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
|
|
|
52
52
|
import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
|
|
53
53
|
import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
|
|
54
54
|
import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
|
|
55
|
+
import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
|
|
56
|
+
import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
|
|
57
|
+
import {
|
|
58
|
+
Button,
|
|
59
|
+
DescriptionList,
|
|
60
|
+
DescriptionListDescription,
|
|
61
|
+
DescriptionListGroup,
|
|
62
|
+
DescriptionListTerm,
|
|
63
|
+
ExpandableSection,
|
|
64
|
+
ExpandableSectionVariant,
|
|
65
|
+
Flex,
|
|
66
|
+
FlexItem,
|
|
67
|
+
Label
|
|
68
|
+
} from '@patternfly/react-core';
|
|
55
69
|
import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
|
|
56
70
|
import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
|
|
57
71
|
import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
|
|
@@ -59,7 +73,7 @@ import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
|
|
|
59
73
|
import userAvatar from '../Messages/user_avatar.svg';
|
|
60
74
|
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
|
|
61
75
|
import { getTrackingProviders } from "@patternfly/chatbot/dist/dynamic/tracking";
|
|
62
|
-
import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent } from 'react';
|
|
76
|
+
import { useEffect,useCallback, useRef, useState, FunctionComponent, MouseEvent, MouseEvent as ReactMouseEvent } from 'react';
|
|
63
77
|
import saveAs from 'file-saver';
|
|
64
78
|
|
|
65
79
|
### Basic ChatBot
|
|
@@ -119,4 +119,52 @@ describe('DeepThinking', () => {
|
|
|
119
119
|
expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
|
|
120
120
|
expect(screen.getByText('Thinking content')).not.toBeVisible();
|
|
121
121
|
});
|
|
122
|
+
|
|
123
|
+
it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
|
|
124
|
+
const toggleContent = '**Bold thinking**';
|
|
125
|
+
const { container } = render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
|
|
126
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
127
|
+
expect(screen.getByText('Bold thinking')).toBeTruthy();
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
|
|
131
|
+
const toggleContent = '**Bold thinking**';
|
|
132
|
+
const { container } = render(<DeepThinking toggleContent={toggleContent} />);
|
|
133
|
+
expect(container.querySelector('strong')).toBeFalsy();
|
|
134
|
+
expect(screen.getByText('**Bold thinking**')).toBeTruthy();
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
|
|
138
|
+
const subheading = '**Bold subheading**';
|
|
139
|
+
const { container } = render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
|
|
140
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
141
|
+
expect(screen.getByText('Bold subheading')).toBeTruthy();
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
|
|
145
|
+
const subheading = '**Bold subheading**';
|
|
146
|
+
render(<DeepThinking {...defaultProps} subheading={subheading} />);
|
|
147
|
+
expect(screen.getByText('**Bold subheading**')).toBeTruthy();
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
it('should render body as markdown when isBodyMarkdown is true', () => {
|
|
151
|
+
const body = '**Bold body**';
|
|
152
|
+
const { container } = render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
|
|
153
|
+
expect(container.querySelector('strong')).toBeTruthy();
|
|
154
|
+
expect(screen.getByText('Bold body')).toBeTruthy();
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
it('should not render body as markdown when isBodyMarkdown is false', () => {
|
|
158
|
+
const body = '**Bold body**';
|
|
159
|
+
render(<DeepThinking {...defaultProps} body={body} />);
|
|
160
|
+
expect(screen.getByText('**Bold body**')).toBeTruthy();
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
it('should pass markdownContentProps to MarkdownContent component', () => {
|
|
164
|
+
const body = '**Bold body**';
|
|
165
|
+
const { container } = render(
|
|
166
|
+
<DeepThinking {...defaultProps} body={body} isBodyMarkdown markdownContentProps={{ isPrimary: true }} />
|
|
167
|
+
);
|
|
168
|
+
expect(container.querySelector('.pf-m-primary')).toBeTruthy();
|
|
169
|
+
});
|
|
122
170
|
});
|