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

package/dist/components/AgentChat/VoiceChat/VoiceChat.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 // #endregion: Types
-// Check if browser is Chrome (excluding Edge). Only Chrome (on Mac OS and Windows) has full support for
+// Check if browser is Chrome (excluding Edge). Only Chrome (on macOS and Windows) has full support for
 // SpeechRecognition. Also, tested that this will exclude Firefox and Safari.
 const isChrome = () => /Chrome/u.test(navigator.userAgent) && !/Edge/u.test(navigator.userAgent) && !/Edg\//u.test(navigator.userAgent);
 // Check browser/platform support
@@ -88,7 +88,7 @@ const handleRecognitionError = (setVoiceInputState) => (event) => {
     }));
 };
 // Remove speech recognition event handlers and stop speech recognition
-export function cleanupAndStopSpeechRecognition(speechRecognitionRef, handlers) {
+export const cleanupAndStopSpeechRecognition = (speechRecognitionRef, handlers) => {
     const speechRecognition = speechRecognitionRef.current;
     if (!speechRecognition || !handlers)
         return;
@@ -103,8 +103,8 @@ export function cleanupAndStopSpeechRecognition(speechRecognitionRef, handlers)
         console.warn("Error stopping speechRecognition:", error);
     }
     speechRecognitionRef.current = null;
-}
-export function setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef) {
+};
+export const setupSpeechRecognition = (setChatInput, setVoiceInputState, speechRecognitionRef) => {
     const speechSupported = checkSpeechSupport();
     if (speechSupported) {
         const speechRecognition = new SpeechRecognition();
@@ -129,7 +129,7 @@ export function setupSpeechRecognition(setChatInput, setVoiceInputState, speechR
         speechRecognitionRef.current = null;
         return null;
     }
-}
+};
 // Request microphone permission
 const requestMicrophonePermission = async () => {
     if (!isChrome())

package/dist/components/ChatBot/ChatBot.js

@@ -15,13 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import ContactSupportIcon from "@mui/icons-material/ContactSupport";
-import { useColorScheme, useTheme } from "@mui/material";
 import Box from "@mui/material/Box";
 import Grow from "@mui/material/Grow";
+import { useColorScheme, useTheme } from "@mui/material/styles";
 import { useState } from "react";
 import { CHATBOT_ENDPOINT } from "../../controller/llm/endpoints.js";
+import { isDarkMode } from "../../Theme/Theme.js";
 import { useAuthentication } from "../../utils/Authentication.js";
-import { isDarkMode } from "../../utils/Theme.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { ChatCommon } from "../AgentChat/ChatCommon.js";
 import { LegacyAgentType } from "../AgentChat/Types.js";

package/dist/components/Common/Breadcrumbs.js

@@ -15,9 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { Typography } from "@mui/material";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 import startCase from "lodash-es/startCase.js";
 export const NeuroAIBreadcrumbs = ({ pathname }) => {
     const urlPaths = pathname?.split("/").filter((path) => path !== "");

package/dist/components/Common/{confirmationModal.js → ConfirmationModal.js}

@@ -14,9 +14,9 @@ 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 { styled } from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
 import { useState } from "react";
 import { MUIDialog } from "./MUIDialog.js";
 // #region: Styled Components
@@ -24,9 +24,6 @@ const StyledButton = styled(Button)({
     fontSize: "0.8em",
     padding: "0px 7px",
 });
-const StyledOKButton = styled(StyledButton)(({ disabled }) => ({
-    backgroundColor: disabled ? "rgba(0, 0, 0, 0.12) !important" : "var(--bs-primary) !important",
-}));
 // #endregion: Types
 export const ConfirmationModal = ({ cancelBtnLabel, closeable = true, content = "", handleCancel = null, handleOk = null, id = "", maskCloseable = false, okBtnLabel, title = "", }) => {
     const [modalOpen, setModalOpen] = useState(true);
@@ -56,7 +53,7 @@ export const ConfirmationModal = ({ cancelBtnLabel, closeable = true, content =
             // This ID needs to be dynamic because there can be several instances of this on the page
             , { 
                 // This ID needs to be dynamic because there can be several instances of this on the page
-                id: `${id}-confirm-cancel-btn`, onClick: () => handleCloseWrapper(), disabled: isLoading, variant: "outlined", children: cancelBtnLabel ?? "Cancel" }, "confirm-cancel")), _jsx(StyledOKButton
+                id: `${id}-confirm-cancel-btn`, onClick: () => handleCloseWrapper(), disabled: isLoading, variant: "outlined", children: cancelBtnLabel ?? "Cancel" }, "confirm-cancel")), _jsx(StyledButton
             // This ID needs to be dynamic because there can be several instances of this on the page
             , { 
                 // This ID needs to be dynamic because there can be several instances of this on the page

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,49 @@
+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 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=light&format=png&size=75`
+        : null;
+    return logoUrl ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } })) : (fallbackElement);
+};

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

@@ -0,0 +1,18 @@
+import { SxProps } from "@mui/material/styles";
+import { FC } from "react";
+interface FooterProps {
+    readonly logoUrl: string;
+    readonly logoLinkUrl: string;
+    readonly supportEmailAddress: string;
+    readonly sx?: SxProps;
+}
+/**
+ * Footer for all pages, contains additional links and contact information
+ *
+ * @param logoLinkUrl - The URL that the logo will link to when clicked
+ * @param logoUrl - The URL of the logo image to be displayed in the footer. Can be a local or external URL.
+ * @param supportEmailAddress - The email address that will be used in the Contact Us link
+ * @param sx - Optional MUI sx prop for additional styling overrides
+ */
+export declare const Footer: FC<FooterProps>;
+export {};

package/dist/components/Common/Footer.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { useState } from "react";
+import { ConfirmationModal } from "./ConfirmationModal.js";
+import { getContactUsConfirmationText } from "../../const.js";
+import { navigateToUrl } from "../../utils/BrowserNavigation.js";
+const HeaderLine = styled("h6")({
+    fontWeight: "bold",
+    fontSize: "smaller",
+});
+const LinkDivider = styled("div")({
+    border: "1px solid var(--bs-accent3-medium)",
+    marginBottom: "0.5rem",
+    width: "2.4rem",
+});
+const FooterSectionHeader = styled("div")({
+    display: "inline-flex",
+    flexDirection: "column",
+    marginTop: "0.1rem",
+});
+const FooterItemLink = styled("a")(({ theme }) => ({
+    color: theme.palette.grey[500],
+    display: "block",
+    marginBottom: "0.37rem",
+    width: "fit-content",
+    fontSize: "smaller",
+    "&:hover": {
+        color: theme.palette.text.primary,
+    },
+}));
+const FooterContainer = styled("footer")({
+    backgroundColor: "var(--bs-primary)",
+    borderTop: "var(--bs-border-width) var(--bs-border-style) var(--bs-gray-lighter)",
+    columnGap: "60px",
+    display: "flex",
+    justifyContent: "center",
+    marginTop: "1rem",
+    paddingTop: "2rem",
+    paddingBottom: "1rem",
+    width: "100%",
+});
+/**
+ * Footer for all pages, contains additional links and contact information
+ *
+ * @param logoLinkUrl - The URL that the logo will link to when clicked
+ * @param logoUrl - The URL of the logo image to be displayed in the footer. Can be a local or external URL.
+ * @param supportEmailAddress - The email address that will be used in the Contact Us link
+ * @param sx - Optional MUI sx prop for additional styling overrides
+ */
+export const Footer = ({ logoLinkUrl, logoUrl, supportEmailAddress, sx }) => {
+    // For email dialog
+    const [emailDialogOpen, setEmailDialogOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [emailDialogOpen && (_jsx(ConfirmationModal, { content: getContactUsConfirmationText(supportEmailAddress), handleCancel: () => {
+                    setEmailDialogOpen(false);
+                }, handleOk: () => {
+                    navigateToUrl(`mailto:${supportEmailAddress}`);
+                    setEmailDialogOpen(false);
+                }, id: "email-dialog", title: "Contact Us" })), _jsxs(FooterContainer, { id: "additional-links-container", sx: sx, children: [_jsx("a", { href: logoLinkUrl, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { id: "logo-img", width: 200, height: 45, src: logoUrl, alt: "Cognizant Logo" }) }), _jsxs(FooterSectionHeader, { id: "team-links", children: [_jsx(HeaderLine, { id: "additional-links-header", children: "Team" }), _jsx(LinkDivider, { id: "additional-links-divider" }), _jsx(FooterItemLink, { id: "learn-more-link", href: "https://www.cognizant.com/us/en/services/ai/ai-lab", target: "_blank", rel: "noopener noreferrer", children: "About" }), _jsx(FooterItemLink, { id: "contact-us-footer-link", href: null, onClick: () => setEmailDialogOpen(true), rel: "noopener noreferrer", sx: { cursor: "pointer" }, children: "Contact Us" })] }), _jsxs(FooterSectionHeader, { id: "services-links", children: [_jsx(HeaderLine, { id: "additional-links-header", children: "Services" }), _jsx(LinkDivider, {}), _jsx(FooterItemLink, { id: "ai-innovation-studios-link", href: "https://portal-innovationstudio-apps-prod-we-001.azurewebsites.net/", target: "_blank", rel: "noopener noreferrer", children: "AI Innovation Studios" }), _jsx(FooterItemLink, { id: "neuro-it-ops-link", href: "https://www.cognizant.com/us/en/services/neuro-intelligent-automation/neuro-ai-it-operations", target: "_blank", rel: "noopener noreferrer", children: "Neuro IT Ops" }), _jsx(FooterItemLink, { id: "flowsource-link", href: "https://www.cognizant.com/us/en/services/software-engineering-services/flowsource", target: "_blank", rel: "noopener noreferrer", children: "Flowsource" }), _jsx(FooterItemLink, { id: "skygrade-link", href: "https://www.cognizant.com/us/en/services/cloud-solutions/cognizant-skygrade", target: "_blank", rel: "noopener noreferrer", children: "Skygrade" }), _jsx(FooterItemLink, { id: "cdit-link", href: "https://cditoolkit.cognizant.com/cditlive2.0/", target: "_blank", rel: "noopener noreferrer", children: "Cognizant Ignition" })] }), _jsxs(FooterSectionHeader, { children: [_jsx(HeaderLine, { children: "Other" }), _jsx(LinkDivider, {}), _jsx(FooterItemLink, { id: "learn-more-link", href: "https://logo.dev", target: "_blank", rel: "noreferrer", children: "Logos provided by Logo.dev" })] })] })] }));
+};

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

@@ -1,9 +1,6 @@
 type LLMChatGroupConfigBtnProps = {
     enabled?: boolean;
     posRight?: number;
-    posBottom?: number;
 };
-export declare const LlmChatOptionsButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLButtonElement>;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export declare const LlmChatOptionsButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
 export {};

package/dist/components/Common/LlmChatOptionsButton.js

@@ -13,18 +13,18 @@ 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 { styled } from "@mui/material";
 import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 export const LlmChatOptionsButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== "enabled" && prop !== "posRight" && prop !== "posBottom",
-})(({ enabled, posRight }) => ({
+})(({ theme, enabled, posRight }) => ({
     position: "absolute",
     top: 10,
     right: posRight || null,
     zIndex: getZIndex(1, null), // Seems to only be needed on Analytics Chat, but apply to all.
-    background: `${enabled ? "var(--bs-primary)" : "darkgray"} !important`,
-    borderColor: `${enabled ? "var(--bs-primary)" : "darkgray"} !important`,
+    background: `${enabled ? theme.palette.primary.main : theme.palette.grey[600]} !important`,
+    borderColor: `${enabled ? theme.palette.primary.main : theme.palette.grey[600]} !important`,
     borderRadius: "var(--bs-border-radius)",
     width: "30px",
     height: "30px",

package/dist/components/Common/LoadingSpinner.js

@@ -20,5 +20,5 @@ import CircularProgress from "@mui/material/CircularProgress";
  * @param id The id for the spinner and text elements, for testing
  */
 export const LoadingSpinner = ({ id }) => {
-    return (_jsxs("h3", { id: id, children: [_jsx(CircularProgress, { id: `${id}-spinner`, sx: { color: "var(--bs-primary)" }, size: 35 }), _jsx("span", { id: `${id}-loading-text`, style: { marginLeft: "1em" }, children: "Loading..." })] }));
+    return (_jsxs("h3", { id: id, children: [_jsx(CircularProgress, { id: `${id}-spinner`, size: 35 }), _jsx("span", { id: `${id}-loading-text`, style: { marginLeft: "1em" }, children: "Loading..." })] }));
 };

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

@@ -1,11 +1,11 @@
-import { SxProps } from "@mui/material";
+import { SxProps } from "@mui/material/styles";
 import { FC, ReactNode } from "react";
 interface MUIAccordionItem {
     content: ReactNode;
     disabled?: boolean;
     title: ReactNode;
 }
-export interface MUIAccordionProps {
+interface MUIAccordionProps {
     arrowPosition?: "left" | "right";
     defaultExpandedPanelKey?: number;
     expandOnlyOnePanel?: boolean;

package/dist/components/Common/MUIAccordion.js

@@ -15,13 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
-import { styled, useColorScheme } from "@mui/material";
 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";
-import { isDarkMode } from "../../utils/Theme.js";
 // #region: Styled Components
 const Accordion = styled((props) => (_jsx(MuiAccordion, { disableGutters: true, elevation: 0, id: "mui-accordion", ...props })))(({ theme }) => ({
     border: `1px solid ${theme.palette.divider}`,
@@ -43,9 +42,6 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
 }));
 // #endregion: Types
 export const MUIAccordion = ({ arrowPosition = "left", defaultExpandedPanelKey, expandOnlyOnePanel = false, id, items, sx, }) => {
-    // Dark mode
-    const { mode, systemMode } = useColorScheme();
-    const darkMode = isDarkMode(mode, systemMode);
     const [expandedList, setExpandedList] = useState(defaultExpandedPanelKey ? [defaultExpandedPanelKey] : []);
     const handleChange = useCallback((panelKey) => (_event, newExpanded) => {
         setExpandedList((prevExpandedList) => {
@@ -64,13 +60,7 @@ export const MUIAccordion = ({ arrowPosition = "left", defaultExpandedPanelKey,
             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: {
-                            backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-gray-background)",
-                            color: darkMode ? "var(--bs-white)" : "var(--bs-primary)",
                             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`, sx: {
-                            backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "rgba(0, 0, 0, 0.02)",
-                            borderColor: darkMode ? "var(--bs-white)" : "var(--bs-border-color)",
-                            color: darkMode ? "var(--bs-white)" : "var(--bs-primary)",
-                        }, children: _jsx(Typography, { component: "span", id: `${baseIdAndPanelKey}-details-typography`, sx: { fontSize: "0.85rem" }, children: content }) })] }, `${baseIdAndPanelKey}-accordion`));
+                        }, 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/Common/MUIAlert.d.ts

