docs: Adds design guidelines #330
Conversation
edonehoo
requested review from
rebeccaalpert,
nicolethoen,
andrew-ronaldson and
kaylachumley
| 1. **Footer:** A persistent region at the bottom of the ChatBot window that contains the message bar and the footnote. | ||
| 1. **Footnote (optional):** A persistent, short message that contains any legal disclaimers or important information about the ChatBot. Footnotes are optional, but strongly recommended. For more information, refer to the [ChatBot footnote guidelines](#footnotes). | ||
| 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. | ||
|
|
There was a problem hiding this comment.
Proposing to add a 9th element to this list!
Options Menu or Action Menu A menu that contains a series of navigational options, including settings, terms of use, feedback, help, and display modes.
|
|
||
| 1. **Container:** The window that contains the entire ChatBot experience and all of its components. | ||
| 1. **Header:** A persistent region at the top of the ChatBot window that contains navigation, branding, and actions. | ||
| 1. **Navigation:** A menu that contains navigational options, including access to the conversation history. |
There was a problem hiding this comment.
Im wondering if we can be more specific here and name this secondary navigation and then the options menu could be called primary navigation? or we can keep it as options menu? Not sure so I'll refer to you erin!
There was a problem hiding this comment.
I'm def open to opinions on this! My thought is that the terminology of "options menu" makes the most sense for that menu, and the idea "navigation" is going to be familiar with that hamburger icon. But if "navigation" itself sounds too derivative, we could def switch this back to "Conversation history" or even "Conversation navigation" to be more descriptive?
| 1. **Attachments:** Details about files that a user has uploaded to the ChatBot. | ||
| 1. **Footer:** A persistent region at the bottom of the ChatBot window that contains the message bar and the footnote. | ||
| 1. **Footnote (optional):** A persistent, short message that contains any legal disclaimers or important information about the ChatBot. Footnotes are optional, but strongly recommended. For more information, refer to the [ChatBot footnote guidelines](#footnotes). | ||
| 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. |
There was a problem hiding this comment.
wondering if we can call this Launch Toggle instead of Toggle just to be more specific. Since toggle could potentially confuse users with the menu toggle verbiage? who knows 🤷♀️
There was a problem hiding this comment.
Hmm that's a fair point. My only thought with "launch toggle" is that the toggle also handles minimizing, rather than just launching (ik this is nitpicky). We could call it the "ChatBot toggle" to make it more standalone? I think the slight repetitiveness of "ChatBot" isn't distracting in this situation?
|  | ||
| </div> | ||
|
|
||
| 1. **Bot message:** Messages from the ChatBot, which are marked with an "AI" label to communicate the use of AI to users. You should choose a descriptive name for your ChatBot. |
There was a problem hiding this comment.
I'm not sure if the user can change their profile picture and name? it may be built into your login info? we dont have any designs built out for editing a profile
There was a problem hiding this comment.
We provide support for swapping out the name and avatar for both bot and user messages, but how that happens is up to the product right now. We do force the AI label if it's a bot message.
| </div> | ||
|
|
||
| 1. **Attach button:** Allows users to upload files from their computer. | ||
| 1. **Use microphone button:** Supports speech recognition to allow users to use voice input. |
There was a problem hiding this comment.
may be worth noting that the microphone (speech recognition) does not work in all browsers. The button will only appear if 'SpeechRecognition' or 'webkitSpeechRecognition' are available in window. It is currently compatible in chrome and safari. This does not currently work in Firefox.
| 1. **Attach button:** Allows users to upload files from their computer. | ||
| 1. **Use microphone button:** Supports speech recognition to allow users to use voice input. | ||
| 1. **Send button:** Allows users to send a typed message. This button should be disabled until a user has input text. | ||
|
|
There was a problem hiding this comment.
I think we should add a 4th element here to show the attach menu. The attach menu component appears when the user clicks on the attachment button. The menu provides the user with various methods to upload content to the chatbot. You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system.
There was a problem hiding this comment.
The user has to provide whatever goes in that dropdown just fyi - we just provide the dropdown (drop-up in this case) and search bar.
|
|
||
| ## Variations | ||
|
|
||
| There are a few display modes that users can choose when interacting with a ChatBot. |
There was a problem hiding this comment.
So, I am currently playing around with different ways to present display modes and the LM switcher. The language model switcher is currently meant to be shown in the menu toggle in the header but its quite obstructive and I'm thinking we want to avoid drawing attention to that. Planning to discuss more during our sync. Anyways, I imagine that these images will need updated when we make a decision. Here is an example of what I am talking about!
|
|
||
| By clicking into the navigation menu, users can search through previous conversations and perform additional actions, such as sharing a conversation with others. | ||
|
|
||
| ## Variations |
There was a problem hiding this comment.
what if we named this Display variations?
| </div> | ||
|
|
||
| - **Embedded:** The ChatBot is embedded within a product as its own page. | ||
|
|
There was a problem hiding this comment.
We may want to add a small section dedicated to the option to change language models - currently located in the header in a menu toggle. I'm wondering if this is something that can be turned on and off? meaning that a product could limit the user to one type of language model at all times if they wanted... question for rebecca and nicole for sure!
There was a problem hiding this comment.
They can decide not to show this at the present moment - the header can have anything in it, whether we provide it or not: https://virtual-assistant-pr-virtual-assistant-330.surge.sh/patternfly-ai/chatbot/ui#header-options.
packages/module/patternfly-docs/content/extensions/virtual-assistant/img/fullscreen.svg
Show resolved
Hide resolved
|  | ||
| </div> | ||
|
|
||
| 1. **Bot message:** Messages from the ChatBot, which are marked with an "AI" label to communicate the use of AI to users. You should choose a descriptive name for your ChatBot. |
There was a problem hiding this comment.
Number 1 says it's the bot message, but it's actually the user message in this image.
| 1. **Name:** Identifier for your ChatBot and the user. Choose a name for your ChatBot that users can easily identify as a bot. | ||
| 1. **Label:** Labels ChatBot messages as "AI." | ||
| 1. **Timestamp:** The relative or absolute time that a message was sent. | ||
| 1. **Quick responses:** Programmable, clickable actions that allow users to quickly answer questions from the ChatBot. |
There was a problem hiding this comment.
Would we also want to show sources, response actions, etc.?
|  | ||
| </div> | ||
|
|
||
| When there is an unread message from the ChatBot, a notification badge should be placed on the toggle. |
There was a problem hiding this comment.
Would we also want to discuss adding your own image?
| 1. **Attach button:** Allows users to upload files from their computer. | ||
| 1. **Use microphone button:** Supports speech recognition to allow users to use voice input. | ||
| 1. **Send button:** Allows users to send a typed message. This button should be disabled until a user has input text. | ||
|
|
There was a problem hiding this comment.
Do we want to include the stop button as well? This is a newer feature - it'll hide everything else when it's active.
|
|
||
| 1. **Bot message:** Messages from the ChatBot, which are marked with an "AI" label to communicate the use of AI to users. You should choose a descriptive name for your ChatBot. | ||
| 1. **User message:** Messages that the user has sent to the ChatBot. | ||
| 1. **Avatar:** Representative image for your ChatBot and the user. ChatBot avatars should align with your product's brand, adhering to any brand standards that exist. |
There was a problem hiding this comment.
We may want to swap the avatar out and/or talk about alternative shapes. I'd like to deprecate this man. :)
|  | ||
| </div> | ||
|
|
||
| - **Docked:** Anchors the ChatBot in the UI as a side drawer. When docked, the ChatBot window is persistent, and cannot be toggled. |
There was a problem hiding this comment.
It's technically not a drawer, but it does sort of float on top to the right.
Closes #289