Skip to content

Commit b47cb12

Browse files
devendrasaimdevendrasaim
committed
feat: refine chatbot persona and UI
1 parent 4e16b70 commit b47cb12

2 files changed

Lines changed: 61 additions & 38 deletions

File tree

‎components/chat-widget.tsx‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function ChatWidget() {
9595
>
9696
{isOpen ? <X className="w-6 h-6" /> : <Terminal className="w-6 h-6" />}
9797
{!isOpen && (
98-
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse" />
98+
<span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-[0_0_10px_rgba(34,197,94,0.5)]" />
9999
)}
100100
</motion.button>
101101

@@ -115,22 +115,26 @@ export function ChatWidget() {
115115
scale: 0.9,
116116
transition: { duration: 0.2 }
117117
}}
118-
className="fixed bottom-24 right-6 z-40 max-w-[200px]"
118+
className="fixed bottom-24 right-6 z-40 max-w-[220px]"
119119
>
120-
<div className="relative bg-background/80 backdrop-blur-md border border-purple-500/80 p-3 rounded-lg shadow-[0_0_15px_rgba(168,85,247,0.15)]">
121-
<p className="text-xs font-mono text-purple-400 leading-relaxed pr-2">
122-
Free to ask any questions. I am Devendra's AI assistant.
120+
<div className="relative bg-background/90 backdrop-blur-md border border-cyan/30 p-4 rounded-sm shadow-[0_0_15px_rgba(6,182,212,0.15)]">
121+
<div className="flex items-center gap-2 mb-2 border-b border-cyan/10 pb-2">
122+
<div className="w-1.5 h-1.5 bg-cyan rounded-full animate-pulse" />
123+
<span className="font-mono text-[10px] tracking-widest text-cyan uppercase">Incoming Transmission</span>
124+
</div>
125+
<p className="text-xs font-mono text-muted-foreground leading-relaxed pr-2">
126+
"Greetings. I am the system AI. Query me regarding projects or skills."
123127
</p>
124128
{/* Triangle Tail */}
125-
<div className="absolute -bottom-2 right-6 w-4 h-4 bg-background/80 border-b border-r border-purple-500/80 transform rotate-45"></div>
129+
<div className="absolute -bottom-2 right-6 w-4 h-4 bg-background/90 border-b border-r border-cyan/30 transform rotate-45"></div>
126130