@@ -1,4 +1,5 @@
-import { AlertColor, SxProps } from "@mui/material";
+import { AlertColor } from "@mui/material/Alert";
+import { SxProps } from "@mui/material/styles";
 import { FC, ReactNode } from "react";
 interface MUIAlertProps {
     children: ReactNode;

package/dist/components/Common/MUIAlert.js

@@ -15,7 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import CloseIcon from "@mui/icons-material/Close";
-import { Alert, Collapse, IconButton, styled } from "@mui/material";
+import Alert from "@mui/material/Alert";
+import Collapse from "@mui/material/Collapse";
+import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
 import { useState } from "react";
 // #region: Styled Components
 const StyledAlert = styled(Alert)({

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

@@ -1,4 +1,4 @@
-import { SxProps } from "@mui/material";
+import { SxProps } from "@mui/material/styles";
 import { FC, JSX as ReactJSX, ReactNode } from "react";
 interface MUIDialogProps {
     children: ReactNode;

package/dist/components/Common/MUIDialog.js

@@ -15,12 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import CloseIcon from "@mui/icons-material/Close";
-import { styled } from "@mui/material";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
 // #region: Styled Components
 const StyledDialogTitle = styled(DialogTitle)({
     fontSize: "1rem",

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

@@ -11,5 +11,7 @@ export interface NavbarProps {
     readonly authenticationType: string;
     readonly signOut: () => void;
     readonly supportEmailAddress: string;
+    readonly logoServiceToken?: string;
+    readonly showSettingsButton?: boolean;
 }
-export declare const Navbar: ({ authenticationType, id, logo, pathname, query, signOut, supportEmailAddress, userInfo, }: NavbarProps) => ReactJSX.Element;
+export declare const Navbar: ({ authenticationType, id, logo, logoServiceToken, pathname, query, showSettingsButton, signOut, supportEmailAddress, userInfo, }: NavbarProps) => ReactJSX.Element;

package/dist/components/Common/Navbar.js

@@ -19,14 +19,24 @@ limitations under the License.
  */
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
-import { IconButton, Menu, MenuItem, Tooltip, Typography, useColorScheme } from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
+import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useColorScheme } from "@mui/material/styles";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
 import { useEffect, useState } from "react";
-import { ConfirmationModal } from "./confirmationModal.js";
+import { ConfirmationModal } from "./ConfirmationModal.js";
+import { CustomerLogo, getCognizantLogoImage } from "./CustomerLogo.js";
 import { LoadingSpinner } from "./LoadingSpinner.js";
-import { authenticationEnabled, CONTACT_US_CONFIRMATION_DIALOG_TEXT, CONTACT_US_CONFIRMATION_DIALOG_TITLE, DEFAULT_USER_IMAGE, NEURO_SAN_UI_VERSION, } from "../../const.js";
+import { authenticationEnabled, DEFAULT_USER_IMAGE, getContactUsConfirmationText, NEURO_SAN_UI_VERSION, } from "../../const.js";
+import { useSettingsStore } from "../../state/Settings.js";
+import { isDarkMode } from "../../Theme/Theme.js";
 import { navigateToUrl } from "../../utils/BrowserNavigation.js";
-import { isDarkMode } from "../../utils/Theme.js";
+import { SettingsDialog } from "../Settings/SettingsDialog.js";
 const MENU_ITEM_TEXT_PROPS = {
     color: "var(--bs-white)",
     backgroundColor: "var(--bs-primary)",
@@ -42,7 +52,7 @@ const DISABLE_OUTLINE_PROPS = {
         outline: "none",
     },
 };
-export const Navbar = ({ authenticationType, id, logo, pathname, query, signOut, supportEmailAddress, userInfo, }) => {
+export const Navbar = ({ authenticationType, id, logo, logoServiceToken, pathname, query, showSettingsButton = true, signOut, supportEmailAddress, userInfo, }) => {
     // For email dialog
     const [emailDialogOpen, setEmailDialogOpen] = useState(false);
     // Dark mode
@@ -72,34 +82,40 @@ export const Navbar = ({ authenticationType, id, logo, pathname, query, signOut,
     const handleCloseExploreMenu = () => {
         setExploreMenuAnchorEl(null);
     };
+    // Settings dialog state
+    const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
+    // Customer for branding
+    const customer = useSettingsStore((state) => state.settings.branding.customer);
+    const primary = useSettingsStore((state) => state.settings.branding.primary);
     return hydrated ? (_jsxs(Grid, { id: "nav-bar-container", container: true, alignItems: "center", sx: {
             ...MENU_ITEM_TEXT_PROPS,
-            color: "var(--bs-white)",
-            padding: "0.25rem",
-        }, children: [_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" }) }), _jsx(Grid, { id: id, children: _jsx(Typography, { id: "nav-bar-brand", sx: {
-                        ...MENU_ITEM_TEXT_PROPS,
-                        color: "var(--bs-white)",
-                        marginLeft: "0.85rem",
-                        fontSize: "16px",
-                        fontWeight: "bold",
-                    }, children: _jsxs("a", { id: "navbar-brand-link", style: {
-                            fontWeight: 500,
-                            fontSize: "1.1rem",
-                            color: "var(--bs-white)",
-                            position: "relative",
-                            bottom: "1px",
-                            textDecoration: "none",
-                        }, href: Object.keys(query || {}).length > 0
-                            ? `/?${new URLSearchParams(query).toString()}`
-                            : "/", children: [logo, " ", pathname === "/multiAgentAccelerator" ? "Multi-Agent Accelerator" : "Decisioning"] }) }) }), _jsx(Grid, { id: "build", sx: {
+            padding: "0.5rem",
+        }, children: [settingsDialogOpen && (_jsx(SettingsDialog, { id: "settings-dialog", isOpen: settingsDialogOpen, logoServiceToken: logoServiceToken, onClose: () => setSettingsDialogOpen(false) })), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [_jsx(CustomerLogo, { logoServiceToken: logoServiceToken }), _jsx(Typography, { id: "customer-branding", sx: {
+                            fontSize: "20px",
+                            fontWeight: "600",
+                            paddingLeft: "0.15rem",
+                            width: "200px",
+                            display: "flex",
+                            alignItems: "center",
+                        }, children: customer })] }), _jsxs(Grid, { id: id, sx: { display: "flex", alignItems: "center" }, children: [customer ? getCognizantLogoImage() : null, _jsx(Typography, { id: "nav-bar-brand", sx: {
+                            ...MENU_ITEM_TEXT_PROPS,
+                            marginLeft: "0.85rem",
+                            fontSize: "16px",
+                            fontWeight: "bold",
+                        }, children: _jsxs("a", { id: "navbar-brand-link", style: {
+                                fontWeight: 500,
+                                fontSize: "1.1rem",
+                                color: "var(--bs-white)",
+                                position: "relative",
+                                bottom: "1px",
+                                textDecoration: "none",
+                            }, href: Object.keys(query || {}).length > 0
+                                ? `/?${new URLSearchParams(query).toString()}`
+                                : "/", children: [logo, " ", pathname === "/multiAgentAccelerator" ? "Multi-Agent Accelerator" : "Decisioning"] }) })] }), _jsx(Grid, { id: "build", sx: {
                     flex: 1, // Take available space
                     display: "flex",
                     justifyContent: "flex-end", // Right align
                     alignItems: "center", // Vertically center
-                    color: "var(--bs-white)",
                     marginRight: "50px",
                 }, children: _jsxs(Typography, { id: "build-text", sx: { ...MENU_ITEM_TEXT_PROPS }, children: ["Build: ", _jsx("strong", { id: "build-strong", children: NEURO_SAN_UI_VERSION })] }) }), _jsxs(Grid, { id: "explore-dropdown", sx: { cursor: "pointer", marginRight: "30px" }, children: [_jsxs(Typography, { id: "explore-toggle", sx: {
                             ...MENU_ITEM_TEXT_PROPS,
@@ -107,31 +123,40 @@ export const Navbar = ({ authenticationType, id, logo, pathname, query, signOut,
                             alignItems: "center",
                         }, onClick: (event) => {
                             setExploreMenuAnchorEl(event.currentTarget);
-                        }, children: ["Explore", _jsx(ArrowDropDownIcon, { id: "nav-explore-dropdown-arrow", sx: { color: "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "explore-menu", anchorEl: exploreMenuAnchorEl, open: exploreMenuOpen, onClose: handleCloseExploreMenu, children: [_jsx(MenuItem, { id: "explore-neuro-san-studio", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san-studio", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san studio (examples)" }, "explore-neuro-san-studio"), _jsx(MenuItem, { id: "explore-neuro-san", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san (core)" }, "explore-neuro-san")] })] }), _jsxs(Grid, { id: "help-dropdown", sx: { cursor: "pointer", marginRight: "30px" }, children: [_jsxs(Typography, { id: "help-toggle", sx: {
+                        }, children: ["Explore", _jsx(ArrowDropDownIcon, { id: "nav-explore-dropdown-arrow", sx: { color: primary || "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "explore-menu", anchorEl: exploreMenuAnchorEl, open: exploreMenuOpen, onClose: handleCloseExploreMenu, children: [_jsx(MenuItem, { id: "explore-neuro-san-studio", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san-studio", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san studio (examples)" }, "explore-neuro-san-studio"), _jsx(MenuItem, { id: "explore-neuro-san", component: "a", href: "https://github.com/cognizant-ai-lab/neuro-san", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "Neuro-san (core)" }, "explore-neuro-san")] })] }), _jsxs(Grid, { id: "help-dropdown", sx: { cursor: "pointer", marginRight: "30px" }, children: [_jsxs(Typography, { id: "help-toggle", sx: {
                             ...MENU_ITEM_TEXT_PROPS,
                             display: "flex",
                             alignItems: "center",
                         }, onClick: (event) => {
                             setHelpMenuAnchorEl(event.currentTarget);
-                        }, children: ["Help", _jsx(ArrowDropDownIcon, { id: "nav-help-dropdown-arrow", sx: { color: "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "help-menu", anchorEl: helpMenuAnchorEl, open: helpMenuOpen, onClose: handleCloseHelpMenu, children: [_jsx(MenuItem, { id: "user-guide", component: "a", href: "/userguide", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "User guide" }, "user-guide"), _jsx(MenuItem, { href: null, id: "contact-us-help", onClick: () => setEmailDialogOpen(true), children: "Contact Us" }, "contact-us-help")] })] }), emailDialogOpen ? (_jsx(ConfirmationModal, { id: "email-dialog", content: CONTACT_US_CONFIRMATION_DIALOG_TEXT, handleCancel: () => {
+                        }, children: ["Help", _jsx(ArrowDropDownIcon, { id: "nav-help-dropdown-arrow", sx: { color: primary || "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "help-menu", anchorEl: helpMenuAnchorEl, open: helpMenuOpen, onClose: handleCloseHelpMenu, children: [_jsx(MenuItem, { id: "user-guide", component: "a", href: "/userguide", target: "_blank", sx: { ...DISABLE_OUTLINE_PROPS }, children: "User guide" }, "user-guide"), _jsx(MenuItem, { href: null, id: "contact-us-help", onClick: () => setEmailDialogOpen(true), children: "Contact Us" }, "contact-us-help")] })] }), emailDialogOpen ? (_jsx(ConfirmationModal, { id: "email-dialog", content: getContactUsConfirmationText(supportEmailAddress), handleCancel: () => {
                     setEmailDialogOpen(false);
                 }, handleOk: () => {
                     navigateToUrl(`mailto:${supportEmailAddress}`);
                     setEmailDialogOpen(false);
-                }, title: CONTACT_US_CONFIRMATION_DIALOG_TITLE })) : null, userInfo ? (_jsxs(Grid, { id: "user-dropdown", children: [_jsxs(IconButton, { "aria-label": "User dropdown toggle", id: "user-dropdown-toggle", onClick: (event) => {
+                }, title: "Contact Us" })) : null, userInfo ? (_jsxs(Grid, { id: "user-dropdown", children: [_jsxs(IconButton, { "aria-label": "User dropdown toggle", id: "user-dropdown-toggle", onClick: (event) => {
                             setUserMenuAnchorEl(event.currentTarget);
                         }, sx: {
                             ...MENU_ITEM_TEXT_PROPS,
-                        }, children: [_jsx("img", { id: "user-image", src: userInfo.image || DEFAULT_USER_IMAGE, width: 30, height: 30, title: userInfo.name, alt: "" }), _jsx(ArrowDropDownIcon, { id: "nav-user-dropdown-arrow", sx: { color: "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "user-menu", anchorEl: userMenuAnchorEl, open: userMenuOpen, onClose: handleCloseUserMenu, children: [_jsx(MenuItem, { id: "user-signed-in-as", disabled: true, sx: { fontWeight: "bold" }, children: "Signed in as" }), _jsx(MenuItem, { id: "user-name", disabled: true, sx: {
+                        }, children: [_jsx("img", { id: "user-image", src: userInfo.image || DEFAULT_USER_IMAGE, width: 30, height: 30, title: userInfo.name, alt: "" }), _jsx(ArrowDropDownIcon, { id: "nav-user-dropdown-arrow", sx: { color: primary || "var(--bs-white)", fontSize: 22 } })] }), _jsxs(Menu, { id: "user-menu", anchorEl: userMenuAnchorEl, open: userMenuOpen, onClose: handleCloseUserMenu, children: [_jsx(MenuItem, { id: "user-signed-in-as", disabled: true, sx: { fontWeight: "bold" }, children: "Signed in as" }), _jsx(MenuItem, { id: "user-name", disabled: true, sx: {
                                     whiteSpace: "normal",
                                     wordWrap: "break-word",
                                     fontSize: "smaller",
-                                }, children: userInfo.name }), _jsx(MenuItem, { id: "auth-type-title", disabled: true, sx: { fontWeight: "bold" }, children: "Authentication" }), _jsx(MenuItem, { id: "authentication-type-menu-item", disabled: true, sx: { fontSize: "smaller" }, children: authenticationType }), authenticationEnabled() && (_jsx(MenuItem, { id: "user-sign-out", sx: { ...DISABLE_OUTLINE_PROPS, fontWeight: "bold" }, onClick: signOut, children: "Sign out" }))] })] })) : null, _jsx(Tooltip, { id: "dark-mode-toggle", title: "Toggle dark mode", children: _jsx(DarkModeIcon, { id: "dark-mode-icon", sx: {
+                                }, children: userInfo.name }), _jsx(MenuItem, { id: "auth-type-title", disabled: true, sx: { fontWeight: "bold" }, children: "Authentication" }), _jsx(MenuItem, { id: "authentication-type-menu-item", disabled: true, sx: { fontSize: "smaller" }, children: authenticationType }), authenticationEnabled() && (_jsx(MenuItem, { id: "user-sign-out", sx: { ...DISABLE_OUTLINE_PROPS, fontWeight: "bold" }, onClick: signOut, children: "Sign out" }))] })] })) : null, _jsx(Tooltip, { id: "dark-mode-toggle", title: customer
+                    ? "Dark mode toggle is not available when customer branding is active. Reset via Settings menu."
+                    : "Toggle dark mode", children: _jsx(DarkModeIcon, { id: "dark-mode-icon", sx: {
                         marginRight: "1rem",
                         fontSize: "1rem",
-                        cursor: "pointer",
+                        cursor: customer ? "not-allowed" : "pointer",
                         color: darkMode ? "var(--bs-yellow)" : "var(--bs-gray-dark)",
                     }, onClick: () => {
-                        setMode(darkMode ? "light" : "dark");
-                    } }) })] })) : (_jsx(LoadingSpinner, { id: "navbar-loading-spinner" }));
+                        !customer && setMode(darkMode ? "light" : "dark");
+                    } }) }), showSettingsButton && (_jsx(Tooltip, { title: "Settings", children: _jsx(SettingsIcon, { sx: {
+                        ...MENU_ITEM_TEXT_PROPS,
+                        marginRight: "1rem",
+                        fontSize: "1rem",
+                        cursor: "pointer",
+                    }, onClick: () => {
+                        setSettingsDialogOpen(true);
+                    } }) }))] })) : (_jsx(LoadingSpinner, { id: "navbar-loading-spinner" }));
 };

package/dist/components/Common/PageLoader.js

@@ -14,13 +14,12 @@ 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 { CircularProgress, Typography } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
 export const PageLoader = ({ id }) => (_jsxs("div", { id: `${id}__loader`, style: {
         left: "0",
         position: "absolute",
         right: "0",
         textAlign: "center",
         top: "50%",
-    }, children: [_jsx(Typography, { id: `${id}-loader__message`, variant: "h3", children: "Loading... Please wait" }), _jsx(CircularProgress, { id: `${id}-loader__spinner`, sx: {
-                color: "var(--bs-primary)",
-            }, size: "100px" })] }));
+    }, children: [_jsx(Typography, { id: `${id}-loader__message`, variant: "h3", children: "Loading... Please wait" }), _jsx(CircularProgress, { id: `${id}-loader__spinner`, size: "100px" })] }));

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

@@ -1,5 +1,8 @@
 import { CustomContentProps } from "notistack";
+import { JSX as ReactJSX, Ref } from "react";
 export interface SnackbarProps extends CustomContentProps {
     description: string;
 }
-export declare const Snackbar: import("react").ForwardRefExoticComponent<SnackbarProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Snackbar: ({ ref, description, hideIconVariant, iconVariant, id, message, variant, }: SnackbarProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactJSX.Element;