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

package/dist/state/Settings.d.ts

@@ -11,6 +11,13 @@ type DeepPartial<T> = {
 };
 export type LLMProvider = "OpenAI" | "Anthropic";
 export type LogoSource = "none" | "generic" | "auto";
+export type ByokKeyField = (typeof LLM_PROVIDER_API_KEY_FIELD)[LLMProvider];
+interface ApiKeyEntry {
+    readonly value: string;
+    readonly expiresAt: number;
+}
+type ApiKeys = Partial<Record<LLMProvider, ApiKeyEntry>>;
+export type PaletteKey = keyof typeof PALETTES | "brand";
 /**
  * User preference settings
  */
@@ -35,7 +42,7 @@ interface Settings {
     readonly behavior: {
         readonly enableZenMode: boolean;
     };
-    readonly apiKeys: Partial<Record<LLMProvider, string>>;
+    readonly apiKeys: ApiKeys;
     readonly externalServices: {
         neuroSanUrl: string | null;
     };
@@ -48,25 +55,95 @@ interface SettingsStore {
     readonly updateSettings: (updates: DeepPartial<Settings>) => void;
     readonly resetSettings: () => void;
 }
+export declare const LLM_PROVIDER_API_KEY_FIELD: {
+    readonly OpenAI: "openai_api_key";
+    readonly Anthropic: "anthropic_api_key";
+};
 /**
  * Default settings, used on first load and on reset
  */
 export declare const DEFAULT_SETTINGS: Settings;
+export declare const APP_SETTINGS_STORAGE_KEY = "app-settings";
+export declare const SESSION_API_KEYS_STORAGE_KEY = "app-settings-api-keys";
+export declare const API_KEYS_TTL_MS: number;
+/**
+ * Returns the API key for the given provider if it exists and is not expired, otherwise returns undefined.
+ * This helper should be used to retrieve API keys from the settings store, rather than accessing the store directly,
+ * to ensure that expired keys are not returned.
+ * @param apiKeys Set of API keys stored in the settings store
+ * @param provider The LLM provider for which to retrieve the API key
+ */
+export declare const getApiKey: (apiKeys: ApiKeys, provider: LLMProvider) => string;
 /**
  * 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;
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsStore, {
+            settings: {
+                appearance: {
+                    readonly agentIconColor: string;
+                    readonly agentNodeColor: string;
+                    readonly autoAgentIconColor: boolean;
+                    readonly plasmaColor: string;
+                    readonly rangePalette: PaletteKey;
+                    readonly useNativeNames: boolean;
+                };
+                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: LogoSource;
+                };
+                behavior: {
+                    readonly enableZenMode: boolean;
+                };
+                externalServices: {
+                    neuroSanUrl: string | null;
+                };
+            };
+            updateSettings: (updates: DeepPartial<Settings>) => void;
+            resetSettings: () => void;
+        }>>) => 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>>;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<SettingsStore, {
+            settings: {
+                appearance: {
+                    readonly agentIconColor: string;
+                    readonly agentNodeColor: string;
+                    readonly autoAgentIconColor: boolean;
+                    readonly plasmaColor: string;
+                    readonly rangePalette: PaletteKey;
+                    readonly useNativeNames: boolean;
+                };
+                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: LogoSource;
+                };
+                behavior: {
+                    readonly enableZenMode: boolean;
+                };
+                externalServices: {
+                    neuroSanUrl: string | null;
+                };
+            };
+            updateSettings: (updates: DeepPartial<Settings>) => void;
+            resetSettings: () => void;
+        }>>;
     };
 }>;
-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.

package/dist/state/Settings.js

@@ -17,6 +17,13 @@ import { merge } from "lodash-es";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { PALETTES } from "../Theme/Palettes.js";
+//#endregion Interfaces and Types
+//#region Constants
+// Mapping of LLM providers to their corresponding API key field names in the settings store.
+export const LLM_PROVIDER_API_KEY_FIELD = {
+    OpenAI: "openai_api_key",
+    Anthropic: "anthropic_api_key",
+};
 /**
  * Default settings, used on first load and on reset
  */
@@ -47,22 +54,95 @@ export const DEFAULT_SETTINGS = {
         neuroSanUrl: null,
     },
 };
