Voice input — wake lock, stream reuse, auto-send, 60s limit, corner padding fix
This commit is contained in:
+128
-63
@@ -1,19 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { useRef, useState, useEffect, useCallback } from 'react';
|
||||
import { useStore } from '@/lib/store';
|
||||
import { api } from '@/lib/api';
|
||||
import type { Message } from '@/lib/api';
|
||||
|
||||
const MAX_RECORDING_SECONDS = 60;
|
||||
|
||||
export default function MessageInput() {
|
||||
const { currentId, setCurrentId, addMessage, setIsLoading, isLoading, setConversations } = useStore();
|
||||
const [text, setText] = useState('');
|
||||
const [recording, setRecording] = useState(false);
|
||||
const [transcribing, setTranscribing] = useState(false);
|
||||
const [countdown, setCountdown] = useState(0);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
||||
const chunksRef = useRef<Blob[]>([]);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
const wakeLockRef = useRef<WakeLockSentinel | null>(null);
|
||||
const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const mimeTypeRef = useRef<string>('audio/webm');
|
||||
|
||||
useEffect(() => {
|
||||
textareaRef.current?.focus();
|
||||
@@ -26,8 +32,8 @@ export default function MessageInput() {
|
||||
el.style.height = Math.min(el.scrollHeight, 160) + 'px';
|
||||
}
|
||||
|
||||
async function send() {
|
||||
const message = text.trim();
|
||||
const send = useCallback(async (messageOverride?: string) => {
|
||||
const message = (messageOverride ?? text).trim();
|
||||
if (!message || isLoading) return;
|
||||
setText('');
|
||||
if (textareaRef.current) textareaRef.current.style.height = 'auto';
|
||||
@@ -70,58 +76,106 @@ export default function MessageInput() {
|
||||
setIsLoading(false);
|
||||
textareaRef.current?.focus();
|
||||
}
|
||||
}, [text, isLoading, currentId, addMessage, setCurrentId, setIsLoading, setConversations]);
|
||||
|
||||
async function acquireWakeLock() {
|
||||
try {
|
||||
if ('wakeLock' in navigator) {
|
||||
wakeLockRef.current = await (navigator as Navigator & { wakeLock: { request: (type: string) => Promise<WakeLockSentinel> } }).wakeLock.request('screen');
|
||||
}
|
||||
} catch {
|
||||
// Wake lock not supported or denied — not critical
|
||||
}
|
||||
}
|
||||
|
||||
function releaseWakeLock() {
|
||||
wakeLockRef.current?.release();
|
||||
wakeLockRef.current = null;
|
||||
}
|
||||
|
||||
function stopRecording() {
|
||||
if (countdownRef.current) {
|
||||
clearInterval(countdownRef.current);
|
||||
countdownRef.current = null;
|
||||
}
|
||||
setCountdown(0);
|
||||
releaseWakeLock();
|
||||
mediaRecorderRef.current?.stop();
|
||||
setRecording(false);
|
||||
}
|
||||
|
||||
async function startRecording() {
|
||||
try {
|
||||
// Reuse existing stream if available, otherwise request new permission
|
||||
if (!streamRef.current || streamRef.current.getTracks().every(t => t.readyState === 'ended')) {
|
||||
streamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
}
|
||||
|
||||
const mimeType = MediaRecorder.isTypeSupported('audio/webm')
|
||||
? 'audio/webm'
|
||||
: MediaRecorder.isTypeSupported('audio/mp4')
|
||||
? 'audio/mp4'
|
||||
: 'audio/ogg';
|
||||
|
||||
mimeTypeRef.current = mimeType;
|
||||
chunksRef.current = [];
|
||||
|
||||
const mr = new MediaRecorder(streamRef.current, { mimeType });
|
||||
|
||||
mr.ondataavailable = e => {
|
||||
if (e.data.size > 0) chunksRef.current.push(e.data);
|
||||
};
|
||||
|
||||
mr.onstop = async () => {
|
||||
if (chunksRef.current.length === 0) return;
|
||||
|
||||
setTranscribing(true);
|
||||
let transcript = '';
|
||||
try {
|
||||
const blob = new Blob(chunksRef.current, { type: mimeTypeRef.current });
|
||||
const result = await api.transcribe(blob);
|
||||
transcript = result.text.trim();
|
||||
} catch (e) {
|
||||
console.error('Transcription failed', e);
|
||||
} finally {
|
||||
setTranscribing(false);
|
||||
}
|
||||
|
||||
if (transcript) {
|
||||
// Auto-send after transcription
|
||||
await send(transcript);
|
||||
}
|
||||
};
|
||||
|
||||
mr.start(1000);
|
||||
mediaRecorderRef.current = mr;
|
||||
setRecording(true);
|
||||
setCountdown(MAX_RECORDING_SECONDS);
|
||||
|
||||
// Prevent screen lock during recording
|
||||
await acquireWakeLock();
|
||||
|
||||
// Countdown timer — auto-stop at max duration
|
||||
countdownRef.current = setInterval(() => {
|
||||
setCountdown(prev => {
|
||||
if (prev <= 1) {
|
||||
stopRecording();
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
} catch {
|
||||
alert('Microphone access denied');
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleRecording() {
|
||||
if (recording) {
|
||||
// Stop recording
|
||||
mediaRecorderRef.current?.stop();
|
||||
setRecording(false);
|
||||
stopRecording();
|
||||
} else {
|
||||
// Start recording
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
streamRef.current = stream;
|
||||
|
||||
// Pick supported mime type
|
||||
const mimeType = MediaRecorder.isTypeSupported('audio/webm')
|
||||
? 'audio/webm'
|
||||
: MediaRecorder.isTypeSupported('audio/mp4')
|
||||
? 'audio/mp4'
|
||||
: 'audio/ogg';
|
||||
|
||||
const mr = new MediaRecorder(stream, { mimeType });
|
||||
chunksRef.current = [];
|
||||
|
||||
mr.ondataavailable = e => {
|
||||
if (e.data.size > 0) chunksRef.current.push(e.data);
|
||||
};
|
||||
|
||||
mr.onstop = async () => {
|
||||
streamRef.current?.getTracks().forEach(t => t.stop());
|
||||
if (chunksRef.current.length === 0) return;
|
||||
|
||||
setTranscribing(true);
|
||||
try {
|
||||
const blob = new Blob(chunksRef.current, { type: mimeType });
|
||||
const { text: transcript } = await api.transcribe(blob);
|
||||
if (transcript.trim()) {
|
||||
setText(prev => prev ? prev + ' ' + transcript.trim() : transcript.trim());
|
||||
setTimeout(() => autoResize(), 0);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Transcription failed', e);
|
||||
} finally {
|
||||
setTranscribing(false);
|
||||
}
|
||||
};
|
||||
|
||||
mr.start(1000); // collect data every second
|
||||
mediaRecorderRef.current = mr;
|
||||
setRecording(true);
|
||||
} catch {
|
||||
alert('Microphone access denied');
|
||||
}
|
||||
await startRecording();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,15 +195,15 @@ export default function MessageInput() {
|
||||
style={{
|
||||
borderTop: '1px solid var(--border)',
|
||||
padding: '12px 16px',
|
||||
paddingBottom: 'max(12px, env(safe-area-inset-bottom))',
|
||||
paddingLeft: 'max(16px, env(safe-area-inset-left))',
|
||||
paddingRight: 'max(16px, env(safe-area-inset-right))',
|
||||
paddingBottom: 'max(16px, env(safe-area-inset-bottom))',
|
||||
paddingLeft: 'max(20px, env(safe-area-inset-left))',
|
||||
paddingRight: 'max(20px, env(safe-area-inset-right))',
|
||||
}}
|
||||
>
|
||||
{/* Mic button — tap to start, tap to stop */}
|
||||
{/* Mic button */}
|
||||
<button
|
||||
onPointerUp={toggleRecording}
|
||||
className="flex-shrink-0 rounded-lg flex items-center justify-center transition-all"
|
||||
className="flex-shrink-0 rounded-lg flex flex-col items-center justify-center transition-all"
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
@@ -159,9 +213,9 @@ export default function MessageInput() {
|
||||
color: micColor,
|
||||
touchAction: 'manipulation',
|
||||
flexShrink: 0,
|
||||
position: 'relative',
|
||||
}}
|
||||
aria-label={recording ? 'Stop recording' : transcribing ? 'Transcribing...' : 'Start recording'}
|
||||
title={recording ? 'Tap to stop' : 'Tap to record'}
|
||||
>
|
||||
{transcribing ? (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
@@ -170,12 +224,17 @@ export default function MessageInput() {
|
||||
</circle>
|
||||
</svg>
|
||||
) : recording ? (
|
||||
// Square stop icon when recording
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
|
||||
<rect width="14" height="14" rx="2"/>
|
||||
</svg>
|
||||
<>
|
||||
<svg width="12" height="12" viewBox="0 0 14 14" fill="currentColor">
|
||||
<rect width="14" height="14" rx="2"/>
|
||||
</svg>
|
||||
{countdown <= 15 && (
|
||||
<span style={{ fontSize: '9px', lineHeight: 1, marginTop: '2px', opacity: 0.9 }}>
|
||||
{countdown}s
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
// Mic icon when idle
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 1a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v6a2 2 0 0 0 4 0V5a2 2 0 0 0-2-2zm-7 8a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V22h-2v-2.06A9 9 0 0 1 3 11h2z"/>
|
||||
</svg>
|
||||
@@ -192,7 +251,13 @@ export default function MessageInput() {
|
||||
value={text}
|
||||
onChange={e => { setText(e.target.value); autoResize(); }}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder={recording ? 'Recording... tap mic to stop' : transcribing ? 'Transcribing...' : 'Ask anything...'}
|
||||
placeholder={
|
||||
recording
|
||||
? `Recording... ${countdown > 0 ? countdown + 's left' : ''}`
|
||||
: transcribing
|
||||
? 'Transcribing...'
|
||||
: 'Ask anything...'
|
||||
}
|
||||
rows={1}
|
||||
className="w-full block resize-none outline-none bg-transparent px-3 py-3 leading-relaxed min-w-0"
|
||||
style={{
|
||||
@@ -207,7 +272,7 @@ export default function MessageInput() {
|
||||
|
||||
{/* Send button */}
|
||||
<button
|
||||
onPointerUp={send}
|
||||
onPointerUp={() => send()}
|
||||
disabled={isLoading || !text.trim()}
|
||||
className="flex-shrink-0 rounded-lg px-4 text-sm font-medium transition-opacity"
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user