ಹೆಡ್‌ಲೆಸ್ ಹುಕ್

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

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

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

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

ಸ್ಥಾಪನೆ

npm install @thunderphone/widget

ಮೂಲ ಬಳಕೆ

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

ಆಯ್ಕೆಗಳು

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

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

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

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

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

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

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

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

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 ಅನ್ನು ನಿಯಮಿತ ಮಧ್ಯಂತರದಲ್ಲಿ ಮಾದರಿ ತೆಗೆದು ಫಲಿತಾಂಶವನ್ನು ಸ್ಥಿತಿಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ:

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

ಸ್ಥಿತಿ ಯಂತ್ರ

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

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

ಉದಾಹರಣೆಗಳು

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

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

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

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

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 ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಪಾಸ್ ಮಾಡಿ.

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

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

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

ಸಲಹೆಗಳು