cowork-os 0.3.21

package/src/renderer/hooks/useVoiceInput.ts

@@ -0,0 +1,268 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+export type VoiceInputState = 'idle' | 'recording' | 'processing';
+
+interface UseVoiceInputOptions {
+  /** Callback when transcription is complete */
+  onTranscript?: (text: string) => void;
+  /** Callback on error */
+  onError?: (error: string) => void;
+  /** Callback when voice is not configured (user clicks mic but settings not set up) */
+  onNotConfigured?: () => void;
+  /** Auto-stop recording after this many milliseconds (default: 30000) */
+  maxDuration?: number;
+}
+
+interface UseVoiceInputReturn {
+  /** Current state of voice input */
+  state: VoiceInputState;
+  /** Whether voice input is available (has microphone permission) */
+  isAvailable: boolean;
+  /** Whether voice settings are configured */
+  isConfigured: boolean;
+  /** Start recording */
+  startRecording: () => Promise<void>;
+  /** Stop recording and process */
+  stopRecording: () => void;
+  /** Cancel recording without processing */
+  cancelRecording: () => void;
+  /** Toggle recording (start if idle, stop if recording) */
+  toggleRecording: () => Promise<void>;
+  /** Audio level (0-100) for visualization */
+  audioLevel: number;
+  /** Error message if any */
+  error: string | null;
+}
+
+export function useVoiceInput(options: UseVoiceInputOptions = {}): UseVoiceInputReturn {
+  const { onTranscript, onError, onNotConfigured, maxDuration = 30000 } = options;
+
+  const [state, setState] = useState<VoiceInputState>('idle');
+  const [isAvailable, setIsAvailable] = useState(true);
+  const [isConfigured, setIsConfigured] = useState(false);
+  const [audioLevel, setAudioLevel] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const streamRef = useRef<MediaStream | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const animationFrameRef = useRef<number | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Check if voice settings are configured on mount
+  useEffect(() => {
+    const checkVoiceSettings = async () => {
+      try {
+        const settings = await window.electronAPI.getVoiceSettings();
+        // Check if STT provider is configured with necessary credentials
+        const hasCredentials =
+          (settings.sttProvider === 'azure' && !!settings.azureApiKey && !!settings.azureEndpoint) ||
+          (settings.sttProvider === 'openai' && !!settings.openaiApiKey) ||
+          (settings.sttProvider === 'elevenlabs' && !!settings.elevenLabsApiKey) ||
+          settings.sttProvider === 'local';
+        setIsConfigured(settings.enabled && hasCredentials);
+      } catch {
+        setIsConfigured(false);
+      }
+    };
+    checkVoiceSettings();
+  }, []);
+
+  const cleanup = useCallback(() => {
+    // Stop animation frame
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+
+    // Clear timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    // Stop media recorder
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+      mediaRecorderRef.current.stop();
+    }
+    mediaRecorderRef.current = null;
+
+    // Stop stream tracks
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach(track => track.stop());
+      streamRef.current = null;
+    }
+
+    // Reset analyser
+    analyserRef.current = null;
+    audioChunksRef.current = [];
+    setAudioLevel(0);
+  }, []);
+
+  const updateAudioLevel = useCallback(() => {
+    if (!analyserRef.current) return;
+
+    const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
+    analyserRef.current.getByteFrequencyData(dataArray);
+
+    // Calculate average volume
+    const average = dataArray.reduce((a, b) => a + b, 0) / dataArray.length;
+    const level = Math.min(100, (average / 128) * 100);
+    setAudioLevel(level);
+
+    if (state === 'recording') {
+      animationFrameRef.current = requestAnimationFrame(updateAudioLevel);
+    }
+  }, [state]);
+
+  const startRecording = useCallback(async () => {
+    if (state !== 'idle') return;
+
+    // Check if voice is configured
+    if (!isConfigured) {
+      onNotConfigured?.();
+      return;
+    }
+
+    setError(null);
+    audioChunksRef.current = [];
+
+    try {
+      // Request microphone access
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          sampleRate: 16000,
+        },
+      });
+      streamRef.current = stream;
+
+      // Set up audio analyser for visualization
+      const audioContext = new AudioContext();
+      const source = audioContext.createMediaStreamSource(stream);
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      source.connect(analyser);
+      analyserRef.current = analyser;
+
+      // Create media recorder
+      const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
+        ? 'audio/webm;codecs=opus'
+        : MediaRecorder.isTypeSupported('audio/webm')
+        ? 'audio/webm'
+        : 'audio/mp4';
+
+      const mediaRecorder = new MediaRecorder(stream, { mimeType });
+      mediaRecorderRef.current = mediaRecorder;
+
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+
+      mediaRecorder.onstop = async () => {
+        if (audioChunksRef.current.length === 0) {
+          cleanup();
+          setState('idle');
+          return;
+        }
+
+        setState('processing');
+
+        try {
+          // Combine audio chunks into a single blob
+          const audioBlob = new Blob(audioChunksRef.current, { type: mimeType });
+          const arrayBuffer = await audioBlob.arrayBuffer();
+
+          // Send to backend for transcription
+          const result = await window.electronAPI.voiceTranscribe(arrayBuffer);
+
+          if (result.error) {
+            setError(result.error);
+            onError?.(result.error);
+          } else if (result.text) {
+            onTranscript?.(result.text);
+          }
+        } catch (err) {
+          const errorMessage = err instanceof Error ? err.message : 'Transcription failed';
+          setError(errorMessage);
+          onError?.(errorMessage);
+        } finally {
+          cleanup();
+          setState('idle');
+        }
+      };
+
+      mediaRecorder.onerror = () => {
+        const errorMessage = 'Recording error occurred';
+        setError(errorMessage);
+        onError?.(errorMessage);
+        cleanup();
+        setState('idle');
+      };
+
+      // Start recording
+      mediaRecorder.start(100); // Collect data every 100ms
+      setState('recording');
+
+      // Start audio level updates
+      updateAudioLevel();
+
+      // Auto-stop after max duration
+      timeoutRef.current = setTimeout(() => {
+        if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
+          mediaRecorderRef.current.stop();
+        }
+      }, maxDuration);
+
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to access microphone';
+      setError(errorMessage);
+      onError?.(errorMessage);
+      setIsAvailable(false);
+      cleanup();
+      setState('idle');
+    }
+  }, [state, maxDuration, onTranscript, onError, onNotConfigured, isConfigured, cleanup, updateAudioLevel]);
+
+  const stopRecording = useCallback(() => {
+    if (state !== 'recording' || !mediaRecorderRef.current) return;
+
+    if (mediaRecorderRef.current.state === 'recording') {
+      mediaRecorderRef.current.stop();
+    }
+  }, [state]);
+
+  const cancelRecording = useCallback(() => {
+    if (state !== 'recording') return;
+
+    // Clear chunks so onstop doesn't process them
+    audioChunksRef.current = [];
+    cleanup();
+    setState('idle');
+  }, [state, cleanup]);
+
+  const toggleRecording = useCallback(async () => {
+    if (state === 'idle') {
+      await startRecording();
+    } else if (state === 'recording') {
+      stopRecording();
+    }
+    // If processing, do nothing
+  }, [state, startRecording, stopRecording]);
+
+  return {
+    state,
+    isAvailable,
+    isConfigured,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+    toggleRecording,
+    audioLevel,
+    error,
+  };
+}

