l-min-components 1.7.1519 → 1.7.1521

package/package.json

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

package/src/assets/svg/dashboard.jsx

@@ -1,8 +1,10 @@
-import React from "react";
+import React from 'react';
+import { useTranslation } from 'l-min-components/src/components';
+import wordStore from '../../mc/wordStore.json';
 export const DashboardIcon = ({ width, height, fill }) => (
   <svg
-    width={width || "24"}
-    height={height || "25"}
+    width={width || '24'}
+    height={height || '25'}
     viewBox="0 0 24 25"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -45,50 +47,51 @@ export const DashboardIcon = ({ width, height, fill }) => (
     />
   </svg>
 );
-
-export const DashboardIconActive = ({ width, height }) => (
-  <svg
-    width={width || "24"}
-    height={height || "25"}
-    viewBox="0 0 24 25"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 10.1797H7C9 10.1797 10 9.17969 10 7.17969V5.17969C10 3.17969 9 2.17969 7 2.17969H5C3 2.17969 2 3.17969 2 5.17969V7.17969C2 9.17969 3 10.1797 5 10.1797Z"
-      stroke="white"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill={"#ffffff"}
-    />
-    <path
-      d="M17 10.1797H19C21 10.1797 22 9.17969 22 7.17969V5.17969C22 3.17969 21 2.17969 19 2.17969H17C15 2.17969 14 3.17969 14 5.17969V7.17969C14 9.17969 15 10.1797 17 10.1797Z"
-      stroke="white"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill={"#ffffff"}
-    />
-    <path
-      d="M17 22.1797H19C21 22.1797 22 21.1797 22 19.1797V17.1797C22 15.1797 21 14.1797 19 14.1797H17C15 14.1797 14 15.1797 14 17.1797V19.1797C14 21.1797 15 22.1797 17 22.1797Z"
-      stroke="white"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill={"#ffffff"}
-    />
-    <path
-      d="M5 22.1797H7C9 22.1797 10 21.1797 10 19.1797V17.1797C10 15.1797 9 14.1797 7 14.1797H5C3 14.1797 2 15.1797 2 17.1797V19.1797C2 21.1797 3 22.1797 5 22.1797Z"
-      stroke="white"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill={"#ffffff"}
-    />
-  </svg>
-);
+export const DashboardIconActive = ({ width, height }) => {
+  return (
+    <svg
+      width={width || "24"}
+      height={height || "25"}
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5 10.1797H7C9 10.1797 10 9.17969 10 7.17969V5.17969C10 3.17969 9 2.17969 7 2.17969H5C3 2.17969 2 3.17969 2 5.17969V7.17969C2 9.17969 3 10.1797 5 10.1797Z"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="#ffffff"
+      />
+      <path
+        d="M17 10.1797H19C21 10.1797 22 9.17969 22 7.17969V5.17969C22 3.17969 21 2.17969 19 2.17969H17C15 2.17969 14 3.17969 14 5.17969V7.17969C14 9.17969 15 10.1797 17 10.1797Z"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill={findText("#ffffff")}
+      />
+      <path
+        d="M17 22.1797H19C21 22.1797 22 21.1797 22 19.1797V17.1797C22 15.1797 21 14.1797 19 14.1797H17C15 14.1797 14 15.1797 14 17.1797V19.1797C14 21.1797 15 22.1797 17 22.1797Z"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill={findText("#ffffff")}
+      />
+      <path
+        d="M5 22.1797H7C9 22.1797 10 21.1797 10 19.1797V17.1797C10 15.1797 9 14.1797 7 14.1797H5C3 14.1797 2 15.1797 2 17.1797V19.1797C2 21.1797 3 22.1797 5 22.1797Z"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill={findText("#ffffff")}
+      />
+    </svg>
+  );
+};

package/src/components/AIAnalysis/grammer.jsx

@@ -4,15 +4,15 @@ import styled from "styled-components";
 import { IoCloseOutline } from "react-icons/io5";
 import { FaCheck } from "react-icons/fa6";
 import ButtonComponent from "../button";
-
+import useTranslation from "../../hooks/useTranslation.jsx";
+import wordStore from "../../mc/wordStore.json";
 const Grammer = ({ data, hideScore }) => {
+  const { findText } = useTranslation(wordStore);
   const [selected, setSelected] = useState(null);
   const [showVersion, setShowVersion] = useState(null);
-
   const feedbackCorrection = data["Correction Operations (Optional)"] || [];
   const originalText = data["Original Speech"] || "";
   const correctText = data["Grammatical Correct Version"] || "";
-
   const getFeekbackResult = () => {
     const result = [];
     let positionCounter = 1; // Tracks the word position in the text
@@ -23,16 +23,16 @@ const Grammer = ({ data, hideScore }) => {
     while (wordIndex <= words?.length) {
       const word = words[wordIndex];
       const correction = feedbackCorrection[correctionIndex];
-
       if (
         correction &&
-        correction?.operation === "substituted" && // Handle substitution
+        correction?.operation === "substituted" &&
+        // Handle substitution
         words
           .slice(
             wordIndex,
-            wordIndex + correction?.original_word.split(" ").length
+            wordIndex + correction?.original_word.split(' ').length,
           )
-          .join(" ") === correction?.original_word
+          .join(' ') === correction?.original_word
       ) {
         result.push({
           text: correction?.original_word,
@@ -40,13 +40,14 @@ const Grammer = ({ data, hideScore }) => {
           position: positionCounter,
           operation: correction?.operation,
         });
-        wordIndex += correction?.original_word.split(" ").length || 0;
+        wordIndex += correction?.original_word.split(' ').length || 0;
         correctionIndex++;
         positionCounter++;
-      } else if (correction && correction?.operation === "inserted") {
+      } else if (correction && correction?.operation === 'inserted') {
         result.push({
           text: correction?.word,
-          correct: correction?.word, // Insert the new word
+          correct: correction?.word,
+          // Insert the new word
           position: positionCounter,
           operation: correction?.operation,
         });
@@ -54,12 +55,13 @@ const Grammer = ({ data, hideScore }) => {
         positionCounter++;
       } else {
         if (word !== undefined) {
-          result.push({ text: word });
+          result.push({
+            text: word,
+          });
         }
         wordIndex++;
       }
     }
-
     return result;
   };
   const getCorrectResult = () => {
@@ -67,44 +69,42 @@ const Grammer = ({ data, hideScore }) => {
     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 === 'substituted' &&
         words
           .slice(
             wordIndex,
-            wordIndex + correction?.replacement_word.split(" ").length
+            wordIndex + correction?.replacement_word.split(' ').length,
           )
-          .join(" ") === correction?.replacement_word
+          .join(' ') === correction?.replacement_word
       ) {
         result.push({
           text: correction?.replacement_word,
           highlight: true,
         });
-        wordIndex += correction?.replacement_word.split(" ").length;
+        wordIndex += correction?.replacement_word.split(' ').length;
         correctionIndex++;
-      } else if (correction && correction?.operation === "inserted") {
+      } else if (correction && correction?.operation === 'inserted') {
         result.push({
           text: correction?.word,
           highlight: true,
         });
         correctionIndex++;
       } else {
-        result.push({ text: word });
+        result.push({
+          text: word,
+        });
         wordIndex++;
       }
     }
-
     return result;
   };
-
   const generateParagraph = (data) => {
     let paragraph = "<p>";
-
     data?.forEach((item) => {
       if (item?.highlight) {
         paragraph += `<span>${item?.text}</span> `;
@@ -112,12 +112,9 @@ const Grammer = ({ data, hideScore }) => {
         paragraph += `${item?.text} `;
       }
     });
-
     paragraph = paragraph?.trim() + "</p>";
-
     return paragraph;
   };
-
   return (
     <Container>
       {showVersion && (
@@ -132,11 +129,16 @@ const Grammer = ({ data, hideScore }) => {
       <Header>
         <div className="info">
           <CursorClickIcon />
-          <p>Click on the words/sentences highlighted in red to see feedback</p>
+          <p>
+            {findText(
+              "Click on the words/sentences highlighted in red to see feedback"
+            )}
+          </p>
         </div>
         {!hideScore && (
           <p>
-            Points: <span>{data?.["Grammar Score"] || 0}</span>
+            {findText("Points:")}
+            <span>{data?.["Grammar Score"] || 0}</span>
           </p>
         )}
       </Header>
@@ -148,18 +150,18 @@ const Grammer = ({ data, hideScore }) => {
               onClick={() => {
                 if (value?.position) setSelected(value);
               }}
-              className={`${value?.position ? "error" : ""}`}
+              className={`${value?.position ? 'error' : ''}`}
             >
-              {" "}
+              {' '}
               {value?.position && <span>{value?.position}</span>} {value?.text}
             </span>
           ))}
         </div>
         {selected && (
           <div className="feedback_content">
-            <h3>Feedback:</h3>
+            <h3>{findText("Feedback:")}</h3>
             <div className="reply">
-              {selected?.operation !== "inserted" && (
+              {selected?.operation !== 'inserted' && (
                 <div className="row red">
                   <IoCloseOutline color="#F95454" />
                   <p className="red">
@@ -185,7 +187,7 @@ const Grammer = ({ data, hideScore }) => {
             });
           }}
         >
-          <ButtonComponent text="View script" type="secondary" />
+          <ButtonComponent text={findText("View script")} type="secondary" />
         </span>
         <span
           onClick={() => {
@@ -197,16 +199,18 @@ const Grammer = ({ data, hideScore }) => {
             });
           }}
         >
-          <ButtonComponent text="View corrected version" type="secondary" />
+          <ButtonComponent
+            text={findText("View corrected version")}
+            type="secondary"
+          />
         </span>
       </ButtonWrapper>
     </Container>
   );
 };
-
 export default Grammer;
-
 const WordsModal = ({ onClose, isCorrect, value }) => {
+  const { findText } = useTranslation(wordStore);
   return (
     <ModalWrapper isOpen>
       <ModalComntainer>
@@ -216,20 +220,21 @@ const WordsModal = ({ onClose, isCorrect, value }) => {
         <div className="word_wrapper">
           {isCorrect && (
             <div className="header">
-              <h4>Corrected version</h4>
-              <p>Introduced words are highlighted in green</p>
+              <h4>{findText("Corrected version")}</h4>
+              <p>{findText("Introduced words are highlighted in green")}</p>
             </div>
           )}
           <div
             className="content"
-            dangerouslySetInnerHTML={{ __html: value }}
+            dangerouslySetInnerHTML={{
+              __html: value,
+            }}
           ></div>
         </div>
       </ModalComntainer>
     </ModalWrapper>
   );
 };
-
 const ModalComntainer = styled.div`
   width: 610px;
   display: flex;
@@ -290,14 +295,12 @@ const ModalComntainer = styled.div`
     }
   }
 `;
-
 const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
 `;
-
 const Header = styled.div`
   display: flex;
   align-items: center;
@@ -329,7 +332,6 @@ const Header = styled.div`
     }
   }
 `;
-
 const Content = styled.div`
   border-radius: 20px;
   background: #f9f9f9;
@@ -409,7 +411,6 @@ const Content = styled.div`
     }
   }
 `;
-
 const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -426,7 +427,7 @@ const ModalWrapper = styled.div`
   left: 0;
   bottom: 0;
   right: 0;
-  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
+  display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.6);

package/src/components/AIAnalysis/relevant.jsx

@@ -1,38 +1,48 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import ArrowDown from "./assets/arrowDown";
-
+import useTranslation from "../../hooks/useTranslation.jsx";
+import wordStore from "../../mc/wordStore.json";
 const Relevant = ({ data, student_text, hideScore }) => {
+  const { findText } = useTranslation(wordStore);
   return (
     <Container>
       <Header>
-        <h2 className={data?.Evaluation === "Not Relevant" ? "error" : ""}>
+        <h2 className={data?.Evaluation === 'Not Relevant' ? 'error' : ''}>
           {data?.Evaluation}
         </h2>
         {!hideScore && (
           <p>
-            Points: <span>{data?.Point || 0}</span>
+            {findText("Points:")}
+            <span>{data?.Point || 0}</span>
           </p>
         )}
       </Header>
-      <Dropdown label="Feedback" isFeedback text={data?.Feedback} />
-      {student_text && <Dropdown label="Student essay" text={student_text} />}
+      <Dropdown label={findText("Feedback")} isFeedback text={data?.Feedback} />
+      {student_text && (
+        <Dropdown label={findText("Student essay")} text={student_text} />
+      )}
     </Container>
   );
 };
-
 export default Relevant;
-
 const Dropdown = ({ isFeedback, text, label }) => {
+  const { findText } = useTranslation(wordStore);
   const [toggle, setToggle] = useState(true);
   return (
     <DropdownContainer
-      className={`${isFeedback ? "feedback" : undefined}`}
+      className={findText("{arg1}", {
+        arg1: isFeedback ? "feedback" : undefined,
+      })}
       onClick={() => {
         text && setToggle(!toggle);
       }}
     >
-      <div className={`dd_header ${toggle ? "toggle" : ""}`}>
+      <div
+        className={findText("dd_header {arg1}", {
+          arg1: toggle ? "toggle" : "",
+        })}
+      >
         <p>{label}</p> <ArrowDown />
       </div>
       {toggle && text && (
@@ -43,14 +53,12 @@ const Dropdown = ({ isFeedback, text, label }) => {
     </DropdownContainer>
   );
 };
-
 const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
 `;
-
 const Header = styled.div`
   display: flex;
   align-items: center;
@@ -81,7 +89,6 @@ const Header = styled.div`
     }
   }
 `;
-
 const DropdownContainer = styled.div`
   &.feedback {
     .dd_header {

package/src/components/AIAnalysis/responsePlayer.jsx

@@ -2,8 +2,10 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import { useSpeechSynthesis } from "react-speech-kit";
 import useAudioPlayer from "../useAudioPlayer";
-
+import useTranslation from "../../hooks/useTranslation.jsx";
+import wordStore from "../../mc/wordStore.json";
 const ResponsePlayer = ({ text, audio, small, Label = "You say" }) => {
+  const { findText } = useTranslation(wordStore);
   const [isPlaying, setIsPlaying] = useState(false);
   const {
     isPlaying: audioIsPlaying,
@@ -14,21 +16,21 @@ const ResponsePlayer = ({ text, audio, small, Label = "You say" }) => {
     streamSrc: audio?.url,
     src: audio?.uploaded_media_url,
   });
-
   const { speak, cancel } = useSpeechSynthesis({
     onEnd: () => {
       setIsPlaying(false);
     },
   });
-
   return (
     <Container>
       {text && (
         <Button
-          className={small ? "small" : ""}
+          className={small ? 'small' : ''}
           onClick={() => {
             if (!isPlaying) {
-              speak({ text });
+              speak({
+                text,
+              });
               setIsPlaying(true);
             } else {
               cancel();
@@ -37,12 +39,12 @@ const ResponsePlayer = ({ text, audio, small, Label = "You say" }) => {
           }}
         >
           {isPlaying ? <StopIcon /> : <EarIcon />}
-          <span>Correct response</span>
+          <span>{findText("Correct response")}</span>
         </Button>
       )}
       {audio && isReady && (
         <Button
-          className={small ? "small" : ""}
+          className={small ? 'small' : ''}
           onClick={() => {
             if (!audioIsPlaying) {
               play();
@@ -58,11 +60,9 @@ const ResponsePlayer = ({ text, audio, small, Label = "You say" }) => {
     </Container>
   );
 };
-
 const Container = styled.div`
   width: fit-content;
 `;
-
 const Button = styled.button`
   display: flex;
   align-items: center;
@@ -90,9 +90,7 @@ const Button = styled.button`
     }
   }
 `;
-
 export default ResponsePlayer;
-
 export const StopIcon = () => (
   <svg
     width="43"
@@ -161,7 +159,6 @@ const SpeakerIcon = () => (
     </defs>
   </svg>
 );
-
 const EarIcon = () => (
   <svg
     width="43"