File size: 2,752 Bytes
fee5554 | 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | import { useEffect, useRef, useState } from "react";
import ChatHeader from "./ChatHeader";
import MessageBubble from "./MessageBubble";
import QuickActions from "./QuickActions";
import ChatInput from "./ChatInput";
interface Message {
id: string;
text: string;
isUser: boolean;
timestamp: string;
quickActions?: string[];
}
const ChatWindow = () => {
const [messages, setMessages] = useState<Message[]>([
{
id: "1",
text: "Hello! I'm your AI assistant. How can I help you today?",
isUser: false,
timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
quickActions: ["Get started", "Learn more", "Contact support"]
}
]);
const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
scrollToBottom();
}, [messages]);
const handleSendMessage = (text: string) => {
const newMessage: Message = {
id: Date.now().toString(),
text,
isUser: true,
timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
};
setMessages(prev => [...prev, newMessage]);
// Simulate bot response
setTimeout(() => {
const botResponse: Message = {
id: (Date.now() + 1).toString(),
text: "Thank you for your message! I'm processing your request and will provide a helpful response shortly.",
isUser: false,
timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
quickActions: ["Tell me more", "That's helpful", "Start over"]
};
setMessages(prev => [...prev, botResponse]);
}, 1000);
};
const handleQuickAction = (action: string) => {
handleSendMessage(action);
};
return (
<div className="flex flex-col h-screen max-w-4xl mx-auto bg-background">
<ChatHeader />
<div className="flex-1 bg-chat-bg overflow-y-auto chat-scrollbar">
<div className="p-4">
{messages.map((message, index) => (
<div key={message.id}>
<MessageBubble
message={message.text}
isUser={message.isUser}
timestamp={message.timestamp}
/>
{message.quickActions && index === messages.length - 1 && (
<QuickActions
actions={message.quickActions}
onActionClick={handleQuickAction}
/>
)}
</div>
))}
<div ref={messagesEndRef} />
</div>
</div>
<ChatInput onSendMessage={handleSendMessage} />
</div>
);
};
export default ChatWindow; |