From 95d6dad700d0c4670d73ae370903224a3261de6c Mon Sep 17 00:00:00 2001
From: Sauradip Ghosh <sauradip96ghosh@gmail.com>
Date: Mon, 19 Aug 2024 12:23:08 +0530
Subject: [PATCH] Add sidebar history and submit button ui change

Signed-off-by: Sauradip Ghosh <sauradip96ghosh@gmail.com>
---
 src/frontend/components/chat-bottom-bar.tsx |  5 +-
 src/frontend/components/historyData.ts      | 22 ++++++
 src/frontend/components/sidebar.tsx         |  3 +
 src/frontend/components/sidebarHistory.tsx  | 83 +++++++++++++++++++++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/components/historyData.ts
 create mode 100644 src/frontend/components/sidebarHistory.tsx

diff --git a/src/frontend/components/chat-bottom-bar.tsx b/src/frontend/components/chat-bottom-bar.tsx
index e2bdd0a..ab162c2 100644
--- a/src/frontend/components/chat-bottom-bar.tsx
+++ b/src/frontend/components/chat-bottom-bar.tsx
@@ -111,9 +111,12 @@ const ChatBottomBar = ({ onSend }: Props) => {
 				<Button
 					size="icon"
 					variant="default"
-					className="rounded-full flex-shrink-0"
+					className={`rounded-full flex-shrink-0 transition-opacity duration-200 ${
+						message.content.trim() ? 'opacity-100' : 'opacity-50'
+					}`}
 					type="button"
 					onClick={handleSubmit}
+					disabled={!message.content.trim()}
 				>
 					<ArrowUp />
 				</Button>
diff --git a/src/frontend/components/historyData.ts b/src/frontend/components/historyData.ts
new file mode 100644
index 0000000..2219718
--- /dev/null
+++ b/src/frontend/components/historyData.ts
@@ -0,0 +1,22 @@
+export const historyData = [
+    {
+      id: 1,
+      title: "What is hyperledge...",
+    },
+    {
+      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",
+    },
+  ];
\ No newline at end of file
diff --git a/src/frontend/components/sidebar.tsx b/src/frontend/components/sidebar.tsx
index 663f802..4b4be24 100644
--- 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 './sidebarHistory';
 
 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/components/sidebarHistory.tsx b/src/frontend/components/sidebarHistory.tsx
new file mode 100644
index 0000000..85473be
--- /dev/null
+++ b/src/frontend/components/sidebarHistory.tsx
@@ -0,0 +1,83 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { DropdownMenuCheckboxItemProps } 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 "./historyData";
+
+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],
+      }));
+   };
+
+   const truncateTitle = (title: string) => {
+      return title.length > 17 ? title.slice(0, 17) + "..." : title;
+   };
+
+   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">
+               <div className="my-auto overflow-hidden">
+                  {truncateTitle(item.title)}
+               </div>
+
+               <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>
+                        <DropdownMenuCheckboxItem>
+                           <Pencil className="mr-2" />
+                           Rename
+                        </DropdownMenuCheckboxItem>
+                        <DropdownMenuCheckboxItem>
+                           <Trash2 className="mr-2" /> Delete
+                        </DropdownMenuCheckboxItem>
+                     </DropdownMenuContent>
+                  </DropdownMenu>
+               </button>
+            </div>
+         ))}
+      </div>
+   );
+};
+
+export default SidebarHistory;