mcp-voice-hooks 1.0.0

package/public/app.js

@@ -0,0 +1,321 @@
+class VoiceHooksClient {
+    constructor() {
+        this.baseUrl = 'http://localhost:3000';
+        this.debug = localStorage.getItem('voiceHooksDebug') === 'true';
+        this.utteranceInput = document.getElementById('utteranceInput');
+        this.sendBtn = document.getElementById('sendBtn');
+        this.refreshBtn = document.getElementById('refreshBtn');
+        this.clearAllBtn = document.getElementById('clearAllBtn');
+        this.utterancesList = document.getElementById('utterancesList');
+        this.totalCount = document.getElementById('totalCount');
+        this.pendingCount = document.getElementById('pendingCount');
+        this.deliveredCount = document.getElementById('deliveredCount');
+        
+        // Voice controls
+        this.listenBtn = document.getElementById('listenBtn');
+        this.listenBtnText = document.getElementById('listenBtnText');
+        this.listeningIndicator = document.getElementById('listeningIndicator');
+        this.interimText = document.getElementById('interimText');
+        
+        // Speech recognition
+        this.recognition = null;
+        this.isListening = false;
+        this.initializeSpeechRecognition();
+        
+        this.setupEventListeners();
+        this.loadData();
+        
+        // Auto-refresh every 2 seconds
+        setInterval(() => this.loadData(), 2000);
+    }
+    
+    initializeSpeechRecognition() {
+        // Check for browser support
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        
+        if (!SpeechRecognition) {
+            console.error('Speech recognition not supported in this browser');
+            this.listenBtn.disabled = true;
+            this.listenBtnText.textContent = 'Not Supported';
+            return;
+        }
+        
+        this.recognition = new SpeechRecognition();
+        this.recognition.continuous = true;
+        this.recognition.interimResults = true;
+        this.recognition.lang = 'en-US';
+        
+        // Handle results
+        this.recognition.onresult = (event) => {
+            let interimTranscript = '';
+            
+            for (let i = event.resultIndex; i < event.results.length; i++) {
+                const transcript = event.results[i][0].transcript;
+                
+                if (event.results[i].isFinal) {
+                    // User paused - send as complete utterance
+                    this.sendVoiceUtterance(transcript);
+                    // Clear interim text
+                    this.interimText.textContent = '';
+                    this.interimText.classList.remove('active');
+                } else {
+                    // Still speaking - show interim results
+                    interimTranscript += transcript;
+                }
+            }
+            
+            if (interimTranscript) {
+                this.interimText.textContent = interimTranscript;
+                this.interimText.classList.add('active');
+            }
+        };
+        
+        // Handle errors
+        this.recognition.onerror = (event) => {
+            console.error('Speech recognition error:', event.error);
+            
+            if (event.error === 'no-speech') {
+                // Continue listening
+                return;
+            }
+            
+            if (event.error === 'not-allowed') {
+                alert('Microphone access denied. Please allow microphone access to use voice input.');
+            } else {
+                alert(`Speech recognition error: ${event.error}`);
+            }
+            
+            this.stopListening();
+        };
+        
+        // Handle end
+        this.recognition.onend = () => {
+            if (this.isListening) {
+                // Restart recognition to continue listening
+                try {
+                    this.recognition.start();
+                } catch (e) {
+                    console.error('Failed to restart recognition:', e);
+                    this.stopListening();
+                }
+            }
+        };
+    }
+    
+    setupEventListeners() {
+        this.sendBtn.addEventListener('click', () => this.sendUtterance());
+        this.refreshBtn.addEventListener('click', () => this.loadData());
+        this.clearAllBtn.addEventListener('click', () => this.clearAllUtterances());
+        this.listenBtn.addEventListener('click', () => this.toggleListening());
+        
+        this.utteranceInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.sendUtterance();
+            }
+        });
+    }
+    
+    async sendUtterance() {
+        const text = this.utteranceInput.value.trim();
+        if (!text) return;
+        
+        this.sendBtn.disabled = true;
+        this.sendBtn.textContent = 'Sending...';
+        
+        try {
+            const response = await fetch(`${this.baseUrl}/api/potential-utterances`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    text: text,
+                    timestamp: new Date().toISOString()
+                }),
+            });
+            
+            if (response.ok) {
+                this.utteranceInput.value = '';
+                this.loadData(); // Refresh the list
+            } else {
+                const error = await response.json();
+                alert(`Error: ${error.error || 'Failed to send utterance'}`);
+            }
+        } catch (error) {
+            console.error('Failed to send utterance:', error);
+            alert('Failed to send utterance. Make sure the server is running.');
+        } finally {
+            this.sendBtn.disabled = false;
+            this.sendBtn.textContent = 'Send';
+        }
+    }
+    
+    async loadData() {
+        try {
+            // Load status
+            const statusResponse = await fetch(`${this.baseUrl}/api/utterances/status`);
+            if (statusResponse.ok) {
+                const status = await statusResponse.json();
+                this.updateStatus(status);
+            }
+            
+            // Load utterances
+            const utterancesResponse = await fetch(`${this.baseUrl}/api/utterances?limit=20`);
+            if (utterancesResponse.ok) {
+                const data = await utterancesResponse.json();
+                this.updateUtterancesList(data.utterances);
+            }
+        } catch (error) {
+            console.error('Failed to load data:', error);
+        }
+    }
+    
+    updateStatus(status) {
+        this.totalCount.textContent = status.total;
+        this.pendingCount.textContent = status.pending;
+        this.deliveredCount.textContent = status.delivered;
+    }
+    
+    updateUtterancesList(utterances) {
+        if (utterances.length === 0) {
+            this.utterancesList.innerHTML = '<div class="empty-state">No utterances yet. Type something above to get started!</div>';
+            return;
+        }
+        
+        this.utterancesList.innerHTML = utterances.map(utterance => `
+            <div class="utterance-item">
+                <div class="utterance-text">${this.escapeHtml(utterance.text)}</div>
+                <div class="utterance-meta">
+                    <div>${this.formatTimestamp(utterance.timestamp)}</div>
+                    <div class="utterance-status status-${utterance.status}">
+                        ${utterance.status.toUpperCase()}
+                    </div>
+                </div>
+            </div>
+        `).join('');
+    }
+    
+    formatTimestamp(timestamp) {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString();
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    
+    toggleListening() {
+        if (this.isListening) {
+            this.stopListening();
+        } else {
+            this.startListening();
+        }
+    }
+    
+    startListening() {
+        if (!this.recognition) {
+            alert('Speech recognition not supported in this browser');
+            return;
+        }
+        
+        try {
+            this.recognition.start();
+            this.isListening = true;
+            this.listenBtn.classList.add('listening');
+            this.listenBtnText.textContent = 'Stop Listening';
+            this.listeningIndicator.classList.add('active');
+            this.debugLog('Started listening');
+        } catch (e) {
+            console.error('Failed to start recognition:', e);
+            alert('Failed to start speech recognition. Please try again.');
+        }
+    }
+    
+    stopListening() {
+        if (this.recognition) {
+            this.isListening = false;
+            this.recognition.stop();
+            this.listenBtn.classList.remove('listening');
+            this.listenBtnText.textContent = 'Start Listening';
+            this.listeningIndicator.classList.remove('active');
+            this.interimText.textContent = '';
+            this.interimText.classList.remove('active');
+            this.debugLog('Stopped listening');
+        }
+    }
+    
+    async sendVoiceUtterance(text) {
+        const trimmedText = text.trim();
+        if (!trimmedText) return;
+        
+        this.debugLog('Sending voice utterance:', trimmedText);
+        
+        try {
+            const response = await fetch(`${this.baseUrl}/api/potential-utterances`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    text: trimmedText,
+                    timestamp: new Date().toISOString()
+                }),
+            });
+            
+            if (response.ok) {
+                this.loadData(); // Refresh the list
+            } else {
+                const error = await response.json();
+                console.error('Error sending voice utterance:', error);
+            }
+        } catch (error) {
+            console.error('Failed to send voice utterance:', error);
+        }
+    }
+    
+    async clearAllUtterances() {
+        if (!confirm('Are you sure you want to clear all utterances?')) {
+            return;
+        }
+        
+        this.clearAllBtn.disabled = true;
+        this.clearAllBtn.textContent = 'Clearing...';
+        
+        try {
+            const response = await fetch(`${this.baseUrl}/api/utterances`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+            
+            if (response.ok) {
+                const result = await response.json();
+                this.loadData(); // Refresh the list
+                this.debugLog('Cleared all utterances:', result);
+            } else {
+                const error = await response.json();
+                alert(`Error: ${error.error || 'Failed to clear utterances'}`);
+            }
+        } catch (error) {
+            console.error('Failed to clear utterances:', error);
+            alert('Failed to clear utterances. Make sure the server is running.');
+        } finally {
+            this.clearAllBtn.disabled = false;
+            this.clearAllBtn.textContent = 'Clear All';
+        }
+    }
+    
+    debugLog(...args) {
+        if (this.debug) {
+            console.log(...args);
+        }
+    }
+}
+
+// Initialize the client when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new VoiceHooksClient();
+});

