---
title: "Reacti komponent"
description: "Manusta ThunderPhone'i häälvidin Reacti rakendusse"
---

Komponent `ThunderPhoneWidget` renderdab klaasmorfse kõneriba sisseehitatud juhtelementidega vaigistamiseks, kõne lõpetamiseks ja ühenduse oleku kuvamiseks. See on kiireim viis hääle-AI lisamiseks Reacti rakendusse.

## Paigaldamine

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

## Põhikasutus

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

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

<Warning>
  Vidina korrektseks renderdamiseks **pead** importima CSS-faili. Ilma selleta ei ole vidinal stiile.
</Warning>

---

## Atribuudid

Komponent aktsepteerib `ThunderPhoneWidgetProps` kaudu järgmisi atribuute:

| Atribuut | Tüüp | Kohustuslik | Vaikeväärtus | Kirjeldus |
|------|------|----------|---------|-------------|
| `publishableKey` | `string` | Jah | -- | Avalik API-võti (`pk_live_...`) arendajate seadistustest. Häälagent tuvastatakse võtme vidina konfiguratsiooni põhjal automaatselt. |
| `theme` | `'light' \| 'dark'` | Ei | `'light'` | Värviskeem. Rakendab vidina juurelemendile klassi `tp--light` või `tp--dark`. |
| `primaryColor` | `string` | Ei | `'#000000'` (hele) / `'#ffffff'` (tume) | CSS-i värvistring, mida kasutatakse aktsentvärvina (helistamisnupp, lainekuju, aktiivsed indikaatorid). |
| `title` | `string` | Ei | `'Voice assistant'` | Vidinaribal kuvatav tekst. |
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Ei | `'bottom-right'` | Vidina fikseeritud asukoht vaatealas. |
| `apiBase` | `string` | Ei | `'https://api.thunderphone.com/v1'` | API baas-URL-i ülekirjutus. |
| `language` | `string` | Ei | -- | Seansipõhine keele ülekirjutus -- keelekood või lokaat, näiteks `en`, `es` või `fr-FR`. Kui seda pole määratud, kasutatakse häälagendi seadistatud keelt. |
| `voice` | `string` | Ei | -- | Seansipõhine hääle ülekirjutus -- hääle nimi, näiteks `maria`. Kui seda pole määratud, kasutatakse häälagendi seadistatud häält. |
| `context` | `string` | Ei | -- | Seansipõhine faktiline lehe- või saidikontekst, mis edastatakse häälagendile (näiteks külastaja vaadatava lehe üksikasjad). Serveri poolel kärbitakse 12 000 märgini. |
| `onConnect` | `() => void` | Ei | -- | Kutsutakse välja, kui häälseanss ühendub edukalt. |
| `onDisconnect` | `() => void` | Ei | -- | Kutsutakse välja, kui seanss lõpeb. |
| `onError` | `(error) => void` | Ei | -- | Kutsutakse välja vigade korral. Objektil `error` on väljad `error` (kood) ja `message`. |
| `className` | `string` | Ei | -- | Vidina konteinerile rakendatav täiendav CSS-klassi nimi. |
| `ringtone` | `boolean \| string` | Ei | `false` | Esita ühendamisel helinat. Vaikehelina jaoks `true` või kohandatud heli jaoks URL-string. |

---

## Näited

### Tume teema kohandatud värviga

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

### Kohandatud asukoht

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

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

### Seansipõhine keel, hääl ja kontekst

`language`, `voice` ja `context` propid edastatakse kõne alustamisel seansitaotlusele (`POST /widget/session`), alistades selle seansi jaoks agendi seadistatud vaikeväärtused:

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

Kasuta `context`-i, et anda agendile faktilisi teadmisi lehe kohta, mida külastaja vaatab -- tooteteave, hinnad või lehepõhised KKK-d. Serveris kärbitakse see 12 000 tähemärgini.

### Sündmuste tagasihelistamistega

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

### Kohandatud stiiliga

```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;
}
```

Kõigi saadaolevate CSS-klasside ja kohandatud omaduste kohta vaata [stiilimise juhendit](/et/widget/styling).

### Helinaga

Esita ühenduse loomise ajal telefoni helinat:

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

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

Kasuta kohandatud helinat, edastades helifaili URL-i:

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

Helin kordub, kuni vidin on olekus `connecting`, ning vaibub sujuvalt, kui agent ühendub.

### Kohandatud API baasaadressiga

<Tip>
  `apiBase` tuleb määrata ainult siis, kui kasutad ise majutatud või puhverserveri API lõpp-punkti. Vaikeväärtus osutab aadressile `https://api.thunderphone.com/v1`.
</Tip>

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

---

## Vigade käsitlemine

Kui `onError` tagasihelistamine käivitub, saab see kahe väljaga veaobjekti:

| Väli | Tüüp | Kirjeldus |
|-------|------|-------------|
| `error` | `string` | Masinloetav veakood |
| `message` | `string` | Inimloetav vea kirjeldus |

Levinud veakoodid hõlmavad lubamata domeeni, leidmata agenti ja vigast API-võtit.

---

## Järgmised sammud

<CardGroup cols={2}>
  <Card title="Peata konks" icon="code" href="/et/widget/headless-hook">
    Vajad kasutajaliidese üle täielikku kontrolli? Kasuta selle asemel konksu `useThunderPhone`.
  </Card>
  <Card title="Stiilimine" icon="palette" href="/et/widget/styling">
    Kohanda värve, suurusi ja paigutust CSS-i kohandatud omadustega.
  </Card>
</CardGroup>