Fix eleven labs audio transcription and added more logging (#4358)

ui/desktop/src/components/ChatInput.tsx

@@ -1259,8 +1259,8 @@ export default function ChatInput({
 
         {/* Inline action buttons on the right */}
         <div className="flex items-center gap-1 px-2 relative">
-          {/* Microphone button - show if dictation is enabled, disable if not configured */}
-          {(dictationSettings?.enabled || dictationSettings?.provider === null) && (
+          {/* Microphone button - show only if dictation is enabled */}
+          {dictationSettings?.enabled && (
             <>
               {!canUseDictation ? (
                 <Tooltip>

ui/desktop/src/components/settings/dictation/DictationSection.tsx

@@ -4,9 +4,11 @@ import { ChevronDown } from 'lucide-react';
 import { Input } from '../../ui/input';
 import { useConfig } from '../../ConfigContext';
 import { DictationProvider, DictationSettings } from '../../../hooks/useDictationSettings';
-
-const DICTATION_SETTINGS_KEY = 'dictation_settings';
-const ELEVENLABS_API_KEY = 'ELEVENLABS_API_KEY';
+import {
+  DICTATION_SETTINGS_KEY,
+  ELEVENLABS_API_KEY,
+  getDefaultDictationSettings,
+} from '../../../hooks/dictationConstants';
 
 export default function DictationSection() {
   const [settings, setSettings] = useState<DictationSettings>({
@@ -27,20 +29,19 @@ export default function DictationSection() {
   useEffect(() => {
     const loadSettings = async () => {
       const savedSettings = localStorage.getItem(DICTATION_SETTINGS_KEY);
+
+      let loadedSettings: DictationSettings;
+
       if (savedSettings) {
         const parsed = JSON.parse(savedSettings);
-        setSettings(parsed);
-        setShowElevenLabsKey(parsed.provider === 'elevenlabs');
+        loadedSettings = parsed;
       } else {
-        // Default settings
-        const defaultSettings: DictationSettings = {
-          enabled: true,
-          provider: 'openai',
-        };
-        setSettings(defaultSettings);
-        localStorage.setItem(DICTATION_SETTINGS_KEY, JSON.stringify(defaultSettings));
+        loadedSettings = await getDefaultDictationSettings(getProviders);
       }
 
+      setSettings(loadedSettings);
+      setShowElevenLabsKey(loadedSettings.provider === 'elevenlabs');
+
       // Load ElevenLabs API key from storage
       setIsLoadingKey(true);
       try {
@@ -58,7 +59,7 @@ export default function DictationSection() {
     };
 
     loadSettings();
-  }, [read]);
+  }, [read, getProviders]);
 
   // Save ElevenLabs key on unmount if it has changed
   useEffect(() => {
@@ -109,6 +110,7 @@ export default function DictationSection() {
   };
 
   const saveSettings = (newSettings: DictationSettings) => {
+    console.log('Saving dictation settings to localStorage:', newSettings);
     setSettings(newSettings);
     localStorage.setItem(DICTATION_SETTINGS_KEY, JSON.stringify(newSettings));
   };
@@ -130,18 +132,26 @@ export default function DictationSection() {
   const handleElevenLabsKeyChange = (key: string) => {
     setElevenLabsApiKey(key);
     elevenLabsApiKeyRef.current = key;
+    // If user starts typing, they're updating the key
+    if (key.length > 0) {
+      setHasElevenLabsKey(false); // Hide "configured" while typing
+    }
   };
 
   const saveElevenLabsKey = async () => {
     // Save to secure storage
     try {
       if (elevenLabsApiKey.trim()) {
+        console.log('Saving ElevenLabs API key to secure storage...');
         await upsert(ELEVENLABS_API_KEY, elevenLabsApiKey, true);
         setHasElevenLabsKey(true);
+        console.log('ElevenLabs API key saved successfully');
       } else {
         // If key is empty, remove it from storage
+        console.log('Removing ElevenLabs API key from secure storage...');
         await upsert(ELEVENLABS_API_KEY, null, true);
         setHasElevenLabsKey(false);
+        console.log('ElevenLabs API key removed successfully');
       }
     } catch (error) {
       console.error('Error saving ElevenLabs API key:', error);