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 वापरा -- उत्पादन तपशील, किंमत किंवा पृष्ठ-विशिष्ट वारंवार विचारले जाणारे प्रश्न. सर्व्हर-साइडवर ते 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 की यांचा समावेश होतो.

पुढील पायऱ्या