feat: add a better scroll behave on playground's chat (#3680)

* feat: Add useUtilityStore hook to IOModal for setting playground scroll behavior

* feat: Add useUtilityStore hook to IOModal for setting playground scroll behavior

* feat: Add setPlaygroundScrollBehaves function to useUtilityStore hook

* feat: Update codeTabsPropsType to allow undefined for the 'open' property

* feat: Add `playgroundScrollBehaves` and `setPlaygroundScrollBehaves` to `UtilityStoreType`

The `UtilityStoreType` now includes the `playgroundScrollBehaves` property of type `ScrollBehavior` and the `setPlaygroundScrollBehaves` function to update it. This allows for managing the scroll behavior of the playground in the application.

* refactor: Remove unused 'open' prop from CodeTabsComponent

src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx

@@ -1,3 +1,4 @@
+import { useUtilityStore } from "@/stores/utilityStore";
 import Convert from "ansi-to-html";
 import { useEffect, useMemo, useRef, useState } from "react";
 import Markdown from "react-markdown";
@@ -41,6 +42,13 @@ export default function ChatMessage({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const chatMessageRef = useRef(chatMessage);
 
+  const playgroundScrollBehaves = useUtilityStore(
+    (state) => state.playgroundScrollBehaves,
+  );
+  const setPlaygroundScrollBehaves = useUtilityStore(
+    (state) => state.setPlaygroundScrollBehaves,
+  );
+
   // Sync ref with state
   useEffect(() => {
     chatMessageRef.current = chatMessage;
@@ -107,9 +115,14 @@ export default function ChatMessage({
   useEffect(() => {
     const element = document.getElementById("last-chat-message");
     if (element) {
-      setTimeout(() => {
+      if (playgroundScrollBehaves === "instant") {
-        element.scrollIntoView({ behavior: "smooth" });
+        element.scrollIntoView({ behavior: playgroundScrollBehaves });
-      }, 200);
+        setPlaygroundScrollBehaves("smooth");
+      } else {
+        setTimeout(() => {
+          element.scrollIntoView({ behavior: playgroundScrollBehaves });
+        }, 200);
+      }
     }
   }, [lastMessage]);
 

src/frontend/src/modals/IOModal/index.tsx

@@ -2,6 +2,7 @@ import {
   useDeleteMessages,
   useGetMessagesQuery,
 } from "@/controllers/API/queries/messages";
+import { useUtilityStore } from "@/stores/utilityStore";
 import { useEffect, useState } from "react";
 import AccordionComponent from "../../components/accordionComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -172,6 +173,16 @@ export default function IOModal({
     sessions;
   }, [messages]);
 
+  const setPlaygroundScrollBehaves = useUtilityStore(
+    (state) => state.setPlaygroundScrollBehaves,
+  );
+
+  useEffect(() => {
+    if (open) {
+      setPlaygroundScrollBehaves("instant");
+    }
+  }, [open]);
+
   return (
     <BaseModal
       size={"md-thin"}

src/frontend/src/stores/utilityStore.ts

@@ -15,4 +15,7 @@ export const useUtilityStore = create<UtilityStoreType>((set, get) => ({
   healthCheckTimeout: null,
   setHealthCheckTimeout: (timeout: string | null) =>
     set({ healthCheckTimeout: timeout }),
+  playgroundScrollBehaves: "instant",
+  setPlaygroundScrollBehaves: (behaves: ScrollBehavior) =>
+    set({ playgroundScrollBehaves: behaves }),
 }));

src/frontend/src/types/components/index.ts

@@ -775,7 +775,7 @@ export type tabsArrayType = {
 };
 
 export type codeTabsPropsType = {
-  open: boolean;
+  open?: boolean;
   tabs: Array<tabsArrayType>;
   activeTab: string;
   setActiveTab: (value: string) => void;

src/frontend/src/types/zustand/utility/index.ts

@@ -3,4 +3,6 @@ export type UtilityStoreType = {
   setSelectedItems: (itemId: any) => void;
   healthCheckTimeout: string | null;
   setHealthCheckTimeout: (timeout: string | null) => void;
+  playgroundScrollBehaves: ScrollBehavior;
+  setPlaygroundScrollBehaves: (behaves: ScrollBehavior) => void;
 };