From cc46f3035956effa0e639aa88a7e0be116c20305 Mon Sep 17 00:00:00 2001 From: Sauradip Ghosh Date: Mon, 19 Aug 2024 12:23:08 +0530 Subject: [PATCH 1/8] Add sidebar history and submit button ui change Signed-off-by: Sauradip Ghosh --- 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) => { 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) => { + @@ -118,6 +120,7 @@ const Sidebar = (props: Props) => { isOpen={sidebarOpen} toggleSidebar={handleViewSidebar} /> + )} 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>({}); + 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 ( +
+ {historyData.map((item) => ( +
+
+ {truncateTitle(item.title)} +
+ + + + + + handleCheckedChange(item.id)}> + Pin + + + + Rename + + + Delete + + + + +
+ ))} +
+ ); +}; + +export default SidebarHistory; From 0dcb558782e9530f31efc76686a09dd7893f8ed7 Mon Sep 17 00:00:00 2001 From: Sauradip Ghosh Date: Mon, 19 Aug 2024 12:32:00 +0530 Subject: [PATCH 2/8] Format Fix Signed-off-by: Sauradip Ghosh --- src/frontend/components/chat-bottom-bar.tsx | 4 +- src/frontend/components/historyData.ts | 42 +++--- src/frontend/components/sidebarHistory.tsx | 156 +++++++++++--------- 3 files changed, 112 insertions(+), 90 deletions(-) diff --git a/src/frontend/components/chat-bottom-bar.tsx b/src/frontend/components/chat-bottom-bar.tsx index ab162c2..c986e18 100644 --- a/src/frontend/components/chat-bottom-bar.tsx +++ b/src/frontend/components/chat-bottom-bar.tsx @@ -112,7 +112,9 @@ const ChatBottomBar = ({ onSend }: Props) => { size="icon" variant="default" className={`rounded-full flex-shrink-0 transition-opacity duration-200 ${ - message.content.trim() ? 'opacity-100' : 'opacity-50' + message.content.trim() + ? 'opacity-100' + : 'opacity-50' }`} type="button" onClick={handleSubmit} diff --git a/src/frontend/components/historyData.ts b/src/frontend/components/historyData.ts index 2219718..60a118b 100644 --- a/src/frontend/components/historyData.ts +++ b/src/frontend/components/historyData.ts @@ -1,22 +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 + { + 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' + } +]; diff --git a/src/frontend/components/sidebarHistory.tsx b/src/frontend/components/sidebarHistory.tsx index 85473be..fcccf25 100644 --- a/src/frontend/components/sidebarHistory.tsx +++ b/src/frontend/components/sidebarHistory.tsx @@ -1,83 +1,103 @@ -"use client"; -import React, { useEffect, useState } from "react"; -import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"; -import { Button } from "@/components/ui/button"; +'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"; + 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"; +import { historyData as mockHistoryData } from './historyData'; type Props = {}; -type Checked = DropdownMenuCheckboxItemProps["checked"]; +type Checked = + DropdownMenuCheckboxItemProps['checked']; const SidebarHistory = (props: Props) => { - const [checkedItems, setCheckedItems] = useState>({}); - const [historyData, setHistoryData] = useState< - { id: number; title: string }[] - >([]); + const [checkedItems, setCheckedItems] = + useState>({}); + const [historyData, setHistoryData] = useState< + { id: number; title: string }[] + >([]); - useEffect(() => { - setHistoryData(mockHistoryData); - }, []); + useEffect(() => { + setHistoryData(mockHistoryData); + }, []); - const handleCheckedChange = (id: number) => { - setCheckedItems((prevCheckedItems) => ({ - ...prevCheckedItems, - [id]: !prevCheckedItems[id], - })); - }; + const handleCheckedChange = (id: number) => { + setCheckedItems((prevCheckedItems) => ({ + ...prevCheckedItems, + [id]: !prevCheckedItems[id] + })); + }; - const truncateTitle = (title: string) => { - return title.length > 17 ? title.slice(0, 17) + "..." : title; - }; + const truncateTitle = (title: string) => { + return title.length > 17 + ? title.slice(0, 17) + '...' + : title; + }; - return ( -
- {historyData.map((item) => ( -
-
- {truncateTitle(item.title)} -
+ return ( +
+ {historyData.map((item) => ( +
+
+ {truncateTitle(item.title)} +
- - - - - handleCheckedChange(item.id)}> - Pin - - - - Rename - - - Delete - - - - -
- ))} -
- ); + + + + + + handleCheckedChange(item.id) + } + > + Pin + + + + Rename + + + {' '} + Delete + + + + +
+ ))} +
+ ); }; export default SidebarHistory; From db8b2616421f2d599a40c6b2974cef9fa27ce858 Mon Sep 17 00:00:00 2001 From: Sauradip Ghosh Date: Thu, 29 Aug 2024 12:22:56 +0530 Subject: [PATCH 3/8] Span and Overflow added Signed-off-by: Sauradip Ghosh --- src/frontend/components/sidebarHistory.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/components/sidebarHistory.tsx b/src/frontend/components/sidebarHistory.tsx index fcccf25..1a0ca2b 100644 --- a/src/frontend/components/sidebarHistory.tsx +++ b/src/frontend/components/sidebarHistory.tsx @@ -57,9 +57,9 @@ const SidebarHistory = (props: Props) => { 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" > -
+ {truncateTitle(item.title)} -
+ + + + {/* {' '} Delete - + */} diff --git a/src/frontend/tailwind.config.ts b/src/frontend/tailwind.config.ts index b6c1c74..56fafcf 100644 --- 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))', From 39b480b5f659de09aaff01858a04f4d030a3a081 Mon Sep 17 00:00:00 2001 From: Sauradip Ghosh Date: Thu, 29 Aug 2024 13:09:21 +0530 Subject: [PATCH 6/8] button's class a state variable added Signed-off-by: Sauradip Ghosh --- src/frontend/components/chat-bottom-bar.tsx | 19 +++++++++++---- src/frontend/components/sidebar-history.tsx | 27 +++++++++------------ 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/frontend/components/chat-bottom-bar.tsx b/src/frontend/components/chat-bottom-bar.tsx index c986e18..d944fd5 100644 --- 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,11 +124,7 @@ const ChatBottomBar = ({ onSend }: Props) => { - - {/* - {' '} - Delete - */} From 2569896d974cda3999a06a459e7926c22bd4838a Mon Sep 17 00:00:00 2001 From: Sauradip Ghosh Date: Mon, 9 Sep 2024 17:50:56 +0530 Subject: [PATCH 7/8] Remove truncateTitle Signed-off-by: Sauradip Ghosh --- src/frontend/components/history-data.ts | 2 +- src/frontend/components/sidebar-history.tsx | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/frontend/components/history-data.ts b/src/frontend/components/history-data.ts index 60a118b..8b0850a 100644 --- a/src/frontend/components/history-data.ts +++ b/src/frontend/components/history-data.ts @@ -1,7 +1,7 @@ export const historyData = [ { id: 1, - title: 'What is hyperledge...' + title: 'What is hyperledger fabric' }, { id: 2, diff --git a/src/frontend/components/sidebar-history.tsx b/src/frontend/components/sidebar-history.tsx index 24ddd02..124a958 100644 --- a/src/frontend/components/sidebar-history.tsx +++ b/src/frontend/components/sidebar-history.tsx @@ -47,11 +47,7 @@ const SidebarHistory = (props: Props) => { })); }; - const truncateTitle = (title: string) => { - return title.length > 17 - ? title.slice(0, 17) + '...' - : title; - }; + return (
@@ -61,7 +57,7 @@ const SidebarHistory = (props: Props) => { className="flex justify-between mt-1 p-3 border-none rounded-lg font-semibold bg-slate-800 hover:bg-slate-800 cursor-pointer" > - {truncateTitle(item.title)} + {item.title}