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

package/dist/components/AgentChat/ChatCommon/SendButton.js

@@ -15,14 +15,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import SendIcon from "@mui/icons-material/Send";
+import Tooltip from "@mui/material/Tooltip";
 import { LlmChatButton } from "../Common/LlmChatButton.js";
-// #endregion: Types
+//#endregion: Types
 /**
  * Generate the Send Button for a chat window.
  * @returns The Send Button.
  */
-export const SendButton = ({ enableSendButton, id, onClickCallback }) => (_jsx(LlmChatButton, { "aria-label": "Send", disabled: !enableSendButton, id: id, onClick: onClickCallback, sx: {
-        padding: "0.6rem",
-        position: "relative",
-    }, tabIndex: 0, children: _jsx(SendIcon, { fontSize: "small", id: "stop-button-icon" // Could update this but it would impact QA
-        , sx: { color: "var(--bs-white)" } }) }));
+export const SendButton = ({ enableSendButton, id, onClickCallback }) => (_jsx(Tooltip, { placement: "top", title: enableSendButton ? "Send" : "Enter a message to enable the send button", children: _jsx("span", { style: {
+            display: "inline-block",
+            cursor: enableSendButton ? "inherit" : "not-allowed",
+        }, children: _jsx(LlmChatButton, { "aria-label": "Send", disabled: !enableSendButton, id: id, onClick: onClickCallback, tabIndex: 0, children: _jsx(SendIcon, { fontSize: "small", id: "stop-button-icon" // Could update this but it would impact QA
+             }) }) }) }));

package/dist/components/AgentChat/ChatCommon/SyntaxHighlighterThemes.js

@@ -17,7 +17,7 @@ limitations under the License.
  * List of available hljs themes for the syntax highlighter.
  * See: https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/hljs/index.js
  */
