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

സന്ദർശകൻ നിലവിൽ കാണുന്ന പേജിനെക്കുറിച്ചുള്ള വസ്തുതാപരമായ വിവരങ്ങൾ — ഉൽപ്പന്ന വിശദാംശങ്ങൾ, വിലനിർണയം, അല്ലെങ്കിൽ പേജ്-നിർദിഷ്ട FAQ-കൾ — ഏജന്റിന് നൽകാൻ 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 കീ എന്നിവ ഉൾപ്പെടുന്നു.

അടുത്ത ഘട്ടങ്ങൾ