Source: https://app-studio-6167b.web.app/docs/ChatInput

@app-studio/components

# Chat

A chat composer with file attachments, prompt examples, `@` mentions, suggestions, audio recording and agent controls.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput.tsx)

## Import

```ts
import { ChatInput } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { ChatInput } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function ChatExample() {
  const [message, setMessage] = useState('');
  return (
    <Vertical gap={16} width="100%">
      <ChatInput
        placeholder="Write a local message…"
        onSubmit={(value) => setMessage(value)}
      />
      <Text role="status">
        {message ? `Submitted: ${message}` : 'Messages stay in this example.'}
      </Text>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**ChatInput**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `getPendingFiles` | `(() => File[])` | `—` | Get the pending files[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L66) |
| `clearPendingFiles` | `(() => void)` | `—` | Clear the pending files[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L71) |
| `onSubmit` | `((message: string, options?: { model_name?: string; enable_thinking?: boolean; }) => void)` | `—` | Callback function when the form is submitted[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L75) |
| `placeholder` | `string` | `'Type your message… use @ to mention'` | Placeholder text for the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L83) |
| `loading` | `boolean` | `false` | Whether the input is in a loading state[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L88) |
| `disabled` | `boolean` | `false` | Whether the input is disabled[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L93) |
| `isDisabled` | `boolean` | `—` | Whether the input is disabled (camelCase alias for `disabled`)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L98) |
| `lines` | `number` | `—` | Visible row count for the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L103) |
| `rightElement` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Optional right-side affordance rendered inside the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L108) |
| `onKeyDown` | `((e: React.KeyboardEvent) => void)` | `—` | Optional key handler for the editable area[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L113) |
| `error` | `any` | `—` | Error state or value used by form wrappers[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L118) |
| `isAgentRunning` | `boolean` | `false` | Whether an agent is currently running[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L123) |
| `isWorkerRunning` | `boolean` | `—` | Whether an agent is currently running (alias for `isAgentRunning`)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L128) |
| `onStopAgent` | `(() => void)` | `—` | Callback function to stop the agent[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L133) |
| `onStopWorker` | `(() => void)` | `—` | Callback function to stop the worker (alias for `onStopAgent`)[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L138) |
| `autoFocus` | `boolean` | `true` | Whether to auto focus the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L143) |
| `value` | `string` | `—` | Controlled value for the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L148) |
| `onChange` | `((value: string) => void)` | `—` | Callback function when the input value changes[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L153) |
| `name` | `string` | `—` | Form field name for the value. Applied to the hidden mirror `<textarea>`, so the message is submitted with a surrounding native `<form>` and is addressable via `[name="…"]`.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L159) |
| `hiddenInput` | `boolean` | `true` | Whether to render the hidden `<textarea>` that mirrors the editable area's text (default `true`). It makes `element.value` work for generic tooling; set to `false` only if the extra node is a problem.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L165) |
| `onFileBrowse` | `(() => void)` | `—` | Callback function when the file browser is opened[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L170) |
| `sandboxId` | `string` | `—` | ID of the sandbox[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L175) |
| `onUploadProgress` | `((progress: number) => void)` | `—` | Callback when file upload progress changes[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L180) |
| `onUploadSuccess` | `((data: any) => void)` | `—` | Callback when file upload succeeds[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L185) |
| `onUploadError` | `((error: any) => void)` | `—` | Callback when file upload fails[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L190) |
| `onFileUpload` | `((file: File) => void)` | `—` | Function to execute file upload. Parent should provide this. Should return an object with a loading property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L196) |
| `hideAttachments` | `boolean` | `false` | Whether to hide the attachment button[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L201) |
| `enableAudioRecording` | `boolean` | `false` | Enable audio recording button[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L206) |
| `onAudioRecordingStart` | `(() => void)` | `—` | Callback when audio recording starts[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L211) |
| `onAudioRecordingStop` | `((audio: Blob) => void)` | `—` | Callback when audio recording stops[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L216) |
| `title` | `string` | `—` | Title for the chat input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L221) |
| `showGuideTip` | `boolean` | `—` | Whether to show the guide tip[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L226) |
| `guideVideoUrl` | `string` | `—` | URL for the guide video[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L231) |
| `onGuideClose` | `(() => void)` | `—` | Callback function when the guide tip is closed[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L236) |
| `promptExamples` | `PromptExample[]` | `[]` | List of prompt examples[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L241) |
| `suggestions` | `Suggestion[]` | `[]` | List of suggestions for auto-completion[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L246) |
| `onPromptExampleSelect` | `((example: PromptExample) => void)` | `—` | Callback function when a prompt example is selected[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L251) |
| `mentionData` | `{ id: string; name: string; avatar?: string; description?: string; }[]` | `[]` | Data for mention auto-completion[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L256) |
| `mentionTrigger` | `string` | `'@'` | Trigger character for mentions (default: '@')[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L266) |
| `onMentionSelect` | `((mention: { id: string; name: string; avatar?: string; description?: string; }) => void)` | `—` | Callback function when a mention is selected[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L271) |
| `errorMessage` | `string` | `—` | Error message to display at the bottom[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L281) |
| `size` | `Size` `"sm"``"md"``"lg"``"xs"``"xl"` | `'md'` | Size of the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L286) |
| `shape` | `Shape` `"square"``"rounded"``"default"` | `'rounded'` | Shape of the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L291) |
| `variant` | `Variant` `"outline"``"default"``"none"` | `'default'` | Variant of the input[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L296) |
| `views` | `ChatInputStyles` | `{}` | Style customization[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/ChatInput/ChatInput/ChatInput.props.ts#L301) |

Common inherited styling props (7)

**ChatInput inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.