คอมโพเนนต์ React

คอมโพเนนต์ ThunderPhoneWidget แสดงแถบการโทรแบบกลาสมอร์ฟิกพร้อมตัวควบคุมในตัวสำหรับปิดเสียง วางสาย และแสดงสถานะการเชื่อมต่อ เป็นวิธีที่รวดเร็วที่สุดในการเพิ่ม AI เสียงลงในแอป React

การติดตั้ง

npm install @thunderphone/widget

การใช้งานพื้นฐาน

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

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

Props

คอมโพเนนต์รับ props ต่อไปนี้ผ่าน 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 จะถูกส่งต่อไปยังคำขอเซสชัน (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 เพื่อให้เอเจนต์มีข้อมูลข้อเท็จจริงเกี่ยวกับหน้าที่ผู้เข้าชมกำลังดูอยู่ เช่น รายละเอียดผลิตภัณฑ์ ราคา หรือคำถามที่พบบ่อยเฉพาะหน้า ระบบจะตัดทอนข้อมูลนี้ฝั่งเซิร์ฟเวอร์ให้เหลือ 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 ไม่ถูกต้อง

ขั้นตอนถัดไป