Enhance project with Retrieval-Augmented Generation (RAG) capability with Pinecone DB integration #17
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Documented the differences between CommonJS (CJS) and ES Modules (ESM). Explained why conflicts occur when mixing module.exports and export default. Provided best practices for choosing and resolving module system usage. Included examples for PostCSS configuration in both CJS and ESM formats. This message uses your preferred emoji style for better readability and engagement!
- Implemented dynamic routes for homepage, dashboard, and chat pages - Integrated `RootLayout` and `DashboardLayout` for consistent layout structure - Added sign-in and sign-up routes using Clerk’s `SignIn` and `SignUp` components - Implemented automatic redirection to `/home` from the root path - Set up nested routes for authenticated users, with dynamic chat pages - Conditional rendering of components based on user authentication state using Clerk - Styled components with Tailwind CSS for better UI consistency and responsiveness
- Imported the `Link` component from `react-router-dom` in the ChatList component. - Ensured that navigation links work correctly in the ChatList component for routing.
- Added `flex` and `flex-col` for column orientation. - Styled `<hr>` with `opacity-10` and `mt-2` for low opacity and margin. - Improved typography and link styles with Tailwind classes. - Refined Pro upgrade section using `flex-col` and spacing utilities. - Ensured a clean and responsive layout with consistent spacing.
- Ensured the main content spans the full height and width of the page using `min-h-screen` and `w-full`. - Centered the content both vertically and horizontally using flexbox (`flex justify-center items-center`). - Updated class names conditionally to apply centering logic for specific routes (`/home`, `/sign-in`, `/sign-up`). - Enhanced the layout of the page to ensure content is always centered regardless of screen size. - Improved the responsiveness of the layout for different screen sizes.
- Added a fancy input box at the bottom with a modern design. - Styled the input box with a blue send button and smooth transitions. - Incorporated a toggle select element with a more polished look, including hover and focus effects. - Updated layout to ensure input box is positioned slightly higher from the bottom. - Improved accessibility with visual focus indicators and user-friendly interactions.
- Implemented auto-scrolling for chat body when messages exceed container height - Adjusted layout of chat header and input area for better UI - Ensured chat box selection is displayed on the right side - Added buttons for box selection functionality - Enhanced styling and layout for better user experience
- Implemented custom scrollbar with a unique class name `.custom-scrollbar` to avoid conflicts. - Styled the scrollbar track, thumb, and hover effects with custom colors. - Added custom arrows (up and down) to the scrollbar with hover effects for better user interaction. - Applied the custom scrollbar to the messages container with dynamic visibility based on message count.
…he right in the input section
- Managed messages state in the parent component (`ChatPage`) using `useState`. - Passed `setMessages` as a prop to `ChatInput` to update the messages array. - Modified `ChatInput` to handle both text input and image upload, and update messages on submit. - Updated `ChatBody` to correctly display both text and images from the `messages` array. - Ensured smooth scrolling and layout adjustments in the `ChatBody` component. This ensures proper handling of text and image messages in the chat interface, with state management through the parent component.
- Added bottom padding to ChatBody to prevent overlap with the input box. - Adjusted ChatInput component to be fixed at the bottom with proper shadow for separation. - Ensured ChatBody is centered and occupies the available space, improving layout consistency. - Updated the `height` calculation for both components to maintain proper spacing and positioning.
…and Cloudinary storage 🏞️. 🔧 Added upload route in backend with authentication parameters for ImageKit 🔐, and enhanced frontend UI for handling file uploads 🖼️. ⚙️ Fixed .env variable loading and added necessary configurations for image handling 🌍. 💻 Integrated backend API for seamless image upload and retrieval 🔄.
Updated handleInputSubmit: Added dynamic payload handling to support conversations with or without images. Decoupled image.aiData dependency to gracefully handle missing data. Improved error resilience and streamlined logic for better scalability. Refactored generateContentWithRetry: Enhanced retry logic for more robust API calls. Adjusted to dynamically handle prompts with optional image URLs. Improved Image Data Handling: Simplified mimeType extraction to only include the file type. Ensured clean data propagation from upload to dashboard for AI readiness. 🔧 Debugging Improvements: Added meaningful logging for better debugging visibility (e.g., payload structure). 💾 Result: Supports flexible AI conversations with or without image input, ensuring cleaner, more reliable data flow.
…e flow 💬 - Enhanced `startChatWithMessage` for cleaner image handling and error management 🖼️⚡ - Refined `handleInputSubmit` with improved text and image validation ✅🖋️ - Added logging for better debugging and flow tracking 🔍 - **Session management (chat history handling) still pending** ⏳ #chat #refactor #error-handling #image-handling #ui #ai
- Added `onClick` handler to the outer div, focusing the cursor on the input field when clicked. - Ensured that input field is focused when interacting with the chat input area. - Updated the chat flow to allow sending messages with or without uploaded images. - **Note**: Session management for chat history is not yet implemented in this commit.
Created HistorySection to display the list of previously uploaded PDFs. Added UploadSection for handling new PDF uploads, restricted to .pdf files only. Implemented error handling for invalid file types. Improved layout with upload form fixed at the bottom and history scrollable above. 🚧 Remaining Work: Implement sign-in/sign-up functionality. Add backend integration for file uploads and manage persistence.
…is dervied from the frontend of other website
- Implemented layout adjustment for the Upload section to display components side by side (text and upload button). - Updated Upload component to handle error states and loading indicators. - Integrated image upload functionality with ImageKit, including base64 conversion for handling file data. - Applied proper icon color styling for the upload button and ensured smoother UI experience. - Added error handling to display relevant messages if the upload fails.
…formatting - Ensured `setMessages` is properly passed as a function to `startChatWithMessage`. - Refactored `handleInputSubmit` to correctly handle message state updates and history formatting. - Fixed potential conflicts with `addMessage` and `setMessages` in updating the state. - Corrected message structure in `startChatWithMessage` to ensure compatibility with chat API. This update addresses issues with message state handling and ensures smoother chat interaction.
Changes: Resolved PDF-Parse Issue: Removed unnecessary debugging code in pdf-parse library that caused crashes due to attempts to read a nonexistent test file (./test/data/05-versions-space.pdf). Applied a persistent fix using patch-package to ensure the problem does not recur with future installations. Backend Improvements: Avatar Validation: Ensured the avatar field is required in requests, with clear error handling for missing fields. Error Handling: Resolved undefined errors using optional chaining (?.). Cover Image Handling: Added fallback for missing coverImage to prevent crashes. Postman Environment Setup: Configured reusable environment variables for API testing, including API_BASE_URL and dynamic paths. Environment Variables: Added .env configuration for CLOUDINARY_URL and TEMP_DIRECTORY_PATH for better portability. Impact: Fixed a critical issue with the PDF parser that caused app crashes. Improved validation, error handling, and testing setup for more efficient development and debugging.
Changes: Resolved PDF-Parse Issue: Removed unnecessary debugging code in pdf-parse library that caused crashes due to attempts to read a nonexistent test file (./test/data/05-versions-space.pdf). Applied a persistent fix using patch-package to ensure the problem does not recur with future installations. Backend Improvements: Avatar Validation: Ensured the avatar field is required in requests, with clear error handling for missing fields. Error Handling: Resolved undefined errors using optional chaining (?.). Cover Image Handling: Added fallback for missing coverImage to prevent crashes. Postman Environment Setup: Configured reusable environment variables for API testing, including API_BASE_URL and dynamic paths. Environment Variables: Added .env configuration for CLOUDINARY_URL and TEMP_DIRECTORY_PATH for better portability. Impact: Fixed a critical issue with the PDF parser that caused app crashes. Improved validation, error handling, and testing setup for more efficient development and debugging.
Switching to Kaggle for vectorization model on PDF data processing
- Integrated `zlib` for vector compression before storing in MongoDB. - Added support for decompression when retrieving vectors. - Improved vector storage strategy to handle large embeddings efficiently. - Updated `parseAndVectorizePDF` to compress vectors after generation. - Ensured compatibility with current MongoDB models. - Optimized logging and error handling for PDF parsing and vectorization. This change reduces storage overhead and enhances scalability for large files!
- Updated `getDecompressedVector` to `getCompressedVector` for directly returning compressed vector data without decompression or parsing. - Simplified backend logic to delegate decompression responsibility to the frontend. - Retained robust error handling and ensured compatibility with future frontend decompression. 🔜 **Next Step:** Implement and test decompression logic on the frontend.
- Implemented Pinecone client setup and index creation for storing vectors - Added PDF parsing functionality using pdf-parse to extract text from PDF files - Integrated Sentence-BERT model to generate embeddings (vectors) from parsed PDF text - Developed logic to store generated vectors in Pinecone with metadata (fileId) - Created function to fetch vectors from Pinecone using fileId - Enhanced error handling for PDF parsing, vectorization, and Pinecone interactions - Refactored code for model loading and index creation with proper async handling - Removed unused compression code (zlib) as it's not needed for Pinecone storage
- Converted tensor embeddings into a plain array using `Array.from()` for compatibility with Pinecone. - Updated `textToVector` function to handle tensor embeddings and return a standard array. - Enhanced logging for vector generation to help with debugging and verification. - Improved error handling for empty or failed vector generation scenarios. - Added checks for vector size and correct data format before upsert into Pinecone. # Pinecone integration and PDF processing enhancements.
🔧 Updated vector retrieval logic to use Pinecone's 'fetch' method ✅ Added error handling for missing vector data⚠️ Error messages improved for better debugging 📝 Work remaining: Implement frontend integration and complete server-side validations and error handling
- Added `fileName` from Redux selector to display current PDF or "No file in chat yet" as default. - Ensured middle section (Current PDF) stays in a fixed position, preventing sliding when input text is added. - Used `flex-1` to balance widths across sections (Input Text, Current PDF, Current Model). - Added fallback texts for all sections to handle missing data gracefully. - Enhanced layout styling for better alignment and consistent spacing. This update improves the user experience and ensures the layout remains stable regardless of content changes.
- Added Redux state `fileUploadError` integration in `DashboardLayout`. - Implemented a toast notification system to display errors when file uploads fail. - Used `useSelector` to fetch `fileUploadError` state from Redux. - Added `ToastNotification` component to show error messages. - Added logic to reset `fileUploadError` state after dismissing the toast. - Ensured smooth navigation and authentication checks in the layout. 🚀 Improved user experience with better error feedback!
- Corrected the response handling by replacing 'result' with 'data'. - Improved error handling by using 'response.statusText' for more accurate error messages. - Added a check for 'data.data' to ensure vector data is properly returned from the Flask server. - Updated the function to handle edge cases where no vector data is found in the response.
- Implemented a delay for showing the loading spinner after all messages finish animating. - Applied motion animation (slide-in effect) to the loading spinner for consistency with messages. - Controlled loading spinner visibility using `setTimeout` based on message animation completion. - Enhanced user experience by ensuring smooth transition between messages and loading spinner.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull Request: Add RAG Feature with Pinecone DB Integration
Overview
This pull request introduces a Retrieval-Augmented Generation (RAG) feature to the project. The feature allows users to upload PDFs, which are parsed, vectorized, and stored in Pinecone DB for efficient context retrieval. A chatbot is then powered by this vectorized data to provide answers based on the content of the uploaded PDF.
Key Changes
How to Test
pdf-parsermodule and comment out the conditional check for missing files. This check is a random error and doesn’t affect functionality.Known Issues
pdf-parsermodule. To resolve:pdf-parsermodule innode_modules, and comment out theifstatement that checks for the file. This check is unnecessary and doesn’t interfere with the functionality.Further Improvements
Why This Pull Request is Important
This contribution adds a significant feature to the project that improves user experience by allowing interaction with a context-based chatbot. It utilizes Pinecone DB to provide fast and accurate responses to user queries from PDF content, which is an exciting feature for anyone using this platform.
Next Steps After Merge