React కాంపొనెంట్

ThunderPhoneWidget కాంపొనెంట్ మ్యూట్ చేయడానికి, కాల్‌ను ముగించడానికి మరియు కనెక్షన్ స్థితిని ప్రదర్శించడానికి అంతర్నిర్మిత నియంత్రణలతో కూడిన గ్లాస్‌మార్ఫిక్ కాల్ బార్‌ను రెండర్ చేస్తుంది. React యాప్‌కు వాయిస్ AIని జోడించడానికి ఇది అత్యంత వేగవంతమైన మార్గం.

ఇన్‌స్టాలేషన్

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 props సెషన్ అభ్యర్థనకు (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 ఉపయోగించండి -- ఉత్పత్తి వివరాలు, ధరలు లేదా పేజీ-నిర్దిష్ట FAQలు. ఇది సర్వర్ వైపు 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 కీ ఉన్నాయి.

తదుపరి దశలు