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

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/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: {