impact-chatbot 2.3.39 → 2.3.41

package/dist/index.esm.js

@@ -6342,11 +6342,8 @@ const useStyles$3 = makeStyles$1((theme) => ({
     progressSubItems: {
         display: "flex",
         flexDirection: "column",
-        gap: pxToRem(14),
-        marginTop: pxToRem(8),
-        padding: `${pxToRem(8)} ${pxToRem(14)}`,
-        background: colours.greys100,
-        borderRadius: pxToRem(8),
+        gap: pxToRem(12),
+        marginTop: pxToRem(6),
         transition: "opacity 0.3s ease",
         overflow: "auto",
         maxHeight: pxToRem(300),
@@ -6378,26 +6375,55 @@ const useStyles$3 = makeStyles$1((theme) => ({
         },
     },
     progressSubItem: {
-        display: "flex",
-        alignItems: "flex-start",
-        gap: pxToRem(6),
-        fontFamily: "'JetBrains Mono', monospace",
-        fontSize: pxToRem(14),
-        fontWeight: 400,
-        lineHeight: pxToRem(20),
-        color: colours.darkBlack,
-        "&::before": {
-            content: '"•"',
-            flexShrink: 0,
-            color: colours.darkBlack,
-            fontSize: pxToRem(14),
-            lineHeight: pxToRem(20),
-        },
+        fontFamily: "Manrope",
+        fontSize: pxToRem(12),
+        fontWeight: 600,
+        lineHeight: pxToRem(18),
+        color: "#888",
     },
     stepFormContainer: {
         marginTop: pxToRem(8),
     },
 }));
+/**
+ * Typewriter effect component — reveals text character by character.
+ * Tracks already-animated text so the effect only plays once (survives remounts).
+ */
+const animatedTexts$1 = new Set();
+const TypewriterText$1 = ({ text, speed = 15 }) => {
+    const alreadyAnimated = animatedTexts$1.has(text);
+    const [displayed, setDisplayed] = useState(alreadyAnimated ? text : "");
+    const indexRef = useRef(alreadyAnimated ? text?.length || 0 : 0);
+    const prevTextRef = useRef(text || "");
+    useEffect(() => {
+        if (!text)
+            return;
+        // If already animated, show full text immediately
+        if (animatedTexts$1.has(text)) {
+            setDisplayed(text);
+            return;
+        }
+        // If text changed, reset
+        if (text !== prevTextRef.current) {
+            prevTextRef.current = text;
+            indexRef.current = 0;
+            setDisplayed("");
+        }
+        const interval = setInterval(() => {
+            indexRef.current += 1;
+            if (indexRef.current >= text.length) {
+                setDisplayed(text);
+                animatedTexts$1.add(text);
+                clearInterval(interval);
+            }
+            else {
+                setDisplayed(text.slice(0, indexRef.current));
+            }
+        }, speed);
+        return () => clearInterval(interval);
+    }, [text, speed]);
+    return jsx(Fragment, { children: displayed });
+};
 /**
  * Determines the overall status of a question based on its steps.
  * - "completed": all steps are completed
@@ -6453,7 +6479,7 @@ const ProgressBarItem$1 = ({ question, questionSteps, isLast, classes, formData,
             setIsExpanded(true);
         }
     }, [status, formData]);
-    return (jsxs("div", { className: classes.progressItem, children: [jsxs("div", { className: classes.progressTrack, children: [jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxs("div", { className: classes.progressContent, children: [jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxs("div", { className: classes.reasoningLabel, children: [jsx(SvgReasoningIcon, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxs("div", { className: classes.progressSubItem, children: [step.header, step.sub_header ? ` - ${step.sub_header}` : ""] }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters }) }))] })] }));
+    return (jsxs("div", { className: classes.progressItem, children: [jsxs("div", { className: classes.progressTrack, children: [jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxs("div", { className: classes.progressContent, children: [jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxs("div", { className: classes.reasoningLabel, children: [jsx(SvgReasoningIcon, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsx("div", { className: classes.progressSubItem, children: jsx(TypewriterText$1, { text: `${step.header}${step.sub_header ? ` - ${step.sub_header}` : ""}` }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters }) }))] })] }));
 };
 const Steps$1 = ({ steps, setSteps, done, setTabValue, setDone, finalStepDone, setFinalStepDone, stepChange, currentMode, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, }) => {
     const classes = useStyles$3();
@@ -6846,6 +6872,10 @@ const StreamedContent = ({ botData }) => {
                             }
                             let intentSteps = cloneDeep(questionsStepsMapRef.current[currentIntent]);
                             if (newStep.header) {
+                                // Remove placeholder if it's the only entry — real step replaces it
+                                if (intentSteps.length === 1 && intentSteps[0].header === "Processing Request") {
+                                    intentSteps = [];
+                                }
                                 // Only add/update sub-steps that have a non-empty header
                                 const existingIdx = intentSteps.findIndex((s) => s.header === newStep.header);
                                 if (existingIdx !== -1) {
@@ -7503,11 +7533,8 @@ const useStyles$2 = makeStyles$1((theme) => ({
     progressSubItems: {
         display: "flex",
         flexDirection: "column",
-        gap: pxToRem(14),
-        marginTop: pxToRem(8),
-        padding: `${pxToRem(8)} ${pxToRem(14)}`,
-        background: colours.greys100,
-        borderRadius: pxToRem(8),
+        gap: pxToRem(12),
+        marginTop: pxToRem(6),
         transition: "max-height 0.3s ease, opacity 0.3s ease",
         overflow: "auto",
         maxHeight: pxToRem(300),
@@ -7539,26 +7566,55 @@ const useStyles$2 = makeStyles$1((theme) => ({
         },
     },
     progressSubItem: {
-        display: "flex",
-        alignItems: "flex-start",
-        gap: pxToRem(6),
-        fontFamily: "'JetBrains Mono', monospace",
-        fontSize: pxToRem(14),
-        fontWeight: 400,
-        lineHeight: pxToRem(20),
-        color: colours.darkBlack,
-        "&::before": {
-            content: '"•"',
-            flexShrink: 0,
-            color: colours.darkBlack,
-            fontSize: pxToRem(14),
-            lineHeight: pxToRem(20),
-        },
+        fontFamily: "Manrope",
+        fontSize: pxToRem(12),
+        fontWeight: 600,
+        lineHeight: pxToRem(18),
+        color: "#888",
     },
     stepFormContainer: {
         marginTop: pxToRem(8),
     },
 }));
+/**
+ * Typewriter effect component — reveals text character by character.
+ * Tracks already-animated text so the effect only plays once (survives remounts).
+ */
+const animatedTexts = new Set();
+const TypewriterText = ({ text, speed = 15 }) => {
+    const alreadyAnimated = animatedTexts.has(text);
+    const [displayed, setDisplayed] = useState(alreadyAnimated ? text : "");
+    const indexRef = useRef(alreadyAnimated ? text?.length || 0 : 0);
+    const prevTextRef = useRef(text || "");
+    useEffect(() => {
+        if (!text)
+            return;
+        // If already animated, show full text immediately
+        if (animatedTexts.has(text)) {
+            setDisplayed(text);
+            return;
+        }
+        // If text changed, reset
+        if (text !== prevTextRef.current) {
+            prevTextRef.current = text;
+            indexRef.current = 0;
+            setDisplayed("");
+        }
+        const interval = setInterval(() => {
+            indexRef.current += 1;
+            if (indexRef.current >= text.length) {
+                setDisplayed(text);
+                animatedTexts.add(text);
+                clearInterval(interval);
+            }
+            else {
+                setDisplayed(text.slice(0, indexRef.current));
+            }
+        }, speed);
+        return () => clearInterval(interval);
+    }, [text, speed]);
+    return jsx(Fragment, { children: displayed });
+};
 /**
  * Determines the overall status of a question based on its steps.
  */
@@ -7608,7 +7664,7 @@ const ProgressBarItem = ({ question, questionSteps, isLast, classes, formData, i
             setIsExpanded(true);
         }
     }, [status, formData]);
-    return (jsxs("div", { className: classes.progressItem, children: [jsxs("div", { className: classes.progressTrack, children: [jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxs("div", { className: classes.progressContent, children: [jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxs("div", { className: classes.reasoningLabel, children: [jsx(SvgReasoningIcon, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsxs("div", { className: classes.progressSubItem, children: [step.header, step.sub_header ? ` - ${step.sub_header}` : ""] }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters }) }))] })] }));
+    return (jsxs("div", { className: classes.progressItem, children: [jsxs("div", { className: classes.progressTrack, children: [jsx("div", { className: `${classes.progressDot} ${dotClass}` }), !isLast && jsx("div", { className: `${classes.progressLine} ${lineClass}` })] }), jsxs("div", { className: classes.progressContent, children: [jsxs("div", { className: classes.progressHeader, onClick: handleToggle, children: [jsx("span", { className: `${classes.progressHeaderText} ${textClass}`, children: question }), hasSubItems && (jsx(ChevronRightIcon$1, { className: `${classes.progressChevron} ${textClass} ${isExpanded ? "expanded" : ""}` }))] }), hasSubItems && isExpanded && status === "in-progress" && (jsxs("div", { className: classes.reasoningLabel, children: [jsx(SvgReasoningIcon, {}), "Reasoning..."] })), hasSubItems && isExpanded && (jsx("div", { className: classes.progressSubItems, style: { maxHeight: isExpanded ? "500px" : "0", opacity: isExpanded ? 1 : 0 }, children: questionSteps.map((step, idx) => (jsx("div", { className: classes.progressSubItem, children: jsx(TypewriterText, { text: `${step.header}${step.sub_header ? ` - ${step.sub_header}` : ""}` }) }, idx))) })), formData && isExpanded && (jsx("div", { className: classes.stepFormContainer, children: jsx(StepFormContent, { formData: formData, isFormDisabled: isFormDisabled, showSavedFilters: showSavedFilters }) }))] })] }));
 };
 const Steps = ({ steps, questions = [], questionsStepsMap = {}, stepFormDataMap = {}, isFormDisabled = false, activeFormIntent = null, isRestreaming = false }) => {
     const classes = useStyles$2();
@@ -11629,7 +11685,6 @@ const SmartBot = (props) => {
     useEffect(() => {
         const handleStepFormStreamStart = () => {
             setIsStop(true);
-            const { stepFormStreamControl } = require("./components/message-template/components/message-content/ButtonContent");
             const abortStepFormStream = () => {
                 if (stepFormStreamControl.abort) {
                     stepFormStreamControl.abort();