Now that our backend and chatbot logic are ready, it's time to create a user-friendly chat interface using React. This part focuses on building a simple yet elegant frontend that interacts with the backend and enhances the user experience.

✅ What We'll Cover

  • Setting up the React project structure
  • Creating a chat interface
  • Sending queries to the backend API
  • Displaying responses from the chatbot
  • Basic styling for good UX

⚙️ 1. Project Setup (if not already done) 

cd frontend
npx create-react-app .
npm install axios styled-components

💬 2. Chat Interface Component

Let’s create the chat interface:

// frontend/src/components/ChatInterface.js
import React, { useState } from 'react';
import styled from 'styled-components';
import axios from 'axios';

const ChatContainer = styled.div\`
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  height: 80vh;
  display: flex;
  flex-direction: column;
\`;

const MessagesContainer = styled.div\`
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
\`;

const MessageBubble = styled.div\`
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  word-wrap: break-word;
  \${props => props.isUser ? \`
    background-color: #dcf8c6;
    margin-left: auto;
  \` : \`
    background-color: #f0f0f0;
    margin-right: auto;
  \`}
\`;

const InputContainer = styled.div\`
  display: flex;
  gap: 10px;
\`;

const Input = styled.input\`
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
\`;

const Button = styled.button\`
  padding: 10px 20px;
  background-color: #4a69bd;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: #3c55a5;
  }
\`;

const ChatInterface = () => {
  const [messages, setMessages] = useState([
    { text: "Hi! How can I help you with your order today?", isUser: false }
  ]);
  const [input, setInput] = useState('');

  const handleSendMessage = async () => {
    if (!input.trim()) return;

    const userMessage = { text: input, isUser: true };
    setMessages(prev => [...prev, userMessage]);

    try {
      const response = await axios.post('/api/chat', { question: input });
      const botMessage = { text: response.data.answer, isUser: false };
      setMessages(prev => [...prev, botMessage]);
    } catch (err) {
      console.error(err);
      setMessages(prev => [...prev, {
        text: "Sorry, something went wrong.",
        isUser: false
      }]);
    }

    setInput('');
  };

  return (
    
      E-Commerce Support Chatbot
      
        {messages.map((msg, idx) => (
          
            {msg.text}
          
        ))}
      
      
         setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleSendMessage()}
          placeholder="Ask about your order..."
        />
        Send
      
    
  );
};

export default ChatInterface;

🧩 3. Use Component in App 

// frontend/src/App.js
import React from 'react';
import ChatInterface from './components/ChatInterface';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChatInterface />
    </div>
  );
}

export default App;

✅ Next Steps (Part 7)

In the next part, we will:

  • Set up API routes to connect backend and frontend
  • Handle authentication (if needed)
  • Add real-time support and finalize the flow

⚡ Let's make it fully functional!