+// Name for key where main app settings are saved
+export const APP_SETTINGS_STORAGE_KEY = "app-settings";
+// Name for key where API keys are saved in sessionStorage.
+export const SESSION_API_KEYS_STORAGE_KEY = "app-settings-api-keys";
+// TTL for API keys in sessionStorage. After this time, the keys will be cleared from sessionStorage.
+// This is a backstop for cases where users rarely close their browser or tabs
+export const API_KEYS_TTL_MS = 2 * 24 * 60 * 60 * 1000; // 2 days
+//#endregion Constants
+const hasPersistedSettings = (state) => typeof state === "object" &&
+    state !== null &&
+    "settings" in state &&
+    typeof state.settings === "object" &&
+    state.settings !== null;
+/**
+ * Purges any persisted API keys from localStorage. This cleans up from previous versions of the cdoe.
+ * Once we are "reasonably sure" that no users are on old versions, we can remove this function.
+ */
+const purgePersistedApiKeys = () => {
+    const persisted = JSON.parse(localStorage.getItem(APP_SETTINGS_STORAGE_KEY) ?? "{}");
+    if (persisted.state?.settings) {
+        delete persisted.state.settings.apiKeys;
+        localStorage.setItem(APP_SETTINGS_STORAGE_KEY, JSON.stringify(persisted));
+    }
+};
+/**
+ * Function to determine if an API key entry is valid (i.e., exists and is not expired).
+ * @param entry The API key entry to validate
+ * @returns True if the entry exists and is not expired, false otherwise
+ */
+const isApiKeyValid = (entry) => Boolean(entry) && entry.expiresAt > Date.now();
+/**
+ * Returns the API key for the given provider if it exists and is not expired, otherwise returns undefined.
+ * This helper should be used to retrieve API keys from the settings store, rather than accessing the store directly,
+ * to ensure that expired keys are not returned.
+ * @param apiKeys Set of API keys stored in the settings store
+ * @param provider The LLM provider for which to retrieve the API key
+ */
+export const getApiKey = (apiKeys, provider) => {
+    const entry = apiKeys[provider];
+    return isApiKeyValid(entry) ? entry.value : undefined;
+};
 /**
  * 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 }),
+    updateSettings: (updates) => set((state) => {
+        const nextSettings = merge({}, state.settings, updates);
+        // Side effect: persist API keys in sessionStorage, unlike other Settings items which are persisted
+        // to localStorage (zustand default)
+        // Timestamp the API keys so we can purge them after a TTL.
+        if (updates.apiKeys) {
+            sessionStorage.setItem(SESSION_API_KEYS_STORAGE_KEY, JSON.stringify(nextSettings.apiKeys));
+        }
+        return {
+            settings: nextSettings,
+        };
+    }),
+    resetSettings: () => {
+        sessionStorage.removeItem(SESSION_API_KEYS_STORAGE_KEY);
+        set({ settings: DEFAULT_SETTINGS });
+    },
 }), {
-    name: "app-settings",
+    name: APP_SETTINGS_STORAGE_KEY,
+    // We don't want to persist API keys in localStorage, so we remove them before saving the state.
+    partialize: (state) => {
+        const { apiKeys: _apiKeys, ...settingsWithoutApiKeys } = state.settings;
+        return {
+            ...state,
+            settings: settingsWithoutApiKeys,
+        };
+    },
     merge: (persistedState, currentState) => {
-        // Merge persisted settings with defaults to fill in any missing fields
+        // This is the hook that runs when the store is rehydrated from localStorage.
+        // We use it to purge any persisted API keys from previous versions of the code.
+        purgePersistedApiKeys();
+        // Now we can read the API keys from sessionStorage and filter out any expired keys.
+        const storedApiKeys = JSON.parse(sessionStorage.getItem(SESSION_API_KEYS_STORAGE_KEY) ?? "{}");
+        const sessionApiKeys = Object.fromEntries(Object.entries(storedApiKeys).filter(([, entry]) => isApiKeyValid(entry)));
+        sessionStorage.setItem(SESSION_API_KEYS_STORAGE_KEY, JSON.stringify(sessionApiKeys));
+        const persistedSettings = hasPersistedSettings(persistedState) ? persistedState.settings : {};
+        // Merge persisted settings with defaults to fill in any missing fields,
+        // then explicitly replace apiKeys with sessionStorage-backed keys.
         return {
             ...currentState,
-            settings: merge({}, DEFAULT_SETTINGS, persistedState.settings),
+            settings: {
+                ...merge({}, DEFAULT_SETTINGS, persistedSettings),
+                apiKeys: sessionApiKeys,
+            },
         };
     },
 }));