Chat Input

The chat input is pinned to the bottom of the conversation, and it's where users talk. At its core is a Textarea that starts one line tall, grows as you type, and switches to scrolling inside after five or six lines. A row of small buttons in the bottom left holds tools like "Attach file," "Choose model," and "Web search." On the right is a round send button that's grayed out when there's no text and turns into a square "Stop" while the AI is replying. Uploaded images and files show up as small cards above the text box, each removable on its own. A line of small gray text often sits below, like "AI can make mistakes. Check important info."

What sets it apart from a plain Textarea is that it's a bundle. The text box, tool buttons, attachment previews, and send button live in one rounded container, along with chat-specific behavior like Enter to send and Stop while generating. It's also different from a Comment box. A comment box sits under the content, and you click "Post" once and you're done. A chat input stays at the bottom of the screen, clears right after sending, and waits for the next message.

Enter to send and Shift+Enter for a new line is the standard, but pressing Enter to pick a character in a Chinese or Japanese input method (IME) must not send the message, so check whether the IME is still composing. After sending, clear the box and keep focus in it. If sending fails, put the text back so users don't have to retype it. On phones, the input should move up with the on-screen keyboard instead of getting hidden behind it. Give the input an aria-label, and give an icon-only send button a name too.