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

package/dist/components/Common/Navbar.js

@@ -52,7 +52,7 @@ const DISABLE_OUTLINE_PROPS = {
         outline: "none",
     },
 };
-export const Navbar = ({ authenticationType, id, logo, logoServiceToken, pathname, query, showSettingsButton = true, signOut, supportEmailAddress, userInfo, }) => {
+export const Navbar = ({ authenticationType, id, logo, logoServiceToken, onStartTour, pathname, query, showSettingsButton = true, signOut, supportEmailAddress, userInfo, }) => {
     // For email dialog
     const [emailDialogOpen, setEmailDialogOpen] = useState(false);
     // Dark mode
@@ -88,7 +88,8 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, pathnam
     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, alignItems: "center", sx: {
+    return hydrated ? (_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: {
@@ -130,7 +131,10 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, pathnam
                             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, { 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: () => {
+                        }, 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: () => {
+                                    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: () => {
                     setEmailDialogOpen(false);
                 }, handleOk: () => {
                     navigateToUrl(`mailto:${supportEmailAddress}`);
@@ -152,7 +156,7 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, pathnam
                         color: darkMode ? "var(--bs-yellow)" : "var(--bs-gray-dark)",
                     }, onClick: () => {
                         !hasCustomer && setMode(darkMode ? "light" : "dark");
-                    } }) }), showSettingsButton && (_jsx(Tooltip, { title: "Settings", children: _jsx(SettingsIcon, { sx: {
+                    } }) }), showSettingsButton && (_jsx(Tooltip, { title: "Settings", children: _jsx(SettingsIcon, { id: "settings-icon", sx: {
                         ...MENU_ITEM_TEXT_PROPS,
                         marginRight: "1rem",
                         fontSize: "1rem",

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

@@ -15,4 +15,4 @@ export declare const closeNotification: () => void;
  * @param description More complete description of the notification
  * @param placement Where to show notification. Defaults to top-right.
  */
-export declare const 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, durationOverride?: number | null) => void;

package/dist/components/Common/notification.js

@@ -43,27 +43,32 @@ export const sendNotification = (variantType, message, description = "",
 placement = {
     vertical: "top",
     horizontal: "right",
-}) => {
+}, durationOverride) => {
     // Log a copy to the console for troubleshooting
     const descriptionAsString = typeof description === "string" ? description : renderToString(description);
     console.debug(`Notification: Message: "${message}" Description: "${descriptionAsString}"`);
     // Show error and warnings for longer
     let duration;
-    switch (variantType) {
-        case NotificationType.info:
-        case NotificationType.success:
-            duration = SUCCESS_NOTIFICATION_DURATION_MS;
-            break;
-        case NotificationType.warning:
-        case NotificationType.error:
-        default:
-            duration = ERROR_WARNING_NOTIFICATION_DURATION_MS;
-            break;
+    if (durationOverride !== undefined) {
+        duration = durationOverride;
+    }
+    else {
+        switch (variantType) {
+            case NotificationType.info:
+            case NotificationType.success:
+                duration = SUCCESS_NOTIFICATION_DURATION_MS;
+                break;
+            case NotificationType.warning:
+            case NotificationType.error:
+            default:
+                duration = ERROR_WARNING_NOTIFICATION_DURATION_MS;
+                break;
+        }
     }
     // Use some minor customization to be able to inject ids for testing
     const messageForId = message
         .replaceAll(" ", "-")
-        .replace(/[^a-zA-Z0-9-]/gu, "")
+        .replaceAll(/[^a-zA-Z0-9-]/gu, "")
         .toLowerCase();
     const baseId = `notification-message-${messageForId}-${NotificationType[variantType]}`;
     const messageSpan = _jsx("span", { id: `${baseId}-span`, children: message });

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

@@ -1,5 +1,6 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { AgentConversation } from "./AgentConversations.js";
+import { AgentNetworkDefinitionEntry } from "./const.js";
 import { ThoughtBubbleEdgeShape } from "./ThoughtBubbleEdge.js";
 import { AgentIconSuggestions } from "../../controller/Types/AgentIconSuggestions.js";
 import { ConnectivityInfo } from "../../generated/neuro-san/NeuroSanClient.js";
@@ -12,6 +13,7 @@ export interface AgentFlowProps {
     readonly id: string;
     readonly isAwaitingLlm?: boolean;
     readonly isAgentNetworkDesignerMode?: boolean;
+    readonly isEditMode?: boolean;
     readonly isStreaming?: boolean;
     readonly isSelectedNetworkTemporary?: boolean;
     /** The history key for the currently selected network (used to scope sly_data reads/writes per network). */
@@ -22,7 +24,12 @@ export interface AgentFlowProps {
      * @param oldNetworkId The agent_name of the network that was replaced.
      * @param newNetworkId The agent_name of the replacement network to navigate to.
      */
+    readonly networkDisplayName?: string;
+    readonly onEnterEditMode?: () => void;
     readonly onNetworkReplaced?: (oldNetworkId: string, newNetworkId: string) => void;
+    /** Called when the user closes the edit-mode dock. */
+    readonly onExitEditMode?: () => void;
+    readonly onSaveAgent?: (agentName: string, updated: AgentNetworkDefinitionEntry[], agentNetworkName: string | undefined, signal: AbortSignal) => Promise<void>;
     readonly thoughtBubbleEdges: Map<string, {
         edge: ThoughtBubbleEdgeShape;
         timestamp: number;
@@ -32,4 +39,5 @@ export interface AgentFlowProps {
         timestamp: number;
     }>>>;
 }
+export declare const DOCK_BANNER_AUTO_DISMISS_MS = 5000;
 export declare const AgentFlow: FC<AgentFlowProps>;