Adjust API error UI on AskNoora

src/components/ask-noora/AskNoora.tsx

@@ -10,6 +10,7 @@ export default function AskNoora() {
       explanation:
         "You should show them that you are interested in their experiences by asking them about their book.",
       reply: "That's great! What was your favorite part of the book?",
+      success: true,
     },
   ]);
   const [rq, setRq] = useState<any[]>([]);

src/components/interfaces/ask-noora/AskNooraComponent.tsx

@@ -55,6 +55,7 @@ export default function AskNooraComponent({
                   id={result.id}
                   statement={result.statement}
                   explanation={result.explanation}
+                  success={result.success}
                   reply={result.reply}
                   results={results}
                 />

src/components/interfaces/ask-noora/Result.tsx

@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 export default function Result({
   statement,
   explanation,
+  success,
   reply,
   id,
   results,
@@ -40,16 +41,20 @@ export default function Result({
           </span>
         )}
       </div>
-      {reply ? (
-        <div className="text-center mt-3 text-lg text-gray-600 max-w-4xl mx-auto">
-          {explanation} <br />
-          For example: <span className="text-noora-primary font-bold inline-block mt-1">“{reply}”</span>
-        </div>
-      ) : (
-        <div className="text-center text-slate-500">
+      {reply ? 
+        (<div className="text-center mt-3 text-lg text-gray-600 max-w-4xl mx-auto">
+            {success ?
+            <>
+              {explanation} <br />
+              For example: <span className="text-noora-primary font-bold inline-block mt-1">“{reply}”</span>
+            </>
+             : 
+            <span className="text-noora font-bold inline-block mt-1">{reply}</span>}
+        </div>) 
+      : (<div className="text-center text-slate-500">
           Give Noora a few seconds to think...
-        </div>
-      )}
+        </div>)
+      }
     </div>
   );
 }
@@ -58,6 +63,7 @@ type ResultProps = {
   statement: string;
   explanation: string;
   reply: string;
+  success: boolean;
   id: number;
   results: any;
 };

src/scripts/gpt-3/generate-advice.ts

@@ -11,7 +11,8 @@ export default async function generateResult(statement: string, uuid: string) {
 
   let numApiCalls = 0;
   let explanation = "";
-  let reply = "Noora couldn't think of a reply.";
+  let reply = "Noora couldn't think of a reply. Please try again later.";
+  let success = false;
   while (numApiCalls < 3) {
     let result = await Completion({
       model: "text-davinci-002",
@@ -27,6 +28,7 @@ export default async function generateResult(statement: string, uuid: string) {
     if (tokens.length == 2) {
       explanation = tokens[0].trim();
       reply = tokens[1].trim().replace('"', "");
+      success = true;
       break;
     }
   }
@@ -35,6 +37,7 @@ export default async function generateResult(statement: string, uuid: string) {
     id: uuid,
     statement: statement,
     explanation: explanation,
+    success: success,
     reply: reply.replace('"', ""),
   };
 }