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] 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({