-import { a11yDark, a11yLight, atelierDuneDark, docco } from "react-syntax-highlighter/dist/cjs/styles/hljs/index.js";
+import { a11yDark, a11yLight, atelierDuneDark, docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
 // hljs themes
 export const HLJS_THEMES = {
     a11yDark,

package/dist/components/AgentChat/ChatCommon/Thinking.d.ts

@@ -3,6 +3,7 @@ import { ConversationTurn } from "./ConversationTurn.js";
 interface ThinkingProps {
     readonly id: string;
     readonly turns: ConversationTurn[];
+    readonly useNativeNames: boolean;
 }
 /**
  * Component to render the "thinking" section of the chat, which includes all messages from the agent that are

package/dist/components/AgentChat/ChatCommon/Thinking.js

@@ -6,6 +6,7 @@ import ReactMarkdown from "react-markdown";
 import { MessageRole } from "./ConversationTurn.js";
 import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 import { AccordionLite } from "../../Common/AccordionLite.js";
+import { cleanUpAgentName, removeTrailingUuid } from "../Common/Utils.js";
 /**
  * Set of message types that should be included in the "thinking" section.
  */
@@ -15,17 +16,19 @@ const THINKING_MESSAGE_TYPES = new Set([
     ChatMessageType.AGENT_PROGRESS,
     ChatMessageType.SYSTEM,
 ]);
-const DEFAULT_AGENT_NAME = "Agent";
-const formatTurn = (turn) => {
-    const headerLine = `**${turn.agentName ?? DEFAULT_AGENT_NAME}**: ${turn.text || ""}`;
-    const structureLine = turn.structure != null ? `\n\`${JSON.stringify(turn.structure, null, 2)}\`` : "";
+const DEFAULT_AGENT_NAME = "agent";
+const formatTurn = (turn, useNativeNames) => {
+    const agentName = turn.agentName ?? DEFAULT_AGENT_NAME;
+    const displayName = useNativeNames ? agentName : cleanUpAgentName(removeTrailingUuid(agentName));
+    const headerLine = `**${displayName}**: ${turn.text || ""}`;
+    const structureLine = turn.structure == null ? "" : `\n\`${JSON.stringify(turn.structure, null, 2)}\``;
     return `${headerLine}${structureLine}`;
 };
 /**
  * Component to render the "thinking" section of the chat, which includes all messages from the agent that are
  * of a type included in THINKING_MESSAGE_TYPES.
  */
-export const Thinking = ({ id, turns }) => {
+export const Thinking = ({ id, turns, useNativeNames }) => {
     const thinkingText = useMemo(() => {
         // Find start of latest interaction (most recent user prompt)
         const lastUserTurnIndex = turns.map((t) => t.role).lastIndexOf(MessageRole.User);
@@ -35,9 +38,9 @@ export const Thinking = ({ id, turns }) => {
             .slice(lastUserTurnIndex + 1)
             .filter((turn) => THINKING_MESSAGE_TYPES.has(turn.messageType))
             .filter((turn) => turn.text?.trim().length > 0 || !isEmpty(turn.structure))
-            .map((turn) => formatTurn(turn))
+            .map((turn) => formatTurn(turn, useNativeNames))
             .join("\n\n");
-    }, [turns]);
+    }, [turns, useNativeNames]);
     return (thinkingText.length > 0 && (_jsx(AccordionLite, { id: `${id}-thinking`, items: _jsx(Box, { sx: {
                 marginLeft: "0.5rem",
                 fontSize: "smaller",

package/dist/components/AgentChat/Common/LlmChatButton.d.ts

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

package/dist/components/AgentChat/Common/LlmChatButton.js

@@ -15,17 +15,14 @@ limitations under the License.
 */
 import Button from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
-// #endregion: Types
-export const LlmChatButton = styled(Button, {
-    shouldForwardProp: (prop) => !["posRight", "posBottom"].includes(String(prop)),
-})(({ theme, disabled, posRight, posBottom }) => ({
-    background: `${theme.palette.primary.main} !important`,
+//#endregion: Types
+// In LlmChatButton.tsx
+export const LlmChatButton = styled(Button)(({ disabled, theme }) => ({
+    backgroundColor: theme.palette.background.paper,
     borderRadius: "var(--bs-border-radius)",
-    bottom: posBottom !== undefined ? posBottom : 0,
-    cursor: disabled ? "default" : "pointer",
+    cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? "50%" : "100%",
-    right: posRight !== undefined ? posRight : 0,
-    position: "absolute",
+    padding: "0.5rem",
 }));
 export const SmallLlmChatButton = styled(LlmChatButton)({
     minWidth: 0,

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

@@ -19,7 +19,7 @@ import MicOffIcon from "@mui/icons-material/MicOff";
 import Tooltip from "@mui/material/Tooltip";
 import { checkSpeechSupport, toggleListening } from "./VoiceChat.js";
 import { LlmChatButton } from "../Common/LlmChatButton.js";
-// #endregion: Types
+//#endregion: Types
 /**
  * Microphone button component for voice input functionality.
  * Handles toggling voice recognition on/off and displays appropriate visual feedback.
@@ -42,14 +42,16 @@ export const MicrophoneButton = ({ isMicOn, onMicToggle, speechRecognitionRef, v
         await toggleListening(newMicState, speechRecognitionRef.current);
     };
     const isDisabled = !speechSupported;
-    const tooltipText = !speechSupported
-        ? "Voice input is only supported in Google Chrome on Mac or Windows."
-        : isMicOn
+    const tooltipText = speechSupported
+        ? isMicOn
             ? "Turn microphone off"
-            : "Turn microphone on";
-    return (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { style: { display: "inline-block", height: 50, width: 64 }, children: _jsx(LlmChatButton, { "data-testid": "microphone-button", disabled: isDisabled, id: "microphone-button", onClick: handleClick, sx: {
-                    padding: "0.5rem",
-                    right: 70,
-                    backgroundColor: isMicOn && voiceInputState.isListening ? "var(--bs-success)" : "var(--bs-secondary)",
-                }, tabIndex: 0, children: voiceInputState.isListening ? (_jsx(MicNoneIcon, { sx: { color: "var(--bs-white)" }, "data-testid": "MicNoneIcon" })) : (_jsx(MicOffIcon, { sx: { color: "var(--bs-white)" }, "data-testid": "MicOffIcon" })) }) }) }));
+            : "Turn microphone on"
+        : "Voice input is only supported in Google Chrome on Mac or Windows.";
+    const isListeningActive = isMicOn && voiceInputState.isListening;
+    return (_jsx(Tooltip, { placement: "top", title: tooltipText, children: _jsx("span", { style: {
+                display: "inline-block",
+                cursor: isDisabled ? "not-allowed" : "inherit",
+            }, children: _jsx(LlmChatButton, { "data-testid": "microphone-button", disabled: isDisabled, id: "microphone-button", onClick: handleClick, sx: {
+                    backgroundColor: isListeningActive ? "success.main" : "background.paper",
+                }, tabIndex: 0, children: voiceInputState.isListening ? (_jsx(MicNoneIcon, { "data-testid": "MicNoneIcon", fontSize: "small" })) : (_jsx(MicOffIcon, { "data-testid": "MicOffIcon", fontSize: "small" })) }) }) }));
 };

package/dist/components/ChatBot/ChatBot.d.ts

@@ -4,10 +4,6 @@ interface ChatBotProps {
      * id HTML id to use for the outer component
      */
     readonly id: string;
-    /**
-     * Path to image for user avatar
-     */
-    readonly userAvatar: string;
     /**
      * Text about current page to help the LLM respond intelligently
      */

package/dist/components/ChatBot/ChatBot.js

@@ -29,7 +29,7 @@ import { LegacyAgentType } from "../AgentChat/Common/Types.js";
  * Site-wide Chatbot component.
  */
 // Temporarily disabled but will be used once we migrated the backend to use Neuro-san RAG.
-export const ChatBot = ({ id, userAvatar, pageContext }) => {
+export const ChatBot = ({ id, pageContext }) => {
     const [chatOpen, setChatOpen] = useState(false);
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
     const { user: { name: currentUser }, } = useAuthentication().data;
@@ -51,7 +51,7 @@ export const ChatBot = ({ id, userAvatar, pageContext }) => {
                         borderWidth: 1,
                         borderColor: darkMode ? "var(--bs-white)" : "var(--bs-gray-light)",
                         zIndex: getZIndex(2, theme),
-                    }, children: _jsx(ChatCommon, { id: "chatbot-window", currentUser: currentUser, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, targetAgent: LegacyAgentType.ChatBot, userImage: userAvatar, legacyAgentEndpoint: CHATBOT_ENDPOINT, extraParams: { pageContext }, backgroundColor: darkMode ? "var(--bs-gray-dark)" : "var(--bs-tertiary-blue)", title: "Cognizant Neuro AI Assistant", onClose: () => setChatOpen(false) }) }) }), !chatOpen && (_jsx(Box, { id: `chatbot-icon-${id}`, sx: {
+                    }, children: _jsx(ChatCommon, { id: "chatbot-window", currentUser: currentUser, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, selectedNetwork: LegacyAgentType.ChatBot, legacyAgentEndpoint: CHATBOT_ENDPOINT, extraParams: { pageContext }, backgroundColor: darkMode ? "var(--bs-gray-dark)" : "var(--bs-tertiary-blue)", title: "Cognizant Neuro AI Assistant", onClose: () => setChatOpen(false) }) }) }), !chatOpen && (_jsx(Box, { id: `chatbot-icon-${id}`, sx: {
                     display: "flex",
                     alignItems: "center",
                     backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",

package/dist/components/Common/Navbar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
 Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
 
@@ -18,6 +18,7 @@ limitations under the License.
  * Main navigation bar that appears at the top of each page
  */
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Business from "@mui/icons-material/Business";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
 import SettingsIcon from "@mui/icons-material/Settings";
 import Box from "@mui/material/Box";
@@ -28,14 +29,14 @@ 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 { useState } from "react";
 import { ConfirmationModal } from "./ConfirmationModal.js";
-import { CustomerLogo, getCognizantLogoImage } from "./CustomerLogo.js";
-import { LoadingSpinner } from "./LoadingSpinner.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 { getCognizantLogoImage } from "../Logo/Common.js";
+import { CustomerLogo } from "../Logo/CustomerLogo.js";
 import { SettingsDialog } from "../Settings/SettingsDialog.js";
 const MENU_ITEM_TEXT_PROPS = {
     color: "var(--bs-white)",
@@ -58,12 +59,6 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
     // Dark mode
     const { mode, setMode, systemMode } = useColorScheme();
     const darkMode = isDarkMode(mode, systemMode);
-    // Gate to make sure we only attempt to render after Next.js has completed its rehydration
-    const [hydrated, setHydrated] = useState(false);
-    useEffect(() => {
-        // Indicate that the component has been hydrated
-        setHydrated(true);
-    }, []);
     // Help menu wiring
     const [helpMenuAnchorEl, setHelpMenuAnchorEl] = useState(null);
     const helpMenuOpen = Boolean(helpMenuAnchorEl);
@@ -88,18 +83,25 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
     const customer = useSettingsStore((state) => state.settings.branding.customer);
     const primary = useSettingsStore((state) => state.settings.branding.primary);
     const hasCustomer = customer?.trim().length > 0;
-    return hydrated ? (_jsxs(Grid, { id: "nav-bar-container", container: true, sx: {
+    // Logo settings
+    const iconSuggestion = useSettingsStore((state) => state.settings.branding.iconSuggestion);
+    const logoSource = useSettingsStore((state) => state.settings.branding.logoSource);
+    return (_jsxs(Grid, { id: "nav-bar-container", container: true, sx: {
             alignItems: "center",
             ...MENU_ITEM_TEXT_PROPS,
             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 }), hasCustomer && (_jsx(Typography, { "data-testid": "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: [hasCustomer ? getCognizantLogoImage() : null, _jsx(Typography, { id: "nav-bar-brand", sx: {
+        }, children: [settingsDialogOpen && (_jsx(SettingsDialog, { id: "settings-dialog", isOpen: settingsDialogOpen, logoServiceToken: logoServiceToken, onClose: () => setSettingsDialogOpen(false) })), _jsx(Box, { sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    gap: 2,
+                }, children: hasCustomer ? (_jsxs(_Fragment, { children: [_jsx(CustomerLogo, { customer: customer, fallbackIcon: Business, iconSuggestion: iconSuggestion, logoServiceToken: logoServiceToken, logoSource: logoSource }), _jsx(Typography, { "data-testid": "customer-branding", sx: {
+                                fontSize: "20px",
+                                fontWeight: "600",
+                                paddingLeft: "0.15rem",
+                                width: "200px",
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: customer })] })) : (getCognizantLogoImage()) }), _jsxs(Grid, { id: id, sx: { display: "flex", alignItems: "center" }, children: [hasCustomer ? getCognizantLogoImage() : null, _jsx(Typography, { id: "nav-bar-brand", sx: {
                             ...MENU_ITEM_TEXT_PROPS,
                             marginLeft: "0.85rem",
                             fontSize: "16px",
@@ -125,13 +127,13 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
                             alignItems: "center",
                         }, onClick: (event) => {
                             setExploreMenuAnchorEl(event.currentTarget);
-                        }, 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: {
+                        }, 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", rel: "noopener noreferrer", sx: { ...DISABLE_OUTLINE_PROPS }, target: "_blank", 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", rel: "noopener noreferrer", sx: { ...DISABLE_OUTLINE_PROPS }, target: "_blank", 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: 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, { id: "take-a-tour", onClick: () => {
+                        }, 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", rel: "noopener noreferrer", sx: { ...DISABLE_OUTLINE_PROPS }, target: "_blank", children: "User guide" }, "user-guide"), _jsx(MenuItem, { id: "take-a-tour", onClick: () => {
                                     handleCloseHelpMenu();
                                     onStartTour?.();
                                 }, sx: { ...DISABLE_OUTLINE_PROPS }, children: "Take a tour" }, "take-a-tour"), _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: () => {
@@ -163,5 +165,5 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStart
                         cursor: "pointer",
                     }, onClick: () => {
                         setSettingsDialogOpen(true);
-                    } }) }))] })) : (_jsx(LoadingSpinner, { id: "navbar-loading-spinner" }));
+                    } }) }))] }));
 };

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

@@ -0,0 +1,9 @@
+import { FC, ReactElement } from "react";
+type Status = "green" | "red" | "unknown";
+interface StatusLightProps {
+    readonly id?: string;
+    readonly statusValue: Status;
+    readonly tooltip?: ReactElement;
+}
+export declare const StatusLight: FC<StatusLightProps>;
+export {};

package/dist/components/Common/StatusLight.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Tooltip from "@mui/material/Tooltip";
+const statusToColor = (statusValue) => {
+    switch (statusValue) {
+        case "green":
+            return "success.main";
+        case "red":
+            return "error.main";
+        case "unknown":
+        default:
+            return "action.disabled";
+    }
+};
+export const StatusLight = ({ id, statusValue, tooltip }) => (_jsx(Tooltip, { title: tooltip, placement: "top", children: _jsx(Box, { id: id, "data-testid": id, "data-status": statusValue, sx: {
+            backgroundColor: statusToColor(statusValue),
+            borderRadius: "50%",
+            display: "inline-block",
+            minWidth: "0.75rem",
+            minHeight: "0.75rem",
+        } }) }));

package/dist/components/ErrorPage/ErrorBoundary.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { Component } from "react";
-import ErrorPage from "./ErrorPage.js";
+import { default as ErrorPage } from "./ErrorPage.js";
 /**
  * Implements a system-wide error handler for Next.js pages in our app.
  * Taken from here: https://nextjs.org/docs/advanced-features/error-handling

package/dist/components/ErrorPage/ErrorPage.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { FC } from "react";
 interface ErrorPageProps {
     id: string;
     errorText: string;
@@ -8,5 +8,5 @@ interface ErrorPageProps {
  * @param id HTML id for the <code>div</code> for this page
  * @param errorText Error text to be displayed
  */
-export default function ErrorPage({ id, errorText }: ErrorPageProps): ReactElement;
-export {};
+declare const ErrorPage: FC<ErrorPageProps>;
+export default ErrorPage;

package/dist/components/ErrorPage/ErrorPage.js

@@ -28,9 +28,9 @@ import { Navbar } from "../Common/Navbar.js";
  * @param id HTML id for the <code>div</code> for this page
  * @param errorText Error text to be displayed
  */
-export default function ErrorPage({ id, errorText }) {
+const ErrorPage = ({ id, errorText }) => {
     const { auth0ClientId, auth0Domain, supportEmailAddress, logoServiceToken } = useEnvironmentStore();
-    // Access NextJS router
+    // Access Next.js router
     const router = useRouter();
     // Access user info store
     const { currentUser, setCurrentUser, setPicture, oidcProvider } = useUserInfoStore();
@@ -44,4 +44,5 @@ export default function ErrorPage({ id, errorText }) {
         await smartSignOut(currentUser, auth0Domain, auth0ClientId, oidcProvider);
     };
     return (_jsxs(_Fragment, { children: [_jsx(Navbar, { authenticationType: authenticationType, id: "nav-bar", logo: LOGO, logoServiceToken: logoServiceToken, pathname: router.pathname, query: router.query, signOut: handleSignOut, supportEmailAddress: supportEmailAddress, userInfo: userInfo }), _jsxs(Box, { id: id, sx: { marginLeft: "1rem" }, children: [_jsx(NeuroAIBreadcrumbs, {}), _jsx("h4", { id: "error-header", style: { color: "var(--bs-red)", marginTop: "1rem" }, children: "Oops, an internal error occurred on our end." }), _jsxs("div", { id: "error-div-1", children: [_jsxs(Box, { id: "no-need-to-worry", sx: { marginBottom: "1.5rem" }, children: [_jsx("b", { id: "bold-1", children: "There's no need to worry \u2013 you didn't do anything wrong." }), " This is a bug in our server and we'll fix it as soon as possible."] }), _jsx(Box, { id: "try-these-steps", sx: { marginBottom: "1.5rem" }, children: "To attempt to recover from the error, try these steps:" }), _jsx(Box, { id: "refresh-page", sx: { marginBottom: "1.5rem" }, children: _jsxs("ul", { id: "error-boundary-advice-list", className: "list-decimal list-inside", children: [_jsx("li", { id: "error-advice-refresh", children: "Refresh the page to see if the error goes away." }), _jsx("li", { id: "error-advice-reload", children: "Close and re-open your browser, then navigate back to the page where you encountered the error." })] }) }), "If none of that helps, please report the following error to the LEAF team:"] }), _jsx("div", { id: "error-text-div", style: { fontFamily: "monospace", marginTop: "1.5rem", marginBottom: "1.5rem" }, children: errorText }), "More information may be available in the browser console. Please include such information in your report if possible."] }), _jsx(Footer, { supportEmailAddress: supportEmailAddress, logoLinkUrl: "https://www.cognizant.com/", logoUrl: "/cognizant-logo-white.svg" })] }));
-}
+};
+export default ErrorPage;

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

@@ -0,0 +1,4 @@
+/**
+ * Returns the Cognizant logo with a link to the corporate website.
+ */
+export declare const getCognizantLogoImage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/Common.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Returns the Cognizant logo with a link to the corporate 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" }) }));

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

@@ -0,0 +1,23 @@
+import { SvgIconProps } from "@mui/material/SvgIcon";
+import { FC } from "react";
+import { LogoSource } from "../../state/Settings.js";
+interface CustomerLogoProps {
+    readonly customer: string;
+    readonly fallbackIcon?: FC<SvgIconProps>;
+    readonly iconSuggestion?: string;
+    readonly logoServiceToken?: string;
+    readonly logoSource: LogoSource;
+}
+export declare const LOGO_DEV_URL = "https://img.logo.dev/name";
+/**
+ * Component to display the customer's logo based on the settings.
+ * @param customer - Name of the customer, used for fetching the logo from logo.dev when logoSource is "auto"
+ * @param fallbackIcon - Optional MUI icon to use as a fallback if other approaches fail
+ * @param iconSuggestion - Optional MUI icon name to use when logoSource is "generic"
+ * @param logoServiceToken - Optional token for fetching the logo from logo.dev
+ * @param logoSource - Source of the logo, determines how the logo is rendered ("none", "generic", or "auto")
+ * @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/Logo/CustomerLogo.js

@@ -0,0 +1,41 @@
+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";
+//#endregion
+export const LOGO_DEV_URL = "https://img.logo.dev/name";
+/**
+ * Component to display the customer's logo based on the settings.
+ * @param customer - Name of the customer, used for fetching the logo from logo.dev when logoSource is "auto"
+ * @param fallbackIcon - Optional MUI icon to use as a fallback if other approaches fail
+ * @param iconSuggestion - Optional MUI icon name to use when logoSource is "generic"
+ * @param logoServiceToken - Optional token for fetching the logo from logo.dev
+ * @param logoSource - Source of the logo, determines how the logo is rendered ("none", "generic", or "auto")
+ * @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 = ({ customer, fallbackIcon: FallbackIcon, iconSuggestion, logoServiceToken, logoSource, }) => {
+    const hasCustomer = customer?.trim()?.length > 0;
+    const fallback = FallbackIcon ? _jsx(FallbackIcon, { sx: { fontSize: "2rem" } }) : null;
+    // "generic": check if suggested MUI icon is valid
+    switch (logoSource) {
+        case "generic": {
+            const MuiIcon = MuiIcons[iconSuggestion];
+            const LogoIcon = MuiIcon ?? FallbackIcon;
+            return LogoIcon ? _jsx(LogoIcon, { sx: { fontSize: "2rem" } }) : null;
+        }
+        case "auto": {
+            if (!hasCustomer || !logoServiceToken || logoServiceToken.trim().length === 0) {
+                return fallback;
+            }
+            // "auto": use logo.dev service
+            // eslint-disable-next-line max-len -- better to keep URL together
+            const logoUrl = `${LOGO_DEV_URL}/${encodeURIComponent(customer)}?token=${logoServiceToken}&theme=dark&format=png&size=75`;
+            return (_jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } }));
+        }
+        case "none":
+            return null;
+        default:
+            return fallback;
+    }
+};

package/dist/components/MultiAgentAccelerator/AgentConversations.js

@@ -22,7 +22,6 @@ export const isFinalMessage = (chatMessage) => {
 export const createConversation = (agents, text, type) => ({
     // Could use crypto.randomUUID, but it's only available under HTTPS, and don't want to use a different
     // solution for HTTP on localhost.
-    // eslint-disable-next-line newline-per-chained-call
     id: `conv_${Date.now()}${Math.random().toString(36).slice(2, 10)}`,
     agents: new Set(agents),
     startedAt: new Date(),