@cognizant-ai-lab/ui-common 1.3.3 → 1.4.0

package/dist/components/Settings/FadingCheckmark.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CheckIcon from "@mui/icons-material/Check";
+import Box from "@mui/material/Box";
+import { useEffect, useRef, useState } from "react";
+// Duration for which the checkmark is shown after changing a setting
+const CHECKMARK_FADE_DURATION_MS = 1500;
+/**
+ * Hook to manage the fading checkmark state.
+ */
+export const useCheckmarkFade = () => {
+    const [show, setShow] = useState(false);
+    const timeoutRef = useRef(null);
+    const trigger = () => {
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        // Show the checkmark and set a timeout to hide it
+        setShow(true);
+        timeoutRef.current = setTimeout(() => {
+            setShow(false);
+            timeoutRef.current = null;
+        }, CHECKMARK_FADE_DURATION_MS);
+    };
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return { show, trigger };
+};
+/**
+ * A checkmark that fades in and out based on the `show` prop.
+ * @param show Whether to show the checkmark.
+ */
+export const FadingCheckmark = ({ show }) => (_jsx(Box, { sx: {
+        opacity: show ? 1 : 0,
+        transition: "opacity 0.5s ease-out",
+        color: "var(--bs-success)",
+    }, children: _jsx(CheckIcon, {}) }));

package/dist/components/Settings/SettingsDialog.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+interface SettingsDialogProps {
+    readonly id: string;
+    readonly isOpen?: boolean;
+    readonly logoServiceToken?: string;
+    readonly onClose?: () => void;
+}
+export declare const SettingsDialog: FC<SettingsDialogProps>;
+export {};

