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

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

@@ -0,0 +1,18 @@
+import { SxProps, Theme } from "@mui/material/styles";
+import { FC, ReactNode } from "react";
+import { useCheckmarkFade } from "./FadingCheckmark.js";
+interface SettingsRowProps {
+    readonly checkmark?: ReturnType<typeof useCheckmarkFade>;
+    readonly children: ReactNode;
+    readonly disabled?: boolean;
+    readonly id?: string;
+    readonly label: ReactNode;
+    readonly labelWidth?: string | number;
+    readonly sx?: SxProps<Theme>;
+    readonly tooltip: ReactNode;
+}
+/**
+ * Lightweight component to encapsulate a row in the Settings page.
+ */
+export declare const SettingsRow: FC<SettingsRowProps>;
+export {};

package/dist/components/Settings/SettingsRow.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import FormLabel from "@mui/material/FormLabel";
+import { useTheme } from "@mui/material/styles";
+import { FadingCheckmark } from "./FadingCheckmark.js";
+import InfoTip from "./InfoTip.js";
+/**
+ * Lightweight component to encapsulate a row in the Settings page.
+ */
+export const SettingsRow = ({ checkmark, children, disabled = false, id, label, labelWidth = "8rem", sx, tooltip, }) => {
+    const theme = useTheme();
+    return (_jsxs(Box, { "data-testid": id, sx: [
+            {
+                alignItems: "center",
+                display: "flex",
+                flexDirection: "row",
+                gap: theme.spacing(2),
+                opacity: disabled ? 0.5 : 1,
+                width: "100%",
+            },
+            // Can't spread sx directly because it can be an array or object
+            ...(sx ? (Array.isArray(sx) ? sx : [sx]) : []),
+        ], children: [label ? (_jsx(Box, { sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flexBasis: labelWidth,
+                    flexShrink: 0,
+                }, children: _jsx(FormLabel, { children: label }) })) : null, _jsxs(Box, { sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flex: 1,
+                    gap: theme.spacing(2),
+                    minWidth: 0,
+                }, children: [children, checkmark ? _jsx(FadingCheckmark, { show: checkmark.show }) : null] }), _jsx(Box, { sx: { flexShrink: 0 }, children: _jsx(InfoTip, { title: tooltip }) })] }));
+};

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

@@ -1,36 +1,19 @@
-/**
- * Controller module for interacting with the Agent LLM API.
- */
 import { AgentNetworkDefinitionEntry } from "../../components/MultiAgentAccelerator/const.js";
 import { AgentInfo, ChatContext, ChatResponse, ConnectivityResponse, FunctionResponse } from "../../generated/neuro-san/NeuroSanClient.js";
 import { StreamingUnit } from "../llm/LlmChat.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 httpStatus?: number;
     readonly status?: string;
+    readonly success: boolean;
     readonly version?: string;
 }
 /**
  * Test connection for a neuro-san server.
  * @param url The neuro-san server URL.
- * @returns A boolean indicating whether the connection was successful.
+ * @returns An object with information about the connection test result
  */
 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.

package/dist/controller/agent/Agent.js

@@ -16,6 +16,7 @@ limitations under the License.
 /**
  * Controller module for interacting with the Agent LLM API.
  */
