l-min-components 1.7.1315 → 1.7.1316

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1315",
+  "version": "1.7.1316",
   "type": "module",
   "files": [
     "src/assets",
@@ -63,6 +63,7 @@
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.8.2",
     "react-slick": "0.30.2",
+    "react-speech-kit": "^3.0.1",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",
     "react-use-websocket": "^4.13.0",

package/src/components/AIAnalysis/assets/arrowDown.jsx

@@ -0,0 +1,15 @@
+const ArrowDown = () => (
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M25.6094 10.5813L15.0031 21.1875L4.39688 10.5813L6.16438 8.8125L15.0031 17.6525L23.8419 8.8125L25.6094 10.5813Z"
+      fill="#F5F7F7"
+    />
+  </svg>
+);
+
+export default ArrowDown;

package/src/components/AIAnalysis/assets/arrowLeft.jsx

@@ -0,0 +1,28 @@
+const ArrowLeft = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M9.57 5.92969L3.5 11.9997L9.57 18.0697"
+        stroke="#313333"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20.5019 12H3.67188"
+        stroke="#313333"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+export default ArrowLeft;

package/src/components/AIAnalysis/assets/cursorClick.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const CursorClickIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="22"
+      viewBox="0 0 18 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15.1295 7.48271C14.676 7.48065 14.2311 7.6056 13.8451 7.84339C13.5649 7.2509 13.061 6.7939 12.444 6.57285C11.8271 6.35179 11.1476 6.38479 10.5549 6.66457V3.26008C10.5549 2.60679 10.2954 1.98027 9.83348 1.51833C9.37154 1.05639 8.74502 0.796875 8.09173 0.796875C7.43845 0.796875 6.81193 1.05639 6.34999 1.51833C5.88805 1.98027 5.62853 2.60679 5.62853 3.26008L5.62853 11.3007L5.01273 10.2362C4.68959 9.66809 4.154 9.25161 3.52378 9.07838C2.89356 8.90515 2.22034 8.98937 1.65222 9.31251C1.0841 9.63565 0.667615 10.1712 0.494388 10.8015C0.32116 11.4317 0.405381 12.1049 0.728522 12.673C3.58759 18.6903 5.48778 21.2063 9.85116 21.2063C11.9036 21.2039 13.8713 20.3876 15.3227 18.9363C16.774 17.4849 17.5903 15.5172 17.5927 13.4648V9.94591C17.5903 9.29334 17.3301 8.66816 16.8686 8.20672C16.4072 7.74528 15.782 7.48502 15.1295 7.48271ZM16.1851 13.4648C16.1828 15.1439 15.5147 16.7536 14.3274 17.941C13.14 19.1283 11.5303 19.7964 9.85116 19.7987C8.07414 19.7987 6.84254 19.3149 5.7165 18.1976C4.59047 17.0804 3.54361 15.3122 1.99531 12.0484L1.96892 11.9956C1.89779 11.8764 1.85174 11.7439 1.83359 11.6063C1.81544 11.4686 1.82557 11.3287 1.86335 11.1951C1.89828 11.0605 1.95988 10.9343 2.04451 10.824C2.12913 10.7137 2.23506 10.6215 2.35599 10.5529C2.59831 10.413 2.88624 10.3751 3.15653 10.4473C3.28992 10.4824 3.41482 10.5441 3.52369 10.6288C3.63255 10.7135 3.72312 10.8193 3.78993 10.94L5.7253 14.2829C5.8042 14.4156 5.92406 14.5191 6.06685 14.5778C6.20964 14.6365 6.36763 14.6472 6.51704 14.6084C6.66656 14.5693 6.79877 14.4814 6.89277 14.3587C6.98677 14.2361 7.0372 14.0856 7.03608 13.931L7.03608 3.26008C7.03608 2.9801 7.1473 2.71159 7.34527 2.51361C7.54325 2.31564 7.81176 2.20442 8.09173 2.20442C8.37171 2.20442 8.64022 2.31564 8.8382 2.51361C9.03617 2.71159 9.14739 2.9801 9.14739 3.26008V9.24214C9.14739 9.42879 9.22154 9.60779 9.35352 9.73978C9.4855 9.87176 9.66451 9.94591 9.85116 9.94591C10.0378 9.94591 10.2168 9.87176 10.3488 9.73978C10.4808 9.60779 10.5549 9.42879 10.5549 9.24214V8.89025C10.5549 8.61027 10.6662 8.34176 10.8641 8.14379C11.0621 7.94581 11.3306 7.83459 11.6106 7.83459C11.8906 7.83459 12.1591 7.94581 12.3571 8.14379C12.555 8.34176 12.6663 8.61027 12.6663 8.89025V9.94591C12.6663 10.1326 12.7404 10.3116 12.8724 10.4435C13.0044 10.5755 13.1834 10.6497 13.37 10.6497C13.5567 10.6497 13.7357 10.5755 13.8677 10.4435C13.9996 10.3116 14.0738 10.1326 14.0738 9.94591C14.0738 9.66593 14.185 9.39742 14.383 9.19944C14.581 9.00147 14.8495 8.89025 15.1295 8.89025C15.4094 8.89025 15.6779 9.00147 15.8759 9.19944C16.0739 9.39742 16.1851 9.66593 16.1851 9.94591V13.4648Z"
+        fill="#009999"
+      />
+    </svg>
+  );
+};
+
+export default CursorClickIcon;

