+ {messages.map((msg) => {
+ const isBot = msg.sender === "bot";
+ return (
+
+
+
+
+ {msg.text}
+
+
+
+ {msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
+
+
+ );
+ })}
+ {isLoading && (
+
+ )}
+
+
+
+ {inputValue.length < 5 && (
+
+ {[
+ "Explain my contribution streak",
+ "Summarize my PR activity",
+ "What are my top repositories?",
+ "How can I improve consistency?"
+ ].map((suggestion, i) => (
+ handleSuggestionClick(suggestion)}
+ className="rounded-xl border border-blue-500/20 bg-blue-950/20 px-3 py-2 text-left text-[11px] font-mono text-blue-300 transition-all duration-200 hover:border-blue-400/60 hover:bg-blue-900/40 hover:shadow-[0_0_12px_rgba(59,130,246,0.25)]"
+ >
+ {suggestion}
+
+ ))}
+
+ )}
+
+
+
setInputValue(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder="Ask AI or query dashboard metrics..."
+ className="w-full h-10 pl-3.5 pr-12 rounded-xl bg-slate-900 border border-slate-800 text-slate-200 placeholder-slate-500 text-sm font-mono focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/40 focus:shadow-[0_0_15px_rgba(59,130,246,0.15)] transition-all"
+ />
+
+
+
handleSendMessage(inputValue)}
+ disabled={!inputValue.trim() || isLoading}
+ className={`absolute right-1.5 flex items-center justify-center w-7 h-7 rounded-lg transition-all duration-200 ${
+ inputValue.trim()
+ ? "bg-blue-600 text-white hover:bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
+ : "bg-slate-800 text-slate-500 cursor-not-allowed"
+ }`}
+ aria-label="Submit Prompt"
+ >
+
+
+
+
+