package/public/index.html

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voice Hooks - MCP POC</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
+        }
+        
+        h1 {
+            color: #333;
+            margin-bottom: 8px;
+        }
+        
+        .subtitle {
+            color: #666;
+            margin-bottom: 24px;
+        }
+        
+        .input-section {
+            margin-bottom: 24px;
+        }
+        
+        .input-group {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 16px;
+        }
+        
+        #utteranceInput {
+            flex: 1;
+            padding: 12px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 16px;
+        }
+        
+        #utteranceInput:focus {
+            outline: none;
+            border-color: #007AFF;
+        }
+        
+        #sendBtn {
+            background: #007AFF;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        
+        #sendBtn:hover {
+            background: #0056CC;
+        }
+        
+        #sendBtn:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        
+        .status {
+            display: flex;
+            gap: 24px;
+            margin-bottom: 24px;
+        }
+        
+        .status-item {
+            padding: 12px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            text-align: center;
+            flex: 1;
+        }
+        
+        .status-number {
+            font-size: 24px;
+            font-weight: bold;
+            color: #007AFF;
+        }
+        
+        .status-label {
+            font-size: 14px;
+            color: #666;
+        }
+        
+        .utterances-section h3 {
+            color: #333;
+            margin-bottom: 16px;
+        }
+        
+        .utterances-list {
+            max-height: 400px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+        }
+        
+        .utterance-item {
+            padding: 12px 16px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .utterance-item:last-child {
+            border-bottom: none;
+        }
+        
+        .utterance-text {
+            flex: 1;
+            margin-right: 12px;
+        }
+        
+        .utterance-meta {
+            font-size: 12px;
+            color: #666;
+            text-align: right;
+        }
+        
+        .utterance-status {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: bold;
+            margin-top: 4px;
+        }
+        
+        .status-pending {
+            background: #FFF3CD;
+            color: #856404;
+        }
+        
+        .status-delivered {
+            background: #D1ECF1;
+            color: #0C5460;
+        }
+        
+        .refresh-btn {
+            background: #6C757D;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            margin-left: 12px;
+        }
+        
+        .refresh-btn:hover {
+            background: #545B62;
+        }
+        
+        .empty-state {
+            text-align: center;
+            color: #666;
+            padding: 40px 20px;
+            font-style: italic;
+        }
+        
+        .voice-controls {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+        
+        #listenBtn {
+            background: #28A745;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        #listenBtn:hover {
+            background: #218838;
+        }
+        
+        #listenBtn.listening {
+            background: #DC3545;
+        }
+        
+        #listenBtn.listening:hover {
+            background: #C82333;
+        }
+        
+        #listenBtn:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+        
+        .listening-indicator {
+            display: none;
+            align-items: center;
+            gap: 8px;
+            color: #DC3545;
+            font-weight: 500;
+        }
+        
+        .listening-indicator.active {
+            display: flex;
+        }
+        
+        .listening-dot {
+            width: 8px;
+            height: 8px;
+            background: #DC3545;
+            border-radius: 50%;
+            animation: pulse 1.5s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.3; }
+            100% { opacity: 1; }
+        }
+        
+        .interim-text {
+            display: none;
+            padding: 12px;
+            background: #F8F9FA;
+            border: 1px solid #DEE2E6;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            font-style: italic;
+            color: #6C757D;
+        }
+        
+        .interim-text.active {
+            display: block;
+        }
+        
+        .mic-icon {
+            width: 16px;
+            height: 16px;
+            fill: currentColor;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Voice Hooks - MCP POC</h1>
+        <p class="subtitle">Speak or type utterances to test the MCP voice interaction system</p>
+        
+        <div class="input-section">
+            <div class="voice-controls">
+                <button id="listenBtn">
+                    <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path d="M12 1C10.34 1 9 2.34 9 4V12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12V4C15 2.34 13.66 1 12 1ZM19 12C19 15.53 16.39 18.44 13 18.93V22H11V18.93C7.61 18.44 5 15.53 5 12H7C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12H19Z"/>
+                    </svg>
+                    <span id="listenBtnText">Start Listening</span>
+                </button>
+                <div class="listening-indicator" id="listeningIndicator">
+                    <div class="listening-dot"></div>
+                    <span>Listening...</span>
+                </div>
+            </div>
+            
+            <div class="interim-text" id="interimText"></div>
+            
+            <div class="input-group">
+                <input 
+                    type="text" 
+                    id="utteranceInput" 
+                    placeholder="Type your utterance here..." 
+                    autofocus
+                >
+                <button id="sendBtn">Send</button>
+            </div>
+        </div>
+        
+        <div class="status">
+            <div class="status-item">
+                <div class="status-number" id="totalCount">0</div>
+                <div class="status-label">Total</div>
+            </div>
+            <div class="status-item">
+                <div class="status-number" id="pendingCount">0</div>
+                <div class="status-label">Pending</div>
+            </div>
+            <div class="status-item">
+                <div class="status-number" id="deliveredCount">0</div>
+                <div class="status-label">Delivered</div>
+            </div>
+        </div>
+        
+        <div class="utterances-section">
+            <h3>
+                Recent Utterances
+                <button class="refresh-btn" id="refreshBtn">Refresh</button>
+                <button class="refresh-btn" id="clearAllBtn" style="background: #DC3545; margin-left: 8px;">Clear All</button>
+            </h3>
+            <div class="utterances-list" id="utterancesList">
+                <div class="empty-state">No utterances yet. Type something above to get started!</div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="app.js"></script>
+</body>
+</html>