React komponents

Ieguliet ThunderPhone balss logrīku React lietotnē

Komponents ThunderPhoneWidget atveido stiklam līdzīgu zvana joslu ar iebūvētām vadīklām skaņas izslēgšanai, zvana beigšanai un savienojuma statusa attēlošanai. Tas ir ātrākais veids, kā React lietotnei pievienot balss AI.

Instalēšana

npm install @thunderphone/widget

Pamatlietošana

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
    />
  )
}

Rekvizīti

Komponents pieņem šādus rekvizītus, izmantojot ThunderPhoneWidgetProps:

Rekvizīts	Tips	Obligāts	Noklusējums	Apraksts
`publishableKey`	`string`	Jā	--	Publiskā API atslēga (`pk_live_...`) no Izstrādātāju iestatījumiem. Balss aģents tiek automātiski noteikts pēc atslēgas logrīka konfigurācijas.
`theme`	`'light' \| 'dark'`	Nē	`'light'`	Krāsu shēma. Logrīka saknes elementam piešķir klasi `tp--light` vai `tp--dark`.
`primaryColor`	`string`	Nē	`'#000000'` (gaiša) / `'#ffffff'` (tumša)	CSS krāsas virkne, ko izmanto kā akcenta krāsu (zvana poga, viļņforma, aktīvie indikatori).
`title`	`string`	Nē	`'Voice assistant'`	Logrīka joslā attēlotais teksts.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nē	`'bottom-right'`	Logrīka fiksētā pozīcija skatvietā.
`apiBase`	`string`	Nē	`'https://api.thunderphone.com/v1'`	API bāzes URL pārrakstīšana.
`language`	`string`	Nē	--	Sesijas valodas pārrakstīšana — valodas kods vai lokalizācija, piemēram, `en`, `es` vai `fr-FR`. Ja nav iestatīts, tiek izmantota balss aģenta konfigurētā valoda.
`voice`	`string`	Nē	--	Sesijas balss pārrakstīšana — balss nosaukums, piemēram, `maria`. Ja nav iestatīts, tiek izmantota balss aģenta konfigurētā balss.
`context`	`string`	Nē	--	Sesijai specifisks faktiskais lapas vai vietnes konteksts, kas tiek nodots balss aģentam (piemēram, informācija par lapu, ko apmeklētājs skata). Servera pusē tiek saīsināts līdz 12 000 rakstzīmēm.
`onConnect`	`() => void`	Nē	--	Tiek izsaukts, kad balss sesija ir veiksmīgi savienota.
`onDisconnect`	`() => void`	Nē	--	Tiek izsaukts, kad sesija beidzas.
`onError`	`(error) => void`	Nē	--	Tiek izsaukts kļūdu gadījumā. Objektam `error` ir lauki `error` (kods) un `message`.
`className`	`string`	Nē	--	Papildu CSS klases nosaukums, kas tiek piešķirts logrīka konteineram.
`ringtone`	`boolean \| string`	Nē	`false`	Savienojuma veidošanas laikā atskaņot zvana signālu. `true` noklusējuma zvana signālam vai URL virkne pielāgotam audio.

Piemēri

Tumšais motīvs ar pielāgotu krāsu

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
      title="Talk to our AI"
    />
  )
}

Pielāgota pozīcija

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      position="bottom-left"
    />
  )
}

Valoda, balss un konteksts katrai sesijai

Rekvizīti language, voice un context tiek pārsūtīti uz sesijas pieprasījumu (POST /widget/session), kad sākas zvans, un šai sesijai ignorē balss aģenta konfigurētos noklusējumus:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function PricingPageWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      language="es"
      voice="maria"
      context="Page: Pricing. Plans: Starter $29/mo, Pro $99/mo. Annual billing saves 20%."
    />
  )
}

Izmantojiet context, lai sniegtu balss aģentam faktisku informāciju par lapu, kurā atrodas apmeklētājs — informāciju par produktu, cenām vai konkrētās lapas bieži uzdotiem jautājumiem. Servera pusē tas tiek saīsināts līdz 12 000 rakstzīmēm.

Ar notikumu atzvaniem

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function SupportWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      onConnect={() => {
        console.log('Voice session connected')
        analytics.track('widget_call_started')
      }}
      onDisconnect={() => {
        console.log('Voice session ended')
        analytics.track('widget_call_ended')
      }}
      onError={(error) => {
        console.error(`Widget error: ${error.error} - ${error.message}`)
      }}
    />
  )
}

Ar pielāgotu stilu

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function BrandedWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      primaryColor="#4a90d9"
      className="my-custom-widget"
    />
  )
}

.my-custom-widget .tp-button--end {
  background-color: #e74c3c;
}

Skatiet stila ceļvedi, lai uzzinātu par visām pieejamajām CSS klasēm un pielāgotajiem rekvizītiem.

Ar zvana signālu

Savienojuma izveides laikā atskaņojiet tālruņa zvana skaņu:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}

Izmantojiet pielāgotu zvana signālu, nododot audio faila URL:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  ringtone="https://example.com/my-ringtone.mp3"
/>

Zvana signāls tiek atkārtots, kamēr logrīks ir stāvoklī connecting, un vienmērīgi apklust, kad pievienojas balss aģents.

Ar pielāgotu API bāzi

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  apiBase="https://your-proxy.example.com/v1"
/>

Kļūdu apstrāde

Kad tiek izsaukts onError atzvans, tas saņem kļūdas objektu ar diviem laukiem:

Lauks	Tips	Apraksts
`error`	`string`	Mašīnlasāms kļūdas kods
`message`	`string`	Cilvēkam lasāms kļūdas apraksts

Biežākie kļūdu kodi ietver neatļautu domēnu, neatrastu balss aģentu un nederīgu API atslēgu.

Nākamās darbības

Headless Hook

Vai nepieciešama pilnīga saskarnes kontrole? Tā vietā izmantojiet useThunderPhone āķi.

Stilizēšana

Pielāgojiet krāsas, izmērus un izkārtojumu, izmantojot CSS pielāgotās īpašības.