BOT-AI

AI Chat Application | ChatGPT-like frontend interface | React

Link: https://bot-1eqmgnsh7-nayans-projects-ca58165e.vercel.app

Note: This frontend-only app is built using React and has no backend components. It uses a JSON file (/src/config/sampleData.json) as sample data for the frontend use case. The questions entered are matched to the questions in the JSON file based on the similarity index to filter out the most relevant answer when matched with a similarity of greater than 0.5.

Techstack

• React + Javascript

Libraries/Packages

• Material UI (MUI)
• React Router
• String Similarity (string-similarity)
• Notistack

Features

• ChatGPT-like conversation window
• Rating and Feedback functionality for each response
• Save chat functionality (past conversations window)
• Filtering past conversations based on rating/feedback and timestamp
• Responsive design
• Dark mode

Limitations

• No backend => no auth
• Saved conversation cannot be re-saved due to the functionality being based on the last index of previously saved conversations. While the rating of the previously saved conversations is possible, the data will only persist in the local state but not in the local storage when attempted to save once again.

Nitpicks/Improvements

• Enforcement of better component modularity
• Enforcement of a richer filter set
• Enforcement of better-organized theme
• Enforcement of better state management (Rating buttons visibility, etc..)

Local Installation

• git clone https://github.com/nay-22/BOT-AI.git

• cd BOT-AI

• npm install

• npm run dev

• http://localhost:5173/
  

Implementation

• Landing Page
• Conversation Window
• Positive Rating Of Response
• Negative Feedback Of Response
• Save Chat
• Past Conversations Window
• Filter Past Conversations (Dark Mode)
  • Filtered by 4 stars
  • Filtered by Negative Feedback
• Responsive Design
  bot-ai.mp4