fix: update dictation settings handling and improve user feedback (#4093)

Signed-off-by: Parsa Rahimi <mail@parsuli.net>

ui/desktop/src/components/ChatInput.tsx

@@ -1006,7 +1006,7 @@ 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?.enabled || dictationSettings?.provider === null) && (
             <>
               {!canUseDictation ? (
                 <Tooltip>
@@ -1026,11 +1026,24 @@ export default function ChatInput({
                     </span>
                   </TooltipTrigger>
                   <TooltipContent>
-                    {dictationSettings.provider === 'openai'
-                      ? 'OpenAI API key is not configured. Set it up in Settings > Models.'
-                      : dictationSettings.provider === 'elevenlabs'
-                        ? 'ElevenLabs API key is not configured. Set it up in Settings > Chat > Voice Dictation.'
-                        : 'Dictation provider is not properly configured.'}
+                    {dictationSettings.provider === 'openai' ? (
+                      <p>
+                        OpenAI API key is not configured. Set it up in <b>Settings</b> {'>'}{' '}
+                        <b>Models.</b>
+                      </p>
+                    ) : dictationSettings.provider === 'elevenlabs' ? (
+                      <p>
+                        ElevenLabs API key is not configured. Set it up in <b>Settings</b> {'>'}{' '}
+                        <b>Chat</b> {'>'} <b>Voice Dictation.</b>
+                      </p>
+                    ) : dictationSettings.provider === null ? (
+                      <p>
+                        Dictation is not configured. Configure it in <b>Settings</b> {'>'}{' '}
+                        <b>Chat</b> {'>'} <b>Voice Dictation.</b>
+                      </p>
+                    ) : (
+                      <p>Dictation provider is not properly configured.</p>
+                    )}
                   </TooltipContent>
                 </Tooltip>
               ) : (

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

@@ -3,21 +3,15 @@ import { Switch } from '../../ui/switch';
 import { ChevronDown } from 'lucide-react';
 import { Input } from '../../ui/input';
 import { useConfig } from '../../ConfigContext';
-
-type DictationProvider = 'openai' | 'elevenlabs';
-
-interface DictationSettings {
-  enabled: boolean;
-  provider: DictationProvider;
-}
+import { DictationProvider, DictationSettings } from '../../../hooks/useDictationSettings';
 
 const DICTATION_SETTINGS_KEY = 'dictation_settings';
 const ELEVENLABS_API_KEY = 'ELEVENLABS_API_KEY';
 
 export default function DictationSection() {
   const [settings, setSettings] = useState<DictationSettings>({
-    enabled: true,
-    provider: 'openai',
+    enabled: false,
+    provider: null,
   });
   const [hasOpenAIKey, setHasOpenAIKey] = useState(false);
   const [showProviderDropdown, setShowProviderDropdown] = useState(false);
@@ -120,7 +114,11 @@ export default function DictationSection() {
   };
 
   const handleToggle = (enabled: boolean) => {
-    saveSettings({ ...settings, enabled });
+    saveSettings({
+      ...settings,
+      enabled,
+      provider: settings.provider === null ? 'openai' : settings.provider,
+    });
   };
 
   const handleProviderChange = (provider: DictationProvider) => {
@@ -157,7 +155,7 @@ export default function DictationSection() {
       case 'elevenlabs':
         return 'ElevenLabs';
       default:
-        return provider;
+        return 'None (disabled)';
     }
   };