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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cognizant-ai-lab/ui-common",
   "description": "A shared UI component library for Cognizant AI Labs projects",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "type": "module",
   "scripts": {
     "build": "yarn clean && yarn generate && yarn run --top-level tsc --project tsconfig.build.json && fix-esm-import-path dist > /dev/null",
@@ -14,7 +14,6 @@
     "@langchain/core": "1.1.17",
     "@xyflow/react": "12.10.1",
     "http-status": "1.7.3",
-    "jsonrepair": "3.8.0",
     "lodash-es": "4.18.1",
     "notistack": "3.0.2",
     "react-joyride": "3.1.0",
@@ -22,6 +21,7 @@
     "react-syntax-highlighter": "16.1.0",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
+    "remark-gfm": "4.0.1",
     "uuid": "14.0.0",
     "zustand": "4.5.7"
   },

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

@@ -1,14 +0,0 @@
-import { FC } from "react";
-import { ConnectivityInfo } from "../../../generated/neuro-san/NeuroSanClient.js";
-interface AgentConnectivityProps {
-    readonly id: string;
-    readonly description: string;
-    readonly connectivityInfo?: readonly ConnectivityInfo[];
-    readonly targetAgent: string;
-}
-/**
- * Render the connectivity info as a list of origins and their tools
- * @returns A MUIAccordion representing the connectivity info with agents and their tools
- */
-export declare const AgentConnectivity: FC<AgentConnectivityProps>;
-export {};

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

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MUIAccordion } from "../../Common/MUIAccordion.js";
-const renderConnectivityInfo = (targetAgent, connectivityInfo) => (_jsx(_Fragment, { children: connectivityInfo
-        // Don't show connection to self
-        ?.filter((info) => info.origin.toLowerCase() !== targetAgent.toLowerCase())
-        // Sort by origin name
-        .sort((a, b) => a.origin.localeCompare(b.origin))
-        // Render each origin and its tools
-        .map((info) => (_jsxs("li", { id: info.origin, children: [_jsx("b", { children: info.origin }), _jsx("ul", { id: `${info.origin}-tools`, style: { marginLeft: "8px" }, children: info?.tools?.map((tool) => (_jsx("li", { children: tool }, tool))) })] }, info.origin))) }));
-/**
- * Render the connectivity info as a list of origins and their tools
- * @returns A MUIAccordion representing the connectivity info with agents and their tools
- */
-export const AgentConnectivity = ({ connectivityInfo, description, id, targetAgent }) => (_jsx(MUIAccordion, { id: `${id}-agent-details`, sx: { marginTop: "1rem", marginBottom: "1rem" }, items: [
-        {
-            title: "Network Details",
-            content: [
-                `My description is: "${description}"`,
-                _jsx("h6", { id: "connectivity-header", style: { marginTop: "1rem" }, children: "I can connect you to the following agents" }, "item-1"),
-                _jsx("ul", { id: "connectivity-list", "aria-labelledby": "connectivity-header", style: { marginTop: "1rem" }, children: renderConnectivityInfo(targetAgent, connectivityInfo) }, "item-2"),
-            ],
-        },
-    ] }));

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

@@ -1,12 +0,0 @@
-import { FC } from "react";
-import { CombinedAgentType } from "../Common/Types.js";
-interface AgentIntroProps {
-    readonly agentDisplayName: string;
-    readonly customAgentGreetings?: Partial<Record<CombinedAgentType, string>>;
-    readonly targetAgent: string;
-}
-/**
- * Component to display agent intro, including agent name, image, and greeting.
- */
-export declare const AgentIntro: FC<AgentIntroProps>;
-export {};

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

@@ -1,19 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AGENT_IMAGE } from "./Const.js";
-import { GENERIC_AGENT_GREETINGS } from "./Greetings.js";
-import { UserQueryDisplay } from "./UserQueryDisplay.js";
-/**
- * Component to display agent intro, including agent name, image, and greeting.
- */
-export const AgentIntro = ({ agentDisplayName, customAgentGreetings, targetAgent }) => {
-    // eslint-disable-next-line react/hook-use-state -- we want to set this an "on mount" value only and never update
-    const [greeting] = useState(() => {
-        if (customAgentGreetings?.[targetAgent]) {
-            return customAgentGreetings[targetAgent];
-        }
-        const randomIndex = Math.floor(Math.random() * GENERIC_AGENT_GREETINGS.length);
-        return GENERIC_AGENT_GREETINGS[randomIndex];
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(UserQueryDisplay, { userQuery: agentDisplayName, title: targetAgent, userImage: AGENT_IMAGE }), greeting] }));
-};

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

@@ -1,14 +0,0 @@
-import { FC } from "react";
-interface AgentMetadataDisplayProps {
-    readonly currentUser: string;
-    readonly disableQueries: boolean;
-    readonly handleSend: (query: string) => Promise<void>;
-    readonly id: string;
-    readonly neuroSanURL: string;
-    readonly targetAgent: string;
-}
-/**
- * Component to display agent metadata, including connectivity info and sample queries.
- */
-export declare const AgentMetadata: FC<AgentMetadataDisplayProps>;
-export {};

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

