---
title: "ಹೆಡ್‌ಲೆಸ್ ಹುಕ್"
description: "useThunderPhone React ಹುಕ್‌ನೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಕಸ್ಟಮ್ ಧ್ವನಿ UI ನಿರ್ಮಿಸಿ"
---

`useThunderPhone` ಹುಕ್ ನಿಮಗೆ ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ನ ಮೇಲೆ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣ ನೀಡುತ್ತದೆ; ThunderPhone ಧ್ವನಿ ಸೆಷನ್, ಆಡಿಯೊ ರೂಟಿಂಗ್ ಮತ್ತು ಸಂಪರ್ಕ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ನಿಮ್ಮದೇ ಬಟನ್‌ಗಳು, ಲೇಔಟ್‌ಗಳು, ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಬ್ರ್ಯಾಂಡಿಂಗ್‌ನೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಕಸ್ಟಮ್ UI ಬೇಕಾದಾಗ, ಒಳಾಂಗಣದ ಎಲ್ಲವನ್ನೂ ThunderPhone ನಿರ್ವಹಿಸುವಂತೆ ಇದನ್ನು ಬಳಸಿ.

## ಹೆಡ್‌ಲೆಸ್ ಹುಕ್ ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು

ಪೂರ್ವನಿರ್ಮಿತ `ThunderPhoneWidget` ಕಾಂಪೊನೆಂಟ್ ಹೆಚ್ಚಿನ ಬಳಕೆಯ ಸಂದರ್ಭಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಆದರೆ ನಿಮಗೆ ಈ ಕೆಳಗಿನವು ಬೇಕಾದಾಗ ಹೆಡ್‌ಲೆಸ್ ಹುಕ್ ಬಳಸಿ:

- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗೆ ಹೊಂದುವ ಸಂಪೂರ್ಣ ಕಸ್ಟಮ್ ಕರೆ UI
- ನೈಜ-ಸಮಯದ ಆಡಿಯೊ ಮಟ್ಟಗಳಿಂದ ಚಾಲಿತವಾಗುವ ಆಡಿಯೊ-ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ದೃಶ್ಯೀಕರಣಗಳು (ತರಂಗರೂಪಗಳು, ಗೋಳಗಳು, ಸ್ಪಂದಿಸುವ ಸೂಚಕಗಳು)
- ಕರೆ-ಪೂರ್ವ ಫಾರ್ಮ್‌ಗಳು, ಕರೆ-ನಂತರದ ಸಮೀಕ್ಷೆಗಳು ಅಥವಾ ಧ್ವನಿಯೊಂದಿಗೆ ಒಳಸಾಲಿನ ಚಾಟ್‌ನಂತಹ ಕಸ್ಟಮ್ ಕರೆ ಹರಿವುಗಳು
- ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಂಪೊನೆಂಟ್ ಲೈಬ್ರರಿಗೆ ಏಕೀಕರಣ (Material UI, Chakra, Radix, ಇತ್ಯಾದಿ)

---

## ಸ್ಥಾಪನೆ

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

<Note>
  ನೀವು ನಿಮ್ಮದೇ UI ಒದಗಿಸುತ್ತಿರುವುದರಿಂದ, ಹೆಡ್‌ಲೆಸ್ ಹುಕ್‌ಗೆ `@thunderphone/widget/style.css` ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ **ಅಗತ್ಯವಿಲ್ಲ**. ಆದಾಗ್ಯೂ, ಅದೇ `@thunderphone/widget` ಪ್ಯಾಕೇಜ್ ಅನ್ನು ನೀವು ಇನ್ನೂ ಸ್ಥಾಪಿಸಬೇಕು.
</Note>

---

## ಮೂಲ ಬಳಕೆ

```tsx
import { useThunderPhone } from '@thunderphone/widget'

function CustomCallButton() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  const handleClick = () => {
    if (phone.state === 'connected') {
      phone.disconnect()
    } else {
      phone.connect()
    }
  }

  return (
    <>
      <button onClick={handleClick} disabled={phone.state === 'connecting'}>
        {phone.state === 'connecting'
          ? 'Connecting...'
          : phone.state === 'connected'
            ? 'End call'
            : 'Start call'}
      </button>
      {phone.audio}
    </>
  )
}
```

