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

package/dist/components/AgentChat/ChatCommon/ChatHistory.d.ts

@@ -0,0 +1,17 @@
+import { BaseMessage } from "@langchain/core/messages";
+import { FC } from "react";
+interface ChatHistoryProps {
+    readonly agentDisplayName: string;
+    readonly agentImage: string;
+    readonly chatHistoryKey: string;
+    readonly currentUser: string;
+    readonly id: string;
+    readonly messages: BaseMessage[];
+    readonly targetAgent: string;
+    readonly userImage: string;
+}
+/**
+ * Component for displaying chat history from previous interactions with the agent.
+ */
+export declare const ChatHistory: FC<ChatHistoryProps>;
+export {};

package/dist/components/AgentChat/ChatCommon/ChatHistory.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UserQueryDisplay } from "./UserQueryDisplay.js";
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
+import { hashString } from "../../../utils/text.js";
+import { MUIAccordion } from "../../Common/MUIAccordion.js";
+// #endregion: Types
+/**
+ * Component for displaying chat history from previous interactions with the agent.
+ */
+export const ChatHistory = ({ agentDisplayName, agentImage, chatHistoryKey, currentUser, id, messages, targetAgent, userImage, }) => (_jsx(MUIAccordion, { id: id, sx: { marginBottom: "2rem", marginTop: "1rem" }, items: [
+        {
+            title: "Chat History",
+            content: messages.map((message) => {
+                const itemKey = hashString(message.text + message.type + message.id);
+                if (message.type.toUpperCase() === ChatMessageType.HUMAN) {
+                    return (_jsx(UserQueryDisplay, { sx: { opacity: 0.5 }, title: currentUser, userImage: userImage, userQuery: message.text }, itemKey));
+                }
+                else if (message.type.toUpperCase() === ChatMessageType.AI) {
+                    return (_jsx(UserQueryDisplay, { sx: { opacity: 0.5 }, title: targetAgent, userImage: agentImage, userQuery: `${agentDisplayName}: ${message.text}` }, itemKey));
+                }
+                else {
+                    console.warn(`Unrecognized message type in chat history: ${message.type}`);
+                    return null;
+                }
+            }),
+        },
+    ] }, chatHistoryKey));

package/dist/components/AgentChat/{ControlButtons.d.ts → ChatCommon/ControlButtons.d.ts}

@@ -1,6 +1,6 @@
 import { FC } from "react";
 interface ControlButtonsProps {
-    clearChatOnClickCallback: () => void;
+    handleClearChat: () => void;
     enableClearChatButton: boolean;
     isAwaitingLlm: boolean;
     handleSend: (query: string) => void;

package/dist/components/AgentChat/ChatCommon/ControlButtons.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import DeleteOutline from "@mui/icons-material/DeleteOutline";
+import Loop from "@mui/icons-material/Loop";
+import StopCircle from "@mui/icons-material/StopCircle";
+import { SmallLlmChatButton } from "../Common/LlmChatButton.js";
+// #endregion: Types
+/**
+ * Generate the Control Buttons for a chat window.
+ * @returns A fragment containing the Control Buttons.
+ */
+export const ControlButtons = ({ handleClearChat, enableClearChatButton, isAwaitingLlm, handleSend, handleStop, previousUserQuery, shouldEnableRegenerateButton, }) => (_jsxs(_Fragment, { children: [!isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Clear Chat", disabled: !enableClearChatButton, id: "clear-chat-button", onClick: handleClearChat, posBottom: 8, posRight: 65, children: _jsx(DeleteOutline, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Stop", disabled: !isAwaitingLlm, id: "stop-output-button", onClick: () => handleStop(), posBottom: 8, posRight: 23, children: _jsx(StopCircle, { fontSize: "small", id: "stop-button-icon", sx: { color: "var(--bs-white)" } }) })), !isAwaitingLlm && (_jsx(SmallLlmChatButton, { "aria-label": "Regenerate", disabled: !shouldEnableRegenerateButton, id: "regenerate-output-button", onClick: () => handleSend(previousUserQuery), posBottom: 8, posRight: 23, children: _jsx(Loop, { fontSize: "small", id: "generate-icon", sx: { color: "var(--bs-white)" } }) }))] }));

package/dist/components/AgentChat/{FormattedMarkdown.js → ChatCommon/FormattedMarkdown.js}

