Chatbot - realestateexplorer/relatedToCh GitHub Wiki

// src/components/ChatbotWindow.js

import React, { useState, useEffect, useRef } from 'react';
import './ChatbotWindow.css';

const ChatbotWindow = () => {
  // State to hold all messages
  const [messages, setMessages] = useState([
    {
      id: 1,
      text: "Hello! I'm your friendly support bot. How can I help you today?",
      sender: 'bot',
    },
  ]);

  // State for the user's input
  const [inputValue, setInputValue] = useState('');
  // State to indicate if the bot is "typing"
  const [isLoading, setIsLoading] = useState(false);

  // Ref for the message list container to enable auto-scrolling
  const messageListRef = useRef(null);

  // Effect to scroll to the bottom of the message list whenever a new message is added
  useEffect(() => {
    if (messageListRef.current) {
      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
    }
  }, [messages]);

  // Function to handle sending a message
  const handleSendMessage = async (e) => {
    e.preventDefault();
    const trimmedInput = inputValue.trim();
    if (!trimmedInput) return; // Don't send empty messages

    // Create the user's message object and add it to the messages state
    const userMessage = {
      id: Date.now(),
      text: trimmedInput,
      sender: 'user',
    };
    setMessages((prevMessages) => [...prevMessages, userMessage]);

    // Clear the input field and set loading state
    setInputValue('');
    setIsLoading(true);

    try {
      // --- API Call ---
      const response = await fetch('/api/chat', { // Replace with your actual API endpoint
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message: trimmedInput }),
      });

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();

      // Create the bot's response message object
      const botMessage = {
        id: Date.now() + 1, // Ensure unique ID
        text: data.reply,
        sender: 'bot',
      };

      // Add the bot's message to the state
      setMessages((prevMessages) => [...prevMessages, botMessage]);
    } catch (error) {
      console.error("Error fetching bot response:", error);
      // Optionally, add an error message to the chat
      const errorMessage = {
        id: Date.now() + 1,
        text: "Sorry, I'm having trouble connecting. Please try again later.",
        sender: 'bot',
        isError: true,
      };
      setMessages((prevMessages) => [...prevMessages, errorMessage]);
    } finally {
      // Stop the loading indicator
      setIsLoading(false);
    }
  };

  return (
    <div className="chatbot-window">
      <div className="chatbot-header">
        <h2>Support Bot</h2>
      </div>
      <div className="message-list" ref={messageListRef}>
        {messages.map((message) => (
          <div
            key={message.id}
            className={`message ${message.sender} ${message.isError ? 'error' : ''}`}
          >
            {message.text}
          </div>
        ))}
        {isLoading && (
          <div className="message bot">
            <span className="loading-dots">
              <span>.</span><span>.</span><span>.</span>
            </span>
          </div>
        )}
      </div>
      <form className="chat-input-form" onSubmit={handleSendMessage}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Type your message..."
          disabled={isLoading}
          autoFocus
        />
        <button type="submit" disabled={isLoading}>
          Send
        </button>
      </form>
    </div>
  );
};

export default ChatbotWindow;

// src/App.js

import React from 'react';
import ChatbotWindow from './components/ChatbotWindow';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My React App</h1>
        <p>Here's a chatbot to help you out!</p>
      </header>
      <main>
        {/* We place the chatbot window component here */}
        <ChatbotWindow />
      </main>
    </div>
  );
}

export default App;