@cognizant-ai-lab/ui-common 1.4.2 → 1.5.0

package/dist/index.d.ts

@@ -2,13 +2,13 @@
  * 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";
-export * from "./components/AgentChat/SendButton.js";
-export * from "./components/AgentChat/SyntaxHighlighterThemes.js";
-export * from "./components/AgentChat/Types.js";
-export * from "./components/AgentChat/Utils.js";
+export * from "./components/AgentChat/ChatCommon/ChatCommon.js";
+export * from "./components/AgentChat/ChatCommon/ControlButtons.js";
+export * from "./components/AgentChat/ChatCommon/SendButton.js";
+export * from "./components/AgentChat/ChatCommon/SyntaxHighlighterThemes.js";
+export * from "./components/AgentChat/Common/Types.js";
+export * from "./components/AgentChat/Common/Utils.js";
+export * from "./components/AgentChat/Common/LlmChatButton.js";
 export * from "./components/Authentication/Auth.js";
 export * from "./components/Common/Breadcrumbs.js";
 export * from "./components/Common/ConfirmationModal.js";
@@ -36,6 +36,7 @@ export * from "./state/Environment.js";
 export * from "./state/Settings.js";
 export * from "./state/UserInfo.js";
 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";

package/dist/index.js

@@ -17,13 +17,13 @@ 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";
-export * from "./components/AgentChat/SendButton.js";
-export * from "./components/AgentChat/SyntaxHighlighterThemes.js";
-export * from "./components/AgentChat/Types.js";
-export * from "./components/AgentChat/Utils.js";
+export * from "./components/AgentChat/ChatCommon/ChatCommon.js";
+export * from "./components/AgentChat/ChatCommon/ControlButtons.js";
+export * from "./components/AgentChat/ChatCommon/SendButton.js";
+export * from "./components/AgentChat/ChatCommon/SyntaxHighlighterThemes.js";
+export * from "./components/AgentChat/Common/Types.js";
+export * from "./components/AgentChat/Common/Utils.js";
+export * from "./components/AgentChat/Common/LlmChatButton.js";
 export * from "./components/Authentication/Auth.js";
 export * from "./components/Common/Breadcrumbs.js";
 export * from "./components/Common/ConfirmationModal.js";
@@ -51,6 +51,7 @@ export * from "./state/Environment.js";
 export * from "./state/Settings.js";
 export * from "./state/UserInfo.js";
 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";

package/dist/state/ChatHistory.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Zustand state store for agent chat conversation history
+ *
+ */
+import { BaseMessage, mapChatMessagesToStoredMessages } from "@langchain/core/messages";
+import { ChatContext } from "../generated/neuro-san/NeuroSanClient.js";
+type SlyData = Record<string, unknown>;
+export declare const MAX_CHAT_HISTORY_ITEMS = 50;
+interface AgentChatHistory<T = BaseMessage[] | ReturnType<typeof mapChatMessagesToStoredMessages>> {
+    readonly chatHistory: T;
+    readonly chatContext: ChatContext;
+    readonly slyData: SlyData;
+}
+/**
+ * State store interface
+ */
+interface ChatHistoryStore {
+    readonly history: Record<string, AgentChatHistory<BaseMessage[]>>;
+    resetHistory: (agentId: string) => void;
+    updateChatContext: (agentId: string, chatContext: ChatContext) => void;
+    updateChatHistory: (agentId: string, messages: BaseMessage[]) => void;
+    updateSlyData: (agentId: string, slyData: SlyData) => void;
+    /**
+     * Copies the full history entry from `fromId` to `toId`. Used when a temporary network is replaced
+     * by a new reservation so that conversation history is not lost on the transition.
+     */
+    copyHistory: (fromId: string, toId: string) => void;
+}
+/**
+ * The hook that lets apps use the store.
+ * Structure:
+ * <pre>
+ * IndexedDB database: DB_NAME
+ *   └── object store: OBJECT_STORE_NAME
+ *         └── key: STORE_KEY
+ *                 └── value: {state: {history: {[agentId]: {chatHistory, chatContext, slyData}}}}
+ * </pre>
+ */
+export declare const useAgentChatHistoryStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ChatHistoryStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ChatHistoryStore, ChatHistoryStore>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ChatHistoryStore) => void) => () => void;
+        onFinishHydration: (fn: (state: ChatHistoryStore) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ChatHistoryStore, ChatHistoryStore>>;
+    };
+}>;
+export {};

