Feature Request: Switch to Avatar Mode from Chat Interface

[TarekAi]

🎯 Objective

Enable a "Switch to Avatar Mode" feature that transforms the traditional chat interface into a more engaging experience using a talking avatar and visual elements (like a whiteboard).

🖼️ UI Reference

As seen in the screenshot:

• Avatar stands on the left side, visually delivering the lesson.
• A whiteboard is used to display content (lesson points).
• A message header welcomes the user ("Hello Karim 👋").
• Standard chat controls (+, ⚠, 🖤) remain accessible at the bottom.

CHAT Mode

and then switch to AVATAR Mode

🔧 Features to Implement
🧠 Avatar Mode Activation:

• Add a toggle button (e.g. “Switch to Avatar Mode”) in the chat UI.
• On activation, the chat view is replaced by:
  • A 3D/2D animated avatar.
  • A whiteboard or screen displaying summarized chatbot responses.
  • TTS (text-to-speech) reads out the messages.

🧩 Chat Continuity

• Ensure messages sent in avatar mode are still logged in the chat history.
• Replies from the avatar are synchronized with animations + TTS.

📌 Tasks Summary

• Design & integrate Avatar Mode UI.
• Create toggle mechanism from chat to avatar mode.
• Implement avatar animations + pointing gestures.
• Display chatbot content dynamically on whiteboard.
• Add TTS support with control options.
• Maintain chat history in background for record-keeping.
• Ensure responsiveness and accessibility.

🎨 Styling Guidelines

• Keep design minimal, professional, and education-friendly.
• Avatar should be expressive but not distracting.
• Use light backgrounds and readable fonts.

🔄 Future Enhancements

• Interactive whiteboard tools (e.g., highlights, arrows).
• Animated gestures based on message intent.
• Avatar emotion syncing (smile, raise eyebrows, etc.).

[XredaX]

This issue has been resolved and can be closed @pr-elhajji @TarekAi