feat(autosave): files and chunk editor autosave with debounce + refetch (#3508)

* feat(files): debounced autosave while editing

* address review comments

* more comments

Author: icecrasher321

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

@@ -10,6 +10,7 @@ import {
   useUpdateWorkspaceFileContent,
   useWorkspaceFileContent,
 } from '@/hooks/queries/workspace-files'
+import { useAutosave } from '@/hooks/use-autosave'
 import { PreviewPanel, resolvePreviewType } from './preview-panel'
 
 const logger = createLogger('FileViewer')
@@ -60,6 +61,7 @@ interface FileViewerProps {
   showPreview?: boolean
   autoFocus?: boolean
   onDirtyChange?: (isDirty: boolean) => void
+  onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
 }
 
@@ -70,6 +72,7 @@ export function FileViewer({
   showPreview,
   autoFocus,
   onDirtyChange,
+  onSaveStatusChange,
   saveRef,
 }: FileViewerProps) {
   const category = resolveFileCategory(file.type, file.name)
@@ -83,6 +86,7 @@ export function FileViewer({
         showPreview={showPreview}
         autoFocus={autoFocus}
         onDirtyChange={onDirtyChange}
+        onSaveStatusChange={onSaveStatusChange}
         saveRef={saveRef}
       />
     )
@@ -102,6 +106,7 @@ interface TextEditorProps {
   showPreview?: boolean
   autoFocus?: boolean
   onDirtyChange?: (isDirty: boolean) => void
+  onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
 }
 
@@ -112,6 +117,7 @@ function TextEditor({
   showPreview,
   autoFocus,
   onDirtyChange,
+  onSaveStatusChange,
   saveRef,
 }: TextEditorProps) {
   const initializedRef = useRef(false)
@@ -126,59 +132,84 @@ function TextEditor({
     data: fetchedContent,
     isLoading,
     error,
+    dataUpdatedAt,
   } = useWorkspaceFileContent(workspaceId, file.id, file.key)
 
   const updateContent = useUpdateWorkspaceFileContent()
 
   const [content, setContent] = useState('')
   const [savedContent, setSavedContent] = useState('')
+  const savedContentRef = useRef('')
 
   useEffect(() => {
-    if (fetchedContent !== undefined && !initializedRef.current) {
+    if (fetchedContent === undefined) return
+
+    if (!initializedRef.current) {
       setContent(fetchedContent)
       setSavedContent(fetchedContent)
+      savedContentRef.current = fetchedContent
       contentRef.current = fetchedContent
       initializedRef.current = true
 
       if (autoFocus) {
         requestAnimationFrame(() => textareaRef.current?.focus())
       }
+      return
     }
-  }, [fetchedContent, autoFocus])
+
+    if (fetchedContent === savedContentRef.current) return
+    const isClean = contentRef.current === savedContentRef.current
+    if (isClean) {
+      setContent(fetchedContent)
+      setSavedContent(fetchedContent)
+      savedContentRef.current = fetchedContent
+      contentRef.current = fetchedContent
+    }
+  }, [fetchedContent, dataUpdatedAt, autoFocus])
 
   const handleContentChange = useCallback((value: string) => {
     setContent(value)
     contentRef.current = value
   }, [])
 
-  const isDirty = initializedRef.current && content !== savedContent
-
-  useEffect(() => {
-    onDirtyChange?.(isDirty)
-  }, [isDirty, onDirtyChange])
-
-  const handleSave = useCallback(async () => {
+  const onSave = useCallback(async () => {
     const currentContent = contentRef.current
-    if (currentContent === savedContent) return
+    if (currentContent === savedContentRef.current) return
 
     await updateContent.mutateAsync({
       workspaceId,
       fileId: file.id,
       content: currentContent,
     })
     setSavedContent(currentContent)
-  }, [savedContent, workspaceId, file.id])
+    savedContentRef.current = currentContent
+  }, [workspaceId, file.id, updateContent])
+
+  const { saveStatus, saveImmediately, isDirty } = useAutosave({
+    content,
+    savedContent,
+    onSave,
+    enabled: canEdit && initializedRef.current,
+  })
+
+  useEffect(() => {
+    onDirtyChange?.(isDirty)
+  }, [isDirty, onDirtyChange])
+
+  useEffect(() => {
+    onSaveStatusChange?.(saveStatus)
+  }, [saveStatus, onSaveStatusChange])
 
   useEffect(() => {
     if (saveRef) {
-      saveRef.current = handleSave
+      saveRef.current = saveImmediately
     }
     return () => {
       if (saveRef) {
         saveRef.current = null
       }
     }
-  }, [saveRef, handleSave])
+  }, [saveRef, saveImmediately])
 
   useEffect(() => {
     if (!isResizing) return

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

@@ -315,14 +315,7 @@ export function Files() {
 
   const handleSave = useCallback(async () => {
     if (!saveRef.current || !isDirty || saveStatus === 'saving') return
-
-    setSaveStatus('saving')
-    try {
-      await saveRef.current()
-      setSaveStatus('saved')
-    } catch {
-      setSaveStatus('error')
-    }
+    await saveRef.current()
   }, [isDirty, saveStatus])
 
   const handleBackAttempt = useCallback(() => {
@@ -413,12 +406,6 @@ export function Files() {
     setShowPreview(true)
   }, [selectedFileId])
 
-  useEffect(() => {
-    if (saveStatus !== 'saved' && saveStatus !== 'error') return
-    const timer = setTimeout(() => setSaveStatus('idle'), 2000)
-    return () => clearTimeout(timer)
-  }, [saveStatus])
-
   useEffect(() => {
     if (!selectedFile) return
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -557,6 +544,7 @@ export function Files() {
             showPreview={showPreview && canPreview}
             autoFocus={justCreatedFileIdRef.current === selectedFile.id}
             onDirtyChange={setIsDirty}
+            onSaveStatusChange={setSaveStatus}
             saveRef={saveRef}
           />
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx

@@ -5,6 +5,7 @@ import { Label, Switch } from '@/components/emcn'
 import type { ChunkData, DocumentData } from '@/lib/knowledge/types'
 import { getAccurateTokenCount, getTokenStrings } from '@/lib/tokenization/estimators'
 import { useCreateChunk, useUpdateChunk } from '@/hooks/queries/kb/knowledge'
+import { useAutosave } from '@/hooks/use-autosave'
 
 const TOKEN_BG_COLORS = [
   'rgba(239, 68, 68, 0.55)',
@@ -27,6 +28,7 @@ interface ChunkEditorProps {
   canEdit: boolean
   maxChunkSize?: number
   onDirtyChange: (isDirty: boolean) => void
+  onSaveStatusChange?: (status: 'idle' | 'saving' | 'saved' | 'error') => void
   saveRef: React.MutableRefObject<(() => Promise<void>) | null>
   onCreated?: (chunkId: string) => void
 }
@@ -39,6 +41,7 @@ export function ChunkEditor({
   canEdit,
   maxChunkSize,
   onDirtyChange,
+  onSaveStatusChange,
   saveRef,
   onCreated,
 }: ChunkEditorProps) {
@@ -50,30 +53,64 @@ export function ChunkEditor({
   const chunkContent = chunk?.content ?? ''
 
   const [editedContent, setEditedContent] = useState(isCreateMode ? '' : chunkContent)
+  const [savedContent, setSavedContent] = useState(chunkContent)
   const [tokenizerOn, setTokenizerOn] = useState(false)
   const [hoveredTokenIndex, setHoveredTokenIndex] = useState<number | null>(null)
+  const prevChunkIdRef = useRef(chunk?.id)
+  const savedContentRef = useRef(chunkContent)
 
   const editedContentRef = useRef(editedContent)
   editedContentRef.current = editedContent
 
-  const isDirty = isCreateMode ? editedContent.trim().length > 0 : editedContent !== chunkContent
-
   useEffect(() => {
-    if (!isCreateMode) {
+    if (isCreateMode) return
+    if (chunk?.id !== prevChunkIdRef.current) {
+      prevChunkIdRef.current = chunk?.id
+      savedContentRef.current = chunkContent
+      setSavedContent(chunkContent)
       setEditedContent(chunkContent)
     }
   }, [isCreateMode, chunk?.id, chunkContent])
 
   useEffect(() => {
-    onDirtyChange(isDirty)
-  }, [isDirty, onDirtyChange])
+    if (isCreateMode || !chunk?.id) return
+    const controller = new AbortController()
+    const handleVisibility = async () => {
+      if (document.visibilityState !== 'visible') return
+      try {
+        const res = await fetch(
+          `/api/knowledge/${knowledgeBaseId}/documents/${documentData.id}/chunks/${chunk.id}`,
+          { signal: controller.signal }
+        )
+        if (!res.ok) return
+        const json = await res.json()
+        const serverContent: string = json.data?.content ?? ''
+        if (serverContent === savedContentRef.current) return
+        const isClean = editedContentRef.current === savedContentRef.current
+        savedContentRef.current = serverContent
+        setSavedContent(serverContent)
+        if (isClean) {
+          setEditedContent(serverContent)
+        }
+      } catch (err) {
+        if ((err as Error).name === 'AbortError') return
+      }
+    }
+    document.addEventListener('visibilitychange', handleVisibility)
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibility)
+      controller.abort()
+    }
+  }, [isCreateMode, chunk?.id, knowledgeBaseId, documentData.id])
 
   useEffect(() => {
     if (isCreateMode && textareaRef.current) {
       textareaRef.current.focus()
     }
   }, [isCreateMode])
 
+  const isConnectorDocument = Boolean(documentData.connectorId)
+
   const handleSave = useCallback(async () => {
     const content = editedContentRef.current
     const trimmed = content.trim()
@@ -89,26 +126,59 @@ export function ChunkEditor({
       })
       onCreated?.(created.id)
     } else {
-      if (!chunk || trimmed === chunk.content) return
+      if (!chunk?.id) return
       await updateChunk({
         knowledgeBaseId,
         documentId: documentData.id,
         chunkId: chunk.id,
         content: trimmed,
       })
+      savedContentRef.current = content
+      setSavedContent(content)
     }
-  }, [isCreateMode, chunk, knowledgeBaseId, documentData.id, updateChunk, createChunk, onCreated])
+  }, [
+    isCreateMode,
+    chunk?.id,
+    knowledgeBaseId,
+    documentData.id,
+    updateChunk,
+    createChunk,
+    onCreated,
+  ])
+
+  const {
+    saveStatus,
+    saveImmediately,
+    isDirty: autosaveDirty,
+  } = useAutosave({
+    content: editedContent,
+    savedContent,
+    onSave: handleSave,
+    enabled: canEdit && !isCreateMode && !isConnectorDocument,
+  })
+
+  const isDirty = isCreateMode ? editedContent.trim().length > 0 : autosaveDirty
+
+  useEffect(() => {
+    onDirtyChange(isDirty)
+  }, [isDirty, onDirtyChange])
+
+  useEffect(() => {
+    onSaveStatusChange?.(saveStatus)
+  }, [saveStatus, onSaveStatusChange])
+
+  const saveFunction = isCreateMode ? handleSave : saveImmediately
 
   useEffect(() => {
     if (saveRef) {
-      saveRef.current = handleSave
+      saveRef.current = saveFunction
     }
     return () => {
       if (saveRef) {
         saveRef.current = null
       }
     }
-  }, [saveRef, handleSave])
+  }, [saveRef, saveFunction])
 
   const tokenStrings = useMemo(() => {
     if (!tokenizerOn || !editedContent) return []
@@ -121,8 +191,6 @@ export function ChunkEditor({
     return getAccurateTokenCount(editedContent)
   }, [editedContent, tokenizerOn, tokenStrings])
 
-  const isConnectorDocument = Boolean(documentData.connectorId)
-
   return (
     <div className='flex flex-1 flex-col overflow-hidden'>
       <div