Skip to main content

Chat

Serves as an interface for textual conversations.

Anatomy​

Chat component features two primary sections:

  • Input Area: Users can type text messages and attach files to send.

  • Actions Bar: Users can add attachments, use voice input, choose an AI model, and send messages.

Behavior​

  • The component expands upwards as the user adds text or files to the input area.

  • Uploaded files are positioned at the top of the input area.

  • The corresponding counter appears if a user exceeds the number of allowed characters.
  • When a user uploads a file while scrolling, a notification appears to indicate the upload has started. Selecting the notification scrolls the user to the uploading file.
  • After the file is uploaded, the user sees one of two messages for 5 seconds. Clicking the message scrolls to either the uploaded file or the file with an error.
  • Selecting "Send" automatically scrolls to the first file with an error, if any.
  • The chat component appears on top of other elements rather than displacing them.