# 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 **Upload** 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-vue-ui-develop/components/conversationalui/promptbox/adornments) article.

## Action Button

The **Action** button submits the prompt. Customize its [appearance](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/promptbox/appearance) and behavior by setting the [`actionButtonConfig`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#actionbuttonconfig) property to an [`PromptBoxActionButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxactionbuttonprops) 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-vue-ui/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-vue-ui-develop/components/conversationalui/promptbox/appearance) and behavior by setting the [`speechToTextButtonConfig`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#speechtotextbuttonconfig) property to `true` or [`PromptBoxSpeechToTextButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxspeechtotextbuttonprops) 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-vue-ui/conversational-ui/promptbox/tools/speech-to-text-button/source.txt)

## Upload Button

The **Upload** button allows you to attach files to prompts. You can customize its [appearance](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/promptbox/appearance), behavior, and file restrictions by setting the [`uploadButtonConfig`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#uploadbuttonconfig) property to a [`PromptBoxUploadButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxuploadbuttonprops) object.

To enable file attachments in the PromptBox, set the [`uploadButtonConfig`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops#uploadbuttonconfig) property to `true` or use [`PromptBoxUploadButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxuploadbuttonprops) for further customization.

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

### Attaching Multiple Files

To allow users to attach multiple files, set the [`multiple`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxuploadbuttonprops#multiple) property of the [`PromptBoxUploadButton`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxuploadbuttonprops) to `true`.

```html
<PromptBox :upload-button-config="{ multiple: true }" />
```

### File Size Restrictions

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

```html
<PromptBox :upload-button-config="{ restrictions: { minFileSize: 1024, maxFileSize: 1048576 } }" />
```

### File Type Restrictions

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

Additionally, set the [`accept`](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxuploadbuttonprops#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
<PromptBox
    :upload-button-config="{
        accept: '.png,.jpg,.jpeg',
        restrictions: { allowedExtensions: ['.png', '.jpg', '.jpeg'] }
    }"
/>
```

## Suggested Links

* [Reordering Built-in Controls](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/promptbox/adornments#reordering-built-in-controls)
* [PromptBox Adornments](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/promptbox/adornments)
* [API Reference of the PromptBox](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxprops)
* [API Reference of PromptBoxUploadButton](https://www.telerik.com/kendo-vue-ui-develop/components/conversationalui/api/promptboxuploadbuttonprops)