@@ -19,7 +19,7 @@ import ReactMarkdown from "react-markdown";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
-import { hashString } from "../../utils/text.js";
+import { hashString } from "../../../utils/text.js";
 /**
  * Format the output to ensure that text nodes are formatted as Markdown but other nodes are passed along as-is.
  *

package/dist/components/AgentChat/ChatCommon/SampleQueries.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export declare const MAX_SAMPLE_QUERIES = 5;
+export declare const QUERY_TRUNCATE_LENGTH = 80;
+interface SampleQueriesProps {
+    readonly disabled: boolean;
+    readonly handleSend: (query: string) => void;
+    readonly sampleQueries: string[];
+}
+/**
+ * Render sample queries as clickable chips. Agents may or may not have sample queries defined.
+ * @param sampleQueries The sample queries to render (from "connectivity" API)
+ * @returns A ReactNode representing the sample queries as clickable chips. If a user clicks a chip, it will
+ * send the query to the agent.
+ */
+export declare const SampleQueries: FC<SampleQueriesProps>;
+export {};

package/dist/components/AgentChat/ChatCommon/SampleQueries.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import Tooltip from "@mui/material/Tooltip";
+import { hashString } from "../../../utils/text.js";
+// Maximum number of sample queries to show
+export const MAX_SAMPLE_QUERIES = 5;
+// Maximum length of query to show in sample query chips
+export const QUERY_TRUNCATE_LENGTH = 80;
+/**
+ * Render sample queries as clickable chips. Agents may or may not have sample queries defined.
+ * @param sampleQueries The sample queries to render (from "connectivity" API)
+ * @returns A ReactNode representing the sample queries as clickable chips. If a user clicks a chip, it will
+ * send the query to the agent.
+ */
+export const SampleQueries = ({ disabled, handleSend, sampleQueries }) => sampleQueries?.length > 0 ? (_jsx(Box, { id: "sample-queries-box", sx: { marginTop: "2rem", marginBottom: "1rem" }, children: sampleQueries.slice(0, MAX_SAMPLE_QUERIES).map((query) => {
+        const hashedQuery = hashString(query);
+        return (_jsx(Tooltip, { title: `Click to send query: "${query}"`, children: _jsx(Chip, { disabled: disabled, label: query.length > QUERY_TRUNCATE_LENGTH
+                    ? `${query.slice(0, QUERY_TRUNCATE_LENGTH)}...`
+                    : query, onClick: async () => {
+                    handleSend(query);
+                }, sx: {
+                    color: "var(--bs-white)",
+                    marginRight: "1rem",
+                    marginBottom: "1rem",
+                    backgroundColor: "var(--bs-accent1-medium)",
+                    "&:hover": { backgroundColor: "var(--bs-accent1-dark)" },
+                } }) }, `tooltip-${hashedQuery}`));
+    }) })) : null;

