Komponent React

Komponent ThunderPhoneWidget vykresľuje sklenený panel hovoru so vstavanými ovládacími prvkami na stlmenie, ukončenie hovoru a zobrazenie stavu pripojenia. Je to najrýchlejší spôsob, ako pridať hlasovú AI do aplikácie React.

Inštalácia

npm install @thunderphone/widget

Základné použitie

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

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

Vlastnosti

Komponent prijíma nasledujúce vlastnosti prostredníctvom ThunderPhoneWidgetProps:

Príklady

Tmavá téma s vlastnou farbou

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

Vlastná pozícia

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

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

Jazyk, hlas a kontext pre jednotlivé relácie

Vlastnosti language, voice a context sa pri začatí hovoru odovzdajú požiadavke relácie (POST /widget/session) a pre danú reláciu prepíšu nakonfigurované predvolené hodnoty agenta:

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

Pomocou context poskytnite agentovi faktické informácie o stránke, na ktorej sa návštevník nachádza – podrobnosti o produkte, ceny alebo často kladené otázky špecifické pre danú stránku. Na strane servera sa skracuje na 12 000 znakov.

S obslužnými funkciami udalostí

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

S vlastným štýlom

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

Všetky dostupné triedy CSS a vlastné vlastnosti nájdete v príručke štýlovania.

S vyzváňacím tónom

Počas vytvárania spojenia prehrávajte zvuk zvonenia telefónu:

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

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

Vlastný vyzváňací tón použite odovzdaním adresy URL zvukového súboru:

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

Vyzváňací tón sa opakuje, kým je widget v stave connecting, a po pripojení agenta plynulo stíchne.

S vlastnou základnou adresou API

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

Spracovanie chýb

Keď sa spustí spätné volanie onError, prijme objekt chyby s dvoma poľami:

Medzi bežné kódy chýb patria nepovolená doména, nenájdený agent a neplatný kľúč API.

Ďalšie kroky