Add resource tab to url state, scroll correctly on new tab

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, memo, useCallback, useContext, useMemo, useRef } from 'react'
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react'
 import { useRouter } from 'next/navigation'
 import type { Components, ExtraProps } from 'react-markdown'
 import ReactMarkdown from 'react-markdown'
@@ -281,11 +281,11 @@ function isInternalHref(
   if (href.startsWith('#')) return { pathname: '', hash: href }
   try {
     const url = new URL(href, origin)
-    if (url.origin === origin) {
+    if (url.origin === origin && url.pathname.startsWith('/workspace/')) {
       return { pathname: url.pathname, hash: url.hash }
     }
   } catch {
-    if (href.startsWith('/')) {
+    if (href.startsWith('/workspace/')) {
       const hashIdx = href.indexOf('#')
       if (hashIdx === -1) return { pathname: href, hash: '' }
       return { pathname: href.slice(0, hashIdx), hash: href.slice(hashIdx) }
@@ -370,6 +370,22 @@ const MarkdownPreview = memo(function MarkdownPreview({
     [onCheckboxToggle]
   )
 
+  const hasScrolledToHash = useRef(false)
+  useEffect(() => {
+    const hash = window.location.hash
+    if (!hash || hasScrolledToHash.current) return
+    const id = hash.slice(1)
+    const el = document.getElementById(id)
+    if (!el) return
+    hasScrolledToHash.current = true
+    const container = el.closest('.overflow-auto') as HTMLElement | null
+    if (container) {
+      container.scrollTo({ top: el.offsetTop - container.offsetTop, behavior: 'smooth' })
+    } else {
+      el.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [content])
+
   const committedMarkdown = useMemo(
     () =>
       committed ? (

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useParams, useRouter } from 'next/navigation'
+import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { PanelLeft } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
@@ -28,6 +28,8 @@ interface HomeProps {
 export function Home({ chatId }: HomeProps = {}) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const router = useRouter()
+  const searchParams = useSearchParams()
+  const initialResourceId = searchParams.get('resource')
   const { data: session } = useSession()
   const posthog = usePostHog()
   const posthogRef = useRef(posthog)
@@ -160,7 +162,10 @@ export function Home({ chatId }: HomeProps = {}) {
   } = useChat(
     workspaceId,
     chatId,
-    getMothershipUseChatOptions({ onResourceEvent: handleResourceEvent })
+    getMothershipUseChatOptions({
+      onResourceEvent: handleResourceEvent,
+      initialActiveResourceId: initialResourceId,
+    })
   )
 
   const [editingInputValue, setEditingInputValue] = useState('')
@@ -183,6 +188,13 @@ export function Home({ chatId }: HomeProps = {}) {
     [editQueuedMessage]
   )
 
+  useEffect(() => {
+    if (!activeResourceId) return
+    const url = new URL(window.location.href)
+    url.searchParams.set('resource', activeResourceId)
+    window.history.replaceState(null, '', url.toString())
+  }, [activeResourceId])
+
   useEffect(() => {
     wasSendingRef.current = false
     if (resolvedChatId) markRead(resolvedChatId)

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

@@ -377,10 +377,11 @@ export interface UseChatOptions {
   onToolResult?: (toolName: string, success: boolean, result: unknown) => void
   onTitleUpdate?: () => void
   onStreamEnd?: (chatId: string, messages: ChatMessage[]) => void
+  initialActiveResourceId?: string | null
 }
 
 export function getMothershipUseChatOptions(
-  options: Pick<UseChatOptions, 'onResourceEvent' | 'onStreamEnd'> = {}
+  options: Pick<UseChatOptions, 'onResourceEvent' | 'onStreamEnd' | 'initialActiveResourceId'> = {}
 ): UseChatOptions {
   return {
     apiPath: MOTHERSHIP_CHAT_API_PATH,
@@ -416,6 +417,7 @@ export function useChat(
   const [resolvedChatId, setResolvedChatId] = useState<string | undefined>(initialChatId)
   const [resources, setResources] = useState<MothershipResource[]>([])
   const [activeResourceId, setActiveResourceId] = useState<string | null>(null)
+  const initialActiveResourceIdRef = useRef(options?.initialActiveResourceId)
   const onResourceEventRef = useRef(options?.onResourceEvent)
   onResourceEventRef.current = options?.onResourceEvent
   const apiPathRef = useRef(options?.apiPath ?? MOTHERSHIP_CHAT_API_PATH)
@@ -845,7 +847,12 @@ export function useChat(
       const persistedResources = history.resources.filter((r) => r.id !== 'streaming-file')
       if (persistedResources.length > 0) {
         setResources(persistedResources)
-        setActiveResourceId(persistedResources[persistedResources.length - 1].id)
+        const initialId = initialActiveResourceIdRef.current
+        const restoredId =
+          initialId && persistedResources.some((r) => r.id === initialId)
+            ? initialId
+            : persistedResources[persistedResources.length - 1].id
+        setActiveResourceId(restoredId)
 
         for (const resource of persistedResources) {
           if (resource.type !== 'workflow') continue