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 کلید شامل ہیں۔

اگلے مراحل