Dev

src/core/routes/test.py

@@ -31,6 +31,16 @@ class RequestConversation(BaseModel):
     "How to ensure data privacy in Hyperledger Fabric?": "To ensure data privacy in Hyperledger Fabric:\n1. Use private data collections to restrict access to sensitive data.\n2. Implement access control policies and endorsement policies.\n3. Utilize encryption for data at rest and in transit.\n4. Regularly review and update security configurations and practices.",
 }
 
+@router.get("/response-keys", response_model=List[Dict[str, str]])
+async def get_response_keys() -> List[Dict[str, str]]:
+
+    # Create a list of dictionaries with 'id' and 'name' keys
+    res =[
+    {"id": str(index + 1), "name": key}
+    for index, key in enumerate(responses.keys())
+]
+    return res
+
 
 def get_hyperledger_fabric_answer(question):
     return responses.get(question, "Question not found in the database.")

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';
 
@@ -27,6 +29,12 @@ const ChatPage = (props: Props) => {
 			<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>

src/frontend/components/sidebar.tsx

@@ -103,16 +103,9 @@ const Sidebar = (props: Props) => {
 					<aside
 						className={`${
 							sidebarOpen
-								? 'relative translate-x-0'
-								: 'fixed -translate-x-full'
+								? 'relative'
+								: 'fixed left-[-16rem]'
 						} top-0 h-full bg-primary text-white py-1 px-2 w-64 transition-transform duration-500 ease-in z-40`}
-						style={{
-							transitionDelay: '0s',
-							transitionDuration: '500ms',
-							transitionProperty: 'transform',
-							transitionTimingFunction:
-								'ease-in-out'
-						}}
 					>
 						<MenuOptions
 							isOpen={sidebarOpen}

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