package/dist/components/Settings/SettingsDialog.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 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 { 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";
+export const SettingsDialog = ({ id, isOpen, logoServiceToken, onClose }) => {
+    // Settings store actions
+    const updateSettings = useSettingsStore((state) => state.updateSettings);
+    const resetSettings = useSettingsStore((state) => state.resetSettings);
+    // Reset settings confirmation dialog state
+    const [resetToDefaultSettingsOpen, setResetToDefaultSettingsOpen] = useState(false);
+    // Plasma color
+    const plasmaColor = useSettingsStore((state) => state.settings.appearance.plasmaColor);
+    const plasmaColorCheckmark = useCheckmarkFade();
+    // Agent node color
+    const agentNodeColor = useSettingsStore((state) => state.settings.appearance.agentNodeColor);
+    const agentNodeColorCheckmark = useCheckmarkFade();
+    // Agent icon color
+    const agentIconColor = useSettingsStore((state) => state.settings.appearance.agentIconColor);
+    const agentIconColorCheckmark = useCheckmarkFade();
+    const autoAgentIconColor = useSettingsStore((state) => state.settings.appearance.autoAgentIconColor);
+    // Which palette to use for heatmaps and depth display?
+    const paletteKey = useSettingsStore((state) => state.settings.appearance.rangePalette);
+    const rangePaletteCheckmark = useCheckmarkFade();
+    const brandingRangePalette = useSettingsStore((state) => state.settings.branding.rangePalette);
+    // Customer branding
+    const customer = useSettingsStore((state) => state.settings.branding.customer);
+    const brandingCheckmark = useCheckmarkFade();
+    const logoCheckmark = useCheckmarkFade();
+    const [customerInput, setCustomerInput] = useState(customer);
+    const [isBrandingApplying, setIsBrandingApplying] = useState(false);
+    const logoSource = useSettingsStore((state) => state.settings.branding.logoSource);
+    // Zen mode
+    const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
+    const enableZenModeCheckmark = useCheckmarkFade();
+    // 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;
+    const handlePaletteChange = (_event, newPalette) => {
+        if (newPalette) {
+            updateSettings({
+                appearance: {
+                    rangePalette: newPalette,
+                },
+            });
+        }
+        rangePaletteCheckmark.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);
+        }
+        catch (e) {
+            console.warn(`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;
+        }
+        updateSettings({
+            appearance: {
+                rangePalette: "brand",
+            },
+        });
+        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"],
+                },
+            });
+        }
+        brandingCheckmark.trigger();
+        setIsBrandingApplying(false);
+    };
+    // Effect to keep input in sync with state store
+    useEffect(() => {
+        setCustomerInput(customer ?? "");
+    }, [customer]);
+    const availablePalettes = customer && brandingRangePalette?.length > 0 ? { brand: brandingRangePalette } : PALETTES;
+    const paletteKeys = Object.keys(availablePalettes);
+    /* 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
+     */
+    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: {
+                    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" }) })] })] }));
+};

package/dist/const.d.ts

@@ -1,7 +1,6 @@
 export declare const LOGO: string;
 export declare const NEURO_SAN_UI_VERSION: string;
-export declare const CONTACT_US_CONFIRMATION_DIALOG_TITLE = "Contact Us";
-export declare const CONTACT_US_CONFIRMATION_DIALOG_TEXT: string;
+export declare const getContactUsConfirmationText: (email: string) => string;
 /**
  * The default user image to use when the user does not have a profile picture.
  */

package/dist/const.js

@@ -16,11 +16,10 @@ limitations under the License.
 // Name to use for application
 export const LOGO = "Neuro® AI";
 export const NEURO_SAN_UI_VERSION = process.env["NEXT_PUBLIC_NEURO_SAN_UI_VERSION"] ?? "Unknown Version";
-export const CONTACT_US_CONFIRMATION_DIALOG_TITLE = "Contact Us";
-export const CONTACT_US_CONFIRMATION_DIALOG_TEXT = "Would you like to send the Cognizant Neuro AI support team an email? " +
+export const getContactUsConfirmationText = (email) => "Would you like to send the Cognizant Neuro AI support team an email? " +
     "You will need to have an email client installed on your device in order " +
     "to continue. If you don't have an email client, you can still contact us at " +
-    "NeuroAiSupport@cognizant.com using a web based email client.";
+    `${email} using a web based email client.`;
 /**
  * The default user image to use when the user does not have a profile picture.
  */

package/dist/controller/Types/AgentIconSuggestions.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Items returned by the agent icon suggestions API
+ */
+export type AgentIconSuggestions = Record<string, string>;

package/dist/controller/Types/AgentIconSuggestions.js

@@ -0,0 +1 @@
+export {};

package/dist/controller/Types/Branding.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Items returned by the branding API.
+ */
+export type BrandingSuggestions = {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly background: string;
+    readonly plasma: string;
+    readonly nodeColor: string;
+    readonly rangePalette: string[];
+    readonly iconSuggestion: string;
+};

package/dist/controller/Types/Branding.js

@@ -0,0 +1 @@
+export {};

package/dist/controller/Types/NetworkIconSuggestions.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Items returned by the network icon suggestions API
+ */
+export type NetworkIconSuggestions = Record<string, string>;

package/dist/controller/Types/NetworkIconSuggestions.js

@@ -0,0 +1 @@
+export {};

package/dist/controller/agent/Agent.d.ts

@@ -1,7 +1,7 @@
-/**
- * Controller module for interacting with the Agent LLM API.
- */
-import { ChatContext, ChatResponse, ConnectivityResponse, FunctionResponse } from "../../generated/neuro-san/NeuroSanClient.js";
+import { AgentInfo, ChatContext, ChatResponse, ConnectivityResponse, FunctionResponse } from "../../generated/neuro-san/NeuroSanClient.js";
+import { AgentIconSuggestions } from "../Types/AgentIconSuggestions.js";
+import { BrandingSuggestions } from "../Types/Branding.js";
+import { NetworkIconSuggestions } from "../Types/NetworkIconSuggestions.js";
 export interface TestConnectionResult {
     readonly success: boolean;
     readonly status?: string;
@@ -12,15 +12,35 @@ export interface TestConnectionResult {
  * @param url The neuro-san server URL.
  * @returns A boolean indicating whether the connection was successful.
  */
-export declare function testConnection(url: string): Promise<TestConnectionResult>;
+export declare const testConnection: (url: string) => Promise<TestConnectionResult>;
+/**
+ * Get LLM suggestions for network icons.
+ * @param networks The list of networks to get icon suggestions for.
+ * @returns A promise that resolves to a record mapping network names to icon names.
+ */
+export declare const getNetworkIconSuggestions: (networks: readonly AgentInfo[]) => Promise<NetworkIconSuggestions>;
+/**
+ * Get LLM suggestions for agent icons based on their descriptions from Neuro-san
+ * @param connectivity The connectivity information for the agents in the network, including their descriptions,
+ * tools, and connections.
+ * @return A promise that resolves to a record mapping agent names to suggested icon names.
+ */
+export declare const getAgentIconSuggestions: (connectivity: ConnectivityResponse) => Promise<AgentIconSuggestions>;
+/**
+ * Get LLM suggestions for branding colors based on the company name. This is used to customize the UI colors
+ * to match the user's company branding.
+ * @param company The name of the company to get branding color suggestions for.
+ * @returns A promise that resolves to a record mapping color types (e.g. "primary", "secondary") to hex color codes.
+ */
+export declare const getBrandingSuggestions: (company: string) => Promise<BrandingSuggestions>;
 /**
  * Get the list of available agent networks from the concierge service.
  * @param url The neuro-san server URL
- * @returns A promise that resolves to an array of agent network names.
+ * @returns A promise that resolves to an array of AgentInfo objects.
  */
-export declare function getAgentNetworks(url: string): Promise<string[]>;
+export declare const getAgentNetworks: (url: string) => Promise<readonly AgentInfo[]>;
 /**
- * Send a chat query to the Agent LLM API. This opens a session with the agent network..
+ * Send a chat query to the Agent LLM API. This opens a session with the agent network.
  * @param url The neuro-san server URL
  * @param signal The AbortSignal to use for the request. Used to cancel the request on user demand
  * @param userInput The user input to send to the agent.
@@ -30,11 +50,11 @@ export declare function getAgentNetworks(url: string): Promise<string[]>;
  * @param callback The callback function to be called when a chunk of data is received from the server.
  * @param chatContext "Opaque" conversation context for maintaining conversation state with the server. Neuro-san
  * agents do not use ChatHistory directly, but rather, ChatContext, which is a collection of ChatHistory objects.
- * @param slyData Data items that should not be send to the LLM. Generated by the server.
+ * @param slyData Data items that should not be sent to the LLM. Generated by the server.
  * @param userId Current user ID in the session.
  * @returns The response from the agent network.
  */
-export declare function sendChatQuery(url: string, signal: AbortSignal, userInput: string, targetAgent: string, callback: (chunk: string) => void, chatContext: ChatContext, slyData: Record<string, unknown>, userId: string): Promise<ChatResponse>;
+export declare const sendChatQuery: (url: string, signal: AbortSignal, userInput: string, targetAgent: string, callback: (chunk: string) => void, chatContext: ChatContext, slyData: Record<string, unknown>, userId: string) => Promise<ChatResponse>;
 /**
  * Gets information on the agent and tool connections within a network
  * @param url The neuro-san server URL
@@ -44,7 +64,7 @@ export declare function sendChatQuery(url: string, signal: AbortSignal, userInpu
  * @throws Various exceptions if anything goes wrong such as network issues or invalid agent type.
  * Caller is responsible for try-catch.
  */
-export declare function getConnectivity(url: string, network: string, userId: string): Promise<ConnectivityResponse>;
+export declare const getConnectivity: (url: string, network: string, userId: string) => Promise<ConnectivityResponse>;
 /**
  * Get the function of a specified agent meaning its brief description
  * @param url The neuro-san server URL
@@ -53,4 +73,4 @@ export declare function getConnectivity(url: string, network: string, userId: st
  * @returns The function info as a <code>FunctionResponse</code> object
  * @throws Various exceptions if anything goes wrong such as network issues or invalid agent type.
  */
-export declare function getAgentFunction(url: string, agent: string, userId: string): Promise<FunctionResponse>;
+export declare const getAgentFunction: (url: string, agent: string, userId: string) => Promise<FunctionResponse>;