@longline/aqua-ui 1.0.196 → 1.0.198

package/hooks/useAssemblyAIRecorder/stories/AssemblyAudioInput.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { useAssemblyAIRecorder } from '../useAssemblyAIRecorder';
+var AssemblyAudioInput = function (props) {
+    var _a = useState('initial'), transcript = _a[0], setTranscript = _a[1];
+    var _b = useAssemblyAIRecorder(props.url, setTranscript), recordingStatus = _b.recordingStatus, toggleRecording = _b.toggleRecording;
+    var getLabel = function (recordingStatus) {
+        switch (recordingStatus) {
+            case 'connecting': return "Connecting";
+            case 'recording': return "Recording";
+            default: return "Idle";
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: toggleRecording }, getLabel(recordingStatus)),
+        React.createElement("p", { style: { border: 'solid 1px blue', minHeight: '200px', color: 'white' } }, transcript)));
+};
+export { AssemblyAudioInput };

package/hooks/useAssemblyAIRecorder/useAssemblyAIRecorder.d.ts

@@ -0,0 +1,27 @@
+type TranscriptCallback = (text: string) => void;
+type TRecordingStatus = 'idle' | 'connecting' | 'recording';
+/**
+ * useAssemblyAIRecorder
+ *
+ * A custom React hook for real-time audio transcription using AssemblyAI's
+ * streaming API.
+ *
+ * When recording is toggled on, it takes a few moments to establish a web
+ * socket connection. During this time, the recording status will be
+ * `'connecting'`.
+ *
+ * @param url - Back-end URL for obtaining temporary token
+ * @param onTranscript - Callback that receives updated transcript text.
+ * @returns An object containing:
+ *   - recordingStatus: 'idle' | 'connecting' | 'recording'
+ *   - toggleRecording: function to start or stop recording
+ *
+ * The `SpeechManager` singleton is use to keep track of which
+ * AssemblyAIRecorder is currently recording; when a new recording is started,
+ * the current one is stopped.
+ */
+declare const useAssemblyAIRecorder: (url: string, onTranscript: TranscriptCallback) => {
+    recordingStatus: TRecordingStatus;
+    toggleRecording: () => Promise<void>;
+};
+export { useAssemblyAIRecorder, TRecordingStatus };

package/hooks/useAssemblyAIRecorder/useAssemblyAIRecorder.js

