l-min-components 1.7.1417 → 1.7.1418

package/package.json

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

package/src/assets/svg/warningGrey.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const WarningGrey = () => {
+const WarningGrey = ({ color = "#949999" }) => {
   return (
     <svg
       width="20"
@@ -11,7 +11,7 @@ const WarningGrey = () => {
     >
       <path
         d="M9 5H11V7H9V5ZM9 9H11V15H9V9ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z"
-        fill="#949999"
+        fill={color}
       />
     </svg>
   );

package/src/components/AIAnalysis/responsePlayer.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { useSpeechSynthesis } from "react-speech-kit";
 import useAudioPlayer from "../useAudioPlayer";
@@ -14,7 +14,7 @@ const ResponsePlayer = ({ text, audio, small, Label = "You say" }) => {
     streamSrc: audio?.url,
     src: audio?.uploaded_media_url,
   });
-  const audioRef = useRef(null);
+
   const { speak, cancel } = useSpeechSynthesis({
     onEnd: () => {
       setIsPlaying(false);

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

@@ -35,7 +35,7 @@ const Evaluation = ({ Aidata }) => {
         <p>{`This is the general feedback for the ${selectSection?.label?.toLowerCase()} analysis.`}</p>
       </EvaluationHeader>
       <ModelContent>
-        <ul>
+        <ul className="ul_tabs">
           {optionList?.map((item) => (
             <li
               key={item?.value}

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

@@ -74,7 +74,7 @@ const Grammar = ({ Aidata }) => {
               </span>
             ))}
           </GrammarHeaderContent>
-          <ul className="no-border">
+          <ul className="no-border ul_tabs">
             {tabs.map((tab) => (
               <li
                 key={tab.value}

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

@@ -5,28 +5,53 @@ import classNames from "classnames";
 import { useState } from "react";
 import { useSpeechSynthesis } from "react-speech-kit";
 import useAudioPlayer from "../../../useAudioPlayer";
+import AudioWaveComponent from "../../../useAudioPlayer/audioWave";
 
 const PlayButton = ({ type, refernceText, audio }) => {
-  const { speak, cancel } = useSpeechSynthesis({});
+  const [isPlayingSpeak, setIsPlayingSpeak] = useState(false);
+  const { speak, cancel } = useSpeechSynthesis({
+    onEnd: () => {
+      setIsPlayingSpeak(false);
+    },
+  });
 
-  const { play } = useAudioPlayer({
+  const { play, isPlaying, isReady } = useAudioPlayer({
     streamSrc: audio?.url,
     src: audio?.uploaded_media_url,
   });
 
+  const showWave = isPlaying || isPlayingSpeak;
+
+  const disabled = type !== "ai" && !isReady;
+
   return (
     <Container
+      disabled={disabled}
+      style={showWave ? { cursor: "not-allowed" } : undefined}
       className={classNames({ "ai-mode": type === "ai" })}
       onClick={() => {
-        if (type === "ai" && refernceText) {
-          speak({ text: refernceText });
-        } else {
-          audio && play();
-          cancel();
+        if (!showWave) {
+          if (type === "ai" && refernceText) {
+            speak({ text: refernceText });
+            setIsPlayingSpeak(true);
+          } else {
+            audio && play();
+            cancel();
+          }
         }
       }}
     >
-      <p>{type === "ai" ? "Correct response" : "You said"}</p>
+      {showWave ? (
+        <AudioWaveComponent
+          playState="play"
+          type="extra-small"
+          count={16}
+          color={type == "ai" ? "#00C2C2" : undefined}
+        />
+      ) : (
+        <p>{type === "ai" ? "Correct response" : "You said"}</p>
+      )}
+
       {type === "ai" ? <EarIcon /> : <SpeakerIcon />}
     </Container>
   );
@@ -45,6 +70,8 @@ const Container = styled.button`
   border: none;
   outline: none;
   cursor: pointer;
+  justify-content: space-between;
+
   p {
     flex: 1;
     text-align: left;
@@ -55,4 +82,8 @@ const Container = styled.button`
   &.ai-mode {
     background: #00c2c21a;
   }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;

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

@@ -98,7 +98,7 @@ const SpeechAnalysis = ({ Aidata, isPersonal }) => {
               </span>
             ))}
           </div>
-          <ul className="no-border">
+          <ul className="no-border ul_tabs">
             {tabs?.map((tab) => (
               <li
                 key={tab?.value}

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

@@ -4,7 +4,7 @@ import {
   Container,
   Content,
   MainSection,
-  ProgressCircleSection,
+  // ProgressCircleSection,
   ProgressSidebar,
   Sidebar,
   SpeechSideSection,
@@ -18,6 +18,7 @@ import Evaluation from "./components/Evaluation";
 import SpeechAnalysis from "./components/SpeechAnalysis";
 import Grammar from "./components/Grammar";
 import classNames from "classnames";
+import WarningGrey from "../../../assets/svg/warningGrey";
 
 const FullAnalysis = ({ data, onClose, accountType }) => {
   const { setRightLayout, setCenterLayoutStyle } = useContext(OutletContext);
@@ -53,11 +54,17 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
     };
   }, []);
 
-  const sideModels = data && data?.models?.filter((item) => item?.sideProgress);
+  const sideModels =
+    data &&
+    data?.models?.slice().sort((a, b) => {
+      return (
+        (b?.sideProgress === true ? 1 : 0) - (a?.sideProgress === true ? 1 : 0)
+      );
+    });
 
-  const firstModel = sideModels && sideModels?.[0];
-  const secondModel = sideModels && sideModels?.[1];
-  const thirdModel = sideModels && sideModels?.[2];
+  // const firstModel = sideModels && sideModels?.[0];
+  // const secondModel = sideModels && sideModels?.[1];
+  // const thirdModel = sideModels && sideModels?.[2];
 
   const selectedModel =
     data && data?.models?.find((item) => item?.id === selected);
@@ -80,7 +87,7 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
         {accountType !== "personal" && (
           <Sidebar>
             <ProgressSidebar>
-              <ProgressCircleSection>
+              {/* <ProgressCircleSection>
                 {thirdModel && (
                   <Progress.Circle
                     percent={thirdModel?.score}
@@ -129,27 +136,39 @@ const FullAnalysis = ({ data, onClose, accountType }) => {
                   AI score <br />
                   <span>{data?.AiScore || 0}%</span>
                 </p>
-              </ProgressCircleSection>
+              </ProgressCircleSection> */}
               <ul>
-                {data?.models?.map((model) => {
-                  if (model?.id === "logic_evaluation") return null;
+                {sideModels?.map((model) => {
                   return (
                     <li key={model?.id}>
                       <p>{`${model?.label} point`}</p>
-                      <div style={{ backgroundColor: model?.bgColor }}>
-                        <span style={{ color: model?.primaryColor }}>
-                          {model?.score || 0}%
-                        </span>
-                        <Progress.Line
-                          percent={model?.score || 0}
-                          strokeWidth={4}
-                          trailWidth={4}
-                          strokeColor={model?.primaryColor}
-                          trailColor={"#fff"}
-                          showInfo={false}
-                          style={{ width: "100%" }}
-                        />
-                      </div>
+
+                      {model?.sideProgress ? (
+                        <div
+                          style={{ backgroundColor: model?.bgColor }}
+                          className="progress-section"
+                        >
+                          <span style={{ color: model?.primaryColor }}>
+                            {model?.score || 0}%
+                          </span>
+                          <Progress.Line
+                            percent={model?.score || 0}
+                            strokeWidth={8}
+                            trailWidth={8}
+                            strokeColor={model?.primaryColor}
+                            trailColor={"#fff"}
+                            showInfo={false}
+                            style={{ width: "100%" }}
+                          />
+                        </div>
+                      ) : (
+                        <div className="no-score">
+                          <WarningGrey color="#FEBF10" />
+                          <p>
+                            Note: This is currently not assigned a point value.
+                          </p>
+                        </div>
+                      )}
                     </li>
                   );
                 })}

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

@@ -24,8 +24,7 @@ export const ProgressSidebar = styled.div`
   width: 100%;
   border-radius: 25px;
   background: #fff;
-  min-height: 150px;
-  padding: 30px 20px 20px;
+  padding: 20px 20px;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -35,26 +34,60 @@ export const ProgressSidebar = styled.div`
     display: flex;
     flex-direction: column;
     width: 100%;
-    gap: 20px;
     list-style: none;
     li {
+      padding-bottom: 15px;
+      border-bottom: 1px solid #f5f7f7;
+      margin-bottom: 15px;
+      &:last-child {
+        padding-bottom: 0px;
+        border-bottom: none;
+        margin-bottom: 0px;
+      }
       > p {
         color: #636666;
         font-size: 12px;
       }
-      > div {
+
+      .no-score {
+        border-radius: 15px;
+        background: #fff9e8;
+        display: flex;
+        padding: 5px 10px;
+        gap: 5px;
+        width: 100%;
+        margin-top: 5px;
+        svg {
+          width: 16px;
+          height: 16px;
+          flex-shrink: 0;
+        }
+        p {
+          color: #636666;
+          font-size: 12px;
+        }
+      }
+      .progress-section {
         margin-top: 5px;
-        padding: 0 10px;
-        height: 24px;
+        padding: 0 14px;
+        height: 37px;
         border-radius: 100px;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         width: 100%;
-        gap: 16px;
+        gap: 12px;
         span {
-          font-size: 14px;
+          font-size: 20px;
           font-weight: 700;
         }
+
+        .rs-progress-line-outer {
+          .rs-progress-line-bg {
+            border-radius: 6px;
+            overflow: hidden;
+          }
+        }
       }
     }
   }
@@ -129,7 +162,7 @@ export const ModelContent = styled.div`
   background: #fff;
   padding: 20px;
   min-height: 390px;
-  ul {
+  .ul_tabs {
     padding-bottom: 20px;
     border-bottom: 1px solid #dfe5e5;
     list-style: none;

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

@@ -11,6 +11,7 @@ const GradingModal = ({
   noAi,
   defaultScore,
   suggestionValue,
+  showAIScore,
 }) => {
   const [selected, setSelected] = useState("manually");
   const [value, setValue] = useState(defaultScore || "");
@@ -44,32 +45,37 @@ const GradingModal = ({
           <TopSection>
             <h3>Instructor’s grading</h3>
             <ul className="check_wrapper">
-              {!noAi && (
-                <li
-                  onClick={() => {
-                    setSelected("ai");
-                  }}
-                >
-                  <Radio
-                    checked={selected === "ai"}
-                    defaultBorderColor={"#C6CCCC"}
-                  />
-                  Use AI grade
-                </li>
-              )}
-              {noAi && (
-                <li
-                  onClick={() => {
-                    setSelected("suggest");
-                  }}
-                >
-                  <Radio
-                    checked={selected === "suggest"}
-                    defaultBorderColor={"#C6CCCC"}
-                  />
-                  Use system grade
-                </li>
+              {!noAi && !showAIScore ? null : (
+                <>
+                  {!noAi && (
+                    <li
+                      onClick={() => {
+                        setSelected("ai");
+                      }}
+                    >
+                      <Radio
+                        checked={selected === "ai"}
+                        defaultBorderColor={"#C6CCCC"}
+                      />
+                      Use AI grade
+                    </li>
+                  )}
+                  {noAi && (
+                    <li
+                      onClick={() => {
+                        setSelected("suggest");
+                      }}
+                    >
+                      <Radio
+                        checked={selected === "suggest"}
+                        defaultBorderColor={"#C6CCCC"}
+                      />
+                      Use system grade
+                    </li>
+                  )}
+                </>
               )}
+
               <li
                 onClick={() => {
                   setSelected("manually");

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

@@ -109,14 +109,14 @@ const ReportQuestions = ({
       />
     );
   }
+
+  const showAIScore = data?.ai_score_available;
   const noAi =
     questionType === "match-pair" ||
     questionType === "quiz-multiple-choice" ||
     questionType === "word-play-text" ||
     questionType === "word-play-multiple-choice";
 
-  console.log(data);
-
   return (
     <Container>
       {gradeQuestionData?.loading && <FullPageLoader fixed hasBackground />}
@@ -127,6 +127,7 @@ const ReportQuestions = ({
           noAi={noAi}
           setScore={handleScore}
           defaultScore={intructorScore}
+          showAIScore={showAIScore}
           onClose={() => {
             setToggleGrade(false);
           }}
@@ -148,14 +149,16 @@ const ReportQuestions = ({
             </ScoreBadge>
           ) : (
             <>
-              <ScoreBadge
-                ai
-                className={classNames({
-                  hidden: noAi,
-                })}
-              >
-                AI score: <span>{parseInt(data?.ai_score || 0)}%</span>
-              </ScoreBadge>
+              {showAIScore && (
+                <ScoreBadge
+                  ai
+                  className={classNames({
+                    hidden: noAi,
+                  })}
+                >
+                  AI score: <span>{parseInt(data?.ai_score || 0)}%</span>
+                </ScoreBadge>
+              )}
               <ScoreRight>
                 <></>
                 <ScoreBadge

package/src/components/useAudioPlayer/audioManager.jsx

@@ -0,0 +1,13 @@
+// audioManager.js
+let currentStopFn = null;
+
+const AudioManager = {
+  stopAll: () => {
+    if (currentStopFn) currentStopFn();
+  },
+  setStopFn: (fn) => {
+    currentStopFn = fn;
+  },
+};
+
+export default AudioManager;