@app-studio/components

Chat

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

Import

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

New to the library? Complete installation and provider setup first.

Interactive examples

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

Loading preview…

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.

Scroll horizontally to see every column.

ChatInput
Prop	Type	Default	Description
`getPendingFiles`	`(() => File[])`	`—`	Get the pending filesSource
`clearPendingFiles`	`(() => void)`	`—`	Clear the pending filesSource
`onSubmit`	`((message: string, options?: { model_name?: string; enable_thinking?: boolean; }) => void)`	`—`	Callback function when the form is submittedSource
`placeholder`	`string`	`'Type your message… use @ to mention'`	Placeholder text for the inputSource
`loading`	`boolean`	`false`	Whether the input is in a loading stateSource
`disabled`	`boolean`	`false`	Whether the input is disabledSource
`isDisabled`	`boolean`	`—`	Whether the input is disabled (camelCase alias for `disabled`)Source
`lines`	`number`	`—`	Visible row count for the inputSource
`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 inputSource
`onKeyDown`	`((e: React.KeyboardEvent) => void)`	`—`	Optional key handler for the editable areaSource
`error`	`any`	`—`	Error state or value used by form wrappersSource
`isAgentRunning`	`boolean`	`false`	Whether an agent is currently runningSource
`isWorkerRunning`	`boolean`	`—`	Whether an agent is currently running (alias for `isAgentRunning`)Source
`onStopAgent`	`(() => void)`	`—`	Callback function to stop the agentSource
`onStopWorker`	`(() => void)`	`—`	Callback function to stop the worker (alias for `onStopAgent`)Source
`autoFocus`	`boolean`	`true`	Whether to auto focus the inputSource
`value`	`string`	`—`	Controlled value for the inputSource
`onChange`	`((value: string) => void)`	`—`	Callback function when the input value changesSource
`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
`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
`onFileBrowse`	`(() => void)`	`—`	Callback function when the file browser is openedSource
`sandboxId`	`string`	`—`	ID of the sandboxSource
`onUploadProgress`	`((progress: number) => void)`	`—`	Callback when file upload progress changesSource
`onUploadSuccess`	`((data: any) => void)`	`—`	Callback when file upload succeedsSource
`onUploadError`	`((error: any) => void)`	`—`	Callback when file upload failsSource
`onFileUpload`	`((file: File) => void)`	`—`	Function to execute file upload. Parent should provide this. Should return an object with a loading property.Source
`hideAttachments`	`boolean`	`false`	Whether to hide the attachment buttonSource
`enableAudioRecording`	`boolean`	`false`	Enable audio recording buttonSource
`onAudioRecordingStart`	`(() => void)`	`—`	Callback when audio recording startsSource
`onAudioRecordingStop`	`((audio: Blob) => void)`	`—`	Callback when audio recording stopsSource
`title`	`string`	`—`	Title for the chat inputSource
`showGuideTip`	`boolean`	`—`	Whether to show the guide tipSource
`guideVideoUrl`	`string`	`—`	URL for the guide videoSource
`onGuideClose`	`(() => void)`	`—`	Callback function when the guide tip is closedSource
`promptExamples`	`PromptExample[]`	`[]`	List of prompt examplesSource
`suggestions`	`Suggestion[]`	`[]`	List of suggestions for auto-completionSource
`onPromptExampleSelect`	`((example: PromptExample) => void)`	`—`	Callback function when a prompt example is selectedSource
`mentionData`	`{ id: string; name: string; avatar?: string; description?: string; }[]`	`[]`	Data for mention auto-completionSource
`mentionTrigger`	`string`	`'@'`	Trigger character for mentions (default: '@')Source
`onMentionSelect`	`((mention: { id: string; name: string; avatar?: string; description?: string; }) => void)`	`—`	Callback function when a mention is selectedSource
`errorMessage`	`string`	`—`	Error message to display at the bottomSource
`size`	`Size` `"sm""md""lg""xs""xl"`	`'md'`	Size of the inputSource
`shape`	`Shape` `"square""rounded""default"`	`'rounded'`	Shape of the inputSource
`variant`	`Variant` `"outline""default""none"`	`'default'`	Variant of the inputSource
`views`	`ChatInputStyles`	`{}`	Style customizationSource

Common inherited styling props (7)

Scroll horizontally to see every column.

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 and Responsive layouts. 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.
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 for platform requirements and differences.