import { useEffect, useRef, useState } from 'react';
const ChatWidget = ({
apiKey,
theme = 'dark',
position = 'bottom-right',
welcomeMessage = "Hi, I’m Aikore. How can I support you today?",
endpoint = 'https://aikoai.tiiny.site/api/chat',
}) => {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const messagesEndRef = useRef(null);
useEffect(() => {
console.log('Initializing with welcome message:', welcomeMessage);
if (welcomeMessage) {
setMessages([{ text: welcomeMessage, from: 'bot' }]);
}
}, [welcomeMessage]);
useEffect(() => {
console.log('Messages updated:', messages);
if (messagesEndRef.current) {
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, [messages]);
const sendMessage = async () => {
const trimmedInput = input.trim();
if (!trimmedInput) {
console.log('Input is empty, skipping send');
return;
}
const userMsg = { text: trimmedInput, from: 'user' };
console.log('Sending message:', userMsg);
setMessages((prev) => [...prev, userMsg]);
setInput('');
try {
console.log('Sending fetch request to endpoint:', endpoint);
const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...(apiKey && { Authorization: `Bearer ${apiKey}` }),
},
body: JSON.stringify({ message: trimmedInput }),
});
console.log('API response status:', response.status);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log('API response data:', data);
const replyText = data.reply || 'Error: No response.';
setMessages((prev) => [...prev, { text: replyText, from: 'bot' }]);
} catch (err) {
console.error('Error during fetch:', err);
setMessages((prev) => [...prev, { text: '⚠️ Unable to connect.', from: 'bot' }]);
}
};
return (
Aikore Assistant
{messages.map((msg, index) => (
))}
{
console.log('Input changed:', e.target.value);
setInput(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
console.log('Enter key pressed');
sendMessage();
}
}}
className="flex-1 px-3 py-2 text-sm text-black rounded-l-xl focus:outline-none"
placeholder="Type your message..."
/>
);
};
export default ChatWidget;
No comments:
Post a Comment