Open-TutorAi/open-tutor-ai-CE

馃摎 First Issue: Improve the Chat UI for a Better Tutoring Experience

Open

#21 opened on Feb 22, 2025

View on GitHubContributor guide
聽(0 comments)聽(0 reactions)聽(0 assignees)JavaScript聽(179 forks)auto 404
good first issue

Repository metrics

Stars
聽(84 stars)
PR merge metrics
聽(PR metrics pending)

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! 馃殌

Contributor guide

Research direction
Locate the chat UI component in the repository, typically named like ChatComponent.js. Analyze its current structure and implement improvements such as layout enhancement, typing indicator, dark mode support, or sound notifications. Ensure to test on both desktop and mobile. Compare the implementation with the existing UI patterns in the project.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85