<Warning>
  **ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ `phone.audio` ಅನ್ನು ರೆಂಡರ್ ಮಾಡಬೇಕು.** ಇದು ಆಂತರಿಕ ಆಡಿಯೊ ಸಂಪರ್ಕವನ್ನು ನಿರ್ವಹಿಸುವ ಅದೃಶ್ಯ React ಎಲಿಮೆಂಟ್ ಆಗಿದೆ. ನೀವು ಇದನ್ನು ಬಿಟ್ಟುಬಿಟ್ಟರೆ, ಯಾವುದೇ ಆಡಿಯೊ ಪ್ಲೇ ಆಗುವುದಿಲ್ಲ ಮತ್ತು ಸೆಷನ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
</Warning>

---

## ಆಯ್ಕೆಗಳು

`UseThunderPhoneOptions` ಮೂಲಕ ಈ ಆಯ್ಕೆಗಳನ್ನು `useThunderPhone` ಗೆ ಪಾಸ್ ಮಾಡಿ:

| ಆಯ್ಕೆ | ಪ್ರಕಾರ | ಅಗತ್ಯವಿದೆಯೇ | ಡೀಫಾಲ್ಟ್ | ವಿವರಣೆ |
|--------|------|----------|---------|-------------|
| `publishableKey` | `string` | ಹೌದು | -- | ಪ್ರಕಟಿಸಬಹುದಾದ API ಕೀ (`pk_live_...`). ಕೀಯ ವಿಜೆಟ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಿಂದ ಏಜೆಂಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ. |
| `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` (ಕೋಡ್) ಮತ್ತು `message` ಕ್ಷೇತ್ರಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. |
| `ringtone` | `boolean \| string` | ಇಲ್ಲ | `false` | ಸಂಪರ್ಕಗೊಳ್ಳುವಾಗ ರಿಂಗ್‌ಟೋನ್ ಪ್ಲೇ ಮಾಡಿ. ಡೀಫಾಲ್ಟ್ ರಿಂಗ್‌ಟೋನ್‌ಗೆ `true`, ಅಥವಾ ಕಸ್ಟಮ್ ಆಡಿಯೊಗೆ URL ಸ್ಟ್ರಿಂಗ್. |

<Note>
  ಹುಕ್ ಹೆಡ್‌ಲೆಸ್ ಆಗಿದೆ: ಇದು `ThunderPhoneWidget` ಗೋಚರತೆ ಪ್ರಾಪ್‌ಗಳನ್ನು (`theme`, `primaryColor`, `title`, `position`, `className`) **ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ**. ಅವುಗಳನ್ನು ಪಾಸ್ ಮಾಡಿದರೆ TypeScript ದೋಷ ಉಂಟಾಗುತ್ತದೆ -- ಪ್ರಸ್ತುತಿಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನೀವೇ ನಿರ್ಮಿಸಬೇಕು.
</Note>

---

## ಹಿಂತಿರುಗುವ ಮೌಲ್ಯ

ಈ hook ಒಂದು `UseThunderPhoneReturn` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ:

