From e19582201f4d4819610008d3ff9f1e615995ca81 Mon Sep 17 00:00:00 2001
From: Roberto Musso <rmusso@neuraldesk.local>
Date: Thu, 26 Feb 2026 16:36:13 +0100
Subject: [PATCH] feat: enhance AIChatPanel UI with improved button styles and
 layout adjustments

---
 src/renderer/components/ai/AIChatPanel.tsx | 49 +++++++++-------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/renderer/components/ai/AIChatPanel.tsx b/src/renderer/components/ai/AIChatPanel.tsx
index ae57c10..c168a03 100644
--- a/src/renderer/components/ai/AIChatPanel.tsx
+++ b/src/renderer/components/ai/AIChatPanel.tsx
@@ -308,15 +308,15 @@ export function AIChatPanel({
                   onSend={handleSend}
                   isHomePage={isHomePage}
                 />
-                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3">
+                <div className="flex flex-wrap items-center justify-center gap-2 mt-4">
                   {SUGGESTION_CHIPS.map((chip) => (
                     <button
                       key={chip.label}
                       type="button"
-                      className="flex items-start gap-2 rounded-xl border border-border bg-background px-3 py-2.5 text-left text-sm text-foreground shadow-sm transition-colors hover:bg-muted cursor-pointer"
+                      className="group flex items-center gap-2 rounded-full border border-border/50 bg-background/60 backdrop-blur-lg px-4 py-2 text-sm text-foreground shadow-sm ring-1 ring-border/20 transition-all hover:shadow-md hover:-translate-y-0.5 hover:border-ring/40 cursor-pointer"
                       onClick={() => setInput(chip.label)}
                     >
-                      <chip.icon size={16} className="shrink-0 mt-0.5 text-muted-foreground" />
+                      <chip.icon size={14} className="shrink-0 text-muted-foreground transition-colors group-hover:text-foreground" />
                       <span>{chip.label}</span>
                     </button>
                   ))}
@@ -328,7 +328,7 @@ export function AIChatPanel({
 
         {/* Home page with messages: brief stays, then messages */}
         {isHomePage && hasMessages && (
-          <div className="mx-auto w-full max-w-3xl px-6 pt-8 pb-44">
+          <div className="mx-auto w-full max-w-3xl px-6 pt-8 pb-32">
             <div className="flex flex-col gap-4">
               {/* Brief persists */}
               {dailyBrief && (
@@ -397,7 +397,7 @@ export function AIChatPanel({
 
         {/* Non-home messages */}
         {!isHomePage && hasMessages && (
-          <div className="mx-auto w-full max-w-[1088px] px-6 pt-4 pb-44">
+          <div className="mx-auto w-full max-w-[1088px] px-6 pt-4 pb-32">
             <div className="flex flex-col gap-4">
               {messages.map((msg) => {
                 if (msg.role === 'user') {
@@ -459,8 +459,8 @@ export function AIChatPanel({
 
       {/* Fixed input — pinned to the bottom (hidden on home initial state) */}
       {!(isHomePage && !hasMessages) && (
-        <div className="absolute bottom-0 left-0 right-0 z-10 px-6 pb-4 pt-12 pointer-events-none">
-          <div className="absolute inset-x-0 top-0 h-full bg-gradient-to-b from-transparent via-background/80 to-background" />
+        <div className="absolute bottom-0 left-0 right-0 z-10 px-6 pb-5 pt-16 pointer-events-none">
+          <div className="absolute inset-x-0 top-0 h-full bg-gradient-to-b from-transparent via-background/60 to-background/90" />
           <div className={`relative pointer-events-auto mx-auto ${isHomePage ? 'max-w-3xl' : 'max-w-[1088px]'}`}>
             <ChatInput
               input={input}
@@ -494,34 +494,23 @@ function ChatInput({
   onInputChange,
   onKeyDown,
   onSend,
-  isHomePage,
 }: ChatInputProps) {
   return (
-    <div
-      className={
-        isHomePage
-          ? 'relative rounded-2xl bg-white dark:bg-neutral-900 border border-[#d4d4d4] shadow-lg overflow-hidden'
-          : 'relative rounded-2xl bg-muted/60 backdrop-blur-xl border border-border shadow-[0_2px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_2px_20px_rgba(0,0,0,0.3)] overflow-hidden'
-      }
-    >
-      <textarea
-        value={input}
-        onChange={(e) => onInputChange(e.target.value)}
-        onKeyDown={onKeyDown}
-        placeholder="Ask me anything..."
-        rows={isHomePage ? 4 : 3}
-        style={isHomePage ? { minHeight: 109 } : undefined}
-        className="w-full resize-none bg-transparent px-4 pt-4 pb-12 text-sm placeholder:text-muted-foreground outline-none"
-      />
-      <div className="absolute bottom-3 right-3">
+    <div className="relative rounded-2xl bg-background/70 backdrop-blur-xl border border-border/50 shadow-lg ring-1 ring-border/20 transition-shadow focus-within:shadow-xl focus-within:border-ring/50">
+      <div className="flex items-center gap-2 px-4 py-2.5">
+        <textarea
+          value={input}
+          onChange={(e) => onInputChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder="Ask me anything..."
+          rows={1}
+          className="flex-1 resize-none bg-transparent text-sm placeholder:text-muted-foreground outline-none max-h-[7.5rem] overflow-y-auto"
+          style={{ fieldSizing: 'content' } as React.CSSProperties}
+        />
         <button
           onClick={onSend}
           disabled={!input.trim() || isStreaming}
-          className={`flex h-8 w-8 items-center justify-center rounded-xl shadow-sm transition-opacity hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed ${
-            isHomePage
-              ? 'bg-foreground text-background'
-              : 'bg-primary text-primary-foreground'
-          }`}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm transition-all hover:bg-primary/90 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed disabled:active:scale-100"
         >
           <ArrowUp size={16} />
         </button>