package/dist/state/ChatHistory.js

@@ -0,0 +1,98 @@
+/**
+ * Zustand state store for agent chat conversation history
+ *
+ */
+import { mapChatMessagesToStoredMessages, mapStoredMessagesToChatMessages } from "@langchain/core/messages";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { indexedDBStorage } from "./IndexedDBStorage.js";
+// Maximum number of messages to keep in the chat history for each agent. Once we reach this limit, we will start
+// dropping old messages.
+export const MAX_CHAT_HISTORY_ITEMS = 50;
+/**
+ * Custom storage implementation for persisting the chat history in IndexedDB. We need to do some custom
+ * serialization and deserialization here because the chat history contains complex objects
+ * (langchain BaseMessage and ChatContext) that can't be directly serialized to JSON. We use the langchain API
+ * to help with the serialization and deserialization.
+ */
+const chatHistoryStorage = {
+    getItem: async (itemName) => {
+        const stored = await indexedDBStorage.getItem(itemName);
+        if (!stored)
+            return null;
+        const parsed = stored;
+        const rehydratedHistory = Object.fromEntries(Object.entries(parsed?.state?.history ?? {}).map(([agentId, entry]) => [
+            agentId,
+            {
+                ...entry,
+                chatHistory: entry.chatHistory ? mapStoredMessagesToChatMessages(entry.chatHistory) : [],
+            },
+        ]));
+        return { ...parsed, state: { ...parsed.state, history: rehydratedHistory } };
+    },
+    setItem: async (itemName, value) => {
+        const serializedHistory = Object.fromEntries(Object.entries(value?.state?.history ?? {}).map(([agentId, entry]) => [
+            agentId,
+            {
+                ...entry,
+                chatHistory: entry.chatHistory ? mapChatMessagesToStoredMessages(entry.chatHistory) : [],
+            },
+        ]));
+        const toStore = { state: { history: serializedHistory }, version: value.version };
+        await indexedDBStorage.setItem(itemName, toStore);
+    },
+    removeItem: async (itemName) => {
+        await indexedDBStorage.removeItem(itemName);
+    },
+};
+// Key to use for storing the chat history in IndexedDB
+const STORE_KEY = "agent-chat-history";
+/**
+ * The hook that lets apps use the store.
+ * Structure:
+ * <pre>
+ * IndexedDB database: DB_NAME
+ *   └── object store: OBJECT_STORE_NAME
+ *         └── key: STORE_KEY
+ *                 └── value: {state: {history: {[agentId]: {chatHistory, chatContext, slyData}}}}
+ * </pre>
+ */
+export const useAgentChatHistoryStore = create()(persist((set) => ({
+    history: {},
+    updateChatContext: (agentId, chatContext) => set((state) => {
+        const existing = state.history[agentId];
+        const newHistory = { ...state.history, [agentId]: { ...existing, chatContext } };
+        return { history: newHistory };
+    }),
+    updateChatHistory: (agentId, messages) => set((state) => {
+        const existing = state.history[agentId];
+        const updated = [...(existing?.chatHistory ?? []), ...messages];
+        const truncated = updated.length > MAX_CHAT_HISTORY_ITEMS ? updated.slice(-MAX_CHAT_HISTORY_ITEMS) : updated;
+        return { history: { ...state.history, [agentId]: { ...existing, chatHistory: truncated } } };
+    }),
+    updateSlyData: (agentId, slyData) => set((state) => {
+        const existing = state.history[agentId];
+        const mergedSlyData = { ...existing?.slyData, ...slyData };
+        const newHistory = { ...state.history, [agentId]: { ...existing, slyData: mergedSlyData } };
+        return { history: newHistory };
+    }),
+    resetHistory: (agentId) => set((state) => {
+        const { [agentId]: _, ...rest } = state.history;
+        return { history: rest };
+    }),
+    copyHistory: (fromId, toId) => set((state) => {
+        const existing = state.history[fromId];
+        if (!existing)
+            return state;
+        // Strip agent_reservations from the copied slyData. That field encodes the old network's
+        // reservation ID and would be bounced back to the backend on the next chat request,
+        // causing the backend to echo the old reservation — which then overwrites the new network
+        // in the temp-networks store via onChunkReceived.
+        const { agent_reservations: _, ...slyDataWithoutReservations } = existing.slyData ?? {};
+        const sanitized = { ...existing, slyData: slyDataWithoutReservations };
+        return { history: { ...state.history, [toId]: sanitized } };
+    }),
+}), {
+    name: STORE_KEY,
+    storage: chatHistoryStorage,
+}));

