ChatComposer

Bordered composer chrome around the message input and trailing actions. Pair with ChatComposerInput for the auto-resizing textarea and ChatSendButton for send/stop.

Examples

Default

There is no @var-ui/astro ChatComposer — Astro and HTML previews show static core-recipe chrome; Enter-to-submit is React-only.

import { useState } from 'react';
import { ChatComposer, ChatComposerInput, ChatSendButton } from '@var-ui/react';

function Composer() {
  const [value, setValue] = useState('');
  return (
    <ChatComposer actions={<ChatSendButton onPress={() => setValue('')} />}>
      <ChatComposerInput
        value={value}
        onChange={setValue}
        onSubmit={() => setValue('')}
        placeholder="Type a message…"
      />
    </ChatComposer>
  );
}

ChatComposerInput

Enter submits (trimmed, non-empty only); Shift+Enter inserts a newline.

Props

Accessibility

Built on React Aria TextField / TextArea.