66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import type { UiMessage } from '@/contexts';
|
|
import { MessageList } from '@/components/ui/message-list';
|
|
import { MessageInput } from '@/components/ui/message-input';
|
|
import { convertMessagesToShadcn } from './chatbotKitAdapter';
|
|
import { memo, useRef } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface RoomChatInterfaceProps {
|
|
messages: UiMessage[];
|
|
input: string;
|
|
onInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
onSubmit: (e: React.FormEvent) => void;
|
|
isGenerating?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const RoomChatInterface = memo(function RoomChatInterface({
|
|
messages,
|
|
input,
|
|
onInputChange,
|
|
onSubmit,
|
|
isGenerating = false,
|
|
className,
|
|
}: RoomChatInterfaceProps) {
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
const shadcnMessages = convertMessagesToShadcn(messages);
|
|
|
|
const lastMessage = messages[messages.length - 1];
|
|
const isTyping = lastMessage?.sender_type === 'user' && isGenerating;
|
|
|
|
return (
|
|
<div className={cn('flex h-full flex-col', className)}>
|
|
<div className="flex-1 overflow-y-auto px-4 py-4">
|
|
{messages.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="rounded-lg border border-dashed border-border/70 bg-muted/20 px-6 py-8 text-center">
|
|
<p className="text-sm font-medium text-foreground">No messages yet</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">Start a conversation below</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<MessageList
|
|
messages={shadcnMessages}
|
|
showTimeStamps={true}
|
|
isTyping={isTyping}
|
|
/>
|
|
)}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
<div className="border-t border-border bg-background p-4">
|
|
<form onSubmit={onSubmit}>
|
|
<MessageInput
|
|
value={input}
|
|
onChange={onInputChange}
|
|
placeholder="Type a message..."
|
|
isGenerating={isGenerating}
|
|
allowAttachments={false}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|