---
title: "React komponents"
description: "Ieguliet ThunderPhone balss logrīku React lietotnē"
---

Komponents `ThunderPhoneWidget` atveido stiklam līdzīgu zvana joslu ar iebūvētām vadīklām skaņas izslēgšanai, zvana beigšanai un savienojuma statusa attēlošanai. Tas ir ātrākais veids, kā React lietotnei pievienot balss AI.

## Instalēšana

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

## Pamatlietošana

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

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

<Warning>
  Jums **obligāti** jāimportē CSS fails, lai logrīks tiktu atveidots pareizi. Bez tā logrīkam nebūs stilu.
</Warning>

---

## Rekvizīti

Komponents pieņem šādus rekvizītus, izmantojot `ThunderPhoneWidgetProps`:

| Rekvizīts | Tips | Obligāts | Noklusējums | Apraksts |
|------|------|----------|---------|-------------|
| `publishableKey` | `string` | Jā | -- | Publicējamā API atslēga (`pk_live_...`) no informācijas paneļa sadaļas **Tīmekļa logrīki**. Balss aģents tiek automātiski noteikts pēc atslēgas logrīka konfigurācijas. |
| `theme` | `'light' \| 'dark'` | Nē | `'light'` | Krāsu shēma. Logrīka saknes elementam pievieno klasi `tp--light` vai `tp--dark`. |
| `primaryColor` | `string` | Nē | `'#000000'` (gaišs) / `'#ffffff'` (tumšs) | CSS krāsas virkne, kas tiek izmantota kā akcenta krāsa (zvana poga, viļņu forma, aktīvie indikatori). |
| `title` | `string` | Nē | `'Voice assistant'` | Logrīka joslā parādāmais teksts. |
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Nē | `'bottom-right'` | Logrīka fiksētā pozīcija skatlaukā. |
| `apiBase` | `string` | Nē | `'https://api.thunderphone.com/v1'` | API bāzes URL pārrakstīšana. |
| `language` | `string` | Nē | -- | Valodas pārrakstīšana katrai sesijai — valodas kods vai lokalizācija, piemēram, `en`, `es` vai `fr-FR`. Ja nav iestatīta, tiek izmantota balss aģenta konfigurētā valoda. Nepieciešams `language` atslēgas [pārlūkprogrammas pārrakstīšanas iestatījumos](/lv/guides/embed-web-widget). |
| `voice` | `string` | Nē | -- | Balss pārrakstīšana katrai sesijai — balss nosaukums, piemēram, `maria`. Ja nav iestatīta, tiek izmantota balss aģenta konfigurētā balss. Nepieciešams `voice` atslēgas [pārlūkprogrammas pārrakstīšanas iestatījumos](/lv/guides/embed-web-widget). |
| `context` | `string` | Nē | -- | Balss aģentam nodotais faktiskais lapas vai vietnes konteksts katrai sesijai (piemēram, informācija par lapu, kuru apmeklētājs pašlaik skatās). Servera pusē tiek saīsināts līdz 12 000 rakstzīmēm. Nepieciešams `context` atslēgas [pārlūkprogrammas pārrakstīšanas iestatījumos](/lv/guides/embed-web-widget). |
| `onConnect` | `() => void` | Nē | -- | Tiek izsaukts, kad balss sesija ir sekmīgi savienota. |
| `onDisconnect` | `() => void` | Nē | -- | Tiek izsaukts, kad sesija beidzas. |
| `onError` | `(error) => void` | Nē | -- | Tiek izsaukts kļūdu gadījumā. Objektam `error` ir lauki `error` (kods) un `message`. |
| `className` | `string` | Nē | -- | Papildu CSS klases nosaukums, kas tiek pievienots logrīka konteineram. |
| `ringtone` | `boolean \| string` | Nē | `false` | Savienojuma izveides laikā atskaņo zvana signālu. Noklusējuma zvana signālam izmantojiet `true`, bet pielāgotam audio — URL virkni. |

---

## Piemēri

### Tumšais motīvs ar pielāgotu krāsu

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

### Pielāgota pozīcija

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

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

### Valoda, balss un konteksts katrai sesijai

`language`, `voice` un `context` rekvizīti tiek pārsūtīti uz sesijas pieprasījumu (`POST /widget/session`), kad sākas zvans, ignorējot šīs sesijas aģenta konfigurētos noklusējumus. Informācijas panelī attiecīgajam logrīkam (vai atslēgas `allowed_overrides`) sadaļā **Pārlūka ignorēšanas** ieslēdziet katru izmantoto rekvizītu. Jauni logrīki nepieņem nevienu rekvizītu, un sesijas pieprasījums ar izslēgtu rekvizītu neizdodas ar `400 override_not_allowed`; skatiet [Pārlūka ignorēšanas](/lv/guides/embed-web-widget).

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

Izmantojiet `context`, lai sniegtu balss aģentam faktisku informāciju par lapu, kurā atrodas apmeklētājs — informāciju par produktu, cenas vai lapai specifiskus bieži uzdotos jautājumus. Balss aģents to uztver kā lapas saturu, nevis kā norādījumus. Servera pusē tas tiek saīsināts līdz 12 000 rakstzīmēm.

### Ar notikumu atzvaniem

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

### Ar pielāgotu stilu

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

Skatiet [stila ceļvedi](/lv/widget/styling), lai uzzinātu par visām pieejamajām CSS klasēm un pielāgotajiem rekvizītiem.

### Ar zvana signālu

Savienojuma izveides laikā atskaņojiet tālruņa zvana skaņu:

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

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

Izmantojiet pielāgotu zvana signālu, nododot audio faila URL:

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

Zvana signāls tiek atkārtots, kamēr logrīks ir stāvoklī `connecting`, un vienmērīgi apklust, kad pievienojas balss aģents.

### Ar pielāgotu API bāzi

<Tip>
  `apiBase` ir jāiestata tikai tad, ja izmantojat pašu mitinātu vai starpniekservera API galapunktu. Noklusējuma vērtība norāda uz `https://api.thunderphone.com/v1`.
</Tip>

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

---

## Kļūdu apstrāde

Kad tiek izsaukts `onError` atzvans, tas saņem kļūdas objektu ar diviem laukiem:

| Lauks | Tips | Apraksts |
|-------|------|-------------|
| `error` | `string` | Mašīnlasāms kļūdas kods |
| `message` | `string` | Cilvēkam lasāms kļūdas apraksts |

Biežākie kļūdu kodi ietver neatļautu domēnu, neatrastu balss aģentu un nederīgu API atslēgu.

---

## Nākamās darbības

<CardGroup cols={2}>
  <Card title="Headless Hook" icon="code" href="/lv/widget/headless-hook">
    Vai nepieciešama pilnīga saskarnes kontrole? Tā vietā izmantojiet `useThunderPhone` āķi.
  </Card>
  <Card title="Stilizēšana" icon="palette" href="/lv/widget/styling">
    Pielāgojiet krāsas, izmērus un izkārtojumu, izmantojot CSS pielāgotās īpašības.
  </Card>
</CardGroup>