Create ChatSupport.jsx

src/components/ChatSupport.jsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useRef } from 'react';
+import axios from 'axios';
+import './ChatSupport.css'; // Ensure to create this CSS file for styling
+const ChatSupport = () => {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const chatEndRef = useRef(null);
+  // Function to scroll to the latest message
+  const scrollToBottom = () => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+  // Function to send a message
+  const sendMessage = async () => {
+    if (input.trim() === '') return;
+    const userMessage = { sender: 'user', text: input };
+    setMessages([...messages, userMessage]);
+    setInput('');
+    setLoading(true);
+    try {
+      const response = await axios.post('/api/chat', { message: input });
+      const botMessage = { sender: 'bot', text: response.data.reply };
+      setMessages((prevMessages) => [...prevMessages, botMessage]);
+    } catch (error) {
+      const errorMessage = { sender: 'bot', text: 'Error: Could not send message. Please try again later.' };
+      setMessages((prevMessages) => [...prevMessages, errorMessage]);
+    } finally {
+      setLoading(false);
+      scrollToBottom();
+    }
+  };
+  // Handle pressing the Enter key
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      sendMessage();
+    }
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  return (
+    <div className="chat-support">
+      <div className="chat-header">
+        <h3>Chat Support</h3>
+      </div>
+      <div className="chat-messages">
+        {messages.map((message, index) => (
+          <div
+            key={index}
+            className={`chat-message ${message.sender === 'user' ? 'user-message' : 'bot-message'}`}
+          >
+            {message.text}
+          </div>
+        ))}
+        <div ref={chatEndRef} />
+      </div>
+      <div className="chat-input">
+        <input
+          type="text"
+          placeholder="Type your message..."
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyPress={handleKeyPress}
+        />
+        <button onClick={sendMessage} disabled={loading}>
+          {loading ? 'Sending...' : 'Send'}
+        </button>
+      </div>
+    </div>
+  );
+};
+export default ChatSupport;