Merge pull request #570 from OpenWhispr/feature/unified-provider-layout

Unified provider layout with four inference modes

Author: gabrielste1n

src/components/ControlPanel.tsx

@@ -399,6 +399,9 @@ export default function ControlPanel() {
           cloudTranscriptionBaseUrl: s.cloudTranscriptionBaseUrl,
           parakeetModel: s.parakeetModel,
           whisperModel: s.whisperModel,
+          transcriptionMode: s.transcriptionMode,
+          remoteTranscriptionType: s.remoteTranscriptionType,
+          remoteTranscriptionUrl: s.remoteTranscriptionUrl,
         });
         if (result.success && result.transcription) {
           const rawText = result.transcription.text;

src/components/ReasoningModelSelector.tsx

@@ -49,6 +49,7 @@ interface ReasoningModelSelectorProps {
   setGroqApiKey: (key: string) => void;
   customReasoningApiKey?: string;
   setCustomReasoningApiKey?: (key: string) => void;
+  mode?: "cloud" | "local";
 }
 
 function GpuStatusBadge() {
@@ -319,9 +320,10 @@ export default function ReasoningModelSelector({
   setGroqApiKey,
   customReasoningApiKey = "",
   setCustomReasoningApiKey,
+  mode,
 }: ReasoningModelSelectorProps) {
   const { t } = useTranslation();
-  const [selectedMode, setSelectedMode] = useState<"cloud" | "local">("cloud");
+  const [selectedMode, setSelectedMode] = useState<"cloud" | "local">(mode || "cloud");
   const [selectedCloudProvider, setSelectedCloudProvider] = useState("openai");
   const [selectedLocalProvider, setSelectedLocalProvider] = useState("qwen");
   const [customModelOptions, setCustomModelOptions] = useState<CloudModelOption[]>([]);
@@ -492,6 +494,8 @@ export default function ReasoningModelSelector({
     return customModelOptions;
   }, [isCustomBaseDirty, customModelOptions]);
 
+  const effectiveMode = mode || selectedMode;
+
   const cloudProviderIds = ["openai", "anthropic", "gemini", "groq", "custom"];
   const cloudProviders = cloudProviderIds.map((id) => ({
     id,
@@ -729,22 +733,24 @@ export default function ReasoningModelSelector({
 
   return (
     <div className="space-y-4">
-      <div className="space-y-2">
-        <ProviderTabs
-          providers={MODE_TABS}
-          selectedId={selectedMode}
-          onSelect={(id) => handleModeChange(id as "cloud" | "local")}
-          renderIcon={renderModeIcon}
-          colorScheme="purple"
-        />
-        <p className="text-xs text-muted-foreground text-center">
-          {selectedMode === "local"
-            ? t("reasoning.mode.localDescription")
-            : t("reasoning.mode.cloudDescription")}
-        </p>
-      </div>
+      {!mode && (
+        <div className="space-y-2">
+          <ProviderTabs
+            providers={MODE_TABS}
+            selectedId={effectiveMode}
+            onSelect={(id) => handleModeChange(id as "cloud" | "local")}
+            renderIcon={renderModeIcon}
+            colorScheme="purple"
+          />
+          <p className="text-xs text-muted-foreground text-center">
+            {effectiveMode === "local"
+              ? t("reasoning.mode.localDescription")
+              : t("reasoning.mode.cloudDescription")}
+          </p>
+        </div>
+      )}
 
-      {selectedMode === "cloud" ? (
+      {effectiveMode === "cloud" ? (
         <div className="space-y-2">
           <div className="border border-border rounded-lg overflow-hidden">
             <ProviderTabs

src/components/SelfHostedPanel.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import { Input } from "./ui/input";
+
+interface SelfHostedPanelProps {
+  service: "transcription" | "reasoning";
+  url: string;
+  onUrlChange: (url: string) => void;
+}
+
+export default function SelfHostedPanel({ service, url, onUrlChange }: SelfHostedPanelProps) {
+  const { t } = useTranslation();
+
+  const placeholderUrl =
+    service === "transcription" ? "http://192.168.1.126:8178" : "http://192.168.1.126:8080";
+
+  return (
+    <div className="border border-border rounded-lg p-3 space-y-2.5">
+      <div className="space-y-1.5">
+        <label className="block text-xs font-medium text-foreground">
+          {t("settingsPage.selfHosted.serverUrl")}
+        </label>
+        <Input
+          value={url}
+          onChange={(e) => onUrlChange(e.target.value)}
+          placeholder={placeholderUrl}
+          className="h-8 text-sm"
+        />
+      </div>
+      <p className="text-xs text-muted-foreground/70">{t("settingsPage.selfHosted.lanHint")}</p>
+    </div>
+  );
+}