@nualang/nualang-ui-components 0.1.1270 → 0.1.1272

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -16,6 +16,7 @@ var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore
 var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
 var _RecordVoiceOver = _interopRequireDefault(require("@mui/icons-material/RecordVoiceOver"));
 var _Forum = _interopRequireDefault(require("@mui/icons-material/Forum"));
+var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
 var _OndemandVideo = _interopRequireDefault(require("@mui/icons-material/OndemandVideo"));
 var _AssignmentRoleplaySelection = _interopRequireDefault(require("../AssignmentRoleplaySelection/AssignmentRoleplaySelection"));
 var _CardElements = require("../../Cards/CardElements");
@@ -186,7 +187,7 @@ function Exercise({
       }), name.toLowerCase() === "roleplays" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Forum.default, {})
       }), name.toLowerCase() === "bots" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Forum.default, {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Face.default, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
         width: "100%",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
@@ -502,7 +503,7 @@ function Topic({
       handleSelectExercise(removeExercises);
     } else {
       let exercisesToAdd = [];
-      exercises?.filter(e => e.name !== "roleplays").forEach(exercise => {
+      exercises?.filter(e => e.name !== "roleplays" && e.name !== "bots").forEach(exercise => {
         if (!selectedExercises?.some(e => e.courseSectionTopicId === courseSectionTopicId && e.name === exercise.name)) {
           exercisesToAdd.push({
             courseSectionTopicId: courseSectionTopicId,

package/dist/Chat/Chat.js

@@ -97,7 +97,8 @@ function Chat({
   roleplayImage,
   siteLanguage,
   answerCounts,
-  noAnswerCounts
+  noAnswerCounts,
+  isDynamicResponsesEnabled
 }) {
   const {
     classes
@@ -160,7 +161,8 @@ function Chat({
       roleplayImage: roleplayImage,
       siteLanguage: siteLanguage,
       answerCounts: answerCounts,
-      noAnswerCounts: noAnswerCounts
+      noAnswerCounts: noAnswerCounts,
+      isDynamicResponsesEnabled: isDynamicResponsesEnabled
     }), !hideBottomBar && !viewAttemptMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomBar.default, {
       t: t,
       inputName: inputName,

package/dist/Chat/ChatLoading/ChatLoading.js

@@ -12,6 +12,8 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
 var _material = require("@mui/material");
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _AiExperienceIcon = _interopRequireDefault(require("../../Misc/AiExperienceIcon/AiExperienceIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()((theme, {
@@ -135,9 +137,11 @@ function ChatLoading({
   botMessageIndex,
   hideAvatar,
   messages = [],
-  index
+  index,
+  isDynamicResponsesEnabled
 }) {
   const theme = (0, _styles.useTheme)();
+  const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
   const messageContainerId = `message${botMessageIndex}`;
   const {
     classes
@@ -152,16 +156,35 @@ function ChatLoading({
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.message,
-      children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-        className: classes.avatar,
-        src: userImage,
-        alt: ""
+      children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            position: "relative",
+            display: "inline-block"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            className: classes.avatar,
+            src: userImage,
+            alt: ""
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiExperienceIcon.default, {
+            aiExperienceInfoText: t('ai_chatbot_message_generating_info'),
+            sx: {
+              bottom: isSmallScreen ? "23px" : "23px",
+              right: isSmallScreen ? "-11px" : "-21px",
+              transform: isSmallScreen ? "scale(0.33)" : "scale(0.43)"
+            }
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          className: classes.avatar,
+          src: userImage,
+          alt: ""
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
         className: classes.avatar,
-        sx: {
+        sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "white" : "",
           color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
-        },
+        }),
         alt: "",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Person.default, {
           fontSize: "large"
@@ -188,7 +211,6 @@ function ChatLoading({
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
                   variant: "subtitle2",
                   component: "h4",
-                  gutterBottom: true,
                   fontWeight: "bold",
                   align: "left",
                   children: name

package/dist/Chat/Messages/Message/Message.js

@@ -26,6 +26,7 @@ var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery
 var _DragIndicator = _interopRequireDefault(require("@mui/icons-material/DragIndicator"));
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _BorderColor = _interopRequireDefault(require("@mui/icons-material/BorderColor"));
+var _AiExperienceIcon = _interopRequireDefault(require("../../../Misc/AiExperienceIcon/AiExperienceIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _mui.makeStyles)()((theme, {
@@ -298,7 +299,8 @@ function Message({
   isLivePlayer = false,
   siteLanguage,
   provided,
-  isEdited = false
+  isEdited = false,
+  isDynamicResponsesEnabled
 }) {
   const theme = (0, _styles.useTheme)();
   const messageContainerId = `message${messageIndex}`;
@@ -369,10 +371,30 @@ function Message({
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: classes.message,
-      children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-        className: classes.avatar,
-        src: userImage,
-        alt: ""
+      children: [userImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: !isMyMessage && isDynamicResponsesEnabled === 'enable' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            position: "relative",
+            display: "inline-block"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            className: classes.avatar,
+            src: userImage,
+            alt: ""
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AiExperienceIcon.default, {
+            aiExperienceInfoText: t('ai_chatbot_message_info'),
+            isCurrentMessagePlaying: isCurrentMessagePlaying,
+            sx: {
+              bottom: isSmallScreen ? "23px" : "23px",
+              right: isSmallScreen ? "-11px" : "-21px",
+              transform: isSmallScreen ? "scale(0.33)" : "scale(0.43)"
+            }
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          className: classes.avatar,
+          src: userImage,
+          alt: ""
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
         className: classes.avatar,
         sx: theme => ({
@@ -457,13 +479,18 @@ function Message({
               },
               spacing: 4,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                  variant: "subtitle2",
-                  component: "h4",
-                  gutterBottom: true,
-                  fontWeight: "bold",
-                  align: "left",
-                  children: name
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                    variant: "subtitle2",
+                    component: "h4",
+                    fontWeight: "bold",
+                    align: "left",
+                    children: name
+                  })
                 })
               }), isEdited && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {

package/dist/Chat/Messages/Messages.js

@@ -61,6 +61,7 @@ function Messages({
   noAnswerCounts,
   moveScriptItem,
   voice,
+  isDynamicResponsesEnabled,
   ...otherProps
 }) {
   const {
@@ -196,6 +197,7 @@ function Messages({
               isLivePlayer: isLivePlayer,
               siteLanguage: siteLanguage,
               moveScriptItem: moveScriptItem,
+              isDynamicResponsesEnabled: isDynamicResponsesEnabled,
               ...m,
               ...otherProps
             }, `messy_${i}`)
@@ -225,6 +227,7 @@ function Messages({
               t: t,
               index: i,
               messages: messages,
+              isDynamicResponsesEnabled: isDynamicResponsesEnabled,
               ...m,
               ...otherProps
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default, {
@@ -247,6 +250,7 @@ function Messages({
               speak: speak,
               isLivePlayer: isLivePlayer,
               siteLanguage: siteLanguage,
+              isDynamicResponsesEnabled: isDynamicResponsesEnabled,
               ...m,
               ...otherProps
             }, `messy_${i}`))]

package/dist/Dialogs/CreateQuestion/CreateQuestion.js

@@ -20,6 +20,7 @@ var _dragAndDrop = require("../../utils/dragAndDrop/dragAndDrop");
 var _ResponsiveDialog = _interopRequireDefault(require("../ResponsiveDialog"));
 var _InputHelper = _interopRequireDefault(require("../../Forms/InputHelper"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _uuid = require("uuid");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // components
@@ -63,7 +64,10 @@ function CreateQuestion({
 }) {
   const [question, setQuestion] = (0, _react.useState)(initialQuestion);
   const [answer, setAnswer] = (0, _react.useState)(initialAnswerState);
-  const [answerList, setAnswerList] = (0, _react.useState)(answers);
+  const [answerList, setAnswerList] = (0, _react.useState)(() => (answers || []).map(a => ({
+    ...a,
+    id: a.id || (0, _uuid.v4)()
+  })));
   const [error, setError] = (0, _react.useState)("");
   const handleAnswerInputChange = event => {
     const target = event.target;
@@ -84,7 +88,8 @@ function CreateQuestion({
       } else {
         setAnswerList(prevAnswerList => [...prevAnswerList, {
           ...answer,
-          text: answer.text.trim()
+          text: answer.text.trim(),
+          id: (0, _uuid.v4)()
         }]);
         setAnswer(initialAnswerState);
         setError("");
@@ -131,12 +136,10 @@ function CreateQuestion({
       active,
       over
     } = result;
-    if (!over) {
-      return;
-    }
+    if (!over) return;
     if (active.id !== over.id) {
-      const oldIndex = answerList.findIndex((item, index) => `${index}-${item.text}` === active.id);
-      const newIndex = answerList.findIndex((item, index) => `${index}-${item.text}` === over.id);
+      const oldIndex = answerList.findIndex(item => item.id === active.id);
+      const newIndex = answerList.findIndex(item => item.id === over.id);
       const updatedAnswerList = (0, _sortable.arrayMove)(answerList, oldIndex, newIndex);
       setAnswerList(updatedAnswerList);
     }
@@ -204,10 +207,10 @@ function CreateQuestion({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableDndContextWrapper, {
-        items: answerList.map((a, index) => `${index}-${a.text}`),
+        items: answerList.map(a => a.id),
         onDragEnd: handleOnDragEnd,
         children: answerList.map((a, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dragAndDrop.SortableHandleOnly, {
-          sortId: `${idx}-${a.text}`,
+          sortId: a.id,
           index: idx,
           renderHandle: ({
             setActivatorNodeRef,
@@ -237,7 +240,7 @@ function CreateQuestion({
                 value: a.text,
                 onChange: handleExistingAnswerInputChange(idx),
                 margin: "none",
-                id: `answer-${idx}`,
+                id: `answer-${a.id}`,
                 name: "text",
                 type: "text",
                 fullWidth: true,
@@ -274,7 +277,7 @@ function CreateQuestion({
               })
             })]
           })
-        }, idx))
+        }, a.id))
       })
     })]
   });

package/dist/Dialogs/GenerateBot/GenerateBot.js

@@ -266,8 +266,8 @@ function GenerateBotDialog({
             required: true,
             onChange: handleChange,
             multiline: true,
-            rows: 3,
-            maxLength: 200
+            rows: 3
+            // maxLength={200}
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           size: 12,
@@ -286,10 +286,9 @@ function GenerateBotDialog({
             sx: {
               marginBottom: 5
             },
-            onChange: e => setTopicGoal(e.target.value),
-            inputProps: {
-              maxLength: 300
-            },
+            onChange: e => setTopicGoal(e.target.value)
+            // inputProps={{ maxLength: 300 }}
+            ,
             InputProps: {
               endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                 position: "end",

package/dist/Dialogs/GeneratePhrases/GeneratePhrases.js

@@ -244,8 +244,8 @@ function GeneratePhrases({
             required: true,
             onChange: handleChange,
             multiline: true,
-            rows: 3,
-            maxLength: 300
+            rows: 3
+            // maxLength={300}
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           mb: 2,
@@ -261,10 +261,9 @@ function GeneratePhrases({
             margin: "normal",
             variant: "outlined",
             fullWidth: true,
-            onChange: handleChange,
-            inputProps: {
-              maxLength: 200
-            },
+            onChange: handleChange
+            // inputProps={{ maxLength: 200 }}
+            ,
             InputProps: {
               endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                 position: "end",

package/dist/Dialogs/GenerateRoleplay/GenerateRoleplay.js

@@ -394,8 +394,8 @@ function GenerateRoleplayDialog({
             required: true,
             onChange: handleChange,
             multiline: true,
-            rows: 3,
-            maxLength: 300
+            rows: 3
+            // maxLength={300}
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           size: 12,
@@ -413,10 +413,9 @@ function GenerateRoleplayDialog({
             sx: {
               marginBottom: 5
             },
-            onChange: e => setTopicGoal(e.target.value),
-            inputProps: {
-              maxLength: 300
-            },
+            onChange: e => setTopicGoal(e.target.value)
+            // inputProps={{ maxLength: 300 }}
+            ,
             InputProps: {
               endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
                 position: "end",

package/dist/Exercises/Bot/Bot.js

@@ -636,7 +636,8 @@ function Bot({
         speak: speak,
         stopSpeaking: stopSpeaking,
         isSpeaking: isSpeaking,
-        isSpeakingTextContainer: isSpeakingTextContainer
+        isSpeakingTextContainer: isSpeakingTextContainer,
+        isDynamicResponsesEnabled: isDynamicResponsesClassroomEnabled
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveDialog.default, {
         open: instructionDialogOpen,
         handleClose: handleCloseInstructions,

package/dist/Misc/AiExperienceIcon/AiExperienceIcon.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AiExperienceIcon;
+var _react = require("@emotion/react");
+var _material = require("@mui/material");
+var _AutoAwesome = _interopRequireDefault(require("@mui/icons-material/AutoAwesome"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Icon shimmer on hover
+const shimmerIcon = (0, _react.keyframes)`
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.15);
+    filter: brightness(1.8);
+  }
+`;
+
+// Background shine animation
+const shine = (0, _react.keyframes)`
+  0% {
+    transform: translateX(-150%) rotate(25deg);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateX(150%) rotate(25deg);
+    opacity: 0;
+  }
+`;
+
+// Pulse animation
+const pulse = (0, _react.keyframes)`
+  0%, 100% {
+    transform: scale(0.96);
+  }
+  50% {
+    transform: scale(1);
+  }
+`;
+function AiExperienceIcon({
+  sx,
+  aiExperienceInfoText,
+  isCurrentMessagePlaying
+}) {
+  const theme = (0, _material.useTheme)();
+  const backgroundGradient = `linear-gradient(145deg, rgba(72, 32, 120, 0.68) 40%, rgba(0, 102, 255, 0.76) 90%)`;
+  const boxShadow = `0 0 40px rgba(0, 102, 255, 0.95), 0 0 25px rgba(72, 32, 120, 0.85)`;
+  const shimmerGradient = `linear-gradient(120deg, transparent, rgba(0, 102, 255, 1), transparent)`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        width: 45,
+        height: 45,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "auto"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          width: "100%",
+          height: "100%",
+          animation: isCurrentMessagePlaying ? `${pulse} 1.6s ease-in-out infinite` : "none",
+          transformOrigin: "center center"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backdropFilter: "blur(8px)",
+            background: backgroundGradient,
+            position: "relative",
+            overflow: "hidden",
+            boxShadow,
+            border: `1.5px solid ${theme.palette.background.paper}`,
+            "::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "200%",
+              height: "100%",
+              background: shimmerGradient,
+              animation: `${shine} 2s infinite linear`,
+              borderRadius: "50%",
+              pointerEvents: "none",
+              zIndex: 1
+            },
+            "&:hover > .shimmer-icon": {
+              animation: `${shimmerIcon} 3s ease-in-out infinite`
+            },
+            ...sx
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: aiExperienceInfoText,
+            arrow: true,
+            placement: "bottom",
+            slotProps: {
+              popper: {
+                modifiers: [{
+                  name: "flip",
+                  enabled: false
+                }]
+              }
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoAwesome.default, {
+              className: "shimmer-icon",
+              sx: {
+                zIndex: 2,
+                color: "#ffffff !important",
+                filter: "drop-shadow(0 0 6px #00E5FF) drop-shadow(0 0 8px #8A2BE2)",
+                fontSize: 28
+              }
+            })
+          })
+        })
+      })
+    })
+  });
+}

package/dist/hooks/useExerciseState.js

@@ -1560,48 +1560,50 @@ function useExerciseState({
   };
   const handleSubmitBotMessage = async () => {
     try {
-      const method = `${finalTranscript || ""} ${interimTranscript || ""}`.trim() === botText.trim() ? "voice" : "text";
-      addBotMessage(botText, true, false, method, false, finalTranscript);
-      resetTranscript();
-      const loadingMessage = {
-        isMyMessage: false,
-        userImage: bot && bot.botAvatar ? bot.botAvatar : null,
-        name: bot && bot.name ? bot.name : "Bot",
-        text: "Loading ...",
-        isLoading: true
-      };
-      setBotMessages(prevMessages => [...prevMessages, loadingMessage]);
-      const intialStudentGreeting = getInitialStudentGreeting(learnLang);
-      const intialBotGreeting = getInitialBotGreeting(learnLang, bot.name);
-      const body = {
-        message: botText,
-        vars: botVars,
-        isFirstMessage: Array.isArray(aiChatbotConversationHistory) && aiChatbotConversationHistory.length !== 0 ? false : isFirstMessage,
-        i18nLanguage,
-        isDynamicResponsesEnabled: isUserInternal ? isDynamicResponsesEnabled === "enable" ? true : false : false,
-        conversationHistory,
-        botProgess: aiChatbotConversationHistory,
-        botTemplate: bot.selectedTemplate ? bot.selectedTemplate : "",
-        intialStudentGreeting,
-        intialBotGreeting
-      };
-      const response = await handleMessageBot(bot.botId, body);
-      if (response.errorMessage) {
-        openSnackbar("problem_getting_reply", "error");
-      } else if (typeof response === "string" && response.startsWith("Syntax error:")) {
-        openSnackbar(response, "error");
-      }
-      if (response && response.reply) {
-        setBotText("");
-        setBotVars(response.vars);
-        setConversationHistory(response.conversationHistory);
-        handleReset();
-        if (clearAttemptAudio) {
-          clearAttemptAudio();
+      if (botText && botText.trim() !== '') {
+        const method = `${finalTranscript || ""} ${interimTranscript || ""}`.trim() === botText.trim() ? "voice" : "text";
+        addBotMessage(botText, true, false, method, false, finalTranscript);
+        resetTranscript();
+        const loadingMessage = {
+          isMyMessage: false,
+          userImage: bot && bot.botAvatar ? bot.botAvatar : null,
+          name: bot && bot.name ? bot.name : "Bot",
+          text: "Loading ...",
+          isLoading: true
+        };
+        setBotMessages(prevMessages => [...prevMessages, loadingMessage]);
+        const intialStudentGreeting = getInitialStudentGreeting(learnLang);
+        const intialBotGreeting = getInitialBotGreeting(learnLang, bot.name);
+        const body = {
+          message: botText,
+          vars: botVars,
+          isFirstMessage: Array.isArray(aiChatbotConversationHistory) && aiChatbotConversationHistory.length !== 0 ? false : isFirstMessage,
+          i18nLanguage,
+          isDynamicResponsesEnabled: isUserInternal ? isDynamicResponsesEnabled === "enable" ? true : false : false,
+          conversationHistory,
+          botProgess: aiChatbotConversationHistory,
+          botTemplate: bot.selectedTemplate ? bot.selectedTemplate : "",
+          intialStudentGreeting,
+          intialBotGreeting
+        };
+        const response = await handleMessageBot(bot.botId, body);
+        if (response.errorMessage) {
+          openSnackbar("problem_getting_reply", "error");
+        } else if (typeof response === "string" && response.startsWith("Syntax error:")) {
+          openSnackbar(response, "error");
+        }
+        if (response && response.reply) {
+          setBotText("");
+          setBotVars(response.vars);
+          setConversationHistory(response.conversationHistory);
+          handleReset();
+          if (clearAttemptAudio) {
+            clearAttemptAudio();
+          }
+          setBotMessages(prevMessages => prevMessages.filter(message => message.isLoading !== true));
+          addBotMessage(response.reply, false, true);
+          setIsFirstMessage(false);
         }
-        setBotMessages(prevMessages => prevMessages.filter(message => message.isLoading !== true));
-        addBotMessage(response.reply, false, true);
-        setIsFirstMessage(false);
       }
     } catch (error) {
       console.error(error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1270",
+  "version": "0.1.1272",
   "main": "dist/index.js",
   "files": [
     "dist",