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

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -22,23 +22,29 @@ import { useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useJoyride } from "react-joyride";
 import { extractConversations } from "./AgentConversations.js";
 import { getUpdatedAgentCounts } from "./AgentCounts.js";
 import { AgentFlow } from "./AgentFlow.js";
 import { extractAgentNetworkDesignerProgress } from "./AgentNetworkDesigner.js";
-import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, } from "./const.js";
+import { AGENT_NETWORK_DEFINITION_KEY, AGENT_NETWORK_DESIGNER_ID, AGENT_NETWORK_HOCON, AGENT_NETWORK_NAME_KEY, TRIGGER_APP_TOUR_EVENT_NAME, } from "./const.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
-import { convertReservationsToNetworks, extractNetworkHocon, extractReservations } from "./TemporaryNetworks.js";
-import { getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, } from "../../controller/agent/Agent.js";
+import { extractTemporaryNetworksFromMessage, isTemporaryNetwork, mergeNetworks } from "./TemporaryNetworks.js";
+import { getAgentFunction, getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, sendNetworkDesignerUpdate, } from "../../controller/agent/Agent.js";
+import { useAgentChatHistoryStore } from "../../state/ChatHistory.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
+import { TourPromptState, useTourStore } from "../../state/Tour.js";
 import { useLocalStorage } from "../../utils/useLocalStorage.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
 import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
 import { SmallLlmChatButton } from "../AgentChat/Common/LlmChatButton.js";
+import { isLegacyAgentType } from "../AgentChat/Common/Types.js";
 import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Common/Utils.js";
-import { ConfirmationModal } from "../Common/ConfirmationModal.js";
+import { ConfirmationModal, StyledButton } from "../Common/ConfirmationModal.js";
 import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
+import { MAIN_TOUR_STEPS } from "./Tour/MainTourSteps.js";
+import { MUIDialog } from "../Common/MUIDialog.js";
 // Check for expired networks every this many milliseconds
 const EXPIRED_NETWORKS_CHECK_INTERVAL_MS = 10 * 1000;
 // Display expired temporary networks for this amount of time after they expire so users can see what happened
@@ -47,6 +53,40 @@ export const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
 const GROW_ANIMATION_TIME_MS = 800;
 // Optimization to avoid creating a new empty map on every render
 const EMPTY_THOUGHT_BUBBLE_EDGES = new Map();
