l-min-components 1.7.1409 → 1.7.1411

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1409",
+  "version": "1.7.1411",
   "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);
 
@@ -65,10 +67,19 @@ const SpeechAnalysis = ({ Aidata }) => {
     <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>
@@ -142,18 +153,11 @@ const SpeechAnalysis = ({ Aidata }) => {
                           <p className="good">
                             Perfect! you pronounced this sound correctly
                           </p>
-                        ) : isPass ? (
+                        ) : (
                           <div className="feedback">
                             <div className="feedback_header">
                               <div className="feedback_header-content">
-                                {/* <p>
-                                  You sound like{" "}
-                                  <span className="bad">/ʌ/</span>
-                                </p>
-                                <p>It is actually /ʌ/</p> */}
-                                <p>
-                                  {item?.["Phoneme Feedback Summary"] || ""}
-                                </p>
+                                {item?.["Phoneme Feedback Summary"] || ""}
                               </div>
                             </div>
                             <InlineClampedText
@@ -161,8 +165,6 @@ const SpeechAnalysis = ({ Aidata }) => {
                               text={item?.["Phoneme Feedback"] || ""}
                             />
                           </div>
-                        ) : (
-                          <p className="bad">You missed this sound</p>
                         )}
                       </div>
                     );

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

@@ -17,8 +17,9 @@ import Tabs from "../reportQuestions/components/tabs";
 import Evaluation from "./components/Evaluation";
 import SpeechAnalysis from "./components/SpeechAnalysis";
 import Grammar from "./components/Grammar";
+import classNames from "classnames";
 
-const FullAnalysis = ({ data, onClose }) => {
+const FullAnalysis = ({ data, onClose, accountType }) => {
   const { setRightLayout, setCenterLayoutStyle } = useContext(OutletContext);
 
   // const colors = [
@@ -73,94 +74,96 @@ const FullAnalysis = ({ data, onClose }) => {
         <ArrowLeft />
         <h1>Full analysis</h1>
       </Header>
-      <Content>
-        <Sidebar>
-          <ProgressSidebar>
-            <ProgressCircleSection>
-              {thirdModel && (
-                <Progress.Circle
-                  percent={thirdModel?.score}
-                  strokeWidth={4}
-                  trailWidth={4}
-                  strokeColor={thirdModel?.primaryColor}
-                  trailColor="#F2F2F2"
-                  showInfo={false}
-                  className="progress-circle"
-                  style={{
-                    width: "130px",
-                  }}
-                />
-              )}
-              {secondModel && (
-                <Progress.Circle
-                  percent={secondModel?.score}
-                  strokeWidth={4}
-                  trailWidth={4}
-                  strokeColor={secondModel?.primaryColor}
-                  trailColor="#F2F2F2"
-                  showInfo={false}
-                  className="progress-circle"
-                  style={{
-                    width: "110px",
-                  }}
-                />
-              )}
+      <Content className={classNames({ personal: accountType === "personal" })}>
+        {accountType !== "personal" && (
+          <Sidebar>
+            <ProgressSidebar>
+              <ProgressCircleSection>
+                {thirdModel && (
+                  <Progress.Circle
+                    percent={thirdModel?.score}
+                    strokeWidth={4}
+                    trailWidth={4}
+                    strokeColor={thirdModel?.primaryColor}
+                    trailColor="#F2F2F2"
+                    showInfo={false}
+                    className="progress-circle"
+                    style={{
+                      width: "130px",
+                    }}
+                  />
+                )}
+                {secondModel && (
+                  <Progress.Circle
+                    percent={secondModel?.score}
+                    strokeWidth={4}
+                    trailWidth={4}
+                    strokeColor={secondModel?.primaryColor}
+                    trailColor="#F2F2F2"
+                    showInfo={false}
+                    className="progress-circle"
+                    style={{
+                      width: "110px",
+                    }}
+                  />
+                )}
 
-              {firstModel && (
-                <Progress.Circle
-                  percent={firstModel?.score}
-                  strokeWidth={4}
-                  trailWidth={4}
-                  strokeColor={firstModel?.primaryColor}
-                  trailColor={"#F2F2F2"}
-                  showInfo={false}
-                  className="progress-circle"
-                  style={{
-                    width: "90px",
-                  }}
-                />
-              )}
+                {firstModel && (
+                  <Progress.Circle
+                    percent={firstModel?.score}
+                    strokeWidth={4}
+                    trailWidth={4}
+                    strokeColor={firstModel?.primaryColor}
+                    trailColor={"#F2F2F2"}
+                    showInfo={false}
+                    className="progress-circle"
+                    style={{
+                      width: "90px",
+                    }}
+                  />
+                )}
 
-              <p>
-                AI score <br />
-                <span>{data?.AiScore || 0}%</span>
-              </p>
-            </ProgressCircleSection>
-            <ul>
-              {data?.models?.map((model) => {
-                if (model?.id === "logic_evaluation") return null;
-                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>
-                  </li>
-                );
-              })}
-            </ul>
-          </ProgressSidebar>
-          {selectedModel?.id === "speech_analysis" && (
-            <SpeechSideSection>
-              <PlayButton audio={selectedModel?.audioData} />
-              <PlayButton
-                type="ai"
-                refernceText={selectedModel?.data?.Reference}
-              />
-            </SpeechSideSection>
-          )}
-        </Sidebar>
+                <p>
+                  AI score <br />
+                  <span>{data?.AiScore || 0}%</span>
+                </p>
+              </ProgressCircleSection>
+              <ul>
+                {data?.models?.map((model) => {
+                  if (model?.id === "logic_evaluation") return null;
+                  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>
+                    </li>
+                  );
+                })}
+              </ul>
+            </ProgressSidebar>
+            {selectedModel?.id === "speech_analysis" && (
+              <SpeechSideSection>
+                <PlayButton audio={selectedModel?.audioData} />
+                <PlayButton
+                  type="ai"
+                  refernceText={selectedModel?.data?.Reference}
+                />
+              </SpeechSideSection>
+            )}
+          </Sidebar>
+        )}
         <MainSection>
           {tabs?.length > 0 && (
             <Tabs options={tabs} selected={selected} onChange={setSelected} />
@@ -169,7 +172,10 @@ const FullAnalysis = ({ data, onClose }) => {
             <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

@@ -10,6 +10,9 @@ export const Content = styled.div`
   grid-template-columns: 220px 1fr;
   gap: 10px;
   margin-top: 8px;
+  &.personal {
+    grid-template-columns: 1fr;
+  }
 `;
 export const Sidebar = styled.div`
   width: 100;
@@ -223,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;
   }
@@ -275,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/index.jsx

@@ -101,6 +101,7 @@ const ReportQuestions = ({
   if (toggle) {
     return (
       <FullAnalysis
+        accountType={accountType}
         data={toggle}
         onClose={() => {
           setToggle(null);