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

package/dist/components/AgentChat/ChatCommon.js

@@ -47,7 +47,7 @@ import { chatMessageFromChunk, checkError, cleanUpAgentName, removeTrailingUuid
 import { MicrophoneButton } from "./VoiceChat/MicrophoneButton.js";
 import { cleanupAndStopSpeechRecognition, setupSpeechRecognition } from "./VoiceChat/VoiceChat.js";
 import { getAgentFunction, getConnectivity, sendChatQuery } from "../../controller/agent/Agent.js";
-import { sendLlmRequest } from "../../controller/llm/LlmChat.js";
+import { sendLlmRequest, StreamingUnit } from "../../controller/llm/LlmChat.js";
 import { ChatMessageType, } from "../../generated/neuro-san/NeuroSanClient.js";
 import { hashString, hasOnlyWhitespace } from "../../utils/text.js";
 import { LlmChatOptionsButton } from "../Common/LlmChatOptionsButton.js";
@@ -433,13 +433,13 @@ export const ChatCommon = ({ ref, ...props }) => {
                 if (isLegacyAgentType(targetAgent)) {
                     // It's a legacy agent (these go directly to the LLM and are different from the Neuro-san agents).
                     // Send the chat query to the server. This will block until the stream ends from the server
-                    await sendLlmRequest(handleChunk, controller?.current.signal, legacyAgentEndpoint, extraParams, query, chatHistory.current);
+                    await sendLlmRequest(handleChunk, controller?.current.signal, legacyAgentEndpoint, extraParams, query, chatHistory.current, null, StreamingUnit.Chunk);
                 }
                 else {
                     // It's a Neuro-san agent.
                     // Some coded tools (data generator...) expect the username provided in slyData.
                     const slyDataWithUserName = { ...slyData.current, login: currentUser };
-                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, targetAgent, handleChunk, chatContext.current, slyDataWithUserName, currentUser);
+                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, targetAgent, handleChunk, chatContext.current, slyDataWithUserName, currentUser, StreamingUnit.Line);
                 }
             }
             catch (error) {

package/dist/components/Common/Navbar.js

@@ -87,17 +87,18 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, pathnam
     // Customer for branding
     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: {
             ...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 }), _jsx(Typography, { id: "customer-branding", sx: {
+        }, children: [settingsDialogOpen && (_jsx(SettingsDialog, { id: "settings-dialog", isOpen: settingsDialogOpen, logoServiceToken: logoServiceToken, onClose: () => setSettingsDialogOpen(false) })), _jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [_jsx(CustomerLogo, { logoServiceToken: logoServiceToken }), hasCustomer && (_jsx(Typography, { "data-testid": "customer-branding", sx: {
                             fontSize: "20px",
                             fontWeight: "600",
                             paddingLeft: "0.15rem",
                             width: "200px",
                             display: "flex",
                             alignItems: "center",
-                        }, children: customer })] }), _jsxs(Grid, { id: id, sx: { display: "flex", alignItems: "center" }, children: [customer ? getCognizantLogoImage() : null, _jsx(Typography, { id: "nav-bar-brand", sx: {
+                        }, children: customer }))] }), _jsxs(Grid, { id: id, sx: { display: "flex", alignItems: "center" }, children: [hasCustomer ? getCognizantLogoImage() : null, _jsx(Typography, { id: "nav-bar-brand", sx: {
                             ...MENU_ITEM_TEXT_PROPS,
                             marginLeft: "0.85rem",
                             fontSize: "16px",
@@ -142,15 +143,15 @@ export const Navbar = ({ authenticationType, id, logo, logoServiceToken, pathnam
                                     whiteSpace: "normal",
                                     wordWrap: "break-word",
                                     fontSize: "smaller",
-                                }, children: userInfo.name }), _jsx(MenuItem, { id: "auth-type-title", disabled: true, sx: { fontWeight: "bold" }, children: "Authentication" }), _jsx(MenuItem, { id: "authentication-type-menu-item", disabled: true, sx: { fontSize: "smaller" }, children: authenticationType }), authenticationEnabled() && (_jsx(MenuItem, { id: "user-sign-out", sx: { ...DISABLE_OUTLINE_PROPS, fontWeight: "bold" }, onClick: signOut, children: "Sign out" }))] })] })) : null, _jsx(Tooltip, { id: "dark-mode-toggle", title: customer
+                                }, children: userInfo.name }), _jsx(MenuItem, { id: "auth-type-title", disabled: true, sx: { fontWeight: "bold" }, children: "Authentication" }), _jsx(MenuItem, { id: "authentication-type-menu-item", disabled: true, sx: { fontSize: "smaller" }, children: authenticationType }), authenticationEnabled() && (_jsx(MenuItem, { id: "user-sign-out", sx: { ...DISABLE_OUTLINE_PROPS, fontWeight: "bold" }, onClick: signOut, children: "Sign out" }))] })] })) : null, _jsx(Tooltip, { id: "dark-mode-toggle", title: hasCustomer
                     ? "Dark mode toggle is not available when customer branding is active. Reset via Settings menu."
                     : "Toggle dark mode", children: _jsx(DarkModeIcon, { id: "dark-mode-icon", sx: {
                         marginRight: "1rem",
                         fontSize: "1rem",
-                        cursor: customer ? "not-allowed" : "pointer",
+                        cursor: hasCustomer ? "not-allowed" : "pointer",
                         color: darkMode ? "var(--bs-yellow)" : "var(--bs-gray-dark)",
                     }, onClick: () => {
-                        !customer && setMode(darkMode ? "light" : "dark");
+                        !hasCustomer && setMode(darkMode ? "light" : "dark");
                     } }) }), showSettingsButton && (_jsx(Tooltip, { title: "Settings", children: _jsx(SettingsIcon, { sx: {
                         ...MENU_ITEM_TEXT_PROPS,
                         marginRight: "1rem",

package/dist/components/MultiAgentAccelerator/AgentNode.js

@@ -113,8 +113,8 @@ export const AgentNode = (props) => {
         const colorIndex = depth % palette.length;
         backgroundColor = palette[colorIndex];
     }
-    // Hide handles when awaiting LLM response ("zen mode")
-    const handleVisibility = isAwaitingLlm ? "none" : "block";
+    // Hide handles when awaiting LLM response ("zen mode").
+    const handleVisibility = isAwaitingLlm ? "hidden" : "visible";
     // Determine which icon to display based on the agent type whether it is Frontman or not
     const getDisplayAsIcon = () => {
         const id = `${agentId}-icon`;
@@ -156,7 +156,7 @@ export const AgentNode = (props) => {
                     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: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-right-handle`, position: Position.Right, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-top-handle`, position: Position.Top, type: "source", style: { display: handleVisibility } }), _jsx(Handle, { id: `${agentId}-bottom-handle`, position: Position.Bottom, type: "source", style: { display: handleVisibility } })] }), _jsx(Tooltip, { id: `${agentId}-tooltip`, title: agentName, placement: "top", disableInteractive: true, children: _jsx(Typography, { id: `${agentId}-name`, sx: {
+                }, 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",

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 import StopCircle from "@mui/icons-material/StopCircle";
 import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
 import Grid from "@mui/material/Grid";
 import Slide from "@mui/material/Slide";
 import { ReactFlowProvider } from "@xyflow/react";
@@ -26,7 +25,7 @@ import { getUpdatedAgentCounts } from "./AgentCounts.js";
 import { AgentFlow } from "./AgentFlow.js";
 import { TEMPORARY_NETWORK_FOLDER } from "./const.js";
 import { Sidebar } from "./Sidebar/Sidebar.js";
-import { extractReservations } from "./TemporaryNetworks.js";
+import { extractNetworkHocon, extractReservations } from "./TemporaryNetworks.js";
 import { getAgentIconSuggestions, getAgentNetworks, getConnectivity, getNetworkIconSuggestions, } from "../../controller/agent/Agent.js";
 import { useSettingsStore } from "../../state/Settings.js";
 import { useTempNetworksStore } from "../../state/TemporaryNetworks.js";
@@ -35,7 +34,6 @@ import { ChatCommon } from "../AgentChat/ChatCommon.js";
 import { SmallLlmChatButton } from "../AgentChat/LlmChatButton.js";
 import { chatMessageFromChunk, cleanUpAgentName, removeTrailingUuid } from "../AgentChat/Utils.js";
 import { ConfirmationModal } from "../Common/ConfirmationModal.js";
-import { MUIAlert } from "../Common/MUIAlert.js";
 import { closeNotification, NotificationType, sendNotification } from "../Common/notification.js";
 // Display expired temporary networks for this amount of time after they expire so users can see what happened
 const GRACE_PERIOD_MS = 5 * 60 * 1000; // 5 minutes
@@ -45,9 +43,13 @@ const GROW_ANIMATION_TIME_MS = 800;
  * Helper function to convert agent reservations received from the backend into temporary networks that can be displayed
  * in the tree.
  * @param agentReservations List of "agent reservations" (temporary networks) received from the backend
+ * @param networkHocon Optional network HOCON string that may be included in the same message as the
+ * reservations. Note: for now we assume that all reservations are associated with the same network definition.
+ * This will fail if ever we get multiple reservations for different networks in a single chat stream, but that is
+ * not a valid scenario currently; we are focusing on Agent Network Design which has a simple output.
  * @returns List of TemporaryNetwork objects that can be displayed in the UI
  */
-const convertReservationsToNetworks = (agentReservations) => {
+const convertReservationsToNetworks = (agentReservations, networkHocon) => {
     return agentReservations.map((reservation) => ({
         reservation,
         agentInfo: {
@@ -55,6 +57,7 @@ const convertReservationsToNetworks = (agentReservations) => {
             origin: reservation.reservation_id,
             status: "active",
         },
+        networkHocon,
     }));
 };
 /**
@@ -90,8 +93,6 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [networkToBeDeleted, setNetworkToBeDeleted] = useState(null);
     // State to hold thought bubble edges - avoids duplicates across layout recalculations
     const [thoughtBubbleEdges, setThoughtBubbleEdges] = useState(new Map());
-    // For controlling alert when temporary network is created
-    const [alertContents, setAlertContents] = useState(null);
     const customURLCallback = useCallback((url) => {
         setNeuroSanURL(url || backendNeuroSanApiUrl);
         setCustomURLLocalStorage(url === "" ? null : url);
@@ -244,7 +245,9 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         const reservationsResult = extractReservations(chatMessage);
         // Handle agent reservations (temporary networks) that come in through the chat stream.
         if (reservationsResult?.length > 0) {
-            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult);
+            // Retrieve network definition, if present
+            const networkHocon = extractNetworkHocon(chatMessage);
+            const newTemporaryNetworks = convertReservationsToNetworks(reservationsResult, networkHocon);
             const currentNetworks = useTempNetworksStore.getState().tempNetworks;
             useTempNetworksStore.getState().setTempNetworks([...currentNetworks, ...newTemporaryNetworks]);
             // record the new temporary networks so we can select them for the user. For now, we only
@@ -258,7 +261,6 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         agentCountsRef.current = new Map();
         // Reset newly added temporary networks
         setNewlyAddedTemporaryNetworks(new Set());
-        setAlertContents(null);
         // Show info popup only once per session
         if (!haveShownPopup) {
             sendNotification(NotificationType.info, "Agents working", "Click the stop button or hit Escape to exit.");
@@ -268,31 +270,11 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
         setIsStreaming(true);
     }, [haveShownPopup]);
     const onStreamingComplete = useCallback(() => {
-        const network = newlyAddedTemporaryNetworks?.values().next().value;
-        if (network?.length > 0) {
-            // We show an Alert after streaming completes (in case of Zen mode where the user might miss it)
-            const agentNameDisplay = cleanUpAgentName(removeTrailingUuid(network));
-            setAlertContents(`A temporary network "${agentNameDisplay}" has been created.`);
-        }
         // When streaming is complete, clean up any refs and state
         conversationsRef.current = null;
         setCurrentConversations(null);
         resetState();
     }, [newlyAddedTemporaryNetworks]);
-    useEffect(() => {
-        if (alertContents?.length > 0) {
-            // Set a timer to clear the alert after a few seconds so it doesn't overstay its welcome
-            const timeoutId = window.setTimeout(() => {
-                setAlertContents(null);
-            }, 10_000);
-            return () => {
-                window.clearTimeout(timeoutId);
-            };
-        }
-        else {
-            return undefined;
-        }
-    }, [alertContents]);
     const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
     const handleDeleteNetwork = (networkId, isExpired) => {
         if (isExpired) {
@@ -354,8 +336,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             setNetworkToBeDeleted(null);
             setConfirmationModalOpen(false);
         }, title: "Delete Network" })) : null;
-    const getAlert = () => (_jsx(Collapse, { in: alertContents?.length > 0, timeout: 1000, children: _jsx(MUIAlert, { id: "temporary-network-created-alert", closeable: true, severity: "success", sx: { marginTop: "1rem", marginBottom: 0 }, children: alertContents }) }));
-    return (_jsxs(_Fragment, { children: [getAlert(), getConfirmationModal(), _jsxs(Grid, { id: "multi-agent-accelerator-grid", container: true, columns: 18, sx: {
+    return (_jsxs(_Fragment, { children: [getConfirmationModal(), _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

@@ -6,6 +6,7 @@ export interface AgentNetworkNodeProps extends TreeItemProps {
     readonly onDeleteNetwork?: (network: string, isExpired: boolean) => void;
     readonly networkIconSuggestions: Record<string, string>;
     readonly temporaryNetworkExpirationTimes?: Record<string, Date>;
+    readonly temporaryNetworkHoconStrings?: Record<string, string | null>;
 }
 /**
  * Custom Tree Item for MUI RichTreeView to display agent networks with tags

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

@@ -4,14 +4,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 Box from "@mui/material/Box";
 import Chip from "@mui/material/Chip";
+import IconButton from "@mui/material/IconButton";
 import { useTheme } from "@mui/material/styles";
 import Tooltip from "@mui/material/Tooltip";
 import { TreeItemContent, TreeItemGroupTransition, TreeItemLabel, TreeItemRoot, } from "@mui/x-tree-view/TreeItem";
 import { TreeItemProvider } from "@mui/x-tree-view/TreeItemProvider";
 import { useTreeItem } from "@mui/x-tree-view/useTreeItem";
 import { useRef } from "react";
+import { downloadFile, toSafeFilename } from "../../../utils/File.js";
 import { cleanUpAgentName } from "../../AgentChat/Utils.js";
 // Palette of colors we can use for tags
 const TAG_COLORS = [
@@ -40,7 +43,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, }) => {
+export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networkIconSuggestions, nodeIndex, onDeleteNetwork, 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;
@@ -66,6 +69,7 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
     const expirationTime = temporaryNetworkExpirationTimes?.[itemId];
     const isTemporaryNetwork = Boolean(expirationTime);
     const isExpired = isChild && isTemporaryNetwork && isTemporaryNetworkExpired(expirationTime);
+    const networkHocon = isTemporaryNetwork ? temporaryNetworkHoconStrings?.[itemId] : null;
     const iconNameSuggestion = isTemporaryNetwork ? "HourglassTop" : isChild ? networkIconSuggestions?.[itemId] : null;
     let muiIconElement = null;
     if (iconNameSuggestion && MuiIcons[iconNameSuggestion]) {
@@ -93,7 +97,22 @@ export const AgentNetworkTreeItem = ({ children, disabled, itemId, label, networ
                                             .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] }), isChild && isTemporaryNetwork && (_jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
+                                            } }, tag))), placement: "right", arrow: true, children: _jsx(BookmarkIcon, { sx: { fontSize: "0.75rem", color: "var(--bs-accent1-medium)" } }) })) : null, isTemporaryNetwork && networkHocon && (_jsx(Tooltip, { title: isExpired ? "Network expired" : "Download network definition", children: _jsx("span", { children: _jsx(IconButton, { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    if (isExpired) {
+                                                        return;
+                                                    }
+                                                    const fileName = `${toSafeFilename(labelString)}.hocon`;
+                                                    downloadFile(networkHocon, fileName);
+                                                }, disabled: isExpired, "aria-label": "Download network definition", 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(DownloadIcon, { sx: { fontSize: "0.75rem" } }) }) }) }))] }), isChild && isTemporaryNetwork && (_jsx(Tooltip, { title: "Delete network", children: _jsx(Delete, { onClick: (e) => {
                                         e.stopPropagation();
                                         onDeleteNetwork?.(itemId, isExpired);
                                     }, sx: {

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

@@ -203,6 +203,10 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
         acc[tempNetwork.agentInfo.agent_name] = new Date(tempNetwork.reservation.expiration_time_in_seconds * 1000);
         return acc;
     }, {});
+    const temporaryNetworkHoconStrings = temporaryNetworks.reduce((acc, tempNetwork) => {
+        acc[tempNetwork.agentInfo.agent_name] = tempNetwork.networkHocon;
+        return acc;
+    }, {});
     const [selectedItem, setSelectedItem] = useState(null);
     const handleSelectedItemsChange = (_event, itemId) => {
         if (!itemId) {
@@ -263,6 +267,7 @@ export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaiti
                                 nodeIndex,
                                 onDeleteNetwork,
                                 temporaryNetworkExpirationTimes,
+                                temporaryNetworkHoconStrings,
                             },
                         } }, Object.keys(networkIconSuggestions || {}).length)] }), _jsxs(Popover, { id: "agent-network-settings-popover", open: settingsPopoverOpen, anchorEl: settingsAnchorEl, onClose: () => handleSettingsClose(true), anchorOrigin: {
                     vertical: "bottom",

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

@@ -24,3 +24,10 @@ export type AgentReservation = {
  * if the message is not of the expected type.
  */
 export declare const extractReservations: (message: ChatMessage) => AgentReservation[];
+/**
+ * Extracts the agent network HOCON from a chat message, if it exists.
+ * @param message The chat message to extract network HOCON from.
+ * We expect the network definition to be present in messages of type AGENT_FRAMEWORK only.
+ * @return The network HOCON as a string, or null if not found or not the right type of message.
+ */
+export declare const extractNetworkHocon: (message: ChatMessage) => string | null;

package/dist/components/MultiAgentAccelerator/TemporaryNetworks.js

@@ -1,6 +1,5 @@
+import { AGENT_NETWORK_HOCON, AGENT_RESERVATIONS_KEY } from "./const.js";
 import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
-// We expect the agent reservations to be stored in sly_data under this key
-const AGENT_RESERVATIONS_KEY = "agent_reservations";
 /**
  * Extracts agent reservations from a chat message, if they exist.
  * @param message The chat message to extract reservations from. We expect reservations to be present in messages of
@@ -18,3 +17,19 @@ export const extractReservations = (message) => {
         return [];
     }
 };
+/**
+ * Extracts the agent network HOCON from a chat message, if it exists.
+ * @param message The chat message to extract network HOCON from.
+ * We expect the network definition to be present in messages of type AGENT_FRAMEWORK only.
+ * @return The network HOCON as a string, or null if not found or not the right type of message.
+ */
+export const extractNetworkHocon = (message) => {
+    // Check for agent network HOCON in sly_data
+    if (message?.type === ChatMessageType.AGENT_FRAMEWORK && message?.sly_data?.[AGENT_NETWORK_HOCON]) {
+        return message.sly_data[AGENT_NETWORK_HOCON];
+    }
+    else {
+        // Not the type of message that would contain a network HOCON, or no network HOCON found, return null
+        return null;
+    }
+};

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

@@ -3,3 +3,5 @@ export declare const DEFAULT_FRONTMAN_Y_POS = 450;
 export declare const BASE_RADIUS = 100;
 export declare const LEVEL_SPACING = 150;
 export declare const TEMPORARY_NETWORK_FOLDER = "temporary";
+export declare const AGENT_RESERVATIONS_KEY = "agent_reservations";
+export declare const AGENT_NETWORK_HOCON = "agent_network_hocon_text";

package/dist/components/MultiAgentAccelerator/const.js

@@ -23,3 +23,7 @@ export const LEVEL_SPACING = 150;
 // they come from the backend, but we need to put them somewhere in the UI, and this makes it clear that they're
 // temporary.
 export const TEMPORARY_NETWORK_FOLDER = "temporary";
+// We expect the agent reservations to be stored in sly_data under this key
+export const AGENT_RESERVATIONS_KEY = "agent_reservations";
+// We expect the agent network HOCON to be stored in sly_data under this key, if it is provided by the backend
+export const AGENT_NETWORK_HOCON = "agent_network_hocon_text";

package/dist/controller/agent/Agent.d.ts

@@ -1,4 +1,5 @@
 import { AgentInfo, ChatContext, ChatResponse, ConnectivityResponse, FunctionResponse } from "../../generated/neuro-san/NeuroSanClient.js";
+import { StreamingUnit } from "../llm/LlmChat.js";
 import { AgentIconSuggestions } from "../Types/AgentIconSuggestions.js";
 import { BrandingSuggestions } from "../Types/Branding.js";
 import { NetworkIconSuggestions } from "../Types/NetworkIconSuggestions.js";
@@ -44,17 +45,18 @@ export declare const getAgentNetworks: (url: string) => Promise<readonly AgentIn
  * @param url The neuro-san server URL
  * @param signal The AbortSignal to use for the request. Used to cancel the request on user demand
  * @param userInput The user input to send to the agent.
- * In practice this "input" will actually be the output from one of the previous agents such as the data generator
- * or scoping agent.
- * @param targetAgent The target agent to send the request to. See CombinedAgentType for the list of available agents.
+ * @param targetAgent The target agent to send the request to. See CombinedAgentType for some available agents, or
+ * could be a string with an arbitrary agent name.
  * @param callback The callback function to be called when a chunk of data is received from the server.
  * @param chatContext "Opaque" conversation context for maintaining conversation state with the server. Neuro-san
  * agents do not use ChatHistory directly, but rather, ChatContext, which is a collection of ChatHistory objects.
  * @param slyData Data items that should not be sent to the LLM. Generated by the server.
  * @param userId Current user ID in the session.
+ * @param streamingUnit Determines whether to send data to the callback as soon as it's received (Chunk)
+ * or to accumulate it until a newline is received (Line).
  * @returns The response from the agent network.
  */
-export declare const sendChatQuery: (url: string, signal: AbortSignal, userInput: string, targetAgent: string, callback: (chunk: string) => void, chatContext: ChatContext, slyData: Record<string, unknown>, userId: string) => Promise<ChatResponse>;
+export declare const sendChatQuery: (url: string, signal: AbortSignal, userInput: string, targetAgent: string, callback: (chunk: string) => void, chatContext: ChatContext, slyData: Record<string, unknown>, userId: string, streamingUnit?: StreamingUnit) => Promise<ChatResponse>;
 /**
  * Gets information on the agent and tool connections within a network
  * @param url The neuro-san server URL

package/dist/controller/agent/Agent.js

@@ -20,7 +20,7 @@ import { TEMPORARY_NETWORK_FOLDER } from "../../components/MultiAgentAccelerator
 import { ApiPaths, 
 // eslint-disable-next-line camelcase
 ChatFilterChat_filter_type, ChatMessageType, } from "../../generated/neuro-san/NeuroSanClient.js";
-import { sendLlmRequest } from "../llm/LlmChat.js";
+import { sendLlmRequest, StreamingUnit } from "../llm/LlmChat.js";
 /**
  * Insert the target agent name into the path. The paths Api enum contains values like:
  * <code>"/api/v1/{agent_name}/connectivity"</code> so unfortunately we need to do a `replace()` to insert the target
@@ -139,17 +139,18 @@ const handleJsonLines = (chunk, callback) => {
  * @param url The neuro-san server URL
  * @param signal The AbortSignal to use for the request. Used to cancel the request on user demand
  * @param userInput The user input to send to the agent.
- * In practice this "input" will actually be the output from one of the previous agents such as the data generator
- * or scoping agent.
- * @param targetAgent The target agent to send the request to. See CombinedAgentType for the list of available agents.
+ * @param targetAgent The target agent to send the request to. See CombinedAgentType for some available agents, or
+ * could be a string with an arbitrary agent name.
  * @param callback The callback function to be called when a chunk of data is received from the server.
  * @param chatContext "Opaque" conversation context for maintaining conversation state with the server. Neuro-san
  * agents do not use ChatHistory directly, but rather, ChatContext, which is a collection of ChatHistory objects.
  * @param slyData Data items that should not be sent to the LLM. Generated by the server.
  * @param userId Current user ID in the session.
+ * @param streamingUnit Determines whether to send data to the callback as soon as it's received (Chunk)
+ * or to accumulate it until a newline is received (Line).
  * @returns The response from the agent network.
  */
-export const sendChatQuery = async (url, signal, userInput, targetAgent, callback, chatContext, slyData, userId) => {
+export const sendChatQuery = async (url, signal, userInput, targetAgent, callback, chatContext, slyData, userId, streamingUnit = StreamingUnit.Chunk) => {
     // Create request
     const userMessage = {
         type: ChatMessageType.HUMAN,
@@ -164,7 +165,7 @@ export const sendChatQuery = async (url, signal, userInput, targetAgent, callbac
     };
     const fetchUrl = `${url}${insertTargetAgent(targetAgent, ApiPaths.AgentService_StreamingChat)}`;
     const requestRecord = Object.entries(agentChatRequest).reduce((acc, [key, value]) => (value ? { ...acc, [key]: value } : acc), {});
-    return sendLlmRequest((chunk) => handleJsonLines(chunk, callback), signal, fetchUrl, requestRecord, null, null, userId);
+    return sendLlmRequest((chunk) => handleJsonLines(chunk, callback), signal, fetchUrl, requestRecord, null, null, userId, streamingUnit);
 };
 /**
  * Gets information on the agent and tool connections within a network

package/dist/controller/llm/LlmChat.d.ts

@@ -3,6 +3,14 @@
  * Allows streaming callback for a more interactive experience.
  */
 import { BaseMessage } from "@langchain/core/messages";
+/**
+ * Determines whether to send data to the callback as soon as it's received (Chunk) or to accumulate it
+ * until a newline is received (Line).
+ */
+export declare enum StreamingUnit {
+    Chunk = 0,
+    Line = 1
+}
 /**
  * Send a request to an LLM and stream the response to a callback.
  * @param callback The callback function to be called when a chunk of data is received from the server.
@@ -12,7 +20,9 @@ import { BaseMessage } from "@langchain/core/messages";
  * @param userQuery The user query to send to the server (sometimes part of chat history instead).
  * @param chatHistory The chat history to be sent to the server. Contains user requests and server responses.
  * @param userId Current user ID in the session.
+ * @param streamingUnit Determines whether to send data to the callback as soon as it's received (Chunk)
+ * or to accumulate it until a newline is received (Line). Default is Chunk.
  * @returns Either the JSON result of the call, or, if a callback is provided, nothing, but tokens are streamed
  * to the callback as they are received from the server.
  */
-export declare const sendLlmRequest: (callback: (token: string) => void, signal: AbortSignal, fetchUrl: string, params: Record<string, unknown>, userQuery?: string, chatHistory?: BaseMessage[], userId?: string) => Promise<any>;
+export declare const sendLlmRequest: (callback: (token: string) => void, signal: AbortSignal, fetchUrl: string, params: Record<string, unknown>, userQuery?: string, chatHistory?: BaseMessage[], userId?: string, streamingUnit?: StreamingUnit) => Promise<any>;

package/dist/controller/llm/LlmChat.js

@@ -13,6 +13,61 @@ 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.
 */
+/**
+ * Determines whether to send data to the callback as soon as it's received (Chunk) or to accumulate it
+ * until a newline is received (Line).
+ */
+export var StreamingUnit;
+(function (StreamingUnit) {
+    StreamingUnit[StreamingUnit["Chunk"] = 0] = "Chunk";
+    StreamingUnit[StreamingUnit["Line"] = 1] = "Line";
+})(StreamingUnit || (StreamingUnit = {}));
+const handleStreamingCallback = async (res, callback, streamingUnit) => {
+    const reader = res.body.getReader();
+    const utf8decoder = new TextDecoder("utf8");
+    let buffer = "";
+    while (true) {
+        const { done, value } = await reader.read();
+        // If the caller wants to process chunk by chunk, send it to the callback immediately.
+        if (streamingUnit === StreamingUnit.Chunk) {
+            if (done) {
+                break; // End of stream
+            }
+            // Decode chunk from server and send to callback
+            const chunk = utf8decoder.decode(value);
+            callback(chunk);
+        }
+        else {
+            // Otherwise, accumulate in buffer until we have a full line (delimited by newline character)
+            // to send to the callback.
+            if (done) {
+                // Handle any remaining data in buffer (last line without newline)
+                if (buffer.trim().length > 0) {
+                    callback(buffer);
+                }
+                break; // End of stream
+            }
+            // Decode chunk from server. Note: pass stream: true to handle multibyte characters that may be split
+            // across chunks
+            const chunk = utf8decoder.decode(value, { stream: true });
+            // Append chunk to buffer
+            buffer += chunk;
+            // Process all complete lines in the buffer
+            let newlineIndex;
+            while ((newlineIndex = buffer.indexOf("\n")) !== -1) {
+                // Extract the complete line (without the newline)
+                const line = buffer.substring(0, newlineIndex).trim();
+                // Keep the rest for next iteration
+                buffer = buffer.substring(newlineIndex + 1);
+                // Skip empty lines
+                if (line.length > 0) {
+                    // Send the current line
+                    callback(line);
+                }
+            }
+        }
+    }
+};
 /**
  * Send a request to an LLM and stream the response to a callback.
  * @param callback The callback function to be called when a chunk of data is received from the server.
@@ -22,10 +77,12 @@ limitations under the License.
  * @param userQuery The user query to send to the server (sometimes part of chat history instead).
  * @param chatHistory The chat history to be sent to the server. Contains user requests and server responses.
  * @param userId Current user ID in the session.
+ * @param streamingUnit Determines whether to send data to the callback as soon as it's received (Chunk)
+ * or to accumulate it until a newline is received (Line). Default is Chunk.
  * @returns Either the JSON result of the call, or, if a callback is provided, nothing, but tokens are streamed
  * to the callback as they are received from the server.
  */
-export const sendLlmRequest = async (callback, signal, fetchUrl, params, userQuery, chatHistory, userId) => {
+export const sendLlmRequest = async (callback, signal, fetchUrl, params, userQuery, chatHistory, userId, streamingUnit = StreamingUnit.Chunk) => {
     const res = await fetch(fetchUrl, {
         method: "POST",
         headers: {
@@ -45,18 +102,8 @@ export const sendLlmRequest = async (callback, signal, fetchUrl, params, userQue
         throw new Error(`Failed to fetch: ${res.statusText} error code ${res.status}`);
     }
     if (callback) {
-        const reader = res.body.getReader();
-        const utf8decoder = new TextDecoder("utf8");
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) {
-                break; // End of stream
-            }
-            // Decode chunk from server
-            const chunk = utf8decoder.decode(value);
-            // Send current chunk to callback
-            callback(chunk);
-        }
+        // If a callback was provided, we assume the response is a stream and handle it accordingly
+        await handleStreamingCallback(res, callback, streamingUnit);
         return null;
     }
     else {

package/dist/generated/neuro-san/NeuroSanClient.d.ts

@@ -193,8 +193,10 @@ export interface components {
             readonly description?: string;
             /** @description Optional map of parameters passed in via the natural-language chat text channel that the agent needs in order to work. This is really a pydantic/OpenAI function description, which is a bit too complex to specify directly in protobuf. */
             readonly parameters?: Record<string, unknown>;
-            /** @description Optional map of parameters passed in via the sly_data dictionary private data channel that the agent needs in order to work.  Just like the parameters above, this is really a pydantic/OpenAI function description, which is a bit too complex to specify directly in protobuf. */
+            /** @description This is a description of what data is expected to come *in* via the sly_data channel. Optional map of parameters passed in via the sly_data dictionary private data channel that the agent needs in order to work.  Just like the parameters above, this is really a pydantic/OpenAI function description, which is a bit too complex to specify directly in protobuf. */
             readonly sly_data_schema?: Record<string, unknown>;
+            /** @description This is a description of what data is expected to come *out* via the sly_data channel. Optional map of parameters returned via the sly_data dictionary private data channel that the agent will return after its work.  Just like the parameters above, this is really a pydantic/OpenAI function description, which is a bit too complex to specify directly in protobuf. */
+            readonly sly_data_output_schema?: Record<string, unknown>;
         };
         /** @description Response structure for Function gRPC method */
         readonly FunctionResponse: {

package/dist/state/TemporaryNetworks.d.ts

@@ -7,6 +7,7 @@ type AgentReservation = {
 export type TemporaryNetwork = {
     readonly reservation: AgentReservation;
     readonly agentInfo: AgentInfo;
+    readonly networkHocon?: string | null;
 };
 /**
  * Zustand state store for temporary networks, such as vibe coded networks created by the user.