+// We show the tour modal after this amount of time so as not to "pounce" on the user when they first open the app
+export const SHOW_TOUR_DELAY_MS = 5000;
+// #region: Agent-save helpers
+/**
+ * Extracts TemporaryNetworks from a single streamed chunk, merging into `accumulated`.
+ * Returns `accumulated` unchanged if the chunk yields no reservations or on parse error.
+ */
+const collectNetworksFromChunk = (chunk, updated, accumulated) => {
+    try {
+        const chatMessage = chatMessageFromChunk(chunk);
+        if (!chatMessage)
+            return accumulated;
+        // Always use the user's edited definition as the authoritative value.
+        const converted = extractTemporaryNetworksFromMessage(chatMessage, updated);
+        if (converted.length === 0)
+            return accumulated;
+        return mergeNetworks(accumulated, converted);
+    }
+    catch (e) {
+        console.warn("Failed to process chunk from network designer:", e);
+        return accumulated;
+    }
+};
+/** Logs and notifies about a save error. Suppresses AbortError (user-cancelled). */
+const notifySaveError = (agentName, e) => {
+    if (e instanceof DOMException && e.name === "AbortError")
+        return;
+    console.error("Failed to submit agent network update:", e);
+    const detail = e instanceof DOMException && e.name === "TimeoutError"
+        ? "The request timed out waiting for the server. Please try again."
+        : String(e);
+    sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, detail);
+};
+// #endregion: Agent-save helpers
 /**
  * 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.
@@ -59,6 +99,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
     // Stores whether are currently awaiting LLM response (for knowing when to show spinners)
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
+    const [isEditingNetwork, setIsEditingNetwork] = useState(false);
     // Track streaming state - controls thought bubble cleanup timer, and enables "zen mode" (hides outer panels after
     // animation)
     const [isStreaming, setIsStreaming] = useState(false);
@@ -69,23 +110,32 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [newlyAddedTemporaryNetworks, setNewlyAddedTemporaryNetworks] = useState(new Set());
     const [networkIconSuggestions, setNetworkIconSuggestions] = useState({});
     const [agentsInNetwork, setAgentsInNetwork] = useState([]);
+    const [sampleQueries, setSampleQueries] = useState([]);
     // Agents in network under construction by Agent Network Designer -
     // updated in real time as we receive progress messages from the backend.
     const [agentsInNetworkDesigner, setAgentsInNetworkDesigner] = useState([]);
     const [agentIconSuggestions, setAgentIconSuggestions] = useState(null);
     const [selectedNetwork, setSelectedNetwork] = useState(null);
+    const [networkDescription, setNetworkDescription] = useState("");
     const networkDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
-    // Track whether we've shown the info popup so we don't keep bugging the user with it
-    const [haveShownPopup, setHaveShownPopup] = useState(false);
     const [customURLLocalStorage, setCustomURLLocalStorage] = useLocalStorage("customAgentNetworkURL", null);
     // An extra set of quotes is making it in the string in local storage.
     const [neuroSanURL, setNeuroSanURL] = useState(customURLLocalStorage?.replaceAll('"', "") || backendNeuroSanApiUrl);
-    const agentCountsRef = useRef(new Map());
+    // Tracks how many times each agent has been involved in the conversation
+    const [agentCounts, setAgentCounts] = useState(new Map());
+    //common function to change the selected network and reset related state
+    const changeSelectedNetwork = useCallback((next) => {
+        setSelectedNetwork(next);
+        setAgentCounts(new Map());
+    }, []);
     const conversationsRef = useRef(null);
     const [currentConversations, setCurrentConversations] = useState([]);
     const [networkToBeDeleted, setNetworkToBeDeleted] = useState(null);
     // State to hold thought bubble edges - avoids duplicates across layout recalculations
     const [thoughtBubbleEdges, setThoughtBubbleEdges] = useState(new Map());
+    const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
+    const [tourModalOpen, setTourModalOpen] = useState(false);
+    const [haveShownTourModal, setHaveShownTourModal] = useState(false);
     const customURLCallback = useCallback((url) => {
         setNeuroSanURL(url || backendNeuroSanApiUrl);
         setCustomURLLocalStorage(url === "" ? null : url);
@@ -96,31 +146,75 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         .map((agent) => agent.origin)
         .sort()
         .join(","), [agentsInNetwork]);
+    // Introductory tour
+    // Track that the user requested the tour, and we should start it once network data is available
+    const [tourRequested, setTourRequested] = useState(false);
+    // Tour persisted status
+    const tourStatus = useTourStore((s) => s.status);
+    const setTourStatus = useTourStore((s) => s.setStatus);
+    const { controls, Tour } = useJoyride({
+        continuous: true,
+        steps: MAIN_TOUR_STEPS,
+        options: {
+            buttons: ["back", "close", "primary", "skip"],
+            backgroundColor: "var(--bs-secondary)",
+            textColor: "var(--bs-white)",
+            primaryColor: "var(--bs-accent3-medium)",
+            arrowColor: "var(--bs-secondary)",
+            overlayColor: "rgba(var(--bs-primary-rgb), 0.82)",
+            showProgress: true,
+            zIndex: getZIndex(3, theme),
+            skipBeacon: true,
+            skipScroll: true,
+        },
+        locale: {
+            last: "End Tour",
+            skip: "Exit Tour",
+        },
+    });
     const resetState = useCallback(() => {
         setThoughtBubbleEdges(new Map());
         setIsStreaming(false);
     }, []);
     // Reference to the ChatCommon component to allow external stop button to call its handleStop method
     const chatRef = useRef(null);
+    // Clear chat whenever the user navigates to the Agent Network Designer, so they start fresh each time
+    useEffect(() => {
+        if (selectedNetwork === AGENT_NETWORK_DESIGNER_ID) {
+            chatRef.current?.handleClearChat();
+        }
+    }, [selectedNetwork]);
     // Special mode of operation where user is using Agent Network Designer to create a new network
     const isNetworkDesignerMode = selectedNetwork === AGENT_NETWORK_DESIGNER_ID;
     // Whether the currently selected network is a temporary network (agent reservation)
-    const isSelectedNetworkTemporary = selectedNetwork !== null && temporaryNetworks.some((n) => n.agentInfo.agent_name === selectedNetwork);
+    const isSelectedNetworkTemporary = isTemporaryNetwork(selectedNetwork, temporaryNetworks);
     // For temp networks, agent_network_definition and agent_network_name live in localStorage (not IndexedDB slyData).
     // Supply them as extraSlyData so ChatCommon bounces them back to the backend on every request.
     const currentTempNetwork = isSelectedNetworkTemporary
         ? temporaryNetworks.find((n) => n.agentInfo.agent_name === selectedNetwork)
         : undefined;
+    // For Agent Network Designer: the backend echoes agent_network_name into IndexedDB sly_data as the conversation
+    // progresses. We read it back here to find the matching temp network and override agent_network_definition in the
+    // outgoing request — leaving what's in IndexedDB untouched.
+    const designerSlyData = useAgentChatHistoryStore((state) => state.history[AGENT_NETWORK_DESIGNER_ID]?.slyData);
+    const designerNetworkName = isNetworkDesignerMode
+        ? designerSlyData?.[AGENT_NETWORK_NAME_KEY]
+        : undefined;
+    const designerTempNetwork = designerNetworkName
+        ? temporaryNetworks.find((n) => n.agentNetworkName === designerNetworkName)
+        : undefined;
     const extraSlyData = currentTempNetwork
         ? {
             [AGENT_NETWORK_DEFINITION_KEY]: currentTempNetwork.agentNetworkDefinition,
-            // Use the name the backend originally sent, not the local UUID-based key.
+            // Use the agentNetworkName, not reservation_id
             ...(currentTempNetwork.agentNetworkName
                 ? { [AGENT_NETWORK_NAME_KEY]: currentTempNetwork.agentNetworkName }
                 : {}),
             ...(currentTempNetwork.networkHocon ? { [AGENT_NETWORK_HOCON]: currentTempNetwork.networkHocon } : {}),
         }
-        : undefined;
+        : designerTempNetwork
+            ? { [AGENT_NETWORK_DEFINITION_KEY]: designerTempNetwork.agentNetworkDefinition }
+            : undefined;
     // Handle external stop button click - stops streaming and exits zen mode
     const handleExternalStop = useCallback(() => {
         chatRef.current?.handleStop();
@@ -138,10 +232,27 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 sendNotification(NotificationType.error, "Connection error", `Unable to get list of Agent Networks. Verify that ${neuroSanURL} is a valid ` +
                     `Multi-Agent Accelerator Server. Error: ${e}.`);
                 setNetworks([]);
-                setSelectedNetwork(null);
+                changeSelectedNetwork(null);
             }
         })();
-    }, [neuroSanURL]);
+    }, [neuroSanURL, changeSelectedNetwork]);
+    useEffect(() => {
+        const fetchAgentDetails = async () => {
+            // It is a Neuro-san agent, so get the function and connectivity info
+            try {
+                const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, userInfo.userName);
+                setNetworkDescription(agentFunction?.function?.description || "");
+            }
+            catch {
+                // Ignore. May be a legacy agent without a functional description in Neuro-san.
+            }
+        };
+        // Clear out existing
+        setNetworkDescription("");
+        if (selectedNetwork && !isLegacyAgentType(selectedNetwork)) {
+            void fetchAgentDetails();
+        }
+    }, [neuroSanURL, selectedNetwork, userInfo.userName]);
     useEffect(() => {
         ;
         (async () => {
@@ -163,10 +274,15 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             if (selectedNetwork) {
                 try {
                     const connectivity = await getConnectivity(neuroSanURL, selectedNetwork, userInfo.userName);
-                    const agentsInNetworkSorted = connectivity.connectivity_info
-                        .concat()
-                        .sort((a, b) => a?.origin.localeCompare(b?.origin));
+                    const agentsInNetworkSorted = [...connectivity.connectivity_info].sort((a, b) => a?.origin.localeCompare(b?.origin));
                     setAgentsInNetwork(agentsInNetworkSorted);
+                    const sampleQueriesTmp = connectivity?.metadata?.["sample_queries"];
+                    if (Array.isArray(sampleQueriesTmp)) {
+                        setSampleQueries(sampleQueriesTmp);
+                    }
+                    else {
+                        setSampleQueries([]);
+                    }
                     setAgentIconSuggestions(null);
                     closeNotification();
                 }
@@ -222,22 +338,47 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             return undefined;
         const interval = setInterval(() => {
             const now = Date.now() / 1000; // convert to seconds since epoch
+            const reapCutoff = now - GRACE_PERIOD_MS / 1000;
             const currentTemporaryNetworks = useTempNetworksStore.getState().tempNetworks;
-            // Remove networks that have been expired for more than GRACE_PERIOD_MS
-            useTempNetworksStore
-                .getState()
-                .setTempNetworks(currentTemporaryNetworks.filter((n) => n.reservation.expiration_time_in_seconds > now - GRACE_PERIOD_MS / 1000));
-            // Figure out which networks have expired on the server (not including our grace period) so we can
-            // deselect them if they're currently selected
-            const expiredNetwork = currentTemporaryNetworks.filter((network) => network.reservation.expiration_time_in_seconds <= now);
-            // If the selected network is one of the expired ones, deselect it
-            if (expiredNetwork.some((n) => n.agentInfo.agent_name === selectedNetwork)) {
-                setSelectedNetwork(null);
-                agentCountsRef.current = new Map();
+            // Networks past the grace period get fully purged: removed from the store AND have their
+            // chat history / sly_data cleared from IndexedDB
+            const survivingNetworks = [];
+            for (const network of currentTemporaryNetworks) {
+                if (network.reservation.expiration_time_in_seconds <= reapCutoff) {
+                    // This network has been expired for more than the grace period, so purge it
+                    useAgentChatHistoryStore.getState().resetHistory(network.agentInfo.agent_name);
+                }
+                else {
+                    survivingNetworks.push(network);
+                }
+            }
+            useTempNetworksStore.getState().setTempNetworks(survivingNetworks);
+            // If the selected network has expired on the server (not including our grace period), deselect it
+            const selectedHasExpired = currentTemporaryNetworks.some((network) => network.agentInfo.agent_name === selectedNetwork &&
+                network.reservation.expiration_time_in_seconds <= now);
+            if (selectedHasExpired) {
+                changeSelectedNetwork(null);
             }
         }, EXPIRED_NETWORKS_CHECK_INTERVAL_MS);
         return () => clearInterval(interval);
-    }, [temporaryNetworks, selectedNetwork]);
+    }, [changeSelectedNetwork, temporaryNetworks, selectedNetwork]);
+    const dismissTourModal = () => {
+        setTourModalOpen(false);
+        setHaveShownTourModal(true);
+    };
+    const handleExternalTourRequest = useCallback(() => {
+        // If nothing is selected, prime the network selection first
+        if (selectedNetwork == null && networks?.length > 0) {
+            setSelectedNetwork(networks[0].agent_name);
+        }
+        // Close the modal if open
+        setTourModalOpen(false);
+        setTourRequested(true);
+    }, [networks, selectedNetwork]);
+    useEffect(() => {
+        window.addEventListener(TRIGGER_APP_TOUR_EVENT_NAME, handleExternalTourRequest);
+        return () => window.removeEventListener(TRIGGER_APP_TOUR_EVENT_NAME, handleExternalTourRequest);
+    }, [handleExternalTourRequest, networks, selectedNetwork]);
     const onChunkReceived = useCallback((chunk) => {
         // Extract ChatMessage structure
         const chatMessage = chatMessageFromChunk(chunk);
@@ -250,8 +391,10 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             conversationsRef.current = result;
             setCurrentConversations(result);
         }
-        // Agent hit counts
-        agentCountsRef.current = getUpdatedAgentCounts(agentCountsRef.current, chatMessage?.origin);
+        // Update agent hit counts
+        setAgentCounts((prevCounts) => {
+            return getUpdatedAgentCounts(prevCounts, chatMessage.origin);
+        });
         // Agent network designer progress messages
         if (isNetworkDesignerMode) {
             const networkInProgress = extractAgentNetworkDesignerProgress(chatMessage);
@@ -259,16 +402,9 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 setAgentsInNetworkDesigner(networkInProgress);
             }
         }
-        // Temporary networks/reservations
-        const reservationsResult = extractReservations(chatMessage);
         // Handle agent reservations (temporary networks) that come in through the chat stream.
-        if (reservationsResult?.length > 0) {
-            // Retrieve network definition, if present
-            const networkHocon = extractNetworkHocon(chatMessage);
-            const agentNetworkDefinition = chatMessage.sly_data?.[AGENT_NETWORK_DEFINITION_KEY];
-            // Capture the backend's canonical name so we can bounce it back unchanged on future requests.
-            const agentNetworkName = chatMessage.sly_data?.[AGENT_NETWORK_NAME_KEY];
-            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult, networkHocon, agentNetworkDefinition, agentNetworkName);
+        const newTemporaryNetworks = extractTemporaryNetworksFromMessage(chatMessage);
+        if (newTemporaryNetworks.length > 0) {
             const upserted = useTempNetworksStore.getState().upsertTempNetworks(newTemporaryNetworks);
             // Record the new temporary networks so we can highlight them for the user.
             // For now, we only care about the first one since that's the only active use case
@@ -276,21 +412,48 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         }
         return true;
     }, [isNetworkDesignerMode]);
+    /**
+     * Handles a save from the AgentFlow popup: streams the updated definition to the network designer,
+     * collects reservations from each chunk, then upserts the result and navigates if the network changed.
+     */
+    const onSaveAgent = useCallback(async (agentName, updated, agentNetworkName, signal) => {
+        try {
+            let newNetworks = [];
+            await sendNetworkDesignerUpdate(neuroSanURL, signal, agentName, updated, agentNetworkName, userInfo.userName, (chunk) => {
+                newNetworks = collectNetworksFromChunk(chunk, updated, newNetworks);
+            });
+            if (newNetworks.length === 0) {
+                sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, "The network designer did not return a reservation. Please try again.");
+                return;
+            }
+            const replacement = newNetworks.find((n) => n.agentNetworkName === agentNetworkName);
+            if (replacement) {
+                useTempNetworksStore.getState().upsertTempNetworks(newNetworks);
+                if (selectedNetwork) {
+                    useAgentChatHistoryStore
+                        .getState()
+                        .copyHistory(selectedNetwork, replacement.agentInfo.agent_name);
+                    setSelectedNetwork(replacement.agentInfo.agent_name);
+                }
+            }
+            else {
+                sendNotification(NotificationType.error, `Failed to update network "${agentName}".`, "A reservation was returned but did not match the current network. Please try again.");
+            }
+        }
+        catch (e) {
+            notifySaveError(agentName, e);
+        }
+    }, [neuroSanURL, userInfo.userName, selectedNetwork]);
     const onStreamingStarted = useCallback(() => {
         // Reset agent counts
-        agentCountsRef.current = new Map();
+        setAgentCounts(new Map());
         // Reset newly added temporary networks
         setNewlyAddedTemporaryNetworks(new Set());
         // Reset Agent Network Designer preview
         setAgentsInNetworkDesigner([]);
-        // Show info popup only once per session
-        if (!haveShownPopup) {
-            sendNotification(NotificationType.info, "Agents working", "Click the stop button or hit Escape to exit.");
-            setHaveShownPopup(true);
-        }
         // Mark that streaming has started
         setIsStreaming(true);
-    }, [haveShownPopup]);
+    }, []);
     const onStreamingComplete = useCallback(() => {
         // When streaming is complete, clean up any refs and state
         conversationsRef.current = null;
@@ -298,27 +461,57 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         setAgentsInNetworkDesigner([]);
         resetState();
     }, [resetState]);
