Merge pull request #181 from marvelai-org/develop

Cleanup & Maintenance

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 out
-.next
+.next
+**/docs/**

.github/workflows/firebase-hosting-pull-request.yml

@@ -1,21 +1,56 @@
 # This file was auto-generated by the Firebase CLI
 # https://github.com/firebase/firebase-tools
 
-name: Deploy to Firebase Hosting on PR
-on: pull_request
-permissions:
-  checks: write
-  contents: read
-  pull-requests: write
+name: Deploy to Firebase on Merge
+on:
+  push:
+    branches:
+      - main
+
 jobs:
-  build_and_preview:
-    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+  build_and_deploy:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: next build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      # Install dependencies for both frontend and functions
+      - name: Install Dependencies
+        run: |
+          npm ci
+          cd functions && npm ci
+          
+      # Create .env files for both frontend and functions
+      - name: Create environment files
+        run: |
+          # Frontend .env
+          echo "NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY=${{ secrets.NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_CLIENT_AUTH_DOMAIN=${{ secrets.NEXT_PUBLIC_FIREBASE_CLIENT_AUTH_DOMAIN }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_CLIENT_STORAGE_BUCKET=${{ secrets.NEXT_PUBLIC_FIREBASE_CLIENT_STORAGE_BUCKET }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_CLIENT_MESSAGING_SENDER_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_CLIENT_MESSAGING_SENDER_ID }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_CLIENT_APP_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_CLIENT_APP_ID }}" >> .env
+          echo "NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}" >> .env
+          echo "NEXT_PUBLIC_MARVEL_ENDPOINT=${{ secrets.NEXT_PUBLIC_MARVEL_ENDPOINT }}" >> .env
+          
+          # Functions .env
+          cd functions
+          echo "MARVEL_API_KEY=${{ secrets.MARVEL_API_KEY }}" >> .env
+          echo "MARVEL_ENDPOINT=${{ secrets.MARVEL_ENDPOINT }}" >> .env
+          
+      # Build frontend
+      - name: Build Frontend
+        run: npm run build
+
+      # Deploy to Firebase
+      - name: Deploy to Firebase
+        uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: ${{ secrets.GITHUB_TOKEN }}
           firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_KAI_AI_F63C8 }}
-          projectId: kai-ai-f63c8
+          projectId: kai-ai-f63c8
+          channelId: live

README.md

@@ -28,7 +28,7 @@ Marvel AI is an open-source project by Reality AI, designed to provide smart too
 - [License](#license)
 
 ## Architecture
-The "Marvel" platform is structured into two main components: Firebase and AI. The Firebase side, detailed in this repository, encompasses both the frontend, developed with NextJS and hosted on Firebase Hosting, and the backend, which includes user management and session handling via Firebase Functions like `signUpUser` and `createChatSession`. The `communicator` and `toolCommunicator` functions act as proxies, facilitating interaction between the Firebase infrastructure and the AI services, ensuring seamless data flow and integration. Firestore DB is utilized for data storage. The AI components, housed in a separate repository, include a chatbot and tools like "Quizify" and "YouTube Flashcard Generator." 
+The "Marvel" platform is structured into two main components: Firebase and AI. The Firebase side, detailed in this repository, encompasses both the frontend, developed with NextJS and hosted on Firebase Hosting, and the backend, which includes user management and session handling via Firebase Functions like `signUpUser` and `createChatSession`. The `communicator` function acts as a proxy for chat interactions between the Firebase infrastructure and the AI services. Tool requests (like "Quizify" and "YouTube Flashcard Generator") are sent directly from the frontend to the AI endpoints. Firestore DB is utilized for data storage. The AI endpoints are housed in a separate repository, including a chatbot and tools like "Quizify" and "Flashcard Generator." 
 
 ![Architecture Diagram](https://github.com/marvelai-org/marvel-platform/blob/2400bf1b10af77b57976778a108f3f2296aa5215/Marvel%20Architecture.png)
 
@@ -66,33 +66,67 @@ To set up the project, follow these steps:
 1. Clone the repository: `git clone https://github.com/marvelai-org/marvel-platform`
 2. Create your firebase project on google firebase console
 3. Create a firestore database instance
-4. Get firebase config from firebase project settings in firebase console and save it to .env (create in root of this project, see sample.env for refrence)
-5. Install Firebase CLI by running the following in terminal: `npm install -g firebase-tools`
-6. Login to firebase CLI by running the following command: `firebase login`.
-
-### Backend
-1. Navigate to back-end project directory: `cd functions`
-2. Install dependencies: `npm install`
-3. Run for local testing: `firebase serve --only functions`
-
-### Frontend
-1. Navigate to front-end project directory: `cd ../` (root of project)
-2. Install dependencies: `npm install`
-3. Run for local testing: `npm run dev`
-This will start the frontend on localhost:3000 (default port)
-
-### Local Emulator (Optional)
-#### Setup
-1. Open the terminal and to start the emulators, run the following command: `npm run emulators`
-2. Open another terminal simultaneously and start the frontend project, run the following command: `npm run dev`
+4. Get firebase config from firebase project settings in firebase console
+5. Create a `.env` file in the root of the project using `sample.env` as a template:
+   The default values in `sample.env` are configured to connect to the production MarvelAI server (app.marvelai.app). You can keep these values if you want to use the production firebase backend (Firestore and Functions), or update them to point to your own firebase project.
+
+6. Install Firebase CLI by running the following in terminal: `npm install -g firebase-tools`
+7. Login to firebase CLI by running the following command: `firebase login`
+8. Install all dependencies by running: `npm run install:all`
+
+### Development Options
+You have two options to run the development environment:
+
+#### Option 1: Frontend with Production Backend
+```bash
+npm run dev
+```
+This will start the frontend on localhost:3000 and connect to your deployed Firebase backend (Functions and Firestore). Use this option when you want to:
+- Test frontend changes against the production backend
+- Don't need to modify backend functionality
+
+#### Option 2: Full Local Development Environment
+```bash
+npm run dev:all
+```
+This starts both the frontend and Firebase emulators locally, providing a completely isolated development environment. Use this option when you want to:
+- Test full-stack changes locally
+- Develop and test Firebase Functions
+- Work with a seeded local Firestore database
+- Avoid affecting production data
+
+### Accessing the Application
+1. Once the development server is running, visit: `http://localhost:3000/`
+2. Register a new account using the signup form
+3. You'll be taken to a confirmation page
+4. In development mode, you can simply return to `http://localhost:3000/` and you'll be logged in automatically without email confirmation
+
+Note: If you experience any issues with hanging emulator processes after stopping the development server, you can clean them up by running:
+```bash
+npm run kill-emulators
+```
 
 ## Cloud Deployment
-1. Clone the repository: `git clone https://github.com/marvelai-org/marvel-platform`
-2. Navigate to back-end project directory: `cd functions`
-3. Install dependencies: `npm install`
-4. Navigate to front-end directory: `cd ../` (root of project)
-5. Install dependencies: `npm install`
-5. Navigate to the root directory and run deploy: `npm run deploy`
+Before deploying, ensure you have the correct Firebase project setup:
+
+1. Login to Firebase if you haven't already:
+```bash
+firebase login
+```
+
+2. List your Firebase projects to verify you're on the correct one:
+```bash
+firebase projects:list
+```
+
+3. If needed, select the correct project:
+```bash
+firebase use <project-id>
+```
+
+Once your Firebase project is properly configured:
+1. Install all dependencies: `npm run install:all`
+2. Deploy the project (frontend and functions): `npm run deploy`
 
 ## Contributing
 1. Fork the Repository: Create a personal fork of the repository to work on.

components/FileTypeSelectorInput/index.jsx

@@ -1,14 +1,25 @@
-import { Grid, Typography, Tooltip } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form-mui';
 import { Help } from '@mui/icons-material';
+import { Grid, Tooltip, Typography } from '@mui/material';
+import { useWatch } from 'react-hook-form-mui';
 
 import PrimaryFileUpload from '@/components/PrimaryFileUpload';
-import PrimaryTextFieldInput from '@/components/PrimaryTextFieldInput';
 import PrimarySelectorInput from '@/components/PrimarySelectorInput';
+import PrimaryTextFieldInput from '@/components/PrimaryTextFieldInput';
 
 import styles from './styles';
 
-const FileTypeSelectorInput = ({ name, label, fileTypes, tooltip, error, helperText, setValue, getValues, ref, control }) => {
+const FileTypeSelectorInput = ({
+  name,
+  label,
+  fileTypes,
+  tooltip,
+  error,
+  helperText,
+  setValue,
+  getValues,
+  ref,
+  control,
+}) => {
   const selectedFileType = useWatch({ control });
 
   const renderLabel = (text) => (
@@ -23,26 +34,33 @@ const FileTypeSelectorInput = ({ name, label, fileTypes, tooltip, error, helperT
   );
 
   const renderInputField = () => {
-    const urlOnlyTypes = ['GOOGLE_DOCS', 'GOOGLE_SHEETS', 'GOOGLE_SLIDES', 'GOOGLE_DRIVE', 'URL', 'youtube_url'];
+    const urlOnlyTypes = [
+      'GOOGLE_DOCS',
+      'GOOGLE_SHEETS',
+      'GOOGLE_SLIDES',
+      'GOOGLE_DRIVE',
+      'URL',
+      'youtube_url',
+    ];
 
     if (urlOnlyTypes.includes(selectedFileType[name])) {
       return (
         <Grid item {...styles.inputGridProps}>
           <PrimaryTextFieldInput
             name={`${name}_url`}
             id={`${name}_url`}
-            title={renderLabel("Type URL")}
+            title={renderLabel('Type URL')}
             placeholder="Enter URL e.g http://..."
             control={control}
             error={error}
             helperText={helperText}
           />
         </Grid>
       );
-    } else {
-      return (
-        <>
-          {/* <Grid item {...styles.inputGridProps}>
+    }
+    return (
+      <>
+        {/* <Grid item {...styles.inputGridProps}>
             <PrimaryTextFieldInput
               name={`${name}_url`}
               id={`${name}_url`}
@@ -58,29 +76,28 @@ const FileTypeSelectorInput = ({ name, label, fileTypes, tooltip, error, helperT
               OR
             </Typography>
           </Grid> */}
