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

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

@@ -1,4 +1,5 @@
 import { Dispatch, Ref, SetStateAction } from "react";
+import { LLMProvider } from "../../../state/Settings.js";
 import { CombinedAgentType } from "../Common/Types.js";
 export interface ChatCommonProps {
     /**
@@ -9,10 +10,6 @@ export interface ChatCommonProps {
      * The current username of the logged-in user. Used for fetching things from APIs mainly
      */
     readonly currentUser: string;
-    /**
-     * Path to image for user avatar
-     */
-    readonly userImage: string;
     /**
      * Function to set the state of the component to indicate whether we are awaiting a response from the LLM
      */
@@ -22,9 +19,9 @@ export interface ChatCommonProps {
      */
     readonly isAwaitingLlm: boolean;
     /**
-     * The agent to send the request to.
+     * The network to send the request to.
      */
-    readonly targetAgent: string;
+    readonly selectedNetwork: string | null;
     /**
      * Special endpoint for legacy agents since they do not have a single unified endpoint like Neuro-san agents.
      */
@@ -94,6 +91,10 @@ export interface ChatCommonProps {
      * Sample queries for the current network that the user can "click to send"
      */
     readonly sampleQueries?: string[];
+    /**
+     * Array of LLM providers for which API keys are required but missing. Only applies to BYOK networks.
+     */
+    readonly missingApiKeys?: LLMProvider[];
 }
 export type ChatCommonHandle = {
     handleStop: () => void;

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

@@ -32,7 +32,6 @@ import ListItemText from "@mui/material/ListItemText";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material/styles";
-import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { isEmpty } from "lodash-es";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
@@ -72,7 +71,7 @@ export const MAX_TURNS = 50;
  * agent responses. Customization for inputs and outputs is provided via event handlers-like props.
  */
 export const ChatCommon = ({ ref, ...props }) => {
-    const { customAgentGreetings = EMPTY, agentPlaceholders = EMPTY, backgroundColor, currentUser, extraParams, extraSlyData, id, isAwaitingLlm, legacyAgentEndpoint, networkDescription, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, sampleQueries, setIsAwaitingLlm, setPreviousResponse, targetAgent, title, } = props;
+    const { customAgentGreetings = EMPTY, agentPlaceholders = EMPTY, backgroundColor, currentUser, extraParams, extraSlyData, id, isAwaitingLlm, legacyAgentEndpoint, missingApiKeys = [], networkDescription, neuroSanURL, onChunkReceived, onClose, onSend, onStreamingComplete, onStreamingStarted, sampleQueries, setIsAwaitingLlm, setPreviousResponse, selectedNetwork, title, } = props;
     // MUI theme
     const theme = useTheme();
     // User LLM chat input
@@ -99,7 +98,7 @@ export const ChatCommon = ({ ref, ...props }) => {
     const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
     // Persistent agent chat history store, which is where we store both kinds of chat histories
     // (see store implementation for details)
-    const storedChatHistory = useAgentChatHistoryStore((state) => state?.history?.[targetAgent]);
+    const storedChatHistory = useAgentChatHistoryStore((state) => selectedNetwork ? state?.history?.[selectedNetwork] : undefined);
     const agentChatHistory = useMemo(() => storedChatHistory ?? { chatHistory: [], chatContext: null, slyData: {} }, [storedChatHistory]);
     // Access store for context items
     const updateChatContext = useAgentChatHistoryStore((state) => state.updateChatContext);
@@ -135,7 +134,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         };
     // Keeps track of whether the agent completed its task
     const succeeded = useRef(false);
-    const agentDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(targetAgent)), [targetAgent]);
+    const agentDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
     useEffect(() => {
         // Set up speech recognition
         const handlers = setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef);
@@ -196,13 +195,13 @@ export const ChatCommon = ({ ref, ...props }) => {
         }
         // Shallow merge existing slyData with incoming chatMessage.sly_data
         if (chatMessage.sly_data) {
-            updateSlyData(targetAgent, chatMessage.sly_data);
+            updateSlyData(selectedNetwork, chatMessage.sly_data);
         }
         // It's a ChatMessage. Does it have chat context? Only AGENT_FRAMEWORK messages can have chat context.
         if (chatMessage.type === ChatMessageType.AGENT_FRAMEWORK && chatMessage.chat_context) {
             // Save the chat context, potentially overwriting any previous ones we received during this session.
             // We only care about the last one received.
-            updateChatContext(targetAgent, chatMessage.chat_context);
+            updateChatContext(selectedNetwork, chatMessage.chat_context);
         }
         // Check if there is an error block in the "structure" field of the chat message.
         const errorMessage = checkError(chatMessage.structure);
@@ -215,7 +214,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             });
             succeeded.current = false;
         }
