Reacti komponent

Komponent ThunderPhoneWidget renderdab klaasmorfse kõneriba sisseehitatud juhtelementidega vaigistamiseks, kõne lõpetamiseks ja ühenduse oleku kuvamiseks. See on kiireim viis hääle-AI lisamiseks Reacti rakendusse.

Paigaldamine

npm install @thunderphone/widget

Põhikasutus

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
    />
  )
}

Atribuudid

Komponent aktsepteerib ThunderPhoneWidgetProps kaudu järgmisi atribuute:

Atribuut	Tüüp	Kohustuslik	Vaikeväärtus	Kirjeldus
`publishableKey`	`string`	Jah	--	Avalik API-võti (`pk_live_...`) arendajate seadistustest. Häälagent tuvastatakse võtme vidina konfiguratsiooni põhjal automaatselt.
`theme`	`'light' \| 'dark'`	Ei	`'light'`	Värviskeem. Rakendab vidina juurelemendile klassi `tp--light` või `tp--dark`.
`primaryColor`	`string`	Ei	`'#000000'` (hele) / `'#ffffff'` (tume)	CSS-i värvistring, mida kasutatakse aktsentvärvina (helistamisnupp, lainekuju, aktiivsed indikaatorid).
`title`	`string`	Ei	`'Voice assistant'`	Vidinaribal kuvatav tekst.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Ei	`'bottom-right'`	Vidina fikseeritud asukoht vaatealas.
`apiBase`	`string`	Ei	`'https://api.thunderphone.com/v1'`	API baas-URL-i ülekirjutus.
`language`	`string`	Ei	--	Seansipõhine keele ülekirjutus -- keelekood või lokaat, näiteks `en`, `es` või `fr-FR`. Kui seda pole määratud, kasutatakse häälagendi seadistatud keelt.
`voice`	`string`	Ei	--	Seansipõhine hääle ülekirjutus -- hääle nimi, näiteks `maria`. Kui seda pole määratud, kasutatakse häälagendi seadistatud häält.
`context`	`string`	Ei	--	Seansipõhine faktiline lehe- või saidikontekst, mis edastatakse häälagendile (näiteks külastaja vaadatava lehe üksikasjad). Serveri poolel kärbitakse 12 000 märgini.
`onConnect`	`() => void`	Ei	--	Kutsutakse välja, kui häälseanss ühendub edukalt.
`onDisconnect`	`() => void`	Ei	--	Kutsutakse välja, kui seanss lõpeb.
`onError`	`(error) => void`	Ei	--	Kutsutakse välja vigade korral. Objektil `error` on väljad `error` (kood) ja `message`.
`className`	`string`	Ei	--	Vidina konteinerile rakendatav täiendav CSS-klassi nimi.
`ringtone`	`boolean \| string`	Ei	`false`	Esita ühendamisel helinat. Vaikehelina jaoks `true` või kohandatud heli jaoks URL-string.

Näited

Tume teema kohandatud värviga

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"
    />
  )
}

Kohandatud asukoht

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      position="bottom-left"
    />
  )
}

Seansipõhine keel, hääl ja kontekst

language, voice ja context propid edastatakse kõne alustamisel seansitaotlusele (POST /widget/session), alistades selle seansi jaoks agendi seadistatud vaikeväärtused:

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%."
    />
  )
}

Kasuta context-i, et anda agendile faktilisi teadmisi lehe kohta, mida külastaja vaatab -- tooteteave, hinnad või lehepõhised KKK-d. Serveris kärbitakse see 12 000 tähemärgini.

Sündmuste tagasihelistamistega

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}`)
      }}
    />
  )
}

Kohandatud stiiliga

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;
}

Kõigi saadaolevate CSS-klasside ja kohandatud omaduste kohta vaata stiilimise juhendit.

Helinaga

Esita ühenduse loomise ajal telefoni helinat:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}

Kasuta kohandatud helinat, edastades helifaili URL-i:

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

Helin kordub, kuni vidin on olekus connecting, ning vaibub sujuvalt, kui agent ühendub.

Kohandatud API baasaadressiga

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

Vigade käsitlemine

Kui onError tagasihelistamine käivitub, saab see kahe väljaga veaobjekti:

Väli	Tüüp	Kirjeldus
`error`	`string`	Masinloetav veakood
`message`	`string`	Inimloetav vea kirjeldus

Levinud veakoodid hõlmavad lubamata domeeni, leidmata agenti ja vigast API-võtit.

Järgmised sammud

Peata konks

Vajad kasutajaliidese üle täielikku kontrolli? Kasuta selle asemel konksu useThunderPhone.

Stiilimine

Kohanda värve, suurusi ja paigutust CSS-i kohandatud omadustega.