-          <Grid item {...styles.inputGridProps} sx={{ marginTop: '-30px' }}>
-            <PrimaryFileUpload
-              name={`${name}_file`}
-              id={`${name}_file`}
-              title={renderLabel("Upload File")}
-              control={control}
-              setValue={setValue}
-              error={error}
-              helperText={helperText}
-              multiple
-              placeholder="Choose Files to Upload"
-              showChips
-              showCheckbox
-              displayEmpty
-              ref={ref}
-              getValues={() => getValues()}
-              color="purple"
-              bgColor="#23252A"
-            />
-          </Grid>
-        </>
-      );
-    }
+        <Grid item {...styles.inputGridProps} sx={{ marginTop: '-30px' }}>
+          <PrimaryFileUpload
+            name={`${name}_file`}
+            id={`${name}_file`}
+            title={renderLabel('Upload File')}
+            control={control}
+            setValue={setValue}
+            error={error}
+            helperText={helperText}
+            multiple
+            placeholder="Choose Files to Upload"
+            showChips
+            showCheckbox
+            displayEmpty
+            ref={ref}
+            getValues={() => getValues()}
+            color="purple"
+            bgColor="#23252A"
+          />
+        </Grid>
+      </>
+    );
   };
 
   return (
@@ -92,7 +109,7 @@ const FileTypeSelectorInput = ({ name, label, fileTypes, tooltip, error, helperT
           control={control}
           menuList={fileTypes.map((type) => ({
             id: type.key,
-            label: type.label
+            label: type.label,
           }))}
         />
       </Grid>
@@ -101,4 +118,4 @@ const FileTypeSelectorInput = ({ name, label, fileTypes, tooltip, error, helperT
   );
 };
 
-export default FileTypeSelectorInput; 
+export default FileTypeSelectorInput;

components/FileTypeSelectorInput/styles.js

@@ -21,4 +21,4 @@ const styles = {
   },
 };
 
-export default styles; 
+export default styles;

components/PrimaryDatePickerInput/PrimaryDatePickerInput.jsx

@@ -1,10 +1,11 @@
 import { forwardRef } from 'react';
-import { DatePickerElement } from 'react-hook-form-mui';
-import { Grid, Typography, Tooltip } from '@mui/material';
+
 import { Help } from '@mui/icons-material';
+import { Grid, Tooltip, Typography } from '@mui/material';
 import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { DatePickerElement } from 'react-hook-form-mui';
 
 import styles from './styles';
 
@@ -26,7 +27,7 @@ dayjs.extend(advancedFormat);
  *
  * @return {JSX.Element} - The rendered date picker input field component.
  */
-const PrimaryDatePickerInput = forwardRef((props, ref) => {
+const PrimaryDatePickerInput = forwardRef((props) => {
   const {
     id,
     error,
@@ -42,9 +43,7 @@ const PrimaryDatePickerInput = forwardRef((props, ref) => {
 
   const renderLabel = () => (
     <Grid {...styles.textFieldLabelGridProps}>
-      <Typography {...styles.labelProps(error)}>
-        {title}
-      </Typography>
+      <Typography {...styles.labelProps(error)}>{title}</Typography>
       {tooltip && (
         <Tooltip placement="top" title={tooltip} sx={{ ml: 1 }}>
           <Help />
@@ -74,4 +73,4 @@ const PrimaryDatePickerInput = forwardRef((props, ref) => {
   );
 });
 
-export default PrimaryDatePickerInput; 
+export default PrimaryDatePickerInput;

components/PrimaryDatePickerInput/styles.js

@@ -69,4 +69,4 @@ const styles = {
   }),
 };
 
-export default styles; 
+export default styles;