shows error message when request req fails

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>

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>
   );
 });

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
+}

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 {

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',
+        });
       });
   },
 });

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',
       },
     },
   },