button's class a state variable added

Signed-off-by: Sauradip Ghosh <[email protected]>
hyperledger-labs · Aug 29, 2024 · 39b480b · 39b480b
1 parent 65637a0
commit 39b480b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
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,11 +124,7 @@ const ChatBottomBar = ({ onSend }: Props) => {
 				<Button
 					size="icon"
 					variant="default"
-					className={`rounded-full flex-shrink-0 transition-opacity duration-200 ${
-						message.content.trim()
-							? 'opacity-100'
-							: 'opacity-50'
-					}`}
+					className={buttonClass}
 					type="button"
 					onClick={handleSubmit}
 					disabled={!message.content.trim()}

diff --git a/src/frontend/components/sidebar-history.tsx b/src/frontend/components/sidebar-history.tsx
@@ -3,7 +3,10 @@ import React, {
 	useEffect,
 	useState
 } from 'react';
-import { DropdownMenuCheckboxItemProps, DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
+import {
+	DropdownMenuCheckboxItemProps,
+	DropdownMenuItem
+} from '@radix-ui/react-dropdown-menu';
 import { Button } from '@/components/ui/button';
 import {
 	DropdownMenu,
@@ -83,27 +86,19 @@ const SidebarHistory = (props: Props) => {
 								>
 									<Pin className="mr-2" /> Pin
 								</DropdownMenuCheckboxItem>
-								{/* <DropdownMenuCheckboxItem>
-									<Pencil className="mr-2" />{' '}
-									Rename
-								</DropdownMenuCheckboxItem> */}
-								<button className='p-[7px] flex flex-rowtext-left w-full hover:bg-hover-blue border-none hover:border-none '>
+								<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 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
+								<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>
-								{/* <DropdownMenuCheckboxItem>
-									<Trash2 className="mr-2" />{' '}
-									Delete
-								</DropdownMenuCheckboxItem> */}
 							</DropdownMenuContent>
 						</DropdownMenu>
 					</button>