diff --git a/src/games/ai/components/autoTextarea.tsx b/src/games/ai/components/autoTextarea.tsx new file mode 100644 index 0000000..b56dcfc --- /dev/null +++ b/src/games/ai/components/autoTextarea.tsx @@ -0,0 +1,34 @@ +import { useEffect, useRef, useState } from "preact/hooks"; +import type { JSX } from "preact/jsx-runtime" + +export const AutoTextarea = (props: JSX.HTMLAttributes) => { + const { value } = props; + const ref = useRef(null); + const [isVisible, setVisible] = useState(false); + + useEffect(() => { + if (ref.current) { + const area = ref.current; + + area.style.height = '0'; // reset + area.style.height = `${area.scrollHeight}px`; + } + }, [value, isVisible]); + + useEffect(() => { + if (ref.current) { + const observer = new IntersectionObserver(([entry]) => { + setVisible(entry.isIntersecting); + if (entry.isIntersecting) { + observer.disconnect(); + } + }); + + observer.observe(ref.current); + + return () => observer.disconnect(); + } + }, [ref.current]); + + return