package/dist/components/AgentChat/{SendButton.js → ChatCommon/SendButton.js}

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import SendIcon from "@mui/icons-material/Send";
-import { LlmChatButton } from "./LlmChatButton.js";
+import { LlmChatButton } from "../Common/LlmChatButton.js";
 // #endregion: Types
 /**
  * Generate the Send Button for a chat window.

package/dist/components/AgentChat/ChatCommon/UserQueryDisplay.d.ts

@@ -0,0 +1,7 @@
+import { SxProps } from "@mui/material/styles";
+export declare const UserQueryDisplay: ({ sx, userQuery, title, userImage, }: {
+    sx?: SxProps;
+    userQuery: string;
+    title: string;
+    userImage: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AgentChat/{UserQueryDisplay.js → ChatCommon/UserQueryDisplay.js}

@@ -14,8 +14,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
-import { DEFAULT_USER_IMAGE } from "../../const.js";
+import { DEFAULT_USER_IMAGE } from "../../../const.js";
 // #region: Styled Components
 const UserQueryContainer = styled("div")(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
@@ -26,6 +27,6 @@ const UserQueryContainer = styled("div")(({ theme }) => ({
     padding: "10px",
 }));
 // #endregion: Styled Components
-export const UserQueryDisplay = ({ userQuery, title, userImage, }) => {
-    return (_jsx("div", { id: "user-query-div", style: { marginBottom: "1rem" }, children: _jsxs(UserQueryContainer, { id: "user-query-container", children: [_jsx("img", { id: "user-query-image", src: userImage || DEFAULT_USER_IMAGE, width: 30, height: 30, title: title, alt: "", role: "img" }), _jsx("span", { id: "user-query", style: { marginLeft: "0.625rem", marginTop: "0.125rem" }, children: userQuery })] }) }));
+export const UserQueryDisplay = ({ sx, userQuery, title, userImage, }) => {
+    return (_jsx(Box, { id: "user-query-div", sx: [{ marginBottom: "1rem" }, ...(Array.isArray(sx) ? sx : [sx])], children: _jsxs(UserQueryContainer, { id: "user-query-container", children: [_jsx("img", { id: "user-query-image", src: userImage || DEFAULT_USER_IMAGE, width: 30, height: 30, title: title, alt: "", role: "img", style: { alignSelf: "center" } }), _jsx("span", { id: "user-query", style: { marginLeft: "0.625rem", marginTop: "0.125rem" }, children: userQuery })] }) }));
 };

package/dist/components/AgentChat/{LlmChatButton.d.ts → Common/LlmChatButton.d.ts}

@@ -3,6 +3,6 @@ type LLMChatGroupConfigBtnProps = {
     posRight?: number;
     posBottom?: number;
 };
-export declare const LlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
-export declare const SmallLlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export declare const LlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "color" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "size" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export declare const SmallLlmChatButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "color" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "size" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
 export {};

package/dist/components/AgentChat/{Utils.d.ts → Common/Utils.d.ts}

@@ -1,4 +1,4 @@
-import { ChatMessage, ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+import { ChatMessage, ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 export declare const KNOWN_MESSAGE_TYPES: ChatMessageType[];
 export declare const KNOWN_MESSAGE_TYPES_FOR_PLASMA: ChatMessageType[];
 export declare const chatMessageFromChunk: (chunk: string) => ChatMessage | null;

package/dist/components/AgentChat/{Utils.js → Common/Utils.js}

@@ -15,12 +15,13 @@ limitations under the License.
 */
 import capitalize from "lodash-es/capitalize.js";
 import startCase from "lodash-es/startCase.js";
-import { ChatMessageType } from "../../generated/neuro-san/NeuroSanClient.js";
+import { ChatMessageType } from "../../../generated/neuro-san/NeuroSanClient.js";
 // We ignore any messages that are not of these types
 export const KNOWN_MESSAGE_TYPES = [
     ChatMessageType.AI,
     ChatMessageType.AGENT,
     ChatMessageType.AGENT_FRAMEWORK,
+    ChatMessageType.AGENT_PROGRESS,
     ChatMessageType.HUMAN,
     ChatMessageType.SYSTEM,
 ];

package/dist/components/AgentChat/VoiceChat/MicrophoneButton.js

@@ -17,8 +17,8 @@ limitations under the License.
 import MicNoneIcon from "@mui/icons-material/MicNone";
 import MicOffIcon from "@mui/icons-material/MicOff";
 import Tooltip from "@mui/material/Tooltip";
-import { LlmChatButton } from "../LlmChatButton.js";
 import { checkSpeechSupport, toggleListening } from "./VoiceChat.js";
+import { LlmChatButton } from "../Common/LlmChatButton.js";
 // #endregion: Types
 /**
  * Microphone button component for voice input functionality.

package/dist/components/ChatBot/ChatBot.js

@@ -23,8 +23,8 @@ import { CHATBOT_ENDPOINT } from "../../controller/llm/endpoints.js";
 import { isDarkMode } from "../../Theme/Theme.js";
 import { useAuthentication } from "../../utils/Authentication.js";
 import { getZIndex } from "../../utils/zIndexLayers.js";
-import { ChatCommon } from "../AgentChat/ChatCommon.js";
-import { LegacyAgentType } from "../AgentChat/Types.js";
+import { ChatCommon } from "../AgentChat/ChatCommon/ChatCommon.js";
+import { LegacyAgentType } from "../AgentChat/Common/Types.js";
 /**
  * Site-wide Chatbot component.
  */

package/dist/components/Common/CustomerLogo.js

@@ -41,7 +41,7 @@ export const CustomerLogo = ({ fallbackElement, logoServiceToken }) => {
     }
     // "auto": use logo.dev service
     const logoUrl = logoServiceToken && customer?.trim().length > 0
