From 792f0c8aae5416f4449dc891dab4ae0d583a528e Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Sat, 10 Jan 2026 01:05:08 +0100
Subject: [PATCH] style: modernize chat widget with glassmorphism and improve
 mobile layout

---
 app/components/ChatWidget.tsx | 94 +++++++++++++++++------------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/app/components/ChatWidget.tsx b/app/components/ChatWidget.tsx
index 466f736..f76a1bd 100644
--- a/app/components/ChatWidget.tsx
+++ b/app/components/ChatWidget.tsx
@@ -221,15 +221,15 @@ export default function ChatWidget() {
                 setIsOpen(true);
               }
             }}
-            className="fixed bottom-20 left-4 md:bottom-6 md:left-6 z-30 bg-stone-800/90 backdrop-blur-md text-stone-50 p-3 rounded-full shadow-xl hover:bg-stone-700/90 hover:scale-110 transition-all duration-300 group cursor-pointer border border-white/10"
+            className="fixed bottom-4 left-4 md:bottom-6 md:left-6 z-30 bg-stone-800/80 backdrop-blur-md text-stone-50 p-3.5 rounded-full shadow-[0_8px_20px_rgba(41,37,36,0.2)] hover:bg-stone-800 hover:scale-105 transition-all duration-300 group cursor-pointer border border-white/10 ring-1 ring-white/20"
             aria-label="Open chat"
           >
-            <MessageCircle size={20} />
-            <span className="absolute -top-1 -right-1 w-3 h-3 bg-stone-400 rounded-full animate-pulse shadow-sm" />
+            <MessageCircle size={24} />
+            <span className="absolute top-0 right-0 w-3 h-3 bg-stone-400 rounded-full animate-pulse shadow-sm border-2 border-stone-800" />
 
             {/* Tooltip */}
-            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-stone-900/90 text-stone-50 text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-lg">
-              Chat with AI assistant
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-stone-900/90 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-xl backdrop-blur-sm">
+              Chat with AI
             </span>
           </motion.div>
         )}
