Prompt Bar – Code – React Native

Implementation
PromptBar Props

import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-rn";

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

  return (
    <PromptBar
      value={value}
      onChange={setValue}
      onSend={() => send(value)}
      placeholder="Ask anything…"
    />
  );
}

Common Examples

To use the PromptBar, pass controlled value and onChange. The Send button stays disabled until onSend is wired. Sending is allowed when the draft has trimmed text, unless you override canSend.

import { useState } from "react";
import { PromptBar } from "@servicetitan/anvil2-rn";

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

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

The editor grows until maxRows (default 8), then it scrolls.

Stop

While isSending is true, sending is withheld. Wire onStop to surface Stop instead of Send.

<PromptBar
  value={value}
  onChange={setValue}
  isSending
  onStop={() => cancel()}
/>

Voice

The kit does not record or transcribe. Wire onStartVoice to show a mic. Drive voiceState ("idle", "listening", "transcribing") from the host. Pass audioLevel (0–1) while listening and transcript while transcribing. Wire onAcceptVoice and onCancelVoice to show those listening-row controls.

<PromptBar
  value={value}
  onChange={setValue}
  onStartVoice={startMic}
  voiceState="listening"
  audioLevel={0.6}
  onAcceptVoice={accept}
  onCancelVoice={cancel}
/>

Attachments and the web waveform are not part of the React Native surface yet.

Disclaimer

Pass a plain-string disclaimer to show fine print under the bar. Omit it to hide the line. Rich-text and link support are not ported.

<PromptBar
  value={value}
  onChange={setValue}
  onSend={() => {}}
  disclaimer="AI responses may be inaccurate."
/>

Disabled

disabled disables the editor, send, and mic.Built-in action labels (sendLabel, stopLabel, startVoiceLabel, and the voice-row labels) default to English. Override them for localized copy.

Accessibility

placeholder is the editor’s accessible name.
While listening, listeningLabel is announced through a polite live region because the level meter is decorative.
While transcribing, transcribingLabel names the row until transcript arrives.
Send, Stop, mic, accept, and cancel use the corresponding label props as accessible names.

<PromptBar
  value={value}
  onChange={setValue}
  onSend={() => send(value)}
  placeholder="Ask anything…"
/>

`PromptBar` Props

The PromptBar accepts the following props. It does not forward remaining React Native View or TextInput props.

(value: string) => void

required

Fired on every edit with the next value.

string

required

Current draft text. Controlled.

string

default:"Accept voice input"

Accessible name for the listening-row accept control.

string

Opt-in telemetry id. When set under Anvil2RNTelemetryProvider, send emits a submit event with meta.length (character count only, never the draft text) before onSend.

number

Input level from 0 to 1 for the listening meter. Clamped. Only read while voiceState is "listening".

boolean

Override for whether sending is allowed. Defaults to a non-whitespace draft.

string

default:"Cancel voice input"

Accessible name for the listening-row cancel control.

boolean

Disables the editor and the send action.

string

Fine-print sentence below the bar. Omit to hide it.

boolean

Withholds sending while a response is in flight. Pair with onStop to surface Stop.

string

default:"Recording"

Polite live-region status while voiceState is "listening".

number

default:"8"

Rows the editor grows to before it starts scrolling.

() => void

Accepts the current voice capture. Surfaces the accept control in the listening row.

() => void

Discards the current voice capture. Surfaces the cancel control in the listening row.

() => void

Fired when Send fires. The Send button stays disabled until this is wired.

() => void

Fired when the mic action fires. Wiring it surfaces the mic. The host owns recording and speech-to-text.

() => void

Fired when Stop fires. Only surfaces while isSending is true.

string

Placeholder for the empty editor. Also the editor’s accessible name.

string

default:"Send"

Accessible name for the send action.

string

default:"Start voice input"

Accessible name for the mic button.

string

default:"Stop"

Accessible name for Stop while isSending is true.

string

Test hook forwarded to the root view.

string

default:"Transcribing…"

Fallback copy and accessible name while transcribing before transcript arrives.

string

Interim transcript while voiceState is "transcribing".

"idle" | "listening" | "transcribing"

default:"idle"

Voice-capture phase owned by the host.

​Common Examples

​Stop

​Voice

​Disclaimer

​Disabled

​Accessibility

​PromptBar Props

Common Examples

Stop

Voice

Disclaimer

Disabled

Accessibility

`PromptBar` Props