Persistent Attachment

Joule / Patterns / Persistent Attachment

Intro

The persistent attachment feature lets users upload files to the conversation with Joule.

Screens screenshot of a chat AI-generated content may be incorrect.

Uploading attachments on compact (left) and expanded (right) screens

Usage

Do

Use the persistent attachment pattern when the user initiates file upload.

Don't

Don’t use the attachment pattern for Joule-prompted file upload. Use the attachment by prompt flow instead.

  • Users can only upload a single file.
  • Disable file upload button once an attachment has been uploaded.
  • Display sent attachments in the user-text message container.
  • Let users know that the chat context corresponds to the latest uploaded file, unless the user removes focus from the attachment manually.
  • Use icons as file thumbnails.

Anatomy

Persistent Attachment

A. File Upload Button

Users can upload attachments by tapping the “+” icon button on the left of the input field.

B. Input Field

The attachment is displayed in the input field until the user submits the message.

C. Attachment

The uploaded attachment is displayed above the text area and can be removed by tapping the “x” icon button.

D. Text Area

Users need to write a prompt along with the attachment to provide context or ask a question.

E. “Send” Button

Users can submit their message by tapping the “Send” button. The send button remains disabled until user inputs a text message.

A screenshot of a chat AI-generated content may be incorrect.

Anatomy of input field with attachment

Sent Attachment Bubble

A. Bubble

Sent attachments are displayed in a text message bubble within the conversation.

B. Attachment

Sent attachments are displayed as a list of object cells. Each attachment contains an icon thumbnail, file name, and download icon.

Tapping an attachment cell lets users view the file, whereas the download icon lets users download it.

C. Text Message

The prompt is displayed under the attachment cell.

A screenshot of a chat box AI-generated content may be incorrect.

Anatomy of sent attachment

Behavior and Interaction

Uploading Attachments

Users can upload an attachment by tapping the “+” icon button. Once the user uploads a file, the attachment is displayed in the input field

Uploading an attachment

Submitting Attachments

Users can submit an attachment by tapping the “Send” button after writing a text message for context. The submitted attachment appears in a container along with the text message.

Submitting attachments

Removing Focus

Once users submit a message with an attachment, Joule gives responses based on that file. Chat context anchors to latest file upload. Users need to remove the attachment focus by tapping on “Remove focus” to ask questions about another topic or upload another file.

Removing focus from attachment

States

Error States

Joule can encounter various types of errors. The following errors specifically relate to failures in uploading or loading attachments.

Upload Error

The attachment form cell is in error state if a file type is not supported, or a file size exceeds the upload limit.

Users need to remove files with errors before they can submit attachments. The “Send” button remains disabled until the errors are resolved.

A screenshot of a phone AI-generated content may be incorrect.

Error handling for upload errors

Loading Error

If the attachment flow gets disrupted, or sent attachments fail to load after submitting, the illustrated message displays the error.

A screenshot of a phone AI-generated content may be incorrect.

Error handling for loading error

Adaptive Design

Attachment Sheet

On compact screens, the attachment is set to fill the width of the input field. In medium, expanded, and large window size classes, is recommended to keep the attachment left aligned with a max width of 380 dp.

A screenshot of a chat AI-generated content may be incorrect.

Attachment in input field on compact (left) and expanded (right) screens

Sent Attachment Bubble

The bubble for sent attachments follows the same behavior as user text messages. The width of the container is limited to ensure readability across devices.

Screens screenshot of a chat AI-generated content may be incorrect.

Sent attachments on compact (left) and expanded (right) screens

Resources

Joule for iOS: Persistent Attachment

Joule for Web: Joule Web UI Kit Guidelines

Related Components/Patterns: Attachment by Prompt, Attachment Form Cell