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

package/dist/state/Settings.js

@@ -16,6 +16,14 @@ limitations under the License.
 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
  */
@@ -27,12 +35,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,23 +50,116 @@ export const DEFAULT_SETTINGS = {
         enableZenMode: true,
     },
     apiKeys: {},
+    externalServices: {
+        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,
+            },
         };
     },
 }));
+/**
+ * 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];
+    }
+};