-        ? `https://img.logo.dev/name/${encodeURIComponent(customer)}?token=${logoServiceToken}&theme=light&format=png&size=75`
+        ? `https://img.logo.dev/name/${encodeURIComponent(customer)}?token=${logoServiceToken}&theme=dark&format=png&size=75`
         : null;
     return logoUrl ? (
     // eslint-disable-next-line @next/next/no-img-element

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

@@ -2,5 +2,5 @@ type LLMChatGroupConfigBtnProps = {
     enabled?: boolean;
     posRight?: number;
 };
-export declare const LlmChatOptionsButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export declare const LlmChatOptionsButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "color" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "size" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
 export {};

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

@@ -5,6 +5,7 @@ interface MUIDialogProps {
     className?: string;
     closeable?: boolean;
     contentSx?: SxProps;
+    dialogSx?: SxProps;
     footer?: ReactJSX.Element;
     id: string;
     isOpen: boolean;

package/dist/components/Common/MUIDialog.js

@@ -31,9 +31,9 @@ const StyledDialogTitle = styled(DialogTitle)({
     whiteSpace: "nowrap",
 });
 // #endregion: Types
-export const MUIDialog = ({ children, className, closeable = true, contentSx, footer, id, isOpen, onClose, paperProps, title, }) => (_jsxs(Dialog, { "data-testid": id, id: id, onClose: onClose, open: isOpen, className: className, slotProps: {
+export const MUIDialog = ({ children, className, closeable = true, contentSx, dialogSx, footer, id, isOpen, onClose, paperProps, title, }) => (_jsxs(Dialog, { "data-testid": id, id: id, onClose: onClose, open: isOpen, className: className, slotProps: {
         paper: { sx: paperProps },
-    }, children: [_jsx(StyledDialogTitle, { id: `${id}-title`, children: title }), closeable && (_jsx(IconButton, { "aria-label": "close", id: `${id}-close-icon-btn`, onClick: onClose, sx: {
+    }, sx: dialogSx, children: [_jsx(StyledDialogTitle, { id: `${id}-title`, children: title }), closeable && (_jsx(IconButton, { "aria-label": "close", id: `${id}-close-icon-btn`, onClick: onClose, sx: {
                 position: "absolute",
                 right: 8,
                 top: 8,

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

@@ -1,4 +1,4 @@
-import { Origin } from "../../generated/neuro-san/NeuroSanClient.js";
+import { Origin as NSOrigin } from "../../generated/neuro-san/NeuroSanClient.js";
 /**
  * Given a map of agent counts and a list of origins, return an updated map of agent counts that includes the
  * counts from the origins.
@@ -9,4 +9,4 @@ import { Origin } from "../../generated/neuro-san/NeuroSanClient.js";
  * already in the map, it will be added with a count of 1. If it is already in the map, its count will be
  * incremented by 1.
  */
-export declare const getUpdatedAgentCounts: (agentCountsMap: Map<string, number>, origins: readonly Origin[]) => Map<string, number>;
+export declare const getUpdatedAgentCounts: (agentCountsMap: Map<string, number>, origins: readonly NSOrigin[]) => Map<string, number>;

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

@@ -8,14 +8,26 @@ export interface AgentFlowProps {
     readonly agentIconSuggestions?: AgentIconSuggestions;
     readonly agentsInNetwork: ConnectivityInfo[];
     readonly currentConversations?: AgentConversation[] | null;
+    readonly currentUser?: string;
     readonly id: string;
     readonly isAwaitingLlm?: boolean;
+    readonly isAgentNetworkDesignerMode?: boolean;
     readonly isStreaming?: boolean;
+    readonly isSelectedNetworkTemporary?: boolean;
+    /** The history key for the currently selected network (used to scope sly_data reads/writes per network). */
+    readonly networkId?: string;
+    readonly neuroSanURL?: string;
+    /**
+     * Called after a popup save triggers a new network reservation that replaces the currently viewed network.
+     * @param oldNetworkId The agent_name of the network that was replaced.
+     * @param newNetworkId The agent_name of the replacement network to navigate to.
+     */
+    readonly onNetworkReplaced?: (oldNetworkId: string, newNetworkId: string) => void;
     readonly thoughtBubbleEdges: Map<string, {
         edge: ThoughtBubbleEdgeShape;
         timestamp: number;
     }>;
-    readonly setThoughtBubbleEdges: Dispatch<SetStateAction<Map<string, {
+    readonly setThoughtBubbleEdges?: Dispatch<SetStateAction<Map<string, {
         edge: ThoughtBubbleEdgeShape;
         timestamp: number;
     }>>>;