🤖 fix: show disabled voice button with HTTPS tooltip on insecure contexts (#838)

_Generated with mux_

When accessing mux over HTTP (non-localhost), `navigator.mediaDevices`
is undefined due to browser security restrictions. Previously this
caused a crash or hidden button.

Now shows a disabled mic button with tooltip: "Voice input requires a
secure connection. Use HTTPS or access via localhost."

Changes:
- Add `requiresSecureContext` flag to `useVoiceInput` hook
- Show disabled button with educational tooltip instead of
hiding/crashing
- Prioritize HTTPS message over API key message (check HTTPS first)

Author: ammar-agent

src/browser/components/ChatInput/VoiceInputButton.tsx

@@ -14,6 +14,7 @@ interface VoiceInputButtonProps {
   state: VoiceInputState;
   isApiKeySet: boolean;
   shouldShowUI: boolean;
+  requiresSecureContext: boolean;
   onToggle: () => void;
   disabled?: boolean;
 }
@@ -27,9 +28,17 @@ const STATE_CONFIG: Record<VoiceInputState, { label: string; colorClass: string
 export const VoiceInputButton: React.FC<VoiceInputButtonProps> = (props) => {
   if (!props.shouldShowUI) return null;
 
-  const needsApiKey = !props.isApiKeySet;
-  const { label, colorClass } = needsApiKey
-    ? { label: "Voice input (requires OpenAI API key)", colorClass: "text-muted/50" }
+  const needsHttps = props.requiresSecureContext;
+  const needsApiKey = !needsHttps && !props.isApiKeySet;
+  const isDisabledReason = needsHttps || needsApiKey;
+
+  const { label, colorClass } = isDisabledReason
+    ? {
+        label: needsHttps
+          ? "Voice input (requires HTTPS)"
+          : "Voice input (requires OpenAI API key)",
+        colorClass: "text-muted/50",
+      }
     : STATE_CONFIG[props.state];
 
   const Icon = props.state === "transcribing" ? Loader2 : Mic;
@@ -40,7 +49,7 @@ export const VoiceInputButton: React.FC<VoiceInputButtonProps> = (props) => {
       <button
         type="button"
         onClick={props.onToggle}
-        disabled={(props.disabled ?? false) || isTranscribing || needsApiKey}
+        disabled={(props.disabled ?? false) || isTranscribing || isDisabledReason}
         aria-label={label}
         aria-pressed={props.state === "recording"}
         className={cn(
@@ -52,7 +61,13 @@ export const VoiceInputButton: React.FC<VoiceInputButtonProps> = (props) => {
         <Icon className={cn("h-4 w-4", isTranscribing && "animate-spin")} strokeWidth={1.5} />
       </button>
       <Tooltip className="tooltip" align="right">
-        {needsApiKey ? (
+        {needsHttps ? (
+          <>
+            Voice input requires a secure connection.
+            <br />
+            Use HTTPS or access via localhost.
+          </>
+        ) : needsApiKey ? (
           <>
             Voice input requires OpenAI API key.
             <br />

src/browser/components/ChatInput/index.tsx

@@ -1070,6 +1070,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                     state={voiceInput.state}
                     isApiKeySet={voiceInput.isApiKeySet}
                     shouldShowUI={voiceInput.shouldShowUI}
+                    requiresSecureContext={voiceInput.requiresSecureContext}
                     onToggle={voiceInput.toggle}
                     disabled={disabled || isSending}
                   />

src/browser/hooks/useVoiceInput.ts

@@ -24,6 +24,8 @@ export interface UseVoiceInputResult {
   isApiKeySet: boolean;
   /** False on touch devices (they have native keyboard dictation) */
   shouldShowUI: boolean;
+  /** True when running over HTTP (not localhost) - microphone requires secure context */
+  requiresSecureContext: boolean;
   start: () => void;
   stop: (options?: { send?: boolean }) => void;
   cancel: () => void;
@@ -49,6 +51,8 @@ function hasTouchDictation(): boolean {
 
 const HAS_TOUCH_DICTATION = hasTouchDictation();
 const HAS_MEDIA_RECORDER = typeof window !== "undefined" && typeof MediaRecorder !== "undefined";
+const HAS_GET_USER_MEDIA =
+  typeof window !== "undefined" && typeof navigator.mediaDevices?.getUserMedia === "function";
 
 // =============================================================================
 // Hook
@@ -131,6 +135,7 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
     // Guard: only start from idle state with valid configuration
     const canStart =
       HAS_MEDIA_RECORDER &&
+      HAS_GET_USER_MEDIA &&
       !HAS_TOUCH_DICTATION &&
       state === "idle" &&
       callbacksRef.current.openAIKeySet;
@@ -237,9 +242,10 @@ export function useVoiceInput(options: UseVoiceInputOptions): UseVoiceInputResul
 
   return {
     state,
-    isSupported: HAS_MEDIA_RECORDER,
+    isSupported: HAS_MEDIA_RECORDER && HAS_GET_USER_MEDIA,
     isApiKeySet: callbacksRef.current.openAIKeySet,
     shouldShowUI: HAS_MEDIA_RECORDER && !HAS_TOUCH_DICTATION,
+    requiresSecureContext: HAS_MEDIA_RECORDER && !HAS_GET_USER_MEDIA,
     start: () => void start(),
     stop,
     cancel,