| ಗುಣಲಕ್ಷಣ | ವಿಧ | ವಿವರಣೆ |
|----------|------|-------------|
| `state` | `'idle' \| 'connecting' \| 'connected' \| 'disconnected' \| 'error'` | ಪ್ರಸ್ತುತ ಸಂಪರ್ಕ ಸ್ಥಿತಿ. |
| `connect` | `() => void` | ಧ್ವನಿ ಸೆಷನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ. |
| `disconnect` | `() => void` | ಪ್ರಸ್ತುತ ಸೆಷನ್ ಅನ್ನು ಕೊನೆಗೊಳಿಸಿ. |
| `toggleMute` | `() => void` | ಮೈಕ್ರೋಫೋನ್ ಮ್ಯೂಟ್ ಅನ್ನು ಆನ್/ಆಫ್ ಮಾಡಿ. |
| `isMuted` | `boolean` | ಮೈಕ್ರೋಫೋನ್ ಪ್ರಸ್ತುತ ಮ್ಯೂಟ್ ಆಗಿದೆಯೇ ಎಂಬುದು. |
| `error` | `string \| undefined` | ಸ್ಥಿತಿ `'error'` ಆಗಿರುವಾಗಿನ ದೋಷ ಸಂದೇಶ. |
| `agentName` | `string \| undefined` | ಸಂಪರ್ಕಿತ ಏಜೆಂಟ್‌ನ ಪ್ರದರ್ಶನ ಹೆಸರು. |
| `audioLevel` | `number` | **ಬಳಕೆಯಿಂದ ತೆಗೆದುಹಾಕಲಾಗಿದೆ -- ಯಾವಾಗಲೂ `0`.** ಹಿಮ್ಮುಖ ಹೊಂದಾಣಿಕೆಗಾಗಿ ಉಳಿಸಿಕೊಳ್ಳಲಾದ ಸ್ಥಿರ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್; ಇದು ಎಂದಿಗೂ ನವೀಕರಿಸುವುದಿಲ್ಲ. ಬದಲಿಗೆ `audioLevelRef.current` ಅನ್ನು ಓದಿ. |
| `audioLevelRef` | `React.RefObject<number>` | ಏಜೆಂಟ್‌ನ ಧ್ವನಿ ಮತ್ತು ಸಂದರ್ಶಕರ ಮೈಕ್ರೋಫೋನ್‌ನಲ್ಲಿ ಹೆಚ್ಚು ಜೋರಾಗಿರುವ ಧ್ವನಿಯ ನೈಜ-ಸಮಯದ ಆಡಿಯೊ ಮಟ್ಟವನ್ನು (0--1) ಹೊಂದಿರುವ ಬದಲಾಯಿಸಬಹುದಾದ ref -- ಪ್ರತಿ ಅನಿಮೇಶನ್ ಫ್ರೇಮ್‌ನಲ್ಲಿ React‌ನ ರೆಂಡರ್ ಚಕ್ರದ ಹೊರಗೆ ನವೀಕರಿಸಲಾಗುತ್ತದೆ. ಸುಗಮ, ಅಡೆತಡೆಯಿಲ್ಲದ ಅನಿಮೇಶನ್‌ಗಳಿಗಾಗಿ `requestAnimationFrame` ಲೂಪ್‌ಗಳ ಒಳಗೆ `audioLevelRef.current` ಅನ್ನು ಓದಿ, ಅಥವಾ React ಸ್ಥಿತಿಯಲ್ಲಿ ಮೌಲ್ಯ ಬೇಕಾದಾಗ ಅದನ್ನು ಮಧ್ಯಂತರದಲ್ಲಿ ಮಾದರಿಯಾಗಿ ತೆಗೆದುಕೊಳ್ಳಿ. |
| `audio` | `ReactNode` | ಆಡಿಯೊ ಸಂಪರ್ಕವನ್ನು ನಿರ್ವಹಿಸುವ ಅದೃಶ್ಯ ಅಂಶ -- **ರೆಂಡರ್ ಮಾಡಲೇಬೇಕು**. |

---

## ಆಡಿಯೊ-ಪ್ರತಿಕ್ರಿಯಾಶೀಲ UI

`audioLevelRef` ರೆಫ್ React ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸದೆ ಫ್ರೇಮ್-ರೇಟ್ ಆಡಿಯೊ ಮಟ್ಟಗಳನ್ನು ನಿಮಗೆ ಒದಗಿಸುತ್ತದೆ; ಆದ್ದರಿಂದ ಸುಗಮ ವೇವ್‌ಫಾರ್ಮ್ ದೃಶ್ಯೀಕರಣಗಳು, ಪಲ್ಸಿಂಗ್ ಆರ್ಬ್‌ಗಳು ಅಥವಾ ಸಂಭಾಷಣೆಗೆ ಸಂಬಂಧಿಸಿದ ಯಾವುದೇ ಅನಿಮೇಶನ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ಇದು ಸೂಕ್ತವಾಗಿದೆ. ಏಜೆಂಟ್‌ನ ಧ್ವನಿ ಅಥವಾ ಸಂದರ್ಶಕರ ಮೈಕ್ರೊಫೋನ್ ಇವುಗಳಲ್ಲಿ ಯಾವುದು ಹೆಚ್ಚು ಜೋರಾಗಿದೆಯೋ ಅದನ್ನು ಮಟ್ಟವು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ.

