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

package/dist/utils/BrowserNavigation.js

@@ -17,6 +17,8 @@ limitations under the License.
  * Navigate to the specified URL by setting window.location.href
  * @param url The URL to navigate to
  */
+// See: https://github.com/jsdom/jsdom/issues/2112
+/* istanbul ignore next -- JSDom doesn't support simulated navigation */
 export const navigateToUrl = (url) => {
     window.location.href = url;
 };

package/dist/utils/File.d.ts

@@ -1,3 +1,4 @@
+type MimeType = `${string}/${string}`;
 /**
  * // Sanitize filename for saving
  * @param input Filename as string
@@ -32,5 +33,7 @@ export declare const getFileName: (path: string) => string;
  * Downloads a file containing the supplied content with the specified filename
  * @param messageContents The contents of the file to be downloaded
  * @param fileName Local filename for the file to be downloaded
+ * @param mimeType Optional MIME type for the file to be downloaded, defaults to "application/octet-stream"
  */
-export declare const downloadFile: (messageContents: string | Uint8Array, fileName: string) => void;
+export declare const downloadFile: (messageContents: string | Uint8Array, fileName: string, mimeType?: MimeType) => void;
+export {};

package/dist/utils/File.js

@@ -46,21 +46,16 @@ export const splitFilename = (filename) => {
  * @param path The path to be parsed
  * @return The filename part of the path only
  */
-export const getFileName = (path) => 
-// conflicts with ESLint newline-per-chained-call rule
-// prettier-ignore
-path.split("\\")
-    .pop()
-    .split("/")
-    .pop();
+export const getFileName = (path) => path.split("\\").pop().split("/").pop();
 /**
  * Downloads a file containing the supplied content with the specified filename
  * @param messageContents The contents of the file to be downloaded
  * @param fileName Local filename for the file to be downloaded
+ * @param mimeType Optional MIME type for the file to be downloaded, defaults to "application/octet-stream"
  */
-export const downloadFile = (messageContents, fileName) => {
+export const downloadFile = (messageContents, fileName, mimeType = "application/octet-stream") => {
     const downloadLink = document.createElement("a");
-    const blob = new Blob([messageContents]);
+    const blob = new Blob([messageContents], { type: mimeType });
     // Apply the url and filename to the anchor tag
     downloadLink.href = URL.createObjectURL(blob);
     downloadLink.download = fileName;

package/dist/utils/text.js

@@ -41,9 +41,8 @@ export const extractId = (modelId, modelType) => {
     if (!modelId || !modelType || !modelId.includes(modelType)) {
         return "";
     }
-    // conflicts with ESLint newline-per-chained-call rule
-    // prettier-ignore
-    return modelId.slice(`${modelType}-`.length) // remove the model type
+    return modelId
+        .slice(`${modelType}-`.length) // remove the model type
         .split("-") // split by hyphens
         .slice(0, -1) // remove the last element
         .join("-"); // join with hyphens
@@ -55,8 +54,5 @@ export const extractId = (modelId, modelType) => {
  * @returns Hashed string
  */
 export const hashString = (input) => {
-    // prettier-ignore
-    return createHash("md5")
-        .update(input)
-        .digest("hex");
+    return createHash("md5").update(input).digest("hex");
 };

package/dist/utils/title.js

@@ -15,6 +15,6 @@ limitations under the License.
 */
 // Miscellaneous utilities for dealing with browser tab title
 export const getTitleBase = () => {
-    const subdomain = window.location.host.split(".")[0];
+    const subdomain = window.location.host.split(".", 1)[0];
     return `${subdomain[0].toUpperCase()}${subdomain.slice(1)}`;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cognizant-ai-lab/ui-common",
   "description": "A shared UI component library for Cognizant AI Labs projects",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "type": "module",
   "scripts": {
     "build": "yarn clean && yarn generate && yarn run --top-level tsc --project tsconfig.build.json && fix-esm-import-path dist > /dev/null",
@@ -23,27 +23,30 @@
     "rehype-slug": "6.0.0",
     "remark-gfm": "4.0.1",
     "uuid": "14.0.0",
+    "zod": "4.4.3",
     "zustand": "4.5.7"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.5",
+    "@mui/icons-material": "9.0.1",
+    "@mui/material": "9.0.1",
+    "@mui/system": "9.1.2",
+    "@mui/x-tree-view": "9.1.0",
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "22.17.1",
+    "@types/node": "26.1.1",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@types/react-syntax-highlighter": "15.5.13",
-    "babel-jest": "30.4.0",
     "fake-indexeddb": "6.2.5",
     "fix-esm-import-path": "1.10.3",
     "globals": "17.4.0",
     "openapi-typescript": "7.8.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "vitest": "4.1.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",

package/dist/components/Common/CustomerLogo.d.ts

@@ -1,17 +0,0 @@
-import { FC, ReactElement } from "react";
-interface CustomerLogoProps {
-    readonly fallbackElement?: ReactElement | string;
-    readonly logoServiceToken?: string;
-}
-/**
- * Returns a JSX element for the Cognizant logo, wrapped in a link to the Cognizant website.
- */
-export declare const getCognizantLogoImage: () => import("react/jsx-runtime").JSX.Element;
-/**
- * Component to display the customer's logo based on the settings.
- * @param logoServiceToken - Optional token for fetching the logo from logo.dev
- * @returns JSX element representing the customer's logo, MUI icon, or Cognizant fallback, or null if no logo
- * should be displayed or if the logo.dev token is missing/invalid.
- */
-export declare const CustomerLogo: FC<CustomerLogoProps>;
-export {};

package/dist/components/Common/CustomerLogo.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Have to suppress this lint error to allow dynamic access of MUI icons
-// eslint-disable-next-line no-restricted-imports
-import * as MuiIcons from "@mui/icons-material";
-import { useSettingsStore } from "../../state/Settings.js";
-/**
- * Returns a JSX element for the Cognizant logo, wrapped in a link to the Cognizant website.
- */
-export const getCognizantLogoImage = () => (_jsx("a", { id: "splash-logo-link", href: "https://www.cognizant.com/us/en", style: {
-        display: "flex",
-        paddingLeft: "0.15rem",
-    }, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { id: "logo-img", width: "200", height: "45", src: "/cognizant-logo-white.svg", alt: "Cognizant Logo" }) }));
-/**
- * Component to display the customer's logo based on the settings.
- * @param logoServiceToken - Optional token for fetching the logo from logo.dev
- * @returns JSX element representing the customer's logo, MUI icon, or Cognizant fallback, or null if no logo
- * should be displayed or if the logo.dev token is missing/invalid.
- */
-export const CustomerLogo = ({ fallbackElement, logoServiceToken }) => {
-    const customer = useSettingsStore((state) => state.settings.branding.customer);
-    const iconSuggestion = useSettingsStore((state) => state.settings.branding.iconSuggestion);
-    const logoSource = useSettingsStore((state) => state.settings.branding.logoSource);
-    // null: render Cognizant logo (default)
-    if (logoSource === null) {
-        return customer?.trim().length ? null : getCognizantLogoImage();
-    }
-    // "none": explicitly render no logo
-    if (logoSource === "none") {
-        return fallbackElement;
-    }
-    // "generic": try MUI icon, then Cognizant fallback
-    if (logoSource === "generic") {
-        const MuiIcon = MuiIcons[iconSuggestion];
-        if (MuiIcon) {
-            return _jsx(MuiIcon, { sx: { fontSize: "2rem" } });
-        }
-        else {
-            console.warn(`Icon "${iconSuggestion}" not found in MUI icons. Falling back to default.`);
-            return fallbackElement;
-        }
-    }
-    // "auto": use logo.dev service
-    const logoUrl = logoServiceToken && customer?.trim().length > 0
-        ? `https://img.logo.dev/name/${encodeURIComponent(customer)}?token=${logoServiceToken}&theme=dark&format=png&size=75`
-        : null;
-    return logoUrl ? (_jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } })) : (fallbackElement);
-};

package/dist/components/Common/MUIAccordion.d.ts

@@ -1,17 +0,0 @@
-import { SxProps } from "@mui/material/styles";
-import { FC, ReactNode } from "react";
-interface MUIAccordionItem {
-    content: ReactNode;
-    disabled?: boolean;
-    title: ReactNode;
-}
-interface MUIAccordionProps {
-    arrowPosition?: "left" | "right";
-    defaultExpandedPanelKey?: number;
-    expandOnlyOnePanel?: boolean;
-    id: string;
-    items: MUIAccordionItem[];
-    sx?: SxProps;
-}
-export declare const MUIAccordion: FC<MUIAccordionProps>;
-export {};

package/dist/components/Common/MUIAccordion.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/*
-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 ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
-import MuiAccordion from "@mui/material/Accordion";
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import MuiAccordionSummary, { accordionSummaryClasses } from "@mui/material/AccordionSummary";
-import { styled } from "@mui/material/styles";
-import Typography from "@mui/material/Typography";
-import { useCallback, useState } from "react";
-// #region: Styled Components
-const Accordion = styled((props) => (_jsx(MuiAccordion, { disableGutters: true, elevation: 0, id: "mui-accordion", ...props })))(({ theme }) => ({
-    border: `1px solid ${theme.palette.divider}`,
-    "&::before": {
-        display: "none",
-    },
-}));
-const AccordionSummary = styled((props) => (_jsx(MuiAccordionSummary, { id: "mui-accordion-summary", expandIcon: _jsx(ArrowForwardIosSharpIcon, { id: "arrow-forward", sx: { fontSize: "0.9rem" } }), ...props })))(({ theme }) => ({
-    [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]: {
-        transform: "rotate(90deg)",
-    },
-    [`& .${accordionSummaryClasses.content}`]: {
-        marginLeft: theme.spacing(1),
-    },
-}));
-const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
-    borderTop: "1px solid rgba(0, 0, 0, .125)",
-    padding: theme.spacing(2),
-}));
-// #endregion: Types
-export const MUIAccordion = ({ arrowPosition = "left", defaultExpandedPanelKey, expandOnlyOnePanel = false, id, items, sx, }) => {
-    const [expandedList, setExpandedList] = useState(defaultExpandedPanelKey ? [defaultExpandedPanelKey] : []);
-    const handleChange = useCallback((panelKey) => (_event, newExpanded) => {
-        setExpandedList((prevExpandedList) => {
-            if (!expandOnlyOnePanel) {
-                return newExpanded
-                    ? [...prevExpandedList, panelKey]
-                    : prevExpandedList.filter((key) => key !== panelKey);
-            }
-            else {
-                return newExpanded ? [panelKey] : [];
-            }
-        });
-    }, [expandOnlyOnePanel]);
-    const isExpanded = useCallback((panelKey) => expandedList.includes(panelKey), [expandedList]);
-    return (_jsx(_Fragment, { children: items.map(({ content, disabled = false, title }, index) => {
-            const panelKey = index + 1; // Start with index 1
-            const baseIdAndPanelKey = `${id}-${panelKey}`;
-            return (_jsxs(Accordion, { disabled: disabled, expanded: isExpanded(panelKey), id: `${baseIdAndPanelKey}-accordion`, onChange: handleChange(panelKey), sx: sx, children: [_jsx(AccordionSummary, { "aria-controls": `${baseIdAndPanelKey}-summary`, id: `${baseIdAndPanelKey}-summary`, sx: {
-                            flexDirection: arrowPosition === "left" ? "row-reverse" : undefined,
-                        }, children: _jsx(Typography, { component: "span", id: `${baseIdAndPanelKey}-summary-typography`, sx: { fontSize: "0.9rem" }, children: title }) }), _jsx(AccordionDetails, { id: `${baseIdAndPanelKey}-details`, children: _jsx(Typography, { component: "span", id: `${baseIdAndPanelKey}-details-typography`, sx: { fontSize: "0.85rem" }, children: content }) })] }, `${baseIdAndPanelKey}-accordion`));
-        }) }));
-};

package/dist/components/MultiAgentAccelerator/GraphLayouts.d.ts

@@ -1,36 +0,0 @@
-import { Edge, Node as RFNode } from "@xyflow/react";
-import { AgentConversation } from "./AgentConversations.js";
-import { AgentNodeProps } from "./AgentNode.js";
-import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
-import { AgentIconSuggestions } from "../../controller/Types/AgentIconSuggestions.js";
-import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
-export declare const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
-/**
- * Result of the layout algorithms, containing the nodes and edges with their computed positions and properties.
- */
-export type LayoutResult = {
-    nodes: RFNode<AgentNodeProps>[];
-    edges: Edge[];
-};
-export declare const addThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
-    edge: ThoughtBubbleEdgeShape;
-    timestamp: number;
-}>, conversationId: string, edge: ThoughtBubbleEdgeShape) => void;
-export declare const removeThoughtBubbleEdge: (thoughtBubbleEdges: Map<string, {
-    edge: ThoughtBubbleEdgeShape;
-    timestamp: number;
-}>, conversationId: string) => void;
-export declare const getThoughtBubbleEdges: (thoughtBubbleEdges: Map<string, {
-    edge: ThoughtBubbleEdgeShape;
-    timestamp: number;
-}>) => ThoughtBubbleEdgeShape[];
-export declare const layoutRadial: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
-isAwaitingLlm: boolean, isAgentNetworkDesignerMode: boolean, thoughtBubbleEdges: Map<string, {
-    edge: ThoughtBubbleEdgeShape;
-    timestamp: number;
-}>, agentIconSuggestions?: AgentIconSuggestions, isTemporaryNetwork?: boolean) => LayoutResult;
-export declare const layoutLinear: (agentCounts: Map<string, number>, agentsInNetwork: ConnectivityInfo[], currentConversations: AgentConversation[] | null, // For plasma edges (live) and node highlighting
-isAwaitingLlm: boolean, isAgentNetworkDesignerMode: boolean, thoughtBubbleEdges: Map<string, {
-    edge: ThoughtBubbleEdgeShape;
-    timestamp: number;
-}>, agentIconSuggestions?: AgentIconSuggestions, isTemporaryNetwork?: boolean) => LayoutResult;