+import { postJsonRequest } from "./IconSuggestions.js";
 import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_NAME_KEY, TEMPORARY_NETWORK_FOLDER, } from "../../components/MultiAgentAccelerator/const.js";
 import { ApiPaths, 
 // eslint-disable-next-line camelcase
@@ -40,7 +41,7 @@ const insertTargetAgent = (agent, path) => {
 /**
  * Test connection for a neuro-san server.
  * @param url The neuro-san server URL.
- * @returns A boolean indicating whether the connection was successful.
+ * @returns An object with information about the connection test result
  */
 export const testConnection = async (url) => {
     const controller = new AbortController();
@@ -48,7 +49,11 @@ export const testConnection = async (url) => {
     try {
         const response = await fetch(url, { signal: controller.signal });
         if (!response.ok) {
-            return { success: false, status: response.statusText };
+            return {
+                success: false,
+                httpStatus: response.status,
+                status: response.statusText,
+            };
         }
         const jsonResponse = await response.json();
         // eslint-disable-next-line no-shadow
@@ -57,7 +62,7 @@ export const testConnection = async (url) => {
         const success = status === "healthy" || status === "ok";
         // For now, just capture the Neuro-san version since that's all the server returns. More can be added later.
         const version = jsonResponse?.versions?.["neuro-san"];
-        return { success, status, version };
+        return { httpStatus: response.status, success, status, version };
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
@@ -67,45 +72,6 @@ export const testConnection = async (url) => {
         clearTimeout(timeout);
     }
 };
-/**
- * Utility function to send POST requests with JSON body and handle errors.
- * Used for getting LLM suggestions for icons and branding colors.
- * @template T The expected response type from the server.
- * @param endpoint The API endpoint to send the request to.
- * @param body The request body to send, which will be stringified to JSON.
- * @returns The response from the server parsed as JSON.
- * @throws An error if the request fails or the response is not ok.
- */
-const postJsonRequest = async (endpoint, body) => {
-    const response = await fetch(endpoint, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(body),
-    });
-    const jsonResponse = await response.json();
-    if (!response.ok || jsonResponse.error) {
-        throw new Error(jsonResponse.error || response.statusText);
-    }
-    return jsonResponse;
-};
-/**
- * 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 const getNetworkIconSuggestions = async (networks) => postJsonRequest("/api/networkIconSuggestions", { networks });
-/**
- * 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 const getAgentIconSuggestions = async (connectivity) => postJsonRequest("/api/agentIconSuggestions", {
-    connectivity_info: connectivity.connectivity_info,
-    metadata: connectivity.metadata,
-});
 /**
  * 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.
@@ -220,7 +186,7 @@ export const getAgentFunction = async (url, agent, userId) => {
  */
 export const sendNetworkDesignerUpdate = async (url, signal, agentName, updated, agentNetworkName, currentUser, onChunk) => {
     await sendChatQuery(url, signal, 
-    // Shouldn't have to pass a user message, but API behaves different without it
+    // Shouldn't have to pass a user message, but API behaves differently without it
     `Update instructions for agent "${agentName}"`, AGENT_NETWORK_DESIGNER_ID, onChunk, null, {
         [AGENT_NETWORK_DEFINITION_KEY]: updated,
         // Use the backend's canonical name, not the local UUID-based key.

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

@@ -0,0 +1,35 @@
+import { AgentInfo, ConnectivityResponse } from "../../generated/neuro-san/NeuroSanClient.js";
+import { AgentIconSuggestions } from "../Types/AgentIconSuggestions.js";
+import { NetworkIconSuggestions } from "../Types/NetworkIconSuggestions.js";
+/**
+ * Utility function to send POST requests with JSON body and handle errors.
+ * Used for getting LLM suggestions for icons and branding colors.
+ * @template T The expected response type from the server.
+ * @param endpoint The API endpoint to send the request to.
+ * @param body The request body to send, which will be stringified to JSON.
+ * @returns The response from the server parsed as JSON.
+ * @throws An error if the request fails or the response is not ok.
+ */
+export declare const postJsonRequest: <T>(endpoint: string, body: Record<string, unknown>) => Promise<T>;
+/**
+ * Get LLM suggestions for network icons.
+ *
+ * @note Will use cached suggestions if available to avoid unnecessary LLM calls
+ *
+ * @param networks The list of networks to get icon suggestions for.
+ * @returns A promise that resolves to a record mapping network names to suggested MUI icon names.
+ */
+export declare const getNetworkIconSuggestions: (networks: readonly AgentInfo[]) => Promise<NetworkIconSuggestions>;
+/**
+ * Get LLM suggestions for agent icons based on their descriptions from Neuro-san.
+ *
+ * @note The entire connectivity information and metadata are sent as input to the LLM to help the LLM come up with
+ * better suggestions.
+ *
+ * @note Will use cached suggestions if available to avoid unnecessary LLM calls
+ *
+ * @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 MUI icon names.
+ */
+export declare const getAgentIconSuggestions: (connectivity: ConnectivityResponse) => Promise<AgentIconSuggestions>;

package/dist/controller/agent/IconSuggestions.js

@@ -0,0 +1,85 @@
+import { useIconSuggestionsStore } from "../../state/IconSuggestions.js";
+/**
+ * Utility function to send POST requests with JSON body and handle errors.
+ * Used for getting LLM suggestions for icons and branding colors.
+ * @template T The expected response type from the server.
+ * @param endpoint The API endpoint to send the request to.
+ * @param body The request body to send, which will be stringified to JSON.
+ * @returns The response from the server parsed as JSON.
+ * @throws An error if the request fails or the response is not ok.
+ */
+export const postJsonRequest = async (endpoint, body) => {
+    const response = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(body),
+    });
+    const jsonResponse = await response.json();
+    if (!response.ok || jsonResponse?.error) {
+        throw new Error(jsonResponse?.error || response?.statusText);
+    }
+    return jsonResponse;
+};
+/**
+ * Utility function to get icon suggestions from the cache or fetch from the server if not available in the cache.
+ *
+ * @param keys - The list of keys (agent names or network names) to get suggestions for.
+ * @param storeKey - The key in the cache (zustand store) to save the suggestions under.
+ * @param fetchSuggestions - Fetch function to query the LLM for suggestions
+ * @returns A promise that resolves to a record mapping the keys to suggested MUI icon names.
+ */
+const getSuggestions = async (keys, storeKey, fetchSuggestions) => {
+    // Check the cache for suggestions for all the keys.
+    // If any key is missing, we will fetch suggestions for all keys to keep it simple.
+    const cache = useIconSuggestionsStore.getState()[storeKey];
+    // Get the cached suggestions for the keys that are available in the cache
+    const cachedSuggestions = keys.reduce((acc, key) => {
+        const cached = cache[key];
+        if (cached) {
+            acc[key] = cached;
+        }
+        return acc;
+    }, {});
+    // If we have cached suggestions for all keys, return them
+    if (Object.keys(cachedSuggestions).length === keys.length) {
+        return cachedSuggestions;
+    }
+    // Cache miss. Request suggestions from LLM
+    const fetched = await fetchSuggestions();
+    // Write-through cache.
+    const state = useIconSuggestionsStore.getState();
+    if (storeKey === "agentIconSuggestions") {
+        state.setAgentIconSuggestions(fetched);
+    }
+    else {
+        state.setNetworkIconSuggestions(fetched);
+    }
+    return fetched;
+};
+/**
+ * Get LLM suggestions for network icons.
+ *
+ * @note Will use cached suggestions if available to avoid unnecessary LLM calls
+ *
+ * @param networks The list of networks to get icon suggestions for.
+ * @returns A promise that resolves to a record mapping network names to suggested MUI icon names.
+ */
+export const getNetworkIconSuggestions = async (networks) => getSuggestions(networks.map((network) => network.agent_name), "networkIconSuggestions", () => postJsonRequest("/api/networkIconSuggestions", { networks }));
+/**
+ * Get LLM suggestions for agent icons based on their descriptions from Neuro-san.
+ *
+ * @note The entire connectivity information and metadata are sent as input to the LLM to help the LLM come up with
+ * better suggestions.
+ *
+ * @note Will use cached suggestions if available to avoid unnecessary LLM calls
+ *
+ * @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 MUI icon names.
+ */
+export const getAgentIconSuggestions = async (connectivity) => getSuggestions(connectivity.connectivity_info.map((agent) => agent.origin), "agentIconSuggestions", () => postJsonRequest("/api/agentIconSuggestions", {
+    connectivity_info: connectivity.connectivity_info,
+    metadata: connectivity.metadata,
+}));

package/dist/index.d.ts

@@ -14,7 +14,6 @@ export * from "./components/Common/Breadcrumbs.js";
 export * from "./components/Common/ConfirmationModal.js";
 export * from "./components/Common/Footer.js";
 export * from "./components/Common/LoadingSpinner.js";
-export * from "./components/Common/MUIAccordion.js";
 export * from "./components/Common/MUIAlert.js";
 export * from "./components/Common/MUIDialog.js";
 export * from "./components/Common/Navbar.js";
@@ -38,5 +37,4 @@ export * from "./utils/Authentication.js";
 export * from "./utils/File.js";
 export * from "./utils/text.js";
 export * from "./utils/title.js";
-export * from "./utils/useLocalStorage.js";
 export * from "./utils/zIndexLayers.js";

package/dist/index.js

@@ -29,7 +29,6 @@ export * from "./components/Common/Breadcrumbs.js";
 export * from "./components/Common/ConfirmationModal.js";
 export * from "./components/Common/Footer.js";
 export * from "./components/Common/LoadingSpinner.js";
-export * from "./components/Common/MUIAccordion.js";
 export * from "./components/Common/MUIAlert.js";
 export * from "./components/Common/MUIDialog.js";
 export * from "./components/Common/Navbar.js";
@@ -53,5 +52,4 @@ export * from "./utils/Authentication.js";
 export * from "./utils/File.js";
 export * from "./utils/text.js";
 export * from "./utils/title.js";
-export * from "./utils/useLocalStorage.js";
 export * from "./utils/zIndexLayers.js";

package/dist/state/IconSuggestions.d.ts

@@ -0,0 +1,27 @@
+import { AgentIconSuggestions } from "../controller/Types/AgentIconSuggestions.js";
+import { NetworkIconSuggestions } from "../controller/Types/NetworkIconSuggestions.js";
+export declare const MAX_SUGGESTIONS = 250;
+/**
+ * Zustand state store for temporary networks, such as vibe coded networks created by the user.
+ */
+interface IconSuggestionsStore {
+    readonly networkIconSuggestions: NetworkIconSuggestions;
+    readonly setNetworkIconSuggestions: (networkIconSuggestions: NetworkIconSuggestions) => void;
+    readonly agentIconSuggestions: AgentIconSuggestions;
+    readonly setAgentIconSuggestions: (agentIconSuggestions: AgentIconSuggestions) => void;
+}
+/**
+ * The hook that lets apps use the store.
+ */
+export declare const useIconSuggestionsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<IconSuggestionsStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<IconSuggestionsStore, IconSuggestionsStore>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: IconSuggestionsStore) => void) => () => void;
+        onFinishHydration: (fn: (state: IconSuggestionsStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<IconSuggestionsStore, IconSuggestionsStore>>;
+    };
+}>;
+export {};

package/dist/state/IconSuggestions.js

@@ -0,0 +1,50 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+// Store this many suggestions of each type before we start discarding the oldest ones.
+export const MAX_SUGGESTIONS = 250;
+/**
+ * Combines new suggestions with existing ones and truncates the result to MAX_SUGGESTIONS (cache eviction)
+ *
+ * @param current - The current suggestion object.
+ * @param newSuggestions - The new suggestions to add.
+ * @returns The updated and trimmed suggestion object.
+ **/
+const updateSuggestions = (current, newSuggestions) => {
+    const combined = { ...current, ...newSuggestions };
+    const entries = Object.entries(combined);
+    if (entries.length > MAX_SUGGESTIONS) {
+        const sliced = entries.slice(entries.length - MAX_SUGGESTIONS);
+        return Object.fromEntries(sliced);
+    }
+    return combined;
+};
+/**
+ * The hook that lets apps use the store.
+ */
+export const useIconSuggestionsStore = create()(persist((set) => ({
+    networkIconSuggestions: {},
+    setNetworkIconSuggestions: (newSuggestions) => set((state) => ({
+        networkIconSuggestions: updateSuggestions(state.networkIconSuggestions, newSuggestions),
+    })),
+    agentIconSuggestions: {},
+    setAgentIconSuggestions: (newSuggestions) => set((state) => ({
+        agentIconSuggestions: updateSuggestions(state.agentIconSuggestions, newSuggestions),
+    })),
+}), {
+    name: "icon-suggestions-store",
+}));

package/dist/state/Settings.d.ts

@@ -1,4 +1,4 @@
-import { PaletteKey } from "../Theme/Palettes.js";
+import { PALETTES } from "../Theme/Palettes.js";
 /**
  * A utility type that makes all properties in T deeply optional, since TypeScript's built-in Partial<T>
  * only makes the top-level properties optional.
@@ -10,6 +10,7 @@ type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 export type LLMProvider = "OpenAI" | "Anthropic";
+export type LogoSource = "none" | "generic" | "auto";
 /**
  * User preference settings
  */
@@ -20,6 +21,7 @@ interface Settings {
         readonly autoAgentIconColor: boolean;
         readonly plasmaColor: string;
         readonly rangePalette: PaletteKey;
+        readonly useNativeNames: boolean;
     };
     readonly branding: {
         readonly customer: string | null;
@@ -28,17 +30,20 @@ interface Settings {
         readonly background: string | null;
         readonly rangePalette: string[] | null;
         readonly iconSuggestion: string | null;
-        readonly logoSource: "none" | "generic" | "auto" | null;
+        readonly logoSource: LogoSource;
     };
     readonly behavior: {
         readonly enableZenMode: boolean;
     };
     readonly apiKeys: Partial<Record<LLMProvider, string>>;
+    readonly externalServices: {
+        neuroSanUrl: string | null;
+    };
 }
 /**
  * Zustand state store for user preferences/Settings
  */
-export interface SettingsStore {
+interface SettingsStore {
     readonly settings: Settings;
     readonly updateSettings: (updates: DeepPartial<Settings>) => void;
     readonly resetSettings: () => void;
@@ -61,4 +66,13 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<impo
         getOptions: () => Partial<import("zustand/middleware").PersistOptions<SettingsStore, SettingsStore>>;
     };
 }>;
+export type PaletteKey = keyof typeof PALETTES | "brand";
+/**
+ * Custom hook to get the current color palette based on user settings.
+ * If the user has selected custom branding, it will return the palette for that.
+ * Otherwise, it will return one of the predefined palettes from the PALETTES object based on the user's selection.
+ *
+ * @returns An array of color hex codes representing the current color palette.
+ */
+export declare const usePalette: () => string[];
 export {};

package/dist/state/Settings.js

@@ -16,6 +16,7 @@ limitations under the License.
 import { merge } from "lodash-es";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+import { PALETTES } from "../Theme/Palettes.js";
 /**
  * Default settings, used on first load and on reset
  */
@@ -27,12 +28,13 @@ export const DEFAULT_SETTINGS = {
         autoAgentIconColor: true,
         rangePalette: "blue",
         plasmaColor: "#2db81f",
+        useNativeNames: false,
     },
     branding: {
         background: null,
         customer: null,
         iconSuggestion: null,
-        logoSource: null,
+        logoSource: "none",
         primary: null,
         rangePalette: null,
         secondary: null,
@@ -41,6 +43,9 @@ export const DEFAULT_SETTINGS = {
         enableZenMode: true,
     },
     apiKeys: {},
+    externalServices: {
+        neuroSanUrl: null,
+    },
 };
 /**
  * The hook that lets apps use the store
@@ -61,3 +66,20 @@ export const useSettingsStore = create()(persist((set) => ({
         };
     },
 }));
+/**
+ * Custom hook to get the current color palette based on user settings.
+ * If the user has selected custom branding, it will return the palette for that.
+ * Otherwise, it will return one of the predefined palettes from the PALETTES object based on the user's selection.
+ *
+ * @returns An array of color hex codes representing the current color palette.
+ */
+export const usePalette = () => {
+    const brandPalette = useSettingsStore((state) => state.settings.branding.rangePalette);
+    const paletteKey = useSettingsStore((state) => state.settings.appearance.rangePalette);
+    if (paletteKey === "brand" && brandPalette) {
+        return brandPalette;
+    }
+    else {
+        return PALETTES[paletteKey];
+    }
+};