l-min-components 1.7.1432 → 1.7.1434

package/package.json

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

package/src/assets/svg/yellow-pen.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const YellowPen = () => {
+const YellowPen = ({ color = "#FEBF10" }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -11,8 +11,8 @@ const YellowPen = () => {
     >
       <path
         d="M13.4766 7.45508L5.62695 15.3047H3.44531V13.123L11.2949 5.27344L13.4766 7.45508ZM4.05469 13.375V14.6953H5.375L12.6152 7.45508L11.2949 6.13477L4.05469 13.375ZM13.9951 2.69531C14.082 2.69534 14.1527 2.72318 14.2119 2.78223L15.9678 4.53809C16.0857 4.65649 16.0859 4.84653 15.9678 4.96484L14.9102 6.02148L12.7275 3.83887L13.7852 2.78223C13.841 2.72652 13.9215 2.69531 13.9951 2.69531Z"
-        fill="#FEBF10"
-        stroke="#FEBF10"
+        fill={color}
+        stroke={color}
         strokeWidth="0.891406"
       />
     </svg>

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import {
   GrammarContent,
   GrammarHeader,
@@ -14,16 +14,17 @@ import { MarsIcon } from "lucide-react";
 import { useState } from "react";
 import GoodCheck from "../../../../assets/svg/goodCheck";
 import RedX from "../../../../assets/svg/redX";
+import DOMPurify from "dompurify";
 import useReportUtils from "../../hooks/useRreportUtils";
 
 const Grammar = ({ Aidata }) => {
   const [selectedSection, setSelectedSection] = useState(1);
   const [selectedWord, setSelectedWord] = useState(null);
 
+  const [formattedCopy, setFormattedCopy] = useState("");
+  const [operationIndex, setOperationIndex] = useState(null);
+
   const data = Aidata?.data;
-  const feedbackCorrection = (
-    data?.["Correction Operations (Optional)"] || []
-  )?.filter((item) => ["substituted", "formatting"].includes(item?.operation));
 
   const originalText = data?.["Original Speech"] || "";
   const correctText = data?.["Grammatical Correct Version"] || "";
@@ -31,6 +32,53 @@ const Grammar = ({ Aidata }) => {
 
   const { grammarFeekbackResult } = useReportUtils();
 
+  const feedbackCorrection = (
+    data?.["Correction Operations (Optional)"] || []
+  )?.filter((item) => ["substituted", "formatting"].includes(item?.operation));
+
+  const findOperation = useCallback(() => {
+    const substitutedCorrections = feedbackCorrection.filter((correction) =>
+      ["substituted", "formatting"].includes(correction.operation)
+    );
+    return substitutedCorrections[operationIndex ?? -1] || null;
+  }, [feedbackCorrection, operationIndex]);
+
+  const processSubstitutedCorrections = useCallback(
+    (corrections, originalSpeech) => {
+      if (!corrections.length) return originalSpeech;
+
+      let modifiedSpeech = originalSpeech;
+      let usedIndices = [];
+
+      corrections.forEach((correction, correctionIndex) => {
+        const escapedOriginalWord = correction.original_word.replace(
+          /[.*+?^${}()|[\]\\]/g,
+          "\\$&"
+        );
+        const regex = new RegExp(escapedOriginalWord, "g");
+        let match;
+
+        while ((match = regex.exec(modifiedSpeech)) !== null) {
+          const [start, end] = [match.index, match.index + match[0].length];
+
+          if (!usedIndices.some(([s, e]) => start < e && end > s)) {
+            usedIndices.push([start, end]);
+            modifiedSpeech =
+              modifiedSpeech.slice(0, start) +
+              `<span class="issue" data-index="${correctionIndex}"><span class="number" data-index="${correctionIndex}">${
+                correctionIndex + 1
+              }</span> ${match[0]}</span>` +
+              modifiedSpeech.slice(end);
+            break;
+          }
+        }
+      });
+
+      return DOMPurify.sanitize(modifiedSpeech);
+    },
+    []
+  );
+
   const wordsFeedback = grammarFeekbackResult(
     originalText,
     feedbackCorrection,
@@ -45,12 +93,39 @@ const Grammar = ({ Aidata }) => {
     }
   }, [wordsFeedback?.length]);
 
+  useEffect(() => {
+    const substitutedCorrections = feedbackCorrection?.filter((correction) =>
+      ["substituted", "formatting"].includes(correction.operation)
+    );
+
+    const processedSpeech = processSubstitutedCorrections(
+      substitutedCorrections,
+      originalText
+    );
+    setFormattedCopy(processedSpeech);
+  }, [feedbackCorrection, processSubstitutedCorrections]);
+
+  useEffect(() => {
+    const handleClick = (event) => {
+      const target = event.target;
+      const index = target.getAttribute("data-index");
+      if (index) setOperationIndex(Number(index));
+    };
+
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, []);
+
   const tabs = [
     { label: "Feedback", value: 1, icon: ChatIcon },
     { label: "View script", value: 2, icon: AIcon },
     { label: "Corrected version", value: 3, icon: MarsIcon },
   ].filter((item) => !(item?.value === 3 && Aidata?.score >= 100));
 
+  const operation = findOperation();
+
+  console.log(operation);
+
   return (
     <ModelComtainer>
       <ModelContent>
@@ -60,38 +135,10 @@ const Grammar = ({ Aidata }) => {
             <p>Click on the words to see detailed feedback</p>
           </div>
           <GrammarHeaderContent>
-            {wordsFeedback?.map((word, idx) => {
-              const isWord = /^\w+$/.test(word.text);
-              const isSymbol = /^[^\w\s]+$/.test(word.text);
-              const next = wordsFeedback[idx + 1];
-              const nextIsWord = /^\w+$/.test(next?.text || "");
-              const isCorrected = !!word.operation;
-              const showFeedback = !!word.feedbackPosition;
-
-              const shouldAddSpace =
-                (isWord && nextIsWord) || // word → word
-                (isSymbol && nextIsWord); // symbol → word
-
-              return (
-                <span
-                  className={classNames("inline", {
-                    "error-text": isCorrected,
-                  })}
-                  key={idx}
-                  style={{ whiteSpace: "pre" }}
-                  onClick={() => {
-                    if (!isCorrected) return;
-                    setSelectedWord(word);
-                    setSelectedSection(1);
-                  }}
-                >
-                  {/* This will only be true for words with a correction (and a position) */}
-                  {showFeedback && <sup>{word.feedbackPosition}</sup>}
-                  {word.text}
-                  {shouldAddSpace && " "}
-                </span>
-              );
-            })}
+            <div
+              className="grammar_analysis_container"
+              dangerouslySetInnerHTML={{ __html: formattedCopy }}
+            ></div>
           </GrammarHeaderContent>
           <ul className="no-border ul_tabs">
             {tabs.map((tab) => (
@@ -114,18 +161,17 @@ const Grammar = ({ Aidata }) => {
           </ul>
         </GrammarHeader>
         <GrammarContent>
-          {selectedSection === 1 && selectedWord && selectedWord?.operation && (
+          {selectedSection === 1 && operation && (
             <div className="feedback_section">
               <div className="failed">
                 <RedX />
                 <span>
-                  <span>{selectedWord?.feedbackPosition}</span>{" "}
-                  {selectedWord?.text}
+                  <span>{operationIndex + 1}</span> {operation?.original_word}
                 </span>
               </div>
               <div className="correct">
                 <GoodCheck />
-                <span>{selectedWord?.correct}</span>
+                <span>{operation?.replacement_word}</span>
               </div>
             </div>
           )}

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

@@ -23,6 +23,7 @@ import { Progress } from "rsuite";
 import ClarityItem from "./ClarityItem";
 import InlineClampedText from "./InlineClampedText";
 import PlayButton from "./PlayButton";
+import useReportUtils from "../../hooks/useRreportUtils";
 
 const SpeechAnalysis = ({
   Aidata,
@@ -33,6 +34,8 @@ const SpeechAnalysis = ({
   const [selectedWord, setSelectedWord] = useState(1);
   const [selectedSection, setSelectedSection] = useState(null);
 
+  const { getColor } = useReportUtils();
+
   const wordData = Aidata?.words;
   const words = wordData?.map((item) => ({
     text: item?.wordText,
@@ -63,7 +66,7 @@ const SpeechAnalysis = ({
     if (tabs?.length) {
       setSelectedSection(tabs?.[0]?.value);
     }
-  }, [tabs?.length, selectedWord]);
+  }, [tabs?.length]);
 
   const selectionSelectionValue = sectionList?.find(
     (item) => item?.id === selectedSection
@@ -91,6 +94,8 @@ const SpeechAnalysis = ({
     return bg;
   }, []);
 
+  console.log(selectionSelectionValue?.data);
+
   return (
     <ModelComtainer>
       <ModelContent>
@@ -293,35 +298,28 @@ const SpeechAnalysis = ({
                   <div className="progress_section center">
                     <div className="progress_value">
                       <Progress.Circle
-                        percent={
-                          selectionSelectionValue?.data?.score <= 45
-                            ? 100 - (selectionSelectionValue?.data?.score || 0)
-                            : selectionSelectionValue?.data?.score || 0
-                        }
+                        percent={Math.floor(
+                          selectionSelectionValue?.data?.score || 0
+                        )}
                         strokeWidth={10}
-                        trailWidth={8}
-                        strokeColor={
-                          selectionSelectionValue?.data?.score > 45
-                            ? "#30D468"
-                            : "#F95454"
-                        }
-                        trailColor={
-                          selectionSelectionValue?.data?.score > 45
-                            ? "#F95454"
-                            : "#30D468"
-                        }
+                        trailWidth={4}
+                        strokeColor={getColor(
+                          selectionSelectionValue?.data?.score || 0
+                        )}
+                        trailColor="#F2F2F2"
                         showInfo={false}
                         className="progress-circle"
-                        gapDegree={8}
                         gapPosition="bottom"
                         style={{
                           width: "80px",
                         }}
                       />
                       <p
-                        className={classNames({
-                          good: selectionSelectionValue?.data?.score > 45,
-                        })}
+                        style={{
+                          color: getColor(
+                            selectionSelectionValue?.data?.score || 0
+                          ),
+                        }}
                       >
                         {selectionSelectionValue?.data?.score || 0}%
                       </p>

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

@@ -7,38 +7,38 @@ export const sampleData1 = {
             evidence: {
               score: 80,
               example:
-                "Technology is the beginning of the end, <IMPROVEMENT>as seen in the decline of face-to-face communication skills among teenagers, with studies indicating a significant correlation between excessive technology use and increased feelings of loneliness</IMPROVEMENT>. <IMPROVEMENT>For instance, a survey by the Pew Research Center found that 60% of teenagers aged 13-17 prefer texting over talking on the phone or meeting in person</IMPROVEMENT>. <IMPROVEMENT>This trend is further supported by data from the National Center for Education Statistics, which shows a decline in students' writing and critical thinking skills since the widespread adoption of digital technology</IMPROVEMENT>. <IMPROVEMENT>Experts argue that over-reliance on technology can lead to a decline in cognitive abilities, citing research that shows a link between technology use and reduced attention span</IMPROVEMENT>. <IMPROVEMENT>argue with your keyboard lol, thank you!</IMPROVEMENT>",
+                "Have you heard about food? It is a fundamental aspect of human culture, with various cuisines around the world offering a diverse range of flavors and nutritional benefits <IMPROVEMENT>(for example, the Mediterranean diet is known for its health benefits, with a study by the American Journal of Medicine finding a significant reduction in heart disease among its adherents)</IMPROVEMENT>. Very delicious.. Robots can't relate <IMPROVEMENT>because they lack the sensory experiences that humans take for granted, such as taste and smell, which are crucial in appreciating the complexity of food</IMPROVEMENT>.",
               feedback:
-                "The essay lacks any form of evidence to support its claim. There are no specific examples, data, or references to credible sources. The statement 'Technology is the beginning of the end' is unsubstantiated and the following phrase 'argue with your keyboard lol, thank you!' does not contribute to the argument or provide evidence. To strengthen the essay, relevant and convincing evidence should be incorporated.",
+                "The essay lacks any form of evidence to support its claims. There are no specific examples, data, or references to credible sources. The statements made are vague and do not provide any convincing argument. To improve, the author should include relevant and convincing evidence, such as statistics or expert opinions, to substantiate their claims.",
             },
             coherence: {
               score: 80,
               example:
-                "Technology is the beginning of the end. <IMPROVEMENT>This assertion may seem provocative, but it warrants further examination.</IMPROVEMENT> To understand this claim, it's essential to consider the implications of technological advancements on society. <IMPROVEMENT>Firstly, the rapid development of technology has transformed the way we live and interact.</IMPROVEMENT> argue with your keyboard lol, <IMPROVEMENT>though this phrase may be intended to be humorous, it disrupts the flow of the argument</IMPROVEMENT>, thank you! <IMPROVEMENT>In conclusion, while the initial statement may be seen as an exaggeration, it highlights the need for a nuanced discussion about the role of technology in our lives.</IMPROVEMENT>",
+                "Have you heard about food? <IMPROVEMENT>It is often described as</IMPROVEMENT> very delicious.. <IMPROVEMENT>This appreciation for taste is a characteristic that distinguishes humans from robots, as</IMPROVEMENT> robots can't relate.",
               feedback:
-                "The essay lacks coherence and logical flow as it consists of a single sentence that does not present a clear argument or claim. There are no subsequent paragraphs to develop the idea, and the transition between the initial statement and the concluding phrase is abrupt and unclear.",
+                "The essay lacks coherence and logical flow. It appears to be a collection of disconnected sentences. To improve coherence, a clear topic sentence and a logical connection between the ideas are needed. The transition between 'Have you heard about food?' and 'Very delicious..' is abrupt, and the sentence 'Robots can't relate.' seems unrelated to the preceding sentences.",
             },
             relevance: {
               score: 15,
               rating: "Not Relevant",
               example:
-                "Technology is a complex and multifaceted concept that has become an integral part of modern life. <IMPROVEMENT>While some people view technology as a force that can bring about significant benefits, others argue that it has the potential to cause harm.</IMPROVEMENT> \"Technology is the beginning of the end\" is a statement that reflects a pessimistic view of technology's impact. <IMPROVEMENT>However, a more nuanced discussion is needed to understand the role of technology in society.</IMPROVEMENT> Arguing with your keyboard, as the original statement humorously suggests, is not a productive way to engage with the topic. <IMPROVEMENT>A more thoughtful analysis of technology's effects is required.</IMPROVEMENT> Thank you!",
+                "Have you heard about food? Very delicious.. Robots can't relate. <IMPROVEMENT>This lack of relation between robots and food highlights a significant aspect of technology, which is its limitation in replicating human experiences, such as savoring delicious food.</IMPROVEMENT>",
               feedback:
-                "The essay does not directly address the topic 'Technology'. It starts with a vague statement about technology and then diverges into an unrelated phrase. There is no clear argument or discussion about technology.",
+                "The essay does not directly address the topic 'Technology'. It appears to be discussing food and its relation to robots, which is not relevant to the given topic. The essay lacks any mention or discussion about technology.",
             },
             critical_thinking: {
               score: 80,
               example:
-                "Technology is the beginning of the end, argue with your keyboard lol, thank you! <IMPROVEMENT>On one hand, one could argue that technological advancements lead to significant improvements in our quality of life, such as increased connectivity and access to information.</IMPROVEMENT> <IMPROVEMENT>On the other hand, it can also be argued that over-reliance on technology may lead to negative consequences, such as decreased face-to-face interaction and potential job displacement due to automation.</IMPROVEMENT> <IMPROVEMENT>Considering these contrasting views, it becomes essential to analyze the statement critically and evaluate the potential implications of technological advancements on society.</IMPROVEMENT>",
+                "Have you heard about food? It's a universal language that humans understand, but <IMPROVEMENT>its significance extends beyond just taste, as it can evoke emotions and create cultural connections</IMPROVEMENT>. Very delicious.. <IMPROVEMENT>This subjective experience is uniquely human, as robots, lacking senses and emotions, can't truly relate to the culinary world in the way humans do</IMPROVEMENT>. Robots can't relate.",
               feedback:
-                "The essay lacks depth and analysis, failing to present a clear argument or explore different perspectives on the given statement. It does not go beyond a superficial statement and lacks original thought.",
+                "The essay lacks depth of analysis and originality of thought. It does not explore different perspectives or go beyond a superficial statement. The connection between food and robots is not clearly established, and the essay does not demonstrate critical thinking.",
             },
           },
-          char_count: 80,
-          word_count: 14,
+          char_count: 64,
+          word_count: 10,
           overall_score: 63,
           overall_feedback:
-            "Evidence: The essay lacks any form of evidence to support its claim. There are no specific examples, data, or references to credible sources. The statement 'Technology is the beginning of the end' is unsubstantiated and the following phrase 'argue with your keyboard lol, thank you!' does not contribute to the argument or provide evidence. To strengthen the essay, relevant and convincing evidence should be incorporated.\n\nCoherence: The essay lacks coherence and logical flow as it consists of a single sentence that does not present a clear argument or claim. There are no subsequent paragraphs to develop the idea, and the transition between the initial statement and the concluding phrase is abrupt and unclear.\n\nRelevance: The essay does not directly address the topic 'Technology'. It starts with a vague statement about technology and then diverges into an unrelated phrase. There is no clear argument or discussion about technology.\n\nCritical Thinking: The essay lacks depth and analysis, failing to present a clear argument or explore different perspectives on the given statement. It does not go beyond a superficial statement and lacks original thought.",
+            "Evidence: The essay lacks any form of evidence to support its claims. There are no specific examples, data, or references to credible sources. The statements made are vague and do not provide any convincing argument. To improve, the author should include relevant and convincing evidence, such as statistics or expert opinions, to substantiate their claims.\n\nCoherence: The essay lacks coherence and logical flow. It appears to be a collection of disconnected sentences. To improve coherence, a clear topic sentence and a logical connection between the ideas are needed. The transition between 'Have you heard about food?' and 'Very delicious..' is abrupt, and the sentence 'Robots can't relate.' seems unrelated to the preceding sentences.\n\nRelevance: The essay does not directly address the topic 'Technology'. It appears to be discussing food and its relation to robots, which is not relevant to the given topic. The essay lacks any mention or discussion about technology.\n\nCritical Thinking: The essay lacks depth of analysis and originality of thought. It does not explore different perspectives or go beyond a superficial statement. The connection between food and robots is not clearly established, and the essay does not demonstrate critical thinking.",
         },
       },
     ],
@@ -46,49 +46,25 @@ export const sampleData1 = {
       {
         model_data: {
           Feedback: [
-            "Inserted '\"'",
-            "Replaced ',' with '.\"'",
-            "Corrected formatting for 'argue' to 'Argue'",
-            "Inserted ','",
-            "Corrected formatting for ',' to '.'",
-            "Corrected formatting for 'thank' to 'Thank'",
+            "Inserted 'the '",
+            "Replaced 'Very' with 'It's very'",
+            "Deleted '.'",
           ],
           "Grammar Score": 85,
           "Original Speech":
-            "Technology is the beginning of the end, argue with your keyboard lol, thank you!",
+            "Have you heard about food? Very delicious.. Robots can't relate.",
           "Grammatical Correct Version":
-            '"Technology is the beginning of the end." Argue with your keyboard, lol. Thank you!',
+            "Have you heard about the food? It's very delicious. Robots can't relate.",
           "Correction Operations (Optional)": [
-            { word: '"', length: 1, position: 1, operation: "inserted" },
+            { word: "the ", length: 4, position: 22, operation: "inserted" },
             {
-              length: 1,
-              position: 39,
+              length: 4,
+              position: 28,
               operation: "substituted",
-              original_word: ",",
-              replacement_word: '."',
-            },
-            {
-              length: 5,
-              position: 41,
-              operation: "formatting",
-              original_word: "argue",
-              replacement_word: "Argue",
-            },
-            { word: ",", length: 1, position: 65, operation: "inserted" },
-            {
-              length: 1,
-              position: 69,
-              operation: "formatting",
-              original_word: ",",
-              replacement_word: ".",
-            },
-            {
-              length: 5,
-              position: 71,
-              operation: "formatting",
-              original_word: "thank",
-              replacement_word: "Thank",
+              original_word: "Very",
+              replacement_word: "It's very",
             },
+            { word: ".", length: 1, position: 42, operation: "deleted" },
           ],
         },
       },

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

@@ -435,7 +435,31 @@ export const GrammarHeaderContent = styled.div`
   background: #f5f7f7;
   width: 100%;
   margin-bottom: 20px;
-  span {
+  .grammar_analysis_container {
+    line-height: 22px;
+    font-size: 16px;
+    .issue {
+      display: inline-flex;
+      padding-right: 4px;
+      color: #f95454;
+      align-items: center;
+      gap: 2px;
+      cursor: pointer;
+      .number {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        height: 20px;
+        border-radius: 100px;
+        padding: 0 6px;
+        border: 1px solid #f95454;
+        background: rgba(249, 84, 84, 0.2);
+        font-size: 12px;
+        font-weight: 700;
+      }
+    }
+  }
+  /* span {
     line-height: 22px;
     font-size: 16px;
 
@@ -459,7 +483,7 @@ export const GrammarHeaderContent = styled.div`
         font-weight: 700;
       }
     }
-  }
+  } */
 `;
 
 export const GrammarContent = styled.div`

package/src/components/reportsComponents/hooks/useRreportUtils.jsx

@@ -634,6 +634,7 @@ const useReportUtils = () => {
     grammarCorrectResult,
     grammerCorrectParagraph,
     formatNumber,
+    getColor,
   };
 };
 

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

@@ -34,7 +34,14 @@ import useApi from "../api";
  * @param {boolean} props.editMode
  * @returns {React.ReactNode}
  */
-const Comment = ({ editMode = false, data, testId, questionData, setData }) => {
+const Comment = ({
+  editMode = false,
+  data,
+  testId,
+  questionData,
+  setData,
+  disabledAdd,
+}) => {
   const { affiliateAccount } = useContext(OutletContext);
   const [toggleDelete, setToggleDelete] = useState(false);
   const [showForm, setShowForm] = useState(null);
@@ -197,6 +204,7 @@ const Comment = ({ editMode = false, data, testId, questionData, setData }) => {
             {!showForm && (
               <button
                 className="sm-btn"
+                disabled={disabledAdd}
                 onClick={() => {
                   setShowForm("Text");
                 }}

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

@@ -28,6 +28,7 @@ const Response = ({
   goodFallback = false,
 }) => {
   const setupAiWordFlow = () => {
+    if (!response) return "";
     if (isAiWordFlow && typeof response !== "string") {
       const htmlString = response
         ?.map((item) => {

package/src/components/reportsComponents/reportQuestions/components/style/comment.style.jsx

@@ -32,6 +32,8 @@ export const CommentContainer = styled.div`
     cursor: pointer;
     &:disabled {
       background: #c6cccc;
+
+      cursor: not-allowed;
       box-shadow: none;
     }
   }
@@ -125,6 +127,7 @@ export const CommentContentEmpty = styled.div``;
 
 export const CommentContentForm = styled.div`
   margin-bottom: 10px;
+
   > textarea {
     border-radius: 10px;
     border: 1px solid #dfe5e5;

package/src/components/reportsComponents/reportQuestions/components/style/errorHeader.style.jsx

@@ -9,6 +9,7 @@ export const ErrorHeaderContainer = styled.div`
   justify-content: center;
   gap: 10px;
   padding: 10px;
+  margin-bottom: 15px;
   p {
     color: #f95454;
     text-align: center;

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

@@ -35,8 +35,9 @@ import classNames from "classnames";
 import FullAnalysis from "../fullAnalysis";
 import useApi from "./api";
 import FullPageLoader from "../../fullPageLoader";
-import { OutletContext } from "../..";
+import { ButtonComponent, OutletContext } from "../..";
 import useReportUtils from "../hooks/useRreportUtils";
+import ErrorHeader from "./components/errorHeader";
 
 /**
  * @param {Object} props
@@ -67,6 +68,7 @@ const ReportQuestions = ({
     (question) => question.value === questionType
   );
   const commentData = data?.answer?.comments;
+  const hasAnswer = data?.answer?.data;
 
   useEffect(() => {
     if (commentData?.length) setComment(commentData?.[0]);
@@ -189,11 +191,14 @@ const ReportQuestions = ({
                 {(accountType === "instructor-personal" ||
                   accountType === "instructor-affiliate") && (
                   <button
+                    disabled={!hasAnswer && data}
                     onClick={() => {
                       setToggleGrade(true);
                     }}
                   >
-                    <YellowPen />
+                    <YellowPen
+                      color={!hasAnswer && data ? "#fff" : undefined}
+                    />
                     Edit score
                   </button>
                 )}
@@ -201,6 +206,7 @@ const ReportQuestions = ({
             </>
           )}
         </ScoreHeader>
+        {data && !hasAnswer && <ErrorHeader />}
         <QuestionContent>
           {(questionType === "quiz-scripted" ||
             questionType === "quiz-unscripted" ||
@@ -287,6 +293,7 @@ const ReportQuestions = ({
           testId={testId}
           questionData={data}
           setData={setComment}
+          disabledAdd={true}
           editMode={
             accountType === "instructor-personal" ||
             accountType === "instructor-affiliate"

package/src/components/reportsComponents/reportQuestions/questions/dialogueUnscripted.jsx

@@ -71,7 +71,13 @@ const DialogueUnscripted = ({ data, aiData, setToggle }) => {
 
       <QuestionSectionWithAnalysis>
         {analysis?.models?.length > 0 && transcript?.length > 0 && (
-          <Response title="" response={transcript} isAiWordFlow />
+          <Response
+            title=""
+            response={
+              !selectedResponse?.recording?.url ? undefined : transcript
+            }
+            isAiWordFlow
+          />
         )}
         <QuestionSectionAction>
           <ResponseAudio

package/src/components/reportsComponents/reportQuestions/questions/matchPair.jsx

@@ -62,7 +62,7 @@ const MatchPair = ({ data }) => {
             <MatchPairItem
               className={classNames({
                 "is-correct": item?.isCorrect && item?.answer,
-                "is-incorrect": !item?.isCorrect && item?.answer,
+                "is-incorrect": !item?.isCorrect,
               })}
             >
               <p>{item?.answer}</p>

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

@@ -38,6 +38,13 @@ export const ScoreHeader = styled.div`
   padding-bottom: 15px;
   border-bottom: 1px solid #f5f7f7;
   margin-bottom: 15px;
+  button {
+    &:disabled {
+      cursor: not-allowed;
+      background: #c6cccc;
+      color: white;
+    }
+  }
 `;
 
 export const ScoreRight = styled.div`