From 89a5f5259b74c77da44054909bb867d4c5dc3efa Mon Sep 17 00:00:00 2001
From: shine1i <wasimysdev@gmail.com>
Date: Sun, 1 Feb 2026 08:09:17 +0100
Subject: [PATCH] refactor: chat input bg with fade, reuse it in composer view
 as well

---
 frontend/src/components/assistant-ui/thread.tsx | 7 ++++---
 frontend/src/features/chat/chat-page.tsx        | 2 +-
 frontend/src/features/chat/shared-composer.tsx  | 2 +-
 frontend/src/features/chat/thread-sidebar.tsx   | 3 +--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/assistant-ui/thread.tsx b/frontend/src/components/assistant-ui/thread.tsx
index 6ec6022ff0..2ddf6fa65e 100644
--- a/frontend/src/components/assistant-ui/thread.tsx
+++ b/frontend/src/components/assistant-ui/thread.tsx
@@ -66,7 +66,7 @@ export const Thread: FC<{ hideComposer?: boolean; hideWelcome?: boolean }> = ({
           }}
         />
 
-        <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl pb-4 md:pb-4">
+        <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mt-auto flex w-full flex-col gap-4 overflow-visible bg-background pb-4 md:pb-4 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-full before:h-20 before:bg-gradient-to-t before:from-background before:to-transparent">
           <ThreadScrollToBottom />
           <AuiIf condition={({ thread }) => !thread.isEmpty}>
             {!hideComposer && <ComposerAnimated />}
@@ -138,6 +138,7 @@ const ComposerAnimated: FC = () => {
       layout={true}
       layoutId="composer"
       transition={{ type: "spring", bounce: 0.15, duration: 0.5 }}
+      className="mx-auto w-full max-w-(--thread-max-width)"
     >
       <Composer />
     </motion.div>
@@ -147,11 +148,11 @@ const ComposerAnimated: FC = () => {
 const Composer: FC = () => {
   return (
     <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
-      <ComposerPrimitive.AttachmentDropzone className="aui-composer-attachment-dropzone shadow-border ring-1 ring-border flex w-full flex-col rounded-2xl bg-background px-1 pt-2 outline-none transition-shadow has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/75 data-[dragging=true]:ring-ring data-[dragging=true]:bg-accent/50">
+      <ComposerPrimitive.AttachmentDropzone className="aui-composer-attachment-dropzone shadow-border ring-1 ring-border flex w-full flex-col rounded-2xl bg-background px-1 pt-2 outline-none transition-shadow data-[dragging=true]:ring-ring data-[dragging=true]:bg-accent/50">
         <ComposerAttachments />
         <ComposerPrimitive.Input
           placeholder="Send a message..."
-          className="aui-composer-input mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0"
+          className="aui-composer-input mb-1 max-h-32 min-h-12 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-0"
           rows={1}
           autoFocus={true}
           aria-label="Message input"
diff --git a/frontend/src/features/chat/chat-page.tsx b/frontend/src/features/chat/chat-page.tsx
index 76f39f97a7..cc1fdfbe6a 100644
--- a/frontend/src/features/chat/chat-page.tsx
+++ b/frontend/src/features/chat/chat-page.tsx
@@ -187,7 +187,7 @@ function InlineSidebar({
         data-sidebar="sidebar"
         className={cn(
           "bg-sidebar text-sidebar-foreground h-full overflow-hidden transition-[width] duration-200 ease-linear",
-          !collapsed && (side === "left" ? "border-r border-sidebar-border" : "border-l border-sidebar-border"),
+          !collapsed && (side === "left" ? "border-r border-0 border-sidebar-border" : "border-l border-0 border-sidebar-border"),
           collapsed ? "w-0" : "w-(--sidebar-width)",
         )}
       >
diff --git a/frontend/src/features/chat/shared-composer.tsx b/frontend/src/features/chat/shared-composer.tsx
index 76ce776119..f990d42b5a 100644
--- a/frontend/src/features/chat/shared-composer.tsx
+++ b/frontend/src/features/chat/shared-composer.tsx
@@ -114,7 +114,7 @@ export function SharedComposer({
   }
 
   return (
-    <div className="shadow-border ring-1 ring-border relative flex w-full flex-col rounded-2xl bg-background px-1 pt-2 transition-shadow has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring/20">
+    <div className="shadow-border ring-1 ring-border relative flex w-full flex-col rounded-2xl bg-background px-1 pt-2 transition-shadow">
       <textarea
         ref={textareaRef}
         value={text}
diff --git a/frontend/src/features/chat/thread-sidebar.tsx b/frontend/src/features/chat/thread-sidebar.tsx
index f1db67651c..427b1fdf98 100644
--- a/frontend/src/features/chat/thread-sidebar.tsx
+++ b/frontend/src/features/chat/thread-sidebar.tsx
@@ -8,7 +8,6 @@ import {
   SidebarMenuAction,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarSeparator,
 } from "@/components/ui/sidebar";
 import {
   ColumnInsertIcon,
@@ -125,7 +124,7 @@ export function ThreadSidebar({
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
-        <SidebarSeparator />
+        {/*<SidebarSeparator />*/}
         <SidebarGroup className="flex-1">
           <SidebarGroupLabel>Your Chats</SidebarGroupLabel>
           <SidebarGroupContent>