@cognizant-ai-lab/ui-common 1.6.0 → 1.7.0

package/dist/components/Settings/SettingsDialog.js

@@ -3,7 +3,6 @@ import RestoreIcon from "@mui/icons-material/SettingsBackupRestore";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
-import CircularProgress from "@mui/material/CircularProgress";
 import Divider from "@mui/material/Divider";
 import FormLabel from "@mui/material/FormLabel";
 import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
@@ -13,8 +12,10 @@ import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { useEffect, useState } from "react";
+import { ApiKeyInput } from "./ApiKeyInput.js";
 import { FadingCheckmark, useCheckmarkFade } from "./FadingCheckmark.js";
 import { getBrandingSuggestions } from "../../controller/agent/Agent.js";
+import { isAnthropicKeyValid, isOpenAIKeyValid } from "../../controller/llm/Providers.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { PALETTES } from "../../Theme/Palettes.js";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
@@ -51,6 +52,8 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
     // Zen mode
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
     const enableZenModeCheckmark = useCheckmarkFade();
+    // API keys
+    const apiKeys = useSettingsStore((state) => state.settings.apiKeys);
     // Record user's current theme so at least the settings dialog (with default MUI theme) matches that
     const theme = useTheme();
     const paletteMode = theme.palette.mode;
@@ -146,12 +149,35 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
         brandingCheckmark.trigger();
         setIsBrandingApplying(false);
     };
+    const persistKey = (vendor, key) => {
+        updateSettings({
+            apiKeys: {
+                [vendor]: key,
+            },
+        });
+    };
     // Effect to keep input in sync with state store
     useEffect(() => {
         setCustomerInput(customer ?? "");
     }, [customer]);
     const availablePalettes = customer && brandingRangePalette?.length > 0 ? { brand: brandingRangePalette } : PALETTES;
     const paletteKeys = Object.keys(availablePalettes);
