l-min-components 1.7.1413 → 1.7.1415

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1413",
+  "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/Evaluation.jsx

@@ -32,7 +32,7 @@ const Evaluation = ({ Aidata }) => {
   return (
     <ModelComtainer>
       <EvaluationHeader>
-        <p>{Aidata?.data?.overall_feedback}</p>
+        <p>{`This is the general feedback for the ${selectSection?.label?.toLowerCase()} analysis.`}</p>
       </EvaluationHeader>
       <ModelContent>
         <ul>

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} />