Update packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md

Co-authored-by: Erin Donehoo <[email protected]>

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md

@@ -5,23 +5,24 @@ section: PatternFly-AI
 subsection: ChatBot
 # Sidenav secondary level section
 # should be the same for all markdown files
-id: Customizing Messages
-source: Customizing Messages
+id: Customizing messages
+source: Customizing messages
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
 sortValue: 60
 ---
 
-# Modifying static content
+## Modifying static content
 
-The ChatBot extension `<Message>` component transforms Markdown to PatternFly React components. We use [react-markdown](https://github.com/remarkjs/react-markdown) to handle this mapping. This library supports both [rehype](https://unifiedjs.com/explore/package/rehype/) and [remark](https://unifiedjs.com/explore/package/remark/) plugins for further customization of the output.
+The ChatBot extension `<Message>` component transforms Markdown to PatternFly React components via [react-markdown](https://github.com/remarkjs/react-markdown), which supports both [rehype](https://unifiedjs.com/explore/package/rehype/) and [remark](https://unifiedjs.com/explore/package/remark/) plugins for further output customization.
 
-Remark handles parsing Markdown as input and serializing Markdown as output, while rehype does the same for HTML. This allows you to target and make transformations at specific checkpoints in the transformation process: while the text tree is still in Markdown, or while the text tree is in HTML format. For more detailed information on the architecture of this library, see the [react-markdown documentation](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#architecture).
+remark parses Markdown as input and serializes Markdown as output, while rehype does the same for HTML. This allows you to target and make transformations at specific checkpoints in the transformation process: either while the text tree is still in Markdown, or while the text tree is in HTML format. For more detailed information on the architecture of this library, see the [react-markdown documentation](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#architecture).
 
-You may need these plugins if, for example, you wanted to change the `href` on a link depending on the link text. The `<Message>` prop `rehypePlugins` will take any custom rehype plugins for the Message component. We use these plugins already within the extension for [rendering images a certain way](https://www.npmjs.com/package/rehype-unwrap-images) and [handling external links](https://www.npmjs.com/package/rehype-external-links). There are many open-source libraries available for other common use cases as well.
+You may need these plugins if, for example, you wanted to change the `href` on a link based on the link text. The `<Message>` prop `rehypePlugins` will accept any custom rehype plugins. We use already use these plugins in ChatBot to [render images a certain way](https://www.npmjs.com/package/rehype-unwrap-images) and [handle external links](https://www.npmjs.com/package/rehype-external-links).
 
-If you can't find one for your use case, [Unified](https://unifiedjs.com/) has [a helpful guide](https://unifiedjs.com/learn/guide/create-a-rehype-plugin/) on how to create custom plugins. For a more direct example, if we wanted to change the `href` on links that included the text string `react`, we could write a very basic plugin like this:
+There are many open source libraries available for other common customization needs. If you can't find one for your use case, [Unified](https://unifiedjs.com/) has a helpful [guide on creating custom plugins](https://unifiedjs.com/learn/guide/create-a-rehype-plugin/).
+For a more direct example, if we wanted to change the `href` on links that included the text string `react`, we could write a very basic plugin like this:
 
 ```
 import { visit } from 'unist-util-visit';
@@ -40,8 +41,11 @@ export const rehypeLinkHrefUpdater = (options) => (tree) => {
 
 You could then pass `[rehypeLinkHrefUpdater]` to the `additionalRehypePlugins` prop on `<Message>` to have this applied to all relevant links read by that `<Message>` component.
 
-# Modifying dynamic content
+## Modifying dynamic content
 
-Continuing with our link modification example, let's say you also wanted to add custom onClick events. In this case, you would not use `remark` or `rehype`. These libraries are for static tree manipulation - JavaScript is done through the extension itself.
+Props can also be used to modify dynamic content in messages.
 
-We offer many props on `<Message>` to allow for passing in custom behavior. As an example, you can use `linkProps` to pass onClick events and other PatternFly `<Button>` props down to links. A very basic example would be `linkProps={{onClick: (event) => console.log(event}}`. This would apply to every link in the Message, but you should be able to grab the event.target and add your own custom onClick logic based on the innerText, innerHTML, or other attributes of the event.target.
+Continuing with our link modification example, let's say you also wanted to add custom `onClick` events. In this case, you would not use `remark` or `rehype`, since they're for static tree manipulation.
+
+Instead, you can utilize ChatBot features to customize dynamic content. We offer many `<Message>` props that allow you to implement custom behavior.
+For example, you can use `linkProps` to pass `onClick` events and other PatternFly `<Button>` props down to links. A very basic example would be `linkProps={{onClick: (event) => console.log(event}}`, which would apply to every link in the `<Message>`. Or, you could use the `event.target`, adding your own custom `onClick` logic based on the `innerText`, `innerHTML`, or other attributes of the `event.target`.