l-min-components 1.7.1414 → 1.7.1415

package/package.json

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

package/src/assets/svg/warningGrey.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const WarningGrey = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 5H11V7H9V5ZM9 9H11V15H9V9ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z"
+        fill="#949999"
+      />
+    </svg>
+  );
+};
+
+export default WarningGrey;

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

@@ -16,7 +16,7 @@ const EvalutionFeedback = ({
         {!hideWarning && (
           <div>
             <WarningIcon />
-            <p>Introduced words are highlighted in blue</p>
+            <p>Introduced words are highlighted in green</p>
           </div>
         )}
       </Header>
@@ -62,6 +62,6 @@ const Header = styled.div`
 export const HighlightedText = styled.p`
   font-size: 14px;
   span {
-    color: #00c2c2;
+    color: #30d468;
   }
 `;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   GrammarContent,
   GrammarHeader,
@@ -14,35 +14,36 @@ import { MarsIcon } from "lucide-react";
 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";
 
-const Grammar = () => {
+const Grammar = ({ Aidata }) => {
   const [selectedSection, setSelectedSection] = useState(1);
-  const sampleText =
-    "Text <span><span>1</span>setup</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis odio laboriosam adipisci ab inventore velit pariatur, alias quas hic libero.";
+  const [selectedWord, setSelectedWord] = useState(null);
 
-  const texts = [
-    { text: "Hello" },
-    { text: "world,", position: 1 },
-    { text: "James", position: 2 },
-    { text: "back" },
-    { text: "How" },
-    { text: "are", position: 3 },
-    { text: "you" },
-    { text: "doing", position: 4 },
-    { text: "today?" },
-    { text: "It's", position: 5 },
-    { text: "been" },
-    { text: "a" },
-    { text: "while", position: 6 },
-    { text: "since" },
-    { text: "we", position: 7 },
-    { text: "last" },
-    { text: "met.", position: 8 },
-    { text: "Hope" },
-    { text: "everything", position: 9 },
-    { text: "is" },
-    { text: "great!" },
-  ];
+  const data = Aidata?.data;
+  const feedbackCorrection = data?.["Correction Operations (Optional)"] || [];
+  const originalText = data?.["Original Speech"] || "";
+  const correctText = data?.["Grammatical Correct Version"] || "";
+  const feedbacks = data?.["Feedback"];
+  const {
+    grammarFeekbackResult,
+    grammerCorrectParagraph,
+    grammarCorrectResult,
+  } = useReportUtils();
+
+  const wordsFeedback = grammarFeekbackResult(
+    originalText,
+    feedbackCorrection,
+    feedbacks
+  );
+  const correctWods = grammarCorrectResult(correctText, feedbackCorrection);
+  const correctParagraph = correctWods
+    ? grammerCorrectParagraph(correctWods)
+    : "";
+  useEffect(() => {
+    if (wordsFeedback?.length) setSelectedWord(wordsFeedback?.[0]);
+  }, [wordsFeedback?.length]);
 
   const tabs = [
     { label: "Feedback", value: 1, icon: ChatIcon },
@@ -58,13 +59,18 @@ const Grammar = () => {
             <p>Click on the words to see detailed feedback</p>
           </div>
           <GrammarHeaderContent>
-            {texts?.map((item, idx) => (
+            {wordsFeedback?.map((word, idx) => (
               <span
-                className={classNames({ "error-text": item?.position })}
+                className={classNames({ "error-text": word?.position })}
                 key={idx}
+                onClick={() => {
+                  setSelectedWord(word);
+
+                  setSelectedSection(1);
+                }}
               >
-                {item?.position && <span>{item.position}</span>}
-                {item.text}
+                {word?.position && <span>{word?.position}</span>}
+                {word?.text}
               </span>
             ))}
           </GrammarHeaderContent>
@@ -76,7 +82,9 @@ const Grammar = () => {
                 className={classNames({
                   active: selectedSection === tab.value,
                 })}
-                onClick={() => setSelectedSection(tab.value)}
+                onClick={() => {
+                  setSelectedSection(tab.value);
+                }}
               >
                 <tab.icon
                   color={selectedSection === tab.value ? "#f5f7f7" : "#949999"}
@@ -87,26 +95,30 @@ const Grammar = () => {
           </ul>
         </GrammarHeader>
         <GrammarContent>
-          {selectedSection === 1 && (
+          {selectedSection === 1 && selectedWord && (
             <div className="feedback_section">
               <div className="failed">
                 <RedX />
                 <span>
-                  <span>1</span> Makes
+                  <span>{selectedWord?.position}</span> {selectedWord?.text}
                 </span>
               </div>
               <div className="correct">
                 <GoodCheck />
-                <span>Makes</span>
+                <span>{selectedWord?.correct}</span>
               </div>
-              <p>
-                The verbs should be in the same tense within the a sentence or
-                paragraph
-              </p>
+              <p>{selectedWord?.feedback}</p>
             </div>
           )}
-          {selectedSection === 2 && (
-            <p>Technology make more convenient life and means easier.</p>
+          {selectedSection === 2 && originalText && <p>{originalText}</p>}
+          {selectedSection === 3 && (
+            <div className="correct_section">
+              <div className="warning">
+                <WarningGrey />
+                <p>Introduced words are highlighted in green</p>
+              </div>
+              <p dangerouslySetInnerHTML={{ __html: correctParagraph }}></p>
+            </div>
           )}
         </GrammarContent>
       </ModelContent>

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

@@ -72,7 +72,7 @@ const SpeechAnalysis = ({ Aidata, isPersonal }) => {
               <HandIcon />
               <p>Click on the words to see detailed feedback</p>
             </div>
-            {true && (
+            {isPersonal && (
               <div className="">
                 <PlayButton audio={Aidata?.audioData} />
                 <PlayButton type="ai" refernceText={Aidata?.data?.Reference} />

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

@@ -53,9 +53,11 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
     };
   }, []);
 
-  const firstModel = data && data?.models?.[0];
-  const secondModel = data && data?.models?.[1];
-  const thirdModel = data && data?.models?.[2];
+  const sideModels = data && data?.models?.filter((item) => item?.sideProgress);
+
+  const firstModel = sideModels && sideModels?.[0];
+  const secondModel = sideModels && sideModels?.[1];
+  const thirdModel = sideModels && sideModels?.[2];
 
   const selectedModel =
     data && data?.models?.find((item) => item?.id === selected);
@@ -74,8 +76,8 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
         <ArrowLeft />
         <h1>Full analysis</h1>
       </Header>
-      <Content className={classNames({ personal: true })}>
-        {null && (
+      <Content className={classNames({ personal: accountType === "personal" })}>
+        {accountType !== "personal" && (
           <Sidebar>
             <ProgressSidebar>
               <ProgressCircleSection>
@@ -177,7 +179,9 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
               isPersonal={accountType === "personal"}
             />
           )}
-          {selectedModel?.id === "gammar" && <Grammar />}
+          {selectedModel?.id === "grammar" && (
+            <Grammar Aidata={selectedModel} />
+          )}
         </MainSection>
       </Content>
     </Container>

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

@@ -442,6 +442,27 @@ export const GrammarContent = styled.div`
   p {
     color: #4a4d4d;
   }
+
+  .correct_section {
+    > .warning {
+      display: flex;
+      align-items: center;
+      border-radius: 20px;
+      background: #fff;
+      width: 100%;
+      height: 40px;
+      gap: 8px;
+      padding: 0 20px;
+      color: #7c8080;
+      font-size: 14px;
+      margin-bottom: 20px;
+    }
+    p {
+      span {
+        color: #30d468;
+      }
+    }
+  }
   .feedback_section {
     display: flex;
     flex-direction: column;

package/src/components/reportsComponents/hooks/useRreportUtils.jsx

@@ -315,8 +315,7 @@ const setupAnalysis = (data, audioData, score) => {
   if (
     data?.grammar &&
     data?.grammar?.length &&
-    data?.grammar?.[0]?.model_data?.["Original Speech"] &&
-    null
+    data?.grammar?.[0]?.model_data?.["Original Speech"]
   ) {
     const grammarData = data?.grammar?.[0]?.model_data;
     const score = grammarData?.["Grammar Score"] || 0;
@@ -394,6 +393,124 @@ const dialpgueSelectedModel = (response, aiData) => {
 
   return objectData;
 };
+
+const grammarFeekbackResult = (originalText, feedbackCorrection, feedbacks) => {
+  if (!originalText || !feedbackCorrection) return;
+  const result = [];
+  let positionCounter = 1; // Tracks the word position in the text
+  let correctionIndex = 0; // Tracks the current correction
+  let words = originalText?.split(/\s+/) || []; // Split text into words
+  let wordIndex = 0; // Tracks the current word being processed
+
+  while (wordIndex <= words?.length) {
+    const word = words[wordIndex];
+    const correction = feedbackCorrection[correctionIndex];
+
+    if (
+      correction &&
+      (correction?.operation === "substituted" ||
+        correction?.operation === "formatting") && // Handle substitution
+      words
+        .slice(
+          wordIndex,
+          wordIndex + correction?.original_word.split(" ").length
+        )
+        .join(" ") === correction?.original_word
+    ) {
+      const getFeebackText = (idx) => {
+        if (feedbacks?.length) {
+          return feedbacks?.[idx] || null;
+        }
+        return null;
+      };
+      result.push({
+        text: correction?.original_word,
+        correct: correction?.replacement_word,
+        position: positionCounter,
+        operation: correction?.operation,
+        feedback: getFeebackText(positionCounter - 1),
+      });
+      wordIndex += correction?.original_word.split(" ").length || 0;
+      correctionIndex++;
+      positionCounter++;
+    } else if (correction && correction?.operation === "inserted") {
+      result.push({
+        text: correction?.word,
+        correct: correction?.word, // Insert the new word
+        position: positionCounter,
+        operation: correction?.operation,
+      });
+      correctionIndex++;
+      positionCounter++;
+    } else {
+      if (word !== undefined) {
+        result.push({ text: word });
+      }
+      wordIndex++;
+    }
+  }
+
+  return result;
+};
+
+const grammarCorrectResult = (correctText, feedbackCorrection) => {
+  if (!correctText || !feedbackCorrection) return;
+  const result = [];
+  let correctionIndex = 0;
+  let words = correctText.split(/\s+/);
+  let wordIndex = 0;
+
+  while (wordIndex < words.length) {
+    const word = words[wordIndex];
+    const correction = feedbackCorrection[correctionIndex];
+    if (
+      correction &&
+      (correction?.operation === "substituted" ||
+        correction?.operation === "formatting") &&
+      words
+        .slice(
+          wordIndex,
+          wordIndex + correction?.replacement_word.split(" ").length
+        )
+        .join(" ") === correction?.replacement_word
+    ) {
+      result.push({
+        text: correction?.replacement_word,
+        highlight: true,
+      });
+      wordIndex += correction?.replacement_word.split(" ").length;
+      correctionIndex++;
+    } else if (correction && correction?.operation === "inserted") {
+      result.push({
+        text: correction?.word,
+        highlight: true,
+      });
+      correctionIndex++;
+    } else {
+      result.push({ text: word });
+      wordIndex++;
+    }
+  }
+
+  return result;
+};
+
+const grammerCorrectParagraph = (data) => {
+  if (!data) return;
+  let paragraph = "";
+
+  data?.forEach((item) => {
+    if (item?.highlight) {
+      paragraph += `<span>${item?.text}</span> `;
+    } else {
+      paragraph += `${item?.text} `;
+    }
+  });
+
+  paragraph = paragraph?.trim();
+
+  return paragraph;
+};
 const useReportUtils = () => {
   return {
     choiceListAndAnswer,
@@ -404,6 +521,9 @@ const useReportUtils = () => {
     getTrabScriptData,
     quixSelectedModel,
     dialpgueSelectedModel,
+    grammarFeekbackResult,
+    grammarCorrectResult,
+    grammerCorrectParagraph,
   };
 };
 

package/src/components/reportsComponents/reportQuestions/components/modals/gradingModal.jsx

@@ -4,19 +4,33 @@ import styled from "styled-components";
 import Radio from "../radio";
 import ButtonComponent from "../../../../button";
 
-const GradingModal = ({ aiValue, onClose, setScore, noAi, defaultScore }) => {
+const GradingModal = ({
+  aiValue,
+  onClose,
+  setScore,
+  noAi,
+  defaultScore,
+  suggestionValue,
+}) => {
   const [selected, setSelected] = useState("manually");
   const [value, setValue] = useState(defaultScore || "");
 
   const numberValue = Number(value || 0);
   const disable = selected === "manually" && (numberValue > 100 || !value);
 
-  const isNumbter = typeof aiValue === "number";
+  const isNumbter = Number(aiValue) || 0;
+  const isSuggestionNumber = Number(suggestionValue) || 0;
 
   const handleSetValue = () => {
     setScore?.({
-      score_method: selected === "manually" ? "MANUAL" : "AI",
-      score: selected === "manually" ? numberValue : aiValue,
+      score_method:
+        selected === "manually" || selected === "suggest" ? "MANUAL" : "AI",
+      score:
+        selected === "manually"
+          ? numberValue
+          : selected === "suggest"
+          ? isSuggestionNumber
+          : aiValue,
     });
   };
 
@@ -30,7 +44,7 @@ const GradingModal = ({ aiValue, onClose, setScore, noAi, defaultScore }) => {
           <TopSection>
             <h3>Instructor’s grading</h3>
             <ul className="check_wrapper">
-              {isNumbter && !noAi && (
+              {!noAi && (
                 <li
                   onClick={() => {
                     setSelected("ai");
@@ -43,6 +57,19 @@ const GradingModal = ({ aiValue, onClose, setScore, noAi, defaultScore }) => {
                   Use AI grade
                 </li>
               )}
+              {noAi && (
+                <li
+                  onClick={() => {
+                    setSelected("suggest");
+                  }}
+                >
+                  <Radio
+                    checked={selected === "suggest"}
+                    defaultBorderColor={"#C6CCCC"}
+                  />
+                  Use system grade
+                </li>
+              )}
               <li
                 onClick={() => {
                   setSelected("manually");
@@ -57,8 +84,9 @@ const GradingModal = ({ aiValue, onClose, setScore, noAi, defaultScore }) => {
             </ul>
             <div className="value_section">
               <p className="label">Grade</p>
-              {selected === "ai" && (
-                <p className="ai_value">{aiValue ? aiValue : 0}</p>
+              {selected === "ai" && <p className="ai_value">{isNumbter}</p>}
+              {selected === "suggest" && (
+                <p className="ai_value">{isSuggestionNumber}</p>
               )}
               {selected === "manually" && (
                 <input

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

@@ -113,15 +113,18 @@ const ReportQuestions = ({
     questionType === "match-pair" ||
     questionType === "quiz-multiple-choice" ||
     questionType === "word-play-text" ||
-    questionType === "word-play-multiple-choice" ||
-    questionType === "essay-written";
+    questionType === "word-play-multiple-choice";
+
+  console.log(data);
+
   return (
     <Container>
       {gradeQuestionData?.loading && <FullPageLoader fixed hasBackground />}
       {toggleGrade && (
         <GradingModal
           aiValue={data?.ai_score}
-          noAi
+          suggestionValue={data?.suggested_score}
+          noAi={noAi}
           setScore={handleScore}
           defaultScore={intructorScore}
           onClose={() => {
@@ -145,16 +148,14 @@ const ReportQuestions = ({
             </ScoreBadge>
           ) : (
             <>
-              {null && (
-                <ScoreBadge
-                  ai
-                  className={classNames({
-                    hidden: noAi,
-                  })}
-                >
-                  AI score: <span>{parseInt(data?.ai_score || 0)}%</span>
-                </ScoreBadge>
-              )}
+              <ScoreBadge
+                ai
+                className={classNames({
+                  hidden: noAi,
+                })}
+              >
+                AI score: <span>{parseInt(data?.ai_score || 0)}%</span>
+              </ScoreBadge>
               <ScoreRight>
                 <></>
                 <ScoreBadge