Open in

Reacti komponent

Manusta ThunderPhone

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:

Parameeter	Tüüp	Nõutud	Vaikimisi	Kirjeldus
`publishableKey`	`string`	Jah	--	Avalik API-võti (`pk_live_...`) juhtpaneeli jaotisest Veebividinad. Häälagent määratakse automaatselt võtme vidina konfiguratsiooni põhjal.
`theme`	`'light' \| 'dark'`	Ei	`'light'`	Värviskeem. Rakendab vidina juurelemendile klassi `tp--light` või `tp--dark`.
`primaryColor`	`string`	Ei	`'#000000'` (hele) / `'#ffffff'` (tume)	Aktsentvärvina kasutatav CSS-värvistring (helistamisnupp, helilainekuju, aktiivsed indikaatorid).
`title`	`string`	Ei	`'Voice assistant'`	Vidina ribal 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 alistus.
`language`	`string`	Ei	--	Seansipõhine keele alistus -- keelekood või lokaat, näiteks `en`, `es` või `fr-FR`. Kui see pole määratud, kasutatakse häälagendi seadistatud keelt. Nõuab võtme brauseri alistuste all väärtust `language`.
`voice`	`string`	Ei	--	Seansipõhine hääle alistus -- häälenimi, näiteks `maria`. Kui see pole määratud, kasutatakse häälagendi seadistatud häält. Nõuab võtme brauseri alistuste all väärtust `voice`.
`context`	`string`	Ei	--	Häälagendile edastatav seansipõhine faktiline lehe või saidi kontekst (näiteks üksikasjad lehe kohta, mida külastaja vaatab). Kärbitakse serveripoolel 12 000 märgini. Nõuab võtme brauseri alistuste all väärtust `context`.
`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 tõrgete 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 ühenduse loomise ajal helinat. `true` kasutab vaikimisi helinat või kasuta kohandatud heli jaoks URL-stringi.

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 algamisel seansipäringule (POST /widget/session), alistades selle seansi jaoks agendi seadistatud vaikeväärtused. Lülita juhtpaneelil vidina jaoks jaotises Brauseri ülekirjutused sisse iga kasutatav prop (või võtme allowed_overrides atribuudis). Uued vidinad ei aktsepteeri neist ühtegi ning seansipäring, mis sisaldab väljalülitatud proppi, ebaõnnestub veaga 400 override_not_allowed; vaata Brauseri ülekirjutused.

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 contexti, et anda agendile faktilist teavet lehe kohta, mida külastaja vaatab -- toote üksikasju, hinnastust või lehepõhiseid KKK-sid. Agent käsitleb seda lehe sisuna, mitte juhistena. 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.