Attachment by Prompt

Do

Use the attachment pattern when the user is prompted by Joule to upload a document

Don't

Don’t use the attachment pattern for user-initiated file upload. Due to technical reasons, only Joule can initiate the attachment flow.

Attachment Sheet

The attachment sheet is displayed over the Joule panel without an overlay and consists of the following component features.

A. Navigation Bar

Contains a label and a “Close” icon button that allows users to dismiss the attachment sheet and cancel the attachment flow.

B. Attachment Form Cell

Allows users to upload files by tapping on the “Add (+)” button.

C. Toolbar Container

The toolbar contains the “Submit” button, which allows users to send attached files. It is disabled by default and only becomes active once a file has been uploaded.

Anatomy of attachment sheet

Sent Attachment Bubble

A. Bubble

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

B. Attachment Form Cell

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.

Anatomy of sent attachments bubble

The attachment form cell is used to enable users to upload files when prompted by Joule. By default, the attachment form cell is in an empty state. Users can upload an attachment by tapping the “Add (+)” button. Once the user uploads a file, the attachment form cell displays the uploaded files in a scrollable grid.

Uploading attachments

Users can submit attachments by tapping the “Submit” button. Submitted attachments appear in a container similar to user text messages. The container for submitted attachments is displayed as part of the conversation.

Submitting attachments

Upload Error

The attachment form cell contains in-line error handling if a file type is not supported, or a file size exceeds the 10 MB limit.

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.

Error handling for loading error

Attachment Sheet

The attachment sheet adapts to the width of the Joule panel. The height should not exceed the Joule panel height.

Attachment sheet on compact screen (left) and regular screen (right)

Sent Attachment Bubble

The sent attachment bubble follows the same behavior as the user text message bubble. The width of the container is limited to the width of user text messages to ensure consistency and readability.

Sent attachments on compact screen (left) and regular screen (right)