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

package/dist/components/Settings/SettingsDialog.js

@@ -1,27 +1,89 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Business from "@mui/icons-material/Business";
+import ClearIcon from "@mui/icons-material/Clear";
 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 Divider from "@mui/material/Divider";
 import FormLabel from "@mui/material/FormLabel";
-import { createTheme, ThemeProvider, useTheme } from "@mui/material/styles";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import { createTheme, styled, ThemeProvider, useTheme } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState, } from "react";
 import { ApiKeyInput } from "./ApiKeyInput.js";
-import { FadingCheckmark, useCheckmarkFade } from "./FadingCheckmark.js";
-import { getBrandingSuggestions } from "../../controller/agent/Agent.js";
+import { useCheckmarkFade } from "./FadingCheckmark.js";
+import { SettingsRow } from "./SettingsRow.js";
+import { getBrandingSuggestions, testConnection } from "../../controller/agent/Agent.js";
 import { isAnthropicKeyValid, isOpenAIKeyValid } from "../../controller/llm/Providers.js";
-import { useSettingsStore } from "../../state/Settings.js";
+import { useEnvironmentStore } from "../../state/Environment.js";
+import { API_KEYS_TTL_MS, DEFAULT_SETTINGS, getApiKey, useSettingsStore, } from "../../state/Settings.js";
 import { PALETTES } from "../../Theme/Palettes.js";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
-import { CustomerLogo } from "../Common/CustomerLogo.js";
 import { MUIDialog } from "../Common/MUIDialog.js";
 import { NotificationType, sendNotification } from "../Common/notification.js";
+import { StatusLight } from "../Common/StatusLight.js";
+import { CustomerLogo } from "../Logo/CustomerLogo.js";
+//#region: Styled Components
+const SettingsSectionTitleBase = (props) => (_jsx(Typography, { variant: "h6", ...props }));
+const SettingsSectionTitle = styled(SettingsSectionTitleBase)(({ theme }) => ({
+    marginBottom: theme.spacing(0.5),
+}));
+const Section = styled(Box)(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+}));
+const SubsectionTitle = styled(Typography)(({ theme }) => ({
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    color: theme.palette.text.secondary,
+    fontWeight: 600,
+    paddingBottom: theme.spacing(0.5),
+    marginBottom: theme.spacing(1.5),
+    width: "100%",
+}));
+const SubSection = styled(Box)(({ theme }) => ({
+    alignItems: "start",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(4),
+}));
+const SubSectionBody = styled(Box)(({ theme }) => ({
+    alignContent: "center",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2.5),
+    width: "100%",
+}));
+//#endregion: Types and Interfaces
+// eslint-disable-next-line react/no-multi-comp -- only relevant to this module.
+const SettingsSubsection = ({ title, children }) => (_jsxs(SubSection, { children: [_jsx(SubsectionTitle, { variant: "subtitle1", children: title }), _jsx(SubSectionBody, { children: children })] }));
+const URL_PROTOCOL_REGEX = /^https?:\/\//iu;
+const HTTP_PROTOCOL_REGEX = /^http:\/\//iu;
+const stripProtocol = (value) => (value ?? "").replace(URL_PROTOCOL_REGEX, "");
+/**
+ * Normalize a Neuro SAN URL input by stripping the protocol and determining the protocol to use.
+ * @param value The input URL value to normalize.
+ * @param fallbackProtocol The protocol to use if the input value does not specify one.
+ * @return An object containing the normalized host and protocol.
+ */
+const normalizeNeuroSanUrlInput = (value, fallbackProtocol) => {
+    const trimmedValue = value.trim();
+    const hasProtocol = URL_PROTOCOL_REGEX.exec(trimmedValue);
+    return {
+        host: stripProtocol(trimmedValue),
+        protocol: hasProtocol ? (HTTP_PROTOCOL_REGEX.test(trimmedValue) ? "http" : "https") : fallbackProtocol,
+    };
+};
+// eslint-disable-next-line react/no-multi-comp -- styled component shim is only used in this module
 export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
     // Settings store actions
     const updateSettings = useSettingsStore((state) => state.updateSettings);
@@ -46,14 +108,42 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
     const customer = useSettingsStore((state) => state.settings.branding.customer);
     const brandingCheckmark = useCheckmarkFade();
     const logoCheckmark = useCheckmarkFade();
-    const [customerInput, setCustomerInput] = useState(customer);
+    const [customerInput, setCustomerInput] = useState(customer ?? "");
     const [isBrandingApplying, setIsBrandingApplying] = useState(false);
     const logoSource = useSettingsStore((state) => state.settings.branding.logoSource);
+    const iconSuggestion = useSettingsStore((state) => state.settings.branding.iconSuggestion);
     // Zen mode
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
     const enableZenModeCheckmark = useCheckmarkFade();
     // API keys
     const apiKeys = useSettingsStore((state) => state.settings.apiKeys);
