New to KendoReact? Start a free 30-day trial

PromptBoxProps

Interface

Represents the props of the PromptBox component.

Definition

Package:@progress/kendo-react-conversational-ui

Sets the attachments for controlled file management. When provided, the component operates in controlled mode and the developer must manage attachments via onSelectAttachments and onRemoveAttachment. When not provided, the component manages attachments internally (uncontrolled mode).

defaultValue?

string

The default value of the PromptBox (uncontrolled mode).

Example:

tsx

<PromptBox defaultValue="Type your message..." />

disabled?

boolean

Sets the disabled state of the PromptBox component.

Default:

false

Example:

tsx

<PromptBox disabled={true} />

endAffix?

ReactNode | (props: AffixTemplateProps) => ReactNode

Custom content rendered at the end of the input element. In 'multi' and 'auto' with more than one row, it is rendered at the bottom right of the textarea. Custom content appears BEFORE built-in buttons.

Example:

tsx

<PromptBox
  uploadButtonConfig={false}
  speechToTextButtonConfig={false}
  actionButtonConfig={false}
  endAffix={(props) => (
    <>
      <PromptBoxActionButton {...props.actionButtonProps} />
      <PromptBoxUploadButton {...props.uploadButtonProps} />
      <PromptBoxSpeechToTextButton {...props.speechToTextButtonProps} />
    </>
  )}
/>

fillMode?

"solid" | "outline" | "flat"

Configures the fillMode of the PromptBox.

The available options are:

solid
outline
flat

Default:

undefined (theme-controlled)

Example:

tsx

<PromptBox fillMode="outline" />

inputAttributes?

InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>

Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.

Example:

tsx

<PromptBox inputAttributes={{ 'aria-label': 'Prompt input' }} />

loading?

boolean

Specifies whether the Send button is transformed to a stop generation button.

Default:

false

Example:

tsx

<PromptBox loading={true} />

maxLength?

number

Sets the maximum number of characters allowed in the text input element.

Example:

tsx

<PromptBox maxLength={500} />

maxTextAreaHeight?

string

Sets the maximum height of the native textarea in px. When the text height exceeds this value, a scrollbar appears. Applicable for multi and auto modes.

Example:

tsx

<PromptBox mode="auto" maxTextAreaHeight="300" />

mode?

PromptBoxMode

Sets the line mode for the PromptBox component.

The available options are:

single - Sets one line for the text input
multi - Multi-line textarea
auto - Transforms the PromptBox from single to multi line mode based on content

Default:

'auto'

Example:

tsx

<PromptBox mode="multi" />

onBlur?

(event: PromptBoxBlurEvent) => void

The event handler that will be fired when the PromptBox is blurred.

Parameters:eventPromptBoxBlurEvent

Example:

tsx

<PromptBox onBlur={(event) => console.log('Blurred')} />

onChange?

(event: PromptBoxChangeEvent) => void

The event handler that will be fired when the value changes.

Parameters:eventPromptBoxChangeEvent

Example:

tsx

<PromptBox onChange={(event) => console.log(event.value)} />

onFocus?

(event: PromptBoxFocusEvent) => void

The event handler that will be fired when the PromptBox is focused.

Parameters:eventPromptBoxFocusEvent

Example:

tsx

<PromptBox onFocus={(event) => console.log('Focused')} />

onPromptAction?

(event: PromptBoxPromptActionEvent) => void

Fires when the user clicks the Action button. The event provides the current value and attachments, allowing simple uncontrolled usage.

Parameters:eventPromptBoxPromptActionEvent

Example:

tsx

// Uncontrolled - access value and attachments from event
<PromptBox
  onPromptAction={(e) => {
    console.log('Message:', e.value);
    console.log('Attachments:', e.attachments);
    sendMessage(e.value, e.attachments);
  }}
/>

// Controlled - use your own state
<PromptBox
  value={value}
  attachments={attachments}
  onPromptAction={(e) => {
    sendMessage(value, attachments);
  }}
/>

placeholder?

string

The hint, which is displayed when the text input element is empty.

Default:

Example:

tsx

<PromptBox placeholder="Type your message here..." />

readOnly?

boolean

Sets the read-only state of the PromptBox component.

Default:

false

Example:

tsx

<PromptBox readOnly={true} />

rows?

number

Sets the visible height of the internal textarea in lines. Only applicable when mode is 'multi'. This sets the minimum number of rows.

Default:

Example:

tsx

<PromptBox mode="multi" rows={5} />

speechToTextButtonConfig?

boolean | SpeechToTextButtonProps

Sets the SpeechToText button visibility and/or settings.

Default:

true

Example:

tsx

<PromptBox speechToTextButtonConfig={true} />

startAffix?

ReactNode | (props: AffixTemplateProps) => ReactNode

Custom content rendered at the start of the input element in single line mode. In 'multi' and 'auto' with more than one row, it is rendered at the bottom left of the textarea.

Example:

tsx

<PromptBox startAffix={(props) => <Button icon="custom" />} />

title?

string

Sets the title attribute of the internal text input element of the component.

Default:

Example:

tsx

<PromptBox title="Enter your prompt" />

topAffix?

ReactNode | (props: AffixTemplateProps) => ReactNode

Custom content rendered at the top of the PromptBox. Only rendered when mode is 'multi' or when 'auto' mode has more than 1 row.

Example:

tsx

<PromptBox topAffix={(props) => <div>Custom content</div>} />

uploadButtonConfig?

boolean | UploadButtonProps

Sets the File Attachments button visibility and/or settings.

Default:

false

Example:

tsx

<PromptBox
  attachments={attachments}
  uploadButtonConfig={false}
  startAffix={(props) => (
    <PromptBoxUploadButton
      {...props.uploadButtonProps}
      onSelectAttachments={(e) => setAttachments(e.allFiles)}
      onRemoveAttachment={(fileName) => setAttachments(prev => prev.filter(f => f.name !== fileName))}
    />
  )}
/>

value?

string

Sets the value for the internal input/textarea of the PromptBox.

Default:

Example:

tsx

<PromptBox value="Hello, how can I help you?" />

PromptBoxProps

Definition

Properties

actionButtonConfig?

attachments?

defaultValue?

disabled?

endAffix?

fillMode?

inputAttributes?

loading?

maxLength?

maxTextAreaHeight?

mode?

onBlur?

onChange?

onFocus?

onPromptAction?

placeholder?

readOnly?

rows?

speechToTextButtonConfig?

startAffix?

title?

topAffix?

uploadButtonConfig?

value?