l-min-components 1.7.1431 → 1.7.1433

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1431",
+  "version": "1.7.1433",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/reportsComponents/fullAnalysis/components/Grammar.jsx

@@ -15,9 +15,6 @@ import { useState } from "react";
 import GoodCheck from "../../../../assets/svg/goodCheck";
 import RedX from "../../../../assets/svg/redX";
 import useReportUtils from "../../hooks/useRreportUtils";
-// import WarningGrey from "../../../../assets/svg/warningGrey";
-
-// import DOMPurify from "dompurify";
 
 const Grammar = ({ Aidata }) => {
   const [selectedSection, setSelectedSection] = useState(1);
@@ -63,24 +60,38 @@ const Grammar = ({ Aidata }) => {
             <p>Click on the words to see detailed feedback</p>
           </div>
           <GrammarHeaderContent>
-            {wordsFeedback?.map((word, idx) => (
-              <span
-                // This now correctly checks if the word has an operation (i.e., a correction)
-                className={classNames({ "error-text": word?.operation })}
-                key={idx}
-                onClick={() => {
-                  if (!word?.operation) return;
-                  setSelectedWord(word);
-                  setSelectedSection(1);
-                }}
-              >
-                {/* This will only be true for words with a correction (and a position) */}
-                {word?.feedbackPosition && (
-                  <span>{word?.feedbackPosition}</span>
-                )}
-                {word?.text}
-              </span>
-            ))}
+            {wordsFeedback?.map((word, idx) => {
+              const isWord = /^\w+$/.test(word.text);
+              const isSymbol = /^[^\w\s]+$/.test(word.text);
+              const next = wordsFeedback[idx + 1];
+              const nextIsWord = /^\w+$/.test(next?.text || "");
+              const isCorrected = !!word.operation;
+              const showFeedback = !!word.feedbackPosition;
+
+              const shouldAddSpace =
+                (isWord && nextIsWord) || // word → word
+                (isSymbol && nextIsWord); // symbol → word
+
+              return (
+                <span
+                  className={classNames("inline", {
+                    "error-text": isCorrected,
+                  })}
+                  key={idx}
+                  style={{ whiteSpace: "pre" }}
+                  onClick={() => {
+                    if (!isCorrected) return;
+                    setSelectedWord(word);
+                    setSelectedSection(1);
+                  }}
+                >
+                  {/* This will only be true for words with a correction (and a position) */}
+                  {showFeedback && <sup>{word.feedbackPosition}</sup>}
+                  {word.text}
+                  {shouldAddSpace && " "}
+                </span>
+              );
+            })}
           </GrammarHeaderContent>
           <ul className="no-border ul_tabs">
             {tabs.map((tab) => (

package/src/components/reportsComponents/fullAnalysis/style.jsx

@@ -438,9 +438,7 @@ export const GrammarHeaderContent = styled.div`
   span {
     line-height: 22px;
     font-size: 16px;
-    &::after {
-      content: " ";
-    }
+
     &.error-text {
       display: inline-flex;
       padding-right: 4px;
@@ -448,7 +446,7 @@ export const GrammarHeaderContent = styled.div`
       align-items: center;
       gap: 2px;
       cursor: pointer;
-      > span {
+      > sup {
         display: inline-flex;
         justify-content: center;
         align-items: center;

package/src/components/reportsComponents/reportQuestions/components/response.jsx

@@ -28,6 +28,7 @@ const Response = ({
   goodFallback = false,
 }) => {
   const setupAiWordFlow = () => {
+    if (!response) return "";
     if (isAiWordFlow && typeof response !== "string") {
       const htmlString = response
         ?.map((item) => {

package/src/components/reportsComponents/reportQuestions/components/style/errorHeader.style.jsx

@@ -9,6 +9,7 @@ export const ErrorHeaderContainer = styled.div`
   justify-content: center;
   gap: 10px;
   padding: 10px;
+  margin-bottom: 15px;
   p {
     color: #f95454;
     text-align: center;

package/src/components/reportsComponents/reportQuestions/index.jsx

@@ -37,6 +37,7 @@ import useApi from "./api";
 import FullPageLoader from "../../fullPageLoader";
 import { OutletContext } from "../..";
 import useReportUtils from "../hooks/useRreportUtils";
+import ErrorHeader from "./components/errorHeader";
 
 /**
  * @param {Object} props
@@ -67,6 +68,7 @@ const ReportQuestions = ({
     (question) => question.value === questionType
   );
   const commentData = data?.answer?.comments;
+  const hasAnswer = data?.answer?.data;
 
   useEffect(() => {
     if (commentData?.length) setComment(commentData?.[0]);
@@ -201,6 +203,7 @@ const ReportQuestions = ({
             </>
           )}
         </ScoreHeader>
+        {data && !hasAnswer && <ErrorHeader />}
         <QuestionContent>
           {(questionType === "quiz-scripted" ||
             questionType === "quiz-unscripted" ||

package/src/components/reportsComponents/reportQuestions/questions/dialogueUnscripted.jsx

@@ -71,7 +71,13 @@ const DialogueUnscripted = ({ data, aiData, setToggle }) => {
 
       <QuestionSectionWithAnalysis>
         {analysis?.models?.length > 0 && transcript?.length > 0 && (
-          <Response title="" response={transcript} isAiWordFlow />
+          <Response
+            title=""
+            response={
+              !selectedResponse?.recording?.url ? undefined : transcript
+            }
+            isAiWordFlow
+          />
         )}
         <QuestionSectionAction>
           <ResponseAudio

package/src/components/reportsComponents/reportQuestions/questions/matchPair.jsx

@@ -62,7 +62,7 @@ const MatchPair = ({ data }) => {
             <MatchPairItem
               className={classNames({
                 "is-correct": item?.isCorrect && item?.answer,
-                "is-incorrect": !item?.isCorrect && item?.answer,
+                "is-incorrect": !item?.isCorrect,
               })}
             >
               <p>{item?.answer}</p>