added isCompleted to assistant and user messages

This commit is contained in:
Lucas Oliveira 2025-10-21 15:46:43 -03:00 committed by Mike Fortman
parent a2b97a4e78
commit 5e97fecd3c
2 changed files with 39 additions and 25 deletions

View file

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

View file

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