Adds animate and delay props to messages
This commit is contained in:
parent
e76f7300ba
commit
092ec306d5
2 changed files with 13 additions and 5 deletions
|
|
@ -17,6 +17,8 @@ interface AssistantMessageProps {
|
|||
showForkButton?: boolean;
|
||||
onFork?: (e: React.MouseEvent) => void;
|
||||
isCompleted?: boolean;
|
||||
animate?: boolean;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export function AssistantMessage({
|
||||
|
|
@ -29,12 +31,15 @@ export function AssistantMessage({
|
|||
showForkButton = false,
|
||||
onFork,
|
||||
isCompleted = false,
|
||||
animate = true,
|
||||
delay = 0.2,
|
||||
}: AssistantMessageProps) {
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
initial={animate ? { opacity: 0, y: -20 } : { opacity: 1, y: 0 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.2, ease: "easeOut" }}
|
||||
transition={animate ? { duration: 0.4, delay: delay, ease: "easeOut" } : { duration: 0 }}
|
||||
className={isCompleted ? "opacity-50" : ""}
|
||||
>
|
||||
<Message
|
||||
|
|
|
|||
|
|
@ -8,16 +8,19 @@ import { Message } from "./message";
|
|||
interface UserMessageProps {
|
||||
content: string;
|
||||
isCompleted?: boolean;
|
||||
animate?: boolean;
|
||||
}
|
||||
|
||||
export function UserMessage({ content, isCompleted }: UserMessageProps) {
|
||||
export function UserMessage({ content, isCompleted, animate = true }: UserMessageProps) {
|
||||
const { user } = useAuth();
|
||||
|
||||
console.log("animate", animate);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
initial={animate ? { opacity: 0, y: -20 } : { opacity: 1, y: 0 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.2, ease: "easeOut" }}
|
||||
transition={animate ? { duration: 0.4, delay: 0.2, ease: "easeOut" } : { duration: 0 }}
|
||||
className={isCompleted ? "opacity-50" : ""}
|
||||
>
|
||||
<Message
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue