l-min-components 1.7.1530 → 1.7.1532

package/package.json

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

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

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
 import {
   ResponseAiWordFlow,
   ResponseContainer,
   ResponseContent,
   FallbackResponse,
-} from './style/response.style';
-import Redx from '../../../../assets/svg/redX';
-import GoodCheck from '../../../../assets/svg/goodCheck';
-import classNames from 'classnames';
+} from "./style/response.style";
+import Redx from "../../../../assets/svg/redX";
+import GoodCheck from "../../../../assets/svg/goodCheck";
+import classNames from "classnames";
 
 /**
  * @param {Object} props
@@ -19,26 +19,28 @@ import classNames from 'classnames';
  * @param {boolean} props.goodFallback
  * @param {boolean} props.rightIcon
  * @param {boolean} props.defaultError
+ * @param {boolean} props.isPersonal
  * @returns {React.ReactNode}
  */
 const Response = ({
-  title = 'Student response',
+  title = "Student response",
   response,
   isAiWordFlow = false,
   processing = false,
-  fallbackMessage = '',
+  fallbackMessage = "",
   goodFallback = false,
   rightIcon,
   defaultError,
+  isPersonal,
 }) => {
   const setupAiWordFlow = () => {
-    if (!response) return '';
-    if (isAiWordFlow && typeof response !== 'string') {
+    if (!response) return "";
+    if (isAiWordFlow && typeof response !== "string") {
       const htmlString = response
         ?.map((item) => {
           return `<span style="color: ${item?.color};">${item?.text}</span>`;
         })
-        .join(' ');
+        .join(" ");
       return htmlString;
     }
     return response;
@@ -70,13 +72,15 @@ const Response = ({
                 ))}
               <p
                 className={classNames({
-                  'good-fallback': goodFallback,
+                  "good-fallback": goodFallback,
                 })}
               >
                 {fallbackMessage ||
                   (isAiWordFlow && !defaultError
-                    ? 'Analysis unavailable. We couldn’t generate it this time.'
-                    : 'No response was provided by the student for this question.')}
+                    ? "Analysis unavailable. We couldn’t generate it this time."
+                    : isPersonal
+                    ? "No response was provided for this question."
+                    : "No response was provided by the student for this question.")}
               </p>
 
               {rightIcon && (goodFallback ? <GoodCheck /> : <Redx />)}

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