-    const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
     const handleDeleteNetwork = (networkId, isExpired) => {
         if (isExpired) {
             // It's expired so just delete it without confirmation
             const tempNetworksWithoutThisOne = temporaryNetworks.filter((network) => network.agentInfo.agent_name !== networkId);
             useTempNetworksStore.getState().setTempNetworks(tempNetworksWithoutThisOne);
+            useAgentChatHistoryStore.getState().resetHistory(networkId);
+            if (selectedNetwork === networkId) {
+                changeSelectedNetwork(null);
+            }
         }
         else {
             setNetworkToBeDeleted(networkId);
             setConfirmationModalOpen(true);
         }
     };
+    const handleEditNetwork = (_networkId) => {
+        setIsEditingNetwork(true);
+    };
+    useEffect(() => {
+        // Don't show the tour modal if any of these are true
+        if (haveShownTourModal ||
+            tourStatus === TourPromptState.Taken ||
+            tourStatus === TourPromptState.DontShowAgain ||
+            tourRequested) {
+            return undefined;
+        }
+        // Show tour modal after a delay
+        const timer = setTimeout(() => {
+            setTourModalOpen(true);
+        }, SHOW_TOUR_DELAY_MS);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [haveShownTourModal, tourRequested, tourStatus]);
+    useEffect(() => {
+        if (!tourRequested)
+            return;
+        // Determine whether the sample network for the tour is ready
+        const networkReady = selectedNetwork != null && agentsInNetwork?.length > 0;
+        if (networkReady) {
+            setTourStatus(TourPromptState.Taken);
+            controls.start();
+            setTourRequested(false);
+        }
+    }, [tourRequested, selectedNetwork, agentsInNetwork, networks, controls, setTourStatus]);
     const getLeftPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-sidebar-slide", in: !enableZenMode || !isAwaitingLlm, direction: "right", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
                 setIsStreaming(true);
             }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-sidebar", size: enableZenMode && isStreaming ? 0 : 3.25, sx: {
                     height: "100%",
