> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# ChatInput
The composer at the bottom of the Wally chat: a growing textarea where Enter sends and Shift+Enter adds a line, with the send button turning into Stop while a reply streams. It is controlled — the app owns the draft and the running state — and any actions such as `ChatPermissions` go between the textarea and `ChatInputSubmit`.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/ChatInput) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/ai-chatinput--overview)
```tsx
import { useState } from 'react';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
export const Default = () => {
const [value, setValue] = useState('');
const [isRunning, setIsRunning] = useState(false);
const handleSubmit = () => {
setValue('');
setIsRunning(true);
};
const handleStop = () => {
setIsRunning(false);
};
return (
);
};
```
## Usage
```tsx
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
```
## Examples
### Typing
A multi-line draft — the textarea grows with its content up to eight lines, then scrolls.
```tsx
import { useState } from 'react';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
export const Typing = () => {
const [value, setValue] = useState(
'Why was 203.0.113.42 blocked yesterday?\nShow the attacks it sent\nand the rule that matched them.',
);
const [isRunning, setIsRunning] = useState(false);
const handleSubmit = () => {
setValue('');
setIsRunning(true);
};
const handleStop = () => {
setIsRunning(false);
};
return (
);
};
```
### Streaming
While a reply streams the button becomes Stop; its tooltip mentions that Esc in the textarea does the same.
```tsx
import { useState } from 'react';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
export const Streaming = () => {
const [value, setValue] = useState('');
const [isRunning, setIsRunning] = useState(true);
const handleSubmit = () => {
setValue('');
setIsRunning(true);
};
const handleStop = () => {
setIsRunning(false);
};
return (
);
};
```
### Disabled
Disabled as a whole, e.g. while the assistant is unavailable.
```tsx
import { useState } from 'react';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
export const Disabled = () => {
const [value, setValue] = useState('Draft kept');
const handleSubmit = () => {
setValue('');
};
return (
);
};
```
### With context
Attached context sits in a blue bar behind the box; pass `context` only when there are chips.
```tsx
import { type MouseEvent, useState } from 'react';
import { Badge } from '@wallarm-org/design-system/Badge';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
import { Quote } from '@wallarm-org/design-system/icons';
import { TagClose } from '@wallarm-org/design-system/Tag';
export const WithContext = () => {
const [value, setValue] = useState('');
const [chips, setChips] = useState(['Attacks', 'Incidents']);
const handleContextRemove = (event: MouseEvent) => {
const chip = event.currentTarget.value;
setChips(prev => prev.filter(item => item !== chip));
};
const handleSubmit = () => {
setValue('');
};
return (
(
{chip}
))}
>
);
};
```
### With settings
`ChatPermissions` goes between the textarea and the submit, on the second row.
```tsx
import { useState } from 'react';
import { ChatInput, ChatInputSubmit, ChatInputTextarea } from '@wallarm-org/design-system/ChatInput';
import { ChatPermissions, ChatPermissionsContent, ChatPermissionsItem, type ChatPermissionsItemCheckedChangeDetails, ChatPermissionsTrigger } from '@wallarm-org/design-system/ChatPermissions';
export const WithSettings = () => {
const [value, setValue] = useState('');
const [allowed, setAllowed] = useState({ search_attacks: true, propose_add_to_denylist: true });
const handlePermissionChange = ({ checked, name }: ChatPermissionsItemCheckedChangeDetails) => {
setAllowed(prev => ({ ...prev, [name]: checked }));
};
const handleSubmit = () => {
setValue('');
};
return (