@@ -155,6 +155,8 @@ const ReportQuestions = ({
   const handlePrev = () => {
     if (prevId) onSwitchQuestion?.(prevId);
   };
+
+  const isPersonal = accountType === "personal";
   return (
     <Container>
       {(gradeQuestionData?.loading || loading) && (
@@ -245,6 +247,7 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "essay-scripted" && (
@@ -253,6 +256,7 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "essay-unscripted" && (
@@ -261,6 +265,7 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "sound-play" && (
@@ -269,6 +274,7 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "reading" && (
@@ -277,22 +283,29 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "word-play-text" && (
                     <WordPlayText
                       data={findedQuestion}
                       answerData={answerData}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "word-play-multiple-choice" && (
                     <WordPlayMultipleChoice
                       data={findedQuestion}
                       answerData={answerData}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "match-pair" && (
-                    <MatchPair data={findedQuestion} answerData={answerData} />
+                    <MatchPair
+                      data={findedQuestion}
+                      answerData={answerData}
+                      isPersonal={isPersonal}
+                    />
                   )}
                   {questionType === "quiz-scripted" && (
                     <QuizScripted
@@ -300,6 +313,7 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "quiz-unscripted" && (
@@ -308,12 +322,14 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "quiz-multiple-choice" && (
                     <QuizMultipleChoice
                       data={findedQuestion}
                       answerData={answerData}
+                      isPersonal={isPersonal}
                     />
                   )}
 
@@ -323,6 +339,7 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                   {questionType === "dialogue-unscripted" && (
@@ -331,6 +348,7 @@ const ReportQuestions = ({
                       answerData={answerData}
                       aiData={AiData}
                       setToggle={setToggle}
+                      isPersonal={isPersonal}
                     />
                   )}
                 </>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -14,7 +14,13 @@ import ResponseAudioV2 from "../components/responseAudio.v2";
 import QuestionDropdown from "../components/questionDropdown";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const DialogueScripted = ({ data, aiData, setToggle, answerData }) => {
+const DialogueScripted = ({
+  data,
+  aiData,
+  setToggle,
+  answerData,
+  isPersonal,
+}) => {
   const { findText } = useTranslation(wordStore);
   const [selected, setSelected] = useState(1);
   const [analysis, setAnalysis] = useState(null);
@@ -40,7 +46,7 @@ const DialogueScripted = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         selectedModel,
         selectedResponse?.recording,
-        answerData?.ai_score,
+        answerData?.ai_score
       );
       setAnalysis(models);
     }
@@ -78,6 +84,7 @@ const DialogueScripted = ({ data, aiData, setToggle, answerData }) => {
         <Response
           title={findText("Selected option")}
           response={selectedResponse?.text}
+          isPersonal={isPersonal}
         />
       </TitleAndSubtitle>
       <QuestionSectionWithAnalysis>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -14,7 +14,13 @@ import QuestionDropdown from "../components/questionDropdown";
 import ResponseAudioV2 from "../components/responseAudio.v2";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const DialogueUnscripted = ({ data, aiData, setToggle, answerData }) => {
+const DialogueUnscripted = ({
+  data,
+  aiData,
+  setToggle,
+  answerData,
+  isPersonal,
+}) => {
   const { findText } = useTranslation(wordStore);
   const [selected, setSelected] = useState(1);
   const [analysis, setAnalysis] = useState(null);
@@ -40,7 +46,7 @@ const DialogueUnscripted = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         selectedModel,
         selectedResponse?.recording,
-        data?.ai_score,
+        data?.ai_score
       );
       setAnalysis(models);
     }
@@ -84,6 +90,7 @@ const DialogueUnscripted = ({ data, aiData, setToggle, answerData }) => {
           }
           isAiWordFlow
           defaultError={!selectedResponse?.recording?.url}
+          isPersonal={isPersonal}
         />
         <QuestionSectionAction>
           {selectedResponse?.recording?.url && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -13,7 +13,7 @@ import ResponseAudioV2 from "../components/responseAudio.v2";
 import QuestionDropdown from "../components/questionDropdown";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const EssayScripted = ({ data, aiData, setToggle, answerData }) => {
+const EssayScripted = ({ data, aiData, setToggle, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const [analysis, setAnalysis] = useState(null);
   const { setupAnalysis, getTrabScriptData } = useReportUtils();
@@ -25,7 +25,7 @@ const EssayScripted = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         aiData,
         answerData?.answer?.data?.data?.recording,
-        answerData?.ai_score,
+        answerData?.ai_score
       );
       setAnalysis(models);
     }
@@ -46,7 +46,10 @@ const EssayScripted = ({ data, aiData, setToggle, answerData }) => {
         </>
       </QuestionDropdown>
       <TitleAndSubtitle className="with-border">
-        <Response response={answerData?.answer?.data?.data?.text} />
+        <Response
+          response={answerData?.answer?.data?.data?.text}
+          isPersonal={isPersonal}
+        />
       </TitleAndSubtitle>
 
       <QuestionSectionWithAnalysis>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -12,7 +12,13 @@ import QuestionDropdown from "../components/questionDropdown";
 import ResponseAudioV2 from "../components/responseAudio.v2";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const EssayUnscripted = ({ data, aiData, setToggle, answerData }) => {
+const EssayUnscripted = ({
+  data,
+  aiData,
+  setToggle,
+  answerData,
+  isPersonal,
+}) => {
   const { findText } = useTranslation(wordStore);
   const [analysis, setAnalysis] = useState(null);
   const { setupAnalysis, getTrabScriptData } = useReportUtils();
@@ -21,7 +27,7 @@ const EssayUnscripted = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         aiData,
         answerData?.answer?.data?.data?.recording,
-        answerData?.ai_score,
+        answerData?.ai_score
       );
       setAnalysis(models);
     }
@@ -51,6 +57,7 @@ const EssayUnscripted = ({ data, aiData, setToggle, answerData }) => {
               : undefined
           }
           isAiWordFlow
+          isPersonal={isPersonal}
           defaultError={!answerData?.answer?.data?.data?.recording}
         />
         <QuestionSectionAction>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -11,7 +11,8 @@ import useReportUtils from "../../hooks/useRreportUtils";
 import QuestionDropdown from "../components/questionDropdown";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const EssayWritten = ({ data, aiData, setToggle, answerData }) => {
+
+const EssayWritten = ({ data, aiData, setToggle, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const [analysis, setAnalysis] = useState(null);
   const { setupAnalysis } = useReportUtils();
@@ -37,7 +38,10 @@ const EssayWritten = ({ data, aiData, setToggle, answerData }) => {
       </QuestionDropdown>
 
       <QuestionSectionWithAnalysis>
-        <Response response={data?.answer?.data?.data?.text} />
+        <Response
+          response={data?.answer?.data?.data?.text}
+          isPersonal={isPersonal}
+        />
         <QuestionSectionAction>
           {analysis?.models?.length > 0 && (
             <AnalysisButton

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
   QuestionSection,
   MatchPairGrid,
@@ -14,7 +14,7 @@ import QuestionDropdown from "../components/questionDropdown";
 import Response from "../components/response";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const MatchPair = ({ data, answerData }) => {
+const MatchPair = ({ data, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const [pairPreview, setPairPreview] = useState(null);
   const getMatchAndCorrectPair = () => {
@@ -54,7 +54,7 @@ const MatchPair = ({ data, answerData }) => {
         </QuestionDropdown>
         {answerData &&
           !Object.values(answerData?.answer?.data?.responses || {})?.length >
-            0 && <Response title="" />}
+            0 && <Response title="" isPersonal={isPersonal} />}
         <TitleAndSubtitle>
           <MatchPairGrid>
             <h3>Word/Sentence</h3>
@@ -73,8 +73,8 @@ const MatchPair = ({ data, answerData }) => {
 
             <MatchPairItem
               className={classNames({
-                'is-correct': item?.isCorrect && item?.answer,
-                'is-incorrect': !item?.isCorrect,
+                "is-correct": item?.isCorrect && item?.answer,
+                "is-incorrect": !item?.isCorrect,
               })}
             >
               <p className="truncate-3">{item?.answer}</p>

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

@@ -6,7 +6,7 @@ import QuestionDropdown from "../components/questionDropdown";
 import QuizQuestion from "../components/quizQuestion";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const QuizMultipleChoice = ({ data, answerData }) => {
+const QuizMultipleChoice = ({ data, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const { choiceListAndAnswer } = useReportUtils();
   const { options, answer, isCorrect, correctIndex, correctText } =
@@ -36,7 +36,11 @@ const QuizMultipleChoice = ({ data, answerData }) => {
         </>
       </QuestionDropdown>
       <TitleAndSubtitle>
-        <Response goodFallback={isCorrect} fallbackMessage={answer?.text} />
+        <Response
+          goodFallback={isCorrect}
+          fallbackMessage={answer?.text}
+          isPersonal={isPersonal}
+        />
       </TitleAndSubtitle>
 
       {answerData?.answer?.data && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -15,7 +15,7 @@ import QuizQuestion from "../components/quizQuestion";
 import ResponseAudioV2 from "../components/responseAudio.v2";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const QuizScripted = ({ data, aiData, setToggle, answerData }) => {
+const QuizScripted = ({ data, aiData, setToggle, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const [selected, setSelected] = useState(1);
   const [analysis, setAnalysis] = useState(null);
@@ -36,7 +36,7 @@ const QuizScripted = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         selectedModel,
         selectedResponse?.recording,
-        data?.ai_score,
+        data?.ai_score
       );
       setAnalysis(models);
     }
@@ -65,7 +65,7 @@ const QuizScripted = ({ data, aiData, setToggle, answerData }) => {
         </>
       </QuestionDropdown>
 
-      <Response response={selectedResponse?.text} />
+      <Response response={selectedResponse?.text} isPersonal={isPersonal} />
 
       <QuestionSectionWithAnalysis>
         {selectedResponse?.recording && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -15,7 +15,13 @@ import QuizQuestion from "../components/quizQuestion";
 import ResponseAudioV2 from "../components/responseAudio.v2";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const QuizUnscripted = ({ data, aiData, setToggle, answerData }) => {
+const QuizUnscripted = ({
+  data,
+  aiData,
+  setToggle,
+  answerData,
+  isPersonal,
+}) => {
   const { findText } = useTranslation(wordStore);
   const [selected, setSelected] = useState(1);
   const { quizResponses, quixSelectedModel, setupAnalysis, getTrabScriptData } =
@@ -23,7 +29,7 @@ const QuizUnscripted = ({ data, aiData, setToggle, answerData }) => {
   const [analysis, setAnalysis] = useState(null);
   const quizList = quizResponses({
     responses: answerData?.answer?.data?.data?.responses,
-    type: 'unscripted',
+    type: "unscripted",
   });
   const selectionList = quizList?.map((item) => ({
     value: item?.key,
@@ -37,7 +43,7 @@ const QuizUnscripted = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         selectedModel,
         selectedResponse?.recording,
-        data?.ai_score,
+        data?.ai_score
       );
       setAnalysis(models);
     }
@@ -75,6 +81,7 @@ const QuizUnscripted = ({ data, aiData, setToggle, answerData }) => {
           }
           isAiWordFlow
           defaultError={!selectedResponse?.recording}
+          isPersonal={isPersonal}
         />
         <QuestionSectionAction>
           {selectedResponse?.recording && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -12,7 +12,7 @@ import QuestionDropdown from "../components/questionDropdown";
 import ResponseAudioV2 from "../components/responseAudio.v2";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const Reading = ({ data, aiData, setToggle, answerData }) => {
+const Reading = ({ data, aiData, setToggle, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const [analysis, setAnalysis] = useState(null);
   const { setupAnalysis, getTrabScriptData } = useReportUtils();
@@ -21,13 +21,13 @@ const Reading = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         aiData,
         answerData?.answer?.data?.recording,
-        answerData?.ai_score,
+        answerData?.ai_score
       );
       setAnalysis(models);
     }
   }, [data, answerData]);
   const transcript = getTrabScriptData(analysis?.models);
-  console.log(data?.question_data, "llll");
+
   return (
     <QuestionSection>
       <QuestionDropdown>
@@ -52,6 +52,7 @@ const Reading = ({ data, aiData, setToggle, answerData }) => {
           }
           isAiWordFlow
           defaultError={!answerData?.answer?.data?.recording}
+          isPersonal={isPersonal}
         />
         <QuestionSectionAction>
           {answerData?.answer?.data?.recording && (

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
   QuestionSection,
   QuestionSectionAction,
@@ -12,7 +12,7 @@ import ResponseAudioV2 from "../components/responseAudio.v2";
 import QuestionDropdown from "../components/questionDropdown";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const SoundPlay = ({ data, aiData, setToggle, answerData }) => {
+const SoundPlay = ({ data, aiData, setToggle, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const [analysis, setAnalysis] = useState(null);
   const { setupAnalysis, getTrabScriptData } = useReportUtils();
@@ -21,7 +21,7 @@ const SoundPlay = ({ data, aiData, setToggle, answerData }) => {
       const models = setupAnalysis(
         aiData,
         answerData?.answer?.data?.audio,
-        answerData?.ai_score,
+        answerData?.ai_score
       );
       setAnalysis(models);
     }
@@ -51,6 +51,7 @@ const SoundPlay = ({ data, aiData, setToggle, answerData }) => {
           }
           isAiWordFlow
           defaultError={!answerData?.answer?.data?.audio}
+          isPersonal={isPersonal}
         />
         <QuestionSectionAction>
           {answerData?.answer?.data?.audio && (

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

@@ -8,7 +8,7 @@ import QuestionDropdown from "../components/questionDropdown";
 import ResponseAudioV2 from "../components/responseAudio.v2";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const WordPlayMultipleChoice = ({ data, answerData }) => {
+const WordPlayMultipleChoice = ({ data, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   const { choiceListAndAnswer } = useReportUtils();
   const { options, answer, isCorrect, correctIndex, correctText } =
@@ -42,7 +42,11 @@ const WordPlayMultipleChoice = ({ data, answerData }) => {
       </QuestionDropdown>
 
       <TitleAndSubtitle>
-        <Response goodFallback={isCorrect} fallbackMessage={answer?.text} />
+        <Response
+          goodFallback={isCorrect}
+          fallbackMessage={answer?.text}
+          isPersonal={isPersonal}
+        />
       </TitleAndSubtitle>
 
       {answerData?.answer?.data && (

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

@@ -6,7 +6,7 @@ import QuestionDropdown from "../components/questionDropdown";
 import ResponseAudioV2 from "../components/responseAudio.v2";
 import useTranslation from "../../../../hooks/useTranslation.jsx";
 import wordStore from "../../../../mc/wordStore.json";
-const WordPlayText = ({ data, answerData }) => {
+const WordPlayText = ({ data, answerData, isPersonal }) => {
   const { findText } = useTranslation(wordStore);
   return (
     <QuestionSection>
@@ -27,9 +27,11 @@ const WordPlayText = ({ data, answerData }) => {
         </>
       </QuestionDropdown>
 
-      {answerData?.answer && (
-        <Response response={answerData?.answer?.data?.answer_text} />
-      )}
+      <Response
+        response={answerData?.answer?.data?.answer_text}
+        isPersonal={isPersonal}
+      />
+
       {data?.question_data?.answer && (
         <Response
           title={findText("Correct response")}

package/src/hooks/useTranslation.jsx

@@ -7,8 +7,9 @@ if (!window.translationCache) {
 }
 
 const CACHE_DURATION = 60 * 60 * 1000; // 1 hour in milliseconds
-const S3_BASE_URL =
-  "https://learngual-bucket.sfo3.digitaloceanspaces.com/media/media/";
+const S3_BASE_URL = `https://learngual-bucket.sfo3.digitaloceanspaces.com/${
+  window.location.hostname.includes("staging") ? "" : "learngual-production/"
+}media/media/`;
 
 const useTranslation = (initialSentences = []) => {
   const value = localStorage?.getItem("defaultLang");
@@ -82,7 +83,11 @@ const useTranslation = (initialSentences = []) => {
     try {
       // Fetch from S3 - master JSON contains all languages
       const response = await fetch(
-        `${S3_BASE_URL}qFpINMa05DrgUgzO0PEboReejximpq2r3VL2AmFZAwIq6fTN3A.json`
+        `${S3_BASE_URL}${
+          window.location.hostname.includes("staging")
+            ? "qFpINMa05DrgUgzO0PEboReejximpq2r3VL2AmFZAwIq6fTN3A.json"
+            : "qFpINMa05DrgUgzO0PEboReejximpq2r3VL2AmFZAwIq6fTN3A.json"
+        }`
       );
 
       if (!response.ok) {