import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';
import '@syncfusion/ej2-react-inputs/styles/material.css';

function VoiceNoteApp() {
  const [transcript, setTranscript] = useState('');

  const handleTranscriptChanged = (args: TranscriptChangedEventArgs) => {
    setTranscript(args.transcript);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Voice Note Recorder</h2>
      
      {/* SpeechToText component with microphone button */}
      <SpeechToTextComponent 
        id="speechToText"
        transcriptChanged={handleTranscriptChanged}
      />
      
      {/* Display transcribed text */}
      <TextAreaComponent
        id="noteArea"
        value={transcript}
        resizeMode="None"
        rows={5}
        cols={50}
        placeholder="Your voice will appear here..."
      />
    </div>
  );
}

export default VoiceNoteApp;

import { SpeechToTextComponent, TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';

function VoiceForm() {
  const [formData, setFormData] = useState({
    name: '',
    message: ''
  });

  const handleNameTranscript = (args: any) => {
    setFormData(prev => ({ ...prev, name: args.transcript }));
  };

  const handleMessageTranscript = (args: any) => {
    setFormData(prev => ({ ...prev, message: args.transcript }));
  };

  return (
    <div>
      <label>Name (speak):</label>
      <SpeechToTextComponent transcriptChanged={handleNameTranscript} />
      <TextBoxComponent value={formData.name} />
      
      <label>Message (speak):</label>
      <SpeechToTextComponent transcriptChanged={handleMessageTranscript} />
      <TextBoxComponent value={formData.message} />
    </div>
  );
}

import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

function VoiceControlApp() {
  const speechRef = useRef<SpeechToTextComponent>(null);

  const startVoiceInput = () => {
    speechRef.current?.startListening();
  };

  const stopVoiceInput = () => {
    speechRef.current?.stopListening();
  };

  return (
    <div>
      <SpeechToTextComponent ref={speechRef} />
      <button onClick={startVoiceInput}>Start Recording</button>
      <button onClick={stopVoiceInput}>Stop Recording</button>
    </div>
  );
}

import { SpeechToTextComponent, ErrorEventArgs } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';

function VoiceWithErrorHandling() {
  const [error, setError] = useState('');
  const [isListening, setIsListening] = useState(false);

  const handleError = (args: ErrorEventArgs) => {
    // args.errorMessage is the human-readable description; args.error is the error code
    setError(args.errorMessage || `Error: ${args.error}`);
  };

  const handleStart = () => {
    setIsListening(true);
    setError('');
  };

  const handleStop = () => {
    setIsListening(false);
  };

  return (
    <div>
      <SpeechToTextComponent 
        onError={handleError}
        onStart={handleStart}
        onStop={handleStop}
      />
      {isListening && <p>🎤 Listening...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}