Joule Panel

Joule / Components / Joule Panel

Intro

The Joule panel provides the structure and foundation for all the interactive components and features of the Joule experience. It is a container for grouping and displaying information to the user

Large view panel (left), medium view panel (middle), and minimized view panel (right)

Usage

Use a panel to create a seamless conversational experience. You can nest chat elements in the panel.

Don't

Don’t use a full-screen panel if the user needs to multitask or engage with content outside the conversation.

Use the resizable panel to give users more flexibility with how they want to engage with Joule and the app’s contents.
Avoid putting conversational elements outside of a panel.

Anatomy

Large/Medium View

A. Header

The header includes control actions for the entire panel. The small horizontal indicator (grabber) at the top edge of the view is used to resize the panel to its different variants. In addition to the grabber, the header has two control actions: the “close” button to close the panel and the “overflow” button for additional actions.

B. Content Area

The content area is where the conversation between the user and Joule takes place. This is where all the interactive components are displayed.

C. Input Field

The input field is always located at the base of the panel. This is where users enter their text input to interact with Joule.

D. Persistent AI Notice

The persistent AI notice is a line of text that informs the user that Joule uses AI. The disclaimer is always visible. The full content can be found in the overflow menu in the header.

Large view panel (left) and medium view panel (right)

Minimized View

A. Container

The minimized view has two control actions: The “Close” button to close the panel, and the container itself to open the default Joule panel when tapped.

Minimized view Joule panel

Minimized view Joule panel

Behavior and Interaction

Opening the Panel

To start a conversation with Joule, the user must tap on Joule’s entry point. Tapping on the entry point opens the default panel (large view).

Joule panel opening after tapping on Joule’s entry point

Closing the Panel

To close the panel, the user must tap on the “x” icon in the top header of the panel, or on the “x” icon on the right-hand side of the minimized view.

Joule panel closing after tapping on the “x” icon

Resizing the Panel

The Joule panel has three sizes that the user can seamlessly switch between by dragging up or down on the panel header. When the panel is in the minimized view variant, the user can tap on the container to bring back the default panel.

Joule panel being resized from large, to medium, to minimized and vice versa

Minimized View

The minimized view is the only variant of the panel that can follow the user as they navigate around the app. It can serve as an indicator that Joule is still open, and that the user has an ongoing conversation.

Joule minimized view behavior

Interacting with the Background

When the Joule panel appears in the medium view variant, you can opt to let users interact with the app behind the Joule panel while keeping it visible.

Joule panel that allows users to interact with background

Alternatively, you can adjust the settings to block interaction with the background. In such cases, an overlay between the Joule panel and the background should be used to notify users of the restriction.