Open-TutorAi/open-tutor-ai-CE

đź“š First Issue: Improve the Chat UI for a Better Tutoring Experience

Ouverte

#21 ouverte le 22 févr. 2025

Voir sur GitHubGuide contributeur
 (0 commentaire) (0 réaction) (0 personne assignée)JavaScript (179 forks)auto 404
good first issue

Métriques du dépôt

Stars
 (84 étoiles)
MĂ©triques de merge PR
 (Aucune PR mergée en 30 j)

Description

đź“š First Issue: Improve the Chat UI for a Better Tutoring Experience

Description

The chat interface is a key part of the tutoring experience. We need to improve its UI/UX to make interactions smoother and more engaging for students.

Suggested Improvements

  • 🎨 Better Layout: Ensure messages are well-structured and easy to read.
  • đź’¬ Typing Indicator: Show when the AI tutor is generating a response.
  • 🌙 Dark Mode Support: Allow users to switch between light and dark mode.
  • đź”” Sound Notifications: Add optional sound alerts for new messages.

Getting Started

  1. Fork and clone the repo.
  2. Locate the chat UI component (ChatComponent.js or similar).
  3. Implement one or more improvements from the list above.
  4. Test the UI on desktop and mobile.
  5. Submit a PR with before/after screenshots.

Tech Stack

  • Frontend: React, Next.js, Vue (or your stack)
  • Styling: Tailwind, CSS Modules, Bootstrap

Tasks

  • Improve chat layout and readability.
  • Add a typing indicator for the AI tutor.
  • Ensure dark mode compatibility.
  • Test and submit a PR.

Priority

🟢 Beginner-Friendly

Additional Notes

This is a great issue for frontend developers who enjoy UI/UX improvements! 🚀

Guide contributeur

Direction de recherche
Localisez le composant d'interface utilisateur du chat dans le dépôt, généralement nommé ChatComponent.js. Analysez sa structure actuelle et implémentez des améliorations telles que l'amélioration de la mise en page, l'indicateur de frappe, la prise en charge du mode sombre ou les notifications sonores. Assurez vous de tester à la fois sur le bureau et sur mobile. Comparez l'implémentation avec les modèles d'interface utilisateur existants dans le projet.
Stack technique
javascriptreact
Domaine
frontend
Type d'issue
Fonctionnalité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
1
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
GitReact
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
85