🪄 style: Improved Input Collapse UI (#10659)

* feat: shift collapse chevron inside ChatForm input area

* feat: add soft gradient on bottom of collapsed text input so there isn't a hard cut off when text overflows

* feat: add better scroll bar behavior for main chat input

* fix: smooth out purple gradient for temporary chats

* feat: better colors for gradient

* feat: use blur instead of colors

* chore: address copilot comments

client/src/components/Chat/Input/ChatForm.tsx

@@ -260,11 +260,13 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
             <FileFormChat conversation={conversation} />
             {endpoint && (
               <div className={cn('flex', isRTL ? 'flex-row-reverse' : 'flex-row')}>
+                <div className="relative flex-1">
                   <TextareaAutosize
                     {...registerProps}
                     ref={(e) => {
                       ref(e);
-                    (textAreaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = e;
+                      (textAreaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current =
+                        e;
                     }}
                     disabled={disableInputs || isNotAppendable}
                     onPaste={handlePaste}
@@ -287,10 +289,21 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
                     className={cn(
                       baseClasses,
                       removeFocusRings,
-                    'transition-[max-height] duration-200 disabled:cursor-not-allowed',
+                      'scrollbar-hover transition-[max-height] duration-200 disabled:cursor-not-allowed',
                     )}
                   />
-                <div className="flex flex-col items-start justify-start pt-1.5">
+                  {isCollapsed && (
+                    <div
+                      className="pointer-events-none absolute bottom-0 left-0 right-0 h-10 transition-all duration-200"
+                      style={{
+                        backdropFilter: 'blur(2px)',
+                        WebkitMaskImage: 'linear-gradient(to top, black 15%, transparent 75%)',
+                        maskImage: 'linear-gradient(to top, black 15%, transparent 75%)',
+                      }}
+                    />
+                  )}
+                </div>
+                <div className="flex flex-col items-start justify-start pr-2.5 pt-1.5">
                   <CollapseChat
                     isCollapsed={isCollapsed}
                     isScrollable={isMoreThanThreeRows}

client/src/style.css

@@ -1487,6 +1487,26 @@ button {
   background-color: transparent;
 }
 
+/* Show scrollbar only on hover */
+.scrollbar-hover {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.scrollbar-hover:hover {
+  scrollbar-color: var(--border-medium) transparent;
+}
+
+.scrollbar-hover::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  transition: background-color 0.3s ease 0.5s;
+}
+
+.scrollbar-hover:hover::-webkit-scrollbar-thumb {
+  background-color: var(--border-medium);
+  transition-delay: 0s;
+}
+
 body,
 html {
   height: 100%;