fix: add groq stt controls to workspace settings (#347)

Co-authored-by: Aurora release bot <release@outsourc-e.com>

src/components/settings-dialog/settings-dialog.tsx

@@ -24,6 +24,7 @@ import type { LoaderStyle } from '@/hooks/use-chat-settings'
 import type { BrailleSpinnerPreset } from '@/components/ui/braille-spinner'
 import type { ThemeId } from '@/lib/theme'
 import type {LocaleId} from '@/lib/i18n';
+import { GROQ_STT_MODELS, STT_PROVIDER_OPTIONS } from '@/lib/stt-config'
 import { Button } from '@/components/ui/button'
 import { Switch } from '@/components/ui/switch'
 import { applyTheme, useSettings } from '@/hooks/use-settings'
@@ -1845,6 +1846,9 @@ function VoiceContent() {
   }
 
   const ttsProvider = String(tts.provider || 'edge')
+  const sttProvider = String(stt.provider || 'local')
+  const sttGroq =
+    (stt.groq as Record<string, unknown> | undefined) || {}
 
   return (
     <div className="space-y-4">
@@ -1917,14 +1921,47 @@ function VoiceContent() {
         </Row>
         <Row label="STT Provider">
           <select
-            value={String(stt.provider || 'local')}
+            value={sttProvider}
             onChange={(e) => saveStt('provider', e.target.value)}
             className="h-8 rounded-lg border border-primary-200 bg-primary-50 px-2 text-sm text-primary-900 outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
           >
-            <option value="local">Local (Whisper)</option>
+            {STT_PROVIDER_OPTIONS.map((provider) => (
-            <option value="openai">OpenAI Whisper</option>
+              <option key={provider.value} value={provider.value}>
+                {provider.label}
+              </option>
+            ))}
           </select>
         </Row>
+        {sttProvider === 'groq' && (
+          <>
+            <Row label="Groq model">
+              <select
+                value={String(sttGroq.model || GROQ_STT_MODELS[0])}
+                onChange={(e) =>
+                  saveStt('groq', {
+                    ...sttGroq,
+                    model: e.target.value,
+                  })
+                }
+                className="h-8 rounded-lg border border-primary-200 bg-primary-50 px-2 text-sm text-primary-900 outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+              >
+                {GROQ_STT_MODELS.map((model) => (
+                  <option key={model} value={model}>
+                    {model}
+                  </option>
+                ))}
+              </select>
+            </Row>
+            <Row label="Language" description="Optional BCP-47 code, e.g. en or en-US.">
+              <Input
+                value={String(stt.language || '')}
+                onChange={(e) => saveStt('language', e.target.value)}
+                placeholder="auto"
+                className="h-8 w-40"
+              />
+            </Row>
+          </>
+        )}
       </div>
     </div>
   )

src/lib/stt-config.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+
+import { GROQ_STT_MODELS, STT_PROVIDER_OPTIONS } from './stt-config'
+
+describe('stt config', () => {
+  it('includes groq as a selectable STT provider', () => {
+    expect(STT_PROVIDER_OPTIONS).toContainEqual({
+      value: 'groq',
+      label: 'Groq Whisper API',
+    })
+  })
+
+  it('lists the supported Groq Whisper models in priority order', () => {
+    expect(GROQ_STT_MODELS).toEqual([
+      'whisper-large-v3-turbo',
+      'whisper-large-v3',
+      'distil-whisper-large-v3-en',
+    ])
+  })
+})

src/lib/stt-config.ts

@@ -0,0 +1,11 @@
+export const STT_PROVIDER_OPTIONS = [
+  { value: 'local', label: 'Local (Whisper)' },
+  { value: 'openai', label: 'OpenAI Whisper API' },
+  { value: 'groq', label: 'Groq Whisper API' },
+] as const
+
+export const GROQ_STT_MODELS = [
+  'whisper-large-v3-turbo',
+  'whisper-large-v3',
+  'distil-whisper-large-v3-en',
+] as const

src/routes/settings/index.tsx

@@ -21,6 +21,7 @@ import type { BrailleSpinnerPreset } from '@/components/ui/braille-spinner'
 import type { ThemeId } from '@/lib/theme'
 import type { SettingsNavId } from '@/components/settings/settings-sidebar'
 import type {LocaleId} from '@/lib/i18n';
+import { GROQ_STT_MODELS, STT_PROVIDER_OPTIONS } from '@/lib/stt-config'
 import {
   SETTINGS_NAV_ITEMS,
   SettingsMobilePills,
@@ -1167,6 +1168,7 @@ function ClaudeConfigSection({
   const ttsOpenAi = (ttsConfig.openai as Record<string, unknown>) || {}
   const sttProvider = (sttConfig.provider as string) || 'local'
   const sttLocal = (sttConfig.local as Record<string, unknown>) || {}
+  const sttGroq = (sttConfig.groq as Record<string, unknown>) || {}
 
   const renderClaudeOverview = () => (
     <>
@@ -1860,8 +1862,11 @@ function ClaudeConfigSection({
             }
             className={selectClassName}
           >
-            <option value="local">Local (Whisper)</option>
+            {STT_PROVIDER_OPTIONS.map((provider) => (
-            <option value="openai">OpenAI Whisper API</option>
+              <option key={provider.value} value={provider.value}>
+                {provider.label}
+              </option>
+            ))}
           </select>
         </SettingsRow>
         {sttProvider === 'local' && (
@@ -1886,6 +1891,45 @@ function ClaudeConfigSection({
             </select>
           </SettingsRow>
         )}
+        {sttProvider === 'groq' && (
+          <>
+            <SettingsRow
+              label="Groq model"
+              description="Choose the Whisper model Groq should run."
+            >
+              <select
+                value={(sttGroq.model as string) || GROQ_STT_MODELS[0]}
+                onChange={(e) =>
+                  void saveConfig({
+                    config: { stt: { groq: { ...sttGroq, model: e.target.value } } },
+                  })
+                }
+                className={selectClassName}
+              >
+                {GROQ_STT_MODELS.map((model) => (
+                  <option key={model} value={model}>
+                    {model}
+                  </option>
+                ))}
+              </select>
+            </SettingsRow>
+            <SettingsRow
+              label="Language"
+              description="Optional BCP-47 code, e.g. en or en-US. Leave blank for auto-detect."
+            >
+              <Input
+                value={(sttConfig.language as string) || ''}
+                onChange={(e) =>
+                  void saveConfig({
+                    config: { stt: { language: e.target.value } },
+                  })
+                }
+                placeholder="auto"
+                className="md:w-64"
+              />
+            </SettingsRow>
+          </>
+        )}
       </SettingsSection>
     </div>
   )