added fade in and color transition

frontend/src/app/chat/components/assistant-message.tsx

@@ -1,4 +1,5 @@
 import { GitBranch } from "lucide-react";
+import { motion } from "motion/react";
 import DogIcon from "@/components/logo/dog-icon";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { cn } from "@/lib/utils";
@@ -30,11 +31,17 @@ export function AssistantMessage({
 	isCompleted = false,
 }: AssistantMessageProps) {
 	return (
+		<motion.div
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.4, delay: 0.2, ease: "easeOut" }}
+			className={isCompleted ? "opacity-50" : ""}
+		>
 			<Message
 				icon={
 					<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none">
 						<DogIcon
-						className="h-6 w-6"
+							className="h-6 w-6 transition-colors duration-300"
 							disabled={isCompleted}
 						/>
 					</div>
@@ -42,6 +49,7 @@ export function AssistantMessage({
 				actions={
 					showForkButton && onFork ? (
 						<button
+							type="button"
 							onClick={onFork}
 							className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-accent rounded text-muted-foreground hover:text-foreground"
 							title="Fork conversation from here"
@@ -59,7 +67,7 @@ export function AssistantMessage({
 				/>
 				<div className="relative">
 					<MarkdownRenderer
-					className={cn("text-sm py-1.5", isCompleted ? "text-placeholder-foreground" : "text-foreground")}
+						className={cn("text-sm py-1.5 transition-colors duration-300", isCompleted ? "text-placeholder-foreground" : "text-foreground")}
 						chatMessage={
 							isStreaming
 								? content +
@@ -69,5 +77,6 @@ export function AssistantMessage({
 					/>
 				</div>
 			</Message>
+		</motion.div>
 	);
 }

frontend/src/app/chat/components/user-message.tsx

@@ -1,4 +1,5 @@
 import { User } from "lucide-react";
+import { motion } from "motion/react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useAuth } from "@/contexts/auth-context";
 import { cn } from "@/lib/utils";
@@ -13,6 +14,12 @@ export function UserMessage({ content, isCompleted }: UserMessageProps) {
 	const { user } = useAuth();
 
 	return (
+		<motion.div
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.4, delay: 0.2, ease: "easeOut" }}
+			className={isCompleted ? "opacity-50" : ""}
+		>
 			<Message
 				icon={
 					<Avatar className="w-8 h-8 rounded-lg flex-shrink-0 select-none">
@@ -20,7 +27,7 @@ export function UserMessage({ content, isCompleted }: UserMessageProps) {
 						<AvatarFallback
 							className={cn(
 								isCompleted ? "text-placeholder-foreground" : "text-primary",
-							"text-sm bg-accent/20 rounded-lg",
+								"text-sm bg-accent/20 rounded-lg transition-colors duration-300",
 							)}
 						>
 							{user?.name ? user.name.charAt(0).toUpperCase() : <User className="h-4 w-4" />}
@@ -30,12 +37,13 @@ export function UserMessage({ content, isCompleted }: UserMessageProps) {
 			>
 				<p
 					className={cn(
-					"text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere",
+						"text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere transition-colors duration-300",
 						isCompleted ? "text-placeholder-foreground" : "text-foreground",
 					)}
 				>
 					{content}
 				</p>
 			</Message>
+		</motion.div>
 	);
 }

frontend/src/app/new-onboarding/components/onboarding-content.tsx

@@ -45,10 +45,12 @@ export function OnboardingContent({
 	const handleNudgeClick = async (nudge: string) => {
 		setSelectedNudge(nudge);
 		setAssistantMessage(null);
+		setTimeout(async () => {
 		await sendMessage({
 				prompt: nudge,
 				previousResponseId: responseId || undefined,
 			});
+		}, 1500);
 	};
 
 	// Determine which message to show (streaming takes precedence)