### ವೇವ್‌ಫಾರ್ಮ್ ಉದಾಹರಣೆ

```tsx
import { useRef, useEffect } from 'react'
import { useThunderPhone } from '@thunderphone/widget'

function WaveformCall() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    if (phone.state !== 'connected') return
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext('2d')!

    let animId: number
    const draw = () => {
      const level = phone.audioLevelRef.current ?? 0
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      // Draw bars that react to audio level
      const barCount = 24
      const barWidth = canvas.width / barCount
      for (let i = 0; i < barCount; i++) {
        const distance = Math.abs(i - barCount / 2) / (barCount / 2)
        const height = level * canvas.height * (1 - distance * 0.6)
        const y = (canvas.height - height) / 2
        ctx.fillStyle = '#0ea5e9'
        ctx.fillRect(i * barWidth + 1, y, barWidth - 2, height)
      }

      animId = requestAnimationFrame(draw)
    }
    animId = requestAnimationFrame(draw)
    return () => cancelAnimationFrame(animId)
  }, [phone.state, phone.audioLevelRef])

  return (
    <div>
      {phone.state === 'connected' && (
        <canvas ref={canvasRef} width={240} height={80} />
      )}
      <button
        onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}
        disabled={phone.state === 'connecting'}
      >
        {phone.state === 'connected' ? 'End call' : 'Start call'}
      </button>
      {phone.audio}
    </div>
  )
}
```

### ಪಲ್ಸಿಂಗ್ ಆರ್ಬ್ ಉದಾಹರಣೆ

```tsx
import { useRef, useEffect } from 'react'
import { useThunderPhone } from '@thunderphone/widget'

function PulsingOrb() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })
  const orbRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (phone.state !== 'connected') return
    let animId: number
    const animate = () => {
      const level = phone.audioLevelRef.current ?? 0
      if (orbRef.current) {
        const scale = 1 + level * 0.5
        orbRef.current.style.transform = `scale(${scale})`
        orbRef.current.style.opacity = `${0.6 + level * 0.4}`
      }
      animId = requestAnimationFrame(animate)
    }
    animId = requestAnimationFrame(animate)
    return () => cancelAnimationFrame(animId)
  }, [phone.state, phone.audioLevelRef])

  return (
    <div style={{ textAlign: 'center' }}>
      <div
        ref={orbRef}
        style={{
          width: 80,
          height: 80,
          borderRadius: '50%',
          background: '#0ea5e9',
          margin: '20px auto',
          transition: 'transform 0.05s ease-out',
        }}
      />
      <button
        onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}
        disabled={phone.state === 'connecting'}
      >
        {phone.state === 'connected' ? 'End call' : 'Call'}
      </button>
      {phone.audio}
    </div>
  )
}
```

### ಮಾತನಾಡುವಿಕೆ ಸೂಚಕ ಉದಾಹರಣೆ

ವಾಲ್ಯೂಮ್‌ಗೆ ಅನುಗುಣವಾಗಿ ಬದಲಾಗುವ React-ರೆಂಡರ್ ಮಾಡಿದ UI ಗಾಗಿ -- ಉದಾಹರಣೆಗೆ ಮಿತಿಮೌಲ್ಯ-ಆಧಾರಿತ “ಮಾತನಾಡುತ್ತಿದೆ” ಬ್ಯಾಡ್ಜ್ -- `audioLevelRef.current` ಅನ್ನು ನಿಯಮಿತ ಮಧ್ಯಂತರದಲ್ಲಿ ಮಾದರಿ ತೆಗೆದು ಫಲಿತಾಂಶವನ್ನು ಸ್ಥಿತಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ:

```tsx
import { useEffect, useState } from 'react'
import { useThunderPhone } from '@thunderphone/widget'

function SpeakingBadge() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })
  const [speaking, setSpeaking] = useState(false)

  useEffect(() => {
    if (phone.state !== 'connected') {
      setSpeaking(false)
      return
    }
    const interval = setInterval(() => {
      setSpeaking((phone.audioLevelRef.current ?? 0) > 0.1)
    }, 100)
    return () => clearInterval(interval)
  }, [phone.state, phone.audioLevelRef])

  return (
    <div>
      {phone.state === 'connected' && (
        <span>{speaking ? 'Speaking' : 'Listening'}</span>
      )}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'End call' : 'Start call'}
      </button>
      {phone.audio}
    </div>
  )
}
```

