Open in

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ā	--	Publicējamā API atslēga (`pk_live_...`) no informācijas paneļa sadaļas Tīmekļa logrīki. 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 pievieno klasi `tp--light` vai `tp--dark`.
`primaryColor`	`string`	Nē	`'#000000'` (gaišs) / `'#ffffff'` (tumšs)	CSS krāsas virkne, kas tiek izmantota kā akcenta krāsa (zvana poga, viļņu forma, aktīvie indikatori).
`title`	`string`	Nē	`'Voice assistant'`	Logrīka joslā parādāmais teksts.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nē	`'bottom-right'`	Logrīka fiksētā pozīcija skatlaukā.
`apiBase`	`string`	Nē	`'https://api.thunderphone.com/v1'`	API bāzes URL pārrakstīšana.
`language`	`string`	Nē	--	Valodas pārrakstīšana katrai sesijai — valodas kods vai lokalizācija, piemēram, `en`, `es` vai `fr-FR`. Ja nav iestatīta, tiek izmantota balss aģenta konfigurētā valoda. Nepieciešams `language` atslēgas pārlūkprogrammas pārrakstīšanas iestatījumos.
`voice`	`string`	Nē	--	Balss pārrakstīšana katrai sesijai — balss nosaukums, piemēram, `maria`. Ja nav iestatīta, tiek izmantota balss aģenta konfigurētā balss. Nepieciešams `voice` atslēgas pārlūkprogrammas pārrakstīšanas iestatījumos.
`context`	`string`	Nē	--	Balss aģentam nodotais faktiskais lapas vai vietnes konteksts katrai sesijai (piemēram, informācija par lapu, kuru apmeklētājs pašlaik skatās). Servera pusē tiek saīsināts līdz 12 000 rakstzīmēm. Nepieciešams `context` atslēgas pārlūkprogrammas pārrakstīšanas iestatījumos.
`onConnect`	`() => void`	Nē	--	Tiek izsaukts, kad balss sesija ir sekmī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 pievienots logrīka konteineram.
`ringtone`	`boolean \| string`	Nē	`false`	Savienojuma izveides laikā atskaņo zvana signālu. Noklusējuma zvana signālam izmantojiet `true`, bet pielāgotam audio — URL virkni.

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

language, voice un context rekvizīti tiek pārsūtīti uz sesijas pieprasījumu (POST /widget/session), kad sākas zvans, ignorējot šīs sesijas aģenta konfigurētos noklusējumus. Informācijas panelī attiecīgajam logrīkam (vai atslēgas allowed_overrides) sadaļā Pārlūka ignorēšanas ieslēdziet katru izmantoto rekvizītu. Jauni logrīki nepieņem nevienu rekvizītu, un sesijas pieprasījums ar izslēgtu rekvizītu neizdodas ar 400 override_not_allowed; skatiet Pārlūka ignorēšanas.

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, cenas vai lapai specifiskus bieži uzdotos jautājumus. Balss aģents to uztver kā lapas saturu, nevis kā norādījumus. 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.