Prompt Bar – Code

Implementation
PromptBar Props
PromptAttachment

Common Examples

To use the PromptBar, pass controlled value and onChange. Mode is derived from those inputs: idle when the draft is empty, draft when text or attachments are present, and transcribing when transcription.active is true.

import { PromptBar } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  const [value, setValue] = useState("");

  return (
    <PromptBar
      value={value}
      onChange={setValue}
      onSend={() => send(value)}
    />
  );
}

Draft and send

Enter sends when sending is allowed. Sending is allowed when the draft has trimmed text or attachments, unless you override canSend. While isSending is true, sending is withheld. Wire onStop to surface Stop instead of Send.

Attachments

Pass attachments and wire onAddAttachment and onRemoveAttachment. Each attachment needs a stable id and name. thumbnailUrl fills the tile; without it, the tile shows the name.

Transcription

Wire onStartTranscription for the mic control. Set transcription.active to enter transcribing mode. Prefer a real MediaStream for the waveform:

<PromptBar
  value={value}
  onChange={setValue}
  onStartTranscription={startMic}
  transcription={{
    active: true,
    source: { type: "stream", stream },
  }}
  onCancelTranscription={cancel}
  onConfirmTranscription={confirm}
/>

Set transcription.error to replace the waveform with an error message. Confirm then dismisses the error and exits transcription.

Disclaimer

Omit disclaimer for the default Atlas notice. Pass { message, linkHref } to customize it, wrapping the linked span in <link>…</link>. Pass null to hide the line.

Disabled

disabled disables the whole bar.

Internationalization

PromptBar owns these localized strings:

ai-kit.promptBar.placeholder
ai-kit.promptBar.add
ai-kit.promptBar.removeAttachment
ai-kit.promptBar.speak
ai-kit.promptBar.cancel
ai-kit.promptBar.send
ai-kit.promptBar.stop
ai-kit.promptBar.done
ai-kit.promptBar.dismiss
ai-kit.promptBar.disclaimer
ai-kit.promptBar.opensInNewTab

Override placeholder or disclaimer.message on the component, or mount AiKitIntlProvider inside CartoTheme. removeAttachment receives {name}. Disclaimer messages parse as ICU, so escape {, }, and ' if they are literal.

React Accessibility

Controls expose localized accessible names for add, remove, speak, send, stop, cancel, done, and dismiss.
Attachment remove labels include the attachment name.
Disclaimer links that open in a new tab include a localized announcement.

<PromptBar
  value={value}
  onChange={setValue}
  onSend={send}
  attachments={attachments}
  onAddAttachment={add}
  onRemoveAttachment={remove}
/>

`PromptBar` Props

The PromptBar accepts the following props.

(value: string) => void

required

Fired on every edit with the next draft value.

string

required

Current draft text. Controlled.

PromptAttachment[]

Attachments shown in the expanding attachment row.

boolean

Override for whether sending is allowed. Defaults to whether the draft has trimmed text or attachments.

string

Class merged onto the root element.

boolean

Disables the whole bar.

PromptBarDisclaimer | null

Disclaimer line. Omit for the default notice; pass null to hide it.

boolean

Whether a response is in flight. Withholds send and can surface Stop.

() => void

Fired when the add-attachment control is pressed.

() => void

Fired when transcription cancel is pressed.

() => void

Fired when transcription confirm is pressed.

(id: string) => void

Fired when an attachment’s remove control is pressed.

() => void

Fired when the send action fires from the button or Enter.

() => void

Fired when the transcribe control is pressed.

() => void

Fired when Stop is pressed. Surfaces only while isSending is true.

string

Placeholder for the empty editor. Defaults to the localized “Ask anything…”.

PromptBarTranscription

Live transcription feed. active selects transcribing mode.

const attachment: PromptAttachment = {
  id: "roof-photo",
  name: "roof.jpg",
  thumbnailUrl: "/previews/roof.jpg",
};

`PromptAttachment`

string

required

Stable identity used for removal and React keys.

string

required

Display name used for alt text, the remove label, and the fallback tile.

string

Optional preview image. Omit to show the name in the tile.

AI Kit

Agent Experience

Prompt Bar – Code

Common Examples

Draft and send

Attachments

Transcription

Disclaimer

Disabled

Internationalization

React Accessibility

`PromptBar` Props

`PromptAttachment`

​Common Examples

​Draft and send

​Attachments

​Transcription

​Disclaimer

​Disabled

​Internationalization

​React Accessibility

​PromptBar Props

​PromptAttachment

Common Examples

Draft and send

Attachments

Transcription

Disclaimer

Disabled

Internationalization

React Accessibility

`PromptBar` Props

`PromptAttachment`