l-min-components 1.7.1591 → 1.7.1592

package/package.json

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

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

@@ -1,20 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   ComprehensionContainer,
   ComprehensionContainerResponse,
   ComprehensionFeekback,
+  ComprehensionFeekbackHeader,
 } from "../style";
+import TranslateDropdown from "./translateDropdown";
+import useLanguages from "../api/useLanguage";
 
-const FeekbackResponsive = ({ title, content, color = "#00C2C2" }) => {
+const FeekbackResponsive = ({
+  title,
+  content,
+  color = "#00C2C2",
+  isPersonal,
+  disablelang,
+}) => {
+  const [translate, setTranslate] = useState(null);
+  const { translateLangData, handleTranslate } = useLanguages();
   return (
     <ComprehensionFeekback>
-      <h3 style={{ color }}>{title}</h3>
-      <p>{content}</p>
+      <ComprehensionFeekbackHeader>
+        <h3 style={{ color }}>{title}</h3>
+        {!disablelang && isPersonal && (
+          <TranslateDropdown
+            loading={translateLangData?.loading}
+            onChange={async (lang) => {
+              const code = lang?.code;
+              if (code === "en" || !lang) {
+                setTranslate(null);
+                return;
+              }
+              const res = await handleTranslate({
+                phrase: content,
+                language: code,
+              });
+
+              if (res?.data) {
+                setTranslate(res?.data?.data);
+              }
+            }}
+          />
+        )}
+      </ComprehensionFeekbackHeader>
+      <p>{translate || content}</p>
     </ComprehensionFeekback>
   );
 };
 
-const Comprehension = ({ Aidata }) => {
+const Comprehension = ({ Aidata, isPersonal }) => {
   const model = Aidata?.data;
 
   return (
@@ -23,13 +56,18 @@ const Comprehension = ({ Aidata }) => {
         <ComprehensionContainerResponse>
           <p>Student response</p>
           <div>
-            <p>{model?.studentTextAnswers?.[0] || Aidata?.responseText}</p>
+            <p>
+              {model?.studentTextAnswers?.[0] ||
+                model?.results?.[0]?.transcription ||
+                Aidata?.responseText}
+            </p>
           </div>
         </ComprehensionContainerResponse>
       </li>
       <li>
         <FeekbackResponsive
           title="Correct answer"
+          disablelang
           content={model?.model_data?.generate?.answers?.[0]?.answer}
         />
       </li>
@@ -38,6 +76,7 @@ const Comprehension = ({ Aidata }) => {
           title="Feekback"
           color="#30D468"
           content={model?.model_data?.evaluate?.results?.[0]?.feedback}
+          isPersonal={isPersonal}
         />
       </li>
     </ComprehensionContainer>