Skip to content

chat-input.md

Latest commit

 

History

History
91 lines (57 loc) · 3.1 KB

chat-input.md

File metadata and controls

91 lines (57 loc) · 3.1 KB
Raw

Chat input

The chat input is a text field for composing and submitting messages in conversational interfaces. It supports both AI-assisted interactions and human-to-human chat.

Usage ---

The chat input enables users to send messages or comments depending on context:

  • User chat: Sends real-time messages in a conversation
  • AI chat: Submits queries to a system for response
  • Commenting: Adds contextual feedback or notes tied to a specific element

chat input example

When to use

  • In any interface where users need to communicate or leave feedback.
  • When freeform text input is required in chat, messaging, or commenting scenarios.

Best practices

  • Always autofocus the input prompt when the page or chat view is opened.
  • Limit input width to 720px for legibility.
  • Match placeholder text to context (e.g., “Ask anything”, “Type a message”, “Leave a comment”).
  • Disable the send button when input is empty or invalid.
  • Add the legal disclaimer when used for AI functions.

Design ---

Elements

Chat input elements

  1. Placeholder text, 2. Container, 3. Send button, 4. Actions (optional), 5. Legal disclaimer (only for conversational AI)

Interaction states

Chat input interaction states

Actions

When actions are available, they appear directly below the text area It is recommended to display up to one action inline; any additional actions should be grouped into a menu.

Chat input actions

Attachments

When supported, attachments appear within the input area as part of the composed message, allowing users to review and remove them before sending.

If multiple attachments are added, they wrap and stack within the input field.

Chat input attachments

Overflow behavior

The input field automatically expands as the user types, up to a set maximum height. Beyond that point, scrolling is enabled within the input.

Follow-up prompts

Follow-up prompts are suggested next actions displayed as pill buttons above the chat input after an AI response. They help users continue the conversation without having to formulate the next message from scratch.

  • Prompts wrap to multiple lines when labels are long.
  • Selecting a prompt inserts its text into the input field so the user can review or edit before sending.
  • The prompt list is cleared when the user sends a message.

Code ---

Follow-up prompts

Pass a string[] to followUpPrompts to display suggested prompts above the input. When the user clicks a prompt, its text is inserted into the input and followUpPromptSelected is emitted. Clear the list (set to []) on send and repopulate it after each AI response.

<si-chat-input
  [followUpPrompts]="aiResponse?.followUpPrompts ?? []"
  (followUpPromptSelected)="onFollowUpSelected()"
  (send)="onSend($event)"
/>