@@ -240,42 +240,42 @@ export default function ChatWidget() {
         {isOpen && (
           <motion.div
             data-chat-widget
-            initial={{ opacity: 0, y: 20, scale: 0.95 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: 20, scale: 0.95 }}
-            transition={{ type: "spring", damping: 25, stiffness: 300 }}
-            className="fixed bottom-20 left-4 md:bottom-6 md:left-6 z-30 w-[300px] sm:w-[340px] md:w-[380px] max-w-[calc(100vw-2rem)] h-[450px] sm:h-[500px] md:h-[550px] max-h-[calc(100vh-10rem)] bg-[#fdfcf8]/90 backdrop-blur-xl rounded-2xl shadow-2xl flex flex-col overflow-hidden border border-stone-200/50 [&_a]:text-inherit [&_a]:no-underline [&_a]:text-stone-800 [&_a:hover]:text-stone-900 [&_a:visited]:text-stone-800 [&_a:active]:text-stone-900 [&_*]:outline-none [&_*:focus]:outline-none [&_*:focus-visible]:outline-none"
+            initial={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
+            animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
+            exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
+            transition={{ type: "spring", damping: 30, stiffness: 400 }}
+            className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-[#fdfcf8]/60 backdrop-blur-2xl saturate-150 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.15)] flex flex-col overflow-hidden border border-white/40 ring-1 ring-white/50"
           >
             {/* Header */}
-            <div className="bg-[#f3f1e7]/80 backdrop-blur-md text-stone-800 p-3 md:p-4 flex items-center justify-between border-b border-stone-200/50">
+            <div className="bg-white/40 backdrop-blur-lg text-stone-800 p-4 flex items-center justify-between border-b border-white/30">
               <div className="flex items-center gap-3">
                 <div className="relative">
-                  <div className="w-10 h-10 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center ring-1 ring-stone-200 shadow-sm">
-                    <Sparkles size={20} className="text-stone-600" />
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-stone-100 to-white flex items-center justify-center ring-1 ring-white shadow-sm">
+                    <Sparkles size={18} className="text-stone-600" />
                   </div>
-                  <span className="absolute bottom-0 right-0 w-3 h-3 bg-stone-400 rounded-full border-2 border-[#f3f1e7] shadow-sm" />
+                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-400 rounded-full border-2 border-white shadow-sm" />
                 </div>
                 <div className="min-w-0 flex-1">
-                  <h3 className="font-bold text-sm truncate text-stone-800">
-                    Dennis{"'"}s AI Assistant
+                  <h3 className="font-bold text-sm truncate text-stone-900 tracking-tight">
+                    Assistant
                   </h3>
-                  <p className="text-xs text-stone-500 truncate">
-                    Always online
+                  <p className="text-[11px] font-medium text-stone-500 truncate">
+                    Powered by AI
                   </p>
                 </div>
               </div>
 
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1">
                 <button
                   onClick={clearChat}
-                  className="p-2 hover:bg-stone-200/50 rounded-lg transition-colors text-stone-500 hover:text-stone-800"
+                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-red-500"
                   title="Clear conversation"
                 >
-                  <Trash2 size={18} />
+                  <Trash2 size={16} />
                 </button>
                 <button
                   onClick={() => setIsOpen(false)}
-                  className="p-2 hover:bg-stone-200/50 rounded-lg transition-colors text-stone-500 hover:text-stone-800"
+                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-stone-900"
                   aria-label="Close chat"
                 >
                   <X size={20} />
@@ -284,7 +284,7 @@ export default function ChatWidget() {
             </div>
 
             {/* Messages */}
-            <div className="flex-1 overflow-y-auto scrollbar-hide p-3 md:p-4 space-y-3 md:space-y-4 bg-transparent">
+            <div className="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-4 bg-transparent">
               {messages.map((message) => (
                 <motion.div
                   key={message.id}
@@ -293,21 +293,21 @@ export default function ChatWidget() {
                   className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
                 >
                   <div
-                    className={`max-w-[80%] rounded-2xl px-4 py-2.5 backdrop-blur-sm ${
+                    className={`max-w-[85%] rounded-2xl px-4 py-3 backdrop-blur-md shadow-sm ${
                       message.sender === "user"
-                        ? "bg-stone-800 text-stone-50 shadow-md"
-                        : "bg-white/80 backdrop-blur-sm text-stone-800 border border-stone-100 shadow-sm"
+                        ? "bg-stone-800/90 text-stone-50"
+                        : "bg-white/60 text-stone-800 border border-white/50"
                     }`}
                   >
-                    <p className={`text-sm whitespace-pre-wrap break-words leading-relaxed [&_a]:text-inherit [&_a]:no-underline [&_a]:text-current [&_a:hover]:text-current [&_a:visited]:text-current [&_a:active]:text-current ${
-                      message.sender === "user" ? "text-stone-50" : "text-stone-800"
+                    <p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${
+                      message.sender === "user" ? "text-stone-50 font-light" : "text-stone-800 font-normal"
                     }`}>
                       {message.text}
                     </p>
                     <p
                       className={`text-[10px] mt-1.5 ${
                         message.sender === "user"
-                          ? "text-stone-300"
+                          ? "text-stone-400"
                           : "text-stone-400"
                       }`}
                     >
@@ -327,11 +327,11 @@ export default function ChatWidget() {
                   animate={{ opacity: 1, y: 0 }}
                   className="flex justify-start"
                 >
-                  <div className="bg-white/80 backdrop-blur-sm border border-stone-100 rounded-2xl px-4 py-3 shadow-sm">
+                  <div className="bg-white/50 backdrop-blur-sm border border-white/40 rounded-2xl px-4 py-3 shadow-sm">
                     <div className="flex gap-1.5">
                       <motion.div
-                        className="w-2 h-2 bg-stone-400 rounded-full"
-                        animate={{ y: [0, -8, 0] }}
+                        className="w-1.5 h-1.5 bg-stone-400 rounded-full"
+                        animate={{ y: [0, -6, 0] }}
                         transition={{
                           duration: 0.6,
                           repeat: Infinity,
@@ -339,8 +339,8 @@ export default function ChatWidget() {
                         }}
                       />
                       <motion.div
-                        className="w-2 h-2 bg-stone-400 rounded-full"
-                        animate={{ y: [0, -8, 0] }}
+                        className="w-1.5 h-1.5 bg-stone-400 rounded-full"
+                        animate={{ y: [0, -6, 0] }}
                         transition={{
                           duration: 0.6,
                           repeat: Infinity,
@@ -348,8 +348,8 @@ export default function ChatWidget() {
                         }}
                       />
                       <motion.div
-                        className="w-2 h-2 bg-stone-400 rounded-full"
-                        animate={{ y: [0, -8, 0] }}
+                        className="w-1.5 h-1.5 bg-stone-400 rounded-full"
+                        animate={{ y: [0, -6, 0] }}
                         transition={{
                           duration: 0.6,
                           repeat: Infinity,
@@ -365,7 +365,7 @@ export default function ChatWidget() {
             </div>
 
             {/* Input */}
-            <div className="p-3 md:p-4 bg-white/40 backdrop-blur-md border-t border-stone-200/50">
+            <div className="p-4 bg-white/30 backdrop-blur-xl border-t border-white/30">
               <div className="flex gap-2">
                 <input
                   ref={inputRef}
@@ -375,37 +375,37 @@ export default function ChatWidget() {
                   onKeyPress={handleKeyPress}
                   placeholder="Ask anything..."
                   disabled={isLoading}
-                  className="flex-1 px-4 py-2.5 text-sm bg-white/80 backdrop-blur-sm text-stone-800 rounded-full border border-stone-200 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 focus:bg-white disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-stone-400 transition-all focus-visible:ring-stone-200 focus-visible:border-stone-400"
+                  className="flex-1 px-4 py-3 text-sm bg-white/60 backdrop-blur-sm text-stone-800 rounded-xl border border-white/50 focus:outline-none focus:ring-2 focus:ring-stone-200/50 focus:border-stone-400/50 focus:bg-white/80 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-stone-400 transition-all shadow-inner"
                 />
                 <button
                   onClick={handleSend}
                   disabled={!inputValue.trim() || isLoading}
-                  className="p-2.5 bg-stone-800 text-stone-50 rounded-full hover:bg-stone-700 hover:shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-md"
+                  className="p-3 bg-stone-800 text-stone-50 rounded-xl hover:bg-stone-700 hover:shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-md flex items-center justify-center aspect-square"
                   aria-label="Send message"
                 >
                   {isLoading ? (
-                    <Loader2 size={20} className="animate-spin" />
+                    <Loader2 size={18} className="animate-spin" />
                   ) : (
-                    <Send size={20} />
+                    <Send size={18} />
                   )}
                 </button>
               </div>
 
               {/* Quick Actions */}
-              <div className="flex gap-2 mt-2.5 overflow-x-auto pb-1 scrollbar-hide">
+              <div className="flex gap-2 mt-3 overflow-x-auto pb-1 scrollbar-hide mask-fade-right">
                 {[
-                  "What are Dennis's skills?",
-                  "Tell me about his projects",
-                  "How can I contact him?",
+                  "Skills 🛠️",
+                  "Projects 🚀",
+                  "Contact 📧",
                 ].map((suggestion, index) => (
                   <button
                     key={index}
                     onClick={() => {
-                      setInputValue(suggestion);
+                      setInputValue(suggestion.replace(/ .*/, '')); // Strip emoji for search if needed, or keep
                       inputRef.current?.focus();
                     }}
                     disabled={isLoading}
-                    className="px-3 py-1.5 text-[10px] md:text-xs bg-white/60 backdrop-blur-sm text-stone-600 rounded-full hover:bg-white hover:text-stone-900 border border-stone-200 transition-all whitespace-nowrap disabled:opacity-50 flex-shrink-0 shadow-sm"
+                    className="px-3 py-1.5 text-xs font-medium bg-white/40 backdrop-blur-md text-stone-600 rounded-lg hover:bg-white/70 hover:text-stone-900 border border-white/40 transition-all whitespace-nowrap disabled:opacity-50 flex-shrink-0 shadow-sm"
                   >
                     {suggestion}
                   </button>