Conversations List

A. Joule Panel

The conversations list is a unique view of the Joule panel. It provides an overview of all conversations and allows users to edit and switch between them.

B. Panel Header

The panel header is modified when in the conversation list. It provides the main navigation for the conversation list.

C. Search and Sort Section

The sort and search features allow users to refine their list of conversations.

D. Active Conversation Section

Includes the collapsible (by default) active conversations section header, a counter of active conversations, active conversations (if any), and a divider.

E. Active Conversation

Includes the active conversation title and conversation actions icon button.

F. Expired Conversation Section

Includes the expandable (by default) expired conversation section header, a counter of expired conversations, expired conversations (if any), and a divider.

G. Expired Conversation

Includes the expired conversation title and conversation actions icon button.

H. “New Conversation” Button

Allows users to start a new active conversation.

Conversations list anatomy

Selected State

The selected state is applied to an active or expired conversation item in the conversation menu when it is the most recently selected conversation. When within the conversation menu, tapping the “back icon” button in the panel header returns the user to the selected conversation.

Unselected State

The unselected state is applied to a conversation in the conversation menu when it is not the most recently selected conversation.

Conversations list with the unselected conversation, “Conversation A”, and the selected conversation, “Conversation B”

Default

The conversations list appears in the default variant when there are 49 or fewer active conversations.

Full

The conversations list appears in the full variant when there are 50 active conversations.

Conversations list in the default (left) and full (right) variants

When a user starts a new conversation and submits a query, the conversation is automatically titled “New Conversation” and saved in the active conversations section. Once Joule provides a response, the conversation title is automatically updated to reflect the query topic. This update is reflected in both the thread panel header and the conversation menu.

Creating a new conversation and then sending a query

Active conversations expire after a period of inactivity and are limited to set number of conversations at a time. Expired conversations are automatically deleted after a predefined duration. If the active conversations limit is reached, the “New Conversation” button in the conversation menu is disabled and the “New Conversation” option in the conversation panel header overflow menu is removed.

Conversation limit behavior in the conversation menu (left) and within a conversation (right)

Expired conversations are automatically deleted after a predefined duration. After opening an expired conversation, an error-handling pattern is displayed. The error-handling pattern blocks the input field, indicates that the conversation is expired, and provides a “New Conversation” button. If the active conversation limit is reached, the “New Conversation” button is disabled, and the error message prompts the user to delete an active conversation to create a new one.

Expired conversation where conversation limit is not reached (left) and conversation limit is reached (right)

The active and expired conversation section headers follow a “sticky” pattern. The section headers “stick” to the top of the list of conversations as users scroll down. This helps them understand which section they are scrolling through and allows them to quickly expand or collapse sections.

Scrolling through a long list of active and expired conversations to demonstrate sticky section header behavior

The conversation list pattern saves the user’s conversation history. If Joule is closed, they return to the last open selected conversation upon reopening Joule, regardless of whether the conversation is active or expired. If the last open screen was the conversation menu, users return to the selected conversation “behind” the menu. Users do not return to a conversation menu upon reopening Joule.

Reopening Joule after leaving off on the conversation menu

Tapping the menu icon button in a conversation panel header opens the conversations list. Tapping the “Back” icon button in the panel header returns users to the conversation.

Opening the conversation list from a conversation

Tapping the “Expand/Collapse” icon button in the active/expired conversation section header expands/collapses the active/expired conversation section. The active conversation section is expanded by default; this state resets when users restart Joule. The expired conversation section is collapsed by default; this state is persistent regardless of restarting Joule.

Expanding then collapsing the expired conversation section

Active

Tapping an active conversation in the conversations list opens the conversation.

Expired

Tapping an expired conversation in the conversations list opens the conversation.

Opening an unselected expired conversation from the conversations list

Tapping the “New Conversation” button navigates users to the Joule welcome screen. This conversation is not saved as an active conversation until they send a query.

Creating a conversation from the conversations list

Tapping the overflow icon button in the conversation panel header and then selecting the “New Conversation” option in the menu navigates users to the Joule welcome screen. This conversation is not saved as an active conversation until they send a query.

Creating a conversation from another conversation

Long-pressing on an active or expired conversation opens a menu. From this menu, selecting the “Rename Conversation” option opens a dialog that allows users to enter a new conversation name in the input field. They can “Save” to apply the change or “Cancel” to discard it.

Long press on a conversation opens a menu

Renaming an unselected conversation from the conversation list

When users tap the overflow icon button in the conversation panel header, a menu is opened. From this menu, selecting the “Rename Conversation” option opens a dialog that allows users to enter a new conversation name in the input field. They can tap “Save” to apply the change or “Cancel” to discard it.

Renaming the conversation from within the conversation

When users tap the overflow icon button of a conversation, a menu appears. From this menu, selecting the “Delete Conversation” option opens a dialog that allows users to select “Delete” to confirm or “Cancel” to cancel the action. Once the conversation is deleted, they remain in the conversation view.

Deleting a selected conversation from the conversations list

When users tap the overflow icon button of a conversation, it opens a menu. From this menu, selecting the “Delete Conversation” option opens a dialog that allows users to select “Delete” to confirm or “Cancel” to cancel the action. Once a conversation is deleted, users are taken back to the welcome screen. If the conversation limit is reached, they are redirected to the conversation menu.

Deleting a conversation from within the conversation

When users tap the search bar, it opens into a dedicated search interface. Within this space, they can refine their list of conversations by entering specific words or phrases. To exit the search mode, users can tap the "Back" arrow icon in the left corner of the search bar.

Entering search mode

When users search for specific words or phrases, the search results display conversations containing those terms. Selecting a conversation opens it and automatically scrolls to the top of the paragraph containing the first occurrence of the searched term.

Opening a conversation from search result list