package/dist/components/MultiAgentAccelerator/PlasmaEdge.d.ts

@@ -1,3 +0,0 @@
-import { EdgeProps } from "@xyflow/react";
-import { FC } from "react";
-export declare const PlasmaEdge: FC<EdgeProps>;

package/dist/utils/useLocalStorage.d.ts

@@ -1 +0,0 @@
-export declare const useLocalStorage: (key: string, initialValue: unknown) => any[];

package/dist/utils/useLocalStorage.js

@@ -1,55 +0,0 @@
-/*
-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 { useState } from "react";
-export const useLocalStorage = (key, initialValue) => {
-    // State to store our value
-    // Pass initial state function to useState so logic is only executed once
-    const [storedValue, setStoredValue] = useState(() => {
-        if (typeof window === "undefined") {
-            return initialValue;
-        }
-        try {
-            // Get from local storage by key
-            const item = window.localStorage.getItem(key);
-            // Parse stored JSON or if none return initialValue
-            return item ? JSON.parse(item) : initialValue;
-        }
-        catch (error) {
-            // If error also return initialValue
-            console.error(error);
-            return initialValue;
-        }
-    });
-    // Return a wrapped version of useState's setter function that ...
-    // ... persists the new value to localStorage.
-    const setValue = (value) => {
-        try {
-            // Allow value to be a function so we have same API as useState
-            const valueToStore = typeof value === "function" ? value(storedValue) : value;
-            // Save state
-            setStoredValue(valueToStore);
-            // Save to local storage
-            if (typeof window !== "undefined") {
-                window.localStorage.setItem(key, JSON.stringify(valueToStore));
-            }
-        }
-        catch (error) {
-            // A more advanced implementation would handle the error case
-            console.error(error);
-        }
-    };
-    return [storedValue, setValue];
-};