Persistent Attachment

Do

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

Don't

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

Attachment and Mode Selector Sheet

A. Attachment Section

The attachment section shows the available attachment options.

Anatomy of input field with attachment

Attachment Input Field

A. Attachments & Modes Button

The “+” icon button on the left of the input field allows users to upload attachments.

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

The text area is used for writing a prompt along with the attachment to provide context or ask a question.

E. “Send” Button

The “Send” button allows users to submit their message. The send button remains disabled until they input a text message.

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.

Anatomy of a sent attachment

Uploading Attachments

Users can upload an attachment by tapping the “+” icon button and selecting an attachment button option. Once the user chooses an item, the attachment will upload and is displayed in the input field.

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 bubble container along with the text message.

Uploading and submitting an attachment

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 the attachment chip displayed within the input field to ask questions about another topic, add a thinking mode, reference an agent, or upload another attachment.

Removing focus (chip) of an attachment

Default

Successfully uploaded file. Tapping the “x” icon button removes the attachment.

Uploaded attachment in default state

Uploading

Feedback letting users know the attachment is being uploaded.

Upload feedback

Upload Error

An error message is displayed underneath the file name. It should be concise and informative. Users need to remove the error message to upload another attachment.

Error handling for upload errors