Feat/presentation generator

[arashghezavati]

## Description

This pull request introduces the Presentation Generator feature, allowing users to create structured presentations based on input parameters and export them as text files. The implementation includes an interactive input form for parameters like grade level, number of slides, topic, and optional comments, seamlessly integrating with the backend API. Generated slides are displayed in a user-friendly, scrollable grid layout, and users can export the slides as a well-formatted text file. The tool is responsive across devices, matches the design mockup, and provides a seamless and efficient user experience while ensuring all core functionalities work as expected.

## Related Issue

#187

Type of Change

Please select the type(s) of change that apply and delete those that do not.

• New feature: A non-breaking change that adds functionality.
• Test enhancement: Adding or updating tests; no production code change.

Proposed Solution

The solution implements the PresentationGenerator component with the following features:

Dynamic Slide Rendering: Fetches slides data from the Redux tools slice and displays them in a grid format with Material-UI components.
Export Functionality: Allows users to export slide data as a text file using the FileSaver library.
Responsive Design: Ensures slides are rendered dynamically and adapt well to different screen sizes using Material-UI Grid properties.
The solution also includes comprehensive unit tests written with Jest and React Testing Library to verify the functionality of the PresentationGenerator component.

How to Test

1-Run the Application:
Start the application locally by running npm start.
Navigate to the page where the Presentation Generator component is displayed.
Verify that the slides are rendered correctly if data exists in the list_slides field of the Redux tools state.
Check that the Export Slides as Text button is present when slide data exists.

2-Export Slides:
Click the Export Slides as Text button.
Confirm that a file named presentation.txt is downloaded.
Open the file to verify that the content matches the slides rendered on the page.

3-Edge Cases:
Test the behavior when list_slides is undefined or empty:
The Export Slides as Text button should not be visible.
No slides should be rendered.

4-Run Unit Tests:
Run the command npm test in the terminal.
Ensure that all tests in PresentationGenerator.test.jsx pass successfully.

5-Code Review:
Check for proper error handling in scenarios where list_slides is not provided.
Verify that the generated text file uses the correct formatting.

Unit Tests

The following unit tests verify the functionality of the PresentationGenerator:

Renders Without Crashing: Confirms that the component renders correctly with valid data.
Renders Slides Correctly: Verifies that all slides are displayed as per the fetched data.
Export Button Functionality: Checks that clicking the export button triggers file-saving functionality with the correct content.
Handles Missing Slide Data: Ensures that the export button is not rendered when no slides are available.

Documentation Updates

Indicate whether documentation needs to be updated due to this PR.

• No

If yes, describe what documentation updates are needed and link to the relevant documentation.

Checklist

I have performed a self-review of my code.
I have commented my code, particularly in hard-to-understand areas.
My changes generate no new warnings.
I have added tests that prove my feature works as intended.
New and existing unit tests pass locally with my changes.

Additional Information

Ensuring Accurate Firestore Configuration for the Presentation Generator Tool:

To ensure the proper functioning of the Presentation Generator, it is essential to update the Firestore sandbox database with the complete set of required input fields.

Currently, the Firestore sandbox only contains the following input fields under the presentation-generator document:

grade_level
n_slides
topic
objectives
lang
For the Presentation Generator to generate accurate and complete results, the following additional fields must also be added to the Firestore database under the inputs array:

additional_comments: (String) Comments to guide the presentation content.
Example: "Focus on Mars"
objectives_file_url: (String) URL of the file containing detailed objectives.
Example: "https://example.com/objectives.pdf"
objectives_file_type: (String) The file type of the objectives file.
Example: "application/pdf"
ac_file_url: (String) URL of the file containing additional comments.
Example: "https://example.com/comments.pdf"
ac_file_type: (String) The file type of the additional comments file.
Example: "application/pdf"

-Firestore Update Example
Here is the structure for the inputs array in the presentation-generator document after adding these fields:

{
  "inputs": [
    { "label": "Grade Level", "name": "grade_level", "defaultValue": "5th grade" },
    { "label": "Number of Slides", "name": "n_slides", "defaultValue": 10 },
    { "label": "Topic", "name": "topic", "defaultValue": "Space Exploration" },
    { "label": "Objectives", "name": "objectives", "defaultValue": "Understand planets" },
    { "label": "Language", "name": "lang", "defaultValue": "en" },
    { "label": "Additional Comments", "name": "additional_comments", "defaultValue": "Focus on Mars" },
    { "label": "Objectives File URL", "name": "objectives_file_url", "defaultValue": "" },
    { "label": "Objectives File Type", "name": "objectives_file_type", "defaultValue": "application/pdf" },
    { "label": "Additional Comments File URL", "name": "ac_file_url", "defaultValue": "" },
    { "label": "Additional Comments File Type", "name": "ac_file_type", "defaultValue": "application/pdf" }
  ]
}

Why This Is Necessary
These additional fields ensure that the Presentation Generator has all the required input data to process user requests effectively. Without these updates in Firestore, the generated presentations may lack important elements or fail to meet user expectations.

Please ensure these changes are applied to the Firestore database in the sandbox environment before testing or deploying the Presentation Generator.

==================================================================================

Showcasing the Seamless Workflow of the Presentation Generator Tool

The screenshots provided showcase two key aspects of the Presentation Generator tool:

Input Form Page:

This page allows users to provide the necessary input parameters to generate a presentation.
The form fields include:
Grade Level: The education level for the presentation (e.g., University).
Number of Slides: The desired number of slides.
Topic: The subject or title of the presentation.
Objectives: The goals or learning objectives for the presentation.
Additional Comments: Additional notes or instructions for customization.
Language: The language for the presentation content (e.g., English).
File URLs and Types: Fields to upload and specify files for objectives and additional comments.

Once all fields are filled, the user clicks the "Generate" button to create the presentation.

Generated Presentation Preview Page:

This page displays the generated slides in a structured, user-friendly format.
Each slide includes:
Title: The heading for the slide.
Content: Detailed information related to the title.
Suggestions: Optional additional suggestions to enhance the slide.

Users can export the generated slides as a text file using the "Export Slides as Text" button, enabling easy sharing and saving.

[Cosmodocus]

Hey @arashghezavati, made some comments down below. Looks good overall, and I see you've picked up nicely on our patterns. Let me know if you have any questions

Also, if you could create a video of the feature itself on the PR description, that would be fantastic :)

[Cosmodocus]

Please remove this import statement. Latest react versions as the one we're currently on no longer require this

[Cosmodocus]

So good overall, but lets abstract these styling attributes over onto the styles.js where it would be better suited.

[Cosmodocus]

Great description, glad to see you're aware of our patterns in our repo

[Cosmodocus]

remove this comment please

[Cosmodocus]

remove all comments in this file please

[Cosmodocus]

Hey, the tests look good. However this is a fault on our end, we may ask to revert tests due to needing to have a setup that everyone could follow. I may ask you to revert these changes, or update them based on a pattern we will merge into develop. Just keep this in mind for now

[Cosmodocus]

So this would be best handled in a different file. Try abstracting this logic for exporting over onto this directory:

libs/utils/ToolHistoryUtils.js

[Cosmodocus]

So I see you've made update to the dependencies. Did you notice any errors?

Also I see hookform resolvers and yup as dependencies, but I don't see any implementations of them. Could you clarify on this?