l-min-components 1.7.1570 → 1.7.1571

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1570",
+  "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;
+  }
+`;