l-min-components 1.7.1569 → 1.7.1571

package/package.json

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

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

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  ComprehensionContainer,
+  ComprehensionContainerResponse,
+  ComprehensionFeekback,
+} from "../style";
+
+const FeekbackResponsive = ({ title, content, color = "#00C2C2" }) => {
+  return (
+    <ComprehensionFeekback>
+      <h3 style={{ color }}>{title}</h3>
+      <p>{content}</p>
+    </ComprehensionFeekback>
+  );
+};
+
+const Comprehension = ({ Aidata }) => {
+  const model = Aidata?.data;
+
+  return (
+    <ComprehensionContainer>
+      <li>
+        <ComprehensionContainerResponse>
+          <p>Student response</p>
+          <div>
+            <p>{model?.studentTextAnswers?.[0] || Aidata?.responseText}</p>
+          </div>
+        </ComprehensionContainerResponse>
+      </li>
+      <li>
+        <FeekbackResponsive
+          title="Correct answer"
+          content={model?.model_data?.generate?.answers?.[0]?.answer}
+        />
+      </li>
+      <li>
+        <FeekbackResponsive
+          title="Feekback"
+          color="#30D468"
+          content={model?.model_data?.evaluate?.results?.[0]?.feedback}
+        />
+      </li>
+    </ComprehensionContainer>
+  );
+};
+
+export default Comprehension;

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

@@ -24,6 +24,7 @@ import useReportUtils from "../hooks/useRreportUtils";
 import GrammarV2 from "./components/Grammar.v2";
 import useTranslation from "../../../hooks/useTranslation.jsx";
 import wordStore from "../../../mc/wordStore.json";
+import Comprehension from "./components/Comprehension.jsx";
 const FullAnalysis = ({ data, onClose, accountType }) => {
   const { findText } = useTranslation(wordStore);
   const { setRightLayout, setCenterLayoutStyle } = useContext(OutletContext);
@@ -241,6 +242,9 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
                 setCheckingPlayingAudio={setCheckingPlayingAudio}
               />
             )}
+            {selectedModel?.id === "comprehension" && (
+              <Comprehension Aidata={selectedModel} />
+            )}
             {selectedModel?.id === "grammar" && (
               <>
                 {selectedModel?.version === 2 ? (

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

@@ -720,3 +720,62 @@ export const GrammarV2FeedbackList = styled.ul`
     }
   }
 `;
+
+export const ComprehensionContainer = styled.ul`
+  border-radius: 32px;
+  background: #fff;
+  padding: 20px;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 15px;
+  li {
+    border-bottom: 1px solid #dfe5e5;
+
+    padding-bottom: 15px;
+    &:last-child {
+      border-bottom: transparent;
+    }
+  }
+`;
+
+export const ComprehensionContainerResponse = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 10px;
+  padding-bottom: 5px;
+  > p {
+    color: #636666;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  > div {
+    border-radius: 24px;
+    background: #f5f7f7;
+    min-height: 150px;
+    padding: 10px;
+    > p {
+      color: #4a4d4d;
+
+      font-size: 16px;
+      line-height: 25px;
+      &::first-letter {
+        text-transform: capitalize;
+      }
+    }
+  }
+`;
+
+export const ComprehensionFeekback = styled.div`
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+  p {
+    color: #4a4d4d;
+    font-size: 14px;
+  }
+`;

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

@@ -57,6 +57,7 @@ import { NavBack, NavForword } from "../fullAnalysis/icons/navArrow";
  * @param {string} props.testId
  * @param {Array} props.questions
  * @param {string} props.questionActivityID
+ * @param {object} props.navControl
  * @returns {React.ReactNode}
  */
 import useTranslation from "../../../hooks/useTranslation.jsx";
@@ -72,6 +73,13 @@ const ReportQuestions = ({
   onSwitchQuestion,
   loading,
   mainTitle,
+  navControl = {
+    on: false,
+    disablePrev: false,
+    disableNext: false,
+    onNext: () => {},
+    onPrev: () => {},
+  },
 }) => {
   const { findText } = useTranslation(wordStore);
   const [questionList, setQuestionList] = useState([]);
@@ -251,14 +259,35 @@ const ReportQuestions = ({
             <InfoIcon2 />
           </ScoreHeader>
           <QuestionNav>
-            <button disabled={!prevId} onClick={handlePrev}>
-              <NavBack disabled={!prevId} />
-              {findText("Previous question")}
-            </button>
-            <button disabled={!nextId} onClick={handleNext}>
-              {findText("Next question")}
-              <NavForword disabled={!nextId} />
-            </button>
+            {navControl?.on ? (
+              <>
+                <button
+                  disabled={navControl.disablePrev}
+                  onClick={navControl.onPrev}
+                >
+                  <NavBack disabled={navControl.disablePrev} />
+                  {findText("Previous question")}
+                </button>
+                <button
+                  disabled={navControl.disableNext}
+                  onClick={navControl.onNext}
+                >
+                  {findText("Next question")}
+                  <NavForword disabled={navControl.disableNext} />
+                </button>
+              </>
+            ) : (
+              <>
+                <button disabled={!prevId} onClick={handlePrev}>
+                  <NavBack disabled={!prevId} />
+                  {findText("Previous question")}
+                </button>
+                <button disabled={!nextId} onClick={handleNext}>
+                  {findText("Next question")}
+                  <NavForword disabled={!nextId} />
+                </button>
+              </>
+            )}
           </QuestionNav>
         </ScoreHeaderContainer>
         {/* {data && !hasAnswer && <ErrorHeader />} */}