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 ключ.

Следващи стъпки