fix chat

src/components/ui/card.tsx

@@ -1,4 +1,4 @@
-import { useGSAP } from "@gsap/react";import * as React from "react"
+import { useGSAP } from "@gsap/react"; import * as React from "react"
 import { useRef } from "react";
 import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import gsap from 'gsap'
@@ -26,20 +26,40 @@ function AnimatedCard({
   className,
   position = 0,
   size = "default",
+  tlId = undefined,
+  scrollOnly = false,
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm", position: gsap.Position }) {
+}: React.ComponentProps<"div"> & { size?: "default" | "sm", position: gsap.Position, tlId?: string, scrollOnly?: boolean }) {
   const gsapContext = useGsapContext()
-  const ref = useRef<HTMLDivElement|null>(null)
+  const ref = useRef<HTMLDivElement | null>(null)
   useGSAP(() => {
     const rect = ref.current?.getBoundingClientRect()
-    const isInView = rect && rect.top < window.innerHeight
+    const scroller = gsapContext?.getScroller()
+    console.log(scroller)
+    let viewportTop = 0
+    let viewportBottom = window.innerHeight
+    if (scroller && scroller instanceof Element) {
+      const scrollerRect = scroller.getBoundingClientRect()
+      viewportTop = scrollerRect.top
+      viewportBottom = scrollerRect.top + scrollerRect.height
+    }
+    const isInView = rect && rect.bottom > viewportTop && rect.top < viewportBottom
+    console.log(isInView)
     const fromVars = { x: -100, opacity: 0, duration: 0.5 }
-    if (isInView) {
-      gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position)
+    if (isInView && !scrollOnly) {
+      gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position, tlId)
     } else {
-      const scroller = gsapContext?.getScroller()
-      console.log('scroller:', scroller)
-      gsap.from(ref.current, { ...fromVars, scrollTrigger: { trigger: ref.current, start: 'top 85%', scroller } })
+      gsap.from(ref.current,
+        {
+          ...fromVars,
+          scrollTrigger: {
+            trigger: ref.current,
+            start: 'top bottom',
+            end: 'bottom top',
+            toggleActions: "play reverse play reverse",
+            scroller
+          }
+        })
     }
   }, { dependencies: [] })
   return (