Chatbot Application

This project is a dynamic chatbot that uses OpenAI to ask unique, non-personal questions to the user and records their responses. The chatbot frontend is built with ReactJS, the backend with ExpressJS, and MongoDB is used to store the conversations. The application dynamically generates questions using OpenAI's API and ensures that no duplicate questions are asked during a session.

Features

• Dynamic Question Generation: The chatbot uses OpenAI to generate unique, non-personal questions.
• Session Management: Each user session is tracked with a unique identifier, and both questions and answers are stored.
• Answer Storage: User responses are saved in MongoDB for future reference.
• Restartable Sessions: After a session ends, users can start a new session with fresh questions.
• Real-time Interaction: Smooth UI interaction, including typing indicators and scroll-to-bottom functionality.

Technologies Used

• Frontend: ReactJS
• Backend: ExpressJS
• Database: MongoDB
• API Integration: OpenAI API
• UI/UX: Custom CSS for chat UI and smooth interactions

Installation and Setup

Important: Set up the .env file first

Before starting the project, make sure to create the .env file in the backend directory and set up the necessary environment variables. This is critical for the backend to function properly.

1. Create a .env file in the backend directory.
2. Add the following environment variables:

   MONGO_URI=mongodb://localhost:27017/Chatbot
   OPENAI_API_KEY=your-openai-api-key
   

Prerequisites

• Node.js (v14.x or higher)
• MongoDB (local or cloud instance)
• OpenAI API key

1. Clone the Repository

git clone git@github.com:ozanozkayatr/bolt-chat.git
cd chatbot-app

2. Backend Setup

1. Navigate to the backend folder:

   cd backend

2. Install the necessary dependencies:

   npm install

3. Make sure the .env file is configured correctly as described above.

4. Start the backend server:

   node index.js

   The backend server will be running on http://localhost:3001.

3. Frontend Setup

1. Navigate to the frontend folder:

   cd ../frontend

2. Install the necessary dependencies:

   npm install

3. Start the frontend application:

   npm start

   The frontend will be running on http://localhost:3000.

How to Use

1. Start a Session: The chatbot begins with a new session, where it asks a series of dynamically generated questions using OpenAI.
2. Answer Questions: Respond to each question, and your answers will be saved in MongoDB.
3. End a Session: After answering all the questions, a closing message will appear, and you'll have the option to start a new session.

Project Structure

├── backend
│   ├── index.js          # Entry point for the backend
│   ├── models
│   │   └── Session.js     # MongoDB schema for session data
│   ├── routes
│   │   └── chat.js        # Routes for handling chat requests
│   └── openai.js          # OpenAI integration logic
├── frontend
│   ├── src
│   │   ├── components
│   │   │   ├── ChatWindow.js     # Chat window component
│   │   │   ├── InputForm.js      # Input form for user responses
│   │   │   └── MessageCard.js    # Message display component
│   │   ├── App.js                # Main React application
│   │   └── index.js              # Entry point for the frontend
│   └── public                    # Static files (HTML, favicon, etc.)

API Endpoints

• POST /chat/randomQuestion
  Generates a unique, dynamic question using OpenAI's API and returns it.

• POST /chat/answer
  Saves the user's response to the corresponding question in the session.