package/src/renderer/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CoWork OS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/src/renderer/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/renderer/quick-input.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quick Task</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html, body {
+        height: 100%;
+        background: transparent;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        overflow: hidden;
+      }
+
+      #root {
+        height: 100%;
+      }
+
+      .quick-input-container {
+        height: 100%;
+        padding: 12px;
+        display: flex;
+        align-items: center;
+        background: rgba(30, 30, 30, 0.95);
+        border-radius: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+      }
+
+      .quick-input-icon {
+        width: 32px;
+        height: 32px;
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        opacity: 0.7;
+      }
+
+      .quick-input-icon svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      .quick-input-field {
+        flex: 1;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: #fff;
+        font-size: 16px;
+        font-weight: 400;
+        caret-color: #007AFF;
+      }
+
+      .quick-input-field::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      .quick-input-submit {
+        width: 36px;
+        height: 36px;
+        margin-left: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #007AFF;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: background 0.2s, transform 0.1s;
+      }
+
+      .quick-input-submit:hover {
+        background: #0066CC;
+      }
+
+      .quick-input-submit:active {
+        transform: scale(0.95);
+      }
+
+      .quick-input-submit svg {
+        width: 18px;
+        height: 18px;
+        color: #fff;
+      }
+
+      .quick-input-hint {
+        position: absolute;
+        bottom: -24px;
+        left: 12px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div class="quick-input-container">
+        <div class="quick-input-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M12 8v8M8 12h8"/>
+          </svg>
+        </div>
+        <input
+          type="text"
+          class="quick-input-field"
+          placeholder="What would you like to do?"
+          autofocus
+          id="taskInput"
+        />
+        <button class="quick-input-submit" id="submitBtn" title="Create Task">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <script>
+      const input = document.getElementById('taskInput');
+      const submitBtn = document.getElementById('submitBtn');
+
+      console.log('[QuickInput] Loaded, electronAPI:', !!window.electronAPI);
+
+      function submitTask() {
+        const task = input.value.trim();
+        console.log('[QuickInput] Submitting task:', task, 'electronAPI:', !!window.electronAPI);
+        if (task && window.electronAPI) {
+          console.log('[QuickInput] Calling quickInputSubmit...');
+          window.electronAPI.quickInputSubmit(task)
+            .then(() => console.log('[QuickInput] Submit successful'))
+            .catch(err => console.error('[QuickInput] Submit error:', err));
+        } else if (task && !window.electronAPI) {
+          console.error('[QuickInput] electronAPI not available!');
+        }
+      }
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          submitTask();
+        } else if (e.key === 'Escape') {
+          if (window.electronAPI) {
+            window.electronAPI.quickInputClose();
+          }
+        }
+      });
+
+      submitBtn.addEventListener('click', submitTask);
+
+      // Auto-focus input
+      input.focus();
+    </script>
+  </body>
+</html>