Joule Panel

Do

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.

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.

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

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

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

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

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

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

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.

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.

Medium view panel with overlay (left) and without an overlay (right)

The large view panel variant is the default size sheet for when Joule is first triggered.

Large view panel

The medium view panel variant allows some of the parent view to remain visible, helping users retain their original context.

Medium view panel

The minimized view panel variant sits on top of the tab bar or replaces the tab bar if there is no tab bar. It takes up minimal screen space and still allows users to access or close Joule as needed.

Minimized view panel