<Warning>
  ಮಟ್ಟಗಳನ್ನು ಯಾವಾಗಲೂ `audioLevelRef.current` ನಿಂದ ಓದಿ. ರಿಟರ್ನ್ ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿರುವ `audioLevel` ಸಂಖ್ಯೆ **ಬಳಕೆಯಿಂದ ತೆಗೆದುಹಾಕಲಾಗಿದೆ ಮತ್ತು ಯಾವಾಗಲೂ `0` ಆಗಿರುತ್ತದೆ** -- ಅದರ ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಯಾವುದೇ ಲಾಜಿಕ್ ಮೌನವಾಗಿ ಶೂನ್ಯವನ್ನು ಓದುತ್ತದೆ.
</Warning>

---

## ಸ್ಥಿತಿ ಯಂತ್ರ

`state` ಗುಣಲಕ್ಷಣವು ಈ ಜೀವನಚಕ್ರವನ್ನು ಅನುಸರಿಸುತ್ತದೆ:

```
idle --> connecting --> connected --> disconnected --> idle (after 1.5s)
                  \
                   --> error (stays until connect() is called again)
```

| ಸ್ಥಿತಿ | ವಿವರಣೆ |
|-------|-------------|
| `idle` | ಯಾವುದೇ ಸಕ್ರಿಯ ಸೆಷನ್ ಇಲ್ಲ. `connect()` ಅನ್ನು ಕರೆಯಲು ಸಿದ್ಧವಾಗಿದೆ. |
| `connecting` | ಸೆಷನ್ ಸ್ಥಾಪನೆಯಾಗುತ್ತಿದೆ. ಈ ಸ್ಥಿತಿಯಲ್ಲಿ ಕರೆ ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ. |
| `connected` | ಧ್ವನಿ ಸೆಷನ್ ಸಕ್ರಿಯವಾಗಿದೆ. ಬಳಕೆದಾರರು ಏಜೆಂಟ್ ಜೊತೆಗೆ ಮಾತನಾಡುತ್ತಿದ್ದಾರೆ. |
| `disconnected` | ಸೆಷನ್ ಸರಿಯಾಗಿ ಮುಕ್ತಾಯಗೊಂಡಿದೆ. 1.5 ಸೆಕೆಂಡುಗಳ ನಂತರ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮತ್ತೆ `idle` ಗೆ ಪರಿವರ್ತನೆಯಾಗುತ್ತದೆ. |
| `error` | ಏನೋ ತಪ್ಪಾಗಿದೆ. ಸಂದೇಶಕ್ಕಾಗಿ `phone.error` ಪರಿಶೀಲಿಸಿ. ಸ್ಥಿತಿಯು ತನ್ನಿಂದ ತಾನೇ ತೆರವುಗೊಳ್ಳುವುದಿಲ್ಲ -- `connect()` ಅನ್ನು ಮತ್ತೆ ಕರೆಯುವುದರಿಂದ ಹೊಸ ಪ್ರಯತ್ನ ಆರಂಭವಾಗಿ ದೋಷ ಮರುಹೊಂದಿಸಲಾಗುತ್ತದೆ. |

---

## ಉದಾಹರಣೆಗಳು

### ಮ್ಯೂಟ್ ನಿಯಂತ್ರಣದೊಂದಿಗೆ

```tsx
import { useThunderPhone } from '@thunderphone/widget'

function CallWithMute() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div>
      {phone.state === 'connected' && (
        <div>
          <p>Talking to {phone.agentName ?? 'Agent'}</p>
          <button onClick={phone.toggleMute}>
            {phone.isMuted ? 'Unmute' : 'Mute'}
          </button>
          <button onClick={phone.disconnect}>End call</button>
        </div>
      )}

      {phone.state !== 'connected' && (
        <button
          onClick={phone.connect}
          disabled={phone.state === 'connecting'}
        >
          {phone.state === 'connecting' ? 'Connecting...' : 'Call support'}
        </button>
      )}

      {phone.state === 'error' && (
        <p style={{ color: 'red' }}>{phone.error}</p>
      )}

      {phone.audio}
    </div>
  )
}
```

