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

package/dist/controller/agent/Agent.js

@@ -16,27 +16,33 @@ limitations under the License.
 /**
  * Controller module for interacting with the Agent LLM API.
  */
+import { TEMPORARY_NETWORK_FOLDER } from "../../components/MultiAgentAccelerator/const.js";
 import { ApiPaths, 
 // eslint-disable-next-line camelcase
 ChatFilterChat_filter_type, ChatMessageType, } from "../../generated/neuro-san/NeuroSanClient.js";
 import { sendLlmRequest } from "../llm/LlmChat.js";
 /**
  * Insert the target agent name into the path. The paths Api enum contains values like:
- * <code>"/api/v1/{agent_name}/connectivity"</code> so unfortunately we need to do a replace() to insert the target
+ * <code>"/api/v1/{agent_name}/connectivity"</code> so unfortunately we need to do a `replace()` to insert the target
  * agent.
  * @param agent The agent to send the request to.
  * @param path The API path to insert the target agent into.
  * @returns The path with the target agent name inserted.
  */
 const insertTargetAgent = (agent, path) => {
-    return path.replace("{agent_name}", agent);
+    let agentTmp = agent;
+    // Remove "temporary" prefix from network name if it exists since the server doesn't know about that convention
+    if (agentTmp.startsWith(`${TEMPORARY_NETWORK_FOLDER}/`)) {
+        agentTmp = agentTmp.replace(`${TEMPORARY_NETWORK_FOLDER}/`, "");
+    }
+    return path.replace("{agent_name}", agentTmp);
 };
 /**
  * Test connection for a neuro-san server.
  * @param url The neuro-san server URL.
  * @returns A boolean indicating whether the connection was successful.
  */
