impact-chatbot 2.3.13 → 2.3.14

package/dist/index.esm.js

@@ -2793,6 +2793,8 @@ const colours = {
   oceanGreen: "#3BB273",
   linen: "#FCEEEE",
   greyishBlue: "#F2F4FA",
+  denim: "#1A56DB",
+  pattensBlue: "#DBEAFE"
 };
 
 const rem = (px) => `${px / 16}rem`;
@@ -4300,21 +4302,37 @@ const useStyles$5 = makeStyles((theme) => ({
             height: "100%",
         }
     },
+    headingContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: pxToRem(8),
+        marginBottom: pxToRem(5),
+    },
     heading: {
         fontFamily: "Manrope, sans-serif",
         fontSize: pxToRem(20),
         fontWeight: 800,
         lineHeight: pxToRem(30),
-        color: "#31416E",
-        marginBottom: pxToRem(5),
+        color: colours.boldHeadingBlue,
         textAlign: "center",
     },
+    alphaTag: {
+        fontFamily: "Manrope, sans-serif",
+        fontSize: pxToRem(11),
+        fontWeight: 700,
+        color: colours.denim,
+        backgroundColor: colours.pattensBlue,
+        borderRadius: pxToRem(4),
+        padding: `${pxToRem(2)} ${pxToRem(8)}`,
+        lineHeight: pxToRem(16),
+    },
     headingHelperText: {
         fontFamily: "Manrope, sans-serif",
         fontSize: pxToRem(14),
         fontWeight: 400,
         lineHeight: pxToRem(16),
-        color: "#31416E",
+        color: colours.boldHeadingBlue,
         marginBottom: pxToRem(44),
         // maxWidth: pxToRem(420),
         textAlign: "center",
@@ -4341,7 +4359,7 @@ const useStyles$5 = makeStyles((theme) => ({
 const useRectangleStyles = makeStyles((theme) => ({
     rectangle: {
         width: "100%",
-        height: pxToRem(80),
+        height: "4rem",
         borderRadius: pxToRem(12),
         padding: pxToRem(16),
         display: "flex",
@@ -4418,11 +4436,16 @@ const useRectangleStyles = makeStyles((theme) => ({
     },
     title: {
         fontFamily: "Manrope, sans-serif",
-        fontSize: pxToRem(16),
-        fontWeight: 800,
+        fontSize: pxToRem(14),
+        fontWeight: 600,
         lineHeight: pxToRem(21),
         color: "#1F2B4D",
         marginBottom: pxToRem(2),
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        display: "-webkit-box",
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical",
     },
     description: {
         fontFamily: "Manrope, sans-serif",
@@ -4434,7 +4457,18 @@ const useRectangleStyles = makeStyles((theme) => ({
 }));
 const Rectangle = ({ type, icon, title, description, onClick, hoverable }) => {
     const classes = useRectangleStyles();
-    return (jsx("div", { className: `${classes.rectangle} ${classes[type]} ${hoverable ? classes.rectangleHoverable : ''}`, onClick: onClick, children: jsxs("div", { className: classes.textContainer, children: [jsx(Typography, { className: classes.title, children: title }), jsx(Typography, { className: classes.description, children: description })] }) }));
+    const titleRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const checkTruncation = useCallback(() => {
+        const el = titleRef.current;
+        if (el) {
+            setIsTruncated(el.scrollHeight > el.clientHeight);
+        }
+    }, []);
+    useEffect(() => {
+        checkTruncation();
+    }, [title, checkTruncation]);
+    return (jsxs("div", { className: `${classes.rectangle} ${classes[type]} ${hoverable ? classes.rectangleHoverable : ''}`, onClick: onClick, title: isTruncated ? title : null, children: [jsxs("div", { className: classes.textContainer, children: [jsx(Typography, { className: classes.title, ref: titleRef, children: title }), jsx(Typography, { className: classes.description, children: description })] }), jsx("div", { className: classes.iconContainer, children: jsx("div", { className: classes.icon, children: icon }) })] }));
 };
 const ChatPlaceholder = (props) => {
     const { dateFormat, chatDataRef, currentMode, setShowChatPlaceholder, setLoader, setCurrentAgentId, baseUrl, setBaseUrl, setCurrentSessionId, customChatConfig, chatDataInfoRef, setChatDataState, userInput, legacyAgentScreen, activeConversationId, chatBodyRef, chatbotContext, setInitValue, setSessionId, thinkingContent, setThinkingContent, isThinking, setIsThinking, chatId, setChatId, isStop, setIsStop, functionsRef, functionsState, setFunctionsState, thinkingHeaderMessage, setThinkingHeaderMessage, uniqueChatId, setUniqueChatId, fieldNumber, setFieldNumber, setAdditionalArgs, questions, displayQuestions } = props;
@@ -4561,7 +4595,7 @@ const ChatPlaceholder = (props) => {
         agentId: card.agentId || card.id
     }));
     const dataToMap = legacyAgentScreen || displayQuestions ? transformedCardList : rectangleData;
-    return (jsxs("div", { className: classes.placeholderContainer, children: [jsx("div", { className: classes.centerIconContainer, children: jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsx(Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsx(Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsx(Rectangle, { type: item.type, icon: item.icon, title: item.title, description: item.description, onClick: () => handleRectangleClick(item?.agentId, item?.title), hoverable: legacyAgentScreen || displayQuestions }, index))) })] }));
+    return (jsxs("div", { className: classes.placeholderContainer, children: [jsx("div", { className: classes.centerIconContainer, children: jsx(SvgCenter3D, { className: classes.centerIcon }) }), jsxs("div", { className: classes.headingContainer, children: [jsx(Typography, { variant: "h1", className: classes.heading, children: "Alan's Capabilities" }), jsx("span", { className: classes.alphaTag, children: "Alpha" })] }), jsx(Typography, { variant: "body1", className: classes.headingHelperText, children: "Discover potential issues & opportunities Alan can help you with!" }), jsx("div", { className: classes.rectanglesContainer, children: dataToMap.map((item, index) => (jsx(Rectangle, { type: item.type, icon: item.icon, title: item.title, description: item.description, onClick: () => handleRectangleClick(item?.agentId, item?.title), hoverable: legacyAgentScreen || displayQuestions }, index))) })] }));
 };
 
 const dateFormat = "DD-MM-YYYY HH:mm:ss";