-                }, children: _jsx(Sidebar, { customURLLocalStorage: customURLLocalStorage, customURLCallback: customURLCallback, id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networks: networks, networkIconSuggestions: networkIconSuggestions, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onDeleteNetwork: handleDeleteNetwork, setSelectedNetwork: (newNetwork) => {
-                        agentCountsRef.current = new Map();
-                        setSelectedNetwork(newNetwork);
-                    }, temporaryNetworks: temporaryNetworks }) }) }));
+                }, children: _jsx(Sidebar, { customURLLocalStorage: customURLLocalStorage, customURLCallback: customURLCallback, id: "multi-agent-accelerator-sidebar", isAwaitingLlm: isAwaitingLlm, networks: networks, networkIconSuggestions: networkIconSuggestions, newlyAddedTemporaryNetworks: newlyAddedTemporaryNetworks, onEditNetwork: handleEditNetwork, onDeleteNetwork: handleDeleteNetwork, setSelectedNetwork: (newNetwork) => changeSelectedNetwork(newNetwork), temporaryNetworks: temporaryNetworks }) }) }));
     };
     const getCenterPanel = () => {
         return (_jsx(Grid, { id: "multi-agent-accelerator-grid-agent-flow", size: enableZenMode && isStreaming ? 18 : 8.25, sx: {
@@ -331,23 +524,18 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                         height: "100%",
                         maxWidth: 1000,
                         margin: "0 auto",
-                    }, children: _jsx(AgentFlow, { agentCounts: agentCountsRef.current, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, currentUser: userInfo.userName, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, isAwaitingLlm: isAwaitingLlm, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkId: isSelectedNetworkTemporary ? selectedNetwork : undefined, neuroSanURL: neuroSanURL, onNetworkReplaced: (oldNetworkId, newNetworkId) => {
-                            if (selectedNetwork === oldNetworkId) {
-                                agentCountsRef.current = new Map();
-                                setSelectedNetwork(newNetworkId);
-                            }
-                        }, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
+                    }, children: _jsx(AgentFlow, { agentCounts: agentCounts, agentsInNetwork: agentsInNetwork, agentIconSuggestions: agentIconSuggestions, id: "multi-agent-accelerator-agent-flow", currentConversations: currentConversations, currentUser: userInfo.userName, isAwaitingLlm: isAwaitingLlm, isEditMode: isEditingNetwork, isStreaming: isStreaming, isSelectedNetworkTemporary: isSelectedNetworkTemporary, networkDisplayName: selectedNetwork || undefined, networkId: isSelectedNetworkTemporary ? selectedNetwork : undefined, neuroSanURL: neuroSanURL, onEnterEditMode: () => setIsEditingNetwork(true), onExitEditMode: () => setIsEditingNetwork(false), onNetworkReplaced: (_old, newId) => changeSelectedNetwork(newId), onSaveAgent: onSaveAgent, thoughtBubbleEdges: thoughtBubbleEdges, setThoughtBubbleEdges: setThoughtBubbleEdges }, "multi-agent-accelerator-agent-flow") }) }) }));
     };
     const getRightPanel = () => {
         return (_jsx(Slide, { id: "multi-agent-accelerator-grid-agent-chat-common-slide", in: !enableZenMode || !isAwaitingLlm, direction: "left", timeout: GROW_ANIMATION_TIME_MS, onExited: () => {
                 setIsStreaming(true);
             }, children: _jsx(Grid, { id: "multi-agent-accelerator-grid-agent-chat-common", size: enableZenMode && isStreaming ? 0 : 6.5, sx: {
                     height: "100%",
-                }, children: _jsx(ChatCommon, { agentGreetings: {
+                }, children: _jsx(ChatCommon, { customAgentGreetings: {
                         [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
                     }, agentPlaceholders: {
                         [AGENT_NETWORK_DESIGNER_ID]: "Describe in plain language the network you would like to build.",
-                    }, currentUser: userInfo.userName, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, setIsAwaitingLlm: setIsAwaitingLlm, targetAgent: selectedNetwork, userImage: userInfo.userImage }, selectedNetwork ?? "no-network") }) }));
+                    }, currentUser: userInfo.userName, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, targetAgent: selectedNetwork, userImage: userInfo.userImage }, selectedNetwork ?? "no-network") }) }));
     };
     const getStopButton = () => {
         return (_jsx(_Fragment, { children: isAwaitingLlm && enableZenMode && (_jsx(Box, { id: "stop-button-container", sx: {
@@ -357,7 +545,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                     zIndex: 10,
                 }, children: _jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: handleExternalStop, posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) }) })) }));
     };
