65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { Button } from '../ui/button';
|
|
import { Send } from 'lucide-react';
|
|
|
|
interface Message {
|
|
role: 'user' | 'assistant';
|
|
content: string;
|
|
}
|
|
|
|
export default function AIChat() {
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
|
const [input, setInput] = useState('');
|
|
const chatContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (chatContainerRef.current) {
|
|
chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
|
|
}
|
|
}, [messages]);
|
|
|
|
const handleSend = async () => {
|
|
if (input.trim() === '') return;
|
|
|
|
const newMessage: Message = { role: 'user', content: input };
|
|
setMessages(prev => [...prev, newMessage]);
|
|
setInput('');
|
|
|
|
// TODO: Implement actual API call to LLM here
|
|
// For now, we'll just simulate a response
|
|
setTimeout(() => {
|
|
const assistantMessage: Message = { role: 'assistant', content: 'This is a simulated response from the AI.' };
|
|
setMessages(prev => [...prev, assistantMessage]);
|
|
}, 1000);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div ref={chatContainerRef} className="flex-grow overflow-y-auto p-4 space-y-4">
|
|
{messages.map((message, index) => (
|
|
<div key={index} className={`${message.role === 'user' ? 'text-right' : 'text-left'}`}>
|
|
<div className={`inline-block p-2 rounded-lg ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'}`}>
|
|
{message.content}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="p-4 border-t">
|
|
<div className="flex space-x-2">
|
|
<input
|
|
type="text"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && handleSend()}
|
|
className="flex-grow p-2 border rounded-lg"
|
|
placeholder="Type your message..."
|
|
/>
|
|
<Button onClick={handleSend}>
|
|
<Send className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|