@patternfly/chatbot 6.5.0-prerelease.15 → 6.5.0-prerelease.16

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.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/patternfly-docs/content/extensions/chatbot/about-chatbot.md +17 -17
  3. package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +10 -10
  4. package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +1 -1
  5. package/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md +1 -1
  6. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +4 -4
  7. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +9 -9
  8. package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +18 -18
  9. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +17 -17
  10. package/patternfly-docs/patternfly-docs.config.js +1 -1
  11. package/patternfly-docs/patternfly-docs.source.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "6.5.0-prerelease.15",
3
+ "version": "6.5.0-prerelease.16",
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/about-chatbot.md CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- section: PatternFly-AI
2
+ section: Extensions
3
3
  subsection: ChatBot
4
4
  id: Overview
5
5
  sortValue: 1
@@ -15,30 +15,30 @@ _Only use this ChatBot when it adds value to your users' experiences._ Don't use
15
15
  ## ChatBot demos
16
16
 
17
17
  To illustrate the capabilities of the ChatBot, including more complex interaction patterns, we've created these demos:
18
- - [Basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot)
19
- - [Embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot)
20
- - [Comparing ChatBots](/patternfly-ai/chatbot/overview/demo/#comparing-chatbots)
21
- - [Message feedback](/patternfly-ai/chatbot/messages/demo#message-feedback)
22
- - [ChatBot attachments via file upload](/patternfly-ai/chatbot/messages/demo#attach-via-upload-button-in-message-bar)
23
- - [ChatBot attachments via built-in menu](/patternfly-ai/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar)
18
+ - [Basic ChatBot](/extensions/chatbot/overview/demo#basic-chatbot)
19
+ - [Embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot)
20
+ - [Comparing ChatBots](/extensions/chatbot/overview/demo/#comparing-chatbots)
21
+ - [Message feedback](/extensions/chatbot/messages/demo#message-feedback)
22
+ - [ChatBot attachments via file upload](/extensions/chatbot/messages/demo#attach-via-upload-button-in-message-bar)
23
+ - [ChatBot attachments via built-in menu](/extensions/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar)
24
24
 
25
25
  To learn how to write for ChatBot experiences, refer to our [conversation design guidelines](/patternfly-ai/conversation-design/#writing-for-chatbots).
26
26
 
27
- To learn how to design ChatBot experiences, [refer to the design guidelines](/patternfly-ai/chatbot/overview/design-guidelines).
27
+ To learn how to design ChatBot experiences, [refer to the design guidelines](/extensions/chatbot/overview/design-guidelines).
28
28
 
29
29
  Explore our documentation, which covers both ChatBot UI components and message-related components:
30
30
  - UI
31
- - [Structural elements](/patternfly-ai/chatbot/ui#structure)
32
- - [Toggle](/patternfly-ai/chatbot/ui#toggle)
33
- - [Header](/patternfly-ai/chatbot/ui#header)
34
- - [Footer](/patternfly-ai/chatbot/ui#footer)
35
- - [Navigation](/patternfly-ai/chatbot/ui#navigation)
36
- - [Modals](/patternfly-ai/chatbot/ui#modals)
31
+ - [Structural elements](/extensions/chatbot/ui#structure)
32
+ - [Toggle](/extensions/chatbot/ui#toggle)
33
+ - [Header](/extensions/chatbot/ui#header)
34
+ - [Footer](/extensions/chatbot/ui#footer)
35
+ - [Navigation](/extensions/chatbot/ui#navigation)
36
+ - [Modals](/extensions/chatbot/ui#modals)
37
37
  - Messages
38
- - [Bot and user messages](/patternfly-ai/chatbot/messages)
39
- - [File attachments](/patternfly-ai/chatbot/messages#attachments)
38
+ - [Bot and user messages](/extensions/chatbot/messages)
39
+ - [File attachments](/extensions/chatbot/messages#attachments)
40
40
  - Analytics support
41
- - [Overview](/patternfly-ai/chatbot/analytics)
41
+ - [Overview](/extensions/chatbot/analytics)
42
42
 
43
43
 
44
44
  We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.
package/patternfly-docs/content/extensions/chatbot/design-guidelines.md CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- section: PatternFly-AI
2
+ section: Extensions
3
3
  subsection: ChatBot
4
4
  id: Overview
5
5
  sortValue: 1
@@ -22,7 +22,7 @@ import "./images.css"
22
22
  1. **Attachments:** Details about files that a user has uploaded to the ChatBot.
23
23
  1. **Footer:** A persistent region at the bottom of the ChatBot window that contains the message bar and the footnote.
24
24
  1. **Footnote (optional):** A persistent, short message that contains any legal disclaimers or important information about the ChatBot. Footnotes are optional, but strongly recommended. More details can be found in the [footnote guidelines](#footnotes).
25
- 1. **Toggle:** The button that allows users to open and close the ChatBot window. When the ChatBot is opened, the toggle should appear below the ChatBot window. The toggle shape and icon can be customized as needed, as shown in these [ChatBot toggle examples](/patternfly-ai/chatbot/ui#custom-toggle-icon). More details can be found in the [guidelines for accessing a ChatBot](#accessing-a-chatbot).
25
+ 1. **Toggle:** The button that allows users to open and close the ChatBot window. When the ChatBot is opened, the toggle should appear below the ChatBot window. The toggle shape and icon can be customized as needed, as shown in these [ChatBot toggle examples](/extensions/chatbot/ui#custom-toggle-icon). More details can be found in the [guidelines for accessing a ChatBot](#accessing-a-chatbot).
26
26
 
27
27
  ### Messages
28
28
 
@@ -37,7 +37,7 @@ import "./images.css"
37
37
  1. **Timestamp:** The relative or absolute time that a message was sent.
38
38
  1. **Label:** Labels ChatBot messages as "AI."
39
39
  1. **Quick responses:** Programmable, clickable actions that allow users to quickly answer questions from the ChatBot.
40
- 1. **Message actions:** Actions that allow users to interact with a bot message. These typically include providing feedback, copying, sharing, or reading aloud, but [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) are also supported. More details for the feedback actions can be found in the [message feedback](#message-feedback) section.
40
+ 1. **Message actions:** Actions that allow users to interact with a bot message. These typically include providing feedback, copying, sharing, or reading aloud, but [custom message actions](/extensions/chatbot/messages#custom-message-actions) are also supported. More details for the feedback actions can be found in the [message feedback](#message-feedback) section.
41
41
 
42
42
  #### Welcome message
43
43
 
@@ -77,7 +77,7 @@ Selecting the quick start title, or the "Start" link can be configured to launch
77
77
 
78
78
  ### Message actions
79
79
 
80
- To allow users to interact with bot messages, utilize message actions. Refer to [the message actions React example](/patternfly-ai/chatbot/messages#message-actions) for an interactive visual.
80
+ To allow users to interact with bot messages, utilize message actions. Refer to [the message actions React example](/extensions/chatbot/messages#message-actions) for an interactive visual.
81
81
 
82
82
  The following actions can be used for some of the most common interactions:
83
83
 
@@ -91,7 +91,7 @@ The following actions can be used for some of the most common interactions:
91
91
  1. **Download:** Downloads the chat message. [Learn more about downloading chat transcripts](#downloading-chat-transcripts).
92
92
  1. **Listen:** Reads the message content out loud.
93
93
 
94
- 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).
94
+ You can also use [custom message actions](/extensions/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).
95
95
 
96
96
  #### Message feedback
97
97
 
@@ -133,7 +133,7 @@ To message the ChatBot, users can type directly into the message bar in the foot
133
133
  1. **Use microphone button:** Supports speech recognition to allow users to use voice input. This feature is currently only available in Chrome and Safari.
134
134
  1. **Send button:** Allows users to send a typed message. This button should be disabled until a user has input text.
135
135
 
136
- When a user chooses to use speech input via the microphone button, the button will display a pulsing animation to indicate that the ChatBot is listening to the user (as shown in [this speech recognition example](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)).
136
+ When a user chooses to use speech input via the microphone button, the button will display a pulsing animation to indicate that the ChatBot is listening to the user (as shown in [this speech recognition example](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)).
137
137
 
138
138
  <div class="ws-docs-content-img">
139
139
  ![Animation phases of the listening button in the message bar.](./img/listening-pulse.svg)
@@ -266,7 +266,7 @@ As much as possible, the suggested prompts should consider the user’s location
266
266
 
267
267
  Instead of automatically initiating what sounds like a request from a user, the ChatBot should ask users to confirm or deny their intent. This differentiates moments where users are simply asking about feasibility, rather than actually making a request.
268
268
 
269
- This can be done using the [quick response](/patternfly-ai/chatbot/messages#messages-with-quick-responses) buttons:
269
+ This can be done using the [quick response](/extensions/chatbot/messages#messages-with-quick-responses) buttons:
270
270
 
271
271
  <div class="ws-docs-content-img">
272
272
  ![Confirmation options from a bot in response to a user's request.](./img/quick-response-confirmation.svg)
@@ -310,7 +310,7 @@ Within the settings menu, users can select their preferences for a variety of Ch
310
310
 
311
311
  ### Attaching files
312
312
 
313
- Using [the attach button](/patternfly-ai/chatbot/overview/design-guidelines#message-bar) in the message bar, users can [attach files](/patternfly-ai/chatbot/messages#file-attachments) to their message to share with the ChatBot.
313
+ Using [the attach button](/extensions/chatbot/overview/design-guidelines#message-bar) in the message bar, users can [attach files](/extensions/chatbot/messages#file-attachments) to their message to share with the ChatBot.
314
314
 
315
315
  The attach button can follow a couple of patterns, including:
316
316
 
@@ -333,7 +333,7 @@ If a message attachment is successful, a label with the file details will be dis
333
333
  ![File attached to user message.](./img/attached-file.svg)
334
334
  </div>
335
335
 
336
- Users can select the file label to either preview or edit their attachment, as shown in these [attachment examples](/patternfly-ai/chatbot/messages#attachment-preview).
336
+ Users can select the file label to either preview or edit their attachment, as shown in these [attachment examples](/extensions/chatbot/messages#attachment-preview).
337
337
 
338
338
  If a message attachment fails, an error message should share the reason for failure:
339
339
 
@@ -415,7 +415,7 @@ There are a few display modes that users can choose when interacting with a Chat
415
415
 
416
416
  ### Layouts
417
417
 
418
- ChatBot supports a side-by-side [comparison layout](/patternfly-ai/chatbot/overview/demo#comparing-chatbots), which allows users to compare 2 chats at once. This can be helpful to let users understand how different models respond to the same prompt.
418
+ ChatBot supports a side-by-side [comparison layout](/extensions/chatbot/overview/demo#comparing-chatbots), which allows users to compare 2 chats at once. This can be helpful to let users understand how different models respond to the same prompt.
419
419
 
420
420
  <div class="ws-docs-content-img">
421
421
  ![2 ChatBots in comparison mode.](./img/comparison.svg)
package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  # Sidenav top-level section
3
3
  # should be the same for all markdown files
4
- section: PatternFly-AI
4
+ section: Extensions
5
5
  subsection: ChatBot
6
6
  # Sidenav secondary level section
7
7
  # should be the same for all markdown files
package/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  # Sidenav top-level section
3
3
  # should be the same for all markdown files
4
- section: PatternFly-AI
4
+ section: Extensions
5
5
  subsection: ChatBot
6
6
  # Sidenav secondary level section
7
7
  # should be the same for all markdown files
package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  # Sidenav top-level section
3
3
  # should be the same for all markdown files
4
- section: PatternFly-AI
4
+ section: Extensions
5
5
  subsection: ChatBot
6
6
  # Sidenav secondary level section
7
7
  # should be the same for all markdown files
@@ -144,9 +144,9 @@ You can apply a `clickedAriaLabel` and `clickedTooltipContent` once a button is
144
144
 
145
145
  ### Message feedback
146
146
 
147
- When a user selects a positive or negative [message action](#message-actions), you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be [configured to time out automatically](/patternfly-ai/chatbot/messages#message-feedback-with-timeouts).
147
+ When a user selects a positive or negative [message action](#message-actions), you can display a message feedback card that acknowledges their response and provides space for additional written feedback. These cards can be manually dismissed via the close button and the thank-you card can be [configured to time out automatically](/extensions/chatbot/messages#message-feedback-with-timeouts).
148
148
 
149
- You can see the full feedback flow [in the message demos](/patternfly-ai/chatbot/messages/demo#message-feedback).
149
+ You can see the full feedback flow [in the message demos](/extensions/chatbot/messages/demo#message-feedback).
150
150
 
151
151
  The message feedback cards will immediately receive focus by default, but you can remove this behavior by passing `focusOnLoad: false` to the `<Message>` (as shown in the following examples). For better usability, you should generally keep the default focus behavior.
152
152
 
@@ -257,7 +257,7 @@ You can add custom content to specific parts of a `<Message>` via the `extraCont
257
257
 
258
258
  ### Messages with attachments
259
259
 
260
- When [attachments](/patternfly-ai/chatbot/messages#file-attachments) are shared and displayed in the ChatBot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.
260
+ When [attachments](/extensions/chatbot/messages#file-attachments) are shared and displayed in the ChatBot window, users will see a selectable and dismissible message that contains file details in a label. Selecting the file label can open a preview modal, which allows users to view or make edits to the file contents.
261
261
 
262
262
  The `<PreviewAttachment>` component displays a modal with a read-only view of the attached file's contents. Selecting the "edit" button will open the `<AttachmentEdit>` component, which provides an interactive environment where users can make changes to the file.
263
263
 
package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  # Sidenav top-level section
3
3
  # should be the same for all markdown files
4
- section: PatternFly-AI
4
+ section: Extensions
5
5
  subsection: ChatBot
6
6
  # Sidenav secondary level section
7
7
  # should be the same for all markdown files
@@ -93,7 +93,7 @@ import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';
93
93
 
94
94
  ### Container
95
95
 
96
- The PatternFly ChatBot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via [the ChatBot toggle.](/patternfly-ai/chatbot/ui#toggle)
96
+ The PatternFly ChatBot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via [the ChatBot toggle.](/extensions/chatbot/ui#toggle)
97
97
 
98
98
  The `<Chatbot>` component is the container that encompasses the ChatBot experience. It adapts to various display modes (overlay/default, docked, fullscreen, and embedded) and supports both light and dark themes.
99
99
 
@@ -105,7 +105,7 @@ The "embedded" display mode is meant to be used within a [PatternFly page](/comp
105
105
 
106
106
  ### Content and message box
107
107
 
108
- The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) and [`<ChatbotFooter>`.](/patternfly-ai/chatbot/ui#footer)
108
+ The `<ChatbotContent>` component is the container that is placed within the `<Chatbot>`, between the [`<ChatbotHeader>`](/extensions/chatbot/ui#header) and [`<ChatbotFooter>`.](/extensions/chatbot/ui#footer)
109
109
 
110
110
  `<ChatbotContent>` usually contains a `<ChatbotMessageBox>` for displaying messages.
111
111
 
@@ -123,7 +123,7 @@ Your code structure should look like this:
123
123
  </Chatbot>
124
124
  ```
125
125
 
126
- **Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `<MessageBox>` whenever you display a new message in `<MessageBox>`. You can view this in action in our [basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot) demos.
126
+ **Note**: When messages update, it is important to announce new messages to users of assistive technology. To do this, make sure to set the `announcement` prop on `<MessageBox>` whenever you display a new message in `<MessageBox>`. You can view this in action in our [basic ChatBot](/extensions/chatbot/overview/demo#basic-chatbot) and [embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot) demos.
127
127
 
128
128
  ### Welcome message
129
129
 
@@ -147,7 +147,7 @@ To provide users with a more specific direction, you can also include optional w
147
147
 
148
148
  To provide page context, we recommend using a "Skip to chatbot" button. This allows you to skip past other content on the page, directly to the ChatBot content, using a [PatternFly skip to content component](/components/skip-to-content). To display this button, you must tab into the main window.
149
149
 
150
- When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot).
150
+ When using default or docked modes, we recommend putting focus on the toggle if the ChatBot is closed, and the ChatBot when it is open. For fullscreen and embedded, we recommend putting the focus on the first focusable item in the ChatBot, such as a menu toggle. This can be seen in our more fully-featured demos for the [default, embedded, and fullscreen ChatBot](/extensions/chatbot/overview/demo#basic-chatbot) and the [embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot).
151
151
 
152
152
  ```js file="./SkipToContent.tsx" isFullscreen
153
153
 
@@ -226,7 +226,7 @@ There are a variety of options and customizations you can make to the header, to
226
226
  In this example, select the respective checkbox to toggle these features:
227
227
 
228
228
  - **Menu:** Users can select the menu toggle to open a menu of additional options or actions.
229
- - **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [conversation history drawer](/patternfly-ai/chatbot/ui/#drawer-with-search-and-new-chat-button).
229
+ - **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [conversation history drawer](/extensions/chatbot/ui/#drawer-with-search-and-new-chat-button).
230
230
  - **Left-aligned logo**
231
231
  - **Centered logo**
232
232
  - **Selector dropdown:** Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models.
@@ -283,7 +283,7 @@ To disable the send button in the following example, select the "Disable send bu
283
283
 
284
284
  You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system. This menu can display different actions related to attachments.
285
285
 
286
- Attachments can also be added to the ChatBot via [drag and drop.](/patternfly-ai/chatbot/messages#attachment-dropzone)
286
+ Attachments can also be added to the ChatBot via [drag and drop.](/extensions/chatbot/messages#attachment-dropzone)
287
287
 
288
288
  ```js file="./ChatbotMessageBarAttach.tsx"
289
289
 
@@ -352,7 +352,7 @@ The code structure will look like this:
352
352
  </Chatbot>
353
353
  ```
354
354
 
355
- The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (As shown in the [main ChatBot demo](/patternfly-ai/chatbot/overview/demo#basic-chatbot).):
355
+ The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (As shown in the [main ChatBot demo](/extensions/chatbot/overview/demo#basic-chatbot).):
356
356
 
357
357
  - `Default` and `docked` display modes display the conversation history on top of the rest of the ChatBot content, with a PatternFly backdrop between the drawer panel and drawer content.
358
358
  - `Fullscreen` and `embedded` display modes display the conversation history in line with the drawer content.
@@ -428,7 +428,7 @@ The drawer can also be used to display a list of basic menu items.
428
428
 
429
429
  Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and is meant to display terms and conditions for using a ChatBot in your project. The image in the header can be toggled on or off depending on whether the `image` and `altText` props are provided.
430
430
 
431
- This example also includes an example of how to use [skip to content](/patternfly-ai/chatbot/ui#skip-to-content). When the terms of use modal is open, focus is placed on the terms of use container. When it is closed, focus is placed on the ChatBot. In a real example with a functioning ChatBot toggle, you would also want to place focus on the toggle when appropriate.
431
+ This example also includes an example of how to use [skip to content](/extensions/chatbot/ui#skip-to-content). When the terms of use modal is open, focus is placed on the terms of use container. When it is closed, focus is placed on the ChatBot. In a real example with a functioning ChatBot toggle, you would also want to place focus on the toggle when appropriate.
432
432
 
433
433
  ```js file="./TermsOfUse.tsx" isFullscreen
434
434
 
package/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  # Sidenav top-level section
3
3
  # should be the same for all markdown files
4
- section: PatternFly-AI
4
+ section: Extensions
5
5
  subsection: ChatBot
6
6
  # Sidenav secondary level section
7
7
  # should be the same for all markdown files
@@ -68,7 +68,7 @@ It is also important to announce when new content appears onscreen for accessibi
68
68
 
69
69
  This demo shows auto-scrolling functionality, which automatically scrolls to the bottom of the active chat.
70
70
 
71
- To enable auto-scroll behavior pass the `enableSmartScroll` prop to the [`<MessageBox>`](/patternfly-ai/chatbot/ui#message-box) component.
71
+ To enable auto-scroll behavior pass the `enableSmartScroll` prop to the [`<MessageBox>`](/extensions/chatbot/ui#message-box) component.
72
72
 
73
73
  When enabled:
74
74
 
@@ -88,11 +88,11 @@ When using `ref`, the `<MessageBox>` component exposes the following methods:
88
88
 
89
89
  This demo includes broader ChatBot features, including:
90
90
 
91
- 1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
92
- 2. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
91
+ 1. A [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>`](/extensions/chatbot/ui#container) container.
92
+ 2. A `<ChatbotContent>` and [`<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) with:
93
93
  - A `<ChatbotWelcomePrompt>`
94
94
  - An initial user message and initial bot message
95
- 3. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
95
+ 3. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
96
96
 
97
97
  ```js file="./ChatbotScrolling.tsx" isFullscreen
98
98
 
@@ -102,24 +102,24 @@ This demo includes broader ChatBot features, including:
102
102
 
103
103
  This demo displays unique attachment features, including:
104
104
 
105
- 1. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) components that contain:
106
- - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) with an attachment.
107
- - The ability to preview or edit the attachment using the [`<PreviewAttachment>` and `<AttachmentEdit>` components.](/patternfly-ai/chatbot/messages##file-attachments)
105
+ 1. [`<ChatbotContent>` and `<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) components that contain:
106
+ - An initial [user `<Message>`](/extensions/chatbot/messages#user-messages) with an attachment.
107
+ - The ability to preview or edit the attachment using the [`<PreviewAttachment>` and `<AttachmentEdit>` components.](/extensions/chatbot/messages##file-attachments)
108
108
  - A [PatternFly `<Alert>`](/components/alert), customized to be sticky within the ChatBot window, which provides success or error messages for attachments.
109
109
  2. `<ChatbotContent>` and `<ChatbotFooter>`, wrapped in a `<FileDropZone>` component to support drag and drop attachments. The footer also:
110
- - Displays attached files, using a [`<FileDetailsLabel>`](/patternfly-ai/chatbot/messages#attachment-label) component.
110
+ - Displays attached files, using a [`<FileDetailsLabel>`](/extensions/chatbot/messages#attachment-label) component.
111
111
  - Demonstrates custom handling of file uploads, using the `handleAttach` in `<MessageBar>` and `handleFileDrop` in `<FileDropZone>`.
112
112
 
113
113
  This demo includes broader ChatBot features, including:
114
114
 
115
- 1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
116
- 2. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) that updates based on the display mode, with sub-components (including a `<ChatbotHeaderTitle>`).
115
+ 1. A [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>`](/extensions/chatbot/ui#container) container.
116
+ 2. A [`<ChatbotHeader>`](/extensions/chatbot/ui#header) that updates based on the display mode, with sub-components (including a `<ChatbotHeaderTitle>`).
117
117
  3. The ability to swap display modes via the `<ChatbotHeaderOptionsDropdown>`
118
- 4. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/uir#content-and-message-box) with:
118
+ 4. A `<ChatbotContent>` and [`<MessageBox>`](/extensions/chatbot/uir#content-and-message-box) with:
119
119
  - A `<ChatbotWelcomePrompt>`
120
120
  - The ability to preview or edit the attachment.
121
121
  - An initial bot message
122
- 5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
122
+ 5. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
123
123
 
124
124
  ```js file="./ChatbotAttachment.tsx" isFullscreen
125
125
 
@@ -129,21 +129,21 @@ This demo includes broader ChatBot features, including:
129
129
 
130
130
  This demo displays unique attachment features, including:
131
131
 
132
- 1. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) components that contain:
132
+ 1. [`<ChatbotContent>` and `<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) components that contain:
133
133
  - A PatternFly [`<Alert>`](/components/alert) to provide success or error messages for attachments.
134
134
  2. `<ChatbotContent>` and `<ChatbotFooter>`, wrapped in a `<FileDropZone>` component to support drag and drop attachments. The footer also:
135
135
 
136
- - Displays attached files, using a [`<FileDetailsLabel>`](/patternfly-ai/chatbot/ui#attachment-label) component.
136
+ - Displays attached files, using a [`<FileDetailsLabel>`](/extensions/chatbot/ui#attachment-label) component.
137
137
  - Demonstrates custom handling of file uploads, using the `handleAttach` in `<MessageBar>` and `handleFileDrop` in `<FileDropZone>`.
138
138
  - Demonstrates how to define the `attachMenuProps` in the `<MessageBar>` to create a menu that allows users to select the source of an item they're attaching.
139
139
 
140
140
  This demo includes broader ChatBot features, including:
141
141
 
142
- 1. A [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
143
- 2. A `<ChatbotContent>` and [`<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
142
+ 1. A [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>`](/extensions/chatbot/ui#container) container.
143
+ 2. A `<ChatbotContent>` and [`<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) with:
144
144
  - A `<ChatbotWelcomePrompt>`
145
145
  - An initial user message and initial bot message
146
- 3. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
146
+ 3. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootnote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>`
147
147
 
148
148
  ```js file="./ChatbotAttachmentMenu.tsx" isFullscreen
149
149
 
package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  # Sidenav top-level section
3
3
  # should be the same for all markdown files
4
- section: PatternFly-AI
4
+ section: Extensions
5
5
  subsection: ChatBot
6
6
  # Sidenav secondary level section
7
7
  # should be the same for all markdown files
@@ -66,24 +66,24 @@ import saveAs from 'file-saver';
66
66
 
67
67
  This demo displays a basic ChatBot, which includes:
68
68
 
69
- 1. The [`<ChatbotToggle>`](/patternfly-ai/chatbot/ui#toggle) that controls the [`<Chatbot>` container.](/patternfly-ai/chatbot/ui#container)
70
- 2. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>` that changes its presentation depending on the display mode.
69
+ 1. The [`<ChatbotToggle>`](/extensions/chatbot/ui#toggle) that controls the [`<Chatbot>` container.](/extensions/chatbot/ui#container)
70
+ 2. A [`<ChatbotHeader>`](/extensions/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>` that changes its presentation depending on the display mode.
71
71
  3. The ability to swap display modes via `<ChatbotHeaderOptionsDropdown>`
72
- 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
72
+ 4. [`<ChatbotContent>` and `<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) with:
73
73
 
74
74
  - A `<ChatbotWelcomePrompt>`
75
- - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#message-actions)
75
+ - An initial [user `<Message>`](/extensions/chatbot/messages#user-messages) and an initial bot message with [message actions.](/extensions/chatbot/messages#message-actions)
76
76
  - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
77
77
 
78
- 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:
78
+ 5. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
79
79
 
80
- - [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
80
+ - [Speech to text.](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
81
81
  - Sending a message to the ChatBot.
82
82
  - Receiving a response from a backend AI tool with a loading message state.
83
83
 
84
- 6. A [`<ChatbotConversationHistoryNav>`](/patternfly-ai/chatbot/ui#navigation) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
84
+ 6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
85
85
 
86
- 7. A "Skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/patternfly-ai/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
86
+ 7. A "Skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/extensions/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
87
87
 
88
88
  ```js file="./Chatbot.tsx" isFullscreen
89
89
 
@@ -102,17 +102,17 @@ This demo displays a basic compact ChatBot
102
102
  This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed within a page in your product. This demo includes:
103
103
 
104
104
  1. A [PatternFly page](/components/page) with a sidebar, "Skip to chatbot" button, and masthead. To display the "Skip to chatbot" button you must tab into the main window.
105
- 2. A [`<Chatbot>`](/patternfly-ai/chatbot/ui#container) container.
106
- 3. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
107
- 4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
105
+ 2. A [`<Chatbot>`](/extensions/chatbot/ui#container) container.
106
+ 3. A [`<ChatbotHeader>`](/extensions/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
107
+ 4. [`<ChatbotContent>` and `<MessageBox>`](/extensions/chatbot/ui#content-and-message-box) with:
108
108
  - A `<ChatbotWelcomePrompt>`
109
- - An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#message-actions)
109
+ - An initial [user `<Message>`](/extensions/chatbot/messages#user-messages) and an initial bot message with [message actions.](/extensions/chatbot/messages/#message-actions)
110
110
  - Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
111
- 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:
112
- - [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
111
+ 5. A [`<ChatbotFooter>`](/extensions/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/extensions/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
112
+ - [Speech to text.](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
113
113
  - Sending a message to the ChatBot.
114
114
  - Receiving a response from a backend AI tool with a loading message state.
115
- 6. A [`<ChatbotConversationHistoryNav>`](/patternfly-ai/chatbot/ui#navigation) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
115
+ 6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
116
116
 
117
117
  ```js file="./EmbeddedChatbot.tsx" isFullscreen
118
118
 
@@ -143,7 +143,7 @@ This demo displays an embedded ChatBot with a [primary background color](/design
143
143
 
144
144
  This demo showcases how the ChatBot can be rendered in different display modes to suit various application layouts. It demonstrates how to dynamically change the page structure in response to the user's selection. This demo includes:
145
145
 
146
- 1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
146
+ 1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/extensions/chatbot/ui#header-options) in the header.
147
147
  2. A conditional page layout that renders the ChatBot for each display mode option:
148
148
  - **Overlay:** As a floating window on top of the page content.
149
149
  - **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
package/patternfly-docs/patternfly-docs.config.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // This module is shared between NodeJS and babelled ES5
2
2
  module.exports = {
3
- sideNavItems: [{ section: 'PatternFly-AI' }],
3
+ sideNavItems: [{ section: 'Extensions' }],
4
4
  topNavItems: [],
5
5
  hasThemeSwitcher: true,
6
6
  hasRTLSwitcher: true,
package/patternfly-docs/patternfly-docs.source.js CHANGED
@@ -8,7 +8,7 @@ module.exports = (sourceMD, sourceProps) => {
8
8
 
9
9
  // Parse md files
10
10
  const contentBase = path.join(__dirname, './content');
11
- sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'PatternFly-AI');
11
+ sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'Extensions');
12
12
 
13
13
  /**
14
14
  If you want to parse content from node_modules instead of providing a relative/absolute path,