fix: enhance scroll behavior on playground

src/frontend/package.json

@@ -23,7 +23,6 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@smakss/react-scroll-direction": "^4.2.0",
     "@tabler/icons-react": "^3.6.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/line-clamp": "^0.4.4",
@@ -82,6 +81,7 @@
     "sortablejs": "^1.15.6",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "use-stick-to-bottom": "^1.1.1",
     "uuid": "^10.0.0",
     "vanilla-jsoneditor": "^2.3.3",
     "vite-plugin-svgr": "^4.2.0",

src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx

@@ -33,7 +33,7 @@ export const ChatViewWrapper = ({
     >
       <div
         className={cn(
-          "mb-4 flex h-[5%] items-center text-base font-semibold",
+          "flex h-10 shrink-0 items-center text-base font-semibold",
           playgroundPage ? "justify-between" : "lg:justify-start",
         )}
       >

src/frontend/src/modals/IOModal/components/chatView/chatInput/chat-input.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 import ShortUniqueId from "short-unique-id";
+import { useStickToBottomContext } from "use-stick-to-bottom";
 import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
 import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
 import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
@@ -41,6 +42,8 @@ export default function ChatInput({
   const isBuilding = useFlowStore((state) => state.isBuilding);
   const chatValue = useUtilityStore((state) => state.chatValueStore);
 
+  const { scrollToBottom } = useStickToBottomContext();
+
   const [showAudioInput, setShowAudioInput] = useState(false);
 
   const setIsVoiceAssistantActive = useVoiceStore(
@@ -172,6 +175,10 @@ export default function ChatInput({
     const storedFiles = [...files];
     setFiles([]);
     try {
+      scrollToBottom({
+        animation: "smooth",
+        duration: 1000,
+      });
       await sendMessage({
         repeat: 1,
         files: filesToSend,

src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/voice-assistant.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import { useStickToBottomContext } from "use-stick-to-bottom";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import { ICON_STROKE_WIDTH, SAVE_API_KEY_ALERT } from "@/constants/constants";
@@ -288,20 +289,16 @@ export function VoiceAssistant({
     };
   }, [setShowAudioInput]);
 
-  const scrollToBottom = () => {
-    setTimeout(() => {
-      const chatContainer = document.querySelector(".chat-message-div");
-      if (chatContainer) {
-        chatContainer.scrollTop = chatContainer.scrollHeight;
-      }
-    }, 300);
-  };
+  const { scrollToBottom } = useStickToBottomContext();
 
   const handleCloseAudioInput = () => {
     setIsRecording(false);
     stopRecording();
     setShowAudioInput(false);
-    scrollToBottom();
+    scrollToBottom({
+      animation: "smooth",
+      duration: 1000,
+    });
   };
 
   const handleSetShowSettingsModal = async (

src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx

@@ -205,7 +205,7 @@ export default function ChatMessage({
 
   return (
     <>
-      <div className="w-5/6 max-w-[768px] py-4 word-break-break-word">
+      <div className="w-full py-4 word-break-break-word">
         <div
           className={cn(
             "group relative flex w-full gap-4 rounded-md p-2",