File size: 2,440 Bytes
e2eff86 |
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 |
import React, { useState, useEffect, useRef } from 'react';
import { useChatbot } from '../../contexts/ChatbotContext';
import './ChatbotInterface.css';
const ChatbotInterface = ({ isVisible, onClose }) => {
const { messages, isLoading, error, sendMessage } = useChatbot();
const [inputValue, setInputValue] = useState('');
const messagesEndRef = useRef(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
useEffect(() => {
scrollToBottom();
}, [messages]);
const handleSend = () => {
if (!inputValue.trim() || isLoading) return;
sendMessage(inputValue);
setInputValue('');
};
const handleKeyPress = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
};
if (!isVisible) return null;
return (
<div className="chatbot-container">
<div className="chatbot-header">
<h3 className="chatbot-title">AI Assistant</h3>
<button className="chatbot-close" onClick={onClose}>×</button>
</div>
<div className="chatbot-messages">
{messages.map((message) => (
<div
key={message.id}
className={`message ${message.sender === 'user' ? 'user-message' : 'bot-message'}`}
>
<div className="message-text">{message.text}</div>
</div>
))}
{isLoading && (
<div className="message bot-message">
<div className="message-text">
<div className="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
)}
{error && (
<div className="message bot-message">
<div className="message-text error">
{error}
</div>
</div>
)}
<div ref={messagesEndRef} />
</div>
<div className="chatbot-input">
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={handleKeyPress}
placeholder="Ask a question about the book..."
disabled={isLoading}
/>
<button onClick={handleSend} disabled={isLoading}>
{isLoading ? 'Sending...' : 'Send'}
</button>
</div>
</div>
);
};
export default ChatbotInterface; |