From a86744d9d63f50db8f0150ffe771d5bc31a4ef2d Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Sun, 19 Feb 2023 08:56:53 +0530
Subject: [PATCH 1/4] adds hero page

---
 frontend/src/Hero.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 frontend/src/Hero.tsx

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
new file mode 100644
index 00000000..817ba8bb
--- /dev/null
+++ b/frontend/src/Hero.tsx
@@ -0,0 +1,21 @@
+export default function Hero({ className = '' }: { className?: string }) {
+  return (
+    <div className={`flex flex-col ${className}`}>
+      <p className="mb-10 text-center text-4xl font-semibold">
+        DocsGPT <span className="text-3xl">🦖</span>
+      </p>
+      <p className="mb-3 text-center">
+        Welcome to DocsGPT, your technical documentation assistant!
+      </p>
+      <p className="mb-3 text-center">
+        Enter a query related to the information in the documentation you
+        selected to receive and we will provide you with the most relevant
+        answers.
+      </p>
+      <p className="text-center">
+        Start by entering your query in the input field below and we will do the
+        rest!
+      </p>
+    </div>
+  );
+}

From d20b5f3e0992f16273114b1df424453a0099b2c9 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Sun, 19 Feb 2023 09:53:39 +0530
Subject: [PATCH 2/4] adds conversation slice

---
 .../src/conversation/conversationSlice.ts     | 29 +++++++++++++++++++
 frontend/src/store.ts                         |  4 +--
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/conversation/conversationSlice.ts

diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
new file mode 100644
index 00000000..4923bf65
--- /dev/null
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+type MESSAGE_TYPE = 'QUESTION' | 'ANSWER';
+
+interface SingleConversation {
+  message: string;
+  messageType: MESSAGE_TYPE;
+}
+
+interface ConversationState {
+  conversation: SingleConversation[];
+}
+
+const initialState: ConversationState = {
+  conversation: [],
+};
+
+export const conversationSlice = createSlice({
+  name: 'conversation',
+  initialState,
+  reducers: {
+    addMessage(state, action) {
+      state.conversation.push(action.payload);
+    },
+  },
+});
+
+export const { addMessage } = conversationSlice.actions;
+export default conversationSlice.reducer;
diff --git a/frontend/src/store.ts b/frontend/src/store.ts
index 706e2ee4..74f573d7 100644
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -1,11 +1,11 @@
-// import { configureStore, createSlice } from '@reduxjs/toolkit';
-
 import { configureStore } from '@reduxjs/toolkit';
+import { conversationSlice } from './conversation/conversationSlice';
 import { prefSlice } from './preferences/preferenceSlice';
 
 const store = configureStore({
   reducer: {
     preference: prefSlice.reducer,
+    conversation: conversationSlice.reducer,
   },
 });
 

From 5b456cda16d16d52ff1fe7489594c3e08fc26b3e Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Sun, 19 Feb 2023 10:36:26 +0530
Subject: [PATCH 3/4] adds conversation slice and acomoddates conversation
 component with the data types

---
 frontend/src/conversation/Conversation.tsx    | 21 +++++++++---------
 .../src/conversation/ConversationBubble.tsx   | 11 +++++-----
 .../src/conversation/conversationModels.ts    | 10 +++++++++
 .../src/conversation/conversationSlice.ts     | 22 ++++++++-----------
 4 files changed, 34 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/conversation/conversationModels.ts

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index dd0fb231..71d2f527 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/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>
   );
 }
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index e5a34f80..f97d0961 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/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>
   );
diff --git a/frontend/src/conversation/conversationModels.ts b/frontend/src/conversation/conversationModels.ts
new file mode 100644
index 00000000..1172f769
--- /dev/null
+++ b/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[];
+}
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index 4923bf65..eaec8197 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/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;

From e40eb53b7a510bc7dae0b3768f7fd09bf821741d Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Sun, 19 Feb 2023 11:55:38 +0530
Subject: [PATCH 4/4] hooks up the redux conversation state with conversation
 UI

---
 frontend/src/conversation/Conversation.tsx    |  8 +++++-
 .../src/conversation/ConversationBubble.tsx   | 24 +++++++++--------
 .../src/conversation/conversationSlice.ts     | 27 ++++++++++++++++++-
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 71d2f527..2d54699e 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import Hero from '../Hero';
 import ConversationBubble from './ConversationBubble';
@@ -6,13 +7,18 @@ import { selectConversation } from './conversationSlice';
 
 export default function Conversation() {
   const messages = useSelector(selectConversation);
+  const endMessageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => endMessageRef?.current?.scrollIntoView());
+
   return (
     <div className="flex justify-center p-6">
       <div className="w-10/12 transition-all md:w-1/2">
         {messages.map((message, index) => {
           return (
             <ConversationBubble
-              className="mt-5"
+              ref={index === messages.length - 1 ? endMessageRef : null}
+              className="mb-7"
               key={index}
               message={message.text}
               type={message.type}
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index f97d0961..6fa99131 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,18 +1,18 @@
+import { forwardRef } from 'react';
 import Avatar from '../Avatar';
-import { User } from '../models/misc';
 import { MESSAGE_TYPE } from './conversationModels';
 
-export default function ConversationBubble({
-  message,
-  type,
-  className,
-}: {
-  message: string;
-  type: MESSAGE_TYPE;
-  className: string;
-}) {
+const ConversationBubble = forwardRef<
+  HTMLDivElement,
+  {
+    message: string;
+    type: MESSAGE_TYPE;
+    className: string;
+  }
+>(function ConversationBubble({ message, type, className }, ref) {
   return (
     <div
+      ref={ref}
       className={`flex rounded-3xl ${
         type === 'QUESTION' ? '' : 'bg-gray-1000'
       } py-7 px-5 ${className}`}
@@ -21,4 +21,6 @@ export default function ConversationBubble({
       <p className="ml-5">{message}</p>
     </div>
   );
-}
+});
+
+export default ConversationBubble;
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index eaec8197..a20b3788 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -2,8 +2,33 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import store from '../store';
 import { ConversationState, Message } from './conversationModels';
 
+// harcoding the initial state just for demo
 const initialState: ConversationState = {
-  conversation: [],
+  conversation: [
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    { text: 'ChatGPT is large learning model', type: 'ANSWER' },
+    { text: 'what is ChatGPT', type: 'QUESTION' },
+    {
+      text: 'ChatGPT is large learning model',
+      type: 'ANSWER',
+    },
+  ],
 };
 
 export const conversationSlice = createSlice({