{/* Header */}

Meet Alex - Your EdovationHub Mentor

Your personal guide for programming and career development

{/* Chat Container */}

{/* Messages */}

{messages.map((message, index) => (

{message.role === "assistant" && ( )}

{message.content}

))} {isLoading && (

)}

{/* Error Message */} {error && (

{error}

)} {/* Input Area */}

setInputMessage(e.target.value)}
                onKeyPress={handleKeyPress}
                placeholder="Ask me about programming, career advice, learning paths..."
                className="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none font-roboto"
                rows="2"
                disabled={isLoading}
              />
              <button
                onClick={sendMessage}
                disabled={!inputMessage.trim() || isLoading}
                className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-roboto"
              >
                <i className="fas fa-paper-plane"></i>
              </button>
            </div>
          </div>
        </div>

{/* Quick Start Topics */}
        <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="bg-white p-4 rounded-lg shadow-md">
            <h3 className="font-semibold text-gray-800 mb-2 font-inter">
              <i className="fas fa-code text-green-600 mr-2"></i>
              Programming Help
            </h3>
            <p className="text-sm text-gray-600 font-roboto">
              Get help with coding problems, debugging, and best practices
            </p>
          </div>
          <div className="bg-white p-4 rounded-lg shadow-md">
            <h3 className="font-semibold text-gray-800 mb-2 font-inter">
              <i className="fas fa-briefcase text-purple-600 mr-2"></i>
              Career Guidance
            </h3>
            <p className="text-sm text-gray-600 font-roboto">
              Advice on career paths, job interviews, and skill development
            </p>
          </div>
          <div className="bg-white p-4 rounded-lg shadow-md">
            <h3 className="font-semibold text-gray-800 mb-2 font-inter">
              <i className="fas fa-book text-orange-600 mr-2"></i>
              Learning Paths
            </h3>
            <p className="text-sm text-gray-600 font-roboto">
              Personalized roadmaps for learning new technologies
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
</article></body></html>