React компонента

Компонента ThunderPhoneWidget приказује стакласти панел за позиве са уграђеним контролама за искључивање звука, завршавање позива и приказ статуса везе. То је најбржи начин да додате гласовни AI у React апликацију.

Инсталација

npm install @thunderphone/widget

Основна употреба

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

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

Својства

Компонента прихвата следећа својства преко ThunderPhoneWidgetProps:

Примери

Тамна тема са прилагођеном бојом

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

Прилагођена позиција

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

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

Језик, глас и контекст по сесији

Пропси language, voice и context прослеђују се захтеву за сесију (POST /widget/session) када позив започне, чиме се за ту сесију замењују подразумеване вредности конфигурисане за агента:

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

Користите context да агенту пружите чињенично знање о страници коју посетилац тренутно прегледа -- детаље о производу, цене или честа питања специфична за страницу. На серверу се скраћује на 12.000 знакова.

Са повратним позивима за догађаје

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

Са прилагођеним стилизовањем

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

Погледајте водич за стилизовање за све доступне CSS класе и прилагођена својства.

Са мелодијом звона

Репродукујте звук телефонског звона док се успоставља веза:

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

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

Користите прилагођену мелодију звона тако што ћете проследити URL аудио датотеке:

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

Мелодија звона се понавља док је виџет у стању connecting и глатко се утишава када се агент повеже.

Са прилагођеном API базом

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

Обрада грешака

Када се покрене повратни позив onError, он прима објекат грешке са два поља:

Уобичајени кодови грешака укључују недозвољени домен, непронађеног агента и неважећи API кључ.

Следећи кораци