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

package/dist/components/Common/Snackbar.js

@@ -15,12 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import CloseIcon from "@mui/icons-material/Close";
-import { styled, useColorScheme } from "@mui/material";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
+import { alpha, styled, useTheme } from "@mui/material/styles";
 import { SnackbarContent, useSnackbar } from "notistack";
-import { forwardRef } from "react";
-import { isDarkMode } from "../../utils/Theme.js";
 // #region: Styled Components
 const IconBox = styled(Box)({
     position: "relative",
@@ -39,30 +37,24 @@ const IconBox = styled(Box)({
     },
 });
 // #endregion: Types
-// Passing Snackbar callback as a function because if we use an arrow function here we'd have to set displayName
-export const Snackbar = forwardRef(
-// eslint-disable-next-line prefer-arrow-callback
-function Snackbar({ description, hideIconVariant = false, iconVariant, id, message, variant }, ref) {
+export const Snackbar = ({ ref, description, hideIconVariant = false, iconVariant, id, message, variant, }) => {
     const { closeSnackbar } = useSnackbar();
     const handleCloseSnackbar = () => closeSnackbar(id);
     const icon = iconVariant[variant];
-    const { mode, systemMode } = useColorScheme();
-    const darkMode = isDarkMode(mode, systemMode);
-    // Temporary styling for implementation of dark mode
-    const darkModeStyling = {
-        backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",
-        color: darkMode ? "var(--bs-white)" : "var(--bs-primary)",
-    };
-    return (_jsx(SnackbarContent, { ref: ref, role: "alert", children: _jsxs(Box, { className: `${variant}-snackbar-notification`, id: `${id}-snackbar-box`, sx: {
-                ...darkModeStyling,
+    // Theming/Dark mode
+    const theme = useTheme();
+    const shadowColor = theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black;
+    return (_jsx(SnackbarContent, { ref: ref, role: "alert", children: _jsxs(Box, { className: `${variant}-snackbar-notification`, id: `${id}-snackbar-box`, "data-testid": `${id}-snackbar-box`, sx: {
+                background: theme.palette.background.paper,
                 borderColor: "transparent",
                 borderRadius: "var(--bs-border-radius)",
                 borderWidth: "1px",
-                boxShadow: `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 
-                                    0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
+                boxShadow: `0 6px 16px 0 ${alpha(shadowColor, 0.08)}, 0 3px 6px -4px ${alpha(shadowColor, 0.12)},
+                                            0 9px 28px 8px ${alpha(shadowColor, 0.05)}`,
                 maxWidth: "450px",
                 minWidth: "250px",
                 padding: "0.9rem",
+                paddingRight: "4rem",
             }, children: [!hideIconVariant && (_jsx(Box, { id: `${id}-snackbar-icon-box-container`, sx: { display: "inline-flex", flexDirection: "column" }, children: _jsx(IconBox, { className: variant, "data-testid": `${id}-snackbar-icon-box`, id: `${id}-snackbar-icon-box`, children: icon }) })), _jsxs(Box, { id: `${id}-snackbar-content-box`, sx: {
                         display: "inline-flex",
                         flexDirection: "column",
@@ -81,4 +73,4 @@ function Snackbar({ description, hideIconVariant = false, iconVariant, id, messa
                                     color: "var(--bs-gray-medium)",
                                     fontSize: "0.6em",
                                 } }) }), description && (_jsx(Box, { id: `${id}-snackbar-description-box`, sx: { fontSize: "0.8rem", paddingTop: "10px", paddingBottom: "10px" }, children: description }))] })] }) }));
-});
+};

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

@@ -1,4 +1,4 @@
-import { SnackbarKey, SnackbarOrigin } from "notistack";
+import { SnackbarOrigin } from "notistack";
 import { JSX as ReactJSX } from "react";
 export declare enum NotificationType {
     "success" = 0,
@@ -6,7 +6,7 @@ export declare enum NotificationType {
     "warning" = 2,
     "error" = 3
 }
-export declare function closeNotification(snackbarId?: SnackbarKey): void;
+export declare const closeNotification: () => void;
 /**
  * Convenience method to allow sending notifications to user with a one-liner.
  * Simply wraps @Notification function
@@ -15,4 +15,4 @@ export declare function closeNotification(snackbarId?: SnackbarKey): void;
  * @param description More complete description of the notification
  * @param placement Where to show notification. Defaults to top-right.
  */
-export declare function sendNotification(variantType: NotificationType, message: string, description?: string | ReactJSX.Element, placement?: SnackbarOrigin): void;
+export declare const sendNotification: (variantType: NotificationType, message: string, description?: string | ReactJSX.Element, placement?: SnackbarOrigin) => void;

package/dist/components/Common/notification.js

@@ -27,9 +27,9 @@ export var NotificationType;
 const ERROR_WARNING_NOTIFICATION_DURATION_MS = 15_000;
 // Display info notification popups for this many seconds
 const SUCCESS_NOTIFICATION_DURATION_MS = 5000;
-export function closeNotification(snackbarId) {
-    closeSnackbar(snackbarId);
-}
+export const closeNotification = () => {
+    closeSnackbar();
+};
 /**
  * Convenience method to allow sending notifications to user with a one-liner.
  * Simply wraps @Notification function
@@ -38,12 +38,12 @@ export function closeNotification(snackbarId) {
  * @param description More complete description of the notification
  * @param placement Where to show notification. Defaults to top-right.
  */
-export function sendNotification(variantType, message, description = "", 
+export const sendNotification = (variantType, message, description = "", 
 // eslint-disable-next-line unicorn/no-object-as-default-parameter
 placement = {
     vertical: "top",
     horizontal: "right",
-}) {
+}) => {
     // Log a copy to the console for troubleshooting
     const descriptionAsString = typeof description === "string" ? description : renderToString(description);
     console.debug(`Notification: Message: "${message}" Description: "${descriptionAsString}"`);
@@ -76,4 +76,4 @@ placement = {
         key: baseId,
         variant: NotificationType[variantType],
     });
-}
+};

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

@@ -14,7 +14,7 @@ interface ErrorBoundaryProps {
     readonly children: ReactNode;
 }
 /**
- * Implements a system-wide error handler for NextJS pages in our app.
+ * Implements a system-wide error handler for Next.js pages in our app.
  * Taken from here: https://nextjs.org/docs/advanced-features/error-handling
  *
  * Note: as of writing (April 2023) ReactJS does not support error boundaries for functional components (like all of
@@ -33,6 +33,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     };
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: unknown, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<ReactNode> | import("react").PromiseLikeOfReactNode | import("react/jsx-runtime").JSX.Element;
+    render(): ReactNode;
 }
 export {};

package/dist/components/ErrorPage/ErrorBoundary.js

@@ -17,7 +17,7 @@ limitations under the License.
 import { Component } from "react";
 import ErrorPage from "./ErrorPage.js";
 /**
- * Implements a system-wide error handler for NextJS pages in our app.
+ * Implements a system-wide error handler for Next.js pages in our app.
  * Taken from here: https://nextjs.org/docs/advanced-features/error-handling
  *
  * Note: as of writing (April 2023) ReactJS does not support error boundaries for functional components (like all of

package/dist/components/ErrorPage/ErrorPage.js

@@ -17,10 +17,11 @@ limitations under the License.
 import Box from "@mui/material/Box";
 import { useRouter } from "next/router.js";
 import { LOGO } from "../../const.js";
-import { useEnvironmentStore } from "../../state/environment.js";
+import { useEnvironmentStore } from "../../state/Environment.js";
 import { useUserInfoStore } from "../../state/UserInfo.js";
 import { smartSignOut, useAuthentication } from "../../utils/Authentication.js";
 import { NeuroAIBreadcrumbs } from "../Common/Breadcrumbs.js";
+import { Footer } from "../Common/Footer.js";
 import { Navbar } from "../Common/Navbar.js";
 /**
  * This is the page that will be shown to users when the outer error boundary is triggered
@@ -28,7 +29,7 @@ import { Navbar } from "../Common/Navbar.js";
  * @param errorText Error text to be displayed
  */
 export default function ErrorPage({ id, errorText }) {
-    const { auth0ClientId, auth0Domain, supportEmailAddress } = useEnvironmentStore();
+    const { auth0ClientId, auth0Domain, supportEmailAddress, logoServiceToken } = useEnvironmentStore();
     // Access NextJS router
     const router = useRouter();
     // Access user info store
@@ -36,11 +37,11 @@ export default function ErrorPage({ id, errorText }) {
     // Infer authentication type
     const authenticationType = currentUser ? `ALB using ${oidcProvider}` : "NextAuth";
     const { data: { user: userInfo } = {} } = useAuthentication();
-    async function handleSignOut() {
+    const handleSignOut = async () => {
         // Clear our state storage variables
         setCurrentUser(undefined);
         setPicture(undefined);
         await smartSignOut(currentUser, auth0Domain, auth0ClientId, oidcProvider);
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { id: "nav-bar", logo: LOGO, query: router.query, pathname: router.pathname, authenticationType: authenticationType, 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."] })] }));
+    };
+    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" })] }));
 }

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

@@ -0,0 +1,17 @@
+import { ChatMessage, ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+export interface AgentConversation {
+    agents: Set<string>;
+    id: string;
+    startedAt: Date;
+    text?: string;
+    type: ChatMessageType;
+}
+export declare const isFinalMessage: (chatMessage: {
+    structure?: {
+        tool_end?: boolean;
+        total_tokens?: number;
+    };
+    text?: string;
+}) => boolean;
+export declare const createConversation: (agents: string[], text: string, type: ChatMessageType) => AgentConversation;
+export declare const extractConversations: (chatMessage: ChatMessage, currentConversations: AgentConversation[] | null) => AgentConversation[] | null;

package/dist/components/MultiAgentAccelerator/AgentConversations.js

@@ -0,0 +1,77 @@
+/*
+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 { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+export const isFinalMessage = (chatMessage) => {
+    const isAgentFinalResponse = chatMessage.structure?.total_tokens;
+    const isCodedToolFinalResponse = chatMessage.structure?.tool_end;
+    return Boolean(isAgentFinalResponse || isCodedToolFinalResponse);
+};
+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(),
+    text,
+    type,
+});
+const processAgentCompletion = (conversations, tools) => {
+    const toolsToRemove = new Set(tools);
+    // For each conversation:
+    // 1) Remove all agents whose tool is in toolsToRemove
+    // 2) Only keep conversations that still have agents left
+    return (conversations
+        .map((conv) => {
+        // Remove all matching tools from this conversation's agents
+        const updatedAgents = new Set([...conv.agents].filter((agent) => !toolsToRemove.has(agent)));
+        // Return a new conversation object with updated agents
+        return { ...conv, agents: updatedAgents };
+    })
+        // Filter out conversations that have no agents left
+        .filter((conv) => conv.agents.size > 0));
+};
+export const extractConversations = (chatMessage, currentConversations) => {
+    const updatedConversations = [...(currentConversations || [])];
+    // If there are no origins in a chat message, return current state
+    if (!chatMessage?.origin?.length) {
+        return currentConversations;
+    }
+    const isFinal = isFinalMessage(chatMessage);
+    const agents = chatMessage.origin.map((originItem) => originItem.tool).filter(Boolean);
+    let finalConversations;
+    // Check if this is an AGENT message and if it's a final message, i.e. an end event (could be an AGENT final
+    // message or coded tool end, see isFinalMessage function)
+    if (chatMessage.type === ChatMessageType.AGENT && isFinal) {
+        const currentConversationsToUpdate = processAgentCompletion(updatedConversations, agents);
+        finalConversations = currentConversationsToUpdate.length === 0 ? [] : currentConversationsToUpdate;
+    }
+    else {
+        // Create a new conversation for this communication path
+        let inquiryText;
+        const params = chatMessage.structure?.["params"];
+        if (params && typeof params === "object" && "inquiry" in params) {
+            inquiryText = params.inquiry;
+        }
+        const textToShow = inquiryText || chatMessage.text;
+        // Show inquiry (from structure), that's only for networks that use AAOSA with a JSON format.
+        // Otherwise, show the raw data from the `text` field of the chat message.
+        const newConversation = createConversation(agents, textToShow, chatMessage.type);
+        updatedConversations.push(newConversation);
+        finalConversations = updatedConversations;
+    }
+    return finalConversations;
+};

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

@@ -0,0 +1,12 @@
+import { Origin } from "../../generated/neuro-san/NeuroSanClient.js";
+/**
+ * Given a map of agent counts and a list of origins, return an updated map of agent counts that includes the
+ * counts from the origins.
+ * @param agentCountsMap Existing map of agent counts, where the key is the agent name and the value is the
+ * count of that agent.
+ * @param origins List of origins, where each origin has a "tool" property that corresponds to an agent name.
+ * @return Updated map of agent counts that includes counts from the origins. If an agent from the origins is not
+ * already in the map, it will be added with a count of 1. If it is already in the map, its count will be
+ * incremented by 1.
+ */
+export declare const getUpdatedAgentCounts: (agentCountsMap: Map<string, number>, origins: readonly Origin[]) => Map<string, number>;

package/dist/components/MultiAgentAccelerator/AgentCounts.js

@@ -0,0 +1,21 @@
+/**
+ * Given a map of agent counts and a list of origins, return an updated map of agent counts that includes the
+ * counts from the origins.
+ * @param agentCountsMap Existing map of agent counts, where the key is the agent name and the value is the
+ * count of that agent.
+ * @param origins List of origins, where each origin has a "tool" property that corresponds to an agent name.
+ * @return Updated map of agent counts that includes counts from the origins. If an agent from the origins is not
+ * already in the map, it will be added with a count of 1. If it is already in the map, its count will be
+ * incremented by 1.
+ */
+export const getUpdatedAgentCounts = (agentCountsMap, origins) => {
+    if (!origins?.length) {
+        // If there are no origins, return the existing counts map without modification
+        return agentCountsMap;
+    }
+    return origins.reduce((acc, { tool }) => {
+        // If the agent is not already in the counts map, initialize it to 0 aka "upsert"
+        acc.set(tool, (acc.get(tool) || 0) + 1);
+        return acc;
+    }, new Map(agentCountsMap));
+};

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

@@ -1,20 +1,22 @@
 import { Dispatch, FC, SetStateAction } from "react";
-import { Edge, EdgeProps } from "reactflow";
+import { AgentConversation } from "./AgentConversations.js";
+import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
+import { AgentIconSuggestions } from "../../controller/Types/AgentIconSuggestions.js";
 import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
-import { AgentConversation } from "../../utils/agentConversations.js";
 export interface AgentFlowProps {
     readonly agentCounts?: Map<string, number>;
+    readonly agentIconSuggestions?: AgentIconSuggestions;
     readonly agentsInNetwork: ConnectivityInfo[];
     readonly currentConversations?: AgentConversation[] | null;
     readonly id: string;
     readonly isAwaitingLlm?: boolean;
     readonly isStreaming?: boolean;
     readonly thoughtBubbleEdges: Map<string, {
-        edge: Edge<EdgeProps>;
+        edge: ThoughtBubbleEdgeShape;
         timestamp: number;
     }>;
     readonly setThoughtBubbleEdges: Dispatch<SetStateAction<Map<string, {
-        edge: Edge<EdgeProps>;
+        edge: ThoughtBubbleEdgeShape;
         timestamp: number;
     }>>>;
 }