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 விசை ஆகியவை அடங்கும்.

அடுத்த படிகள்