Composer

The box a person writes a chat message in.

View code

tsx

<Composer method="post" action="/chat">
	<Composer.Input name="prompt" aria-label="Message" placeholder="Ask anything" required />
	<Composer.Toolbar>
		<Composer.Hint>
			<Keyboard>Enter</Keyboard> to send
		</Composer.Hint>
		<ComposerSubmit labels={{ send: "Send message", stop: "Stop response" }} />
	</Composer.Toolbar>
</Composer>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { Composer } from "@sdxc/ui/chat";

Renders the composer's surface: one rounded box that draws the focus ring for the field inside it, so the field, its attachments and its toolbar read as a single control.

Composition

The parts the component publishes, each a static property of the host.

Composer
Composer.InputThe message field: borderless inside the composer's frame, one line tall when empty, growing with its text to --ui-composer-max-block-size (twelve lines) and scrolling past it.
Composer.ToolbarThe row under the field: controls at the start, the hint and send control at the end.
Composer.HintHow to send, set at the toolbar's end before the send control.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	Attachments, the Composer.Input and a Composer.Toolbar, in that order.

Also accepts everything in TagProps<"form">.

Composer.Input

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	Attach and option controls first, then a Composer.Hint and the send control.

Also accepts everything in TagProps<"div">.

Composer.Hint

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	How to send, such as `<Keyboard>Enter</Keyboard> to send`.

Also accepts everything in TagProps<"p">.