feat: AI API Setting page with 4 provider sections and toggles

Add OpenAI, Claude AI, and DentalManagement AI sections to the AI API
Setting page, each with a masked API key input and an on/off toggle
(defaulting to off). Rename sidebar label from "Google AI Settings" to
"AI API Setting". Add provider-key and provider-enabled backend endpoints
and extend the AiSettings schema with 6 new fields.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/Frontend/src/components/layout/sidebar.tsx

@@ -276,7 +276,7 @@ export function Sidebar() {
             icon: <Phone className="h-4 w-4 text-gray-400" />,
           },
           {
-            name: "Google AI Settings",
+            name: "AI API Setting",
             path: "/settings/ai",
             icon: <Bot className="h-4 w-4 text-gray-400" />,
           },

apps/Frontend/src/components/settings/ai-settings-card.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
 import { Eye, EyeOff, CheckCircle } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
@@ -8,12 +10,101 @@ import { apiRequest, queryClient } from "@/lib/queryClient";
 type AiSettings = {
   id?: number;
   apiKey: string;
+  aiEnabled: boolean;
+  openAiKey: string;
+  openAiEnabled: boolean;
+  claudeAiKey: string;
+  claudeAiEnabled: boolean;
+  dentalMgmtKey: string;
+  dentalMgmtEnabled: boolean;
 };
 
