PromptInput

Compose a message with attachments, models, and optional tools.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { useState } from 'react';
import { PromptInput } from '@vrum/ui';

export default function Demo() {
  const [value, setValue] = useState("");
  const [model, setModel] = useState("standard");

  return (
    <PromptInput
      value={value}
      placeholder={"Ask about your project…"}
      disabled={false}
      toolbar={"full"}
      submitOnEnter={true}
      showDraftWithAI={true}
      maxRows={8}
      models={[{"value":"standard","label":"Standard"},{"value":"advanced","label":"Advanced"}]}
      model={model}
      onChange={setValue}
      onModelChange={setModel}
      onSubmit={(message) => console.log(message)}
    />
  );
}

PromptInput props

Prop	Type	Default	Description
`value`	`string`	none	Controlled value; connect the callback to application state.
`defaultValue`	`string`	`""`	Initial value for an uncontrolled component.
`onChange`	`((value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void)`	none	Called when the input value changes.
`onSubmit`	`((value: string, event: React.FormEvent<HTMLFormElement> \| React.KeyboardEvent<HTMLTextAreaElement>) => void)`	none	Called when the form is submitted.
`submitOnEnter`	`boolean`	`true`	submit on enter configuration.
`textareaProps`	`React.TextareaHTMLAttributes<HTMLTextAreaElement>`	none	textarea props configuration.
`textareaRef`	`React.Ref<HTMLTextAreaElement>`	none	textarea ref configuration.
`autoFocus`	`boolean`	none	auto focus configuration.
`inputSlot`	`React.ReactNode`	none	input slot configuration.
`sendDisabled`	`boolean`	none	send disabled configuration.
`placeholder`	`string`	`"Ask anything…"`	Hint shown when no value is entered.
`disabled`	`boolean`	none	Disable user interaction.
`toolbar`	`"simple" \| "full"`	`"full"`	toolbar configuration.
`assistant`	`{ name: string; prefix?: string; onRemove?: () => void; }`	none	assistant configuration.
`showDraftWithAI`	`boolean`	`true`	show draft with a i configuration.
`onDraftWithAI`	`(() => void)`	none	on draft with a i configuration.
`onUpload`	`(() => void)`	none	on upload configuration.
`onFilesSelected`	`((files: File[]) => void)`	none	on files selected configuration.
`uploadAccept`	`string`	none	upload accept configuration.
`uploadMultiple`	`boolean`	`true`	upload multiple configuration.
`onWebSearch`	`(() => void)`	none	on web search configuration.
`onSuggestions`	`(() => void)`	none	on suggestions configuration.
`model`	`string`	none	model configuration.
`models`	`PromptModel[]`	none	models configuration.
`onModelChange`	`((value: string) => void)`	none	on model change configuration.
`actionsLeft`	`React.ReactNode`	none	actions left configuration.
`actionsRight`	`React.ReactNode`	none	actions right configuration.
`maxRows`	`number`	`8`	max rows configuration.
`labels`	`{ send?: string; upload?: string; webSearch?: string; draft?: string; }`	none	labels configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLFormElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLFormElement>`	none	on blur configuration.
`onKeyDown`	`KeyboardEventHandler<HTMLFormElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLFormElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLFormElement>`	none	on select configuration.

PromptInput

Compose a message with attachments, models, and optional tools.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { useState } from 'react';
import { PromptInput } from '@vrum/ui';

export default function Demo() {
  const [value, setValue] = useState("");
  const [model, setModel] = useState("standard");

  return (
    <PromptInput
      value={value}
      placeholder={"Ask about your project…"}
      disabled={false}
      toolbar={"full"}
      submitOnEnter={true}
      showDraftWithAI={true}
      maxRows={8}
      models={[{"value":"standard","label":"Standard"},{"value":"advanced","label":"Advanced"}]}
      model={model}
      onChange={setValue}
      onModelChange={setModel}
      onSubmit={(message) => console.log(message)}
    />
  );
}

PromptInput props

Prop	Type	Default	Description
`value`	`string`	none	Controlled value; connect the callback to application state.
`defaultValue`	`string`	`""`	Initial value for an uncontrolled component.
`onChange`	`((value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void)`	none	Called when the input value changes.
`onSubmit`	`((value: string, event: React.FormEvent<HTMLFormElement> \| React.KeyboardEvent<HTMLTextAreaElement>) => void)`	none	Called when the form is submitted.
`submitOnEnter`	`boolean`	`true`	submit on enter configuration.
`textareaProps`	`React.TextareaHTMLAttributes<HTMLTextAreaElement>`	none	textarea props configuration.
`textareaRef`	`React.Ref<HTMLTextAreaElement>`	none	textarea ref configuration.
`autoFocus`	`boolean`	none	auto focus configuration.
`inputSlot`	`React.ReactNode`	none	input slot configuration.
`sendDisabled`	`boolean`	none	send disabled configuration.
`placeholder`	`string`	`"Ask anything…"`	Hint shown when no value is entered.
`disabled`	`boolean`	none	Disable user interaction.
`toolbar`	`"simple" \| "full"`	`"full"`	toolbar configuration.
`assistant`	`{ name: string; prefix?: string; onRemove?: () => void; }`	none	assistant configuration.
`showDraftWithAI`	`boolean`	`true`	show draft with a i configuration.
`onDraftWithAI`	`(() => void)`	none	on draft with a i configuration.
`onUpload`	`(() => void)`	none	on upload configuration.
`onFilesSelected`	`((files: File[]) => void)`	none	on files selected configuration.
`uploadAccept`	`string`	none	upload accept configuration.
`uploadMultiple`	`boolean`	`true`	upload multiple configuration.
`onWebSearch`	`(() => void)`	none	on web search configuration.
`onSuggestions`	`(() => void)`	none	on suggestions configuration.
`model`	`string`	none	model configuration.
`models`	`PromptModel[]`	none	models configuration.
`onModelChange`	`((value: string) => void)`	none	on model change configuration.
`actionsLeft`	`React.ReactNode`	none	actions left configuration.
`actionsRight`	`React.ReactNode`	none	actions right configuration.
`maxRows`	`number`	`8`	max rows configuration.
`labels`	`{ send?: string; upload?: string; webSearch?: string; draft?: string; }`	none	labels configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLFormElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLFormElement>`	none	on blur configuration.
`onKeyDown`	`KeyboardEventHandler<HTMLFormElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLFormElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLFormElement>`	none	on select configuration.

PromptInput

Interactive playground

Props

PromptInput props

PromptInput

Interactive playground

Props

PromptInput props