-    const getConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${cleanUpAgentName(removeTrailingUuid(networkToBeDeleted))}" will be deleted. ` +
+    const getDeleteNetworkConfirmationModal = () => confirmationModalOpen ? (_jsx(ConfirmationModal, { id: "delete-network-confirmation-modal", content: `The network "${cleanUpAgentName(removeTrailingUuid(networkToBeDeleted))}" will be deleted. ` +
             "This action cannot be undone. Are you sure you want to proceed?", handleCancel: () => {
             setConfirmationModalOpen(false);
             setNetworkToBeDeleted(null);
@@ -365,9 +553,29 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             useTempNetworksStore
                 .getState()
                 .setTempNetworks(temporaryNetworks.filter((network) => network.agentInfo.agent_name !== networkToBeDeleted));
+            useAgentChatHistoryStore.getState().resetHistory(networkToBeDeleted);
+            if (selectedNetwork === networkToBeDeleted) {
+                changeSelectedNetwork(null);
+            }
             setNetworkToBeDeleted(null);
             setConfirmationModalOpen(false);
         }, title: "Delete Network" })) : null;
+    const getTourModal = () => tourModalOpen && (_jsx(MUIDialog, { contentSx: { fontSize: "0.8rem", minWidth: "550px", paddingTop: "0" }, footer: _jsxs(_Fragment, { children: [_jsx(StyledButton, { id: "tour-dont-show-again", onClick: () => {
+                        setTourStatus(TourPromptState.DontShowAgain);
+                        dismissTourModal();
+                    }, variant: "outlined", children: "Don't show this again" }), _jsx(StyledButton, { id: "tour-not-now", onClick: () => {
+                        dismissTourModal();
+                    }, variant: "outlined", children: "Not now" }), _jsx(StyledButton, { id: "tour-take", onClick: () => {
+                        // If no network selected, select one so we have something to show
+                        if (selectedNetwork == null) {
+                            setSelectedNetwork(networks?.[0]?.agent_name ?? null);
+                        }
+                        dismissTourModal();
+                        // Defer starting the tour until the selected network's data is available.
+                        setTourRequested(true);
+                    }, variant: "contained", children: "Take the tour" })] }), id: "multi-agent-accelerator-tour-modal", isOpen: tourModalOpen, onClose: () => {
+            dismissTourModal();
+        }, title: "Tour", children: "Would you like to take a tour of the application? (2 mins)" }));
     /**
      * Popper to show real-time progress of the Agent Network Designer output as we receive it from the backend.
      * Only displayed when Agent Network Designer is active.
@@ -393,7 +601,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                     opacity: "95%",
                     width: "100%",
                 }, children: [_jsx(Typography, { variant: "h6", sx: { padding: "0.5rem 1rem", fontWeight: "bold", color: "white" }, children: "Network Preview" }), agentsInNetworkDesigner?.length > 0 ? (_jsx(AgentFlow, { id: "and-network-preview", agentsInNetwork: agentsInNetworkDesigner, isAgentNetworkDesignerMode: true, isAwaitingLlm: false, isStreaming: false, thoughtBubbleEdges: EMPTY_THOUGHT_BUBBLE_EDGES }, "and-network-preview")) : (_jsx(Typography, { variant: "body1", sx: { color: "white" }, children: "Awaiting status from Agent Network Designer..." }))] }) }) }));
-    return (_jsxs(_Fragment, { children: [getProgressPopper(), getConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+    return (_jsxs(_Fragment, { children: [Tour, getTourModal(), getProgressPopper(), getDeleteNetworkConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
                     display: "flex",
                     flex: 1,
                     height: "85%",

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

@@ -4,6 +4,7 @@ import { NodeIndex } from "./TreeBuilder.js";
 export interface AgentNetworkNodeProps extends TreeItemProps {
     readonly nodeIndex: NodeIndex;
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
+    readonly onEditNetwork?: (network: string) => void;
     readonly networkIconSuggestions: Record<string, string>;
     readonly temporaryNetworkExpirationTimes?: Record<string, Date>;
     readonly temporaryNetworkHoconStrings?: Record<string, string | null>;

package/dist/components/MultiAgentAccelerator/Sidebar/AgentNetworkTreeItem.js

@@ -5,6 +5,7 @@ import * as MuiIcons from "@mui/icons-material";
 import BookmarkIcon from "@mui/icons-material/Bookmark";
 import Delete from "@mui/icons-material/Delete";
 import DownloadIcon from "@mui/icons-material/Download";
+import Edit from "@mui/icons-material/Edit";
 import Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
 import IconButton from "@mui/material/IconButton";
@@ -43,7 +44,7 @@ const isTemporaryNetworkExpired = (expirationDate) => {
  * @param props - see AgentNetworkNode interface
  * @returns JSX.Element containing the custom tree item
  */
