48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { IconLoader } from '@supabase/ui'
|
|
import { FC, RefObject } from 'react'
|
|
import { Message } from '../types'
|
|
|
|
interface Props {
|
|
messages: Message[]
|
|
chatboxRef: RefObject<any>
|
|
messagesInTransit: string[]
|
|
areMessagesFetched: boolean
|
|
}
|
|
|
|
const Chatbox: FC<Props> = ({ messages, chatboxRef, messagesInTransit, areMessagesFetched }) => {
|
|
return (
|
|
<div className="flex flex-col rounded-md break-all max-h-[235px] overflow-y-scroll">
|
|
<div
|
|
className="space-y-1 py-2 px-4 w-[400px]"
|
|
style={{ backgroundColor: 'rgba(0, 207, 144, 0.05)' }}
|
|
>
|
|
{!areMessagesFetched ? (
|
|
<div className="flex items-center space-x-2">
|
|
<IconLoader className="animate-spin text-scale-1200" size={14} />
|
|
<p className="text-sm text-scale-1100">Loading messages</p>
|
|
</div>
|
|
) : messages.length === 0 && messagesInTransit.length === 0 ? (
|
|
<div className="text-scale-1200 text-sm opacity-75">
|
|
<span>Type anything to start chatting 🥳</span>
|
|
</div>
|
|
) : (
|
|
<div />
|
|
)}
|
|
{messages.map((message) => (
|
|
<p key={message.id} className="text-scale-1200 text-sm whitespace-pre-line">
|
|
{message.message}
|
|
</p>
|
|
))}
|
|
{messagesInTransit.map((message, idx: number) => (
|
|
<p key={`transit-${idx}`} className="text-sm text-scale-1100">
|
|
{message}
|
|
</p>
|
|
))}
|
|
<div ref={chatboxRef} className="!mt-0" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Chatbox
|