added isCompleted to assistant and user messages

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

@@ -1,6 +1,7 @@
 import { GitBranch } from "lucide-react";
 import DogIcon from "@/components/logo/dog-icon";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
+import { cn } from "@/lib/utils";
 import type { FunctionCall } from "../types";
 import { FunctionCalls } from "./function-calls";
 import { Message } from "./message";
@@ -14,6 +15,7 @@ interface AssistantMessageProps {
 	isStreaming?: boolean;
 	showForkButton?: boolean;
 	onFork?: (e: React.MouseEvent) => void;
+	isCompleted?: boolean;
 }
 
 export function AssistantMessage({
@@ -25,12 +27,16 @@ export function AssistantMessage({
 	isStreaming = false,
 	showForkButton = false,
 	onFork,
+	isCompleted = false,
 }: AssistantMessageProps) {
 	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" />
+					<DogIcon
+						className="h-6 w-6"
+						disabled={isCompleted}
+					/>
 				</div>
 			}
 			actions={
@@ -53,7 +59,7 @@ export function AssistantMessage({
 			/>
 			<div className="relative">
 				<MarkdownRenderer
-					className="text-foreground text-sm py-1.5"
+					className={cn("text-sm py-1.5", isCompleted ? "text-placeholder-foreground" : "text-foreground")}
 					chatMessage={
 						isStreaming
 							? content +

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

@@ -1,33 +1,41 @@
 import { User } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useAuth } from "@/contexts/auth-context";
+import { cn } from "@/lib/utils";
 import { Message } from "./message";
 
 interface UserMessageProps {
-  content: string;
+	content: string;
+	isCompleted?: boolean;
 }
 
-export function UserMessage({ content }: UserMessageProps) {
-  const { user } = useAuth();
+export function UserMessage({ content, isCompleted }: UserMessageProps) {
+	const { user } = useAuth();
 
-  return (
-    <Message
-      icon={
-        <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-accent/20 text-primary rounded-lg">
-            {user?.name ? (
-              user.name.charAt(0).toUpperCase()
-            ) : (
-              <User className="h-4 w-4" />
-            )}
-          </AvatarFallback>
-        </Avatar>
-      }
-    >
-          <p className="text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere">
-            {content}
-          </p>
-    </Message>
-  );
+	return (
+		<Message
+			icon={
+				<Avatar className="w-8 h-8 rounded-lg flex-shrink-0 select-none">
+					<AvatarImage draggable={false} src={user?.picture} alt={user?.name} />
+					<AvatarFallback
+						className={cn(
+							isCompleted ? "text-placeholder-foreground" : "text-primary",
+							"text-sm bg-accent/20 rounded-lg",
+						)}
+					>
+						{user?.name ? user.name.charAt(0).toUpperCase() : <User className="h-4 w-4" />}
+					</AvatarFallback>
+				</Avatar>
+			}
+		>
+			<p
+				className={cn(
+					"text-foreground text-sm py-1.5 whitespace-pre-wrap break-words overflow-wrap-anywhere",
+					isCompleted ? "text-placeholder-foreground" : "text-foreground",
+				)}
+			>
+				{content}
+			</p>
+		</Message>
+	);
 }