RAG News Chatbot - Frontend (React)

This is the frontend for the RAG (Retrieval-Augmented Generation) News Chatbot. It provides a user-friendly chat interface for users to interact with the backend API, ask questions about news articles, view responses, and manage their chat sessions.

Table of Contents

1. Overview
2. Features
3. Tech Stack & Justifications
4. Project Structure
5. Core Functionality & Flow
6. Setup and Running Instructions (Local Development)
   • Prerequisites
   • Environment Variables
   • Installation & Running
7. Interacting with the Backend API
8. Deployment (Vercel)
9. Potential Improvements

1. Overview

The frontend application is built using React and styled with Tailwind CSS. It allows users to:

• Send messages to the chatbot backend.
• View a stream of conversation messages (user and bot).
• See contextually relevant answers generated by the RAG pipeline and Gemini LLM.
• Manage chat sessions, including starting new chats, viewing recent chat history (client-side), and clearing sessions.
• Experience a modern, responsive, and dark-themed user interface.

2. Features

• Real-time Chat Interface: Displays user queries and bot responses in a familiar chat bubble format.
• Message Input: Allows users to type and send messages (supports Enter to send).
• Markdown Rendering: Bot responses containing Markdown are rendered correctly for better readability (e.g., bold text, lists).
• Session Management (Client-Side Tracking):
  • Automatically generates and uses a session_id for conversations.
  • Persists the current session_id and a list of recent chat sessions in localStorage.
  • "New Chat" functionality to start a fresh conversation (clears current view and session on backend).
  • Sidebar to display and switch between recent chat sessions (loads history from backend).
  • Ability to delete sessions from the sidebar (clears from localStorage and backend).
• Loading & Error States: Provides visual feedback when the bot is processing a request or if an error occurs.
• Responsive Design: Adapts to various screen sizes (desktop, mobile).
• Theme Toggle: Includes a basic dark/light theme toggle.

3. Tech Stack & Justifications

• Core Framework: React (with Hooks)
  • Justification: A popular and powerful JavaScript library for building dynamic user interfaces with a component-based architecture. Hooks enable functional components with state and lifecycle features.
• Styling: Tailwind CSS
  • Justification: A utility-first CSS framework that allows for rapid UI development and easy customization, resulting in a modern and maintainable design.
• Icons: Lucide React
  • Justification: A comprehensive and well-designed SVG icon library, easy to integrate with React and Tailwind CSS.
• Markdown Rendering: react-markdown
  • Justification: To properly display formatted responses from the LLM which may include Markdown syntax.
• API Communication: fetch API (native browser API)
  • Justification: Built-in to modern browsers, sufficient for making REST API calls to the backend.
• Build Tool: Vite (or Create React App if used)
  • Justification (Vite): Fast development server, optimized builds, modern JavaScript tooling.
• Deployment Platform: Vercel
  • Justification: Excellent platform for deploying static sites and React applications, offering easy Git integration, CI/CD, and global CDN.

4. Project Structure

A typical React project structure (e.g., created with Vite):

my-news-chatbot-frontend/├── public/ # Static assets│ └── ...├── src/│ ├── assets/ # Images, custom fonts, etc. (if any)│ ├── components/ # Reusable UI components (e.g., MessageBubble.jsx - if separated)│ ├── App.jsx # Main application component containing UI logic│ ├── index.css # Global styles and Tailwind directives│ └── main.jsx # Entry point of the React application (or index.js for CRA)├── .env.local # Local environment variables (e.g., API base URL for dev) - NOT COMMITTED├── .gitignore├── index.html # Main HTML file├── package.json # Project dependencies and scripts├── tailwind.config.js # Tailwind CSS configuration├── postcss.config.js # PostCSS configuration└── vite.config.js # Vite configuration (if using Vite)(Note: The provided App.jsx contains MessageBubble as an inner component for simplicity in the example, but it could be separated into src/components/)

5. Core Functionality & Flow

1. Initialization:
   • On load, App.jsx attempts to retrieve the last active session_id and a list of recent session metadata from localStorage.
   • If a session exists, its history is fetched from the backend (/history/:sessionId).
   • If no session information is found, a new session_id is generated using a helper function (uuidv4), a welcome message is displayed, and this new session is added to the localStorage list of sessions.
2. Sending a Message:
   • The user types a message in the input field.
   • On send, the handleSendMessage function is triggered.
   • The user's message is added to the local messages state for immediate display.
   • An API call (fetch) is made to the backend's /chat endpoint, including the user_message and current session_id.
   • A loading state is activated.
3. Receiving a Response:
   • The backend processes the request (RAG pipeline, Gemini call, Redis update).
   • The backend returns a JSON response containing bot_response, session_id, and retrieved_context_count.
   • The bot's response is added to the messages state.
   • The session_id state is updated if the backend assigned a new one (though typically it uses the one sent).
   • The session metadata (name derived from the first user message, timestamp) in localStorage is updated via updateStoredSessions.
   • The loading state is deactivated.
4. Displaying Messages:
   • The messages array (React state) is mapped to render MessageBubble components.
   • Bot responses containing Markdown are rendered as formatted HTML using react-markdown.
   • The chat window auto-scrolls to the latest message using messagesEndRef.current?.scrollIntoView().
5. Session Management UI:
   • New Chat: The "New Chat" button calls handleResetSession. This function effectively starts a new session by calling startNewSession(), which generates a new client-side session_id, updates localStorage, clears the current message view, and also makes an API call to the backend's /clear_session/:oldSessionId endpoint to clear the history for the previously active session from Redis.
   • Recent Chats Sidebar: Displays sessions stored in localStorage (managed by chatHistorySessions state, sorted by recency). Clicking a session sets it as the currentSessionId and calls fetchChatHistory(selectedSessionId) to load its messages from the backend's /history/:sessionId endpoint.
   • Delete Chat: Clicking the delete icon next to a session in the sidebar calls handleDeleteSessionFromSidebar. This removes the session metadata from localStorage and chatHistorySessions state, and also makes an API call to /clear_session/:sessionIdToDelete on the backend to remove its history from Redis. If the deleted session was the active one, a new chat session is started.

6. Setup and Running Instructions (Local Development)

Prerequisites

• Node.js (e.g., v18.x or v20.x) and npm/yarn.
• A running instance of the backend API (see backend README.md). The default frontend configuration expects the backend to be running on http://localhost:8000.

Environment Variables

For local development, the API_BASE_URL is hardcoded in App.jsx as http://localhost:8000. For deployment (e.g., to Vercel), you would typically configure an environment variable:

• If using Vite, create a .env file in the project root:

  VITE_API_BASE_URL=[http://your-deployed-backend-url.com](http://your-deployed-backend-url.com)

And access it in code as import.meta.env.VITE_API_BASE_URL.If using Create React App, it would be REACT_APP_API_BASE_URL in a .env file.Installation & RunningClone the repository (if you haven't already).Navigate to the frontend project directory:cd your-frontend-project-name Install dependencies:npm install

OR

yarn install

Run the development server:npm run dev # For Vite

OR

npm start # For Create React App