Welcome

src/core/routes/test.py

@@ -1,8 +1,9 @@
-from typing import List
+from typing import List, Dict
 from fastapi import APIRouter, HTTPException
 from pydantic import BaseModel
 import uuid
 
+
 router = APIRouter(prefix="/api/test")
 
 
@@ -23,10 +24,17 @@ class RequestConversation(BaseModel):
     type: int
 
 
+conversation = {}
+
+
+def generate_unique_id():
+    return str(uuid.uuid4())
+
+
 responses = {
     "What is Hyperledger Fabric?": "Hyperledger Fabric is an open-source blockchain framework designed for enterprise solutions. It allows for a modular architecture where different components like consensus mechanisms, membership services, and ledger storage can be tailored to specific needs.",
-    "How to install Hyperledger Fabric?": "To install Hyperledger Fabric, follow these steps:\n1. Install Docker and Docker Compose.\n2. Download the Hyperledger Fabric binaries and docker images using the Fabric CA and Fabric binaries script.\n3. Set up the environment variables for Fabric binaries.\n4. Verify the installation by running Fabric sample network scripts.",
-    "How to deploy a Hyperledger Fabric network?": "To deploy a Hyperledger Fabric network:\n1. Define the network topology and configuration files (e.g., 'configtx.yaml').\n2. Use the 'fabric-cli' or scripts to create channel artifacts.\n3. Launch the network by starting the necessary Docker containers and services using 'docker-compose' or Kubernetes.\n4. Instantiate and upgrade chaincode as needed.",
+    "How to install Hyperledger Fabric?": "**To install Hyperledger Fabric, follow these steps:** \n - Install Docker and Docker Compose.\n - Download the Hyperledger Fabric binaries and Docker images using the Fabric CA and Fabric binaries script.\n - Set up the environment variables for Fabric binaries.\n - Verify the installation by running Fabric sample network scripts.",
+    "How to deploy a Hyperledger Fabric network?": "**To deploy a Hyperledger Fabric network:** \n - Define the network topology and configuration files (e.g., 'configtx.yaml').\n - Use the 'fabric-cli' or scripts to create channel artifacts.\n - Launch the network by starting the necessary Docker containers and services using 'docker-compose' or Kubernetes.\n - Instantiate and upgrade chaincode as needed.",
     "How to run a Hyperledger Fabric network?": "To run a Hyperledger Fabric network:\n1. Start the network by running 'docker-compose up' or the appropriate command for your setup.\n2. Use the Fabric CLI tools or SDKs to interact with the network, including creating and joining channels, and submitting transactions.\n3. Monitor the network's health and performance using Fabric's built-in tools or external monitoring solutions.",
     "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.",
 }
@@ -36,6 +44,16 @@ 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]]:
+    # Create a list of dictionaries with 'id' and 'name' keys
+    res = []
+    for index, key in enumerate(responses.keys()):
+        res.append({"id": str(index + 1), "name": key})
+
+    return res
+
+
 # TODO: Get all chats for a user in a paginated format
 @router.post("/conversations")
 def get_conversations(
@@ -47,16 +65,23 @@ def get_conversations(
 # TODO: Get a single chat for a user
 @router.post("/conversation/{id}")
 def post_conversation(id: str):
-    pass
+    temp_conversation = conversation.get(id)
+    if not temp_conversation:
+        raise HTTPException(status_code=404, detail="Conversation not found")
+    return temp_conversation
 
 
 @router.post("/conversation", response_model=ResponseConversation)
 def post_conversation(item: RequestConversation) -> ResponseConversation:
-    return ResponseConversation(
+    conversation_id = generate_unique_id()  # it will contain the id
+
+    new_conversation = ResponseConversation(
         id=item.id,
         message=ResponseMessage(
             content=get_hyperledger_fabric_answer(item.content),
             type=1,
             id=str(uuid.uuid4()),
         ),
     )
+    conversation[conversation_id] = new_conversation
+    return new_conversation

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