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

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -18,21 +18,27 @@ limitations under the License.
 // eslint-disable-next-line no-restricted-imports
 import * as MuiIcons from "@mui/icons-material";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import EditIcon from "@mui/icons-material/Edit";
 import HandymanIcon from "@mui/icons-material/Handyman";
 import PersonIcon from "@mui/icons-material/Person";
 import TravelExploreIcon from "@mui/icons-material/TravelExplore";
+import IconButton from "@mui/material/IconButton";
 import { keyframes, styled, useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { Handle, Position } from "@xyflow/react";
-import { DISPLAY_AS_CODED_TOOL, DISPLAY_AS_EXTERNAL_AGENT, DISPLAY_AS_LANGCHAIN_TOOL, DISPLAY_AS_LLM_AGENT, isEditableAgent, } from "./const.js";
+import { useState } from "react";
+import { DisplayAs } from "./const.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { usePalette } from "../../Theme/Palettes.js";
 import { isLightColor } from "../../Theme/Theme.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
+// A zero-width space character, used to give the browser a hint where to break long names
+const ZERO_WIDTH_SPACE = "\u200B";
 // Node dimensions
 export const NODE_HEIGHT = 100;
 export const NODE_WIDTH = 100;
+export const FRONTMAN_SIZE_MULTIPLIER = 1.25;
 // Icon sizes
 // These are used to set the size of the icons displayed in the agent nodes.
 const AGENT_ICON_SIZE = "2.25rem";
@@ -82,11 +88,11 @@ export const AgentNode = (props) => {
     const palette = usePalette();
     // Unpack the node-specific data
     const data = props.data;
-    const { agentCounts, agentName, depth, displayAs, getConversations, agentIconSuggestion, isAwaitingLlm, isTemporaryNetwork, } = data;
+    const { agentCounts, agentName, depth, displayAs, getConversations, agentIconSuggestion, isAwaitingLlm, isEditable } = data;
     // Determine if this is the Frontman node (depth 0)
     const isFrontman = depth === 0;
     // Determine max agent count for heatmap scaling
-    const maxAgentCount = agentCounts ? Math.max(...Array.from(agentCounts.values())) : 0;
+    const maxAgentCount = agentCounts ? Math.max(...agentCounts.values()) : 0;
     // Unpack the node-specific id
     const agentId = props.id;
     // "Active" agents are those at either end of the current communication from the incoming chat messages.
@@ -134,13 +140,13 @@ export const AgentNode = (props) => {
             }
             else {
                 switch (displayAs) {
-                    case DISPLAY_AS_EXTERNAL_AGENT:
+                    case DisplayAs.EXTERNAL_AGENT:
                         return (_jsx(TravelExploreIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
                     // This should be a supported type but we're not seeing it?
-                    case DISPLAY_AS_LANGCHAIN_TOOL:
-                    case DISPLAY_AS_CODED_TOOL:
+                    case DisplayAs.LANGCHAIN_TOOL:
+                    case DisplayAs.CODED_TOOL:
                         return (_jsx(HandymanIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
-                    case DISPLAY_AS_LLM_AGENT:
+                    case DisplayAs.LLM_AGENT:
                     default:
                         return (_jsx(AutoAwesomeIcon, { id: id, sx: { fontSize: AGENT_ICON_SIZE } }));
                 }
@@ -153,25 +159,55 @@ export const AgentNode = (props) => {
     const glowColor = isLightColor(theme.palette.background.default)
         ? theme.palette.common.black
         : theme.palette.common.white;
-    const isClickableNode = isTemporaryNetwork && isEditableAgent(displayAs);
-    return (_jsxs(_Fragment, { children: [_jsxs(AnimatedNode, { id: agentId, "data-testid": agentId, glowColor: glowColor, isActive: isActiveAgent, sx: {
-                    backgroundColor,
-                    color,
-                    cursor: isClickableNode ? "pointer" : "grab",
-                    height: NODE_HEIGHT * (isFrontman ? 1.25 : 1.0),
-                    width: NODE_WIDTH * (isFrontman ? 1.25 : 1.0),
-                    zIndex: getZIndex(1, theme),
-                }, children: [getDisplayAsIcon(), _jsx(Handle, { id: `${agentId}-left-handle`, position: Position.Left, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-right-handle`, position: Position.Right, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-top-handle`, position: Position.Top, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-bottom-handle`, position: Position.Bottom, type: "source", style: { visibility: handleVisibility } })] }), _jsx(Tooltip, { id: `${agentId}-tooltip`, title: agentName, placement: "top", disableInteractive: true, children: _jsx(Typography, { id: `${agentId}-name`, sx: {
-                        display: "-webkit-box",
-                        fontSize: "18px",
-                        fontWeight: "bold",
-                        lineHeight: "1.4em",
-                        overflow: "hidden",
-                        textAlign: "center",
-                        textOverflow: "ellipsis",
-                        WebkitBoxOrient: "vertical",
-                        WebkitLineClamp: 2,
-                        width: `${NODE_WIDTH}px`,
-                        zIndex: 10,
-                    }, children: agentName }) })] }));
+    const [isHovered, setIsHovered] = useState(false);
+    const wrappedAgentName = agentName
+        // Allow wrap after underscore
+        .replaceAll("_", `_${ZERO_WIDTH_SPACE}`)
+        // Allow wrap before capitals in camel/PascalCase (e.g., CustomerSupport -> Customer|Support)
+        .replaceAll(/(?<lower>[\da-z])(?<upper>[A-Z])/gu, `$<lower>${ZERO_WIDTH_SPACE}$<upper>`)
+        // Also split abbreviation->word boundary (e.g., HTTPServer -> HTTP|Server), but not H|T|T|P
+        .replaceAll(/(?<abbr>[A-Z])(?<word>[A-Z][a-z])/gu, `$<abbr>${ZERO_WIDTH_SPACE}$<word>`);
+    const height = NODE_HEIGHT * (isFrontman ? FRONTMAN_SIZE_MULTIPLIER : 1.0);
+    const width = height;
+    const getEditButton = () => (_jsx(Tooltip, { title: "Edit", placement: "top", disableInteractive: true, children: _jsx(IconButton, { sx: {
+                position: "absolute",
+                top: 0,
+                right: 0,
+                backgroundColor: "rgba(0,0,0,0.45)",
+                borderRadius: "50%",
+                padding: "3px",
+                zIndex: 2,
+                cursor: "pointer",
+                "&:hover": { backgroundColor: "rgba(0,0,0,0.65)" },
+            }, children: _jsx(EditIcon, { id: `${agentId}-edit-icon`, sx: { fontSize: "1rem", color: "white" } }) }) }));
+    const getNodeName = () => (_jsx(Tooltip, { id: `${agentId}-tooltip`, title: agentName, placement: "top", disableInteractive: true, children: _jsx(Typography, { id: `${agentId}-name`, sx: {
+                backgroundColor: theme.palette.background.paper,
+                border: `1px solid ${theme.palette.divider}`,
+                borderRadius: 1,
+                color: theme.palette.text.primary,
+                display: "-webkit-box",
+                fontSize: "16px",
+                fontWeight: "700",
+                marginTop: "0.5rem",
+                overflow: "hidden",
+                overflowWrap: "anywhere",
+                paddingLeft: 0.75,
+                paddingRight: 0.75,
+                paddingBottom: 0.45,
+                paddingTop: 0.45,
+                textAlign: "center",
+                WebkitBoxOrient: "vertical",
+                WebkitLineClamp: 4,
+                width,
+                zIndex: getZIndex(1, theme),
+            }, children: wrappedAgentName }) }));
+    const getNode = () => (_jsxs(AnimatedNode, { id: agentId, "data-testid": agentId, glowColor: glowColor, isActive: isActiveAgent, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), sx: {
+            backgroundColor,
+            color,
+            cursor: isEditable ? "pointer" : "grab",
+            height,
+            width,
+            zIndex: getZIndex(1, theme),
+        }, children: [getDisplayAsIcon(), isHovered && isEditable && getEditButton(), _jsx(Handle, { id: `${agentId}-left-handle`, position: Position.Left, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-right-handle`, position: Position.Right, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-top-handle`, position: Position.Top, type: "source", style: { visibility: handleVisibility } }), _jsx(Handle, { id: `${agentId}-bottom-handle`, position: Position.Bottom, type: "source", style: { visibility: handleVisibility } })] }));
+    return (_jsxs(_Fragment, { children: [getNode(), getNodeName()] }));
 };

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

@@ -17,10 +17,7 @@ export interface AgentNodePopupProps {
     readonly initialInstructions?: string;
     /** Initial description text shown in the editable field. Defaults to an empty string. */
     readonly initialDescription?: string;
-    /**
-     * When true the dialog is in a saving state: the Save button is disabled and shows a spinner.
-     * Defaults to false.
-     */
+    /** When true the save API call is in-flight; shows an "Applying changes..." button and disables both actions. */
     readonly isSaving?: boolean;
 }
 /**

package/dist/components/MultiAgentAccelerator/AgentNodePopup.js

@@ -17,7 +17,6 @@ limitations under the License.
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
-import LinearProgress from "@mui/material/LinearProgress";
 import TextField from "@mui/material/TextField";
 import { useEffect, useState } from "react";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
@@ -64,18 +63,18 @@ export const AgentNodePopup = ({ agentName, isOpen, onClose, onSave, initialInst
             justifyContent: "flex-end",
             width: "100%",
             gap: 1,
-        }, children: _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(Button, { id: "agent-node-popup-cancel-btn", onClick: handleClose, variant: "outlined", size: "small", disabled: isSaving, children: "Cancel" }), _jsx(Button, { id: "agent-node-popup-save-btn", onClick: handleSave, variant: "contained", size: "small", disabled: isSaving || !isDirty, startIcon: isSaving ? (_jsx(CircularProgress, { size: 14, color: "inherit" })) : undefined, children: isSaving ? "Applying changes…" : "Save" })] }) }));
+        }, children: _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(Button, { id: "agent-node-popup-cancel-btn", onClick: handleClose, variant: "outlined", size: "small", disabled: isSaving, children: "Cancel" }), _jsx(Button, { id: "agent-node-popup-save-btn", onClick: handleSave, variant: "contained", size: "small", disabled: isSaving || !isDirty, startIcon: isSaving ? (_jsx(CircularProgress, { size: 14, color: "inherit" })) : undefined, children: isSaving ? "Applying changes..." : "Save" })] }) }));
     const getConfirmationModal = () => (_jsx(ConfirmationModal, { id: "agent-node-popup-unsaved-changes-modal", cancelBtnLabel: "Discard changes", closeable: false, content: _jsx("p", { children: "You have unsaved edits. Are you sure you want to discard your changes and close the dialog?" }), handleCancel: () => {
             setDisplayConfirmationModal(false);
             setInstructionsText(initialInstructions);
             setDescriptionText(initialDescription);
             onClose();
         }, handleOk: handleSave, maskCloseable: false, okBtnLabel: "Save changes", title: "Unsaved Changes" }));
-    return (_jsxs(_Fragment, { children: [displayConfirmationModal && getConfirmationModal(), _jsxs(MUIDialog, { dialogSx: isSaving ? { "& *, & *::before, & *::after": { cursor: "wait !important" } } : undefined, footer: footer, id: "agent-node-popup", isOpen: isOpen, onClose: handleClose, paperProps: { minWidth: "480px", maxWidth: "600px", width: "100%" }, title: agentName, children: [isSaving && (_jsx(LinearProgress, { "aria-label": "Saving agent", sx: { mb: 2, borderRadius: 1 } })), _jsx(TextField, { disabled: isSaving, fullWidth: true, id: "agent-node-popup-description-field", label: "Description", multiline: true, onChange: (e) => setDescriptionText(e.target.value), onKeyDown: (e) => {
+    return (_jsxs(_Fragment, { children: [displayConfirmationModal && getConfirmationModal(), _jsxs(MUIDialog, { footer: footer, id: "agent-node-popup", isOpen: isOpen, onClose: handleClose, paperProps: { minWidth: "480px", maxWidth: "600px", width: "100%" }, title: agentName, children: [_jsx(TextField, { disabled: isSaving, fullWidth: true, id: "agent-node-popup-description-field", label: "Description", multiline: true, onChange: (e) => setDescriptionText(e.target.value), onKeyDown: (e) => {
                             if (e.key !== "Escape")
                                 e.stopPropagation();
-                        }, placeholder: "Enter a short description of this agent\u2026", rows: 6, size: "small", sx: { "& .MuiInputBase-input": { fontSize: "0.85rem" } }, value: descriptionText }), _jsx(TextField, { autoFocus: true, disabled: isSaving, fullWidth: true, id: "agent-node-popup-instructions-field", label: "Instructions", multiline: true, onChange: (e) => setInstructionsText(e.target.value), onKeyDown: (e) => {
+                        }, placeholder: "Enter a short description of this agent\u2026", rows: 6, slotProps: { htmlInput: { style: { fontSize: "0.85rem" } } }, size: "small", value: descriptionText }), _jsx(TextField, { autoFocus: true, disabled: isSaving, fullWidth: true, id: "agent-node-popup-instructions-field", label: "Instructions", multiline: true, onChange: (e) => setInstructionsText(e.target.value), onKeyDown: (e) => {
                             if (e.key !== "Escape")
                                 e.stopPropagation();
-                        }, placeholder: "Enter instructions for this agent\u2026", rows: 6, size: "small", sx: { "& .MuiInputBase-input": { fontSize: "0.85rem" }, marginTop: 2 }, value: instructionsText })] })] }));
+                        }, placeholder: "Enter instructions for this agent\u2026", rows: 6, slotProps: { htmlInput: { style: { fontSize: "0.85rem" } } }, size: "small", sx: { marginTop: 2 }, value: instructionsText })] })] }));
 };

package/dist/components/MultiAgentAccelerator/GraphLayouts.js

@@ -19,10 +19,13 @@ limitations under the License.
 import dagre from "@dagrejs/dagre";
 import { MarkerType } from "@xyflow/react";
 import cloneDeep from "lodash-es/cloneDeep.js";
-import { NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
+import { FRONTMAN_SIZE_MULTIPLIER, NODE_HEIGHT, NODE_WIDTH } from "./AgentNode.js";
 import { BASE_RADIUS, DEFAULT_FRONTMAN_X_POS, DEFAULT_FRONTMAN_Y_POS, LEVEL_SPACING } from "./const.js";
+import { isEditableAgent } from "./TemporaryNetworks.js";
 import { cleanUpAgentName, KNOWN_MESSAGE_TYPES_FOR_PLASMA } from "../AgentChat/Common/Utils.js";
 export const MAX_GLOBAL_THOUGHT_BUBBLES = 5;
+const FRONTMAN_OFFSET_X = (NODE_WIDTH * (FRONTMAN_SIZE_MULTIPLIER - 1)) / 2;
+const FRONTMAN_OFFSET_Y = (NODE_HEIGHT * (FRONTMAN_SIZE_MULTIPLIER - 1)) / 2;
 export const addThoughtBubbleEdge = (thoughtBubbleEdges, conversationId, edge) => {
     // Add with timestamp for age-based cleanup
     thoughtBubbleEdges.set(conversationId, {
@@ -31,7 +34,7 @@ export const addThoughtBubbleEdge = (thoughtBubbleEdges, conversationId, edge) =
     });
     // Enforce max limit - remove oldest if over limit
     if (thoughtBubbleEdges.size > MAX_GLOBAL_THOUGHT_BUBBLES) {
-        const entries = Array.from(thoughtBubbleEdges.entries());
+        const entries = [...thoughtBubbleEdges.entries()];
         const sorted = entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
         const toRemove = sorted.slice(0, sorted.length - MAX_GLOBAL_THOUGHT_BUBBLES);
         toRemove.forEach(([id]) => {
@@ -43,7 +46,7 @@ export const removeThoughtBubbleEdge = (thoughtBubbleEdges, conversationId) => {
     thoughtBubbleEdges.delete(conversationId);
 };
 export const getThoughtBubbleEdges = (thoughtBubbleEdges) => {
-    return Array.from(thoughtBubbleEdges.values()).map((item) => item.edge);
+    return [...thoughtBubbleEdges.values()].map((item) => item.edge);
 };
 // Helper function for plasma edges to check if two agents are in the same conversation
 const areInSameConversation = (conversations, sourceAgent, targetAgent) => {
@@ -190,9 +193,13 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
                     getConversations: () => currentConversations,
                     isAwaitingLlm,
                     agentIconSuggestion: agentIconSuggestions?.[nodeId],
-                    isTemporaryNetwork,
+                    isEditable: isTemporaryNetwork &&
+                        isEditableAgent(agentsInNetwork.find((a) => a.origin === nodeId)?.display_as),
                 },
-                position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x, y },
+                // position: allow for Frontman being larger
+                position: isFrontman
+                    ? { x: DEFAULT_FRONTMAN_X_POS - FRONTMAN_OFFSET_X, y: DEFAULT_FRONTMAN_Y_POS - FRONTMAN_OFFSET_Y }
+                    : { x, y },
                 style: {
                     border: "none",
                     background: "transparent",
@@ -232,7 +239,7 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
                 isAwaitingLlm,
                 depth: undefined, // Depth will be computed later,
                 agentIconSuggestion: agentIconSuggestions?.[nodeId],
-                isTemporaryNetwork,
+                isEditable: isTemporaryNetwork && isEditableAgent(agentsInNetwork.find((a) => a.origin === nodeId)?.display_as),
             },
             position: isFrontman ? { x: DEFAULT_FRONTMAN_X_POS, y: DEFAULT_FRONTMAN_Y_POS } : { x: 0, y: 0 },
             style: {
@@ -273,15 +280,18 @@ isAwaitingLlm, isAgentNetworkDesignerMode, thoughtBubbleEdges, agentIconSuggesti
     // Compute the layout using dagre
     dagre.layout(dagreGraph);
     // Get x positions for the nodes in nodesTmp. Keep only unique values and sort numerically
-    const xPositions = Array.from(new Set(nodesTmp.map((node) => dagreGraph.node(node.id).x))).sort((a, b) => a - b);
+    const xPositions = [...new Set(nodesTmp.map((node) => dagreGraph.node(node.id).x))].sort((a, b) => a - b);
     // Convert dagre's layout to what our flow graph needs
     nodesTmp.forEach((node) => {
         const nodeWithPosition = dagreGraph.node(node.id);
+        const isFrontman = frontman?.origin === node.id;
         // We are shifting the dagre node position (anchor=center) to the top left
         // so it matches the React Flow node anchor point (top left).
+        const x = nodeWithPosition.x - NODE_WIDTH / 2 - (isFrontman ? FRONTMAN_OFFSET_X : 0);
+        const y = nodeWithPosition.y - NODE_HEIGHT / 2 - (isFrontman ? FRONTMAN_OFFSET_Y : 0);
         node.position = {
-            x: nodeWithPosition.x - NODE_WIDTH / 2,
-            y: nodeWithPosition.y - NODE_HEIGHT / 2,
+            x,
+            y,
         };
         // Depth is index of x position in xPositions array
         // Create a new data object with updated depth

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-interface MultiAgentAcceleratorProps {
+export interface MultiAgentAcceleratorProps {
     readonly userInfo: {
         userName: string;
         userImage: string;
@@ -7,6 +7,7 @@ interface MultiAgentAcceleratorProps {
     readonly backendNeuroSanApiUrl: string;
 }
 export declare const GRACE_PERIOD_MS: number;
+export declare const SHOW_TOUR_DELAY_MS = 5000;
 /**
  * Main Multi-Agent Accelerator component that contains the sidebar, agent flow, and chat components.
  * @param backendNeuroSanApiUrl Initial URL of the backend Neuro-San API. User can change this in the UI.
@@ -14,4 +15,3 @@ export declare const GRACE_PERIOD_MS: number;
  * @param userInfo Information about the current user, including userName and userImage.
  */
 export declare const MultiAgentAccelerator: FC<MultiAgentAcceleratorProps>;
-export {};