Skip to content

Commit

Permalink
Update packages/module/patternfly-docs/content/extensions/chatbot/exa…
Browse files Browse the repository at this point in the history
…mples/Messages/Messages.md

Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
  • Loading branch information
rebeccaalpert and edonehoo committed Dec 13, 2024
1 parent f7d82ae commit 64633dc
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ You can further customize the avatar by applying an additional class or passing

```

### Messages actions
### Message actions

You can add actions to a message, to allow users to interact with the message content. These actions can include:

Expand All @@ -79,7 +79,18 @@ You can add actions to a message, to allow users to interact with the message co

### Custom message actions

Beyond the standard message actions (positive, negative, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `<Message>` component. This object can contain the following customizations: `ariaLabel`, `clickedAriaLabel`, `onClick`, `className`, `isDisabled`, `tooltipContent`, `tooltipContent`, `tooltipProps`, and `icon`. `clickedAriaLabel` and `clickedTooltipContent` are applied only when a button is clicked. If `clickedAriaLabel` or `clickedTooltipContent` are omitted, they will default to the `ariaLabel` or `tooltipContent` supplied.
Beyond the standard message actions (good response, bad response, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `<Message>` component. This object can contain the following customizations:

- `ariaLabel`
- `onClick`
- `className`
- `isDisabled`
- `tooltipContent`
- `tooltipContent`
- `tooltipProps`
- `icon`

You can apply a `clickedAriaLabel` and `clickedTooltipContent` once a button is clicked. If either of these props are omitted, their values will default to the `ariaLabel` or `tooltipContent` supplied.

```js file="./MessageWithCustomResponseActions.tsx"

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ This demo displays a basic ChatBot, which includes:
4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:

- A `<ChatbotWelcomePrompt>`
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#messages-actions)
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#message-actions)
- Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`

5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
Expand All @@ -92,7 +92,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
3. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
- A `<ChatbotWelcomePrompt>`
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#messages-actions)
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#message-actions)
- Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
- [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
Expand Down

0 comments on commit 64633dc

Please sign in to comment.