-        else if (chatMessage?.text?.trim().length > 0 || chatMessage.structure) {
+        else if (chatMessage?.text?.trim().length > 0 || !isEmpty(chatMessage.structure)) {
             // Not an error, so output it if it has text or a structure.
             // This is the normal happy path for an incoming message.
             // The backend sometimes sends messages with no text content, and we don't want to display those to the
@@ -236,7 +235,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                 currentResponse.current += chatMessage.text;
             }
         }
-    }, [addTurn, targetAgent, updateChatContext, updateSlyData]);
+    }, [addTurn, selectedNetwork, updateChatContext, updateSlyData]);
     /**
      * Handle a chunk of response from the server. Called each time the server streams a chunk.
      */
@@ -244,14 +243,14 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Give container a chance to process the chunk first
         const onChunkReceivedResult = onChunkReceived?.(chunk) ?? true;
         succeeded.current = succeeded.current || onChunkReceivedResult;
-        if (isLegacyAgentType(targetAgent)) {
+        if (isLegacyAgentType(selectedNetwork)) {
             // For legacy agents, we either get plain text or Markdown. Just output it as-is.
             handleLegacyAgentChunk(chunk);
         }
         else {
             handleNeuroSanAgentChunk(chunk);
         }
-    }, [onChunkReceived, targetAgent, handleNeuroSanAgentChunk, handleLegacyAgentChunk]);
+    }, [onChunkReceived, selectedNetwork, handleNeuroSanAgentChunk, handleLegacyAgentChunk]);
     /**
      * Reset the state of the component. This is called after a request is completed, regardless of success or failure.
      */
@@ -259,10 +258,10 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Reset state, whatever happened during request
         setIsAwaitingLlm(false);
         setChatInput("");
-        setPreviousResponse?.(targetAgent, currentResponse.current);
+        setPreviousResponse?.(selectedNetwork, currentResponse.current);
         currentResponse.current = "";
         legacyTurnIdRef.current = null;
-    }, [setIsAwaitingLlm, setPreviousResponse, targetAgent]);
+    }, [setIsAwaitingLlm, setPreviousResponse, selectedNetwork]);
     /*
      * The main logic for sending a query to the server, with retries on errors.
      */
@@ -275,7 +274,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                 // Increment the attempt number and set the state to indicate we're awaiting a response
                 attemptNumber += 1;
                 // Check which agent type we are dealing with
-                if (isLegacyAgentType(targetAgent)) {
+                if (isLegacyAgentType(selectedNetwork)) {
                     // 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
@@ -285,7 +284,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                     // It's a Neuro-san agent.
                     // Some coded tools (data generator...) expect the username provided in slyData.
                     const slyDataWithUserName = { ...agentChatHistory?.slyData, ...extraSlyData, login: currentUser };
-                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, targetAgent, handleChunk, agentChatHistory.chatContext, slyDataWithUserName, currentUser, StreamingUnit.Line);
+                    await sendChatQuery(neuroSanURL, controller?.current.signal, query, selectedNetwork, handleChunk, agentChatHistory.chatContext, slyDataWithUserName, currentUser, StreamingUnit.Line);
                 }
             }
             catch (error) {
@@ -317,7 +316,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         handleChunk,
         legacyAgentEndpoint,
         neuroSanURL,
-        targetAgent,
+        selectedNetwork,
     ]);
     const getFinalAnswerErrorTurn = () => ({
         id: uuid(),
@@ -329,7 +328,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         // Prefer the most recent matching turn
         const idx = currentTurns.reduceRight((foundIndex, turn, i) => foundIndex !== -1 || extractFinalAnswer(turn.text) === undefined ? foundIndex : i, -1);
         if (idx === -1) {
-            if (givesFinalAnswer(targetAgent)) {
+            if (givesFinalAnswer(selectedNetwork)) {
                 // This agent is supposed to give final answers, but didn't this time. An error.
                 setTurns((prev) => [...prev, getFinalAnswerErrorTurn()]);
                 return;
@@ -342,13 +341,13 @@ export const ChatCommon = ({ ref, ...props }) => {
                 // Just set the last turn as the final answer
                 setTurns((prev) => prev.map((turn) => (turn.id === lastTurn.id ? { ...turn, role: MessageRole.FinalAnswer } : turn)));
                 // Save it to chat history
-                updateChatHistory(targetAgent, [new AIMessage({ content: lastTurn.text, id: uuid() })]);
+                updateChatHistory(selectedNetwork, [new AIMessage({ content: lastTurn.text, id: uuid() })]);
                 return;
             }
         }
         const sourceTurn = currentTurns[idx];
         // Save item to chat history (same as original behavior)
-        updateChatHistory(targetAgent, [new AIMessage({ content: sourceTurn.text, id: uuid() })]);
+        updateChatHistory(selectedNetwork, [new AIMessage({ content: sourceTurn.text, id: uuid() })]);
         // Extract the final answer from the turn.
         const finalAnswer = extractFinalAnswer(sourceTurn.text)?.trim();
         // Update the turn to be a final answer turn, and add a new final answer turn with just the final answer text.
@@ -365,7 +364,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             });
             return updated;
         });
