fix(snapshot): stop markdown preview auto-scroll during patch streams + snapshot styling (#4333)

* fix(files): stop markdown preview auto-scrolling during copilot patch streams

fix(snapshot): use surface-4 background for input/output code blocks in light mode

* fix(files): separate auto-scroll gate from streaming render mode in MarkdownPreview

Author: waleedlatif1

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

@@ -63,6 +63,7 @@ interface PreviewPanelProps {
   mimeType: string | null
   filename: string
   isStreaming?: boolean
+  disableAutoScroll?: boolean
   onCheckboxToggle?: (checkboxIndex: number, checked: boolean) => void
 }
 
@@ -71,6 +72,7 @@ export const PreviewPanel = memo(function PreviewPanel({
   mimeType,
   filename,
   isStreaming,
+  disableAutoScroll,
   onCheckboxToggle,
 }: PreviewPanelProps) {
   const previewType = resolvePreviewType(mimeType, filename)
@@ -80,6 +82,7 @@ export const PreviewPanel = memo(function PreviewPanel({
       <MarkdownPreview
         content={content}
         isStreaming={isStreaming}
+        disableAutoScroll={disableAutoScroll}
         onCheckboxToggle={onCheckboxToggle}
       />
     )
@@ -649,14 +652,16 @@ function FrontMatterCard({ data }: { data: Record<string, unknown> }) {
 const MarkdownPreview = memo(function MarkdownPreview({
   content,
   isStreaming = false,
+  disableAutoScroll = false,
   onCheckboxToggle,
 }: {
   content: string
   isStreaming?: boolean
+  disableAutoScroll?: boolean
   onCheckboxToggle?: (checkboxIndex: number, checked: boolean) => void
 }) {
   const { push: navigate } = useRouter()
-  const { ref: autoScrollRef } = useAutoScroll(isStreaming)
+  const { ref: autoScrollRef } = useAutoScroll(isStreaming && !disableAutoScroll)
 
   const contentRef = useRef(content)
   contentRef.current = content

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

@@ -678,6 +678,7 @@ export const TextEditor = memo(function TextEditor({
               mimeType={file.type}
               filename={file.name}
               isStreaming={isStreaming}
+              disableAutoScroll={disableStreamingAutoScroll}
               onCheckboxToggle={canEdit && !isStreaming ? handleCheckboxToggle : undefined}
             />
           </div>

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx

@@ -1250,7 +1250,7 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.input)}
                     language='json'
-                    className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
+                    className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
                     wrapText={wrapText}
                     searchQuery={isSearchActive ? searchQuery : undefined}
                     currentMatchIndex={currentMatchIndex}
@@ -1320,7 +1320,7 @@ function PreviewEditorContent({
                     code={formatValueAsJson(executionData.output)}
                     language='json'
                     className={cn(
-                      '!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]',
+                      '!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]',
                       executionData.status === 'error' && 'text-[var(--text-error)]'
                     )}
                     wrapText={wrapText}