npm - l-min-components - Versions diffs - 1.7.1421 → 1.7.1423 - Mend

l-min-components 1.7.1421 → 1.7.1423

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/package.json CHANGED Viewed

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

package/src/components/reportsComponents/fullAnalysis/components/ClarityItem.jsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";
 import styled from "styled-components";
@@ -6,36 +7,71 @@ const ClarityItem = ({
   title = "",
   message = "",
   value = "",
+  alt,
 }) => {
   return (
     <Container>
-      {type === "green" ? (
-        <SpeedIcon />
-      ) : type === "yellow" ? (
-        <FluencyIcon />
-      ) : type === "blue" ? (
-        <UserIcon />
-      ) : (
-        <MicIcon />
+      {alt && (
+        <AltHeader>
+          {type === "pink" ? <PaperIcon /> : <BookIcon />} <h3>{title}</h3>
+        </AltHeader>
       )}
-      <Content>
-        <h3>{title}</h3>
-        <p>{message}</p>
-      </Content>
-      <Value className={type} dangerouslySetInnerHTML={{ __html: value }} />
+      <Body className={classNames({ "alt-header": alt })}>
+        {!alt && (
+          <>
+            {type === "green" ? (
+              <SpeedIcon />
+            ) : type === "yellow" ? (
+              <FluencyIcon />
+            ) : type === "blue" ? (
+              <UserIcon />
+            ) : (
+              <MicIcon />
+            )}
+          </>
+        )}
+        <Content>
+          {!alt && <h3>{title}</h3>}
+          <p className={classNames({ "alt-header": alt })}>{message}</p>
+        </Content>
+        {!alt && (
+          <Value className={type} dangerouslySetInnerHTML={{ __html: value }} />
+        )}
+      </Body>
     </Container>
   );
 };
 const Container = styled.div`
-  padding: 20px;
   border-radius: 20px;
   border: 1px solid #dfe5e5;
   background: #fff;
   width: 100%;
+  min-height: 120px;
+`;
+export const AltHeader = styled.div`
+  padding: 7px 10px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 10px;
+  border-bottom: 1px solid #dfe5e5;
+  h3 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+`;
+const Body = styled.div`
   display: grid;
   grid-template-columns: 48px 1fr 60px;
   gap: 10px;
+  width: 100%;
+  padding: 20px;
+  &.alt-header {
+    grid-template-columns: 1fr;
+    padding-top: 12px;
+  }
 `;
 const Content = styled.div`
@@ -50,6 +86,12 @@ const Content = styled.div`
     font-size: 14px;
     line-height: 24px;
     max-width: 200px;
+    &::first-letter {
+      text-transform: capitalize;
+    }
+    &.alt-header {
+      max-width: none;
+    }
   }
 `;
@@ -84,6 +126,96 @@ const Value = styled.p`
 export default ClarityItem;
+const BookIcon = () => (
+  <svg
+    width="31"
+    height="31"
+    viewBox="0 0 31 31"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      opacity="0.1"
+      y="0.318359"
+      width="30.3643"
+      height="30.3643"
+      rx="15.1822"
+      fill="#54B3F9"
+    />
+    <path
+      d="M22.6875 19.0582V10.0057C22.6875 9.10569 21.9525 8.43819 21.06 8.51319H21.015C19.44 8.64819 17.0475 9.45069 15.7125 10.2907L15.585 10.3732C15.3675 10.5082 15.0075 10.5082 14.79 10.3732L14.6025 10.2607C13.2675 9.42819 10.8825 8.63319 9.3075 8.50569C8.415 8.43069 7.6875 9.10569 7.6875 9.99819V19.0582C7.6875 19.7782 8.2725 20.4532 8.9925 20.5432L9.21 20.5732C10.8375 20.7907 13.35 21.6157 14.79 22.4032L14.82 22.4182C15.0225 22.5307 15.345 22.5307 15.54 22.4182C16.98 21.6232 19.5 20.7907 21.135 20.5732L21.3825 20.5432C22.1025 20.4532 22.6875 19.7782 22.6875 19.0582Z"
+      stroke="#54B3F9"
+      stroke-width="1.2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.1875 10.6191V21.8691"
+      stroke="#54B3F9"
+      stroke-width="1.2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 12.8691H10.3125"
+      stroke="#54B3F9"
+      stroke-width="1.2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.5625 15.1191H10.3125"
+      stroke="#54B3F9"
+      stroke-width="1.2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+const PaperIcon = () => (
+  <svg
+    width="31"
+    height="31"
+    viewBox="0 0 31 31"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      opacity="0.1"
+      y="0.318359"
+      width="30.3643"
+      height="30.3643"
+      rx="15.1822"
+      fill="#F954D4"
+    />
+    <path
+      d="M22.4326 14.3309L21.6976 17.4659C21.0676 20.1734 19.8226 21.2684 17.4826 21.0434C17.1076 21.0134 16.7026 20.9459 16.2676 20.8409L15.0076 20.5409C11.8801 19.7984 10.9126 18.2534 11.6476 15.1184L12.3826 11.9759C12.5326 11.3384 12.7126 10.7834 12.9376 10.3259C13.8151 8.51086 15.3076 8.02336 17.8126 8.61586L19.0651 8.90836C22.2076 9.64336 23.1676 11.1959 22.4326 14.3309Z"
+      stroke="#F954D4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17.4852 21.0456C17.0202 21.3606 16.4352 21.6231 15.7227 21.8556L14.5377 22.2456C11.5602 23.2056 9.9927 22.4031 9.0252 19.4256L8.0652 16.4631C7.1052 13.4856 7.9002 11.9106 10.8777 10.9506L12.0627 10.5606C12.3702 10.4631 12.6627 10.3806 12.9402 10.3281C12.7152 10.7856 12.5352 11.3406 12.3852 11.9781L11.6502 15.1206C10.9152 18.2556 11.8827 19.8006 15.0102 20.5431L16.2702 20.8431C16.7052 20.9481 17.1102 21.0156 17.4852 21.0456Z"
+      stroke="#F954D4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.6719 12.9004L19.3094 13.8229"
+      stroke="#F954D4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.9375 15.8027L17.1125 16.3577"
+      stroke="#F954D4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
 const SpeedIcon = () => (
   <svg
     width="48"

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

@@ -26,12 +26,7 @@ const Grammar = ({ Aidata }) => {
   const originalText = data?.["Original Speech"] || "";
   const correctText = data?.["Grammatical Correct Version"] || "";
   const feedbacks = data?.["Feedback"];
-  const {
-    grammarFeekbackResult,
-    grammerCorrectParagraph,
-    grammarCorrectResult,
-    renderCorrectedSentence,
-  } = useReportUtils();
+  const { grammarFeekbackResult, renderCorrectedSentence } = useReportUtils();
   const wordsFeedback = grammarFeekbackResult(
     originalText,
@@ -40,10 +35,7 @@ const Grammar = ({ Aidata }) => {
   );
   const sentenceParts = renderCorrectedSentence(wordsFeedback);
-  const correctWods = grammarCorrectResult(correctText, feedbackCorrection);
-  const correctParagraph = correctWods
-    ? grammerCorrectParagraph(correctWods)
-    : "";
   useEffect(() => {
     if (wordsFeedback?.length) {
       const findWord = wordsFeedback?.find((word) => word?.operation);

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   ClarityLevelSection,
   ModelComtainer,
@@ -38,6 +38,7 @@ const SpeechAnalysis = ({
     text: item?.wordText,
     value: item?.id,
     isCorrect: item?.isGood,
+    color: item?.color,
   }));
   const selectedWordValue = wordData?.find((item) => item?.id === selectedWord);
@@ -68,6 +69,28 @@ const SpeechAnalysis = ({
     (item) => item?.id === selectedSection
   );
+  const colors = useMemo(
+    () => ({
+      poor: "#F95454",
+      excellent: "#30D468",
+      fair: "#9747FF",
+      // fair2: "#0D5FDB",
+      good: "#0D7D96",
+      veryGood: "#1A9243",
+      pass: "#F39B33",
+      okay: "#FEBF10",
+    }),
+    []
+  );
+  const backgroundColors = useMemo(() => {
+    const bg = { ...colors };
+    for (let x of Object.keys(bg)) {
+      bg[x] = bg[x] + 10;
+    }
+    return bg;
+  }, []);
   return (
     <ModelComtainer>
       <ModelContent>
@@ -109,9 +132,10 @@ const SpeechAnalysis = ({
               <span>
                 <span
                   key={word?.value}
+                  style={{ color: word?.color }}
                   className={classNames({
                     selected: selectedWord === word?.value,
-                    correct: word?.isCorrect,
                     incorrect: !word?.isCorrect,
                     capitalise: word?.value === 1,
                   })}
@@ -141,7 +165,12 @@ const SpeechAnalysis = ({
           </ul>
           <SelectedWord>
             Showing breakdown for:{" "}
-            <span className="capitalise">{selectedWordValue?.wordText}</span>
+            <span
+              className="capitalise"
+              style={{ color: selectedWordValue?.color }}
+            >
+              {selectedWordValue?.wordText}
+            </span>
           </SelectedWord>
           <SpeechAnalysisContent>
             {selectionSelectionValue?.id === "phoneme" && (
@@ -159,19 +188,33 @@ const SpeechAnalysis = ({
                 </div>
                 <div className="table_row">
                   {selectionSelectionValue?.data?.map((item) => {
+                    const colorName = item.Grade.toLowerCase()?.replace(
+                      / ([a-z])/gi,
+                      (match, p1) => p1.toUpperCase()
+                    );
                     const isExcellent = item?.Grade === "Excellent";
-                    const isPass = item?.Grade === "Pass";
                     return (
                       <div className="table_body" key={item?.id}>
                         <p>/{item?.Phoneme}/</p>
                         <p>{item?.Score || 0}%</p>
-                        {isExcellent ? (
-                          <p className="status">Excellent</p>
-                        ) : isPass ? (
-                          <p className="status warning">Pass</p>
-                        ) : (
-                          <p className="status failed">Fail</p>
-                        )}
+                        <p
+                          className="status"
+                          style={{
+                            textTransform: "capitalize",
+                            background: backgroundColors?.[colorName],
+                            color: colors?.[colorName],
+                          }}
+                        >
+                          {colorName === "veryGood" ? (
+                            <span style={{ textTransform: "none" }}>
+                              Very good
+                            </span>
+                          ) : (
+                            colorName
+                          )}
+                        </p>
                         {isExcellent ? (
                           <p className="good">
@@ -305,6 +348,18 @@ const SpeechAnalysis = ({
                   type="blue"
                   value={`<span>${selectionSelectionValue?.data?.intonation}%</span>`}
                 />
+                <ClarityItem
+                  title="What we heard"
+                  message={Aidata?.data?.Hypothesis}
+                  type="pink"
+                  alt
+                />
+                <ClarityItem
+                  title="Reference"
+                  message={Aidata?.data?.Reference}
+                  type="blue"
+                  alt
+                />
               </ClarityLevelSection>
             )}
             {selectionSelectionValue?.id === "standard_assessment" && (