### ರಿಂಗ್‌ಟೋನ್‌ನೊಂದಿಗೆ

ಫೋನ್ ಕರೆಯನ್ನು ಅನುಕರಿಸಲು ಸಂಪರ್ಕಿಸುವಾಗ ರಿಂಗಿಂಗ್ ಧ್ವನಿಯನ್ನು ಪ್ಲೇ ಮಾಡಿ:

```tsx
import { useThunderPhone } from '@thunderphone/widget'

function PhoneCallButton() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })

  return (
    <>
      <button
        onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}
        disabled={phone.state === 'connecting'}
      >
        {phone.state === 'connecting'
          ? 'Ringing...'
          : phone.state === 'connected'
            ? 'Hang up'
            : 'Call'}
      </button>
      {phone.audio}
    </>
  )
}
```

`connecting` ಸ್ಥಿತಿಯಲ್ಲಿ ರಿಂಗ್‌ಟೋನ್ ಲೂಪ್ ಆಗುತ್ತದೆ ಮತ್ತು ಏಜೆಂಟ್ ಸಂಪರ್ಕಿಸಿದಾಗ ನಿಧಾನವಾಗಿ ನಿಲ್ಲುತ್ತದೆ. ಅಂತರ್ನಿರ್ಮಿತ ಡೀಫಾಲ್ಟ್ ರಿಂಗ್‌ಟೋನ್‌ಗಾಗಿ `true` ಅನ್ನು ಅಥವಾ ನಿಮ್ಮದೇ ಆಡಿಯೊ ಫೈಲ್ ಬಳಸಲು URL ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಪಾಸ್ ಮಾಡಿ.

### ಈವೆಂಟ್ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ

```tsx
import { useThunderPhone } from '@thunderphone/widget'

function TrackedCallButton() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: () => {
      analytics.track('call_started')
    },
    onDisconnect: () => {
      analytics.track('call_ended')
    },
    onError: (error) => {
      analytics.track('call_error', { code: error.error, message: error.message })
    },
  })

  return (
    <>
      <button
        onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}
        disabled={phone.state === 'connecting'}
      >
        {phone.state === 'connected' ? 'Hang up' : 'Talk to AI'}
      </button>
      {phone.audio}
    </>
  )
}
```

### ಸಂಪೂರ್ಣ ಕಸ್ಟಮ್ UI

```tsx
import { useThunderPhone } from '@thunderphone/widget'

function FullCustomUI() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div className="call-panel">
      <div className="call-status">
        {phone.state === 'idle' && <span>Ready</span>}
        {phone.state === 'connecting' && <span className="pulse">Connecting...</span>}
        {phone.state === 'connected' && (
          <span>On call with {phone.agentName}</span>
        )}
        {phone.state === 'error' && <span className="error">{phone.error}</span>}
      </div>

      <div className="call-controls">
        {phone.state === 'connected' ? (
          <>
            <button className="mute-btn" onClick={phone.toggleMute}>
              {phone.isMuted ? 'Unmute' : 'Mute'}
            </button>
            <button className="end-btn" onClick={phone.disconnect}>
              End
            </button>
          </>
        ) : (
          <button
            className="start-btn"
            onClick={phone.connect}
            disabled={phone.state === 'connecting'}
          >
            Start call
          </button>
        )}
      </div>

      {/* Required -- handles audio under the hood */}
      {phone.audio}
    </div>
  )
}
```

---

## ಸಲಹೆಗಳು