-export async function testConnection(url) {
+export const testConnection = async (url) => {
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 2500); // 2.5s timeout
     try {
@@ -60,30 +66,76 @@ export async function testConnection(url) {
     finally {
         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.
+ * @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 const getBrandingSuggestions = async (company) => postJsonRequest("/api/branding", { company });
 /**
  * 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 async function getAgentNetworks(url) {
+export const getAgentNetworks = async (url) => {
     const path = `${url}${ApiPaths.ConciergeService_List}`;
     const response = await fetch(path);
     const conciergeResponse = (await response.json());
-    return conciergeResponse.agents.map((network) => network.agent_name);
-}
+    return conciergeResponse.agents;
+};
 // Function to split each chunk by newline and call the real callback. The server can send multiple JSON objects per
 // chunk delimited by newline.
-function handleJsonLines(chunk, callback) {
+const handleJsonLines = (chunk, callback) => {
     chunk.split("\n").forEach((line) => {
         const trimmed = line.trim();
         if (trimmed) {
             callback(trimmed);
         }
     });
-}
+};
 /**
- * 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.
@@ -93,11 +145,11 @@ function handleJsonLines(chunk, callback) {
  * @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 async function sendChatQuery(url, signal, userInput, targetAgent, callback, chatContext, slyData, userId) {
+export const sendChatQuery = async (url, signal, userInput, targetAgent, callback, chatContext, slyData, userId) => {
     // Create request
     const userMessage = {
         type: ChatMessageType.HUMAN,
@@ -113,7 +165,7 @@ export async function sendChatQuery(url, signal, userInput, targetAgent, callbac
     const fetchUrl = `${url}${insertTargetAgent(targetAgent, ApiPaths.AgentService_StreamingChat)}`;
     const requestRecord = Object.entries(agentChatRequest).reduce((acc, [key, value]) => (value ? { ...acc, [key]: value } : acc), {});
     return sendLlmRequest((chunk) => handleJsonLines(chunk, callback), signal, fetchUrl, requestRecord, null, null, userId);
-}
+};
 /**
  * Gets information on the agent and tool connections within a network
  * @param url The neuro-san server URL
@@ -123,7 +175,7 @@ export async function sendChatQuery(url, signal, userInput, targetAgent, callbac
  * @throws Various exceptions if anything goes wrong such as network issues or invalid agent type.
  * Caller is responsible for try-catch.
  */
-export async function getConnectivity(url, network, userId) {
+export const getConnectivity = async (url, network, userId) => {
     const fetchUrl = `${url}${insertTargetAgent(network, ApiPaths.AgentService_Connectivity)}`;
     const response = await fetch(fetchUrl, {
         method: "GET",
@@ -133,11 +185,11 @@ export async function getConnectivity(url, network, userId) {
         },
     });
     if (!response.ok) {
-        console.debug(`response: ${JSON.stringify(response)}`);
+        console.error(`response: ${JSON.stringify(response)}`);
         throw new Error(`Failed to send connectivity request: ${response.statusText}`);
     }
     return response.json();
-}
+};
 /**
  * Get the function of a specified agent meaning its brief description
  * @param url The neuro-san server URL
@@ -146,7 +198,7 @@ export async function getConnectivity(url, network, userId) {
  * @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 async function getAgentFunction(url, agent, userId) {
+export const getAgentFunction = async (url, agent, userId) => {
     const fetchUrl = `${url}${insertTargetAgent(agent, ApiPaths.AgentService_Function)}`;
     const response = await fetch(fetchUrl, {
         method: "GET",
@@ -159,4 +211,4 @@ export async function getAgentFunction(url, agent, userId) {
         throw new Error(`Failed to send agent function request: ${response.statusText}`);
     }
     return response.json();
-}
+};

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

@@ -15,4 +15,4 @@ import { BaseMessage } from "@langchain/core/messages";
  * @returns Either the JSON result of the call, or, if a callback is provided, nothing, but tokens are streamed
  * to the callback as they are received from the server.
  */
-export declare function sendLlmRequest(callback: (token: string) => void, signal: AbortSignal, fetchUrl: string, params: Record<string, unknown>, userQuery?: string, chatHistory?: BaseMessage[], userId?: string): Promise<any>;
+export declare const sendLlmRequest: (callback: (token: string) => void, signal: AbortSignal, fetchUrl: string, params: Record<string, unknown>, userQuery?: string, chatHistory?: BaseMessage[], userId?: string) => Promise<any>;

package/dist/controller/llm/LlmChat.js

@@ -25,7 +25,7 @@ limitations under the License.
  * @returns Either the JSON result of the call, or, if a callback is provided, nothing, but tokens are streamed
  * to the callback as they are received from the server.
  */
-export async function sendLlmRequest(callback, signal, fetchUrl, params, userQuery, chatHistory, userId) {
+export const sendLlmRequest = async (callback, signal, fetchUrl, params, userQuery, chatHistory, userId) => {
     const res = await fetch(fetchUrl, {
         method: "POST",
         headers: {
@@ -62,4 +62,4 @@ export async function sendLlmRequest(callback, signal, fetchUrl, params, userQue
     else {
         return res.json();
     }
-}
+};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * Export modules so they can be imported with simpler paths in the consumer
  */
+export * from "./Theme/Theme.js";
 export * from "./components/AgentChat/ChatCommon.js";
 export * from "./components/AgentChat/ControlButtons.js";
 export * from "./components/AgentChat/LlmChatButton.js";
@@ -10,26 +11,30 @@ export * from "./components/AgentChat/Types.js";
 export * from "./components/AgentChat/Utils.js";
 export * from "./components/Authentication/Auth.js";
 export * from "./components/Common/Breadcrumbs.js";
-export * from "./components/Common/confirmationModal.js";
+export * from "./components/Common/ConfirmationModal.js";
+export * from "./components/Common/Footer.js";
 export * from "./components/Common/LlmChatOptionsButton.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";
-export * from "./components/Common/notification.js";
 export * from "./components/Common/PageLoader.js";
 export * from "./components/Common/Snackbar.js";
+export * from "./components/Common/notification.js";
 export * from "./components/ErrorPage/ErrorBoundary.js";
+export * from "./components/MultiAgentAccelerator/AgentConversations.js";
+export * from "./components/MultiAgentAccelerator/AgentCounts.js";
 export * from "./components/MultiAgentAccelerator/AgentFlow.js";
 export * from "./components/MultiAgentAccelerator/MultiAgentAccelerator.js";
-export * from "./components/MultiAgentAccelerator/Sidebar.js";
+export * from "./components/MultiAgentAccelerator/Sidebar/Sidebar.js";
+export * from "./components/MultiAgentAccelerator/TemporaryNetworks.js";
 export * from "./controller/agent/Agent.js";
 export * from "./controller/llm/LlmChat.js";
 export * from "./generated/neuro-san/NeuroSanClient.js";
-export * from "./state/environment.js";
+export * from "./state/Environment.js";
+export * from "./state/Settings.js";
 export * from "./state/UserInfo.js";
-export * from "./utils/agentConversations.js";
 export * from "./utils/Authentication.js";
 export * from "./utils/text.js";
 export * from "./utils/title.js";

package/dist/index.js

@@ -16,6 +16,7 @@ limitations under the License.
 /**
  * Export modules so they can be imported with simpler paths in the consumer
  */
+export * from "./Theme/Theme.js";
 export * from "./components/AgentChat/ChatCommon.js";
 export * from "./components/AgentChat/ControlButtons.js";
 export * from "./components/AgentChat/LlmChatButton.js";
@@ -25,26 +26,30 @@ export * from "./components/AgentChat/Types.js";
 export * from "./components/AgentChat/Utils.js";
 export * from "./components/Authentication/Auth.js";
 export * from "./components/Common/Breadcrumbs.js";
-export * from "./components/Common/confirmationModal.js";
+export * from "./components/Common/ConfirmationModal.js";
+export * from "./components/Common/Footer.js";
 export * from "./components/Common/LlmChatOptionsButton.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";
-export * from "./components/Common/notification.js";
 export * from "./components/Common/PageLoader.js";
 export * from "./components/Common/Snackbar.js";
+export * from "./components/Common/notification.js";
 export * from "./components/ErrorPage/ErrorBoundary.js";
+export * from "./components/MultiAgentAccelerator/AgentConversations.js";
+export * from "./components/MultiAgentAccelerator/AgentCounts.js";
 export * from "./components/MultiAgentAccelerator/AgentFlow.js";
 export * from "./components/MultiAgentAccelerator/MultiAgentAccelerator.js";
-export * from "./components/MultiAgentAccelerator/Sidebar.js";
+export * from "./components/MultiAgentAccelerator/Sidebar/Sidebar.js";
+export * from "./components/MultiAgentAccelerator/TemporaryNetworks.js";
 export * from "./controller/agent/Agent.js";
 export * from "./controller/llm/LlmChat.js";
 export * from "./generated/neuro-san/NeuroSanClient.js";
-export * from "./state/environment.js";
+export * from "./state/Environment.js";
+export * from "./state/Settings.js";
 export * from "./state/UserInfo.js";
-export * from "./utils/agentConversations.js";
 export * from "./utils/Authentication.js";
 export * from "./utils/text.js";
 export * from "./utils/title.js";

package/dist/state/{environment.d.ts → Environment.d.ts}

@@ -10,6 +10,8 @@ interface EnvironmentStore {
     setAuth0Domain: (auth0Domain: string) => void;
     supportEmailAddress: string;
     setSupportEmailAddress: (supportEmailAddress: string) => void;
+    logoServiceToken: string;
+    setLogoServiceToken: (logoServiceToken: string) => void;
 }
 /**
  * The hook that lets apps use the store

package/dist/state/{environment.js → Environment.js}

@@ -30,4 +30,6 @@ export const useEnvironmentStore = create((set) => ({
     setAuth0Domain: (auth0Domain) => set(() => ({ auth0Domain })),
     supportEmailAddress: null,
     setSupportEmailAddress: (supportEmailAddress) => set(() => ({ supportEmailAddress })),
+    logoServiceToken: null,
+    setLogoServiceToken: (logoServiceToken) => set(() => ({ logoServiceToken })),
 }));

package/dist/state/Settings.d.ts

@@ -0,0 +1,62 @@
+import { PaletteKey } 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.
+ *
+ * We use it in conjunction with `lodash.merge` to allow partial updates to nested settings objects. TypeScript doesn't
+ * know that `lodash.merge` will fill in the missing properties at runtime, so we need this shim to avoid type errors.
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * User preference settings
+ */
+interface Settings {
+    readonly appearance: {
+        readonly agentIconColor: string;
+        readonly agentNodeColor: string;
+        readonly autoAgentIconColor: boolean;
+        readonly plasmaColor: string;
+        readonly rangePalette: PaletteKey;
+    };
+    readonly branding: {
+        readonly customer: string | null;
+        readonly primary: string | null;
+        readonly secondary: string | null;
+        readonly background: string | null;
+        readonly rangePalette: string[] | null;
+        readonly iconSuggestion: string | null;
+        readonly logoSource: "none" | "generic" | "auto" | null;
+    };
+    readonly behavior: {
+        readonly enableZenMode: boolean;
+    };
+}
+/**
+ * Zustand state store for user preferences/Settings
+ */
+export interface SettingsStore {
+    readonly settings: Settings;
+    readonly updateSettings: (updates: DeepPartial<Settings>) => void;
+    readonly resetSettings: () => void;
+}
+/**
+ * Default settings, used on first load and on reset
+ */
+export declare const DEFAULT_SETTINGS: Settings;
+/**
+ * The hook that lets apps use the store
+ */
+export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SettingsStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, SettingsStore>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: SettingsStore) => void) => () => void;
+        onFinishHydration: (fn: (state: SettingsStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<SettingsStore, SettingsStore>>;
+    };
+}>;
+export {};

package/dist/state/Settings.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2026 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 { merge } from "lodash-es";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+/**
+ * Default settings, used on first load and on reset
+ */
+export const DEFAULT_SETTINGS = {
+    appearance: {
+        // CSS variables like --bs-green don't work here. TBD why.
+        agentNodeColor: "#2db81f",
+        agentIconColor: "black",
+        autoAgentIconColor: true,
+        rangePalette: "blue",
+        plasmaColor: "#2db81f",
+    },
+    branding: {
+        background: null,
+        customer: null,
+        iconSuggestion: null,
+        logoSource: null,
+        primary: null,
+        rangePalette: null,
+        secondary: null,
+    },
+    behavior: {
+        enableZenMode: true,
+    },
+};
+/**
+ * The hook that lets apps use the store
+ */
+export const useSettingsStore = create()(persist((set) => ({
+    settings: DEFAULT_SETTINGS,
+    updateSettings: (updates) => set((state) => ({
+        settings: merge({}, state.settings, updates),
+    })),
+    resetSettings: () => set({ settings: DEFAULT_SETTINGS }),
+}), {
+    name: "app-settings",
+    merge: (persistedState, currentState) => {
+        // Merge persisted settings with defaults to fill in any missing fields
+        return {
+            ...currentState,
+            settings: merge({}, DEFAULT_SETTINGS, persistedState.settings),
+        };
+    },
+}));

package/dist/state/TemporaryNetworks.d.ts

@@ -0,0 +1,32 @@
+import { AgentInfo } from "../generated/neuro-san/NeuroSanClient.js";
+type AgentReservation = {
+    readonly reservation_id: string;
+    readonly lifetime_in_seconds: number;
+    readonly expiration_time_in_seconds: number;
+};
+export type TemporaryNetwork = {
+    readonly reservation: AgentReservation;
+    readonly agentInfo: AgentInfo;
+};
+/**
+ * Zustand state store for temporary networks, such as vibe coded networks created by the user.
+ */
+interface TempNetworksStore {
+    readonly tempNetworks: TemporaryNetwork[];
+    readonly setTempNetworks: (tempNetworks: TemporaryNetwork[]) => void;
+}
+/**
+ * The hook that lets apps use the store.
+ */
+export declare const useTempNetworksStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<TempNetworksStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<TempNetworksStore, TempNetworksStore>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: TempNetworksStore) => void) => () => void;
+        onFinishHydration: (fn: (state: TempNetworksStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<TempNetworksStore, TempNetworksStore>>;
+    };
+}>;
+export {};

package/dist/state/TemporaryNetworks.js

@@ -0,0 +1,26 @@
+/*
+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";
+/**
+ * The hook that lets apps use the store.
+ */
+export const useTempNetworksStore = create()(persist((set) => ({
+    tempNetworks: [],
+    setTempNetworks: (tempNetworks) => set({ tempNetworks }),
+}), {
+    name: "temp-networks",
+}));