hunk.code_window: const FailedMessage = styled.div`
     display: flex;
     align-items: center;
     margin-left: 5px;
   `;
   interface ReduxStateProps {
     responses: Record<string, ActionResponse | undefined>;
  
hunk.labels: keep keep keep add keep keep keep keep
hunk.after_edit:   .api-debugcta {
       margin-top: 0px;
     }
   `;
   const StyledCallout = styled(Callout)`
     .${Classes.TEXT} {
       line-height: normal;
     }
  
hunk.file_path: app/client/src/components/editorComponents/ApiResponseView.tsx
hunk.type: add
file: import { useEffect, useState } from "react";
  
  /**
   * Hook to get if the containerRef is scrolled to the bottom
   */
  const useIsScrolledToBottom = (
    ref: React.RefObject<HTMLDivElement | null>,
    deps: any[] = [],
  ) => {
    const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
    useEffect(() => {
      const calculateIsScrolledToBottom = (e: any) => {
        if (!e.target) return;
        const { offsetHeight, scrollHeight, scrollTop } = e.target;
        setIsScrolledToBottom(scrollHeight - (offsetHeight + scrollTop) < 10);
      };
  
      ref?.current?.addEventListener("scroll", calculateIsScrolledToBottom);
      calculateIsScrolledToBottom({ target: ref.current });
  
      return () => {
        ref?.current?.removeEventListener("scroll", calculateIsScrolledToBottom);
      };
    }, [ref?.current, ...deps]);
  
    return isScrolledToBottom;
  };
  
  export default useIsScrolledToBottom;
  