+    const openAIKeyCheckmark = useCheckmarkFade();
+    const anthropicKeyCheckmark = useCheckmarkFade();
+    // Native names setting
+    const useNativeNames = useSettingsStore((state) => state.settings.appearance.useNativeNames);
+    const nativeNamesCheckmark = useCheckmarkFade();
+    /*
+        Neuro SAN URL
+        This can come from three sources:
+        1) The default URL from server environment variables
+        2) The persisted value in the Zustand store
+        3) The current state value, from the user's input in the settings dialog
+     */
+    const defaultNeuroSanUrl = useEnvironmentStore((state) => state.backendNeuroSanApiUrl ?? "");
+    const persistedNeuroSanUrl = useSettingsStore((state) => state.settings.externalServices.neuroSanUrl);
+    const effectiveNeuroSanUrl = persistedNeuroSanUrl || defaultNeuroSanUrl;
+    const effectiveNeuroSanProtocol = effectiveNeuroSanUrl.startsWith("http://") ? "http" : "https";
+    const neuroSanUrlNoProtocol = stripProtocol(effectiveNeuroSanUrl);
+    const [neuroSanUrlInput, setNeuroSanUrlInput] = useState(neuroSanUrlNoProtocol);
+    const [neuroSanProtocol, setNeuroSanProtocol] = useState(effectiveNeuroSanProtocol);
+    const [neuroSanUrlValidated, setNeuroSanUrlValidated] = useState(null);
+    const neuroSanURLCheckmark = useCheckmarkFade();
+    const neuroSanHostChanged = neuroSanUrlInput.trim() !== neuroSanUrlNoProtocol;
+    const neuroSanProtocolChanged = neuroSanProtocol !== effectiveNeuroSanProtocol;
+    const neuroSanUrlSaveDisabled = neuroSanUrlInput.trim().length === 0 || (!neuroSanHostChanged && !neuroSanProtocolChanged);
+    const neuroSanUrlResetDisabled = neuroSanUrlInput === stripProtocol(defaultNeuroSanUrl) &&
+        neuroSanProtocol === (defaultNeuroSanUrl.startsWith("http://") ? "http" : "https");
+    const statusLightValue = neuroSanUrlValidated === null ? "unknown" : neuroSanUrlValidated ? "green" : "red";
     // 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;
@@ -67,94 +157,137 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
         }
         rangePaletteCheckmark.trigger();
     };
+    const updateBranding = (brandingSuggestions) => {
+        const { plasma, nodeColor, primary, secondary, background, rangePalette, iconSuggestion: newIconSuggestion, } = brandingSuggestions;
+        // Update persisted settings with new branding suggestions
+        const updates = {
+            branding: {
+                customer: customerInput,
+                ...(primary ? { primary } : {}),
+                ...(secondary ? { secondary } : {}),
+                ...(background ? { background } : {}),
+                ...(Array.isArray(rangePalette) ? { rangePalette } : {}),
+                ...(newIconSuggestion
+                    ? {
+                        iconSuggestion: newIconSuggestion,
+                        logoSource: logoServiceToken ? "auto" : "generic",
+                    }
+                    : {}),
+            },
+            appearance: {
+                rangePalette: "brand",
+                ...(plasma ? { plasmaColor: plasma } : {}),
+                ...(nodeColor ? { agentNodeColor: nodeColor } : {}),
+            },
+        };
+        updateSettings(updates);
+        // Trigger checkmarks for items we changed
+        brandingCheckmark.trigger();
+        rangePaletteCheckmark.trigger();
+        if (plasma) {
+            plasmaColorCheckmark.trigger();
+        }
+        if (nodeColor) {
+            agentNodeColorCheckmark.trigger();
+        }
+        if (newIconSuggestion) {
+            logoCheckmark.trigger();
+        }
+    };
     /**
      * Handle applying branding based on customer input. Calls backend to get colors then updates settings store.
      */
     const handleBrandingApply = async () => {
         setIsBrandingApplying(true);
-        updateSettings({
-            branding: {
-                customer: customerInput,
-            },
-        });
-        let brandingSuggestions;
         try {
-            brandingSuggestions = await getBrandingSuggestions(customerInput);
+            const brandingSuggestions = await getBrandingSuggestions(customerInput);
+            if (brandingSuggestions) {
+                updateBranding(brandingSuggestions);
+            }
         }
         catch (e) {
-            console.warn(`Failed to fetch branding suggestions for customer "${customerInput}"`, e);
+            console.error(`Failed to fetch branding suggestions for customer "${customerInput}"`, e);
             sendNotification(NotificationType.error, `Failed to fetch branding suggestions for "${customerInput}"`, "Please check the name and try again. If the problem persists, there may be an issue with the " +
                 "branding service.");
-            return;
         }
+        finally {
+            setIsBrandingApplying(false);
+        }
+    };
+    const handleBrandingClear = () => {
+        // Clear branding settings
         updateSettings({
             appearance: {
-                rangePalette: "brand",
+                agentIconColor: DEFAULT_SETTINGS.appearance.agentIconColor,
+                agentNodeColor: DEFAULT_SETTINGS.appearance.agentNodeColor,
+                autoAgentIconColor: DEFAULT_SETTINGS.appearance.autoAgentIconColor,
+                plasmaColor: DEFAULT_SETTINGS.appearance.plasmaColor,
+                rangePalette: DEFAULT_SETTINGS.appearance.rangePalette,
             },
+            branding: { ...DEFAULT_SETTINGS.branding },
         });
-        if (brandingSuggestions["plasma"]) {
-            updateSettings({
-                appearance: {
-                    plasmaColor: brandingSuggestions["plasma"],
-                },
-            });
-            plasmaColorCheckmark.trigger();
-        }
-        if (brandingSuggestions["nodeColor"]) {
-            updateSettings({
-                appearance: {
-                    agentNodeColor: brandingSuggestions["nodeColor"],
-                },
-            });
-            agentNodeColorCheckmark.trigger();
-        }
-        // primary
-        if (brandingSuggestions["primary"]) {
-            updateSettings({
-                branding: {
-                    primary: brandingSuggestions["primary"],
-                },
-            });
-        }
-        // secondary
-        if (brandingSuggestions["secondary"]) {
-            updateSettings({
-                branding: {
-                    secondary: brandingSuggestions["secondary"],
-                },
-            });
-        }
-        // background
-        if (brandingSuggestions["background"]) {
-            updateSettings({
-                branding: {
-                    background: brandingSuggestions["background"],
-                },
-            });
-        }
-        if (Array.isArray(brandingSuggestions["rangePalette"])) {
-            updateSettings({
-                branding: {
-                    rangePalette: brandingSuggestions["rangePalette"],
-                },
-            });
-        }
-        if (brandingSuggestions["iconSuggestion"]) {
-            updateSettings({
-                branding: {
-                    iconSuggestion: brandingSuggestions["iconSuggestion"],
-                },
-            });
-        }
+        // Trigger checkmarks for all the settings that are affected by branding
+        agentIconColorCheckmark.trigger();
+        agentNodeColorCheckmark.trigger();
+        plasmaColorCheckmark.trigger();
+        rangePaletteCheckmark.trigger();
         brandingCheckmark.trigger();
-        setIsBrandingApplying(false);
+        logoCheckmark.trigger();
     };
