Add Sidebar history Section (#50)

* Add sidebar history and submit button ui change Signed-off-by: Sauradip Ghosh <[email protected]> * Format Fix Signed-off-by: Sauradip Ghosh <[email protected]> * Span and Overflow added Signed-off-by: Sauradip Ghosh <[email protected]> * Rename files Signed-off-by: Sauradip Ghosh <[email protected]> * convert checkboxes to button Signed-off-by: Sauradip Ghosh <[email protected]> * button's class a state variable added Signed-off-by: Sauradip Ghosh <[email protected]> * Remove truncateTitle Signed-off-by: Sauradip Ghosh <[email protected]> * Format Fix Signed-off-by: Sauradip Ghosh <[email protected]> --------- Signed-off-by: Sauradip Ghosh <[email protected]>
hyperledger-labs · Oct 2, 2024 · 2574e99 · 2574e99
1 parent 62b4aa7
commit 2574e99
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 1 deletion.
diff --git a/src/frontend/components/chat-bottom-bar.tsx b/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>

diff --git a/src/frontend/components/history-data.ts b/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'
+	}
+];
diff --git a/src/frontend/components/sidebar-history.tsx b/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;
diff --git a/src/frontend/components/sidebar.tsx b/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>
 				</>
 			)}

diff --git a/src/frontend/tailwind.config.ts b/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))',