;
}
};
```tsx lines expandable theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function App() {
const [value, setValue] = useState("");
return (
);
}
export default App;
```
## 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.
```tsx theme={null}
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function ExampleComponent() {
const [value, setValue] = useState("");
return (
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.
```tsx lines expandable theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function App() {
const [value, setValue] = useState(
"What's the weather like in San Francisco today?",
);
return {}} />;
}
export default App;
```
```tsx lines expandable theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function App() {
const [value, setValue] = useState(
"Can you help me draft a detailed message to the customer explaining the delay in their service appointment, the reason for the delay, and what we're doing to make it right? Please keep the tone apologetic but professional.",
);
return {}} />;
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function App() {
const [value, setValue] = useState("");
const [attachments, setAttachments] = useState([
{ id: "1", name: "invoice.pdf" },
{ id: "2", name: "site-photo.jpg" },
]);
return (
{}}
onRemoveAttachment={(id) =>
setAttachments((current) =>
current.filter((attachment) => attachment.id !== id),
)
}
/>
);
}
export default App;
```
### Transcription
Wire `onStartTranscription` for the mic control. Set `transcription.active` to enter transcribing mode. Prefer a real `MediaStream` for the waveform:
```tsx theme={null}
```
Set `transcription.error` to replace the waveform with an error message. Confirm then dismisses the error and exits transcription.
```tsx lines expandable theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function App() {
const [value, setValue] = useState("");
const [draftValue, setDraftValue] = useState(
"What's the weather like in San Francisco today?",
);
return (
{/* Active transcription with a live waveform */}
{}}
onConfirmTranscription={() => {}}
/>
{/* Text in the prompt — no transcription active */}
{}}
/>
{/* Transcription error */}
{}}
onConfirmTranscription={() => {}}
/>
);
}
export default App;
```
### Disclaimer
Omit `disclaimer` for the default Atlas notice. Pass `{ message, linkHref }` to customize it, wrapping the linked span in `…`. Pass `null` to hide the line.
```tsx lines expandable theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function App() {
const [value, setValue] = useState("");
return (
);
}
export default App;
```
### Disabled
`disabled` disables the whole bar.
```tsx lines expandable theme={null}
import { PromptBar } from "@servicetitan/anvil2-ai-kit";
function App() {
return (
{}}
disabled
/>
);
}
export default App;
```
## 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.
```tsx theme={null}
```
## `PromptBar` Props
The `PromptBar` accepts the following props.
Fired on every edit with the next draft value.
Current draft text. Controlled.
Attachments shown in the expanding attachment row.
Override for whether sending is allowed. Defaults to whether the draft
has trimmed text or attachments.
Class merged onto the root element.
Disables the whole bar.
Disclaimer line. Omit for the default notice; pass `null` to hide it.
Whether a response is in flight. Withholds send and can surface Stop.
Fired when the add-attachment control is pressed.
Fired when transcription cancel is pressed.
Fired when transcription confirm is pressed.
Fired when an attachment's remove control is pressed.
Fired when the send action fires from the button or Enter.
Fired when the transcribe control is pressed.
Fired when Stop is pressed. Surfaces only while `isSending` is true.
Placeholder for the empty editor. Defaults to the localized "Ask
anything…".
Live transcription feed. `active` selects transcribing mode.
```tsx theme={null}
const attachment: PromptAttachment = {
id: "roof-photo",
name: "roof.jpg",
thumbnailUrl: "/previews/roof.jpg",
};
```
## `PromptAttachment`
Stable identity used for removal and React keys.
Display name used for alt text, the remove label, and the fallback tile.
Optional preview image. Omit to show the name in the tile.
