From 31e72f452559fcd03e1cdd894a14d613e0219109 Mon Sep 17 00:00:00 2001
From: Supratick Mondal <91054530+sonustar@users.noreply.github.com>
Date: Sat, 14 Sep 2024 16:47:07 +0000
Subject: [PATCH] Welcome page added

Signed-off-by: Supratick Mondal <91054530+sonustar@users.noreply.github.com>
---
 src/core/routes/test.py                     | 14 +++++-
 src/frontend/components/chat-page.tsx       | 11 ++++-
 src/frontend/components/welcome-section.tsx | 54 +++++++++++++++++++--
 3 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/src/core/routes/test.py b/src/core/routes/test.py
index de5cd01..c92c6bc 100644
--- a/src/core/routes/test.py
+++ b/src/core/routes/test.py
@@ -1,4 +1,4 @@
-from typing import List
+from typing import List, Dict
 from fastapi import APIRouter, HTTPException
 from pydantic import BaseModel
 import uuid
@@ -36,6 +36,18 @@ def get_hyperledger_fabric_answer(question):
     return responses.get(question, "Question not found in the database.")
 
 
+@router.get("/response-keys", response_model=List[Dict[str, str]])
+def get_response_keys() -> List[Dict[str, str]]:
+    """
+    Returns a list of dictionaries containing 'id' and 'name' for each key in the responses dictionary.
+    """
+    res = [
+        {"id": str(index + 1), "name": key}
+        for index, key in enumerate(responses.keys())
+    ]
+    return res
+
+
 # TODO: Get all chats for a user in a paginated format
 @router.post("/conversations")
 def get_conversations(
diff --git a/src/frontend/components/chat-page.tsx b/src/frontend/components/chat-page.tsx
index bdbfe7b..5f0fb61 100644
--- a/src/frontend/components/chat-page.tsx
+++ b/src/frontend/components/chat-page.tsx
@@ -3,6 +3,8 @@
 import React, { useState } from 'react';
 import ChatHeader from './chat-header';
 import { Message } from '@/lib/types';
+import { Suspense } from 'react';
+import WelcomeSection from './welcome-section';
 import ChatBottomBar from './chat-bottom-bar';
 import ChatSection from './chat-section';
 
@@ -23,11 +25,18 @@ const ChatPage = (props: Props) => {
 	};
 
 	return (
-		<div className="flex flex-col w-full">
+		<div className="flex  flex-col w-full">
 			<ChatHeader />
 			<main className="flex-1 overflow-y-auto">
 				<ChatSection messages={messages} />
+
+				{messages.length === 0 && (
+					<Suspense fallback={<p>Loading....</p>}>
+						<WelcomeSection />
+					</Suspense>
+				)}
 			</main>
+
 			<ChatBottomBar onSend={updateMessages} />
 		</div>
 	);
diff --git a/src/frontend/components/welcome-section.tsx b/src/frontend/components/welcome-section.tsx
index 07be1c2..f488df7 100644
--- a/src/frontend/components/welcome-section.tsx
+++ b/src/frontend/components/welcome-section.tsx
@@ -1,13 +1,59 @@
-import React from 'react';
+'use-client';
+import React, {
+	useState,
+	useEffect
+} from 'react';
 import { IconHyperledger } from './icons/IconHyperledger';
+import { SERVER_BASE_URL } from '@/lib/const';
+import { Suspense } from 'react';
 
 type Props = {};
 
+interface Message {
+	id: string;
+	name: string;
+}
+
 const WelcomeSection = (props: Props) => {
+	const [messages, setMessages] = useState<
+		Message[]
+	>([]);
+
+	useEffect(() => {
+		async function fetchData() {
+			const response = await fetch(
+				SERVER_BASE_URL + '/response-keys'
+			);
+			const data = await response.json();
+			setMessages(data);
+		}
+
+		fetchData();
+	}, []);
+
 	return (
-		<div className="flex h-full flex-col items-center justify-center text-primary space-y-2">
-			<IconHyperledger className="w-16 h-16 fill-primary shrink-0" />
-		</div>
+		<>
+			<div className="flex h-1/2 flex-col items-center justify-center text-primary space-y-2">
+				<IconHyperledger className="w-16 h-16 fill-primary shrink-0" />
+			</div>
+
+			<Suspense fallback={<p>Loading....</p>}>
+				<div className="grid grid-cols-2 gap-2 p-4">
+					{messages.map((user: Message) => (
+						<li
+							key={user.id}
+							className="flex flex-end items-center justify-between p-4 bg-white shadow rounded-lg text-gray-600"
+						>
+							<div className="flex flex-col space-y-1">
+								<h2 className="text-lg font-semibold">
+									{user.name}
+								</h2>
+							</div>
+						</li>
+					))}
+				</div>
+			</Suspense>
+		</>
 	);
 };