Merge branch 'feat/mothership-copilot' of github.com:simstudioai/sim into feat/mothership-copilot

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -167,12 +167,14 @@ export function Home({ chatId }: HomeProps = {}) {
     sendMessage,
     stopGeneration,
     resources,
+    isResourceCleanupSettled,
     activeResourceId,
     setActiveResourceId,
   } = useChat(workspaceId, chatId)
 
   const [isResourceCollapsed, setIsResourceCollapsed] = useState(false)
   const [showExpandButton, setShowExpandButton] = useState(false)
+  const [isResourceAnimatingIn, setIsResourceAnimatingIn] = useState(false)
 
   useEffect(() => {
     if (!isResourceCollapsed) {
@@ -186,16 +188,24 @@ export function Home({ chatId }: HomeProps = {}) {
   const collapseResource = useCallback(() => setIsResourceCollapsed(true), [])
   const expandResource = useCallback(() => setIsResourceCollapsed(false), [])
 
-  const prevResourceCountRef = useRef(resources.length)
-  const animateResourcePanel =
-    prevResourceCountRef.current === 0 && resources.length > 0 && isSending
+  const visibleResources = isResourceCleanupSettled ? resources : []
+  const prevResourceCountRef = useRef(visibleResources.length)
+  const shouldEnterResourcePanel =
+    isSending && prevResourceCountRef.current === 0 && visibleResources.length > 0
   useEffect(() => {
-    if (animateResourcePanel) {
+    if (shouldEnterResourcePanel) {
       const { isCollapsed, toggleCollapsed } = useSidebarStore.getState()
       if (!isCollapsed) toggleCollapsed()
+      setIsResourceAnimatingIn(true)
     }
-    prevResourceCountRef.current = resources.length
-  })
+    prevResourceCountRef.current = visibleResources.length
+  }, [shouldEnterResourcePanel, visibleResources.length])
+
+  useEffect(() => {
+    if (!isResourceAnimatingIn) return
+    const timer = setTimeout(() => setIsResourceAnimatingIn(false), 400)
+    return () => clearTimeout(timer)
+  }, [isResourceAnimatingIn])
 
   const handleSubmit = useCallback(
     (text: string, fileAttachments?: FileAttachmentForApi[]) => {
@@ -340,19 +350,19 @@ export function Home({ chatId }: HomeProps = {}) {
         </div>
       </div>
 
-      {resources.length > 0 && (
+      {visibleResources.length > 0 && (
         <MothershipView
           workspaceId={workspaceId}
-          resources={resources}
+          resources={visibleResources}
           activeResourceId={activeResourceId}
           onSelectResource={setActiveResourceId}
           onCollapse={collapseResource}
           isCollapsed={isResourceCollapsed}
-          className={animateResourcePanel ? 'animate-slide-in-right' : undefined}
+          className={isResourceAnimatingIn ? 'animate-slide-in-right' : undefined}
         />
       )}
 
-      {resources.length > 0 && showExpandButton && (
+      {visibleResources.length > 0 && showExpandButton && (
         <div className='absolute top-[8.5px] right-[16px]'>
           <button
             type='button'

apps/sim/app/workspace/[workspaceId]/home/hooks/use-auto-scroll.ts

@@ -6,16 +6,15 @@ const BOTTOM_THRESHOLD = 30
  * Manages sticky auto-scroll for a streaming chat container.
  *
  * Stays pinned to the bottom while content streams in. Detaches when the user
- * explicitly scrolls up (wheel, touch, or scrollbar drag). Re-attaches when
- * the scroll position returns to within {@link BOTTOM_THRESHOLD} of the bottom.
+ * scrolls beyond {@link BOTTOM_THRESHOLD} from the bottom. Re-attaches when
+ * the scroll position returns within the threshold. Preserves bottom position
+ * across container resizes (e.g. sidebar collapse).
  */
 export function useAutoScroll(isStreaming: boolean) {
   const containerRef = useRef<HTMLDivElement>(null)
-  const stickyRef = useRef(true)
-  const prevScrollTopRef = useRef(0)
-  const prevScrollHeightRef = useRef(0)
-  const touchStartYRef = useRef(0)
+  const atBottomRef = useRef(true)
   const rafIdRef = useRef(0)
+  const teardownRef = useRef<(() => void) | null>(null)
 
   const scrollToBottom = useCallback(() => {
     const el = containerRef.current
@@ -24,80 +23,57 @@ export function useAutoScroll(isStreaming: boolean) {
   }, [])
 
   const callbackRef = useCallback((el: HTMLDivElement | null) => {
+    teardownRef.current?.()
+    teardownRef.current = null
     containerRef.current = el
-    if (el) el.scrollTop = el.scrollHeight
-  }, [])
-
-  useEffect(() => {
-    if (!isStreaming) return
-    const el = containerRef.current
     if (!el) return
 
-    stickyRef.current = true
-    prevScrollTopRef.current = el.scrollTop
-    prevScrollHeightRef.current = el.scrollHeight
-    scrollToBottom()
+    el.scrollTop = el.scrollHeight
+    atBottomRef.current = true
 
-    const detach = () => {
-      stickyRef.current = false
+    const onScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = el
+      atBottomRef.current = scrollHeight - scrollTop - clientHeight <= BOTTOM_THRESHOLD
     }
 
-    const onWheel = (e: WheelEvent) => {
-      if (e.deltaY < 0) detach()
-    }
+    const ro = new ResizeObserver(() => {
+      if (atBottomRef.current) el.scrollTop = el.scrollHeight
+    })
 
-    const onTouchStart = (e: TouchEvent) => {
-      touchStartYRef.current = e.touches[0].clientY
-    }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    ro.observe(el)
 
-    const onTouchMove = (e: TouchEvent) => {
-      if (e.touches[0].clientY > touchStartYRef.current) detach()
+    teardownRef.current = () => {
+      el.removeEventListener('scroll', onScroll)
+      ro.disconnect()
     }
+  }, [])
 
-    const onScroll = () => {
-      const { scrollTop, scrollHeight, clientHeight } = el
-      const distanceFromBottom = scrollHeight - scrollTop - clientHeight
-
-      if (distanceFromBottom <= BOTTOM_THRESHOLD) {
-        stickyRef.current = true
-      } else if (
-        scrollTop < prevScrollTopRef.current &&
-        scrollHeight <= prevScrollHeightRef.current
-      ) {
-        stickyRef.current = false
-      }
-
-      prevScrollTopRef.current = scrollTop
-      prevScrollHeightRef.current = scrollHeight
-    }
+  useEffect(() => {
+    if (!isStreaming) return
+    const el = containerRef.current
+    if (!el) return
+
+    atBottomRef.current = true
+    scrollToBottom()
 
     const guardedScroll = () => {
-      if (stickyRef.current) scrollToBottom()
+      if (atBottomRef.current) scrollToBottom()
     }
 
     const onMutation = () => {
-      prevScrollHeightRef.current = el.scrollHeight
-      if (!stickyRef.current) return
+      if (!atBottomRef.current) return
       cancelAnimationFrame(rafIdRef.current)
       rafIdRef.current = requestAnimationFrame(guardedScroll)
     }
 
-    el.addEventListener('wheel', onWheel, { passive: true })
-    el.addEventListener('touchstart', onTouchStart, { passive: true })
-    el.addEventListener('touchmove', onTouchMove, { passive: true })
-    el.addEventListener('scroll', onScroll, { passive: true })
-
     const observer = new MutationObserver(onMutation)
     observer.observe(el, { childList: true, subtree: true, characterData: true })
 
     return () => {
-      el.removeEventListener('wheel', onWheel)
-      el.removeEventListener('touchstart', onTouchStart)
-      el.removeEventListener('touchmove', onTouchMove)
-      el.removeEventListener('scroll', onScroll)
       observer.disconnect()
       cancelAnimationFrame(rafIdRef.current)
-      if (stickyRef.current) scrollToBottom()
+      if (atBottomRef.current) scrollToBottom()
     }
   }, [isStreaming, scrollToBottom])