llama-stack-mirror/llama_stack/ui/hooks/use-autosize-textarea.ts

import { useLayoutEffect, useRef } from "react";

interface UseAutosizeTextAreaProps {
  ref: React.RefObject<HTMLTextAreaElement | null>;
  maxHeight?: number;
  borderWidth?: number;
  dependencies: React.DependencyList;
}

export function useAutosizeTextArea({
  ref,
  maxHeight = Number.MAX_SAFE_INTEGER,
  borderWidth = 0,
  dependencies,
}: UseAutosizeTextAreaProps) {
  const originalHeight = useRef<number | null>(null);

  useLayoutEffect(() => {
    if (!ref.current) return;

    const currentRef = ref.current;
    const borderAdjustment = borderWidth * 2;

    if (originalHeight.current === null) {
      originalHeight.current = currentRef.scrollHeight - borderAdjustment;
    }

    currentRef.style.removeProperty("height");
    const scrollHeight = currentRef.scrollHeight;

    // Make sure we don't go over maxHeight
    const clampedToMax = Math.min(scrollHeight, maxHeight);
    // Make sure we don't go less than the original height
    const clampedToMin = Math.max(clampedToMax, originalHeight.current);

    currentRef.style.height = `${clampedToMin + borderAdjustment}px`;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [maxHeight, ref, ...dependencies]);
}