Multi-Threading

A. Joule Panel

The conversation menu 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 menu. It provides the main navigation for the conversation menu.

C. Active Conversation Section

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

D. Active Conversation

Includes the active conversation title and conversation actions icon button.

E. Expired Conversation Section

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

F. Expired Conversation

Includes the expired conversation title and conversation actions icon button.

G. Disclaimer

Explains how conversations are defined as active or expired and outlines the limitations of active conversations.

H. “New Conversation” Button

Allows users to start a new active conversation.

Conversation menu 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.

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

Default

The conversation menu appears in the default variant when there are nine or fewer active conversations.

Full

The conversation menu appears in the full variant when there are ten active conversations.

Conversation menu 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 the user scrolls. This helps the user 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 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 “back” 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 conversation menu

Tapping the “New Conversation” 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 conversation menu

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

Tapping the overflow icon button of an active or expired conversation 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. They can “Save” to apply the change or “Cancel” to discard it.

Renaming an unselected conversation from the conversation menu

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. They can tap “Save” to apply the change or “Cancel” to discard it.

Renaming the conversation from within the conversation

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 select “Delete” to confirm or “Cancel” to cancel the action. After deletion, the user remains in the conversation view.

Deleting a selected conversation from the conversation menu

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 select “Delete” to confirm or “Cancel” to cancel the action. 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