<AccordionGroup>
  <Accordion title="phone.audio ಅನ್ನು ಯಾವಾಗಲೂ ರೆಂಡರ್ ಮಾಡಿ">
    `phone.audio` ಎಲಿಮೆಂಟ್ ಕಾಣಿಸುವುದಿಲ್ಲ, ಆದರೆ ಅಗತ್ಯವಾಗಿದೆ. ಅದನ್ನು ನಿಮ್ಮ JSX ನಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಇರಿಸಿ -- ಇದು ಗೋಚರಿಸುವ DOM ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದಿಲ್ಲ, ಆದರೆ WebRTC ಆಡಿಯೊ ಸಂಪರ್ಕವನ್ನು ಆಂತರಿಕವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ.
  </Accordion>

  <Accordion title="ಸಂಪರ್ಕಿಸುವಾಗ ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ">
    `connecting` ಸ್ಥಿತಿ 1-3 ಸೆಕೆಂಡುಗಳವರೆಗೆ ಇರಬಹುದು. ನಕಲಿ ಸಂಪರ್ಕ ಪ್ರಯತ್ನಗಳನ್ನು ತಡೆಯಲು ಈ ಸ್ಥಿತಿಯಲ್ಲಿ ಕರೆ ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ.
  </Accordion>

  <Accordion title="ದೋಷ ಸ್ಥಿತಿಯನ್ನು ಸಮರ್ಪಕವಾಗಿ ನಿರ್ವಹಿಸಿ">
    ಸ್ಥಿತಿ `error` ಆಗಿರುವಾಗ, ಬಳಕೆದಾರರಿಗೆ `phone.error` ಅನ್ನು ಪ್ರದರ್ಶಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಕರೆ ಬಟನ್ ಅನ್ನು ಸಕ್ರಿಯವಾಗಿಯೇ ಇರಿಸಿ. ಹೂಕ್ ತನ್ನಿಂದ ತಾನೇ `error` ಸ್ಥಿತಿಯಿಂದ ಹೊರಬರುವುದಿಲ್ಲ -- `connect()` ಅನ್ನು ಮತ್ತೆ ಕರೆಯುವುದರಿಂದ ಹೊಸ ಪ್ರಯತ್ನ ಆರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಹಿಂದಿನ ದೋಷವನ್ನು ತೆರವುಗೊಳಿಸಲಾಗುತ್ತದೆ.
  </Accordion>

  <Accordion title="ಪಾರ್ಶ್ವ ಪರಿಣಾಮಗಳಿಗಾಗಿ ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸಿ">
    ಸ್ಥಿತಿಯನ್ನು ಪೋಲ್ ಮಾಡದೆ ವಿಶ್ಲೇಷಣೆ, ಲಾಗಿಂಗ್ ಅಥವಾ ಇತರ ಅಪ್ಲಿಕೇಶನ್ ಲಾಜಿಕ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು `onConnect`, `onDisconnect`, ಮತ್ತು `onError` ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಸೂಕ್ತವಾಗಿವೆ.
  </Accordion>

  <Accordion title="audioLevelRef ನಿಂದ ಆಡಿಯೊ ಮಟ್ಟಗಳನ್ನು ಓದಿ">
    `audioLevelRef` ನೇರ ಆಡಿಯೊ-ಮಟ್ಟದ ಏಕೈಕ ಮೂಲವಾಗಿದೆ. ವೇವ್‌ಫಾರ್ಮ್‌ಗಳಂತಹ ಮೃದುವಾದ ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ `requestAnimationFrame` ಒಳಗೆ `audioLevelRef.current` ಅನ್ನು ಓದಿ (ref ಅನ್ನು ಓದುವುದರಿಂದ ಮರು-ರೆಂಡರ್‌ಗಳು ಆಗುವುದಿಲ್ಲ), ಅಥವಾ ಅದನ್ನು ಮಧ್ಯಂತರದಲ್ಲಿ ಮಾದರಿಯಾಗಿ ತೆಗೆದು ಫಲಿತಾಂಶವನ್ನು React-ರೆಂಡರ್ ಮಾಡಿದ UI ಗಾಗಿ ಸ್ಥಿತಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ. `audioLevel` ಸಂಖ್ಯೆ ಬಳಕೆಯಲ್ಲಿಲ್ಲ ಮತ್ತು ಯಾವಾಗಲೂ `0` ಆಗಿರುತ್ತದೆ -- ಅದರ ಮೇಲೆ ಲಾಜಿಕ್ ನಿರ್ಮಿಸಬೇಡಿ.
  </Accordion>
</AccordionGroup>