---
title: "React কম্পোনেন্ট"
description: "React অ্যাপ্লিকেশনে ThunderPhone ভয়েস উইজেট এম্বেড করুন"
---

`ThunderPhoneWidget` কম্পোনেন্টটি মিউট করা, কল শেষ করা এবং সংযোগের অবস্থা প্রদর্শনের জন্য অন্তর্নির্মিত নিয়ন্ত্রণসহ একটি গ্লাসমরফিক কল বার রেন্ডার করে। React অ্যাপে ভয়েস AI যোগ করার এটি দ্রুততম উপায়।

## ইনস্টলেশন

```bash
npm install @thunderphone/widget
```

## মৌলিক ব্যবহার

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
    />
  )
}
```

<Warning>
  উইজেটটি সঠিকভাবে রেন্ডার করতে আপনাকে **অবশ্যই** CSS ফাইলটি ইমপোর্ট করতে হবে। এটি ছাড়া, উইজেটটি স্টাইলবিহীন থাকবে।
</Warning>

---

## প্রপস

কম্পোনেন্টটি `ThunderPhoneWidgetProps`-এর মাধ্যমে নিম্নলিখিত প্রপস গ্রহণ করে:

| প্রপ | ধরন | প্রয়োজনীয় | ডিফল্ট | বিবরণ |
|------|------|----------|---------|-------------|
| `publishableKey` | `string` | হ্যাঁ | -- | Developers সেটিংস থেকে প্রকাশযোগ্য API কী (`pk_live_...`)। কী-এর উইজেট কনফিগারেশন থেকে এজেন্ট স্বয়ংক্রিয়ভাবে নির্ধারিত হয়। |
| `theme` | `'light' \| 'dark'` | না | `'light'` | রঙের স্কিম। উইজেট রুটে `tp--light` বা `tp--dark` ক্লাস প্রয়োগ করে। |
| `primaryColor` | `string` | না | `'#000000'` (হালকা) / `'#ffffff'` (গাঢ়) | অ্যাকসেন্ট রঙ হিসেবে ব্যবহৃত CSS রঙের স্ট্রিং (কল বোতাম, ওয়েভফর্ম, সক্রিয় নির্দেশক)। |
| `title` | `string` | না | `'Voice assistant'` | উইজেট বারে প্রদর্শিত টেক্সট। |
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | না | `'bottom-right'` | উইজেটের জন্য স্থির ভিউপোর্ট অবস্থান। |
| `apiBase` | `string` | না | `'https://api.thunderphone.com/v1'` | API বেস URL ওভাররাইড। |
| `language` | `string` | না | -- | প্রতি-সেশনের ভাষা ওভাররাইড -- `en`, `es`, বা `fr-FR`-এর মতো একটি ভাষা কোড বা লোকেল। সেট না থাকলে, এজেন্টের কনফিগার করা ভাষা প্রযোজ্য হবে। |
| `voice` | `string` | না | -- | প্রতি-সেশনের ভয়েস ওভাররাইড -- `maria`-এর মতো একটি ভয়েস নাম। সেট না থাকলে, এজেন্টের কনফিগার করা ভয়েস প্রযোজ্য হবে। |
| `context` | `string` | না | -- | প্রতি-সেশনের তথ্যভিত্তিক পৃষ্ঠা বা সাইটের প্রসঙ্গ এজেন্টের কাছে পাঠানো হয় (উদাহরণস্বরূপ, ভিজিটর যে পৃষ্ঠাটি দেখছেন তার বিবরণ)। সার্ভার-সাইডে 12,000 অক্ষরে সংক্ষিপ্ত করা হয়। |
| `onConnect` | `() => void` | না | -- | ভয়েস সেশন সফলভাবে সংযুক্ত হলে কল করা হয়। |
| `onDisconnect` | `() => void` | না | -- | সেশন শেষ হলে কল করা হয়। |
| `onError` | `(error) => void` | না | -- | ত্রুটি হলে কল করা হয়। `error` অবজেক্টে `error` (কোড) এবং `message` ফিল্ড থাকে। |
| `className` | `string` | না | -- | উইজেট কন্টেইনারে প্রয়োগ করা অতিরিক্ত CSS ক্লাস নাম। |
| `ringtone` | `boolean \| string` | না | `false` | সংযোগের সময় একটি রিংটোন চালান। ডিফল্ট রিংটোনের জন্য `true`, অথবা কাস্টম অডিওর জন্য একটি URL স্ট্রিং। |

---

## উদাহরণ

### কাস্টম রঙসহ ডার্ক থিম

```tsx
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"
    />
  )
}
```

### কাস্টম অবস্থান

```tsx
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`) পাঠানো হয়, যা সেই সেশনের জন্য এজেন্টের কনফিগার করা ডিফল্ট সেটিংস ওভাররাইড করে:

```tsx
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 অক্ষরে সংক্ষিপ্ত করা হয়।

### ইভেন্ট কলব্যাকসহ

```tsx
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}`)
      }}
    />
  )
}
```

### কাস্টম স্টাইলিংসহ

```tsx
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"
    />
  )
}
```

```css
.my-custom-widget .tp-button--end {
  background-color: #e74c3c;
}
```

সব উপলভ্য CSS ক্লাস এবং কাস্টম প্রপার্টির জন্য [স্টাইলিং গাইড](/bn/widget/styling) দেখুন।

### রিংটোনসহ

সংযোগ স্থাপনের সময় ফোন বাজার শব্দ চালান:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}
```

একটি অডিও ফাইলের URL পাঠিয়ে কাস্টম রিংটোন ব্যবহার করুন:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  ringtone="https://example.com/my-ringtone.mp3"
/>
```

উইজেট `connecting` অবস্থায় থাকলে রিংটোনটি লুপ হয় এবং এজেন্ট সংযুক্ত হলে মসৃণভাবে ফেড আউট হয়।

### কাস্টম API বেসসহ

<Tip>
  আপনি স্ব-হোস্টেড বা প্রক্সি API এন্ডপয়েন্ট ব্যবহার করলেই শুধু `apiBase` সেট করতে হবে। ডিফল্ট হিসেবে `https://api.thunderphone.com/v1` ব্যবহৃত হয়।
</Tip>

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  apiBase="https://your-proxy.example.com/v1"
/>
```

---

## ত্রুটি পরিচালনা

`onError` কলব্যাক চালু হলে, এটি দুটি ফিল্ডসহ একটি ত্রুটি অবজেক্ট গ্রহণ করে:

| ফিল্ড | ধরন | বিবরণ |
|-------|------|-------------|
| `error` | `string` | মেশিন-পাঠযোগ্য ত্রুটি কোড |
| `message` | `string` | মানব-পাঠযোগ্য ত্রুটির বিবরণ |

সাধারণ ত্রুটি কোডগুলোর মধ্যে রয়েছে ডোমেইন অনুমোদিত নয়, এজেন্ট পাওয়া যায়নি, এবং অবৈধ API কী।

---

## পরবর্তী ধাপ

<CardGroup cols={2}>
  <Card title="হেডলেস হুক" icon="code" href="/bn/widget/headless-hook">
    UI-এর ওপর সম্পূর্ণ নিয়ন্ত্রণ দরকার? এর পরিবর্তে `useThunderPhone` হুক ব্যবহার করুন।
  </Card>
  <Card title="স্টাইলিং" icon="palette" href="/bn/widget/styling">
    CSS কাস্টম প্রপার্টি দিয়ে রং, আকার এবং লেআউট কাস্টমাইজ করুন।
  </Card>
</CardGroup>