logic for the slider and chat-header

Author: Olfa Maslah

.secrets.baseline

@@ -1403,23 +1403,35 @@
         "filename": "src/frontend/src/constants/constants.ts",
         "hashed_secret": "19a2fbd0dd38b4097f419c962342ef5e109eab07",
         "is_verified": false,
+<<<<<<< HEAD
         "line_number": 759,
+=======
+        "line_number": 758,
+>>>>>>> e285aff7dc (logic for the slider and chat-header)
         "is_secret": false
       },
       {
         "type": "Secret Keyword",
         "filename": "src/frontend/src/constants/constants.ts",
         "hashed_secret": "3806954324550e26ef5de85d007f1746825a073c",
         "is_verified": false,
+<<<<<<< HEAD
         "line_number": 760,
+=======
+        "line_number": 759,
+>>>>>>> e285aff7dc (logic for the slider and chat-header)
         "is_secret": false
       },
       {
         "type": "Secret Keyword",
         "filename": "src/frontend/src/constants/constants.ts",
         "hashed_secret": "c04f8fbf55c9096907a982750b1c6b0e4c1dd658",
         "is_verified": false,
+<<<<<<< HEAD
         "line_number": 933,
+=======
+        "line_number": 932,
+>>>>>>> e285aff7dc (logic for the slider and chat-header)
         "is_secret": false
       }
     ],

src/frontend/src/components/core/flowToolbarComponent/components/playground-button.tsx

@@ -1,6 +1,8 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
+
 // import { CustomIOModal } from "@/customization/components/custom-new-modal";
+
 import { PLAYGROUND_BUTTON_NAME } from "@/constants/constants";
 import { ENABLE_PUBLISH } from "@/customization/feature-flags";
 import { usePlaygroundStore } from "@/stores/playgroundStore";

src/frontend/src/components/core/playgroundComponent/sliding-container/components/sliding-container.tsx

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/utils/utils";
+
+const DEFAULT_WIDTH = 400;
+const DEFAULT_DURATION = 0.3;
+
+interface SlidingContainerProps {
+  isOpen: boolean;
+  children: React.ReactNode;
+  className?: string;
+  width?: number;
+  onWidthChange?: (width: number) => void;
+  resizable?: boolean;
+  duration?: number;
+  isFullscreen?: boolean;
+}
+
+export function SlidingContainer({
+  isOpen,
+  children,
+  className,
+  width = DEFAULT_WIDTH,
+  onWidthChange,
+  resizable = false,
+  duration = DEFAULT_DURATION,
+  isFullscreen = false,
+}: SlidingContainerProps) {
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!resizable || !isOpen) return;
+      e.preventDefault();
+      setIsResizing(true);
+    },
+    [resizable, isOpen],
+  );
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!onWidthChange) return;
+      const newWidth = window.innerWidth - e.clientX;
+      onWidthChange(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, onWidthChange]);
+
+  const fullscreenWidth = "100%";
+  const actualWidth = isFullscreen
+    ? fullscreenWidth
+    : isOpen
+      ? `${width}px`
+      : "0px";
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        // Sync with outer overlay: animate width only, match easing and duration.
+        "relative h-full overflow-hidden transition-[width] ease",
+        isResizing && "select-none",
+        className,
+      )}
+      style={{
+        width: actualWidth,
+        transitionDuration: isResizing ? "0ms" : `${duration}ms`,
+      }}
+    >
+      {resizable && isOpen && !isFullscreen && (
+        <div
+          onMouseDown={handleMouseDown}
+          className={cn(
+            "absolute left-0 top-0 z-10 h-full w-1 cursor-col-resize bg-transparent hover:bg-primary/20 transition-colors",
+            isResizing && "bg-primary/30",
+          )}
+          style={{ touchAction: "none" }}
+          aria-label="Resize panel"
+        />
+      )}
+      <div className="h-full w-full">{children}</div>
+    </div>
+  );
+}

src/frontend/src/components/core/playgroundComponent/sliding-container/stores/sliding-container-store.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+const MIN_WIDTH = 300;
+const MAX_WIDTH_RATIO = 0.5;
+const DEFAULT_WIDTH = 400;
+
+export interface SlidingContainerStoreType {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  toggle: () => void;
+  width: number;
+  setWidth: (width: number) => void;
+  isFullscreen: boolean;
+  setIsFullscreen: (isFullscreen: boolean) => void;
+  toggleFullscreen: () => void;
+}
+
+export const useSlidingContainerStore = create<SlidingContainerStoreType>(
+  (set) => ({
+    isOpen: false,
+    setIsOpen: (isOpen: boolean) => set({ isOpen }),
+    toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+    width: DEFAULT_WIDTH,
+    setWidth: (width: number) => {
+      const maxWidth = window.innerWidth * MAX_WIDTH_RATIO;
+      set({ width: Math.max(MIN_WIDTH, Math.min(maxWidth, width)) });
+    },
+    isFullscreen: false,
+    setIsFullscreen: (isFullscreen: boolean) => set({ isFullscreen }),
+    toggleFullscreen: () =>
+      set((state) => ({ isFullscreen: !state.isFullscreen })),
+  }),
+);