package/dist/state/IndexedDBStorage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * IndexedDB storage adapter for Zustand persist middleware.
+ *
+ */
+export declare const DB_NAME = "zustand-store";
+/**
+ * StateStorage implementation using IndexedDB. Allows us to persist Zustand state in the browser's IndexedDB,
+ * which is more robust and has larger storage limits than localStorage.
+ */
+export declare const indexedDBStorage: {
+    getItem: (itemName: string) => Promise<unknown>;
+    setItem: (itemName: string, value: unknown) => Promise<void>;
+    removeItem: (itemName: string) => Promise<void>;
+};

package/dist/state/IndexedDBStorage.js

@@ -0,0 +1,65 @@
+/**
+ * IndexedDB storage adapter for Zustand persist middleware.
+ *
+ */
+export const DB_NAME = "zustand-store";
+const OBJECT_STORE_NAME = "neuro-san-ui";
+// Not exactly a sophisticated upgrade function, since it merely creates the object store if it doesn't exist.
+// But good enough for our purposes for now.
+const upgradeDB = (request) => () => {
+    const db = request.result;
+    if (!db.objectStoreNames.contains(OBJECT_STORE_NAME)) {
+        return db.createObjectStore(OBJECT_STORE_NAME);
+    }
+    return undefined;
+};
+/**
+ * StateStorage implementation using IndexedDB. Allows us to persist Zustand state in the browser's IndexedDB,
+ * which is more robust and has larger storage limits than localStorage.
+ */
+/* eslint-disable unicorn/prefer-add-event-listener -- only applies to DOM event listeners which is not the case here */
+export const indexedDBStorage = {
+    getItem: (itemName) => new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME);
+        request.onupgradeneeded = upgradeDB(request);
+        request.onsuccess = () => {
+            const db = request.result;
+            const tx = request.result.transaction(OBJECT_STORE_NAME, "readonly");
+            const store = tx.objectStore(OBJECT_STORE_NAME);
+            const get = store.get(itemName);
+            get.onsuccess = () => resolve(get.result ?? null);
+            get.onerror = () => reject(get.error);
+            tx.oncomplete = () => db.close();
+        };
+        request.onerror = () => reject(request.error);
+    }),
+    setItem: (itemName, value) => new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME);
+        request.onupgradeneeded = upgradeDB(request);
+        request.onsuccess = () => {
+            const db = request.result;
+            const tx = db.transaction(OBJECT_STORE_NAME, "readwrite");
+            const store = tx.objectStore(OBJECT_STORE_NAME);
+            const put = store.put(value, itemName);
+            put.onsuccess = () => resolve();
+            put.onerror = () => reject(put.error);
+            tx.oncomplete = () => db.close();
+        };
+        request.onerror = () => reject(request.error);
+    }),
+    removeItem: (itemName) => new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME);
+        request.onupgradeneeded = upgradeDB(request);
+        request.onsuccess = () => {
+            const db = request.result;
+            const tx = request.result.transaction(OBJECT_STORE_NAME, "readwrite");
+            const store = tx.objectStore(OBJECT_STORE_NAME);
+            const del = store.delete(itemName);
+            del.onsuccess = () => resolve();
+            del.onerror = () => reject(del.error);
+            tx.oncomplete = () => db.close();
+        };
+        request.onerror = () => reject(request.error);
+    }),
+};
+/* eslint-enable unicorn/prefer-add-event-listener */

package/dist/state/TemporaryNetworks.d.ts