-    const persistKey = (vendor, key) => {
+    /**
+     * Used for both saving and removing keys.
+     * @param vendor Vendor for this key: see the list in LLMProvider type
+     * @param key Value of the key
+     * @param checkmark Checkmark to trigger on save
+     * @param now Timestamp for "now"
+     */
+    const persistKey = (vendor, key, checkmark, now) => {
         updateSettings({
             apiKeys: {
-                [vendor]: key,
+                [vendor]: {
+                    value: key,
+                    expiresAt: key ? now + API_KEYS_TTL_MS : 0,
+                },
+            },
+        });
+        checkmark.trigger();
+    };
+    const handleTestConnection = async () => {
+        const normalized = normalizeNeuroSanUrlInput(neuroSanUrlInput, neuroSanProtocol);
+        setNeuroSanProtocol(normalized.protocol);
+        setNeuroSanUrlInput(normalized.host);
+        const result = await testConnection(`${normalized.protocol}://${normalized.host}`);
+        setNeuroSanUrlValidated(result.success);
+    };
+    const handleNeuroSanUrlChange = (e) => {
+        setNeuroSanUrlInput(e.target.value);
+        setNeuroSanUrlValidated(null);
+    };
+    const handleSaveNeuroSanUrl = () => {
+        const normalized = normalizeNeuroSanUrlInput(neuroSanUrlInput, neuroSanProtocol);
+        setNeuroSanProtocol(normalized.protocol);
+        setNeuroSanUrlInput(normalized.host);
+        updateSettings({
+            externalServices: {
+                neuroSanUrl: `${normalized.protocol}://${normalized.host}`,
             },
         });
+        neuroSanURLCheckmark.trigger();
+    };
+    const handleNeuroSanProtocolChange = (e) => {
+        const newProtocol = e.target.value;
+        setNeuroSanProtocol(newProtocol);
+        setNeuroSanUrlValidated(null);
+    };
+    const handleNeuroSanUrlBlur = () => {
+        const normalized = normalizeNeuroSanUrlInput(neuroSanUrlInput, neuroSanProtocol);
+        setNeuroSanProtocol(normalized.protocol);
+        setNeuroSanUrlInput(normalized.host);
+    };
+    const handleResetNeuroSanUrl = () => {
+        const normalized = normalizeNeuroSanUrlInput(defaultNeuroSanUrl, "https");
+        setNeuroSanUrlInput(normalized.host);
+        setNeuroSanProtocol(normalized.protocol);
     };
     // Effect to keep input in sync with state store
     useEffect(() => {
@@ -162,131 +295,188 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
     }, [customer]);
     const availablePalettes = customer && brandingRangePalette?.length > 0 ? { brand: brandingRangePalette } : PALETTES;
     const paletteKeys = Object.keys(availablePalettes);
+    // Config for API key inputs, so we can easily add new providers in the future by just adding to this array
     const apiKeyConfigs = [
         {
-            vendor: "OpenAI",
+            checkmark: openAIKeyCheckmark,
             idSuffix: "openai",
             logo: theme.palette.mode === "dark" ? "/OpenAI-white.png" : "/OpenAI-black.png",
             onTest: isOpenAIKeyValid,
             placeholder: "sk-...",
+            vendor: "OpenAI",
         },
         {
-            vendor: "Anthropic",
+            checkmark: anthropicKeyCheckmark,
             idSuffix: "anthropic",
             logo: "/claude.png",
             onTest: isAnthropicKeyValid,
             placeholder: "sk-ant-...",
+            vendor: "Anthropic",
         },
     ];
-    /* 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.
-        Wrapping in a span allows the tooltip to still function while the inner component is disabled.
-        See: https://github.com/mui/material-ui/issues/8416
-     */
+    const getConfirmationModal = () => (_jsx(ConfirmationModal, { id: `${id}-reset-to-default-settings-confirmation-modal`, content: "This will reset all settings to their default values and cannot be undone. " +
+            "Are you sure you want to proceed?", handleCancel: () => {
+            setResetToDefaultSettingsOpen(false);
+        }, handleOk: () => {
+            setResetToDefaultSettingsOpen(false);
+            resetSettings();
+            sendNotification(NotificationType.success, "Settings have been reset to default values.");
+        }, title: "Reset to default settings" }));
+    const getNeuroSanSubsection = () => {
+        return (_jsx(SettingsSubsection, { title: "Neuro SAN", children: _jsxs(SettingsRow, { id: `${id}-neuro-san-server-url-row`, checkmark: neuroSanURLCheckmark, label: "", tooltip: "URL for the Neuro SAN server.", children: [_jsxs(Select, { "aria-label": "protocol-select", onChange: handleNeuroSanProtocolChange, size: "small", sx: { minWidth: 100, flexShrink: 0 }, value: neuroSanProtocol, children: [_jsx(MenuItem, { value: "https", children: "https://" }), _jsx(MenuItem, { value: "http", children: "http://" })] }), _jsx(TextField, { "aria-label": "neuro-san-server-url-host-input", onBlur: handleNeuroSanUrlBlur, onChange: handleNeuroSanUrlChange, placeholder: "example.com:1234", size: "small", slotProps: {
+                            input: {
+                                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "aria-label": "Clear input", edge: "end", size: "small", onClick: () => {
+                                            setNeuroSanUrlInput("");
+                                            setNeuroSanUrlValidated(null);
+                                        }, children: _jsx(ClearIcon, { fontSize: "small" }) }) })),
+                            },
+                        }, sx: { flex: 1 }, value: neuroSanUrlInput }), _jsx(StatusLight, { id: `${id}-status-light`, statusValue: statusLightValue }), _jsx(Button, { disabled: neuroSanUrlInput.trim().length === 0, onClick: handleTestConnection, size: "small", variant: "contained", children: "Test" }), _jsx(Button, { disabled: neuroSanUrlSaveDisabled, onClick: handleSaveNeuroSanUrl, size: "small", variant: "contained", children: "Save" }), _jsx(Button, { disabled: neuroSanUrlResetDisabled, onClick: handleResetNeuroSanUrl, size: "small", variant: "contained", children: "Default" })] }, `${id}-neuro-san-server-url`) }));
+    };
+    const getServicesSection = () => (_jsxs(Section, { children: [_jsx(SettingsSectionTitle, { children: "External Services" }), getNeuroSanSubsection()] }));
+    const getApiKeysSection = () => (_jsxs(Section, { children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: theme.spacing(1) }, children: [_jsx(SettingsSectionTitle, { children: "API Keys" }), _jsx(Tooltip, { title: "API keys are stored locally in your browser's memory for the duration of your session only\n                    and are only sent to the Neuro SAN service for use with the associated LLM provider when you use\n                    this application to interact with networks.\n                    Your keys are never sent to any other servers or services and are not stored on our servers.\n                    When you close this tab or your browser, your keys will be permanently cleared from memory and\n                    you will need to enter them again to use services that require them.", children: _jsxs(Typography, { sx: {
+                                alignSelf: "flex-start",
+                                color: "var(--bs-secondary)",
+                                cursor: "help",
+                                fontSize: "0.7rem",
+                                lineHeight: 1,
+                                mt: 0.5,
+                            }, variant: "caption", children: [_jsx(Box, { component: "span", sx: { mr: 0.5 }, children: "\u24D8" }), _jsx(Box, { component: "span", sx: {
+                                        borderBottom: "1px dashed",
+                                        pb: 0.25,
+                                    }, children: "How are my keys stored and used?" })] }) })] }), _jsx(SettingsSubsection, { title: "LLM Providers", children: _jsx(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1.5 }, children: apiKeyConfigs.map(({ checkmark, vendor, idSuffix, logo, onTest, placeholder }) => (_jsx(SettingsRow, { checkmark: checkmark, label: "", tooltip: `API key for ${vendor}.`, children: _jsx(ApiKeyInput, { forgetKey: () => persistKey(vendor, "", checkmark, 0), id: `${id}-${idSuffix}`, logo: logo, onSave: (key) => persistKey(vendor, key, checkmark, Date.now()), onTest: onTest, persistedValue: getApiKey(apiKeys, vendor), placeholder: placeholder, vendor: vendor }) }, `${id}-${idSuffix}`))) }) })] }));
+    const getBehaviorSection = () => (_jsxs(Section, { children: [_jsx(SettingsSectionTitle, { children: "Behavior" }), _jsx(SettingsSubsection, { title: "Zen mode", children: _jsx(SettingsRow, { label: 'Enable "Zen" mode:', checkmark: enableZenModeCheckmark, tooltip: "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();
+                        }, sx: { p: 0.0 } }) }) })] }));
+    const getNamingSubsection = () => (_jsx(SettingsSubsection, { title: "Agent names", children: _jsxs(SettingsRow, { label: "Display as:", checkmark: nativeNamesCheckmark, tooltip: "Choose how agent names are displayed in the network. " +
+                '"Native" shows the original agent name as provided by the system, while "Beautified" applies ' +
+                "formatting to make names more human-readable. This setting does not affect the actual names of " +
+                "agents, only how they are displayed in the UI.", children: [_jsxs(ToggleButtonGroup, { "aria-label": "agent-name-format-selection", exclusive: true, onChange: (_, value) => {
+                        if (value !== null) {
+                            updateSettings({
+                                appearance: {
+                                    useNativeNames: value === "native",
+                                },
+                            });
+                            nativeNamesCheckmark.trigger();
+                        }
+                    }, size: "small", value: useNativeNames ? "native" : "beautified", children: [_jsx(ToggleButton, { value: "native", children: "Native" }), _jsx(ToggleButton, { value: "beautified", children: "Beautified" })] }), _jsx(FormLabel, { children: "Preview: " }), _jsx(FormLabel, { sx: {
+                        border: "1px solid",
+                        borderRadius: 1,
+                        backgroundColor: "background.paper",
+                        ml: 0.5,
+                        px: 1,
+                        py: 0.25,
+                        lineHeight: 0,
+                        fontSize: "0.7rem",
+                        maxWidth: "100%",
+                    }, children: _jsx("pre", { children: `category/some_agent_name → ${useNativeNames ? "category/some_agent_name [unchanged]" : "Category Some Agent Name"}` }) })] }) }));
+    const getBrandingSubsection = () => (_jsxs(SettingsSubsection, { title: "Branding", children: [_jsxs(SettingsRow, { checkmark: brandingCheckmark, label: "Customer:", tooltip: "Set a customer or organization name to automatically apply a custom color palette and " +
+                    "logo to the network", children: [_jsx(TextField, { "aria-label": "branding-input", onChange: (e) => setCustomerInput(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter" && customerInput?.trim().length > 0) {
+                                void handleBrandingApply();
+                            }
+                        }, 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, loading: isBrandingApplying, children: "Apply" }), _jsx(Button, { disabled: !customer || isBrandingApplying, variant: "contained", size: "small", onClick: handleBrandingClear, loading: isBrandingApplying, children: "Clear" })] }), _jsxs(SettingsRow, { checkmark: logoCheckmark, label: "Logo:", tooltip: "Choose a logo to display in the top-left corner of the network. " +
+                    '"None" will display no logo, "Generic" will display a simple generic logo, and "Auto" will ' +
+                    "attempt to find a suitable logo based on the customer name using an external service (if " +
+                    "configured on the server). Logo is only displayed when customer branding is applied.", children: [_jsx(Tooltip, { title: customer ? undefined : "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: {
+                                                logoSource: value,
+                                            },
+                                        });
+                                        logoCheckmark.trigger();
+                                    }
+                                }, size: "small", sx: { cursor: customer && logoServiceToken ? "pointer" : "not-allowed", marginRight: "1rem" }, value: logoSource || "none", children: [_jsx(Tooltip, { title: customer && "No logo will be displayed", children: _jsx("span", { children: _jsx(ToggleButton, { value: "none", children: "None" }) }) }), _jsx(Tooltip, { title: customer && "Display a simple, anonymous generic logo based on a generic brand", children: _jsx("span", { children: _jsx(ToggleButton, { value: "generic", children: "Generic" }) }) }), _jsx(Tooltip, { title: customer
+                                            ? logoServiceToken
+                                                ? "Use a service to attempt to automatically find a suitable logo based " +
+                                                    "on the customer name."
+                                                : "Logo service not configured on the server. Cannot use Auto logo source"
+                                            : undefined, children: _jsx("span", { children: _jsx(ToggleButton, { disabled: !logoServiceToken, value: "auto", children: "Auto" }) }) })] }) }) }), _jsx(FormLabel, { children: "Preview:" }), _jsx(Box, { children: logoSource === "auto" || logoSource === "generic" ? (_jsx(CustomerLogo, { customer: customer ?? "", fallbackIcon: Business, iconSuggestion: iconSuggestion ?? undefined, logoServiceToken: logoServiceToken, logoSource: logoSource })) : ("(None)") })] })] }));
+    const getNetworkDisplaySubsection = () => (_jsx(SettingsSubsection, { title: "Network display", children: _jsx(SettingsRow, { checkmark: rangePaletteCheckmark, label: "Palette:", tooltip: "Choose the color palette to use for heatmaps and depth display in the network. ", children: _jsx(Tooltip, { title: customer ? "Palette is determined by customer branding and cannot be changed" : "", children: _jsx("span", { children: _jsx(ToggleButtonGroup, { "aria-label": "depth-heatmap-palette-selection", disabled: Boolean(customer), exclusive: true, onChange: handlePaletteChange, size: "small", sx: {
+                            cursor: customer ? "not-allowed" : "pointer",
+                            opacity: customer ? 0.5 : 1,
+                        }, value: paletteKey, children: paletteKeys.map((key) => {
+                            const palette = availablePalettes[key];
+                            if (!palette || !Array.isArray(palette))
+                                return null;
+                            const paletteArray = palette;
+                            return (_jsx(ToggleButton, { "aria-label": `${key}-palette-button`, value: key, children: _jsxs(Box, { sx: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: 0.5,
+                                        alignItems: "center",
+                                    }, children: [_jsx(Typography, { variant: "caption", sx: { textTransform: "capitalize" }, children: key }), _jsx(Box, { sx: { display: "flex", gap: 0.5 }, children: Array.from({ length: 5 }, (_, i) => {
+                                                const paletteLength = paletteArray.length;
+                                                const index = Math.floor((i * paletteLength) / 5);
+                                                return paletteArray[index];
+                                            }).map((color) => (_jsx(Box, { sx: {
+                                                    width: "0.75rem",
+                                                    height: "0.75rem",
+                                                    backgroundColor: color,
+                                                    border: "1px solid",
+                                                } }, color))) })] }) }, key));
+                        }) }) }) }) }) }));
+    const getNetworkAnimationSubsection = () => (_jsxs(SettingsSubsection, { title: "Network animation", children: [_jsx(SettingsRow, { checkmark: plasmaColorCheckmark, label: "Plasma animation color:", tooltip: customer
+                    ? "Plasma color is locked when branding is applied"
+                    : "Select the color for the plasma animation.", children: _jsx("input", { "aria-label": "plasma-color-picker", disabled: Boolean(customer), onChange: (e) => {
+                        updateSettings({
+                            appearance: {
+                                plasmaColor: e.target.value,
+                            },
+                        });
+                        plasmaColorCheckmark.trigger();
+                    }, style: { cursor: customer ? "not-allowed" : "pointer", opacity: customer ? 0.5 : 1 }, type: "color", value: plasmaColor }) }), _jsx(SettingsRow, { checkmark: agentNodeColorCheckmark, label: "Agent node color:", tooltip: customer
+                    ? "Agent node color is locked when branding is applied"
+                    : "Select the color for the agent node animation.", children: _jsx("input", { "aria-label": "agent-node-color-picker", disabled: Boolean(customer), onChange: (e) => {
+                        updateSettings({
+                            appearance: {
+                                agentNodeColor: e.target.value,
+                            },
+                        });
+                        agentNodeColorCheckmark.trigger();
+                    }, style: { cursor: customer ? "not-allowed" : "pointer", opacity: customer ? 0.5 : 1 }, type: "color", value: agentNodeColor }) }), _jsxs(SettingsRow, { checkmark: agentIconColorCheckmark, label: "Agent icon color:", tooltip: customer
+                    ? "Agent icon color is locked when branding is applied"
+                    : "Select the color for the agent icon animation.", children: [_jsx("span", { children: _jsxs(ToggleButtonGroup, { disabled: Boolean(customer), exclusive: true, value: autoAgentIconColor ? "auto" : "custom", onChange: (_, value) => {
+                                if (value !== null) {
+                                    updateSettings({
+                                        appearance: {
+                                            autoAgentIconColor: value === "auto",
+                                        },
+                                    });
+                                    agentIconColorCheckmark.trigger();
+                                }
+                            }, size: "small", style: {
+                                cursor: customer ? "not-allowed" : "pointer",
+                                opacity: customer ? 0.5 : 1,
+                            }, children: [_jsx(ToggleButton, { "data-testid": "auto-agent-icon-color-button", value: "auto", children: "Auto" }), _jsx(ToggleButton, { value: "custom", children: "Custom" })] }) }), _jsx("input", { "aria-label": "agent-icon-color-picker", disabled: Boolean(customer) || autoAgentIconColor, onChange: (e) => {
+                            updateSettings({
+                                appearance: {
+                                    agentIconColor: e.target.value,
+                                },
+                            });
+                            agentIconColorCheckmark.trigger();
+                        }, style: { cursor: customer ? "not-allowed" : "pointer", opacity: customer ? 0.5 : 1 }, type: "color", value: agentIconColor })] })] }));
+    const getAppearanceSection = () => (_jsxs(Section, { children: [_jsx(SettingsSectionTitle, { children: "Appearance" }), getNamingSubsection(), getBrandingSubsection(), getNetworkDisplaySubsection(), getNetworkAnimationSubsection()] }));
+    const getResetSettingsSection = () => (_jsx(SubSection, { sx: { marginTop: 4, paddingTop: 2, borderTop: "4px solid var(--bs-border-color)" }, children: _jsx(SubSectionBody, { children: _jsx(Button, { variant: "text", startIcon: _jsx(RestoreIcon, {}), onClick: () => {
+                    setResetToDefaultSettingsOpen(true);
+                }, sx: { color: "var(--bs-secondary)" }, children: "Reset to defaults" }) }) }));
+    const settingsTheme = useMemo(() => createTheme({
+        palette: {
+            mode: paletteMode,
+        },
+        typography: {
+            fontSize: 12,
+        },
+    }), [paletteMode]);
     return (
-    // Always use default theme for settings dialog so user can always see to reset. It's possible that with
+    // Always use the default theme for settings dialog so user can always see to reset. It's possible that with
     // certain custom themes the dialog would be unreadable.
-    _jsxs(ThemeProvider, { theme: createTheme({
-            palette: {
-                mode: paletteMode,
-            },
-        }), children: [resetToDefaultSettingsOpen ? (_jsx(ConfirmationModal, { id: `${id}-reset-to-default-settings-confirmation-modal`, content: "This will reset all settings to their default values and cannot be undone. " +
-                    "Are you sure you want to proceed?", handleCancel: () => {
-                    setResetToDefaultSettingsOpen(false);
-                }, handleOk: () => {
-                    setResetToDefaultSettingsOpen(false);
-                    resetSettings();
-                    sendNotification(NotificationType.success, "Settings have been reset to default values.");
-                }, title: "Reset to default settings" })) : null, _jsxs(MUIDialog, { id: id, title: _jsx(Box, { sx: { fontSize: "1.5rem" }, children: "Settings" }), isOpen: isOpen, onClose: onClose, paperProps: {
+    _jsxs(ThemeProvider, { theme: settingsTheme, children: [resetToDefaultSettingsOpen ? getConfirmationModal() : null, _jsxs(MUIDialog, { id: id, title: _jsx(Box, { sx: { fontSize: "1.5rem" }, children: "Settings" }), isOpen: isOpen, onClose: onClose, paperProps: {
                     minWidth: "50%",
                     minHeight: "50%",
                     border: "1px solid",
-                }, 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) => {
-                                                if (e.key === "Enter" && customerInput?.trim().length > 0) {
-                                                    void handleBrandingApply();
-                                                }
-                                            }, 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, 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: {
-                                                                    logoSource: value,
-                                                                },
-                                                            });
-                                                            logoCheckmark.trigger();
-                                                        }
-                                                    }, size: "small", sx: { marginRight: "1rem" }, value: logoSource || "none", children: [_jsx(Tooltip, { title: "No logo will be displayed", 
-                                                            // Avoids having overlapping tooltips
-                                                            disableHoverListener: !customer, disableFocusListener: !customer, disableTouchListener: !customer, children: _jsx("span", { style: { cursor: customer ? "pointer" : "not-allowed" }, children: _jsx(ToggleButton, { value: "none", children: "None" }) }) }), _jsx(Tooltip, { title: "Display a simple, anonymous generic logo based on a generic brand", 
-                                                            // Avoids having overlapping tooltips
-                                                            disableHoverListener: !customer, disableFocusListener: !customer, disableTouchListener: !customer, children: _jsx("span", { style: { cursor: customer ? "pointer" : "not-allowed" }, children: _jsx(ToggleButton, { value: "generic", children: "Generic" }) }) }), _jsx(Tooltip, { title: logoServiceToken
-                                                                ? "Use a service to attempt to automatically find a suitable " +
-                                                                    "logo based on the customer name. Results may vary based " +
-                                                                    "on the uniqueness of the name and availability of logos online."
-                                                                : "No Logo.dev token found, cannot use Auto logo source", 
-                                                            // Avoids having overlapping tooltips
-                                                            disableHoverListener: !customer, disableFocusListener: !customer, disableTouchListener: !customer, children: _jsx("span", { style: {
-                                                                    cursor: customer && logoServiceToken ? "pointer" : "not-allowed",
-                                                                }, children: _jsx(ToggleButton, { disabled: !logoServiceToken, value: "auto", children: "Auto" }) }) })] }) }) }), _jsx(FormLabel, { children: "Preview:" }), _jsx(CustomerLogo, { fallbackElement: "(None)", logoServiceToken: logoServiceToken }), _jsx(FadingCheckmark, { show: logoCheckmark.show })] }) }), _jsx(Typography, { variant: "subtitle1", sx: { marginBottom: 1, marginTop: 2, fontWeight: 600 }, children: "Network display" }), _jsx(Divider, { sx: { marginBottom: 2 } }), _jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [_jsx(FormLabel, { children: "Palette (heatmap and depth):" }), _jsx(Tooltip, { title: customer ? "Palette is locked when branding is applied" : "", children: _jsx("span", { children: _jsx(ToggleButtonGroup, { "aria-label": "depth-heatmap-palette-selection", disabled: Boolean(customer), exclusive: true, onChange: handlePaletteChange, size: "small", sx: {
-                                                    cursor: customer ? "not-allowed" : "pointer",
-                                                    marginLeft: "1rem",
-                                                    marginRight: "1rem",
-                                                    opacity: customer ? 0.5 : 1,
-                                                }, value: paletteKey, children: paletteKeys.map((key) => {
-                                                    const palette = availablePalettes[key];
-                                                    if (!palette || !Array.isArray(palette))
-                                                        return null;
-                                                    const paletteArray = palette;
-                                                    return (_jsx(ToggleButton, { "aria-label": `${key}-palette-button`, value: key, children: _jsxs(Box, { sx: {
-                                                                display: "flex",
-                                                                flexDirection: "column",
-                                                                gap: 0.5,
-                                                                alignItems: "center",
-                                                            }, children: [_jsx(Typography, { variant: "caption", sx: { textTransform: "capitalize" }, children: key }), _jsx(Box, { sx: { display: "flex", gap: 0.5 }, children: Array.from({ length: 5 }, (_, i) => {
-                                                                        const paletteLength = paletteArray.length;
-                                                                        const index = Math.floor((i * paletteLength) / 5);
-                                                                        return paletteArray[index];
-                                                                    }).map((color) => (_jsx(Box, { sx: {
-                                                                            width: "0.75rem",
-                                                                            height: "0.75rem",
-                                                                            backgroundColor: color,
-                                                                            border: "1px solid",
-                                                                        } }, color))) })] }) }, key));
-                                                }) }) }) }), _jsx(FadingCheckmark, { show: rangePaletteCheckmark.show })] }), _jsx(Typography, { variant: "subtitle1", sx: { marginBottom: 1, marginTop: 2, fontWeight: 600 }, children: "Network animation" }), _jsx(Divider, { sx: { marginBottom: 2 } }), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [_jsx(FormLabel, { children: "Plasma animation color:" }), _jsx(Tooltip, { title: customer ? "Plasma color is locked when branding is applied" : "", children: _jsx("input", { "aria-label": "plasma-color-picker", disabled: Boolean(customer), onChange: (e) => updateSettings({
-                                                appearance: {
-                                                    plasmaColor: e.target.value,
-                                                },
-                                            }), style: { cursor: customer ? "not-allowed" : "pointer", opacity: customer ? 0.5 : 1 }, type: "color", value: plasmaColor }) }), _jsx(FadingCheckmark, { show: plasmaColorCheckmark.show })] }), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, marginTop: "1rem" }, children: [_jsx(FormLabel, { children: "Agent node color:" }), _jsx(Tooltip, { title: customer ? "Agent node color is locked when branding is applied" : "", children: _jsx("input", { "aria-label": "agent-node-color-picker", disabled: Boolean(customer), onChange: (e) => updateSettings({
-                                                appearance: {
-                                                    agentNodeColor: e.target.value,
-                                                },
-                                            }), style: { cursor: customer ? "not-allowed" : "pointer", opacity: customer ? 0.5 : 1 }, type: "color", value: agentNodeColor }) }), _jsx(FadingCheckmark, { show: agentNodeColorCheckmark.show })] }), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, marginTop: "1rem" }, children: [_jsx(FormLabel, { children: "Agent icon color:" }), _jsx(Tooltip, { title: customer ? "Agent icon color is locked when branding is applied" : "", children: _jsx("span", { children: _jsxs(ToggleButtonGroup, { disabled: Boolean(customer), exclusive: true, value: autoAgentIconColor ? "auto" : "custom", onChange: (_, value) => {
-                                                    if (value !== null) {
-                                                        updateSettings({
-                                                            appearance: {
-                                                                autoAgentIconColor: value === "auto",
-                                                            },
-                                                        });
-                                                        agentIconColorCheckmark.trigger();
-                                                    }
-                                                }, size: "small", style: { cursor: customer ? "not-allowed" : "pointer", opacity: customer ? 0.5 : 1 }, children: [_jsx(ToggleButton, { "data-testid": "auto-agent-icon-color-button", value: "auto", children: "Auto" }), _jsx(ToggleButton, { value: "custom", children: "Custom" })] }) }) }), _jsx(Tooltip, { title: customer
-                                            ? "Agent icon color is locked when branding is applied"
-                                            : autoAgentIconColor
-                                                ? "Disabled when Auto is selected"
-                                                : "", children: _jsx("input", { "aria-label": "agent-icon-color-picker", disabled: Boolean(customer) || autoAgentIconColor, onChange: (e) => {
-                                                updateSettings({
-                                                    appearance: {
-                                                        agentIconColor: e.target.value,
-                                                    },
-                                                });
-                                                agentIconColorCheckmark.trigger();
-                                            }, style: { cursor: customer ? "not-allowed" : "pointer", opacity: customer ? 0.5 : 1 }, type: "color", value: agentIconColor }) }), _jsx(FadingCheckmark, { show: agentIconColorCheckmark.show })] })] }), _jsx(Box, { sx: { marginTop: 4, paddingTop: 2, borderTop: "1px solid var(--bs-border-color)" }, children: _jsx(Button, { variant: "text", startIcon: _jsx(RestoreIcon, {}), onClick: () => {
-                                setResetToDefaultSettingsOpen(true);
-                            }, sx: { color: "var(--bs-secondary)" }, children: "Reset to defaults" }) })] })] }));
+                }, children: [getServicesSection(), getApiKeysSection(), getBehaviorSection(), getAppearanceSection(), getResetSettingsSection()] })] }));
 };