From 1fc9d613252448677ca2ca46dfa6ddd815a024ff Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Wed, 22 Feb 2023 10:02:05 +0530
Subject: [PATCH] shows error message when request req fails

---
 frontend/src/assets/alert.svg                 |  3 +++
 .../src/conversation/ConversationBubble.tsx   | 20 +++++++++++++++++--
 frontend/src/conversation/conversationApi.ts  | 13 ++++++++++--
 .../src/conversation/conversationModels.ts    |  2 +-
 .../src/conversation/conversationSlice.ts     |  6 +++++-
 frontend/tailwind.config.cjs                  |  3 +++
 6 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/assets/alert.svg

diff --git a/frontend/src/assets/alert.svg b/frontend/src/assets/alert.svg
new file mode 100644
index 0000000..05c7634
--- /dev/null
+++ b/frontend/src/assets/alert.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#F44336"/>
+</svg>
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 6fa9913..1283c79 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import Avatar from '../Avatar';
 import { MESSAGE_TYPE } from './conversationModels';
+import Alert from './../assets/alert.svg';
 
 const ConversationBubble = forwardRef<
   HTMLDivElement,
@@ -14,11 +15,26 @@ const ConversationBubble = forwardRef<
     <div
       ref={ref}
       className={`flex rounded-3xl ${
-        type === 'QUESTION' ? '' : 'bg-gray-1000'
+        type === 'ANSWER'
+          ? 'bg-gray-1000'
+          : type === 'ERROR'
+          ? 'bg-red-1000'
+          : ''
       } py-7 px-5 ${className}`}
     >
       <Avatar avatar={type === 'QUESTION' ? '👤' : '🦖'}></Avatar>
-      <p className="ml-5">{message}</p>
+      <div
+        className={`ml-5 flex items-center ${
+          type === 'ERROR'
+            ? 'rounded-lg border border-red-2000 p-2 text-red-3000'
+            : ''
+        }`}
+      >
+        {type === 'ERROR' && (
+          <img src={Alert} alt="alert" className="mr-2 inline" />
+        )}
+        <span>{message}</span>
+      </div>
     </div>
   );
 });
diff --git a/frontend/src/conversation/conversationApi.ts b/frontend/src/conversation/conversationApi.ts
index c58532b..2030284 100644
--- a/frontend/src/conversation/conversationApi.ts
+++ b/frontend/src/conversation/conversationApi.ts
@@ -5,7 +5,7 @@ export function fetchAnswerApi(
   apiKey: string,
 ): Promise<Answer> {
   // a mock answer generator, this is going to be replaced with real http call
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     setTimeout(() => {
       let result = '';
       const characters =
@@ -18,7 +18,16 @@ export function fetchAnswerApi(
         );
         counter += 1;
       }
-      resolve({ answer: result, query: question, result });
+      const randNum = getRandomInt(0, 10);
+      randNum < 5
+        ? reject()
+        : resolve({ answer: result, query: question, result });
     }, 3000);
   });
 }
+
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
+}
diff --git a/frontend/src/conversation/conversationModels.ts b/frontend/src/conversation/conversationModels.ts
index e2b55e4..c30977d 100644
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -1,4 +1,4 @@
-export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
+export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER' | 'ERROR';
 export type Status = 'idle' | 'loading' | 'failed';
 
 export interface Message {
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index 82e62ce..bd6929e 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -38,8 +38,12 @@ export const conversationSlice = createSlice({
           type: 'ANSWER',
         });
       })
-      .addCase(fetchAnswer.rejected, (state) => {
+      .addCase(fetchAnswer.rejected, (state, action) => {
         state.status = 'failed';
+        state.conversation.push({
+          text: 'Something went wrong. Please try again later.',
+          type: 'ERROR',
+        });
       });
   },
 });
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 8596bc5..73cc3ed 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -12,6 +12,9 @@ module.exports = {
         jet: '#343541',
         'gray-alpha': 'rgba(0,0,0, .1)',
         'gray-1000': '#F6F6F6',
+        'red-1000': 'rgb(254, 202, 202)',
+        'red-2000' : '#F44336',
+        'red-3000': '#621B16',
       },
     },
   },