127131
{/* Close Button */}
128132
<button
129133
onClick={(e) => {
130134
e.stopPropagation();
131135
setShowNotification(false);
132136
}}
133-
className="absolute -top-3 -left-3 z-50 bg-zinc-950 border border-purple-500/50 rounded-full p-1.5 hover:bg-purple-900/20 text-purple-400 transition-colors shadow-md cursor-pointer flex items-center justify-center group"
137+
className="absolute -top-2 -left-2 z-50 bg-background border border-cyan/50 rounded-full p-1 hover:bg-cyan/10 text-cyan transition-colors shadow-md cursor-pointer flex items-center justify-center group"
134138
aria-label="Close notification"
135139
>
136140
<X className="w-3 h-3 group-hover:scale-110 transition-transform" />
@@ -148,53 +152,66 @@ export function ChatWidget() {
148152
animate={{ opacity: 1, y: 0, scale: 1 }}
149153
exit={{ opacity: 0, y: 20, scale: 0.95 }}
150154
transition={{ duration: 0.2 }}
151-
className="fixed bottom-24 right-6 z-50 w-[90vw] md:w-[400px] h-[550px] max-h-[75vh] flex flex-col rounded-2xl overflow-hidden border border-zinc-800 bg-zinc-950/95 backdrop-blur-xl shadow-2xl"
155+
className="fixed bottom-24 right-6 z-50 w-[90vw] md:w-[400px] h-[550px] max-h-[75vh] flex flex-col rounded-sm overflow-hidden border border-cyan/30 bg-background/95 backdrop-blur-xl shadow-[0_0_30px_rgba(0,0,0,0.5)]"
152156
>
153-
{/* Header */}
154-
<div className="flex items-center justify-between px-4 py-4 border-b border-zinc-800 bg-zinc-900/50">
157+
{/* Terminal Header */}
158+
<div className="flex items-center justify-between px-4 py-3 border-b border-cyan/20 bg-cyan/5">
155159
<div className="flex items-center gap-2">
156-
<span className="font-sans text-sm font-semibold tracking-wide text-zinc-100">
157-
Ask DevendraAI
160+
<Terminal className="w-4 h-4 text-cyan" />
161+
<span className="font-mono text-[11px] tracking-widest text-cyan uppercase">
162+
SYS.NET // LINK ESTABLISHED
158163
</span>
159164
</div>
160-
<button onClick={() => setIsOpen(false)} className="text-zinc-500 hover:text-white transition-colors">
161-
<X className="w-5 h-5" />
162-
</button>
165+
<div className="flex items-center gap-4">
166+
<div className="flex gap-1.5">
167+
<div className="w-2 h-2 rounded-full bg-cyan/20" />
168+
<div className="w-2 h-2 rounded-full bg-cyan/20" />
169+
<div className="w-2 h-2 rounded-full bg-cyan" />
170+
</div>
171+
</div>
163172
</div>
164173

165174
{/* Messages Area */}
166175
<div
167176
ref={scrollRef}
168-
className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin scrollbar-thumb-zinc-700/50 scrollbar-track-transparent"
177+
className="flex-1 overflow-y-auto p-4 space-y-6 scrollbar-thin scrollbar-thumb-cyan/20 scrollbar-track-transparent"
169178
>
170179
{messages.map((msg, i) => (
171180
<div
172181
key={i}
173-
className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
182+
className={`flex flex-col ${msg.role === "user" ? "items-end" : "items-start"}`}
174183
>
184+
<span className={`text-[10px] font-mono tracking-wider mb-1 ${msg.role === "user" ? "text-cyan/60" : "text-green/60"}`}>
185+
{msg.role === "user" ? "USER.CMD" : "SYS.RESPONSE"}
186+
</span>
175187
<div
176-
className={`max-w-[85%] p-3.5 rounded-2xl text-sm leading-relaxed ${
188+
className={`max-w-[85%] p-3 rounded-sm text-sm leading-relaxed border ${
177189
msg.role === "user"
178-
? "bg-purple-600 text-white rounded-br-none"
179-
: "bg-zinc-800/80 text-zinc-200 rounded-bl-none border border-zinc-700/50"
190+
? "bg-cyan/10 border-cyan/30 text-cyan-100 rounded-tr-none"
191+
: "bg-background border-border text-muted-foreground rounded-tl-none"
180192
}`}
181193
>
182-
<p className="whitespace-pre-wrap">{renderMessage(msg.text)}</p>
194+
<p className="whitespace-pre-wrap font-sans">{renderMessage(msg.text)}</p>
183195
</div>
184196
</div>
185197
))}
186198

187-
{/* Suggested Prompts (Only show if only 1 message exists) */}
199+
{/* Suggested Prompts */}
188200
{messages.length === 1 && (
189-
<div className="flex flex-col gap-2 mt-4 px-1">
201+
<div className="flex flex-col gap-2 mt-8 px-1">
202+
<div className="flex items-center gap-2 mb-2 opacity-50">
203+
<div className="h-px flex-1 bg-cyan/30" />
204+
<span className="font-mono text-[10px] text-cyan uppercase">Quick Commands</span>
205+
<div className="h-px flex-1 bg-cyan/30" />
206+
</div>
190207
{suggestions.map((s, i) => (
191208
<button
192209
key={i}
193210
onClick={() => handleSend(s.label)}
194-
className="flex items-center gap-3 p-3 rounded-xl bg-zinc-900/50 border border-zinc-800 hover:border-purple-500/50 hover:bg-zinc-800 transition-all text-left group"
211+
className="flex items-center gap-3 p-3 rounded-sm border border-dashed border-cyan/20 hover:border-cyan/50 hover:bg-cyan/5 transition-all text-left group"
195212
>
196-
<span className="text-lg">{s.icon}</span>
197-
<span className="text-sm text-zinc-400 group-hover:text-purple-300 transition-colors">
213+
<span className="text-base filter grayscale group-hover:grayscale-0 transition-all">{s.icon}</span>
214+
<span className="text-xs font-mono text-muted-foreground group-hover:text-cyan transition-colors">
198215
{s.label}
199216
</span>
200217
</button>
@@ -203,33 +220,38 @@ export function ChatWidget() {
203220
)}
204221

205222
{isLoading && (
206-
<div className="flex justify-start">
207-
<div className="bg-zinc-800/80 border border-zinc-700/50 p-3 rounded-2xl rounded-bl-none flex items-center gap-2">
208-
<Loader2 className="w-4 h-4 text-purple-400 animate-spin" />
209-
<span className="text-xs text-zinc-400">Thinking...</span>
223+
<div className="flex flex-col items-start">
224+
<span className="text-[10px] font-mono tracking-wider mb-1 text-green/60">SYS.PROCESSING</span>
225+
<div className="bg-background border border-border p-3 rounded-sm rounded-tl-none flex items-center gap-2">
226+
<Loader2 className="w-3.5 h-3.5 text-cyan animate-spin" />
227+
<span className="text-xs font-mono text-cyan animate-pulse">Computing response...</span>
210228
</div>
211229
</div>
212230
)}
213231
</div>
214232

215233
{/* Input Area */}
216-
<form onSubmit={handleSubmit} className="p-4 bg-zinc-900/30">
217-
<div className="relative flex items-center gap-2 bg-zinc-900/80 border border-zinc-800 rounded-full px-2 py-1.5 focus-within:border-purple-500/50 focus-within:ring-1 focus-within:ring-purple-500/20 transition-all">
234+
<form onSubmit={handleSubmit} className="p-2 bg-background border-t border-cyan/20">
235+
<div className="relative flex items-center gap-2 bg-black/30 border border-cyan/30 rounded-sm px-3 py-2 focus-within:border-cyan/70 focus-within:bg-cyan/5 transition-all">
236+
<span className="text-cyan font-mono">{">"}</span>
218237
<input
219238
type="text"
220239
value={input}
221240
onChange={(e) => setInput(e.target.value)}
222-
placeholder="Ask about skills, projects..."
223-
className="flex-1 bg-transparent border-none outline-none text-sm text-zinc-200 placeholder:text-zinc-500 px-3 py-2 focus:ring-0"
241+
placeholder="Enter command..."
242+
className="flex-1 bg-transparent border-none outline-none text-sm font-mono text-cyan placeholder:text-cyan/30 focus:ring-0"
224243
/>
225244
<button
226245
type="submit"
227246
disabled={isLoading || !input.trim()}
228-
className="p-2 rounded-full bg-purple-600 hover:bg-purple-500 text-white disabled:opacity-50 disabled:bg-zinc-700 transition-all"
247+
className="p-1.5 rounded-sm hover:bg-cyan/20 text-cyan disabled:opacity-30 transition-all"
229248
>
230-
<Send className="w-4 h-4 ml-0.5" />
249+
<Send className="w-4 h-4" />
231250
</button>
232251
</div>
252+
<div className="flex justify-between px-1 mt-1">
253+
<span className="text-[9px] font-mono text-cyan/30">SECURE CHANNEL // ENCRYPTED</span>
254+
</div>
233255
</form>
234256
</motion.div>
235257
)}

‎lib/system-prompt.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ export const SYSTEM_PROMPT = `
22
You are a helpful and professional AI assistant for Devendra Sai Mupparaju's portfolio website. Your role is to answer questions about Devendra's skills, projects, and experience based ONLY on the following context. If you don't know something, simply say you don't have that information and suggest contacting him directly.
33
44
TONE:
5-
- Professional, friendly, and conversational.
5+
- Professional, friendly, and conversational (Human-like).
66
- Concise and precise (keep answers under 3-4 sentences unless necessary).
7-
- Do NOT use robotic functionality terms like "Affirmative", "Query Verified", or "Loading Data".
7+
- Do NOT use robotic functionality terms like "Affirmative" or "Query Verified" in your sentences.
88
- Speak naturally, like a human recruiter or assistant.
9+
- If asked "Who are you?", you can playfully say: "I'm the system intelligence for this portfolio, powered by Devendra's professional history. Happy to help!"
910
1011
CONTEXT:
1112

0 commit comments

Comments
 (0)