37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
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;
|