+type Provider = "openAi" | "claudeAi" | "dentalMgmt";
+
+function ApiKeySection({
+  title,
+  description,
+  apiKey,
+  enabled,
+  isConfigured,
+  onSave,
+  onToggle,
+  isSaving,
+  isToggling,
+}: {
+  title: string;
+  description: string;
+  apiKey: string;
+  enabled: boolean;
+  isConfigured: boolean;
+  onSave: (key: string) => void;
+  onToggle: (enabled: boolean) => void;
+  isSaving: boolean;
+  isToggling: boolean;
+}) {
+  const [localKey, setLocalKey] = useState(apiKey);
+  const [showKey, setShowKey] = useState(false);
+
+  useEffect(() => {
+    setLocalKey(apiKey);
+  }, [apiKey]);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <h3 className="text-lg font-semibold">{title}</h3>
+          {isConfigured && (
+            <span className="flex items-center gap-1 text-xs text-green-600 font-medium">
+              <CheckCircle className="h-3.5 w-3.5" /> Configured
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500">{enabled ? "On" : "Off"}</span>
+          <Switch checked={enabled} onCheckedChange={onToggle} disabled={isToggling} />
+        </div>
+      </div>
+
+      <p className="text-sm text-gray-500">{description}</p>
+
+      <div>
+        <label className="block text-sm font-medium">API Key</label>
+        <div className="relative mt-1">
+          <input
+            type={showKey ? "text" : "password"}
+            value={localKey}
+            onChange={(e) => setLocalKey(e.target.value)}
+            className="p-2 border rounded w-full pr-10 font-mono text-sm"
+            placeholder="••••••••••••••••••••••••••••••••••••••"
+          />
+          <button
+            type="button"
+            onClick={() => setShowKey((v) => !v)}
+            className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
+            tabIndex={-1}
+          >
+            {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
+          </button>
+        </div>
+      </div>
+
+      <button
+        onClick={() => { if (localKey.trim()) onSave(localKey.trim()); }}
+        className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
+        disabled={isSaving || !localKey.trim()}
+      >
+        {isSaving ? "Saving..." : "Save"}
+      </button>
+    </div>
+  );
+}
+
 export function AiSettingsCard() {
   const { toast } = useToast();
   const [apiKey, setApiKey] = useState("");
-  const [showKey, setShowKey] = useState(false);
+  const [showGoogleKey, setShowGoogleKey] = useState(false);
+  const [aiEnabled, setAiEnabled] = useState(true);
 
   const { data: settings, isLoading } = useQuery<AiSettings | null>({
     queryKey: ["/api/ai/settings"],
@@ -27,104 +118,183 @@ export function AiSettingsCard() {
   useEffect(() => {
     if (settings) {
       setApiKey(settings.apiKey ?? "");
+      setAiEnabled(settings.aiEnabled ?? true);
     }
   }, [settings]);
 
-  const saveMutation = useMutation({
-    mutationFn: async (data: { apiKey: string }) => {
-      const res = await apiRequest("PUT", "/api/ai/settings", data);
-      if (!res.ok) {
-        const err = await res.json().catch(() => null);
-        throw new Error(err?.message || "Failed to save AI settings");
-      }
+  // Google AI save
+  const googleSaveMutation = useMutation({
+    mutationFn: async (key: string) => {
+      const res = await apiRequest("PUT", "/api/ai/settings", { apiKey: key });
+      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed to save");
       return res.json();
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
-      toast({ title: "AI Settings Saved", description: "Your Google AI API key has been saved." });
+      toast({ title: "Saved", description: "Google AI API key saved." });
+    },
+    onError: (err: any) => toast({ title: "Error", description: err?.message, variant: "destructive" }),
+  });
+
+  // Google AI toggle
+  const googleToggleMutation = useMutation({
+    mutationFn: async (enabled: boolean) => {
+      const res = await apiRequest("PUT", "/api/ai/enabled", { aiEnabled: enabled });
+      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed");
+      return res.json();
+    },
+    onSuccess: (_d, enabled) => {
+      queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
+      toast({ title: enabled ? "Google AI Enabled" : "Google AI Disabled" });
     },
     onError: (err: any) => {
-      toast({ title: "Error", description: err?.message || "Failed to save AI settings", variant: "destructive" });
+      setAiEnabled((v) => !v);
+      toast({ title: "Error", description: err?.message, variant: "destructive" });
     },
   });
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!apiKey.trim()) return;
-    saveMutation.mutate({ apiKey: apiKey.trim() });
-  };
+  // Provider key save
+  const providerKeyMutation = useMutation({
+    mutationFn: async ({ provider, apiKey }: { provider: Provider; apiKey: string }) => {
+      const res = await apiRequest("PUT", "/api/ai/provider-key", { provider, apiKey });
+      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed");
+      return { provider };
+    },
+    onSuccess: ({ provider }) => {
+      queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
+      const names: Record<Provider, string> = { openAi: "OpenAI", claudeAi: "Claude AI", dentalMgmt: "DentalManagement AI" };
+      toast({ title: "Saved", description: `${names[provider]} API key saved.` });
+    },
+    onError: (err: any) => toast({ title: "Error", description: err?.message, variant: "destructive" }),
+  });
 
-  const isConfigured = !!settings?.apiKey;
+  // Provider toggle
+  const providerToggleMutation = useMutation({
+    mutationFn: async ({ provider, enabled }: { provider: Provider; enabled: boolean }) => {
+      const res = await apiRequest("PUT", "/api/ai/provider-enabled", { provider, enabled });
+      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message || "Failed");
+      return { provider, enabled };
+    },
+    onSuccess: ({ provider, enabled }) => {
+      queryClient.invalidateQueries({ queryKey: ["/api/ai/settings"] });
+      const names: Record<Provider, string> = { openAi: "OpenAI", claudeAi: "Claude AI", dentalMgmt: "DentalManagement AI" };
+      toast({ title: `${names[provider]} ${enabled ? "Enabled" : "Disabled"}` });
+    },
+    onError: (err: any) => toast({ title: "Error", description: err?.message, variant: "destructive" }),
+  });
+
+  if (isLoading) {
+    return <Card><CardContent className="py-6"><p className="text-sm text-gray-400">Loading...</p></CardContent></Card>;
+  }
 
   return (
     <Card>
-      <CardContent className="space-y-4 py-6">
-        <div className="flex items-center gap-2">
-          <h3 className="text-lg font-semibold">Google AI Settings</h3>
-          {isConfigured && (
-            <span className="flex items-center gap-1 text-xs text-green-600 font-medium">
-              <CheckCircle className="h-3.5 w-3.5" /> Configured
-            </span>
-          )}
-        </div>
-        <p className="text-sm text-gray-500">
-          Enter your Google AI Studio API key to enable AI-powered SMS replies. When a patient responds to an
-          appointment reminder, the AI will automatically reply based on their answer.
-        </p>
+      <CardContent className="py-6 space-y-6">
 
-        {isLoading ? (
-          <p className="text-sm text-gray-400">Loading...</p>
-        ) : (
-          <form className="space-y-4" onSubmit={handleSubmit}>
-            <div>
-              <label className="block text-sm font-medium">Google AI Studio API Key</label>
-              <div className="relative mt-1">
-                <input
-                  type={showKey ? "text" : "password"}
-                  value={apiKey}
-                  onChange={(e) => setApiKey(e.target.value)}
-                  className="p-2 border rounded w-full pr-10 font-mono text-sm"
-                  placeholder="AIza••••••••••••••••••••••••••••••••••••••"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowKey((v) => !v)}
-                  className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
-                  tabIndex={-1}
-                >
-                  {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
-              </div>
-              <p className="text-xs text-gray-500 mt-1">
-                Get your free key from{" "}
-                <span className="font-medium">Google AI Studio</span> → Get API Key.
-              </p>
+        {/* Google AI */}
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <h3 className="text-lg font-semibold">Google AI Settings</h3>
+              {!!settings?.apiKey && (
+                <span className="flex items-center gap-1 text-xs text-green-600 font-medium">
+                  <CheckCircle className="h-3.5 w-3.5" /> Configured
+                </span>
+              )}
             </div>
-
-            <div className="flex items-center gap-3 pt-1">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-gray-500">{aiEnabled ? "On" : "Off"}</span>
+              <Switch
+                checked={aiEnabled}
+                onCheckedChange={(v) => { setAiEnabled(v); googleToggleMutation.mutate(v); }}
+                disabled={googleToggleMutation.isPending}
+              />
+            </div>
+          </div>
+          <p className="text-sm text-gray-500">
+            Enter your Google AI Studio API key to enable AI-powered SMS replies.
+          </p>
+          <div>
+            <label className="block text-sm font-medium">Google AI Studio API Key</label>
+            <div className="relative mt-1">
+              <input
+                type={showGoogleKey ? "text" : "password"}
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                className="p-2 border rounded w-full pr-10 font-mono text-sm"
+                placeholder="AIza••••••••••••••••••••••••••••••••••••••"
+              />
               <button
-                type="submit"
-                className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
-                disabled={saveMutation.isPending}
+                type="button"
+                onClick={() => setShowGoogleKey((v) => !v)}
+                className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
+                tabIndex={-1}
               >
-                {saveMutation.isPending ? "Saving..." : "Save AI Settings"}
+                {showGoogleKey ? <EyeOff size={16} /> : <Eye size={16} />}
               </button>
             </div>
+          </div>
+          <button
+            onClick={() => { if (apiKey.trim()) googleSaveMutation.mutate(apiKey.trim()); }}
+            className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
+            disabled={googleSaveMutation.isPending || !apiKey.trim()}
+          >
+            {googleSaveMutation.isPending ? "Saving..." : "Save"}
+          </button>
+          {!!settings?.apiKey && (
+            <div className="mt-2 p-3 bg-gray-50 rounded border text-xs text-gray-600 space-y-1">
+              <p className="font-medium text-gray-700">AI Auto-Reply Rules</p>
+              <p><span className="text-green-600 font-medium">Patient replies "Yes"</span> → AI sends a thank-you confirmation</p>
+              <p><span className="text-red-500 font-medium">Patient replies "No" / "Not available"</span> → AI notifies them an assistant will follow up</p>
+            </div>
+          )}
+        </div>
+
+        <Separator />
+
+        {/* OpenAI */}
+        <ApiKeySection
+          title="OpenAI Settings"
+          description="Enter your OpenAI API key to enable OpenAI-powered features."
+          apiKey={settings?.openAiKey ?? ""}
+          enabled={settings?.openAiEnabled ?? false}
+          isConfigured={!!settings?.openAiKey}
+          onSave={(key) => providerKeyMutation.mutate({ provider: "openAi", apiKey: key })}
+          onToggle={(v) => providerToggleMutation.mutate({ provider: "openAi", enabled: v })}
+          isSaving={providerKeyMutation.isPending && (providerKeyMutation.variables as any)?.provider === "openAi"}
+          isToggling={providerToggleMutation.isPending && (providerToggleMutation.variables as any)?.provider === "openAi"}
+        />
+
+        <Separator />
+
+        {/* Claude AI */}
+        <ApiKeySection
+          title="Claude AI Settings"
+          description="Enter your Anthropic Claude API key to enable Claude-powered features."
+          apiKey={settings?.claudeAiKey ?? ""}
+          enabled={settings?.claudeAiEnabled ?? false}
+          isConfigured={!!settings?.claudeAiKey}
+          onSave={(key) => providerKeyMutation.mutate({ provider: "claudeAi", apiKey: key })}
+          onToggle={(v) => providerToggleMutation.mutate({ provider: "claudeAi", enabled: v })}
+          isSaving={providerKeyMutation.isPending && (providerKeyMutation.variables as any)?.provider === "claudeAi"}
+          isToggling={providerToggleMutation.isPending && (providerToggleMutation.variables as any)?.provider === "claudeAi"}
+        />
+
+        <Separator />
+
+        {/* DentalManagement AI */}
+        <ApiKeySection
+          title="DentalManagement AI Settings"
+          description="Enter your DentalManagement AI API key to enable DentalManagement-powered features."
+          apiKey={settings?.dentalMgmtKey ?? ""}
+          enabled={settings?.dentalMgmtEnabled ?? false}
+          isConfigured={!!settings?.dentalMgmtKey}
+          onSave={(key) => providerKeyMutation.mutate({ provider: "dentalMgmt", apiKey: key })}
+          onToggle={(v) => providerToggleMutation.mutate({ provider: "dentalMgmt", enabled: v })}
+          isSaving={providerKeyMutation.isPending && (providerKeyMutation.variables as any)?.provider === "dentalMgmt"}
+          isToggling={providerToggleMutation.isPending && (providerToggleMutation.variables as any)?.provider === "dentalMgmt"}
+        />
 
-            {isConfigured && (
-              <div className="mt-2 p-3 bg-gray-50 rounded border text-xs text-gray-600 space-y-1">
-                <p className="font-medium text-gray-700">AI Auto-Reply Rules</p>
-                <p>
-                  <span className="text-green-600 font-medium">Patient replies "Yes"</span> → AI sends a thank-you confirmation
-                </p>
-                <p>
-                  <span className="text-red-500 font-medium">Patient replies "No" / "Not available"</span> → AI notifies them an assistant will follow up
-                </p>
-              </div>
-            )}
-          </form>
-        )}
       </CardContent>
     </Card>
   );