Skip to content

Commit 2574e99

Browse files
Sauradip07Sauradip07
authored
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]>
1 parent 62b4aa7 commit 2574e99

File tree

5 files changed

+146
-1
lines changed

5 files changed

+146
-1
lines changed

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,25 @@ const ChatBottomBar = ({ onSend }: Props) => {
2626
id: '-1'
2727
}
2828
);
29+
const [buttonClass, setButtonClass] = useState(
30+
'rounded-full flex-shrink-0 transition-opacity duration-200 opacity-50'
31+
);
2932
const { isMobile } = useWindowSize();
3033

3134
useEffect(() => {
3235
setIsMounted(true);
3336
}, [isMounted]);
3437

38+
useEffect(() => {
39+
setButtonClass(
40+
`rounded-full flex-shrink-0 transition-opacity duration-200 ${
41+
message.content.trim()
42+
? 'opacity-100'
43+
: 'opacity-50'
44+
}`
45+
);
46+
}, [message.content]);
47+
3548
if (!isMounted) {
3649
return null;
3750
}
@@ -111,9 +124,10 @@ const ChatBottomBar = ({ onSend }: Props) => {
111124
<Button
112125
size="icon"
113126
variant="default"
114-
className="rounded-full flex-shrink-0"
127+
className={buttonClass}
115128
type="button"
116129
onClick={handleSubmit}
130+
disabled={!message.content.trim()}
117131
>
118132
<ArrowUp />
119133
</Button>

‎src/frontend/components/history-data.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export const historyData = [
2+
{
3+
id: 1,
4+
title: 'What is hyperledger fabric'
5+
},
6+
{
7+
id: 2,
8+
title: 'How to install hyperledger fabric'
9+
},
10+
{
11+
id: 3,
12+
title: 'How to deploy hyperledger fabric'
13+
},
14+
{
15+
id: 4,
16+
title: 'How to run hyperledger fabric'
17+
},
18+
{
19+
id: 5,
20+
title: 'How to ensure data privacy'
21+
}
22+
];

‎src/frontend/components/sidebar-history.tsx

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
'use client';
2+
import React, {
3+
useEffect,
4+
useState
5+
} from 'react';
6+
import {
7+
DropdownMenuCheckboxItemProps,
8+
DropdownMenuItem
9+
} from '@radix-ui/react-dropdown-menu';
10+
import { Button } from '@/components/ui/button';
11+
import {
12+
DropdownMenu,
13+
DropdownMenuCheckboxItem,
14+
DropdownMenuContent,
15+
DropdownMenuSeparator,
16+
DropdownMenuTrigger
17+
} from '@/components/ui/dropdown-menu';
18+
import {
19+
EllipsisVertical,
20+
Pencil,
21+
Pin,
22+
Trash2
23+
} from 'lucide-react';
24+
25+
// Import the mock data
26+
import { historyData as mockHistoryData } from './history-data';
27+
28+
type Props = {};
29+
type Checked =
30+
DropdownMenuCheckboxItemProps['checked'];
31+
32+
const SidebarHistory = (props: Props) => {
33+
const [checkedItems, setCheckedItems] =
34+
useState<Record<number, Checked>>({});
35+
const [historyData, setHistoryData] = useState<
36+
{ id: number; title: string }[]
37+
>([]);
38+
39+
useEffect(() => {
40+
setHistoryData(mockHistoryData);
41+
}, []);
42+
43+
const handleCheckedChange = (id: number) => {
44+
setCheckedItems((prevCheckedItems) => ({
45+
...prevCheckedItems,
46+
[id]: !prevCheckedItems[id]
47+
}));
48+
};
49+
50+
return (
51+
<div className="mt-10">
52+
{historyData.map((item) => (
53+
<div
54+
key={item.id}
55+
className="flex justify-between mt-1 p-3 border-none rounded-lg font-semibold bg-slate-800 hover:bg-slate-800 cursor-pointer"
56+
>
57+
<span className="my-auto truncate overflow-hidden whitespace-nowrap">
58+
{item.title}
59+
</span>
60+
61+
<button>
62+
<DropdownMenu>
63+
<DropdownMenuTrigger asChild>
64+
<Button
65+
variant="outline"
66+
className="p-0 m-0 text-white bg-slate-800 hover:bg-slate-800 hover:text-white font-semibold border-none"
67+
>
68+
<EllipsisVertical />
69+
</Button>
70+
</DropdownMenuTrigger>
71+
<DropdownMenuContent className="w-56">
72+
<DropdownMenuSeparator />
73+
<DropdownMenuCheckboxItem
74+
checked={
75+
!!checkedItems[item.id]
76+
}
77+
onCheckedChange={() =>
78+
handleCheckedChange(item.id)
79+
}
80+
>
81+
<Pin className="mr-2" /> Pin
82+
</DropdownMenuCheckboxItem>
83+
<button className="p-[7px] flex flex-rowtext-left w-full hover:bg-hover-blue border-none hover:border-none ">
84+
<Pencil className="ml-6" />
85+
<span className="ml-3">
86+
Rename
87+
</span>
88+
</button>
89+
90+
<button className="p-[7px] flex flex-rowtext-left w-full hover:bg-hover-blue border-none hover:border-none ">
91+
<Trash2 className="ml-6" />
92+
<span className="ml-3">
93+
Delete
94+
</span>
95+
</button>
96+
</DropdownMenuContent>
97+
</DropdownMenu>
98+
</button>
99+
</div>
100+
))}
101+
</div>
102+
);
103+
};
104+
105+
export default SidebarHistory;

‎src/frontend/components/sidebar.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
SheetTitle,
1717
SheetTrigger
1818
} from '@/components/ui/sheet';
19+
import SidebarHistory from './sidebar-history';
1920

2021
type Props = {};
2122

@@ -93,6 +94,7 @@ const Sidebar = (props: Props) => {
9394
<FilePlus />
9495
</button>
9596
</div>
97+
<SidebarHistory />
9698
</SheetHeader>
9799
</SheetContent>
98100
</Sheet>
@@ -118,6 +120,7 @@ const Sidebar = (props: Props) => {
118120
isOpen={sidebarOpen}
119121
toggleSidebar={handleViewSidebar}
120122
/>
123+
<SidebarHistory />
121124
</aside>
122125
</>
123126
)}

‎src/frontend/tailwind.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const config = {
2424
extend: {
2525
colors: {
2626
border: 'hsl(var(--border))',
27+
'hover-blue': '#f1f5f9',
2728
input: 'hsl(var(--input))',
2829
ring: 'hsl(var(--ring))',
2930
background: 'hsl(var(--background))',

0 commit comments

Comments
 (0)