AI Assistants with Discovery Page for CoTeacher

[Ahmedr275]

Overview

This issue focuses on integrating the newly implemented AI Assistants feature into the Marvel-Platform repository by:

1. Adding a frontend Discovery Page for AI Assistants that displays the first AI Assistant, CoTeacher.
2. Removing the existing Chat feature and replacing it with the new AI Assistants framework.
3. Implementing the required database schema for tracking assistants and their configurations.

This issue is dependent on the successful completion of the backend setup for AI Assistants (referenced issue).

---

Purpose

To enhance the user experience by providing a dedicated frontend for AI Assistants, allowing educators to:

1. Discover available assistants (starting with CoTeacher).
2. Interact with the assistant in an improved, seamless interface.
3. Manage assistant-related configurations and preferences via the platform.

---

Folder Structure Update

To ensure maintainable code and better separation of concerns, the following updates have been made:

1. Tools Feature Refactoring

• A tools feature folder was created at the root directory.
• All tools-related logic has been moved to the tools folder.

2. Assistants Feature Refactoring

• An assistants feature folder was created at the root directory.
• Relevant logic for assistants has been moved into this folder, following a consistent structure with tools.

3. Libraries Consolidation

• A libs folder has been created at the root directory to house reusable libraries and utilities.
• All relevant shared logic has been moved into the libs folder.

These updates establish a clear boundary between features and shared components, ensuring scalability and easier navigation.

---

Deliverables

1. Frontend Discovery Page

• Overview:

  • Replace the current Chat functionality with a Discovery Page for AI Assistants.
  • Display the first AI Assistant, CoTeacher, using the provided backend structure.

• Requirements:

  • Build a new route: /assistants.
  • Design the page to include:
    • A grid layout for AI Assistants.
    • Information about each assistant (e.g., name, description, purpose).
    • A Launch button that opens the assistant interaction page.
  • Implement interactivity for CoTeacher:
    • Clicking on CoTeacher should open a chat interface where users can interact with the assistant.

• Design Reference:

  • Use attached designs/screenshots for guidance.
  • Ensure the layout is responsive and accessible.

2. Database Schema

• Schema Definition:

  • Define the database schema required for storing assistant information and tracking their configurations.
  • Add schema fields for:
    • Assistant metadata (e.g., name, description, status).
    • Any additional fields required for assistant management.
  • Ensure schema design allows for scalability to add more assistants in the future.

• Implementation:

  • Create and apply migrations for the database schema.
  • Seed the database with initial data for CoTeacher:
    • Name: CoTeacher
    • Description: "Your AI-powered teaching assistant for lesson planning, classroom management, and administrative support."
    • Status: Active.

---

Use Cases

1. Discovery Page:

   • Educators can browse available AI Assistants and click to interact with them.

2. Assistant Interaction:

   • CoTeacher provides actionable responses (via /assistants API) for lesson planning, classroom management, and administrative tasks.

---

Technical Details

Frontend:

• Replace the current Chat with the new /assistants route.
• Use React to build a grid-based layout for displaying assistants.
• Fetch available assistants from the backend /assistants endpoint.

Backend Dependency:

• Ensure this implementation is synced with the backend issue for AI Assistants.

Folder Structure:

• Ensure all assistant-related logic resides in the assistants feature folder.
• Shared logic and utilities should reside in the libs folder.

---

Acceptance Criteria

Frontend:

• New route /assistants is implemented and accessible.
• Discovery Page displays CoTeacher with its name, description, and a Launch button.
• Clicking the Launch button opens the CoTeacher chat interface.
• Responsive design is implemented for different screen sizes.

Database Schema:

• Define and document the database schema for assistants and their configurations.
• Schema supports metadata for assistants, including scalability for future additions.
• Create and apply migrations to implement the schema in the database.
• Seed database with initial data for CoTeacher.

Folder Structure:

• Ensure tools and assistants feature folders are created with similar structures.
• Relevant logic is moved into respective folders.
• Shared libraries are placed under the libs folder.

Testing:

• Unit tests for frontend components.
• Integration tests for the /assistants API.
• Database migration and seeding are verified in staging.

Review:

• Code is reviewed and approved by maintainers.
• All tests are passed, and the feature works end-to-end.

---

Dependencies

• Backend Issue: AI Assistant Backend Setup: Base Architecture and CoTeacher Implementation (link to issue).

---

Resources

• Figma Prototype