# PromptBox Tools

The PromptBox provides several built-in tools that enhance functionality and user experience.

These tools include the **Action** button for submitting prompts, the **File Select** button for attaching files, and the **Speech-to-Text** button for voice input. If you need additional tools, refer to the [PromptBox Adornments](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/promptbox/adornments) article.

## Action Button

The **Action** button submits the prompt. Customize its [appearance](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/promptbox/appearance) and behavior by setting the [`actionButton`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptboxcomponent#actionbutton) property to an [`ActionButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/actionbuttonsettings) object.

The button supports a loading state for better user feedback during prompt submission and icon customizations for each state.

The following example demonstrates how to configure the Action Button in the PromptBox.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/promptbox/tools/action-button/source.txt)

## Speech-to-Text Button

The **Speech-to-Text** button enables you to input prompts with voice commands. Customize its [appearance](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/promptbox/appearance) and behavior by setting the [`speechToTextButton`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptboxcomponent#speechtotextbutton) property to `true` or [`SpeechToTextButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/speechtotextbuttonsettings) object. The button provides visual feedback during the speech recognition process.

The following example demonstrates how to configure the Speech-to-Text Button in the PromptBox.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/promptbox/tools/speech-to-text-button/source.txt)

## File Select Button

The **File Select** button allows you to attach files to prompts. You can customize its [appearance](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/promptbox/appearance), behavior, and file restrictions by setting the [`fileSelectButton`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptboxcomponent#fileselectbutton) property to a [`FileSelectButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings) object.

To enable file attachments in the PromptBox, set the [`fileSelectButton`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptboxcomponent#fileselectbutton) property to `true` or use [`FileSelectButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings) for further customization.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/promptbox/tools/fileselect-button/source.txt)

### Attaching Multiple Files

To allow users to attach multiple files, set the [`multiple`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings#multiple) property of the [`FileSelectButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings) to `true`.

```html
<kendo-promptbox
    [fileSelectButton]="{ multiple: true }"
></kendo-promptbox>
```

### File Size Restrictions

To restrict the minimum and maximum file size for attachments, set the [`restrictions`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings#restrictions) property of the [`FileSelectButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings) to an object containing the `minFileSize` and `maxFileSize` properties.

```html
<kendo-promptbox
    [fileSelectButton]="{ restrictions: { maxFileSize: 1048576, minFileSize: 1024 } }"
></kendo-promptbox>
```

### File Type Restrictions

To restrict the allowed file types for attachments, set the [`restrictions`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings#restrictions) property of the [`FileSelectButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings) to an object containing the `allowedExtensions` property.

Additionally, set the [`accept`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings#accept) property to enable the allowed file types in the file selection dialog.

This property accepts an array of strings representing the allowed file types or extensions.

```html
<kendo-promptbox
    [fileSelectButton]="{
        accept: '.png,.jpg,.jpeg',
        restrictions: { allowedExtensions: ['.png', '.jpg', '.jpeg'] }
    }"
></kendo-promptbox>
```

## Suggested Links

* [Reordering Built-in Controls](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/promptbox/adornments#reordering-built-in-controls)
* [PromptBox Adornments](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/promptbox/adornments)
* [API Reference of the PromptBox](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptboxcomponent)
* [API Reference of FileSelectButtonSettings](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/fileselectbuttonsettings)