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

package/dist/components/Settings/SettingsDialog.js

@@ -1,26 +1,90 @@
 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 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";
+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 { FadingCheckmark, useCheckmarkFade } from "./FadingCheckmark.js";
-import { getBrandingSuggestions } from "../../controller/agent/Agent.js";
-import { useSettingsStore } from "../../state/Settings.js";
+import { useEffect, useMemo, useState, } from "react";
+import { ApiKeyInput } from "./ApiKeyInput.js";
+import { useCheckmarkFade } from "./FadingCheckmark.js";
+import InfoTip from "./InfoTip.js";
+import { SettingsRow } from "./SettingsRow.js";
+import { getBrandingSuggestions, testConnection } from "../../controller/agent/Agent.js";
+import { isAnthropicKeyValid, isOpenAIKeyValid } from "../../controller/llm/Providers.js";
+import { useEnvironmentStore } from "../../state/Environment.js";
+import { DEFAULT_SETTINGS, 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(4),
+}));
+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);
@@ -45,12 +109,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;
@@ -64,87 +158,127 @@ 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, checkmark) => {
+        updateSettings({
+            apiKeys: {
+                [vendor]: key,
+            },
+        });
+        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(() => {
@@ -152,114 +286,181 @@ export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
     }, [customer]);
     const availablePalettes = customer && brandingRangePalette?.length > 0 ? { brand: brandingRangePalette } : PALETTES;
     const paletteKeys = Object.keys(availablePalettes);
-    /* 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
-     */
+    // Config for API key inputs, so we can easily add new providers in the future by just adding to this array
+    const apiKeyConfigs = [
+        {
+            checkmark: openAIKeyCheckmark,
+            idSuffix: "openai",
+            logo: theme.palette.mode === "dark" ? "/OpenAI-white.png" : "/OpenAI-black.png",
+            onTest: isOpenAIKeyValid,
+            placeholder: "sk-...",
+            vendor: "OpenAI",
+        },
+        {
+            checkmark: anthropicKeyCheckmark,
+            idSuffix: "anthropic",
+            logo: "/claude.png",
+            onTest: isAnthropicKeyValid,
+            placeholder: "sk-ant-...",
+            vendor: "Anthropic",
+        },
+    ];
+    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(2) }, children: [_jsx(SettingsSectionTitle, { children: "API Keys" }), _jsx(InfoTip, { title: "API keys are used to access external services. Some networks may require an API key for " +
+                            "you to use them. Your keys will be saved in your browser local storage and sent to " +
+                            "services that require them. Do not use this option if you are on a shared or public computer." })] }), _jsx(SubsectionTitle, { variant: "subtitle1", children: "Providers" }), _jsx(SubSectionBody, { 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), id: `${id}-${idSuffix}`, logo: logo, onSave: (key) => persistKey(vendor, key, checkmark), onTest: onTest, persistedValue: 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: {
+                        marginBottom: 0,
+                        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
     // 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: "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, 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) => {
-                                                        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()] })] }));
 };