scroll to bottom updates

web/src/components/ui/layouts/AppPageLayout.tsx

@@ -20,6 +20,7 @@ export const AppPageLayout: React.FC<
     headerBorderVariant?: 'default' | 'ghost';
     headerClassName?: string;
     mainClassName?: string;
+    contentContainerId?: string;
   }>
 > = ({
   children,
@@ -29,7 +30,8 @@ export const AppPageLayout: React.FC<
   headerSizeVariant = 'default',
   headerBorderVariant = 'default',
   headerClassName = '',
-  mainClassName = ''
+  mainClassName = '',
+  contentContainerId
 }) => {
   return (
     <div
@@ -49,7 +51,8 @@ export const AppPageLayout: React.FC<
 
       <AppPageLayoutContent
         className={cn(headerBorderVariant === 'ghost' && 'scroll-shadow-container', mainClassName)}
-        scrollable={scrollable}>
+        scrollable={scrollable}
+        id={contentContainerId}>
         {header && scrollable && headerBorderVariant === 'ghost' && (
           <div className="scroll-header"></div>
         )}

web/src/components/ui/layouts/AppPageLayoutContent.tsx

@@ -6,13 +6,15 @@ export const AppPageLayoutContent: React.FC<
   PropsWithChildren<{
     className?: string;
     scrollable?: boolean;
+    id?: string;
   }>
-> = ({ className = '', children, scrollable = true }) => {
+> = ({ className = '', children, scrollable = true, id }) => {
   const Selector = scrollable ? ScrollArea : 'main';
   const ChildSelector = scrollable ? 'main' : React.Fragment;
 
   return (
     <Selector
+      id={id}
       className={cn('bg-page-background app-content h-full max-h-full overflow-hidden', className)}>
       <ChildSelector>{children}</ChildSelector>
     </Selector>

web/src/components/ui/scroll-area/ScrollArea.tsx

@@ -9,8 +9,9 @@ const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
     viewportRef?: React.RefObject<HTMLDivElement>;
+    id?: string;
   }
->(({ className, children, viewportRef, ...props }, ref) => (
+>(({ className, children, viewportRef, id = 'scroll-area-viewport', ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn('relative overflow-hidden', className)}
@@ -18,7 +19,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport
       ref={viewportRef}
       className="h-full w-full rounded-[inherit] [&>div]:!block"
-      id="scroll-area-viewport">
+      id={id}>
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

web/src/layouts/ChatLayout/ChatContainer/ChatContainer.tsx

@@ -3,9 +3,12 @@ import { ChatHeader } from './ChatHeader';
 import { ChatContent } from './ChatContent';
 import { AppPageLayout } from '@/components/ui/layouts';
 
+export const CHAT_CONTENT_CONTAINER_ID = 'chat-container-content';
+
 export const ChatContainer = React.memo(() => {
   return (
     <AppPageLayout
+      contentContainerId={CHAT_CONTENT_CONTAINER_ID}
       header={<ChatHeader />}
       headerBorderVariant="ghost"
       scrollable

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatMessageBlock.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { ChatUserMessage } from './ChatUserMessage';
 import { ChatResponseMessages } from './ChatResponseMessages';

web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatScrollToBottom.tsx

@@ -0,0 +1,24 @@
+import { type useAutoScroll } from '@/hooks/useAutoScroll';
+import React from 'react';
+import { ChevronDown } from '@/components/ui/icons';
+import { cn } from '@/lib/utils';
+
+export const ChatScrollToBottom: React.FC<{
+  isAutoScrollEnabled: boolean;
+  scrollToBottom: ReturnType<typeof useAutoScroll>['scrollToBottom'];
+}> = React.memo(({ isAutoScrollEnabled, scrollToBottom }) => {
+  return (
+    <button
+      onClick={() => scrollToBottom('instant')}
+      className={cn(
+        'bg-background/90 hover:bg-item-hover/90 absolute -top-9 right-3 z-10 rounded-full border p-2 shadow transition-all duration-300 hover:scale-105 hover:shadow-md',
+        isAutoScrollEnabled
+          ? 'pointer-events-none scale-90 opacity-0'
+          : 'pointer-events-auto scale-100 cursor-pointer opacity-100'
+      )}>
+      <ChevronDown />
+    </button>
+  );
+});
+
+ChatScrollToBottom.displayName = 'ChatScrollToBottom';