Streaming Usage

import React, { useRef } from 'react';
import { useVocaleStreaming } from '@vocale/react';

function VoiceForm() {
  const [name, setName] = React.useState<string>("");

  const handleNameChange = (e) => setName(e.target.name);

  const {
    isRecording,
    isProcessing,
    startRecording,
    stopRecording
  } = useVocaleStreaming(
    'my-form',
    {
      type: 'HTML',
      schema: [
        // Define the form schema with necessary fields
        // You can include text, number, boolean fields, etc.
        // For example:
        { id: 'comment', type: 'text', fieldType: 'text' },
        // Other form fields...
      ],
    },
    {
      onCompletion: (event) => {
        // completions will trigger this callback whenever Vocale
        // detects there is any information related to any field
        event.completion.forEach((field) => {
            if(field.id === 'name') {
                setName(field.value);
            }
        })
      },
    }
  );

  return (
    <div>
      <h2>Voice Comment Form</h2>
      <form>
        {/* Form fields */}
        {/* For example, you can have a text field for the name */}
        <input 
          type="text" 
          name="name" 
          placeholder="Your name" 
          value={name} 
          onChange={handleNameChange} 
        />
        {/* Other form fields... */}
        {/* Button to start or stop voice recording */}
        {isRecording ? (
          <button onClick={stopRecording}>Stop Recording</button>
        ) : (
          <button onClick={startRecording}>Start Recording</button>
        )}
        {/* Submit button */}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default VoiceForm;