import { type UIMessage } from 'ai'
import * as Card from "~/components/ui/card"
import AnimateTextIn from '~/app/_components/Animated/AnimateIn';
import { UserMessage } from './UserMessage';
import { AssistantMessage } from './AssistantMessage';
import { ScrollArea } from '~/components/ui/scroll-area';
import { useTimeLine } from '~/app/_providers/GsapProvicer';
import {
  memo
  } from 'react';
const Messages = memo(({ messages}: { messages: UIMessage[]}) => {
  return (
    <ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
      {messages.map((message, i) => (
        <Card.AnimatedCard scrollOnly={true} tlId='chat' position={i * 0.2} key={i}>
          <Card.CardContent>
            {message.role == 'assistant' && <AssistantMessage message={message} />}
            {message.role == 'user' && <UserMessage message={message} />}
          </Card.CardContent>
        </Card.AnimatedCard>
      ))}
    </ScrollArea>)
})

export default Messages;