Persistent Attachment

Joule / Patterns / Persistent Attachment

Intro

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

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

Usage

Do

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

Don't

Don’t use this 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 uploaded attachments in the user-text message container.
  • Update text field placeholder to let users know prompts should be related to the file.
  • User needs to remove focus from the attachment to ask about other topics.
  • Use icons as file thumbnails.

Anatomy

Persistent Attachment

A. File Upload Button

Tapping the “+” icon button opens the iOS native file menu.

B. Input Field

Area for users to input text and see uploaded file.

C. Attachment

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

D. Text Area

A prompt/message is required when an attachment is present. Users cannot submit without it.

E. “Send” Button

Tapping the “Send” button sends the message and attachment. The button is disabled until user inputs 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

Each attachment contains an icon thumbnail and file name. Tapping an attachment cell lets users view the file.

C. Message

User’s prompt/message is displayed below the attachment.

Anatomy of sent attachment and message bubble

Behavior and Interaction

Uploading Attachment

Users can upload an attachment by tapping the “+” icon button. Once the user uploads a file, the attachment is displayed within the input field. A prompt/message is required to submit.

Uploading an attachment

Removing Attachment 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 attachment focus

Variations

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

Resources

Joule for Android: Persistent Attachment

Joule for Web: Joule Web UI Kit Guidelines

Related Components/Patterns: Attachment by Prompt