Open in

React-komponens

Ágyazza be a ThunderPhone hangalapú widgetet egy React-alkalmazásba

A ThunderPhoneWidget komponens egy üvegszerű hívássávot jelenít meg beépített vezérlőkkel a némításhoz, a hívás befejezéséhez és a kapcsolati állapot megjelenítéséhez. Ez a leggyorsabb módja annak, hogy hangalapú AI-t adjon egy React-alkalmazáshoz.

Telepítés

npm install @thunderphone/widget

Alapvető használat

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
    />
  )
}

Kellékek

A komponens a következő kellékeket fogadja el a ThunderPhoneWidgetProps segítségével:

Tulajdonság	Típus	Kötelező	Alapértelmezett	Leírás
`publishableKey`	`string`	Igen	--	Közzétehető API-kulcs (`pk_live_...`) a vezérlőpult Webes widgetek részéből. Az ügynök automatikusan feloldódik a kulcs widgetkonfigurációja alapján.
`theme`	`'light' \| 'dark'`	Nem	`'light'`	Színséma. A `tp--light` vagy `tp--dark` osztályt alkalmazza a widget gyökérelemére.
`primaryColor`	`string`	Nem	`'#000000'` (világos) / `'#ffffff'` (sötét)	CSS-színkarakterlánc, amelyet kiemelő színként használ (hívásgomb, hullámforma, aktív jelzők).
`title`	`string`	Nem	`'Voice assistant'`	A widget sávjában megjelenő szöveg.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Nem	`'bottom-right'`	A widget rögzített pozíciója a nézetablakban.
`apiBase`	`string`	Nem	`'https://api.thunderphone.com/v1'`	API-alap URL felülbírálása.
`language`	`string`	Nem	--	Munkamenetenkénti nyelvi felülbírálás -- nyelvkód vagy területi beállítás, például `en`, `es` vagy `fr-FR`. Ha nincs beállítva, az ügynök konfigurált nyelve érvényes. A kulcs böngészőbeli felülbírálásai alatt szükséges a `language` beállítás.
`voice`	`string`	Nem	--	Munkamenetenkénti hangfelülbírálás -- hangnév, például `maria`. Ha nincs beállítva, az ügynök konfigurált hangja érvényes. A kulcs böngészőbeli felülbírálásai alatt szükséges a `voice` beállítás.
`context`	`string`	Nem	--	Munkamenetenkénti tényszerű oldal- vagy webhelykontextus, amelyet a rendszer átad az ügynöknek (például a látogató által megtekintett oldal részletei). A szerveroldalon 12 000 karakterre csonkítva. A kulcs böngészőbeli felülbírálásai alatt szükséges a `context` beállítás.
`onConnect`	`() => void`	Nem	--	Akkor hívódik meg, amikor a hangmunkamenet sikeresen csatlakozik.
`onDisconnect`	`() => void`	Nem	--	Akkor hívódik meg, amikor a munkamenet véget ér.
`onError`	`(error) => void`	Nem	--	Hiba esetén hívódik meg. Az `error` objektum `error` (kód) és `message` mezőkkel rendelkezik.
`className`	`string`	Nem	--	A widget tárolójára alkalmazott további CSS-osztálynév.
`ringtone`	`boolean \| string`	Nem	`false`	Csengetési hang lejátszása kapcsolódás közben. Az alapértelmezett csengetési hanghoz `true`, egyéni hanghoz pedig URL-karakterlánc.

Példák

Sötét téma egyéni színnel

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

Egyéni pozíció

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      position="bottom-left"
    />
  )
}

Munkamenetenkénti nyelv, hang és kontextus

A hívás indításakor a rendszer továbbítja a language, voice és context propokat a munkamenet-kérésnek (POST /widget/session), felülírva az AI-ügynök adott munkamenethez konfigurált alapértelmezéseit. A vezérlőpulton a widget Böngészőfelülbírálások beállításánál kapcsolja be az összes használt propot (vagy a kulcs allowed_overrides beállításában). Az új widgetek egyiket sem fogadják el, és ha egy munkamenet-kérés olyan felülbírálást tartalmaz, amely ki van kapcsolva, a kérés 400 override_not_allowed hibával meghiúsul; lásd: Böngészőfelülbírálások.

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

A context segítségével tényszerű információkat adhat az AI-ügynöknek arról az oldalról, amelyet a látogató éppen megtekint -- például termékadatokat, árakat vagy az oldalra vonatkozó gyakori kérdéseket. Az AI-ügynök ezt oldaltartalomként, nem pedig utasításként kezeli. A rendszer szerveroldalon 12 000 karakterre csonkítja.

Esemény-visszahívásokkal

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

Egyéni stílussal

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

Az összes elérhető CSS-osztályt és egyéni tulajdonságot a Stílusútmutatóban találja.

Csengőhanggal

Játsszon le telefoncsörgő hangot a kapcsolat létrehozása közben:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}

Adjon meg egy hangfájl-URL-t egyéni csengőhang használatához:

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

A csengőhang ismétlődik, amíg a widget connecting állapotban van, és finoman elhalkul, amikor az ügynök kapcsolódik.

Egyéni API-alappal

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

Hibakezelés

Amikor az onError visszahívás lefut, egy két mezőt tartalmazó hibaobjektumot kap:

Mező	Típus	Leírás
`error`	`string`	Géppel olvasható hibakód
`message`	`string`	Ember által olvasható hibaleírás

A gyakori hibakódok közé tartozik a nem engedélyezett domain, a nem található ügynök és az érvénytelen API-kulcs.

Következő lépések

Headless Hook

Teljes irányítást szeretne a felhasználói felület felett? Használja inkább a useThunderPhone hookot.

Stílusok

Szabja testre a színeket, méreteket és az elrendezést CSS egyéni tulajdonságokkal.