@cognizant-ai-lab/ui-common 1.3.3

package/dist/components/MultiAgentAccelerator/Sidebar.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ClearIcon from "@mui/icons-material/Clear";
+import HighlightOff from "@mui/icons-material/HighlightOff";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { IconButton, InputAdornment, styled, useColorScheme, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import Popover from "@mui/material/Popover";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { useEffect, useRef, useState, } from "react";
+import { testConnection } from "../../controller/agent/Agent.js";
+import { useEnvironmentStore } from "../../state/environment.js";
+import { isDarkMode } from "../../utils/Theme.js";
+import { getZIndex } from "../../utils/zIndexLayers.js";
+import { cleanUpAgentName } from "../AgentChat/Utils.js";
+// #region: Styled Components
+const PrimaryButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== "darkMode",
+})(({ darkMode }) => ({
+    backgroundColor: "var(--bs-primary)",
+    marginLeft: "0.5rem",
+    marginTop: "2px",
+    "&:hover": {
+        backgroundColor: "var(--bs-primary)",
+    },
+    "&.Mui-disabled": {
+        color: darkMode ? "rgba(255, 255, 255, 0.25)" : undefined,
+        backgroundColor: undefined,
+    },
+}));
+// #endregion: Styled Components
+// #region: Types
+var CONNECTION_STATUS;
+(function (CONNECTION_STATUS) {
+    CONNECTION_STATUS["IDLE"] = "idle";
+    CONNECTION_STATUS["SUCCESS"] = "success";
+    CONNECTION_STATUS["ERROR"] = "error";
+})(CONNECTION_STATUS || (CONNECTION_STATUS = {}));
+// #endregion: Types
+export const Sidebar = ({ customURLCallback, customURLLocalStorage, id, isAwaitingLlm, networks, selectedNetwork, setSelectedNetwork, }) => {
+    // Get default URL from the environment store.
+    const { backendNeuroSanApiUrl } = useEnvironmentStore();
+    const [urlInput, setUrlInput] = useState(customURLLocalStorage || backendNeuroSanApiUrl);
+    const [connectionStatus, setConnectionStatus] = useState(CONNECTION_STATUS.IDLE);
+    const [testConnectionResult, setTestConnectionResult] = useState(null);
+    const connectionStatusSuccess = connectionStatus === CONNECTION_STATUS.SUCCESS;
+    const connectionStatusError = connectionStatus === CONNECTION_STATUS.ERROR;
+    const isDefaultUrl = urlInput === backendNeuroSanApiUrl;
+    // Enable the Save button if the URL input is not empty and the connection status is successful,
+    // OR if the URL input is the default URL and connection status is not error
+    const saveEnabled = urlInput && (connectionStatusSuccess || (isDefaultUrl && !connectionStatusError));
+    const selectedNetworkRef = useRef(null);
+    const [settingsAnchorEl, setSettingsAnchorEl] = useState(null);
+    const settingsPopoverOpen = Boolean(settingsAnchorEl);
+    // Theming/Dark mode
+    const theme = useTheme();
+    const { mode, systemMode } = useColorScheme();
+    const darkMode = isDarkMode(mode, systemMode);
+    const handleSettingsClick = (event) => {
+        // On open of Settings popover, reset the connection status to idle
+        setConnectionStatus(CONNECTION_STATUS.IDLE);
+        setSettingsAnchorEl(event.currentTarget);
+    };
+    const handleSettingsClose = (cancel = false) => {
+        setSettingsAnchorEl(null);
+        // If the user cancels, reset the custom URL input to the local storage value, or the default URL
+        if (cancel) {
+            setUrlInput(customURLLocalStorage || backendNeuroSanApiUrl);
+        }
+    };
+    const handleURLChange = (event) => {
+        setUrlInput(event.target.value);
+        // Reset connection check since URL input was changed
+        setConnectionStatus(CONNECTION_STATUS.IDLE);
+    };
+    const handleDefaultSettings = () => {
+        // Clear input but don't close the popover
+        setUrlInput(backendNeuroSanApiUrl);
+        // Reset connection check since URL input was cleared
+        setConnectionStatus(CONNECTION_STATUS.IDLE);
+    };
+    const handleSaveSettings = () => {
+        let tempUrl = urlInput;
+        if (tempUrl.endsWith("/")) {
+            tempUrl = tempUrl.slice(0, -1);
+        }
+        if (tempUrl && !tempUrl.startsWith("http://") && !tempUrl.startsWith("https://")) {
+            tempUrl = `https://${tempUrl}`;
+        }
+        // Call setSelectedNetwork(null) otherwise it can cause issues when switching agent networks (i.e. for Save)
+        setSelectedNetwork(null);
+        handleSettingsClose();
+        customURLCallback(tempUrl);
+    };
+    const handleSettingsSaveEnterKey = (event) => {
+        if (event.key === "Enter" && saveEnabled) {
+            handleSaveSettings();
+        }
+    };
+    const handleTestConnection = async () => {
+        const result = await testConnection(urlInput);
+        setTestConnectionResult(result);
+        if (result.success) {
+            setConnectionStatus(CONNECTION_STATUS.SUCCESS);
+        }
+        else {
+            setConnectionStatus(CONNECTION_STATUS.ERROR);
+        }
+    };
+    const handleClearInput = () => {
+        setUrlInput("");
+        setConnectionStatus(CONNECTION_STATUS.IDLE);
+    };
+    // Make sure selected network in the list is always in view
+    useEffect(() => {
+        if (selectedNetworkRef.current) {
+            selectedNetworkRef.current.scrollIntoView({ behavior: "instant", block: "nearest" });
+        }
+    }, [selectedNetwork]);
+    // Get Neuro-san version on initial load
+    useEffect(() => {
+        const fetchVersion = async () => {
+            // We aren't really trying to test the connection here, just getting the version.
+            const result = await testConnection(urlInput);
+            if (result.success) {
+                setTestConnectionResult(result);
+                setConnectionStatus(CONNECTION_STATUS.SUCCESS);
+            }
+        };
+        void fetchVersion();
+    }, []);
+    const selectNetworkHandler = (network) => {
+        setSelectedNetwork(network);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("aside", { id: `${id}-sidebar`, style: {
+                    borderRightColor: "var(--bs-gray-light)",
+                    borderRightStyle: "solid",
+                    borderRightWidth: "1px",
+                    height: "100%",
+                    overflowY: "auto",
+                    paddingRight: "0.75rem",
+                }, children: [_jsxs("h2", { id: `${id}-heading`, style: {
+                            borderBottomColor: "var(--bs-gray-light)",
+                            borderBottomStyle: "solid",
+                            borderBottomWidth: "1px",
+                            fontSize: "1.125rem",
+                            fontWeight: "bold",
+                            marginBottom: "0.25rem",
+                            paddingBottom: "0.75rem",
+                            position: "sticky",
+                            top: 0,
+                            zIndex: getZIndex(1, theme),
+                        }, children: ["Agent Networks", _jsx(Button, { "aria-label": "Agent Network Settings", disabled: isAwaitingLlm, id: "agent-network-settings-btn", onClick: handleSettingsClick, sx: { display: "inline-block", minWidth: "40px" }, children: _jsx(Tooltip, { id: "agent-network-settings-tooltip", placement: "top", title: `${customURLLocalStorage || backendNeuroSanApiUrl}\nversion: ${testConnectionResult?.version || "unknown"}`, children: _jsx(SettingsIcon, { id: "agent-network-settings-icon", sx: {
+                                            color: isAwaitingLlm ? "rgba(0, 0, 0, 0.12)" : "var(--bs-secondary)",
+                                        } }) }) })] }), _jsx(List, { id: `${id}-network-list`, sx: { padding: 0, margin: 0 }, children: networks?.map((network) => (_jsx(ListItemButton, { id: `${network}-btn`, onClick: () => selectNetworkHandler(network), sx: { textAlign: "left" }, selected: selectedNetwork === network, disabled: isAwaitingLlm, ref: selectedNetwork === network ? selectedNetworkRef : null, children: _jsx(ListItemText, { id: `${network}-text`, slotProps: {
+                                    primary: {
+                                        fontSize: "0.75rem",
+                                    },
+                                }, primary: cleanUpAgentName(network) }) }, network))) })] }), _jsxs(Popover, { id: "agent-network-settings-popover", open: settingsPopoverOpen, anchorEl: settingsAnchorEl, onClose: () => handleSettingsClose(true), anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "left",
+                }, slotProps: {
+                    paper: {
+                        sx: {
+                            paddingTop: "0.75rem",
+                            paddingLeft: "0.5rem",
+                            paddingRight: "0.5rem",
+                            paddingBottom: "0.2rem",
+                        },
+                    },
+                }, children: [_jsx(TextField, { autoComplete: "off", label: "Agent server address", id: "agent-network-settings-url", onChange: handleURLChange, onKeyUp: handleSettingsSaveEnterKey, placeholder: "https://my_server_address:port", size: "small", sx: { marginBottom: "0.5rem", minWidth: "400px" }, type: "url", variant: "outlined", value: urlInput, slotProps: {
+                            input: {
+                                endAdornment: urlInput && urlInput !== backendNeuroSanApiUrl ? (_jsx(InputAdornment, { id: "clear-input-adornment", position: "end", children: _jsx(IconButton, { id: "clear-input-icon-button", edge: "end", onClick: handleClearInput, size: "small", "aria-label": "Clear input", children: _jsx(ClearIcon, { fontSize: "small", id: "clear-input-icon" }) }) })) : undefined,
+                            },
+                        } }), _jsx(PrimaryButton, { disabled: !urlInput, id: "agent-network-settings-test-btn", onClick: handleTestConnection, variant: "contained", darkMode: darkMode, children: "Test" }), _jsx(PrimaryButton, { disabled: !saveEnabled, id: "agent-network-settings-save-btn", onClick: handleSaveSettings, variant: "contained", darkMode: darkMode, children: "Save" }), _jsx(PrimaryButton, { id: "agent-network-settings-cancel-btn", onClick: () => handleSettingsClose(true), variant: "contained", darkMode: darkMode, children: "Cancel" }), _jsx(Button, { id: "agent-network-settings-default-btn", onClick: handleDefaultSettings, sx: {
+                            marginLeft: "0.35rem",
+                            marginTop: "2px",
+                            color: darkMode ? "var(--bs-dark-mode-link)" : undefined,
+                        }, variant: "text", children: "Default" }), (connectionStatusSuccess || connectionStatusError) && (_jsxs(Box, { id: "connection-status-box", display: "flex", alignItems: "center", sx: {
+                            marginLeft: "0.25rem",
+                            marginBottom: "0.5rem",
+                        }, children: [connectionStatusSuccess && (_jsxs(_Fragment, { children: [_jsx(CheckCircleOutlineIcon, { id: "connection-status-success-icon", sx: { color: "var(--bs-green)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-success-msg", variant: "body2", color: "var(--bs-green)", children: "Connected successfully" })] })), connectionStatusError && (_jsxs(_Fragment, { children: [_jsx(HighlightOff, { id: "connection-status-error-icon", sx: { color: "var(--bs-red)", fontSize: "1.2rem", marginRight: "0.25rem" } }), _jsx(Typography, { id: "connection-status-failed-msg", variant: "body2", color: "var(--bs-red)", children: `Connection failed: "${testConnectionResult?.status || "unknown error"}"` })] }))] }))] })] }));
+};

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

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { EdgeProps } from "reactflow";
+interface ThoughtBubbleEdgeProps extends EdgeProps {
+    data?: {
+        text?: string;
+        showAlways?: boolean;
+        conversationId?: string;
+        type?: string;
+    };
+}
+export declare const ThoughtBubbleEdge: FC<ThoughtBubbleEdgeProps>;
+export {};

package/dist/components/MultiAgentAccelerator/ThoughtBubbleEdge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getBezierPath } from "reactflow";
+// Simplified edge component - visual rendering is handled by ThoughtBubbleOverlay
+export const ThoughtBubbleEdge = ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, }) => {
+    const conversationId = data?.conversationId || "";
+    const [edgePath] = getBezierPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    });
+    return (_jsx(_Fragment, { children: _jsx("path", { id: `thought-bubble-hover-${conversationId}`, d: edgePath, fill: "none", stroke: "transparent", strokeWidth: "20", style: { pointerEvents: "stroke" } }) }));
+};

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

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import type { Edge, Node as RFNode } from "reactflow";
+interface ThoughtBubbleOverlayProps {
+    readonly nodes: RFNode[];
+    readonly edges: Edge[];
+    readonly showThoughtBubbles?: boolean;
+    readonly isStreaming?: boolean;
+    readonly onBubbleHoverChange?: (bubbleId: string | null) => void;
+}
+export declare const ThoughtBubbleOverlay: FC<ThoughtBubbleOverlayProps>;
+export {};