Chat

Overview

Our LG Chat Library provides components for building AI chat interfaces. We provide components for chat windows, chat messages, and various elements that may surface inside a chat message. The Figma library is published under LeafyGreen Chat Library and can be used in your files.

How to use these components

Chat Windows

We provide a drawer and full screen layouts for our chat interfaces. Think about the context of your chatbot in relation to the user flow to determine which one is best for you use case.

Drawer

The drawer chat serves as a side panel that displays the MongoDB Assistant alongside the main working screen. This allows users to interact with the assistant without leaving their current workspace, enabling them to maintain their workflow and reduce context switching.

In instances like Docs and University where the Assistant Drawer is trigger by a button, it is okay to leave out the toolbar.

Full Screen Layout

The full screen layout presents the chat window prominently on the page with an accompanying Side Nav. This configuration is most appropriate when:

The user is partaking in immersive, in-depth conversations
The chat is the primary focus and sole task
There are complex interactions requiring more screen space

Input Bar

Input Bar in Drawer

When the Input Bar is used within a drawer, make sure that the input bar is placed on the bottom of the window. We allow the Input Bar container to have max height of 348px and when it exceeds the max height, it will introduce a scroll.

Input Bar in Full Screen Layout

The Input Bar could be used for the full screen view as well as show in the image below. When it is in its empty state, it can have a drop down to show suggested prompts or recent searches.

Chat Messages

A LG Chat message supports multiple auxiliary components to serve information to users in different ways.

Message Actions

The Message Actions component includes copy and refresh functions, as well as a message rating feature. This component should always come after each message that our assistant generates.

Message Ratings

The Message Ratings component lets users provide feedback, which is submitted once they complete and submit their qualitative response. Once the feedback has been submitted, they won’t be able to change the answer and the buttons will no longer be interactable.

Verified Answers

The Verified Answers badge is used when a chatbot response has been validated by MongoDB or a third party for truthfulness and accuracy. This helps ensure that a user can be confident in the information presented by the response. EDU AI team is able to match the response to an answer and the badge will be displaced if those questions are asked.

Rich Links

The Rich links present clickable links returned in a chatbot response in a way that helps users quickly see the link title and resource type. The component is responsive, automatically adjusting its layout to fill the container’s width and stacking elements vertically on narrower screens.

The content types are mapped out as follows:

Docs — MongoDB Docs
Course — MongoDB University
Article — DevCenter and mongodb.com
Blog — URLs containing “blog” or “developer”
Books — MongoDB books
Video — Any video content

Onboarding State

The empty state of the chat drawer should be consistent with an MongoDB Assistant welcome message and include Suggested Prompts when applicable.

Welcome Message

We provide consistent welcome message for our Chat. Please make sure that this is included on the top of the message along with suggested prompts. Once a user types in a prompt the welcome message will transition out.

Onboarding Message

If suggested prompts aren’t available in the empty state, we recommend adding an onboarding message below the welcome message to give users ideas on how to use the assistant. Once a user types in a prompt the onboarding message will transition out.

Message Prompts

The suggested prompts works as an onboarding aids or inspiration for users to help them understand what they can ask the AI. After answer is generated, this could also be used as a follow up to help guide users deeper into the conversation by offering related next steps.

Once the user selects a prompt, the selected message prompt should be displayed as a users prompts and the rest of the suggested prompts should disappear.

Chat History

Once the user is logged in to MongoDB account, their chat conversations would be able to be saved in Chat History.

Drawer

If the chat history is not available because users are not logged in, we recommend using the default Chat window without the new chat and chat history icon in the top banner.

Full Screen Layout

The chat history will be stored in the side navigation for the Full Screen Layout chat.

Confirmation Card

The confirmation card lets users verify actions directly within the chat. After an action is confirmed, the user can collapse the chat.

Assistant Button

The Assistant Button introduces a new visual style distinct from our regular buttons. It features a gradient outline, a sparkle icon, and a shimmer animation that plays on hover and once on initial load. The shimmer should not loop continuously without user interaction. The animation prototype can be viewed

Chat Interactions and Behaviors

Resizable Drawer

Users can resize the Drawer from 320px to 520px, with a default width of 432px. Its content should adapt responsively as the Drawer grows or shrinks. On smaller screens, the Drawer automatically adjusts to occupy at least 50% of the viewport and switches to an overlay, covering the page content.

Default Width: 432px

Minimum Width: 320px

Maximum Width: 520px

Smaller Screen Width

If the screen width size gets smaller to fit the drawer, the drawer will automatically adjust to show at least 50% of the page.

Responsive Full Screen

Full screen is ideal for code and information heavy interactions.

When the screen is resized to a narrower width, the message feed adjusts responsively so its content remains properly scaled.

Scroll Behaviors

Every user prompts will be placed at the top of the window and the Assistant message will generate below it from top to bottom. The Assistant message won’t scroll with the message if it exceeds the length of the container and will display “Scroll to latest” button to scroll down.

Response Format

Users often can get overwhelmed with the length of the response. We recommend the response to be concise where users can get key informations and ask users if they would like more in-depth response.

Another way to reduce cognitive overload is to encourage them to ask follow-up questions connected to their initial response. Once they select a follow-up or enter a new prompt, the suggested prompts should disappear.

Toolbar Interaction

Items in the Toolbar should only show the user what is available to them on a given tab or page. The assistant icon should always be the first item shown at the top of the toolbar. If a user has opened the assistant panel, it should remain open while a user navigates across pages and tabs, even if a user had another part of the toolbar open on a page previously.