-export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networkIconSuggestions, nodeIndex, onDeleteNetwork, temporaryNetworkExpirationTimes, temporaryNetworkHoconStrings, }) => {
+export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networkIconSuggestions, nodeIndex, onDeleteNetwork, onEditNetwork, temporaryNetworkExpirationTimes, temporaryNetworkHoconStrings, }) => {
     const theme = useTheme();
     // We know all labels are strings because we set them that way in the tree view items
     const labelString = label;
@@ -91,13 +92,12 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                                         "&:hover": {
                                                             textDecoration: "underline",
                                                         },
-                                                    }, children: displayLabel })] }) }), isChild && tags?.length > 0 ? (_jsx(Tooltip, { title: tags
-                                            .slice()
+                                                    }, children: displayLabel })] }) }), isChild && tags?.length > 0 ? (_jsx(Tooltip, { title: [...tags]
                                             .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
                                             .map((tag) => (_jsx(Chip, { label: tag, style: {
                                                 margin: "0.25rem",
                                                 backgroundColor: `var(${tagsToColors.get(tag) || TAG_COLORS[0]})`,
-                                            } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null, isTemporaryNetwork && networkHocon && (_jsx(Tooltip, { title: isExpired ? "Expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
+                                            } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null] }), isChild && isTemporaryNetwork && (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "0.25rem", marginLeft: "auto" }, children: [networkHocon && (_jsx(Tooltip, { title: isExpired ? "Expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
                                                     e.stopPropagation();
                                                     if (isExpired) {
                                                         return;
@@ -112,12 +112,28 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                                         color: "var(--bs-secondary)",
                                                         opacity: 0.3,
                                                     },
-                                                }, children: _jsx(DownloadIcon, { sx: { fontSize: "0.75rem" } }) }) }) }))] }), isChild && isTemporaryNetwork && (_jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
-                                        e.stopPropagation();
-                                        onDeleteNetwork?.(itemId, isExpired);
-                                    }, sx: {
-                                        cursor: "pointer",
-                                        fontSize: "1rem",
-                                        "&:hover": { color: theme.palette.warning.main },
-                                    } }) }))] }) }), children && _jsx(TreeItemGroupTransition, { ...getGroupTransitionProps() })] }) }));
+                                                }, children: _jsx(DownloadIcon, { sx: { fontSize: "0.75rem" } }) }) }) })), _jsx(Tooltip, { title: "Edit this network", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    onEditNetwork?.(itemId);
+                                                }, disabled: isExpired, size: "small", sx: {
+                                                    padding: 0,
+                                                    color: "var(--bs-secondary)",
+                                                    "&:hover": { color: "var(--bs-secondary-dark)" },
+                                                    "&.Mui-disabled": {
+                                                        color: "var(--bs-secondary)",
+                                                        opacity: 0.3,
+                                                    },
+                                                }, children: _jsx(Edit, { sx: { fontSize: "0.75rem" } }) }) }) }), _jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
+                                                e.stopPropagation();
+                                                onDeleteNetwork?.(itemId, isExpired);
+                                            }, sx: {
+                                                color: "var(--bs-secondary)",
+                                                "&:hover": { color: theme.palette.warning.main },
+                                                "&.Mui-disabled": {
+                                                    color: "var(--bs-secondary)",
+                                                    opacity: 0.3,
+                                                },
+                                                cursor: "pointer",
+                                                fontSize: "1rem",
+                                            } }) })] }))] }) }), children && _jsx(TreeItemGroupTransition, { ...getGroupTransitionProps() })] }) }));
 };

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

@@ -10,6 +10,7 @@ export interface SidebarProps {
     readonly isAwaitingLlm: boolean;
     readonly networkIconSuggestions?: NetworkIconSuggestions;
     readonly networks: readonly AgentInfo[];
+    readonly onEditNetwork?: (network: string) => void;
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
     readonly setSelectedNetwork: (network: string) => void;
     readonly temporaryNetworks?: readonly TemporaryNetwork[];