STT improvements: hotkey, button position, and hover tooltip #2
@@ -1,15 +1,17 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useSTT } from "../../hooks/useSTT";
|
||||
import type { SttState } from "../../hooks/useSTT";
|
||||
import * as commands from "../../lib/tauri-commands";
|
||||
|
||||
interface Props {
|
||||
sessionId: string;
|
||||
sendInput: (sessionId: string, data: string) => Promise<void>;
|
||||
state: SttState;
|
||||
error: string | null;
|
||||
onToggle: () => Promise<void>;
|
||||
onCancel: () => Promise<void>;
|
||||
}
|
||||
|
||||
export default function SttButton({ sessionId, sendInput }: Props) {
|
||||
const { state, error, toggle, cancelRecording } = useSTT(sessionId, sendInput);
|
||||
export default function SttButton({ state, error, onToggle, onCancel }: Props) {
|
||||
const [elapsed, setElapsed] = useState(0);
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
// Track recording duration
|
||||
@@ -40,17 +42,17 @@ export default function SttButton({ sessionId, sendInput }: Props) {
|
||||
// Container start failed, toggle will still attempt transcription
|
||||
}
|
||||
}
|
||||
await toggle();
|
||||
}, [state, toggle]);
|
||||
await onToggle();
|
||||
}, [state, onToggle]);
|
||||
|
||||
const handleContextMenu = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
if (state === "recording") {
|
||||
cancelRecording();
|
||||
onCancel();
|
||||
}
|
||||
},
|
||||
[state, cancelRecording],
|
||||
[state, onCancel],
|
||||
);
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
@@ -60,38 +62,43 @@ export default function SttButton({ sessionId, sendInput }: Props) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-4 left-4 z-50 flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleClick}
|
||||
onContextMenu={handleContextMenu}
|
||||
disabled={state === "transcribing"}
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${
|
||||
<div className="absolute bottom-1 left-1 z-50 flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={handleClick}
|
||||
onContextMenu={handleContextMenu}
|
||||
onMouseDown={(e) => e.preventDefault()} // prevent stealing focus from terminal
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
disabled={state === "transcribing"}
|
||||
className={`w-8 h-8 rounded-full flex items-center justify-center transition-all cursor-pointer ${
|
||||
state === "recording"
|
||||
? "bg-[#f85149] text-white shadow-lg animate-pulse"
|
||||
: state === "transcribing"
|
||||
? "bg-[#1f2937] text-[#58a6ff] border border-[#30363d] opacity-80"
|
||||
: "bg-[#1f2937]/80 text-[#8b949e] border border-[#30363d] hover:text-[#e6edf3] hover:bg-[#2d3748]"
|
||||
}`}
|
||||
title={
|
||||
state === "recording"
|
||||
? "Click to stop and transcribe (right-click to cancel)"
|
||||
: state === "transcribing"
|
||||
? "Transcribing..."
|
||||
: "Speech to text"
|
||||
}
|
||||
>
|
||||
{state === "transcribing" ? (
|
||||
<svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" />
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
|
||||
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
|
||||
</svg>
|
||||
>
|
||||
{state === "transcribing" ? (
|
||||
<svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" />
|
||||
<path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
|
||||
<path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
{hovered && state !== "recording" && (
|
||||
<div className="absolute bottom-full left-0 mb-1.5 px-2 py-1 text-[11px] leading-snug text-[#e6edf3] bg-[#21262d] border border-[#30363d] rounded shadow-lg whitespace-nowrap pointer-events-none">
|
||||
{state === "transcribing" ? "Transcribing..." : (
|
||||
<>Speech to text <kbd className="ml-1 px-1 py-0.5 text-[10px] bg-[#0d1117] border border-[#30363d] rounded font-mono">Ctrl+Shift+M</kbd></>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{state === "recording" && (
|
||||
<span className="text-xs text-[#f85149] font-mono bg-[#1f2937] px-2 py-0.5 rounded border border-[#30363d]">
|
||||
{formatTime(elapsed)}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { openUrl } from "@tauri-apps/plugin-opener";
|
||||
import "@xterm/xterm/css/xterm.css";
|
||||
import { useTerminal } from "../../hooks/useTerminal";
|
||||
import { useAppState } from "../../store/appState";
|
||||
import { useSTT } from "../../hooks/useSTT";
|
||||
import SttButton from "./SttButton";
|
||||
import { awsSsoRefresh } from "../../lib/tauri-commands";
|
||||
import { UrlDetector } from "../../lib/urlDetector";
|
||||
@@ -27,6 +28,9 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
const { sendInput, pasteImage, resize, onOutput, onExit } = useTerminal();
|
||||
const setTerminalHasSelection = useAppState(s => s.setTerminalHasSelection);
|
||||
const sttEnabled = useAppState(s => s.appSettings?.stt?.enabled);
|
||||
const stt = useSTT(sessionId, sendInput);
|
||||
const sttToggleRef = useRef(stt.toggle);
|
||||
sttToggleRef.current = stt.toggle;
|
||||
|
||||
const ssoBufferRef = useRef("");
|
||||
const ssoTriggeredRef = useRef(false);
|
||||
@@ -102,6 +106,11 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
}
|
||||
return false; // prevent xterm from processing this key
|
||||
}
|
||||
// Ctrl+Shift+M toggles speech-to-text recording
|
||||
if (event.type === "keydown" && event.ctrlKey && event.shiftKey && event.key === "M") {
|
||||
sttToggleRef.current();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
@@ -427,7 +436,7 @@ export default function TerminalView({ sessionId, active }: Props) {
|
||||
{isAutoFollow ? "▼ Following" : "▽ Paused"}
|
||||
</button>
|
||||
{/* STT mic button - bottom left */}
|
||||
{sttEnabled && <SttButton sessionId={sessionId} sendInput={sendInput} />}
|
||||
{sttEnabled && <SttButton state={stt.state} error={stt.error} onToggle={stt.toggle} onCancel={stt.cancelRecording} />}
|
||||
{/* Jump to Current - bottom right, when scrolled up */}
|
||||
{!isAtBottom && (
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user