Welcome

• A new chat with nothing in it yet, where an empty box gives the reader no idea where to start.
• An assistant with a narrow scope, where saying what it can do saves the reader from asking things it cannot answer.
• Paired with Prompts below it, so the reader can start with one click.

Use something else when

• The chat already has messages. Remove the greeting once the first message is sent and let the conversation take the space.
• The page has nothing to do with a chat. A page heading, or Empty for a list with no items, fits better.
• The message is a status or a warning. That is an Alert.

• title says who the assistant is, in one line.
• description says what it can do, with concrete nouns from your product: “Ask about a chapter, a character or a line” tells the reader more than “How can I help?”.
• Leave examples of questions to Prompts, where they can be clicked. A description that lists five sample questions is five prompts the reader has to retype.

• filled gives it a light fill and padding. Use it on a plain page, where the greeting needs an edge to read as one block.
• borderless drops the fill and the padding, and sets the title larger. Use it inside a Card, or as the large greeting in the middle of an empty chat. A filled greeting on a card draws a box inside a box.

• icon is the assistant's face. An Avatar at size="large" or a logo matches the height of the title and description together.
• Pass an image node, not a URL string. A string that starts with http is turned into an image with a generic alt text. Pass <img src="…" alt="…" /> or an Avatar so you control the alt text and the size.
• extra sits at the end of the title row. Keep it to one or two icon buttons, like a new chat or a settings menu. Anything larger pushes the title into a narrow column.

• To center the greeting in an empty chat, center the root with className and give it a width, rather than styling each part.
• The fill of the filled variant is a theme color, so it follows light and dark mode with no extra rule.