Input Field

Do

• Allow users to enter up to 2000 characters within up to 6 lines of text. Any text beyond this limit will be cut off.
• Automatically save the text in the input field if users leave the input field without sending their message.

Don't

• Don’t send a message that doesn’t contain any text input.
• Don’t allow typing when the character limit is reached.

A. Text Input Box

The text input box is the container for the text input.

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 an active "Send" button as soon as a 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 character 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 tapped, 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.

Scrolling in the input field

The input field is loading and not ready for user to submit input.

Input field in initial loading state

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

Input field in enabled state

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

Input field in active state

The input field is active and the user is typing.

Input field in typing state

When the input is longer than one line, the input field grows vertically. It can extend to accommodate up to six lines of text.

Max height of an input field

The input field is expanded to fill more of the Joule panel, giving users additional room to view and edit longer prompts. Users can collapse back to the default size by tapping the “collapse” icon.

Expanded input field

Users can dictate their prompt aloud while a waveform indicates active listening. Tapping the stop icon ends dictation, and the transcribed text appears in the input field for review before sending.

Input field in dictation mode