l-min-components 1.7.1410 → 1.7.1412

package/package.json

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

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

@@ -50,6 +50,7 @@ const Container = styled.button`
     text-align: left;
     color: #636666;
     font-size: 14px;
+    white-space: nowrap;
   }
   &.ai-mode {
     background: #00c2c21a;

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

@@ -8,6 +8,7 @@ import {
   SpeechAnalysisContentWordScore,
   SpeechAnalysisContentWordSection,
   SpeechAnalysisHeader,
+  SpeechTitle,
 } from "../style";
 import HandIcon from "../icons/hand";
 import classNames from "classnames";
@@ -21,8 +22,9 @@ import Table from "./Table";
 import { Progress } from "rsuite";
 import ClarityItem from "./ClarityItem";
 import InlineClampedText from "./InlineClampedText";
+import PlayButton from "./PlayButton";
 
-const SpeechAnalysis = ({ Aidata }) => {
+const SpeechAnalysis = ({ Aidata, isPersonal }) => {
   const [selectedWord, setSelectedWord] = useState(1);
   const [selectedSection, setSelectedSection] = useState(null);
 
@@ -60,15 +62,24 @@ const SpeechAnalysis = ({ Aidata }) => {
   const selectionSelectionValue = sectionList?.find(
     (item) => item?.id === selectedSection
   );
-  console.log(selectionSelectionValue);
+
   return (
     <ModelComtainer>
       <ModelContent>
         <SpeechAnalysisHeader>
-          <div className="label">
-            <HandIcon />
-            <p>Click on the words to see detailed feedback</p>
-          </div>
+          <SpeechTitle>
+            <div className="label">
+              <HandIcon />
+              <p>Click on the words to see detailed feedback</p>
+            </div>
+            {isPersonal && (
+              <div className="">
+                <PlayButton audio={Aidata?.audioData} />
+                <PlayButton type="ai" refernceText={Aidata?.data?.Reference} />
+              </div>
+            )}
+          </SpeechTitle>
+
           <div className="transcript-wrapper">
             {words.map((word) => (
               <span>

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

@@ -172,7 +172,10 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
             <Evaluation Aidata={selectedModel} />
           )}
           {selectedModel?.id === "speech_analysis" && (
-            <SpeechAnalysis Aidata={selectedModel} />
+            <SpeechAnalysis
+              Aidata={selectedModel}
+              isPersonal={accountType === "personal"}
+            />
           )}
           {selectedModel?.id === "gammar" && <Grammar />}
         </MainSection>

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

@@ -226,19 +226,6 @@ export const EvaluationCharactersItem = styled.div`
 `;
 
 export const SpeechAnalysisHeader = styled.div`
-  .label {
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    gap: 10px;
-    margin-bottom: 10px;
-
-    p {
-      font-size: 14px;
-      line-height: 24px;
-      color: #7c8080;
-    }
-  }
   .capitalise {
     text-transform: capitalize;
   }
@@ -278,6 +265,36 @@ export const SpeechAnalysisHeader = styled.div`
   }
 `;
 
+export const SpeechTitle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  margin-bottom: 10px;
+  .label {
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    gap: 10px;
+
+    p {
+      font-size: 14px;
+      line-height: 24px;
+      color: #7c8080;
+    }
+  }
+  > div {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    button {
+      width: 170px;
+      height: 40px;
+    }
+  }
+`;
+
 export const SelectedWord = styled.p`
   color: #636666;
   font-size: 16px;

package/src/components/reportsComponents/reportQuestions/components/modals/gradingModal.jsx

@@ -4,13 +4,9 @@ import styled from "styled-components";
 import Radio from "../radio";
 import ButtonComponent from "../../../../button";
 
-const GradingModal = ({ aiValue, onClose, setScore }) => {
+const GradingModal = ({ aiValue, onClose, setScore, noAi, defaultScore }) => {
   const [selected, setSelected] = useState("manually");
-  const [value, setValue] = useState("");
-
-  useEffect(() => {
-    setValue("");
-  }, [selected]);
+  const [value, setValue] = useState(defaultScore || "");
 
   const numberValue = Number(value || 0);
   const disable = selected === "manually" && (numberValue > 100 || !value);
@@ -34,7 +30,7 @@ const GradingModal = ({ aiValue, onClose, setScore }) => {
           <TopSection>
             <h3>Instructor’s grading</h3>
             <ul className="check_wrapper">
-              {isNumbter && (
+              {isNumbter && !noAi && (
                 <li
                   onClick={() => {
                     setSelected("ai");
@@ -143,8 +139,9 @@ const TopSection = styled.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding-bottom: 15px;
-    border: 1px solid #dfe5e5;
+    border-bottom: 1px solid #dfe5e5;
     margin-bottom: 15px;
+
     li {
       display: flex;
       align-items: center;

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

@@ -109,14 +109,21 @@ const ReportQuestions = ({
       />
     );
   }
-
+  const noAi =
+    questionType === "match-pair" ||
+    questionType === "quiz-multiple-choice" ||
+    questionType === "word-play-text" ||
+    questionType === "word-play-multiple-choice" ||
+    questionType === "essay-written";
   return (
     <Container>
       {gradeQuestionData?.loading && <FullPageLoader fixed hasBackground />}
       {toggleGrade && (
         <GradingModal
           aiValue={data?.ai_score}
+          noAi={noAi}
           setScore={handleScore}
+          defaultScore={intructorScore}
           onClose={() => {
             setToggleGrade(false);
           }}
@@ -141,12 +148,7 @@ const ReportQuestions = ({
               <ScoreBadge
                 ai
                 className={classNames({
-                  hidden:
-                    questionType === "match-pair" ||
-                    questionType === "quiz-multiple-choice" ||
-                    questionType === "word-play-text" ||
-                    questionType === "word-play-multiple-choice" ||
-                    questionType === "essay-written",
+                  hidden: noAi,
                 })}
               >
                 AI score: <span>{parseInt(data?.ai_score || 0)}%</span>