adds conversation slice and acomoddates conversation component with the

data types

frontend/src/conversation/Conversation.tsx

@@ -1,28 +1,27 @@
+import { useSelector } from 'react-redux';
+import Hero from '../Hero';
 import ConversationBubble from './ConversationBubble';
 import ConversationInput from './ConversationInput';
+import { selectConversation } from './conversationSlice';
 
 export default function Conversation() {
-  // uncomment below JSX to see the sample harcoded chat box
+  const messages = useSelector(selectConversation);
   return (
     <div className="flex justify-center p-6">
-      {/* <div className="w-10/12 transition-all md:w-1/2">
-        {new Array(10).fill(1).map((item, index) => {
+      <div className="w-10/12 transition-all md:w-1/2">
+        {messages.map((message, index) => {
           return (
             <ConversationBubble
               className="mt-5"
               key={index}
-              user={index % 2 === 0 ? { avatar: '🦖' } : { avatar: '👤' }}
-              message={
-                index % 2 === 0
-                  ? 'A chatbot is a computer program that simulates human conversation through voice commands or text chats or both. It can be integrated with various messaging platforms like Facebook Messenger, WhatsApp, WeChat, etc.'
-                  : 'what is DocsGPT'
-              }
-              isCurrentUser={index % 2 === 0 ? false : true}
+              message={message.text}
+              type={message.type}
             ></ConversationBubble>
           );
         })}
+        {messages.length === 0 && <Hero className="mt-24"></Hero>}
       </div>
-      <ConversationInput className="fixed bottom-2 w-10/12 md:w-[50%]"></ConversationInput> */}
+      <ConversationInput className="fixed bottom-2 w-10/12 md:w-[50%]"></ConversationInput>
     </div>
   );
 }

frontend/src/conversation/ConversationBubble.tsx

@@ -1,24 +1,23 @@
 import Avatar from '../Avatar';
 import { User } from '../models/misc';
+import { MESSAGE_TYPE } from './conversationModels';
 
 export default function ConversationBubble({
-  user,
   message,
-  isCurrentUser,
+  type,
   className,
 }: {
-  user: User;
   message: string;
-  isCurrentUser: boolean;
+  type: MESSAGE_TYPE;
   className: string;
 }) {
   return (
     <div
       className={`flex rounded-3xl ${
-        isCurrentUser ? '' : 'bg-gray-1000'
+        type === 'QUESTION' ? '' : 'bg-gray-1000'
       } py-7 px-5 ${className}`}
     >
-      <Avatar avatar={user.avatar}></Avatar>
+      <Avatar avatar={type === 'QUESTION' ? '👤' : '🦖'}></Avatar>
       <p className="ml-5">{message}</p>
     </div>
   );

frontend/src/conversation/conversationModels.ts

@@ -0,0 +1,10 @@
+export type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
+
+export interface Message {
+  text: string;
+  type: MESSAGE_TYPE;
+}
+
+export interface ConversationState {
+  conversation: Message[];
+}

frontend/src/conversation/conversationSlice.ts

@@ -1,15 +1,6 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
-
-interface SingleConversation {
-  message: string;
-  messageType: MESSAGE_TYPE;
-}
-
-interface ConversationState {
-  conversation: SingleConversation[];
-}
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import store from '../store';
+import { ConversationState, Message } from './conversationModels';
 
 const initialState: ConversationState = {
   conversation: [],
@@ -19,11 +10,16 @@ export const conversationSlice = createSlice({
   name: 'conversation',
   initialState,
   reducers: {
-    addMessage(state, action) {
+    addMessage(state, action: PayloadAction<Message>) {
       state.conversation.push(action.payload);
     },
   },
 });
 
 export const { addMessage } = conversationSlice.actions;
+
+type RootState = ReturnType<typeof store.getState>;
+export const selectConversation = (state: RootState) =>
+  state.conversation.conversation;
+
 export default conversationSlice.reducer;