-    }, [targetAgent, updateChatHistory]);
+    }, [selectedNetwork, updateChatHistory]);
     /**
      * Extract the final answer from the turns for a Neuro-san agent. For Neuro-san agents, we expect the final answer
      * to be the most recent turn messageType === ChatMessageType.AGENT_FRAMEWORK.
@@ -384,23 +383,16 @@ export const ChatCommon = ({ ref, ...props }) => {
         }
         // Extract final answer from that turn
         const finalAnswerTurn = currentTurns[idx];
-        const hasFinalAnswer = finalAnswerTurn.text?.trim().length > 0 || !isEmpty(finalAnswerTurn.structure);
-        if (hasFinalAnswer) {
-            // Update relevant turn to be the final answer
-            setTurns((prev) => prev.map((turn, i) => (i === idx ? { ...turn, role: MessageRole.FinalAnswer } : turn)));
-            // Save final answer to chat history
-            const finalAnswerContent = finalAnswerTurn.text || JSON.stringify(finalAnswerTurn.structure, null, 2);
-            updateChatHistory(targetAgent, [new AIMessage({ content: finalAnswerContent, id: uuid() })]);
-        }
-        else {
-            // No final answer found, display error
-            setTurns((prev) => [...prev, getFinalAnswerErrorTurn()]);
-        }
-    }, [targetAgent, updateChatHistory]);
+        // Update relevant turn to be the final answer
+        setTurns((prev) => prev.map((turn, i) => (i === idx ? { ...turn, role: MessageRole.FinalAnswer } : turn)));
+        // Save final answer to chat history
+        const finalAnswerContent = finalAnswerTurn.text || JSON.stringify(finalAnswerTurn.structure, null, 2);
+        updateChatHistory(selectedNetwork, [new AIMessage({ content: finalAnswerContent, id: uuid() })]);
+    }, [selectedNetwork, updateChatHistory]);
     const handleSend = useCallback(async (query) => {
         // Record user query in chat history. Discard anything beyond MAX_CHAT_HISTORY_ITEMS
         const userQueryMessage = new HumanMessage({ content: query, id: uuid() });
-        updateChatHistory(targetAgent, [userQueryMessage]);
+        updateChatHistory(selectedNetwork, [userQueryMessage]);
         // Allow parent to intercept and modify the query before sending if needed
         const queryToSend = onSend?.(query) ?? query;
         // Save query for "regenerate" use. Again we save the real user input, not the modified query. It will again
@@ -428,7 +420,7 @@ export const ChatCommon = ({ ref, ...props }) => {
             if (!wasAborted) {
                 if (succeeded.current) {
                     // Success: infer final answer depending on agent type
-                    if (isLegacyAgentType(targetAgent)) {
+                    if (isLegacyAgentType(selectedNetwork)) {
                         handleFinalAnswerLegacyAgent();
                     }
                     else {
@@ -460,7 +452,7 @@ export const ChatCommon = ({ ref, ...props }) => {
         onStreamingStarted,
         resetState,
         setIsAwaitingLlm,
-        targetAgent,
+        selectedNetwork,
         updateChatHistory,
     ]);
     const handleStop = useCallback(() => {
@@ -485,29 +477,34 @@ export const ChatCommon = ({ ref, ...props }) => {
     const shouldEnableRegenerateButton = previousUserQuery && !isAwaitingLlm;
     // Enable Clear Chat button if not awaiting response and there is chat output to clear
     const enableClearChatButton = !isAwaitingLlm && (turns.length > 0 || agentChatHistory?.chatHistory?.length > 0);
-    const getPlaceholder = () => !targetAgent ? null : agentPlaceholders[targetAgent] || `Chat with ${agentDisplayName}`;
+    const getPlaceholder = () => selectedNetwork ? agentPlaceholders[selectedNetwork] || `Chat with ${agentDisplayName}` : null;
     const handleClearChat = useCallback(() => {
         setTurns([]);
-        resetHistory(targetAgent);
+        resetHistory(selectedNetwork);
         setPreviousUserQuery("");
         currentResponse.current = "";
-    }, [resetHistory, targetAgent]);
+    }, [resetHistory, selectedNetwork]);
     // Expose the handleStop and handleClearChat methods to parent components via ref for external control
     useImperativeHandle(ref, () => ({
         handleStop,
         handleClearChat,
     }), [handleStop, handleClearChat]);
-    const getNoAgentOverlay = () => (_jsx(Tooltip, { title: "Please select a Network from the list to start the chat.", placement: "auto", children: _jsx(Box, { id: "chat-disabled-overlay", sx: {
+    const getErrorOverlay = (errorText) => (_jsx(Box, { id: "chat-disabled-overlay", sx: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: theme.zIndex.modal - 1,
+            cursor: "not-allowed",
+            // Capture all pointer events to prevent interaction with the chat when no agent is selected
+            pointerEvents: "all",
+        }, children: _jsx(Typography, { sx: {
                 position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: theme.zIndex.modal - 1,
-                cursor: "not-allowed",
-                // Capture all pointer events to prevent interaction with the chat when no agent is selected
-                pointerEvents: "all",
-            } }) }));
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+            }, children: errorText }) }));
     const getTitle = () => (_jsxs(Box, { id: `llm-chat-title-container-${id}`, sx: {
             alignItems: "center",
             borderTopLeftRadius: "var(--bs-border-radius)",
@@ -527,7 +524,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                 setOptionsMenuAnchorEl(e.currentTarget);
                 setOptionsMenuOpen(true);
             }, children: _jsx(TuneIcon, { sx: { fontSize: "1.2rem" } }) }) }));
-    const agentGreeting = customAgentGreetings[targetAgent] ?? "Hi, how can I help?";
+    const agentGreeting = customAgentGreetings[selectedNetwork] ?? "Hi, how can I help?";
     const handleOptionsMenuClose = () => {
         setOptionsMenuAnchorEl(null);
         setOptionsMenuOpen(false);
@@ -569,7 +566,7 @@ export const ChatCommon = ({ ref, ...props }) => {
                     paddingTop: "7.5px",
                     scrollbarGutter: "stable",
                     width: "100%",
-                }, tabIndex: -1, children: [getOptionsMenu(), getOptionsMenuButton(), agentChatHistory?.chatHistory?.length > 0 && (_jsx(ChatHistory, { id: id, messages: agentChatHistory.chatHistory })), _jsxs(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem", color: "var(--bs-gray)" }, children: [_jsxs(Typography, { component: "span", sx: { fontWeight: 700 }, variant: "inherit", children: [targetAgent, networkDescription && ":"] }), networkDescription && (_jsxs(Typography, { component: "span", sx: { ml: 0.5 }, variant: "inherit", children: [" ", networkDescription] }))] }), _jsx(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem" }, children: agentGreeting }), _jsx(SampleQueries, { disabled: isAwaitingLlm, handleSend: handleSend, sampleQueries: sampleQueries }), _jsx(Conversation, { id: id, includeAgentMessages: !givesFinalAnswer(targetAgent), shouldWrapOutput: shouldWrapOutput, turns: turns }), !isAwaitingLlm && turns.length > 0 && (
+                }, tabIndex: -1, children: [getOptionsMenu(), getOptionsMenuButton(), agentChatHistory?.chatHistory?.length > 0 && (_jsx(ChatHistory, { id: id, messages: agentChatHistory.chatHistory })), _jsxs(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem", color: "var(--bs-gray)" }, children: [_jsxs(Typography, { component: "span", sx: { fontWeight: 700 }, variant: "inherit", children: [selectedNetwork, networkDescription && ":"] }), networkDescription && (_jsxs(Typography, { component: "span", sx: { ml: 0.5 }, variant: "inherit", children: [" ", networkDescription] }))] }), _jsx(Box, { sx: { marginBottom: "0.5rem", marginTop: "1rem" }, children: agentGreeting }), _jsx(SampleQueries, { disabled: isAwaitingLlm, handleSend: handleSend, sampleQueries: sampleQueries }), _jsx(Conversation, { id: id, includeAgentMessages: !givesFinalAnswer(selectedNetwork), shouldWrapOutput: shouldWrapOutput, turns: turns }), !isAwaitingLlm && turns.length > 0 && (
                     // Only show thinking once streaming is complete
                     _jsx(Thinking, { id: id, turns: turns })), isAwaitingLlm && (_jsxs(Box, { id: "awaitingOutputContainer", sx: { display: "flex", alignItems: "center", fontSize: "smaller" }, children: [_jsx("span", { id: "working-span", style: { marginRight: "1rem" }, children: "Working..." }), _jsx(CircularProgress, { id: "awaitingOutputSpinner", sx: {
                                     color: "var(--bs-primary)",
@@ -613,8 +610,8 @@ export const ChatCommon = ({ ref, ...props }) => {
             flexDirection: "column",
             flexGrow: 1,
             height: "100%",
-            opacity: targetAgent ? 1 : 0.4,
-            pointerEvents: targetAgent ? "auto" : "none",
+            opacity: selectedNetwork ? 1 : 0.4,
+            pointerEvents: selectedNetwork ? "auto" : "none",
             position: "relative",
         }, children: [title && getTitle(), getResponseBox(), getUserInputBox()] }));
     return (_jsx(Box, { id: `llm-chat-${id}`, sx: {
@@ -623,5 +620,10 @@ export const ChatCommon = ({ ref, ...props }) => {
             flexGrow: 1,
             height: "100%",
             position: "relative",
-        }, children: targetAgent ? getChatBox() : getNoAgentOverlay() }));
+        }, children: selectedNetwork
+            ? missingApiKeys?.length === 0
+                ? getChatBox()
+                : getErrorOverlay(`API key(s) required for: ${missingApiKeys.join(", ")}. ` +
+                    "Please add the required key(s) in Settings to use this Network.")
+            : getErrorOverlay("Please select a Network from the list to start the chat.") }));
 };

package/dist/components/ChatBot/ChatBot.d.ts

@@ -4,10 +4,6 @@ interface ChatBotProps {
      * id HTML id to use for the outer component
      */
     readonly id: string;