@@ -0,0 +1,294 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { SpeechManager } from './SpeechManager';
+//
+// The audio processing needs a worklet that runs in a separate thread.
+// Ordinarily such a worklet would have to reside in a separate JavaScript
+// file, not part of the Webpack bundle, that gets interpreted here using
+// audioContext.audioWorklet.addModule. However, we can place the JavaScript
+// code in a template string, compile that into a blob, and then use that
+// instead. This way, no separate JS file needs to be deployed with AquaUI.
+// 
+var moduleScript = /* js */ "\nconst MAX_16BIT_INT = 32767\nclass AudioProcessor extends AudioWorkletProcessor {\n  constructor() {\n    super();\n\n    // Input is browser sample rate (typically 48000 Hz in Firefox)\n    // This variable is globally available inside the AudioWorkletProcessor\n    // scope.\n    this.inputSampleRate = sampleRate;\n    console.log('Detected input sample rate:', sampleRate);\n    this.targetSampleRate = 16000;\n    this.ratio = this.inputSampleRate / this.targetSampleRate;\n\n    // Buffer of input samples for resampling\n    this.buffer = [];\n\n    // Number of samples per output chunk\n    this.chunkSize = 1600; // ~100ms at 16kHz\n  }\n\n  /**\n   * Resample the input buffer to the target sample rate using linear interpolation.\n   */\n  resample(inputBuffer) {\n    const outputLength = Math.floor(inputBuffer.length / this.ratio);\n    const output = new Float32Array(outputLength);\n\n    for (let i = 0; i < outputLength; i++) {\n      const idx = i * this.ratio;\n      const idxInt = Math.floor(idx);\n      const idxFrac = idx - idxInt;\n\n      const sample1 = inputBuffer[idxInt] || 0;\n      const sample2 = inputBuffer[idxInt + 1] || 0;\n      output[i] = sample1 + (sample2 - sample1) * idxFrac;\n    }\n\n    return output;\n  }\n\n  /**\n   * Converts Float32 PCM [-1, 1] to 16-bit signed PCM\n   */\n  floatTo16BitPCM(float32Array) {\n    const int16Array = new Int16Array(float32Array.length);\n    for (let i = 0; i < float32Array.length; i++) {\n      let s = Math.max(-1, Math.min(1, float32Array[i]));\n      int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;\n    }\n    return int16Array;\n  }\n\n  /**\n   * Called automatically by browser on each audio frame (128 samples per channel).\n   */\n  process(inputs, outputs, parameters) {\n    try {\n      const input = inputs[0];\n      if (!input || input.length === 0) return true;\n\n      // Read from mono channel\n      const channelData = input[0];\n      this.buffer.push(...channelData);\n\n      // Only process if we have enough input to produce a full output chunk\n      const neededInputSamples = this.chunkSize * this.ratio;\n      if (this.buffer.length >= neededInputSamples) {\n        const inputForChunk = this.buffer.slice(0, neededInputSamples);\n        const resampled = this.resample(inputForChunk);\n        const pcm = this.floatTo16BitPCM(resampled);\n\n        this.port.postMessage({ audio_data: pcm }); // Send Int16Array to main thread\n\n        // Remove consumed input samples\n        this.buffer = this.buffer.slice(neededInputSamples);\n      }\n\n      return true; // Keep processor alive\n    } catch (error) {\n      console.error(error)\n      return false\n    }\n  }\n}\n\nregisterProcessor('audio-processor', AudioProcessor);\n";
+/**
+ * useAssemblyAIRecorder
+ *
+ * A custom React hook for real-time audio transcription using AssemblyAI's
+ * streaming API.
+ *
+ * When recording is toggled on, it takes a few moments to establish a web
+ * socket connection. During this time, the recording status will be
+ * `'connecting'`.
+ *
+ * @param url - Back-end URL for obtaining temporary token
+ * @param onTranscript - Callback that receives updated transcript text.
+ * @returns An object containing:
+ *   - recordingStatus: 'idle' | 'connecting' | 'recording'
+ *   - toggleRecording: function to start or stop recording
+ *
+ * The `SpeechManager` singleton is use to keep track of which
+ * AssemblyAIRecorder is currently recording; when a new recording is started,
+ * the current one is stopped.
+ */
+var useAssemblyAIRecorder = function (url, onTranscript) {
+    // State to track the current recording status
+    var _a = useState('idle'), recordingStatus = _a[0], setRecordingStatus = _a[1];
+    // WebSocket connection to AssemblyAI
+    var wsRef = useRef(null);
+    // Audio context used for audio capture and processing
+    var audioContextRef = useRef(null);
+    // Queue of raw audio samples
+    var audioBufferQueueRef = useRef(new Int16Array(0));
+    // Active audio stream from the microphone
+    var streamRef = useRef(null);
+    // Stores ordered transcripts from AssemblyAI (by turn_order)
+    var turnsRef = useRef({});
+    /**
+     * Utility to merge two Int16Array buffers
+     */
+    var mergeBuffers = function (lhs, rhs) {
+        var merged = new Int16Array(lhs.length + rhs.length);
+        merged.set(lhs, 0);
+        merged.set(rhs, lhs.length);
+        return merged;
+    };
+    /**
+     * Requests permission and returns the user's microphone stream
+     */
+    var requestPermission = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var stream;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, navigator.mediaDevices.getUserMedia({ audio: true })];
+                case 1:
+                    stream = _a.sent();
+                    streamRef.current = stream;
+                    return [2 /*return*/, stream];
+            }
+        });
+    }); };
+    /**
+     * Begins recording audio using the AudioWorkletProcessor defined in
+     * audio-processor.js
+     *
+     * The onAudioCallback function is called with raw 16kHz 16-bit mono
+     * PCM data.
+     */
+    var startRecording = function (onAudioCallback) { return __awaiter(void 0, void 0, void 0, function () {
+        var stream, audioContext, source, scriptUrl, node;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, requestPermission()];
+                case 1:
+                    stream = _a.sent();
+                    audioContext = new AudioContext({
+                        // AssemblyAI requires a sample rate of 16000. Browserscan will
+                        // decide their own sample rate. Firefox will not allow 16000. 
+                        // For that reason, let the browser set the sample rate to whatever
+                        // it wants, then have the AudioWorklet do the resampling.
+                        // sampleRate: 16000 <--- Leave off
+                        latencyHint: 'balanced',
+                    });
+                    audioContextRef.current = audioContext;
+                    source = audioContext.createMediaStreamSource(stream);
+                    scriptUrl = URL.createObjectURL(new Blob([moduleScript], { type: "text/javascript" }));
+                    return [4 /*yield*/, audioContext.audioWorklet.addModule(scriptUrl)];
+                case 2:
+                    _a.sent();
+                    node = new AudioWorkletNode(audioContext, 'audio-processor');
+                    source.connect(node);
+                    node.connect(audioContext.destination); // Required to keep node alive in some browsers
+                    // Handle incoming audio from the AudioWorkletProcessor
+                    node.port.onmessage = function (event) {
+                        var currentBuffer = new Int16Array(event.data.audio_data);
+                        var bufferQueue = audioBufferQueueRef.current;
+                        audioBufferQueueRef.current = mergeBuffers(bufferQueue, currentBuffer);
+                        var bufferDuration = (audioBufferQueueRef.current.length / audioContext.sampleRate) * 1000;
+                        // When we have at least 100ms of audio, send it to AssemblyAI
+                        if (bufferDuration >= 100) {
+                            var totalSamples = Math.floor(audioContext.sampleRate * 0.1); // 100ms worth
+                            var finalBuffer = new Uint8Array(audioBufferQueueRef.current.subarray(0, totalSamples).buffer);
+                            audioBufferQueueRef.current = audioBufferQueueRef.current.subarray(totalSamples);
+                            onAudioCallback(finalBuffer);
+                        }
+                    };
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * Stops all active recording resources and resets buffers
+     */
+    var stopRecording = function () {
+        var _a, _b;
+        // Stop all audio input tracks
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach(function (track) { return track.stop(); });
+        streamRef.current = null;
+        // Close the audio context
+        (_b = audioContextRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        audioContextRef.current = null;
+        // Clear audio buffer
+        audioBufferQueueRef.current = new Int16Array(0);
+    };
+    /**
+     * Fetches a temporary token for the AssemblyAI WebSocket API
+     */
+    var fetchToken = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var response, data, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    return [4 /*yield*/, fetch(url)];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _a.sent();
+                    return [2 /*return*/, data.token || null];
+                case 3:
+                    err_1 = _a.sent();
+                    console.error('Failed to fetch token', err_1);
+                    return [2 /*return*/, null];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * Gracefully terminates the WebSocket and recording session
+     */
+    var cleanup = function () {
+        var _a, _b;
+        try {
+            // Attempt to tell AssemblyAI we're done
+            (_a = wsRef.current) === null || _a === void 0 ? void 0 : _a.send(JSON.stringify({ type: 'Terminate' }));
+        }
+        catch (e) {
+            // If socket already closed, ignore
+        }
+        (_b = wsRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        wsRef.current = null;
+        stopRecording();
+        setRecordingStatus('idle');
+    };
+    /**
+     * Toggles the recording state: start or stop
+     */
+    var toggleRecording = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var token, endpoint, ws;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (recordingStatus === 'recording' || recordingStatus === 'connecting') {
+                        cleanup();
+                        return [2 /*return*/];
+                    }
+                    // Turn off any other speech recording through the SpeechManager singleton.
+                    // Register this stream as the current one.
+                    console.log("START SESSION");
+                    SpeechManager.startNewSession(function () {
+                        cleanup();
+                    });
+                    // Update state to show we are connecting
+                    setRecordingStatus('connecting');
+                    return [4 /*yield*/, fetchToken()];
+                case 1:
+                    token = _a.sent();
+                    if (!token) {
+                        console.error('Failed to get temp token');
+                        setRecordingStatus('idle');
+                        return [2 /*return*/];
+                    }
+                    endpoint = "wss://streaming.assemblyai.com/v3/ws?sample_rate=16000&formatted_finals=true&token=".concat(token);
+                    ws = new WebSocket(endpoint);
+                    wsRef.current = ws;
+                    // Reset transcription state
+                    turnsRef.current = {};
+                    // WebSocket connection established
+                    ws.onopen = function () {
+                        console.log('WebSocket connected.');
+                        // Start recording and streaming chunks
+                        startRecording(function (audioChunk) {
+                            if (ws.readyState === WebSocket.OPEN) {
+                                ws.send(audioChunk);
+                            }
+                            else {
+                                console.warn("Tried to send audio, but WebSocket is not open.");
+                            }
+                        });
+                        // We're officially recording now
+                        setRecordingStatus('recording');
+                    };
+                    // Handle messages from AssemblyAI
+                    ws.onmessage = function (event) {
+                        var msg = JSON.parse(event.data);
+                        if (msg.type === 'Turn') {
+                            var turn_order = msg.turn_order, transcript = msg.transcript;
+                            turnsRef.current[turn_order] = transcript;
+                            // Reassemble the transcript in order
+                            var ordered = Object.keys(turnsRef.current)
+                                .sort(function (a, b) { return Number(a) - Number(b); })
+                                .map(function (k) { return turnsRef.current[k]; })
+                                .join(' ');
+                            onTranscript(ordered);
+                        }
+                    };
+                    ws.onerror = function (err) {
+                        console.error('WebSocket error:', err);
+                    };
+                    ws.onclose = function () {
+                        console.log('WebSocket closed.');
+                    };
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [recordingStatus, onTranscript]);
+    /**
+     * Ensures everything is cleaned up if the component using this hook unmounts
+     */
+    useEffect(function () {
+        return function () {
+            SpeechManager.stopCurrentSession();
+        };
+    }, []);
+    return {
+        recordingStatus: recordingStatus, // 'idle' | 'connecting' | 'recording'
+        toggleRecording: toggleRecording,
+    };
+};
+export { useAssemblyAIRecorder };

package/hooks/useOpenAIRecorder/index.d.ts

@@ -0,0 +1 @@
+export { useOpenAIRecorder } from './useOpenAIRecorder';

package/hooks/useOpenAIRecorder/index.js

@@ -0,0 +1 @@
+export { useOpenAIRecorder } from './useOpenAIRecorder';

package/hooks/useOpenAIRecorder/old/AudioInputNoHook.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+}
+/**
+ * The extended media recorder allows converting to .wav format.
+ */
+declare const AudioInput: (props: IProps) => React.JSX.Element;
+export { AudioInput };

package/hooks/useOpenAIRecorder/old/AudioInputNoHook.js

@@ -0,0 +1,192 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import * as React from 'react';
+import { MediaRecorder, register } from 'extendable-media-recorder';
+import { connect } from 'extendable-media-recorder-wav-encoder';
+import { Fab } from '../../../controls/Fab';
+import { SVG } from '../../../svg';
+/**
+ * The extended media recorder allows converting to .wav format.
+ */
+var AudioInput = function (props) {
+    var _a = React.useState(false), isRecording = _a[0], setIsRecording = _a[1];
+    var _b = React.useState(''), transcript = _b[0], setTranscript = _b[1];
+    var mediaRecorderRef = React.useRef(null);
+    var streamRef = React.useRef(null);
+    var streamIdRef = React.useRef(Date.now().toString()); // Unique per session
+    var sourceRef = React.useRef(null);
+    var header;
+    var startRecording = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, _b, mediaRecorder, err_1;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 4, , 5]);
+                    _a = register;
+                    return [4 /*yield*/, connect()];
+                case 1: return [4 /*yield*/, _a.apply(void 0, [_c.sent()])];
+                case 2:
+                    _c.sent();
+                    _b = streamRef;
+                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia({ audio: true })];
+                case 3:
+                    _b.current = _c.sent();
+                    mediaRecorder = new MediaRecorder(streamRef.current, { mimeType: 'audio/wav' });
+                    mediaRecorder.ondataavailable = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+                        var blob, formData, content, error_1;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!(event.data.size > 0)) return [3 /*break*/, 8];
+                                    blob = event.data;
+                                    formData = new FormData();
+                                    if (!(header === undefined)) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, blob.arrayBuffer()];
+                                case 1:
+                                    header = (_a.sent()).slice(0, 44);
+                                    return [3 /*break*/, 4];
+                                case 2: return [4 /*yield*/, blob.arrayBuffer()];
+                                case 3:
+                                    content = _a.sent();
+                                    blob = new Blob([header, content], { type: blob.type });
+                                    _a.label = 4;
+                                case 4:
+                                    formData.append('audio', blob);
+                                    formData.append('stream_id', streamIdRef.current);
+                                    _a.label = 5;
+                                case 5:
+                                    _a.trys.push([5, 7, , 8]);
+                                    return [4 /*yield*/, fetch('http://api.flow/api/ai/upload-audio-chunk', {
+                                            method: 'POST',
+                                            body: formData,
+                                        })];
+                                case 6:
+                                    _a.sent();
+                                    return [3 /*break*/, 8];
+                                case 7:
+                                    error_1 = _a.sent();
+                                    console.error('Upload failed:', error_1);
+                                    return [3 /*break*/, 8];
+                                case 8: return [2 /*return*/];
+                            }
+                        });
+                    }); };
+                    mediaRecorderRef.current = mediaRecorder;
+                    mediaRecorder.start(20000); // 4-second chunks
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_1 = _c.sent();
+                    console.error('Microphone access error:', err_1);
+                    setIsRecording(false);
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (isRecording) {
+            startRecording();
+        }
+        else {
+            if (((_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.state) !== 'inactive') {
+                (_b = mediaRecorderRef.current) === null || _b === void 0 ? void 0 : _b.stop();
+            }
+            (_c = streamRef.current) === null || _c === void 0 ? void 0 : _c.getTracks().forEach(function (track) { return track.stop(); });
+        }
+        ;
+    }, [isRecording]);
+    var readyStateToString = function (state) {
+        switch (state) {
+            case EventSource.CLOSED: return "CLOSED";
+            case EventSource.OPEN: return "OPEN";
+            case EventSource.CONNECTING: return "CONNECTING";
+            default:
+                return "UNKNOWN";
+        }
+    };
+    var eventPhaseToString = function (phase) {
+        switch (phase) {
+            case Event.NONE: return "NONE";
+            case Event.CAPTURING_PHASE: return "CAPTURING_PHASE";
+            case Event.AT_TARGET: return "AT_TARGET";
+            case Event.BUBBLING_PHASE: return "BUBBLING_PHASE";
+            default:
+                return "UNKNOWN";
+        }
+    };
+    React.useEffect(function () {
+        if (isRecording) {
+            sourceRef.current = new EventSource("http://api.flow/api/ai/transcribe-stream/".concat(streamIdRef.current));
+            sourceRef.current.onmessage = function (event) {
+                console.log("Message:", event.data);
+                console.log("ReadyState:", readyStateToString(sourceRef.current.readyState));
+                setTranscript(function (prev) { return prev + event.data + '\n'; });
+            };
+            sourceRef.current.onerror = function (err) {
+                console.error('SSE error:', err);
+                console.log('EventPhase:', eventPhaseToString(err.eventPhase));
+                console.log('ReadyState:', readyStateToString(sourceRef.current.readyState));
+                sourceRef.current.close();
+            };
+        }
+        return function () { var _a; return (_a = sourceRef.current) === null || _a === void 0 ? void 0 : _a.close(); };
+    }, [isRecording]);
+    var start = function () {
+        setTranscript('');
+        streamIdRef.current = Date.now().toString(); // Reset for new session
+        setIsRecording(true);
+    };
+    var stop = function () {
+        var _a;
+        setIsRecording(false);
+        if (((_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.state) !== 'inactive') {
+            mediaRecorderRef.current.stop();
+        }
+    };
+    var handleToggle = function () {
+        if (isRecording) {
+            stop();
+        }
+        else {
+            start();
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement(Fab, { title: "Record", active: isRecording, icon: SVG.Icons.Microphone, onClick: handleToggle })));
+};
+export { AudioInput };

package/hooks/useOpenAIRecorder/old/AudioInputStandardMedia.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface IProps {
+}
+declare const AudioInput: (props: IProps) => React.JSX.Element;
+export { AudioInput };