added isCompleted to assistant and user messages
This commit is contained in:
parent
a2b97a4e78
commit
5e97fecd3c
2 changed files with 39 additions and 25 deletions
|
|
@ -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 +
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue