import React, { useState, useEffect, useRef } from "react";
import Message from "./Message";
import { motion } from "framer-motion";
import { useLocation } from "react-router-dom";
const ChatWindow = ({ activeChat }) => {
const { state } = useLocation();
const selectedModel = state?.selectedModel || "Model";
const dataSource = state?.dataSource || "local";
const fileContent = state?.fileContent || null;
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");
const [isTyping, setIsTyping] = useState(false);
const messagesEndRef = useRef(null);
// ✅ Welcome message based on data source
useEffect(() => {
const welcome =
dataSource === "s3"
? `☁️ Connected to AWS S3. ${selectedModel.toUpperCase()} is ready to analyze your data.`
: fileContent
? `📂 File uploaded successfully. ${selectedModel.toUpperCase()} is analyzing your data.`
: `👋 Welcome! ${selectedModel.toUpperCase()} is ready to assist.`;
setMessages([{ role: "assistant", text: welcome }]);
}, [dataSource, selectedModel, fileContent]);
// ✅ Scroll to bottom
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [messages, isTyping]);
const handleSend = (e) => {
e.preventDefault();
if (!input.trim()) return;
const userMessage = { role: "user", text: input };
const updated = [...messages, userMessage];
setMessages(updated);
setInput("");
setIsTyping(true);
setTimeout(() => {
const botReply = {
role: "assistant",
text: `🤖 ${selectedModel.toUpperCase()} processed your request: "${input}"`,
};
const newMsgs = [...updated, botReply];
setMessages(newMsgs);
setIsTyping(false);
}, 800);
};
return (
<div className="chat-window">
<div className="chat-header">
{/* <h4>Chat with {selectedModel.toUpperCase()}</h4> */}
<h3>Analyzing Data</h3>
</div>
<div className="chat-messages">
{messages.map((msg, i) => (
<motion.div
key={i}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2 }}
>
<Message role={msg.role} text={msg.text} />
</motion.div>
))}
{isTyping && (
<div className="message assistant">
<div className="message-content typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
</div>
)}
<div ref={messagesEndRef} />
</div>
<form onSubmit={handleSend} className="chat-input-area">
<input
type="text"
placeholder={`Ask about your ${dataSource} data...`}
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit">Send</button>
</form>
</div>
);
};
export default ChatWindow;