Spaces:
Sleeping
Sleeping
File size: 1,489 Bytes
edd2230 42501f7 3ba9c0c 42501f7 3ba9c0c 42501f7 3ba9c0c 42501f7 3ba9c0c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
'use client';
import { type Message } from 'ai';
import { useEffect, useState } from 'react';
import { Separator } from '@/components/ui/separator';
import { ChatMessage } from '@/components/chat-message';
export interface ChatList {
messages: Message[];
isLoading: boolean;
}
export function ChatList({ messages, isLoading }: ChatList) {
const [loadingDots, setLoadingDots] = useState('');
useEffect(() => {
let loadingInterval: NodeJS.Timeout;
if (isLoading) {
loadingInterval = setInterval(() => {
setLoadingDots(prevMessage => {
switch (prevMessage) {
case '':
return '.';
case '.':
return '..';
case '..':
return '...';
case '...':
return '';
default:
return '';
}
});
}, 500);
}
return () => {
clearInterval(loadingInterval);
};
}, [isLoading]);
if (!messages.length) {
return null;
}
const assistantLoadingMessage: Message = {
id: 'loading',
content: loadingDots,
role: 'assistant',
};
const messageWithLoading =
isLoading && messages[messages.length - 1].role !== 'assistant'
? [...messages, assistantLoadingMessage]
: messages;
return (
<div className="relative mx-auto max-w-2xl px-8 pr-12">
{messageWithLoading.map((message, index) => (
<div key={index}>
<ChatMessage message={message} />
{index < messageWithLoading.length - 1 && (
<Separator className="my-4 md:my-8" />
)}
</div>
))}
</div>
);
}
|