You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[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:
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.
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -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
<divclass="ws-docs-content-img">
139
139
@@ -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
<divclass="ws-docs-content-img">
272
272
@@ -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
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
<divclass="ws-docs-content-img">
421
421
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -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.
0 commit comments