@@ -1,43 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { AgentConnectivity } from "./AgentConnectivity.js";
-import { SampleQueries } from "./SampleQueries.js";
-import { getAgentFunction, getConnectivity } from "../../../controller/agent/Agent.js";
-import { NotificationType, sendNotification } from "../../Common/notification.js";
-import { isLegacyAgentType } from "../Common/Types.js";
-/**
- * Component to display agent metadata, including connectivity info and sample queries.
- */
-export const AgentMetadata = ({ currentUser, disableQueries, handleSend, id, neuroSanURL, targetAgent, }) => {
-    const [sampleQueries, setSampleQueries] = useState([]);
-    const [connectivityInfo, setConnectivityInfo] = useState([]);
-    const [description, setDescription] = useState("");
-    useEffect(() => {
-        const fetchAgentDetails = async () => {
-            // It is a Neuro-san agent, so get the function and connectivity info
-            try {
-                const agentFunction = await getAgentFunction(neuroSanURL, targetAgent, currentUser);
-                setDescription(agentFunction?.function?.description || "");
-            }
-            catch {
-                // For now, just return. May be a legacy agent without a functional description in Neuro-san.
-                return;
-            }
-            try {
-                const connectivity = await getConnectivity(neuroSanURL, targetAgent, currentUser);
-                setConnectivityInfo(connectivity?.connectivity_info);
-                const sampleQueriesTmp = (connectivity?.metadata?.["sample_queries"] || []);
-                setSampleQueries(sampleQueriesTmp);
-            }
-            catch (e) {
-                // If we got here, it means we got the agent function successfully, but failed to get connectivity info.
-                // This is unexpected.
-                sendNotification(NotificationType.error, `Failed to get connectivity info for ${targetAgent}. Error: ${e}`);
-            }
-        };
-        if (targetAgent && !isLegacyAgentType(targetAgent)) {
-            void fetchAgentDetails();
-        }
-    }, [currentUser, neuroSanURL, targetAgent]);
-    return (_jsxs(_Fragment, { children: [description && connectivityInfo?.length > 0 && (_jsx(AgentConnectivity, { connectivityInfo: connectivityInfo, description: description, id: `${id}-connectivity`, targetAgent: targetAgent })), sampleQueries?.length > 0 && (_jsx(SampleQueries, { disabled: disableQueries, handleSend: handleSend, sampleQueries: sampleQueries }))] }));
-};

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

@@ -1 +0,0 @@
-export declare const AGENT_IMAGE = "/agent.svg";

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

@@ -1,2 +0,0 @@
-// Avatar to use for agents in chat
-export const AGENT_IMAGE = "/agent.svg";

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

@@ -1 +0,0 @@
-export declare const GENERIC_AGENT_GREETINGS: string[];

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

@@ -1,38 +0,0 @@
-/*
-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.
-*/
-// Random greetings agents can use
-export const GENERIC_AGENT_GREETINGS = [
-    "Hey there! How can I assist you today?",
-    "Hi! What can I do for you?",
-    "Hello! Need help with something?",
-    "Hey! How’s your day going? What can I help with?",
-    "Hi there! What’s on your mind?",
-    "Hello, friend! How can I make your day easier?",
-    "Hey, how can I assist you today?",
-    "Hi! Got any questions? I’m here to help!",
-    "Hey! What’s up? How can I be of service?",
-    "Greetings! What can I do for you?",
-    "Hello there! Need any assistance?",
-    "Hey, good to see you! How can I help?",
-    "Hi! I’d love to assist you—what’s on your mind?",
-    "Hey, what’s new? How can I lend a hand?",
-    "Hello! I’m here to help—what do you need?",
-    "Hi there! Looking for answers? I’ve got you!",
-    "Hey! Need some help? I’m all ears!",
-    "Hello! What’s something I can help you figure out today?",
-    "Hi! How’s it going? What can I do for you?",
-    "Hey there! Got a challenge? Let’s solve it together!",
-];

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

@@ -1,7 +0,0 @@
-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/ChatCommon/UserQueryDisplay.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, 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 Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
-import { DEFAULT_USER_IMAGE } from "../../../const.js";
-// #region: Styled Components
-const UserQueryContainer = styled("div")(({ theme }) => ({
-    backgroundColor: theme.palette.background.paper,
-    border: "var(--bs-border-width) var(--bs-border-style)",
-    borderRadius: "var(--bs-border-radius)",
-    boxShadow: `0 0px 6px 0 ${theme.palette.mode === "dark" ? "var(--bs-accent2-light)" : "rgba(var(--bs-primary-rgb), 0.15)"}`,
-    display: "inline-flex",
-    padding: "10px",
-}));
-// #endregion: Styled Components
-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/Common/LlmChatOptionsButton.d.ts

@@ -1,6 +0,0 @@
-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, keyof import("@mui/material/Button").ButtonOwnProps> & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "tabIndex" | "type" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material/Button").ButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "sx" | "children" | "className" | "tabIndex" | "type" | "classes" | "variant" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "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/LlmChatOptionsButton.js

@@ -1,31 +0,0 @@
-/*
-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 Button from "@mui/material/Button";
-import { styled } from "@mui/material/styles";
-import { getZIndex } from "../../utils/zIndexLayers.js";
-export const LlmChatOptionsButton = styled(Button, {
-    shouldForwardProp: (prop) => prop !== "enabled" && prop !== "posRight" && prop !== "posBottom",
-})(({ theme, enabled, posRight }) => ({
-    position: "absolute",
-    top: 10,
-    right: posRight || null,
-    zIndex: getZIndex(1, null), // Seems to only be needed on Analytics Chat, but apply to all.
-    background: `${enabled ? theme.palette.primary.main : theme.palette.grey[600]} !important`,
-    borderColor: `${enabled ? theme.palette.primary.main : theme.palette.grey[600]} !important`,
-    borderRadius: "var(--bs-border-radius)",
-    width: "30px",
-    height: "30px",
-}));