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 কী।

পরবর্তী ধাপ