Skip to content

Latest commit

 

History

History
57 lines (40 loc) · 2.72 KB

README.md

File metadata and controls

57 lines (40 loc) · 2.72 KB

Project Overview

This project is a React-based web application that allows users to upload PDF files and interact with a chatbot. The application uses several components and libraries to provide a seamless user experience in conversation.

A live demo is available at https://ai-planet-chatbot.vercel.app!

Key Components

  1. App.jsx: The main component that manages the overall application state and layout.
  2. FileUpload.jsx: A component for uploading PDF files.
  3. WaitingIndicator.jsx: A component that displays a loading skeleton while waiting for a response from the server.
  4. ChatMessage.jsx: A component for individual chat messages, increasing modularity.

Services

  1. askQuestion: A function that sends a question to the server and retrieves the response, providing the corresponding user ID and file name.
  2. uploadPdf: Calls the endpoint to upload a file to the server with the PDF as payload.
  3. uploadStatus: Polls the backend for the file processing state.
  4. allFiles: Retrieves a list of files that the user has previously uploaded.

Code Architecture

App.jsx

  • State Management: Uses useState to manage the state of the file, prompt, current chat, and waiting status.
  • Refs: Uses useRef to manage references to the chat end and input field.
  • Effects: Uses useEffect to scroll to the bottom of the chat when a new message is added.
  • Event Handlers:
    • handleKeyPress: Handles the Enter key press or mouse click to send a message.
    • handleTextChange: Updates the prompt state when the input field changes.
  • UI Layout: Renders the navigation bar, main chat area, and input field.

FileUpload.jsx

  • State Management: Uses useRef to track if a document has been uploaded.
  • Event Handlers:
    • handleFileChange: Handles file selection and uploads the file to the server.
  • UI Layout: Renders a file input and label for uploading PDFs.

WaitingIndicator.jsx

  • UI Layout: Displays a loading skeleton using the react-loading-skeleton library.

Interactions

  • File Upload: The FileUpload component allows users to upload a PDF file, which is then set in the App component's state.
  • Chat Interaction: Users can type messages in the input field, which are sent to the server using the askQuestion function. The response is then displayed in the chat.
  • Loading Indicator: The WaitingIndicator component is displayed while waiting for a server response.

Conclusion

This documentation provides an overview of the project's architecture, key components, and their interactions. Each component is documented with comments explaining its purpose and functionality.