Merge branch 'hyperledger-labs:dev' into dev

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(

src/frontend/components/chat-bottom-bar.tsx

@@ -26,12 +26,25 @@ const ChatBottomBar = ({ onSend }: Props) => {
 			id: '-1'
 		}
 	);
+	const [buttonClass, setButtonClass] = useState(
+		'rounded-full flex-shrink-0 transition-opacity duration-200 opacity-50'
+	);
 	const { isMobile } = useWindowSize();
 
 	useEffect(() => {
 		setIsMounted(true);
 	}, [isMounted]);
 
+	useEffect(() => {
+		setButtonClass(
+			`rounded-full flex-shrink-0 transition-opacity duration-200 ${
+				message.content.trim()
+					? 'opacity-100'
+					: 'opacity-50'
+			}`
+		);
+	}, [message.content]);
+
 	if (!isMounted) {
 		return null;
 	}
@@ -111,9 +124,10 @@ const ChatBottomBar = ({ onSend }: Props) => {
 				<Button
 					size="icon"
 					variant="default"
-					className="rounded-full flex-shrink-0"
+					className={buttonClass}
 					type="button"
 					onClick={handleSubmit}
+					disabled={!message.content.trim()}
 				>
 					<ArrowUp />
 				</Button>

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>
 	);

src/frontend/components/history-data.ts

@@ -0,0 +1,22 @@
+export const historyData = [
+	{
+		id: 1,
+		title: 'What is hyperledger fabric'
+	},
+	{
+		id: 2,
+		title: 'How to install hyperledger fabric'
+	},
+	{
+		id: 3,
+		title: 'How to deploy hyperledger fabric'
+	},
+	{
+		id: 4,
+		title: 'How to run hyperledger fabric'
+	},
+	{
+		id: 5,
+		title: 'How to ensure data privacy'
+	}
+];

src/frontend/components/sidebar-history.tsx

@@ -0,0 +1,105 @@
+'use client';
+import React, {
+	useEffect,
+	useState
+} from 'react';
+import {
+	DropdownMenuCheckboxItemProps,
+	DropdownMenuItem
+} from '@radix-ui/react-dropdown-menu';
+import { Button } from '@/components/ui/button';
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import {
+	EllipsisVertical,
+	Pencil,
+	Pin,
+	Trash2
+} from 'lucide-react';
+
+// Import the mock data
+import { historyData as mockHistoryData } from './history-data';
+
+type Props = {};
+type Checked =
+	DropdownMenuCheckboxItemProps['checked'];
+
+const SidebarHistory = (props: Props) => {
+	const [checkedItems, setCheckedItems] =
+		useState<Record<number, Checked>>({});
+	const [historyData, setHistoryData] = useState<
+		{ id: number; title: string }[]
+	>([]);
+
+	useEffect(() => {
+		setHistoryData(mockHistoryData);
+	}, []);
+
+	const handleCheckedChange = (id: number) => {
+		setCheckedItems((prevCheckedItems) => ({
+			...prevCheckedItems,
+			[id]: !prevCheckedItems[id]
+		}));
+	};
+
+	return (
+		<div className="mt-10">
+			{historyData.map((item) => (
+				<div
+					key={item.id}
+					className="flex justify-between mt-1 p-3 border-none rounded-lg font-semibold bg-slate-800 hover:bg-slate-800 cursor-pointer"
+				>
+					<span className="my-auto truncate overflow-hidden whitespace-nowrap">
+						{item.title}
+					</span>
+
+					<button>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="outline"
+									className="p-0 m-0 text-white bg-slate-800 hover:bg-slate-800 hover:text-white font-semibold border-none"
+								>
+									<EllipsisVertical />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent className="w-56">
+								<DropdownMenuSeparator />
+								<DropdownMenuCheckboxItem
+									checked={
+										!!checkedItems[item.id]
+									}
+									onCheckedChange={() =>
+										handleCheckedChange(item.id)
+									}
+								>
+									<Pin className="mr-2" /> Pin
+								</DropdownMenuCheckboxItem>
+								<button className="p-[7px] flex flex-rowtext-left w-full hover:bg-hover-blue border-none hover:border-none ">
+									<Pencil className="ml-6" />
+									<span className="ml-3">
+										Rename
+									</span>
+								</button>
+
+								<button className="p-[7px] flex flex-rowtext-left w-full hover:bg-hover-blue border-none hover:border-none ">
+									<Trash2 className="ml-6" />
+									<span className="ml-3">
+										Delete
+									</span>
+								</button>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</button>
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default SidebarHistory;

src/frontend/components/sidebar.tsx

@@ -16,6 +16,7 @@ import {
 	SheetTitle,
 	SheetTrigger
 } from '@/components/ui/sheet';
+import SidebarHistory from './sidebar-history';
 
 type Props = {};
 
@@ -93,6 +94,7 @@ const Sidebar = (props: Props) => {
 											<FilePlus />
 										</button>
 									</div>
+									<SidebarHistory />
 								</SheetHeader>
 							</SheetContent>
 						</Sheet>
@@ -118,6 +120,7 @@ const Sidebar = (props: Props) => {
 							isOpen={sidebarOpen}
 							toggleSidebar={handleViewSidebar}
 						/>
+						<SidebarHistory />
 					</aside>
 				</>
 			)}

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

src/frontend/tailwind.config.ts

@@ -24,6 +24,7 @@ const config = {
 		extend: {
 			colors: {
 				border: 'hsl(var(--border))',
+				'hover-blue': '#f1f5f9',
 				input: 'hsl(var(--input))',
 				ring: 'hsl(var(--ring))',
 				background: 'hsl(var(--background))',