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>
2026-06-05 16:36:01 -04:00
parent 1bbca38344
commit 2457e12b5c
50 changed files with 930 additions and 102 deletions
--- a/apps/Backend/src/routes/ai-settings.ts
+++ b/apps/Backend/src/routes/ai-settings.ts
@@ -15,9 +15,16 @@ router.get("/settings", async (req: Request, res: Response): Promise<any> => {
    if (!settings) return res.status(200).json(null);

    return res.status(200).json({
-      id:             settings.id,
-      apiKey:         settings.apiKey,
-      openPhoneReply: settings.openPhoneReply ?? false,
+      id:               settings.id,
+      apiKey:           settings.apiKey,
+      aiEnabled:        settings.aiEnabled ?? true,
+      openAiKey:        settings.openAiKey ?? "",
+      openAiEnabled:    settings.openAiEnabled ?? false,
+      claudeAiKey:      settings.claudeAiKey ?? "",
+      claudeAiEnabled:  settings.claudeAiEnabled ?? false,
+      dentalMgmtKey:    settings.dentalMgmtKey ?? "",
+      dentalMgmtEnabled: settings.dentalMgmtEnabled ?? false,
+      openPhoneReply:   settings.openPhoneReply ?? false,
    });
  } catch (err) {
    return res.status(500).json({ error: "Failed to fetch AI settings", details: String(err) });
@@ -30,18 +37,78 @@ router.put("/settings", async (req: Request, res: Response): Promise<any> => {
    const userId = req.user?.id;
    if (!userId) return res.status(401).json({ message: "Unauthorized" });

-    const { apiKey } = req.body;
+    const { apiKey, aiEnabled } = req.body;
    if (!apiKey?.trim()) {
      return res.status(400).json({ message: "apiKey is required" });
    }

-    const settings = await storage.upsertAiSettings(userId, apiKey.trim());
-    return res.status(200).json({ id: settings.id, apiKey: settings.apiKey });
+    const settings = await storage.upsertAiSettings(userId, apiKey.trim(), aiEnabled);
+    return res.status(200).json({ id: settings.id, apiKey: settings.apiKey, aiEnabled: settings.aiEnabled ?? true });
  } catch (err) {
    return res.status(500).json({ error: "Failed to save AI settings", details: String(err) });
  }
 });

+// PUT /api/ai/enabled
+router.put("/enabled", async (req: Request, res: Response): Promise<any> => {
+  try {
+    const userId = req.user?.id;
+    if (!userId) return res.status(401).json({ message: "Unauthorized" });
+
+    const { aiEnabled } = req.body;
+    if (typeof aiEnabled !== "boolean") {
+      return res.status(400).json({ message: "aiEnabled must be a boolean" });
+    }
+
+    await storage.setAiEnabled(userId, aiEnabled);
+    return res.status(200).json({ aiEnabled });
+  } catch (err) {
+    return res.status(500).json({ error: "Failed to save AI enabled setting", details: String(err) });
+  }
+});
+
+// PUT /api/ai/provider-key
+router.put("/provider-key", async (req: Request, res: Response): Promise<any> => {
+  try {
+    const userId = req.user?.id;
+    if (!userId) return res.status(401).json({ message: "Unauthorized" });
+
+    const { provider, apiKey } = req.body;
+    if (!["openAi", "claudeAi", "dentalMgmt"].includes(provider)) {
+      return res.status(400).json({ message: "Invalid provider" });
+    }
+    if (!apiKey?.trim()) {
+      return res.status(400).json({ message: "apiKey is required" });
+    }
+
+    await storage.upsertProviderKey(userId, provider, apiKey.trim());
+    return res.status(200).json({ provider, apiKey: apiKey.trim() });
+  } catch (err) {
+    return res.status(500).json({ error: "Failed to save provider key", details: String(err) });
+  }
+});
+
+// PUT /api/ai/provider-enabled
+router.put("/provider-enabled", async (req: Request, res: Response): Promise<any> => {
+  try {
+    const userId = req.user?.id;
+    if (!userId) return res.status(401).json({ message: "Unauthorized" });
+
+    const { provider, enabled } = req.body;
+    if (!["openAi", "claudeAi", "dentalMgmt"].includes(provider)) {
+      return res.status(400).json({ message: "Invalid provider" });
+    }
+    if (typeof enabled !== "boolean") {
+      return res.status(400).json({ message: "enabled must be a boolean" });
+    }
+
+    await storage.setProviderEnabled(userId, provider, enabled);
+    return res.status(200).json({ provider, enabled });
+  } catch (err) {
+    return res.status(500).json({ error: "Failed to save provider enabled setting", details: String(err) });
+  }
+});
+
 // GET /api/ai/advanced-settings
 router.get("/advanced-settings", async (req: Request, res: Response): Promise<any> => {
  try {
--- a/apps/Backend/src/storage/ai-settings-storage.ts
+++ b/apps/Backend/src/storage/ai-settings-storage.ts
@@ -5,11 +5,37 @@ export const aiSettingsStorage = {
    return db.aiSettings.findUnique({ where: { userId } });
  },

-  async upsertAiSettings(userId: number, apiKey: string) {
+  async upsertAiSettings(userId: number, apiKey: string, aiEnabled?: boolean) {
    return db.aiSettings.upsert({
      where: { userId },
-      update: { apiKey },
-      create: { userId, apiKey },
+      update: { apiKey, ...(aiEnabled !== undefined && { aiEnabled }) },
+      create: { userId, apiKey, aiEnabled: aiEnabled ?? true },
+    });
+  },
+
+  async setAiEnabled(userId: number, enabled: boolean): Promise<void> {
+    await db.aiSettings.upsert({
+      where:  { userId },
+      update: { aiEnabled: enabled },
+      create: { userId, apiKey: "", aiEnabled: enabled },
+    });
+  },
+
+  async upsertProviderKey(userId: number, provider: "openAi" | "claudeAi" | "dentalMgmt", key: string): Promise<void> {
+    const field = provider === "openAi" ? "openAiKey" : provider === "claudeAi" ? "claudeAiKey" : "dentalMgmtKey";
+    await db.aiSettings.upsert({
+      where:  { userId },
+      update: { [field]: key },
+      create: { userId, apiKey: "", [field]: key },
+    });
+  },
+
+  async setProviderEnabled(userId: number, provider: "openAi" | "claudeAi" | "dentalMgmt", enabled: boolean): Promise<void> {
+    const field = provider === "openAi" ? "openAiEnabled" : provider === "claudeAi" ? "claudeAiEnabled" : "dentalMgmtEnabled";
+    await db.aiSettings.upsert({
+      where:  { userId },
+      update: { [field]: enabled },
+      create: { userId, apiKey: "", [field]: enabled, openAiEnabled: false, claudeAiEnabled: false, dentalMgmtEnabled: false },
    });
  },

--- a/apps/Frontend/src/components/layout/sidebar.tsx
+++ b/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" />,
          },
--- a/apps/Frontend/src/components/settings/ai-settings-card.tsx
+++ b/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>
  );