Input Field

A. File Upload Button

The file upload button allows users to attach files.

B. Attachments & Modes Button

The "+" button allows users to upload attachments.

C. Placeholder Text

The placeholder text prompts users to enter text. For example: “Message Joule”.

D. “Dictation” Button

The “Dictation” button activates dictation mode and lets users input text by talking to Joule.

E. “Voice” Button

The “Voice” button activates voice mode. Voice mode lets users interact with Joule via voice. The “Voice” button changes to a “Send” button as soon as the user inputs any text.

F. User Input

User input is the text that is displayed as live input from users.

G. "Mention" Button

The "Mention" button allows users to tag an agent to receive more specific replies. The icon button becomes disabled when an attachment is uploaded into the input field, and is hidden once an agent is selected.

H. Character Limit (Optional)

The character limit shows the live count of characters entered and the number of characters allowed. This helper text is displayed when the input reaches 1800 characters.

I. "Send" Button

The “Send” button sends out the message to Joule.

J. "Expand" Button

The “Expand” button is displayed once the text in the input field crosses 5 lines of text. If activated, it expands the height of the input field. Once expanded, the “Expand” button changes to a “Collapse” button that resets the height of the input field.

Enabled input field (top) and active input field with user input and the character count and limit (bottom)

When users tap on the input field, the input field changes from its default state to an active state. The input field is pushed up by the keyboard.

Tapping on the input field

When users tap outside of the input field while it’s active, the input field returns to the bottom of the screen with the user input captured.

Text input kept in the input field after tapping outside of the input field

The input field expands to fit a maximum of five lines of user text. Once the limit is reached, the field becomes scrollable so users can review what they have typed. Tapping on the "Expand" button enlarges the input field's real estate, giving users more space to see what they are typing.

When the input reaches 1800 characters, a word count is displayed. Upon reaching 2000 characters, the input field stops logging additional text.

Input field with “Expand” icon (left) and expanded input field with “Collapse” icon (right)

Enabled

Joule is active and the input field is ready for users to enter any input.

Focused – Active Empty

The input field is tapped on, but no input has been entered yet.

Input field in enabled (top) and focused - active empty (bottom) state

Focused – Typing

The input field is active and the user is typing.

Typed

The input field is still enabled, but not in a focused state. It shows the input that was previously typed.

Input field in focused – typing (top) and typed (bottom) state

Dictation Mode

When dictation mode is activated, the input field transitions to let users input text via speech.

Input field in listening state (top) and input field displaying text as its being dictated (bottom)