Conversations List

A. Joule Panel

A bottom sheet that provides an overview of all conversations, allowing users to view, edit, and switch between threads.

B. Panel Header

Contains the screen title and a close action to dismiss the panel.

C. Active Conversation Section

A collapsible section housing all active threads. It includes a title, a count of active conversations, and the individual thread items (D).

D. Active Conversation

Individual conversations representing active sessions.

E. Expired Conversation Section

A collapsible section housing all past threads. It includes a title, a count of expired conversations, and the individual thread items (F).

F. Expired Conversation

Individual conversations representing past sessions.

G. Sort Action

Reorders the conversation list based on specific criteria.

H. Search Bar

An input field to filter and locate specific threads by keywords.

I. "New Conversation" Button

Initiates a new 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.

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 nine or fewer active conversations.

Full

The conversations list appears in the full variant when there are ten 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

The search feature allows users to quickly filter through their conversation history by entering keywords into the Search Bar. The results update dynamically as the user types, highlighting the keywords in the conversation title and conversation snippet across both Active and Expired sections.

Searching using a keyword and viewing the conversation

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 multi-threading pattern saves the user’s conversation history. If Joule is closed, the user returns 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, the user returns to the selected conversation “behind” the menu. The user does 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 conversation menu. Tapping the “X” icon button in the panel header returns the user to the conversation.

Opening the conversation menu 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 the user restarts 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 conversation menu opens the conversation.

Expired

Tapping an expired conversation in the conversation menu opens the conversation.

Opening an unselected expired conversation from the conversations list

Tapping the “+” icon button navigates the user to the Joule welcome screen. This conversation is not saved as an active conversation until the user sends 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 the user to the Joule welcome screen. This conversation is not saved as an active conversation until the user sends a query.

Creating a conversation from another conversation

Long pressing a conversation displays a context menu. From this menu, selecting the “Rename” option opens a dialog that allows the user to enter a new conversation name in the input field. The conversation item can also be renamed by swiping the conversation title.

Renaming a selected conversation from the conversations list using long press

Renaming a selected conversation from the conversations list using swipe gesture

Tapping the overflow icon button in the conversation panel header opens a menu. From this menu, selecting the “Rename Conversation” option opens a dialog that allows the user to enter a new conversation name in the input field.

Renaming the conversation from within the conversation

Long pressing a conversation displays a context menu. From this menu, selecting the “Delete” option opens a dialog that allows the user to confirm deletion or cancel. The conversation item can also be deleted by swiping the conversation title.

Deleting a selected conversation from the conversations list using long press

Deleting a selected conversation from the conversations list using swipe gesture

Tapping the overflow icon button of a conversation opens a menu. From this menu, selecting the “Delete Conversation” option opens a dialog that allows the user to confirm deletion or cancel. After deletion, the user is navigated to the welcome screen. If the conversation limit is reached, the user is redirected to the conversation menu.

Deleting a conversation from within the conversation