package/src/components/AIAnalysis/dropdownResult.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const DropdownResult = ({ label, element }) => {
+  const [toggle, setToggle] = useState(false);
+  return (
+    <Container>
+      <Action
+        onClick={() => {
+          setToggle(!toggle);
+        }}
+      >
+        <p>{label}</p>
+        <Icon />
+      </Action>
+      {toggle && element && <Content>{element}</Content>}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f5f7f7;
+`;
+const Action = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  width: 100%;
+  background: #e8fafa;
+  padding: 0 20px;
+  cursor: pointer;
+  p {
+    color: #00c2c2;
+    font-size: 16px;
+    font-weight: 600;
+  }
+`;
+const Content = styled.div`
+  padding: 20px;
+`;
+
+const Icon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+  >
+    <path
+      d="M3.54297 8.58922L12.028 17.0742L20.513 8.58922L19.099 7.17422L12.028 14.2462L4.95697 7.17422L3.54297 8.58922Z"
+      fill="#4A4D4D"
+    />
+  </svg>
+);
+export default DropdownResult;

package/src/components/AIAnalysis/grammer.jsx

@@ -0,0 +1,432 @@
+import React, { useState } from "react";
+import CursorClickIcon from "./assets/cursorClick";
+import styled from "styled-components";
+import { IoCloseOutline } from "react-icons/io5";
+import { FaCheck } from "react-icons/fa6";
+import ButtonComponent from "../button";
+
+const Grammer = ({ data }) => {
+  const [selected, setSelected] = useState(null);
+  const [showVersion, setShowVersion] = useState(null);
+
+  const feedbackCorrection = data["Correction Operations (Optional)"] || [];
+  const originalText = data["Original Speech"] || "";
+  const correctText = data["Grammatical Correct Version"] || "";
+
+  const getFeekbackResult = () => {
+    const result = [];
+    let positionCounter = 1; // Tracks the word position in the text
+    let correctionIndex = 0; // Tracks the current correction
+    let words = originalText?.split(/\s+/) || []; // Split text into words
+    let wordIndex = 0; // Tracks the current word being processed
+
+    while (wordIndex <= words?.length) {
+      const word = words[wordIndex];
+      const correction = feedbackCorrection[correctionIndex];
+
+      if (
+        correction &&
+        correction?.operation === "substituted" && // Handle substitution
+        words
+          .slice(
+            wordIndex,
+            wordIndex + correction?.original_word.split(" ").length
+          )
+          .join(" ") === correction?.original_word
+      ) {
+        result.push({
+          text: correction?.original_word,
+          correct: correction?.replacement_word,
+          position: positionCounter,
+          operation: correction?.operation,
+        });
+        wordIndex += correction?.original_word.split(" ").length || 0;
+        correctionIndex++;
+        positionCounter++;
+      } else if (correction && correction?.operation === "inserted") {
+        result.push({
+          text: correction?.word,
+          correct: correction?.word, // Insert the new word
+          position: positionCounter,
+          operation: correction?.operation,
+        });
+        correctionIndex++;
+        positionCounter++;
+      } else {
+        if (word !== undefined) {
+          result.push({ text: word });
+        }
+        wordIndex++;
+      }
+    }
+
+    return result;
+  };
+  const getCorrectResult = () => {
+    const result = [];
+    let correctionIndex = 0;
+    let words = correctText.split(/\s+/);
+    let wordIndex = 0;
+
+    while (wordIndex < words.length) {
+      const word = words[wordIndex];
+      const correction = feedbackCorrection[correctionIndex];
+      if (
+        correction &&
+        correction?.operation === "substituted" &&
+        words
+          .slice(
+            wordIndex,
+            wordIndex + correction?.replacement_word.split(" ").length
+          )
+          .join(" ") === correction?.replacement_word
+      ) {
+        result.push({
+          text: correction?.replacement_word,
+          highlight: true,
+        });
+        wordIndex += correction?.replacement_word.split(" ").length;
+        correctionIndex++;
+      } else if (correction && correction?.operation === "inserted") {
+        result.push({
+          text: correction?.word,
+          highlight: true,
+        });
+        correctionIndex++;
+      } else {
+        result.push({ text: word });
+        wordIndex++;
+      }
+    }
+
+    return result;
+  };
+
+  const generateParagraph = (data) => {
+    let paragraph = "<p>";
+
+    data?.forEach((item) => {
+      if (item?.highlight) {
+        paragraph += `<span>${item?.text}</span> `;
+      } else {
+        paragraph += `${item?.text} `;
+      }
+    });
+
+    paragraph = paragraph?.trim() + "</p>";
+
+    return paragraph;
+  };
+
+  return (
+    <Container>
+      {showVersion && (
+        <WordsModal
+          value={showVersion?.value}
+          isCorrect={showVersion?.isCorrect}
+          onClose={() => {
+            setShowVersion(null);
+          }}
+        />
+      )}
+      <Header>
+        <div className="info">
+          <CursorClickIcon />
+          <p>Click on the words/sentences highlighted in red to see feedback</p>
+        </div>
+        <p>
+          Points: <span>{data?.["Grammar Score"] || 0}</span>
+        </p>
+      </Header>
+      <Content>
+        <div className="text_content">
+          {getFeekbackResult()?.map((value, idx) => (
+            <span
+              key={idx}
+              onClick={() => {
+                if (value?.position) setSelected(value);
+              }}
+              className={`${value?.position ? "error" : ""}`}
+            >
+              {" "}
+              {value?.position && <span>{value?.position}</span>} {value?.text}
+            </span>
+          ))}
+        </div>
+        {selected && (
+          <div className="feedback_content">
+            <h3>Feedback:</h3>
+            <div className="reply">
+              {selected?.operation !== "inserted" && (
+                <div className="row red">
+                  <IoCloseOutline color="#F95454" />
+                  <p className="red">
+                    <span>{selected?.position}</span>
+                    {selected?.text}
+                  </p>
+                </div>
+              )}
+
+              <div className="row">
+                <FaCheck color="#29D1D1" />
+                <p>{selected?.correct}</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </Content>
+      <ButtonWrapper>
+        <span
+          onClick={() => {
+            setShowVersion({
+              value: `<p>${originalText}</p>`,
+            });
+          }}
+        >
+          <ButtonComponent text="View script" type="secondary" />
+        </span>
+        <span
+          onClick={() => {
+            const correctResults = getCorrectResult();
+            const value = generateParagraph(correctResults);
+            setShowVersion({
+              value,
+              isCorrect: true,
+            });
+          }}
+        >
+          <ButtonComponent text="View corrected version" type="secondary" />
+        </span>
+      </ButtonWrapper>
+    </Container>
+  );
+};
+
+export default Grammer;
+
+const WordsModal = ({ onClose, isCorrect, value }) => {
+  return (
+    <ModalWrapper isOpen>
+      <ModalComntainer>
+        <span className="close_btn" onClick={onClose}>
+          <IoCloseOutline color="#000" size={24} />
+        </span>
+        <div className="word_wrapper">
+          {isCorrect && (
+            <div className="header">
+              <h4>Corrected version</h4>
+              <p>Introduced words are highlighted in green</p>
+            </div>
+          )}
+          <div
+            className="content"
+            dangerouslySetInnerHTML={{ __html: value }}
+          ></div>
+        </div>
+      </ModalComntainer>
+    </ModalWrapper>
+  );
+};
+
+const ModalComntainer = styled.div`
+  width: 610px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  .close_btn {
+    width: 40px;
+    height: 40px;
+    display: grid;
+    place-items: center;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+  .word_wrapper {
+    border-radius: 30px;
+    background: #fff;
+    width: 100%;
+    padding: 48px;
+    min-height: 520px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    .header {
+      h4 {
+        border-radius: 10px 10px 0px 0px;
+        background: #00c2c2;
+        height: 32px;
+        padding: 0 15px;
+        display: flex;
+        align-items: center;
+        color: #fff;
+        font-size: 16px;
+        font-weight: 400;
+      }
+      p {
+        border-radius: 0px 0px 10px 10px;
+        background: #f5f7f7;
+        height: 32px;
+        padding: 0 15px;
+        display: flex;
+        align-items: center;
+        color: #919494;
+
+        font-size: 14px;
+      }
+    }
+    .content {
+      > p {
+        color: #797979;
+        font-size: 16px;
+        line-height: 34px;
+        span {
+          color: #00c2c2;
+        }
+      }
+    }
+  }
+`;
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    p {
+      color: #636666;
+      font-size: 16px;
+    }
+  }
+  > p {
+    border-radius: 10px;
+    height: 40px;
+    width: 140px;
+    background: #e5f9f9;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    justify-content: center;
+    color: #636666;
+    font-size: 16px;
+    span {
+      color: #00c2c2;
+      font-size: 20px;
+      font-weight: 700;
+    }
+  }
+`;
+
+const Content = styled.div`
+  border-radius: 20px;
+  background: #f9f9f9;
+  padding: 20px;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 32px;
+  .text_content {
+    flex: 1;
+    span {
+      color: #797979;
+      font-size: 16px;
+      line-height: 34px;
+      &.error {
+        display: inline-flex;
+        align-items: center;
+        color: #f95454;
+        cursor: pointer;
+        span {
+          display: inline-flex;
+          border-radius: 22.667px;
+          align-items: center;
+          background: rgba(249, 84, 84, 0.1);
+          height: 16px;
+          font-size: 14px;
+          line-height: 14px;
+          padding: 0 4px;
+          color: #f95454;
+        }
+      }
+    }
+  }
+  .feedback_content {
+    width: 100%;
+    padding: 15px;
+    border-radius: 20px;
+    background: #fff;
+    h3 {
+      color: #00c2c2;
+      font-size: 16px;
+      margin-bottom: 10px;
+      line-height: 11px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #dfe5e5;
+    }
+    .reply {
+      .row {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: 10px;
+        p {
+          font-size: 16px;
+          color: #0d7d96;
+          line-height: 34px;
+          &.red {
+            display: inline-flex;
+            align-items: center;
+            color: #f95454;
+            cursor: pointer;
+            span {
+              display: inline-flex;
+              border-radius: 22.667px;
+              align-items: center;
+              background: rgba(249, 84, 84, 0.1);
+              height: 16px;
+              font-size: 14px;
+              line-height: 14px;
+              padding: 0 4px;
+              color: #f95454;
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  button {
+    width: 233px;
+    padding: 0;
+    height: 44px;
+  }
+`;
+const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: ${({ isOpen }) => (isOpen ? "flex" : "none")};
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+`;

package/src/components/AIAnalysis/index.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import ArrowLeft from "./assets/arrowLeft";
+import SectionSwitch from "./sectionSwitch";
+import Relevant from "./relevant";
+import Grammer from "./grammer";
+import Speech from "./speech";
+
+const AIAnalysis = ({
+  title = "Full analysis",
+  options = [],
+  data,
+  onClose,
+}) => {
+  const [selected, setSelectied] = useState(options[0]?.value);
+
+  return (
+    <Container>
+      <h1 onClick={onClose}>
+        <ArrowLeft />
+        {title}
+      </h1>
+      <Wrapper>
+        <SectionSwitch
+          options={options}
+          valueSelect={selected}
+          onChange={setSelectied}
+        />
+        {selected === "relevance" && (
+          <Relevant
+            data={data?.relevance[0]?.model_data}
+            student_text={data?.student_text}
+          />
+        )}
+        {selected === "grammar" && (
+          <Grammer data={data?.grammar[0]?.model_data} />
+        )}
+        {selected === "speech" &&
+          data?.speech_analysis[0]?.model_data?.Reference && (
+            <Speech
+              data={data?.speech_analysis[0]?.model_data}
+              audio={data?.audio}
+            />
+          )}
+      </Wrapper>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+  h1 {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    font-size: 22px;
+    width: fit-content;
+    cursor: pointer;
+    font-weight: 700;
+    line-height: 40px;
+  }
+`;
+
+const Wrapper = styled.div`
+  border-radius: 30.913px;
+  background: #fff;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+`;
+
+export default AIAnalysis;