POSSIBLE BREAKAGE: SCROLLING

Author: Sg312

apps/sim/app/chat/components/message/components/markdown-renderer.tsx

@@ -111,7 +111,7 @@ function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
     },
 
     inlineCode: ({ children }: { children?: React.ReactNode }) => (
-      <code className='rounded bg-gray-200 px-1 py-0.5 font-mono text-inherit text-gray-800 dark:bg-gray-700 dark:text-gray-200'>
+      <code className='rounded bg-gray-200 px-1 py-0.5 font-mono text-gray-800 text-inherit dark:bg-gray-700 dark:text-gray-200'>
         {children}
       </code>
     ),

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

@@ -198,6 +198,7 @@ interface FileViewerProps {
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
   streamingContent?: string
   streamingMode?: 'append' | 'replace'
+  disableStreamingAutoScroll?: boolean
   useCodeRendererForCodeFiles?: boolean
 }
 
@@ -233,6 +234,7 @@ export function FileViewer({
   saveRef,
   streamingContent,
   streamingMode,
+  disableStreamingAutoScroll = false,
   useCodeRendererForCodeFiles = false,
 }: FileViewerProps) {
   const category = resolveFileCategory(file.type, file.name)
@@ -250,6 +252,7 @@ export function FileViewer({
         saveRef={saveRef}
         streamingContent={streamingContent}
         streamingMode={streamingMode}
+        disableStreamingAutoScroll={disableStreamingAutoScroll}
         useCodeRendererForCodeFiles={useCodeRendererForCodeFiles}
       />
     )
@@ -289,6 +292,7 @@ interface TextEditorProps {
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
   streamingContent?: string
   streamingMode?: 'append' | 'replace'
+  disableStreamingAutoScroll: boolean
   useCodeRendererForCodeFiles?: boolean
 }
 
@@ -303,6 +307,7 @@ function TextEditor({
   saveRef,
   streamingContent,
   streamingMode = 'append',
+  disableStreamingAutoScroll,
   useCodeRendererForCodeFiles = false,
 }: TextEditorProps) {
   const initializedRef = useRef(false)
@@ -701,6 +706,10 @@ function TextEditor({
 
   useEffect(() => {
     if (!isStreaming) return
+    if (disableStreamingAutoScroll) {
+      textareaStuckRef.current = false
+      return
+    }
     textareaStuckRef.current = true
 
     const el = (shouldUseCodeRenderer ? codeScrollRef.current : textareaRef.current) ?? null
@@ -722,14 +731,14 @@ function TextEditor({
       el.removeEventListener('wheel', onWheel)
       el.removeEventListener('scroll', onScroll)
     }
-  }, [isStreaming, shouldUseCodeRenderer])
+  }, [disableStreamingAutoScroll, isStreaming, shouldUseCodeRenderer])
 
   useEffect(() => {
-    if (!isStreaming || !textareaStuckRef.current) return
+    if (!isStreaming || !textareaStuckRef.current || disableStreamingAutoScroll) return
     const el = (shouldUseCodeRenderer ? codeScrollRef.current : textareaRef.current) ?? null
     if (!el) return
     el.scrollTop = el.scrollHeight
-  }, [isStreaming, renderedContent, shouldUseCodeRenderer])
+  }, [disableStreamingAutoScroll, isStreaming, renderedContent, shouldUseCodeRenderer])
 
   if (streamingContent === undefined) {
     if (isLoading) return DOCUMENT_SKELETON

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -107,6 +107,7 @@ export const ResourceContent = memo(function ResourceContent({
   }, [workspaceId, streamFileName])
 
   const streamingFileMode: 'append' | 'replace' = 'replace'
+  const disableStreamingAutoScroll = previewSession?.operation === 'patch'
   const rawPreviewText = previewSession?.previewText
   const streamingPreviewText =
     typeof rawPreviewText === 'string' && rawPreviewText.length > 0 ? rawPreviewText : undefined
@@ -122,6 +123,7 @@ export const ResourceContent = memo(function ResourceContent({
             previewMode={previewMode ?? 'preview'}
             streamingContent={streamingPreviewText}
             streamingMode={streamingFileMode}
+            disableStreamingAutoScroll={disableStreamingAutoScroll}
             useCodeRendererForCodeFiles
           />
         ) : (
@@ -148,6 +150,7 @@ export const ResourceContent = memo(function ResourceContent({
             previewSession?.fileId === resource.id ? streamingPreviewText : undefined
           }
           streamingMode={streamingFileMode}
+          disableStreamingAutoScroll={disableStreamingAutoScroll}
         />
       )
 
@@ -437,6 +440,7 @@ interface EmbeddedFileProps {
   previewMode?: PreviewMode
   streamingContent?: string
   streamingMode?: 'append' | 'replace'
+  disableStreamingAutoScroll?: boolean
 }
 
 function EmbeddedFile({
@@ -445,6 +449,7 @@ function EmbeddedFile({
   previewMode,
   streamingContent,
   streamingMode,
+  disableStreamingAutoScroll = false,
 }: EmbeddedFileProps) {
   const { canEdit } = useUserPermissionsContext()
   const { data: files = [], isLoading, isFetching } = useWorkspaceFiles(workspaceId)
@@ -476,6 +481,7 @@ function EmbeddedFile({
         streamingMode={streamingMode}
         previewMode={previewMode}
         streamingContent={streamingContent}
+        disableStreamingAutoScroll={disableStreamingAutoScroll}
         useCodeRendererForCodeFiles
       />
     </div>