+    const apiKeyConfigs = [
+        {
+            vendor: "OpenAI",
+            idSuffix: "openai",
+            logo: theme.palette.mode === "dark" ? "/OpenAI-white.png" : "/OpenAI-black.png",
+            onTest: isOpenAIKeyValid,
+            placeholder: "sk-...",
+        },
+        {
+            vendor: "Anthropic",
+            idSuffix: "anthropic",
+            logo: "/claude.png",
+            onTest: isAnthropicKeyValid,
+            placeholder: "sk-ant-...",
+        },
+    ];
     /* Dev note:
         Before you go removing the "useless" spans in code below that wrap MUI elements: they are required because
         MUI's disabled state on certain components sets pointer-events: none, which prevents tooltips from working.
@@ -176,7 +202,8 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
                     minWidth: "50%",
                     minHeight: "50%",
                     border: "1px solid",
-                }, children: [_jsxs(Box, { sx: { marginBottom: 3 }, children: [_jsx(Typography, { variant: "h6", sx: { marginBottom: 1 }, children: "Behavior" }), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [_jsx(FormLabel, { children: "Enable \"Zen\" mode:" }), _jsx(Tooltip, { title: "Hides most of the UI during agent network animations, providing a more immersive experience.", children: _jsx(Checkbox, { checked: enableZenMode, "data-testid": "zen-mode-checkbox", onChange: (_, checked) => {
+                }, children: [_jsxs(Box, { sx: { marginBottom: 3 }, children: [_jsx(Typography, { variant: "h6", sx: { marginBottom: 1 }, children: "API Keys" }), _jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: apiKeyConfigs.map(({ vendor, idSuffix, logo, onTest, placeholder }) => (_jsx(ApiKeyInput, { forgetKey: () => persistKey(vendor, ""), id: `${id}-${idSuffix}`, logo: logo, onSave: (key) => persistKey(vendor, key), onTest: onTest, persistedValue: apiKeys[vendor], placeholder: placeholder, vendor: vendor }, idSuffix))) })] }), _jsxs(Box, { sx: { marginBottom: 3 }, children: [_jsx(Typography, { variant: "h6", sx: { marginBottom: 1 }, children: "Behavior" }), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [_jsx(FormLabel, { children: "Enable \"Zen\" mode:" }), _jsx(Tooltip, { title: "Hides most of the UI during agent network animations, " +
+                                            "providing a more immersive experience.", children: _jsx(Checkbox, { checked: enableZenMode, "data-testid": "zen-mode-checkbox", onChange: (_, checked) => {
                                                 updateSettings({ behavior: { enableZenMode: checked } });
                                                 enableZenModeCheckmark.trigger();
                                             } }) }), _jsx(FadingCheckmark, { show: enableZenModeCheckmark.show })] })] }), _jsxs(Box, { sx: { marginBottom: 3 }, children: [_jsx(Typography, { variant: "h6", sx: { marginBottom: 1 }, children: "Appearance" }), _jsx(Typography, { variant: "subtitle1", sx: { marginBottom: 1, marginTop: 2, fontWeight: 600 }, children: "Branding" }), _jsx(Divider, { sx: { marginBottom: 2 } }), _jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, marginBottom: "1rem", width: "100%" }, children: [_jsx(FormLabel, { children: "Customer:" }), _jsx(TextField, { "aria-label": "branding-input", onChange: (e) => setCustomerInput(e.target.value), onKeyDown: (e) => {
@@ -185,7 +212,7 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
                                                 }
                                             }, value: customerInput ?? "", placeholder: "Company or organization name", size: "small", sx: { width: "100%" }, variant: "outlined" }), _jsx(Button, { disabled: customerInput?.trim().length === 0 ||
                                                 isBrandingApplying ||
-                                                customerInput === customer, variant: "contained", size: "small", onClick: handleBrandingApply, startIcon: isBrandingApplying ? (_jsx(CircularProgress, { size: 16, color: "inherit" })) : undefined, sx: { minWidth: "8rem" }, children: isBrandingApplying ? "Applying..." : "Apply" }), _jsx(FadingCheckmark, { show: brandingCheckmark.show })] }) }), _jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, marginBottom: "1rem", width: "100%" }, children: [_jsx(FormLabel, { children: "Logo:" }), _jsx(Tooltip, { title: customer ? null : "Set a customer name to enable logo options", children: _jsx("span", { children: _jsxs(ToggleButtonGroup, { "aria-label": "logo-selection", disabled: !customer, exclusive: true, onChange: (_, value) => {
+                                                customerInput === customer, variant: "contained", size: "small", onClick: handleBrandingApply, loading: isBrandingApplying, sx: { minWidth: "8rem" }, children: "Apply" }), _jsx(FadingCheckmark, { show: brandingCheckmark.show })] }) }), _jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, marginBottom: "1rem", width: "100%" }, children: [_jsx(FormLabel, { children: "Logo:" }), _jsx(Tooltip, { title: customer ? null : "Set a customer name to enable logo options", children: _jsx("span", { children: _jsxs(ToggleButtonGroup, { "aria-label": "logo-selection", disabled: !customer, exclusive: true, onChange: (_, value) => {
                                                         if (value !== null) {
                                                             updateSettings({
                                                                 branding: {

package/dist/controller/llm/Providers.d.ts

@@ -0,0 +1,2 @@
+export declare const isOpenAIKeyValid: (key: string) => Promise<boolean>;
+export declare const isAnthropicKeyValid: (key: string) => Promise<boolean>;

package/dist/controller/llm/Providers.js

@@ -0,0 +1,41 @@
+export const isOpenAIKeyValid = async (key) => {
+    try {
+        // Just call the "list models" API with the supplied key.
+        // We don't care about the result, just whether it succeeds or not
+        const res = await fetch("https://api.openai.com/v1/models", {
+            method: "GET",
+            headers: {
+                Accept: "application/json",
+                Authorization: `Bearer ${key}`,
+            },
+        });
+        return res.ok;
+    }
+    catch (e) {
+        console.error("Error validating API key:", e);
+        return false;
+    }
+};
+export const isAnthropicKeyValid = async (key) => {
+    try {
+        // Just call the "list models" API with the supplied key.
+        // We don't care about the result, just whether it succeeds or not
+        const res = await fetch("https://api.anthropic.com/v1/models", {
+            method: "GET",
+            headers: {
+                Accept: "application/json",
+                "anthropic-version": "2023-06-01",
+                "X-Api-Key": key,
+                // Request vendor to allow CORS for this endpoint
+                // Reference: https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/
+                // The request will be rejected without this.
+                "anthropic-dangerous-direct-browser-access": "true",
+            },
+        });
+        return res.ok;
+    }
+    catch (e) {
+        console.error("Error validating API key:", e);
+        return false;
+    }
+};

package/dist/state/Settings.d.ts

@@ -9,6 +9,7 @@ import { PaletteKey } from "../Theme/Palettes.js";
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
+export type LLMProvider = "OpenAI" | "Anthropic";
 /**
  * User preference settings
  */
@@ -32,6 +33,7 @@ interface Settings {
     readonly behavior: {
         readonly enableZenMode: boolean;
     };
+    readonly apiKeys: Partial<Record<LLMProvider, string>>;
 }
 /**
  * Zustand state store for user preferences/Settings

package/dist/state/Settings.js

@@ -40,6 +40,7 @@ export const DEFAULT_SETTINGS = {
     behavior: {
         enableZenMode: true,
     },
+    apiKeys: {},
 };
 /**
  * The hook that lets apps use the store