From 04e8d695565412ef02229551bf43ee5aa98c19fb Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 20 Oct 2025 18:07:37 -0300
Subject: [PATCH] updated user message and assistant message designs

---
 .../app/chat/components/assistant-message.tsx | 106 +++++++++---------
 .../src/app/chat/components/user-message.tsx  |  10 +-
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/frontend/src/app/chat/components/assistant-message.tsx b/frontend/src/app/chat/components/assistant-message.tsx
index 5f50606d..1fc19b41 100644
--- a/frontend/src/app/chat/components/assistant-message.tsx
+++ b/frontend/src/app/chat/components/assistant-message.tsx
@@ -1,63 +1,63 @@
-import { Bot, GitBranch } from "lucide-react";
+import { GitBranch } from "lucide-react";
+import DogIcon from "@/components/logo/dog-icon";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
+import type { FunctionCall } from "../types";
 import { FunctionCalls } from "./function-calls";
 import { Message } from "./message";
-import type { FunctionCall } from "../types";
-import DogIcon from "@/components/logo/dog-icon";
 
 interface AssistantMessageProps {
-  content: string;
-  functionCalls?: FunctionCall[];
-  messageIndex?: number;
-  expandedFunctionCalls: Set<string>;
-  onToggle: (functionCallId: string) => void;
-  isStreaming?: boolean;
-  showForkButton?: boolean;
-  onFork?: (e: React.MouseEvent) => void;
+	content: string;
+	functionCalls?: FunctionCall[];
+	messageIndex?: number;
+	expandedFunctionCalls: Set<string>;
+	onToggle: (functionCallId: string) => void;
+	isStreaming?: boolean;
+	showForkButton?: boolean;
+	onFork?: (e: React.MouseEvent) => void;
 }
 
 export function AssistantMessage({
-  content,
-  functionCalls = [],
-  messageIndex,
-  expandedFunctionCalls,
-  onToggle,
-  isStreaming = false,
-  showForkButton = false,
-  onFork,
+	content,
+	functionCalls = [],
+	messageIndex,
+	expandedFunctionCalls,
+	onToggle,
+	isStreaming = false,
+	showForkButton = false,
+	onFork,
 }: AssistantMessageProps) {
-  const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true";
-  const IconComponent = updatedOnboarding ? DogIcon : Bot;
-
-  return (
-    <Message
-      icon={
-        <div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none">
-          <IconComponent className="h-4 w-4 text-accent-foreground" />
-        </div>
-      }
-      actions={
-        showForkButton && onFork ? (
-          <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"
-          >
-            <GitBranch className="h-3 w-3" />
-          </button>
-        ) : undefined
-      }
-    >
-      <FunctionCalls
-        functionCalls={functionCalls}
-        messageIndex={messageIndex}
-        expandedFunctionCalls={expandedFunctionCalls}
-        onToggle={onToggle}
-      />
-      <MarkdownRenderer chatMessage={content} />
-      {isStreaming && (
-        <span className="inline-block w-2 h-4 bg-blue-400 ml-1 animate-pulse"></span>
-      )}
-    </Message>
-  );
+	return (
+		<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 text-accent-foreground" />
+				</div>
+			}
+			actions={
+				showForkButton && onFork ? (
+					<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"
+					>
+						<GitBranch className="h-3 w-3" />
+					</button>
+				) : undefined
+			}
+		>
+			<FunctionCalls
+				functionCalls={functionCalls}
+				messageIndex={messageIndex}
+				expandedFunctionCalls={expandedFunctionCalls}
+				onToggle={onToggle}
+			/>
+			<MarkdownRenderer
+				className="text-foreground text-sm py-1.5"
+				chatMessage={content}
+			/>
+			{isStreaming && (
+				<span className="inline-block w-1 h-4 bg-primary ml-1 animate-pulse" />
+			)}
+		</Message>
+	);
 }
diff --git a/frontend/src/app/chat/components/user-message.tsx b/frontend/src/app/chat/components/user-message.tsx
index 882b3416..68bf465e 100644
--- a/frontend/src/app/chat/components/user-message.tsx
+++ b/frontend/src/app/chat/components/user-message.tsx
@@ -13,9 +13,9 @@ export function UserMessage({ content }: UserMessageProps) {
   return (
     <Message
       icon={
-        <Avatar className="w-8 h-8 flex-shrink-0 select-none">
+        <Avatar className="w-8 h-8 rounded-lg flex-shrink-0 select-none">
           <AvatarImage draggable={false} src={user?.picture} alt={user?.name} />
-          <AvatarFallback className="text-sm bg-primary/20 text-primary">
+          <AvatarFallback className="text-sm bg-accent/20 text-primary rounded-lg">
             {user?.name ? (
               user.name.charAt(0).toUpperCase()
             ) : (
@@ -25,9 +25,9 @@ export function UserMessage({ content }: UserMessageProps) {
         </Avatar>
       }
     >
-      <p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
-        {content}
-      </p>
+          <p className="text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere">
+            {content}
+          </p>
     </Message>
   );
 }