Exemples

'use client';
 
import {
  TranscriptionProvider,
  TranscriptionButton,
  useTranscription,
} from '@ephia/transcribe-sdk';
import '@ephia/transcribe-sdk/dist/styles.css';
 
export function TranscriptionDemo({ token }: { token: string }) {
  return (
    <TranscriptionProvider>
      <TranscriptionButton
        token={token}
        endUserId="user-123"
        theme="dark"
        variant="standard"
      />
      <TranscriptPanel />
    </TranscriptionProvider>
  );
}
 
function TranscriptPanel() {
  const {
    chunks,
    isRecording,
    isConnected,
    error,
    errorCode,
    streamingWarning,
    clear,
  } = useTranscription();
 
  return (
    <div>
      <p>
        {isConnected ? 'Connecté' : 'Déconnecté'}
        {isRecording ? ' · Enregistrement' : ''}
      </p>
      {error && (
        <p role="alert">
          {error} ({errorCode})
        </p>
      )}
      {streamingWarning && (
        <p role="status">{streamingWarning.message}</p>
      )}
      <button type="button" onClick={clear}>
        Effacer la transcription
      </button>
      <div>
        {chunks.map((c) => (
          <p key={c.id}>
            [{c.status}] {c.text}
          </p>
        ))}
      </div>
    </div>
  );
}