diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md b/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md index f80adee5f..b47369600 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md @@ -88,6 +88,7 @@ The following actions can be used for some of the most common interactions: 1. **Feedback (good response):** Applies a positive rating to the message. 1. **Feedback (bad response):** Applies a negative rating to the message. 1. **Copy:** Copies the message content to the clipboard. +1. **Download:** Downloads the chat message. [Learn more about downloading chat transcripts](#downloading-chat-transcripts). 1. **Listen:** Reads the message content out loud. You can also use [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) as needed for your particular use case. When using custom actions, be sure to add a tooltip that describes the effect that the action will have. For more information, view [our tooltips guidelines](/ux-writing/tooltips). @@ -340,6 +341,38 @@ If a message attachment fails, an error message should share the reason for fail ![Error alert for failed attachment.](./img/attachment-error.svg) +### Downloading chat transcripts + +You can enable users to download chat transcripts, for their personal records or to share with others. When users choose to download a transcript, you can choose how you want to configure the behavior in your ChatBot. + +For guidance, refer to our download transcripts demo, which opens a Markdown file for a conversation within a new tab. + +Choose the download action location that best works for your ChatBot: + +#### Download via conversation history drawer + +If your ChatBot uses a conversation history drawer, you can provide a download option in the [actions menu linked to a previous conversation](/patternfly-ai/chatbot/ui#drawer-with-conversation-actions). + +
+![Expanded menu for previous chat in the history window, which shows a download option.](./img/download-chat-history.svg) +
+ +#### Download message response action + +To allow users to download individual bot messages, the message actions can include a download option. + +
+![Download action for a message from a bot.](./img/download-message-action.svg) +
+ +#### Download control in header + +If you don't use a conversation history drawer, you can place an option to download the transcript for the active chat within the header options menu. + +
+![Download transcript action within the ChatBot header options menu.](./img/download-header.svg) +
+ ## Variations ### Display modes @@ -400,4 +433,4 @@ For guidance on writing ChatBot content, refer to our [conversation design guide ## Accessibility -Although accessibility has been integrated into the design of our ChatBot components, it is important to ensure that your implementation is inclusive of all users. For more guidance, refer to [our accessibility guidelines](/accessibility/about-accessibility). +Although accessibility has been integrated into the design of our ChatBot components, it is important to ensure that your implementation is inclusive of all users. For more guidance, refer to [our accessibility guidelines](/accessibility/about-accessibility). \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg index aee6b1a78..991930d32 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/chatbot-elements.svg @@ -3,69 +3,71 @@ - - - - - - - + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - - + + + + + - - - - - - + + + + + + - + - - - - - - - - + + + + + + + + - - + + - + @@ -79,7 +81,7 @@ - + @@ -95,8 +97,8 @@ - - + + @@ -110,11 +112,11 @@ - + - + @@ -122,13 +124,13 @@ - + - + - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg index 1140f48a5..e20c3f99e 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/conversation-history.svg @@ -1,100 +1,44 @@ - + - - + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + @@ -103,29 +47,11 @@ - - - - - - - - - + - - - - - - - - - - + - diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/download-chat-history.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/download-chat-history.svg new file mode 100644 index 000000000..efa9125b4 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/download-chat-history.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/download-header.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/download-header.svg new file mode 100644 index 000000000..40bfb03b5 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/download-header.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/download-message-action.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/download-message-action.svg new file mode 100644 index 000000000..0ec1683fe --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/download-message-action.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/error-state.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/error-state.svg index 81eee1b13..71f62fa4a 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/error-state.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/error-state.svg @@ -3,20 +3,27 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/feedback-form.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/feedback-form.svg index 358f8ddcf..6d810942c 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/feedback-form.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/feedback-form.svg @@ -4,55 +4,54 @@ - - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - + + + - - + + - - - - - - + + + + + + - - - + + + @@ -67,7 +66,7 @@ - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/footnote.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/footnote.svg index 20bc777fd..57cc16ce6 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/footnote.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/footnote.svg @@ -1,39 +1,46 @@ - + - + - - + - - - - - - - - + + + + + + + + + + + - - - - - - - + + + + + + + + + + + + - - - - - + + + + + - + @@ -42,7 +49,7 @@ - + @@ -55,7 +62,7 @@ - + @@ -65,11 +72,11 @@ - + - + - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/loading-state.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/loading-state.svg index b75a715a7..28da40520 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/loading-state.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/loading-state.svg @@ -2,27 +2,32 @@ - - + + + - - + + + + + + + + - - - + + + - - - - + + - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/message-responses.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/message-responses.svg index d4a09de21..ff64beaa4 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/message-responses.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/message-responses.svg @@ -4,17 +4,18 @@ - - - - - - - - - - - + + + + + + + + + + + + @@ -26,6 +27,9 @@ + + + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-emptystate.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-emptystate.svg index 33b2f4bfc..dd4540578 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-emptystate.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-emptystate.svg @@ -1,24 +1,27 @@ - + - + - - - - - - - - - - - + + + + + + + + + + + + + + - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/no-results-emptystate.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/no-results-emptystate.svg index 5b802834c..0a6129765 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/no-results-emptystate.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/no-results-emptystate.svg @@ -1,24 +1,27 @@ - + - + - - - - - - - - - - - + + + + + + + + + + + + + + - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg index 92a58fcfc..d8c6557dd 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/settings-menu.svg @@ -4,73 +4,76 @@ - - - - - - - + + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - - + + + + + - - - - + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + @@ -88,7 +91,7 @@ - + @@ -97,11 +100,11 @@ - + - + @@ -112,11 +115,11 @@ - + - + - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/thank-you-card.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/thank-you-card.svg index e1d92051a..dea89bc31 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/thank-you-card.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/thank-you-card.svg @@ -1,51 +1,51 @@ - + - + - - - - - - - - - - - - - + + + + + + + + + + + + + - - + + - - + + - + - - - - + + + + - + - + - - + + - - + + - + @@ -57,7 +57,7 @@ - + @@ -68,13 +68,13 @@ - + - + - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/welcome-elements.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/welcome-elements.svg index 62047a96c..a7adbb164 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/welcome-elements.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/welcome-elements.svg @@ -4,55 +4,57 @@ - - - - - - - + + - - - - - - - - - - - + + + + + + + + - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + + + + + + + + + - - - - + + + + - - - + + + - + @@ -64,11 +66,11 @@ - + - +