-    /**
-     * Path to image for user avatar
-     */
-    readonly userAvatar: string;
     /**
      * Text about current page to help the LLM respond intelligently
      */

package/dist/components/ChatBot/ChatBot.js

@@ -29,7 +29,7 @@ import { LegacyAgentType } from "../AgentChat/Common/Types.js";
  * Site-wide Chatbot component.
  */
 // Temporarily disabled but will be used once we migrated the backend to use Neuro-san RAG.
-export const ChatBot = ({ id, userAvatar, pageContext }) => {
+export const ChatBot = ({ id, pageContext }) => {
     const [chatOpen, setChatOpen] = useState(false);
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
     const { user: { name: currentUser }, } = useAuthentication().data;
@@ -51,7 +51,7 @@ export const ChatBot = ({ id, userAvatar, pageContext }) => {
                         borderWidth: 1,
                         borderColor: darkMode ? "var(--bs-white)" : "var(--bs-gray-light)",
                         zIndex: getZIndex(2, theme),
-                    }, children: _jsx(ChatCommon, { id: "chatbot-window", currentUser: currentUser, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, targetAgent: LegacyAgentType.ChatBot, userImage: userAvatar, legacyAgentEndpoint: CHATBOT_ENDPOINT, extraParams: { pageContext }, backgroundColor: darkMode ? "var(--bs-gray-dark)" : "var(--bs-tertiary-blue)", title: "Cognizant Neuro AI Assistant", onClose: () => setChatOpen(false) }) }) }), !chatOpen && (_jsx(Box, { id: `chatbot-icon-${id}`, sx: {
+                    }, children: _jsx(ChatCommon, { id: "chatbot-window", currentUser: currentUser, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, selectedNetwork: LegacyAgentType.ChatBot, legacyAgentEndpoint: CHATBOT_ENDPOINT, extraParams: { pageContext }, backgroundColor: darkMode ? "var(--bs-gray-dark)" : "var(--bs-tertiary-blue)", title: "Cognizant Neuro AI Assistant", onClose: () => setChatOpen(false) }) }) }), !chatOpen && (_jsx(Box, { id: `chatbot-icon-${id}`, sx: {
                     display: "flex",
                     alignItems: "center",
                     backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",

package/dist/components/Common/CustomerLogo.js

@@ -43,7 +43,5 @@ export const CustomerLogo = ({ fallbackElement, logoServiceToken }) => {
     const logoUrl = logoServiceToken && customer?.trim().length > 0
         ? `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
-    _jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } })) : (fallbackElement);
+    return logoUrl ? (_jsx("img", { src: logoUrl, alt: `${customer} Logo`, width: 40, height: 40, style: { borderRadius: "50%" } })) : (fallbackElement);
 };

package/dist/components/MultiAgentAccelerator/MultiAgentAccelerator.js

@@ -97,6 +97,7 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     // MUI theme
     const theme = useTheme();
     const enableZenMode = useSettingsStore((state) => state.settings.behavior.enableZenMode);
+    const apiKeys = useSettingsStore((state) => state.settings.apiKeys);
     // Stores whether are currently awaiting LLM response (for knowing when to show spinners)
     const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
     const [isEditingNetwork, setIsEditingNetwork] = useState(false);
@@ -118,12 +119,13 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const [selectedNetwork, setSelectedNetwork] = useState(null);
     const [networkDescription, setNetworkDescription] = useState("");
     const networkDisplayName = useMemo(() => cleanUpAgentName(removeTrailingUuid(selectedNetwork)), [selectedNetwork]);
+    const [providerKeysRequired, setProviderKeysRequired] = useState(new Set());
     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);
     // 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
+    // Common function to change the selected network and reset related state
     const changeSelectedNetwork = useCallback((next) => {
         setSelectedNetwork(next);
         setAgentCounts(new Map());
@@ -203,23 +205,62 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
     const designerTempNetwork = designerNetworkName
         ? temporaryNetworks.find((n) => n.agentNetworkName === designerNetworkName)
         : undefined;
-    const extraSlyData = currentTempNetwork
+    /**
+     * Builds the API keys object to be sent as extraSlyData with each request, based on the LLM providers required
+     * by the currently selected network. Only includes keys for providers that are required.
+     */
+    const getApiKeys = () => {
+        const llmConfig = {};
+        if (providerKeysRequired.has("OpenAI")) {
+            llmConfig["openai_api_key"] = apiKeys["OpenAI"];
+        }
+        if (providerKeysRequired.has("Anthropic")) {
+            llmConfig["anthropic_api_key"] = apiKeys["Anthropic"];
+        }
+        return { llm_config: llmConfig };
+    };
+    /**
+     * Builds the extraSlyData object to be sent with each request, including information for Agent Network Designer
+     * and (if required) API keys for LLM providers.
+     */
+    const buildExtraSlyData = () => {
+        if (currentTempNetwork) {
+            const result = {
+                [AGENT_NETWORK_DEFINITION_KEY]: currentTempNetwork.agentNetworkDefinition,
+            };
+            // Use agentNetworkName, not reservation_id
+            if (currentTempNetwork.agentNetworkName) {
+                result[AGENT_NETWORK_NAME_KEY] = currentTempNetwork.agentNetworkName;
+            }
+            if (currentTempNetwork.networkHocon) {
+                result[AGENT_NETWORK_HOCON] = currentTempNetwork.networkHocon;
+            }
+            return result;
+        }
+        if (designerTempNetwork) {
+            return {
+                [AGENT_NETWORK_DEFINITION_KEY]: designerTempNetwork.agentNetworkDefinition,
+            };
+        }
+        return undefined;
+    };
+    // Whether any API keys are required
+    const anyApiKeysRequired = providerKeysRequired.size > 0;
+    // Build base extraSlyData
+    const baseExtraSlyData = buildExtraSlyData();
+    // Add API keys to extraSlyData if needed, merging with baseExtraSlyData if it exists
+    const extraSlyData = anyApiKeysRequired || baseExtraSlyData
         ? {
-            [AGENT_NETWORK_DEFINITION_KEY]: currentTempNetwork.agentNetworkDefinition,
-            // Use the agentNetworkName, not reservation_id
-            ...(currentTempNetwork.agentNetworkName
-                ? { [AGENT_NETWORK_NAME_KEY]: currentTempNetwork.agentNetworkName }
-                : {}),
-            ...(currentTempNetwork.networkHocon ? { [AGENT_NETWORK_HOCON]: currentTempNetwork.networkHocon } : {}),
+            ...baseExtraSlyData,
+            ...(anyApiKeysRequired ? getApiKeys() : {}),
         }
-        : designerTempNetwork
-            ? { [AGENT_NETWORK_DEFINITION_KEY]: designerTempNetwork.agentNetworkDefinition }
-            : undefined;
+        : undefined;
     // Handle external stop button click - stops streaming and exits zen mode
     const handleExternalStop = useCallback(() => {
         chatRef.current?.handleStop();
         resetState();
     }, [resetState]);
+    const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
     useEffect(() => {
         ;
         (async () => {
@@ -242,9 +283,24 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             try {
                 const agentFunction = await getAgentFunction(neuroSanURL, selectedNetwork, userInfo.userName);
                 setNetworkDescription(agentFunction?.function?.description || "");
+                const schema = agentFunction?.function?.sly_data_schema;
+                const schemaProperties = isRecord(schema) ? schema["properties"] : undefined;
+                const llmConfig = isRecord(schemaProperties) ? schemaProperties["llm_config"] : undefined;
+                const llmConfigRequired = isRecord(llmConfig) ? llmConfig["required"] : undefined;
+                setProviderKeysRequired(new Set((Array.isArray(llmConfigRequired) ? llmConfigRequired : []).flatMap((key) => {
+                    if (key === "openai_api_key") {
+                        return ["OpenAI"];
+                    }
+                    if (key === "anthropic_api_key") {
+                        return ["Anthropic"];
+                    }
+                    console.warn(`Unknown API key requirement "${key}" for network ${selectedNetwork}. Skipping.`);
+                    // Will get dropped by flatMap
+                    return [];
+                })));
             }
-            catch {
-                // Ignore. May be a legacy agent without a functional description in Neuro-san.
+            catch (e) {
+                console.warn(`Unable to get agent details for network ${selectedNetwork}:`, e);
             }
         };
         // Clear out existing
@@ -506,6 +562,9 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
             setTourRequested(false);
         }
     }, [tourRequested, selectedNetwork, agentsInNetwork, networks, controls, setTourStatus]);
+    const getMissingApiKeys = () => {
+        return providerKeysRequired.size > 0 ? [...providerKeysRequired].filter((provider) => !apiKeys?.[provider]) : [];
+    };
     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);
@@ -531,11 +590,11 @@ export const MultiAgentAccelerator = ({ backendNeuroSanApiUrl, userInfo, }) => {
                 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, { customAgentGreetings: {
-                        [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
-                    }, agentPlaceholders: {
+                }, children: _jsx(ChatCommon, { 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, networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, targetAgent: selectedNetwork, userImage: userInfo.userImage }, selectedNetwork ?? "no-network") }) }));
+                    }, currentUser: userInfo.userName, customAgentGreetings: {
+                        [AGENT_NETWORK_DESIGNER_ID]: "Let's build a network together!",
+                    }, extraSlyData: extraSlyData, id: "agent-network-ui", isAwaitingLlm: isAwaitingLlm, missingApiKeys: getMissingApiKeys(), networkDescription: networkDescription, neuroSanURL: neuroSanURL, onChunkReceived: onChunkReceived, onStreamingComplete: onStreamingComplete, onStreamingStarted: onStreamingStarted, ref: chatRef, sampleQueries: sampleQueries, setIsAwaitingLlm: setIsAwaitingLlm, selectedNetwork: selectedNetwork }, selectedNetwork ?? "no-network") }) }));
     };
     const getStopButton = () => {
         return (_jsx(_Fragment, { children: isAwaitingLlm && enableZenMode && (_jsx(Box, { id: "stop-button-container", sx: {

package/dist/components/Settings/ApiKeyInput.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+interface ApiKeyInputProps {
+    readonly forgetKey: () => void;
+    readonly id: string;
+    readonly logo: string;
+    readonly onSave: (key: string) => void;
+    readonly onTest: (key: string) => Promise<boolean>;
+    readonly persistedValue: string;
+    readonly placeholder: string;
+    readonly vendor: string;
+}
+/**
+ * Component for inputting an API key for a given vendor, with the ability to test the key and forget the saved key.
+ */
+export declare const ApiKeyInput: FC<ApiKeyInputProps>;
+export {};

package/dist/components/Settings/ApiKeyInput.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+import ErrorIcon from "@mui/icons-material/Error";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormLabel from "@mui/material/FormLabel";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import { useEffect, useState } from "react";
+import { ConfirmationModal } from "../Common/ConfirmationModal.js";
+/**
+ * Component for inputting an API key for a given vendor, with the ability to test the key and forget the saved key.
+ */
+export const ApiKeyInput = ({ forgetKey, id, logo, onSave, onTest, persistedValue, placeholder, vendor, }) => {
+    const [inputValue, setInputValue] = useState(persistedValue ?? "");
+    const [keyValidated, setKeyValidated] = useState(null);
+    const [isValidating, setIsValidating] = useState(false);
+    const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
+    const [showKey, setShowKey] = useState(false);
+    const handleValueChange = (e) => {
+        setKeyValidated(null);
+        setInputValue(e.target.value);
+    };
+    const handleOnTest = async () => {
+        setIsValidating(true);
+        setKeyValidated(null);
+        try {
+            const isValid = await onTest(inputValue);
+            setKeyValidated(isValid);
+        }
+        finally {
+            setIsValidating(false);
+        }
+    };
+    const disableActions = !inputValue || inputValue === persistedValue || isValidating;
+    // Sync with persisted value changes - if the persisted value changes from outside
+    useEffect(() => {
+        setInputValue(persistedValue ?? "");
+        setKeyValidated(null);
+    }, [persistedValue]);
+    return (_jsxs(Box, { "data-testid": `${id}-input`, sx: { display: "flex", alignItems: "center", width: "100%", gap: 2 }, children: [confirmationDialogOpen ? (_jsx(ConfirmationModal, { id: `${id}-forget-key-confirmation-modal`, content: `This will forget the currently saved API key for ${vendor} and you will need to enter ` +
+                    " the key again to use networks that require it. Are you sure you want to continue?", handleCancel: () => {
+                    setConfirmationDialogOpen(false);
+                }, handleOk: () => {
+                    setConfirmationDialogOpen(false);
+                    setInputValue("");
+                    forgetKey();
+                }, okBtnLabel: "Yes, forget key", title: `Forget ${vendor} API key?` })) : null, _jsx(Box, { sx: {
+                    width: 25,
+                    height: 25,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx("img", { src: logo, alt: `${vendor} logo`, style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" } }) }), _jsx(FormLabel, { id: `${id}-label`, sx: { width: 90, flexShrink: 0 }, children: vendor }), _jsx(TextField, { "aria-labelledby": `${id}-label`, autoComplete: "off", onChange: handleValueChange, placeholder: placeholder, size: "small", slotProps: {
+                    input: {
+                        endAdornment: (_jsxs(InputAdornment, { position: "end", children: [_jsx(Tooltip, { title: showKey ? "Hide API key" : "Show API key", children: _jsx("span", { children: _jsx(IconButton, { "aria-label": "toggle key visibility", disabled: !inputValue, onClick: () => setShowKey(!showKey), onMouseDown: (e) => e.preventDefault(), size: "small", children: showKey ? (_jsx(VisibilityOff, { fontSize: "small" })) : (_jsx(Visibility, { fontSize: "small" })) }) }) }), _jsx(IconButton, { "aria-label": "Clear input", edge: "end", onClick: () => setInputValue(""), size: "small", children: _jsx(ClearIcon, { fontSize: "small" }) })] })),
+                    },
+                }, sx: { flex: 1 }, 
+                // Type depends on whether we're showing or hiding the key
+                type: showKey ? "text" : "password", value: inputValue, variant: "outlined" }), _jsx(Box, { sx: {
+                    width: 24,
+                    height: 24,
+                    color: (theme) => (keyValidated ? theme.palette.success.main : theme.palette.error.main),
+                }, children: keyValidated === null ? null : keyValidated ? (_jsx(CheckIcon, { fontSize: "small" })) : (_jsx(ErrorIcon, { fontSize: "small" })) }), _jsx(Button, { disabled: disableActions, loading: isValidating, onClick: handleOnTest, size: "small", variant: "contained", children: "Test" }), _jsx(Button, { onClick: () => onSave(inputValue), size: "small", variant: "contained", disabled: disableActions, children: "Save" }), _jsx(Button, { onClick: () => setConfirmationDialogOpen(true), size: "small", variant: "contained", disabled: !persistedValue || isValidating, children: "Forget" })] }));
+};