docs: Adds design guidelines #330
Conversation
edonehoo
requested review from
rebeccaalpert,
nicolethoen,
andrew-ronaldson and
kaylachumley
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
|
|
||
| 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?
There was a problem hiding this comment.
I agree @edonehoo Let's call it ChatBot Toggle
|  | ||
| </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.
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
|
|
||
| ## 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!
There was a problem hiding this comment.
I know we discussed this during our last sync, but did we officially decide to go with option 3 here? I didn't include any info about model switching in my last commit, but can update again if we do want to share some guidance here!
There was a problem hiding this comment.
This is still up in the air - We were discussing a settings page model switch and completely removing the menu toggle within the header. No definitive decisions were made yet regarding this
|
|
||
| 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?
There was a problem hiding this comment.
Our design guidelines template has an h2 variations section (https://www.patternfly.org/ux-writing/writing-patternfly-design-guidelines), so I just added an h3 right below called display variations! lmk if you have thoughts on that approach
| </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
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
|
@rebeccaalpert @kaylachumley ty for your feedback! I pushed some updates - can you take another look? I left comments above open if I didn't 100% integrate them, or if I had responses, but lmk if you see anything to edit/add! |
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
|
|
||
| When users select the footnote, you can display a popover that provides more information than would fit in the footnote: | ||
|
|
||
| <div class="ws-docs-content-img"> |
There was a problem hiding this comment.
It looks like this in reality ^.
There was a problem hiding this comment.
The screenshot in the design guidelines has the footer popup a little higher than it is in reality, but it's not a blocker from my side.
| - Opening a menu with attachment options that are chosen by designers and developers | ||
|
|
||
| <div class="ws-docs-content-img"> | ||
|  |
There was a problem hiding this comment.
Button is not actually blue when active, but it could just be one of the many instances of drift we have here.
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
| 2. **Docked:** Anchors the ChatBot to the side of the page content. When docked, the ChatBot window is persistent, and cannot be toggled. | ||
|
|
||
| <div class="ws-docs-content-img"> | ||
|  |
There was a problem hiding this comment.
There is a box shadow here in real life.
There was a problem hiding this comment.
there's apparently this weird figma bug where it doesn't always export shadows ? This is how the image looks before I export, gonna try and figure that out 🤔
There was a problem hiding this comment.
Still present, but not worth blocking this imho.
packages/module/patternfly-docs/content/extensions/virtual-assistant/design-guidelines.md
Outdated
Show resolved
Hide resolved
packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md
Outdated
Show resolved
Hide resolved
|
@kaylachumley - Do we want the code side to have the blue selected attach button state when the menu is open, or to have the quick response action state where it's blue with an icon? I'm happy to ticket these out if you want them - just let me know if you want them. I saw these in Erin's design guidelines screenshots. |
kaylachumley
requested review from
kaylachumley,
rebeccaalpert and
nicolethoen
|
🎉 This PR is included in version 2.1.0-prerelease.24 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #289
preview link: https://chatbot-pr-chatbot-330.surge.sh/patternfly-ai/chatbot/overview/design-guidelines