@@ -1,3 +1,4 @@
+import { AgentNetworkDefinitionEntry } from "../components/MultiAgentAccelerator/const.js";
 import { AgentInfo } from "../generated/neuro-san/NeuroSanClient.js";
 type AgentReservation = {
     readonly reservation_id: string;
@@ -7,7 +8,10 @@ type AgentReservation = {
 export type TemporaryNetwork = {
     readonly reservation: AgentReservation;
     readonly agentInfo: AgentInfo;
+    /** The agent_network_name as sent by the backend — used when bouncing sly_data back to the backend. */
+    readonly agentNetworkName?: string;
     readonly networkHocon?: string | null;
+    readonly agentNetworkDefinition?: AgentNetworkDefinitionEntry[];
 };
 /**
  * Zustand state store for temporary networks, such as vibe coded networks created by the user.
@@ -15,7 +19,26 @@ export type TemporaryNetwork = {
 interface TempNetworksStore {
     readonly tempNetworks: TemporaryNetwork[];
     readonly setTempNetworks: (tempNetworks: TemporaryNetwork[]) => void;
+    /**
+     * Upsert new networks into the store. Networks are matched by the UUID-stripped portion of
+     * their `reservation_id` (e.g. `"travel_agency_ops"` from `"travel_agency_ops-{uuid}"`), falling
+     * back to `agentNetworkName` when the reservation_id has no UUID suffix. If an incoming network
+     * matches an existing one, the existing entry is replaced. Returns the final list of upserted
+     * networks (those that were added or replaced).
+     */
+    readonly upsertTempNetworks: (newNetworks: TemporaryNetwork[]) => TemporaryNetwork[];
+    readonly updateTempNetworkDefinition: (networkName: string, definition: AgentNetworkDefinitionEntry[]) => void;
 }
+/**
+ * Derives the canonical network name from a reservation ID.
+ *
+ * The backend encodes the network name as a prefix in the reservation ID, followed by a UUID suffix:
+ * `{network_name}-{uuid}`, e.g. `travel_agency_ops-7876642e-fe75-4d44-a61e-300688a1a6c5`.
+ *
+ * Stripping the UUID suffix gives the stable name that can be used for deduplication across reservations.
+ * Returns `undefined` when the reservation ID doesn't match the expected format.
+ */
+export declare const extractNetworkNameFromReservationId: (reservationId: string) => string | undefined;
 /**
  * The hook that lets apps use the store.
  */

package/dist/state/TemporaryNetworks.js

@@ -15,12 +15,55 @@ limitations under the License.
 */
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
+// UUID v4 suffix pattern: 8-4-4-4-12 hex chars separated by dashes
+const UUID_SUFFIX_RE = /-[\da-f]{8}(?:-[\da-f]{4}){3}-[\da-f]{12}$/iu;
+/**
+ * Derives the canonical network name from a reservation ID.
+ *
+ * The backend encodes the network name as a prefix in the reservation ID, followed by a UUID suffix:
+ * `{network_name}-{uuid}`, e.g. `travel_agency_ops-7876642e-fe75-4d44-a61e-300688a1a6c5`.
+ *
+ * Stripping the UUID suffix gives the stable name that can be used for deduplication across reservations.
+ * Returns `undefined` when the reservation ID doesn't match the expected format.
+ */
+export const extractNetworkNameFromReservationId = (reservationId) => {
+    const stripped = reservationId.replace(UUID_SUFFIX_RE, "");
+    return stripped !== reservationId ? stripped : undefined;
+};
+/**
+ * Returns the best available canonical name for a network, used as the dedup key in upsert.
+ * The UUID-stripped reservation_id is preferred because it is always consistent regardless of
+ * what prefix the backend may place in `agentNetworkName` (e.g. `"generated/travel_agency_ops"`
+ * vs `"travel_agency_ops"`). Falls back to `agentNetworkName` when the reservation_id has no
+ * UUID suffix (legacy reservations with static IDs).
+ */
+const effectiveNetworkName = (n) => extractNetworkNameFromReservationId(n.reservation.reservation_id) ?? n.agentNetworkName;
 /**
  * The hook that lets apps use the store.
  */
 export const useTempNetworksStore = create()(persist((set) => ({
     tempNetworks: [],
     setTempNetworks: (tempNetworks) => set({ tempNetworks }),
+    upsertTempNetworks: (newNetworks) => {
+        set((state) => {
+            const updated = [...state.tempNetworks];
+            for (const newNetwork of newNetworks) {
+                const newName = effectiveNetworkName(newNetwork);
+                const existingIdx = newName ? updated.findIndex((n) => effectiveNetworkName(n) === newName) : -1;
+                if (existingIdx >= 0) {
+                    updated[existingIdx] = newNetwork;
+                }
+                else {
+                    updated.push(newNetwork);
+                }
+            }
+            return { tempNetworks: updated };
+        });
+        return newNetworks;
+    },
+    updateTempNetworkDefinition: (networkName, definition) => set((state) => ({
+        tempNetworks: state.tempNetworks.map((n) => n.agentInfo.agent_name === networkName ? { ...n, agentNetworkDefinition: definition } : n),
+    })),
 }), {
     name: "temp-networks",
 }));