src/components/ChatWindow.jsx

import { useState } from "react";
import { sendMessageToBot } from "../api";
import MessageBubble from "./MessageBubble";
import SuggestedQuestions from "./SuggestedQuestions";
import CitationPanel from "./CitationPanel";

export default function ChatWindow() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [citations, setCitations] = useState([]);

  async function handleSend() {
    if (!input.trim()) return;
    const userMsg = { role: "user", content: input };
    setMessages(prev => [...prev, userMsg]);
    setInput("");
    setLoading(true);

    const botResponse = await sendMessageToBot(input, messages);
    setMessages(prev => [...prev, { role: "bot", content: botResponse.answer }]);
    setCitations(botResponse.citations ?? []);
    setLoading(false);
  }

  return (
    <div className="chat-window">

      <div className="chat-body">

        {messages.map((m, i) => <MessageBubble key={i} msg={m} />)}

        {loading && <div className="typing">✍️ HR Assistant is typing...</div>}

      </div>



      <SuggestedQuestions onSelect={txt => setInput(txt)} />



      <div className="chat-input">

        <input

          value={input}

          placeholder="Ask something about HR policy..."

          onChange={e => setInput(e.target.value)}

          onKeyDown={e => e.key === "Enter" && handleSend()}

        />

        <button onClick={handleSend}>Send</button>

      </div>



      <CitationPanel citations={citations} />

    </div>
  );
}