Skip to main content

Chat attachment

Ask AI
Copy a prompt to ask an AI assistant about this page.

Chat attachments are used to display a single attachment in chat experiences.

Chat attachment - Usage

Chat attachments display files that users have uploaded to a chat prompt. They are typically shown while users compose messages in chat input and after sending in user messages.

Chat attachment anatomy

  1. File icon
  2. File name
  3. Remove button

Options​

  • File icon: Show a recognizable file-type icon so users can identify attachments quickly, e.g. pdf-document.
  • File name: Show the file name including the file extension.
  • Remove button: Show remove buttons in a chat input and hide it once an attachment is part of a submitted message.
  • Preview supported: Use only for supported files to show e.g. thumbnails.

Behavior in context​

  • Chat input context: If attachments exceed the chat input's width, they overflow into a scrollable horizontal list.
  • User message context: If attachments exceed the user message container's width, a more button is visible.
  • Text overflow: If an attachment exceeds 20rem, the file name is truncated at the end while preserving the file extension. A tooltip is shown on hover to display the full file name.

States​

Chat attachments have six states: default, hover, active, loading, focused and error.

Chat attachments follow the chip interaction model, including hover, active and focused behavior. In an error state, attachments stay visible and show clear feedback so users can retry or remove files.

Dos and Don’ts​

  • Do keep attachments visible in user messages so attachments stay traceable within context
  • Don’t hide the remove action while users are still composing a prompt in the chat input
  • Don’t detach attachments from their related user message after sending