import { type ChatStatus, type UIMessage } from 'ai'
import * as Card from "~/components/ui/card"
import { UserMessage } from './UserMessage';
import { AssistantMessage } from './AssistantMessage';
import { ScrollArea } from '~/components/ui/scroll-area';
import { memo } from 'react';
const Messages = memo(({messages,status}: { messages: UIMessage[],status:ChatStatus}) => {
  return (
    <ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
      {messages.map((message, i) => (
        <Card.AnimatedCard scrollOnly={true} key={i}>
          <Card.CardContent>
            {message.role == 'assistant' && <AssistantMessage message={message} />}
            {message.role == 'user' && <UserMessage message={message} />}
          </Card.CardContent>
        </Card.AnimatedCard>
      ))}
      {status == 'submitted' &&
        <Card.AnimatedCard scrollOnly={true}>
          <Card.CardContent>
            <AssistantMessage message={{
              id:"",
              role:"assistant",
              parts:[{
                type:'text',
                text:'Thinking ...'
              }]
            }}/>
          </Card.CardContent>
        </Card.AnimatedCard>

      }
    </ScrollArea>)
})

export default Messages;