: single;
};
```tsx lines theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/carto-react-kit";
function App() {
const [value, setValue] = useState("");
return (
);
}
export default App;
```
## Options
PromptBar is controlled — the parent owns `value`, `attachments`, and the `transcription` feed — and derives its mode from them. It supports an attachment row, a voice-transcription entry point, and a customizable disclaimer line.
### With Text
```tsx lines theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/carto-react-kit";
function App() {
const [value, setValue] = useState(
"What's the weather like in San Francisco today?",
);
return {}} />;
}
export default App;
```
Once there's text, the editor rises to its own row above the controls, and the primary action switches from disabled to send.
### Attachments
```tsx lines theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/carto-react-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;
```
Attachments render as thumbnail tiles in a row above the editor; adding one expands the row and reflows the bar. A tile without a `thumbnailUrl` falls back to showing the file name.
### Transcribing
```tsx lines theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/carto-react-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;
```
`transcription.active` switches the bar into a distinct mode: the attach and mic controls are replaced by a Cancel button, an animated waveform, and a Done primary action. Prefer wiring real audio into `transcription.source` (a `MediaStream`, an `AnalyserNode`, or a computed amplitude); fall back to a named preset (`ambient` / `speaking` / `thinking`) only when none is available. Setting `transcription.error` instead swaps in an error layout — an error icon, the message, and Done dismisses the error and exits.
### Disclaimer
```tsx lines theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/carto-react-kit";
function App() {
const [value, setValue] = useState("");
return (
);
}
export default App;
```
A disclaimer line sits below the bar, with a "Learn more" link out to more information.
### Disabled
```tsx lines theme={null}
import { PromptBar } from "@servicetitan/carto-react-kit";
function App() {
return (
{}}
disabled
/>
);
}
export default App;
```
`disabled` dims the whole bar and blocks the editor, attachments, and every action.
## Behavior
The editor grows with its content, and the bar reflows as attachments and text come and go.
### Text Wrapping
```tsx lines theme={null}
import { useState } from "react";
import { PromptBar } from "@servicetitan/carto-react-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;
```
Once there's text, the editor lifts to its own row above the controls and wraps across multiple lines, growing up to 8 rows before it scrolls internally — it never truncates or clips.
## Keyboard Interaction
Users can compose, send, and control transcription using standard keyboard controls.
| Key | Description |
| -------------------------- | --------------------------------------------------------------------------- |
| Enter | Sends the draft (draft mode) or confirms the transcript (transcribing mode) |
| Shift / Ctrl / Cmd + Enter | Inserts a newline in the editor instead of sending |
| Escape | Cancels transcription and returns to the editor |
| Tab | Moves focus among the attach, editor, mic, and primary controls |
