use smooth streaming hook

Author: icecrasher321

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

@@ -94,6 +94,7 @@ interface FileViewerProps {
   isAgentEditing?: boolean
   disableStreamingAutoScroll?: boolean
   previewContextKey?: string
+  showBubbleMenu?: boolean
 }
 
 export function FileViewer({
@@ -110,6 +111,7 @@ export function FileViewer({
   isAgentEditing,
   disableStreamingAutoScroll = false,
   previewContextKey,
+  showBubbleMenu = true,
 }: FileViewerProps) {
   const category = resolveFileCategory(file.type, file.name)
 
@@ -152,6 +154,7 @@ export function FileViewer({
           isAgentEditing={isAgentEditing}
           disableStreamingAutoScroll={disableStreamingAutoScroll}
           previewContextKey={previewContextKey}
+          showBubbleMenu={showBubbleMenu}
         />
       )
     }

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

@@ -42,6 +42,7 @@ interface RichMarkdownEditorProps {
   isAgentEditing?: boolean
   disableStreamingAutoScroll?: boolean
   previewContextKey?: string
+  showBubbleMenu?: boolean
 }
 
 /**
@@ -68,6 +69,7 @@ export const RichMarkdownEditor = memo(function RichMarkdownEditor({
   isAgentEditing,
   disableStreamingAutoScroll = false,
   previewContextKey,
+  showBubbleMenu = true,
 }: RichMarkdownEditorProps) {
   const {
     content,
@@ -108,6 +110,7 @@ export const RichMarkdownEditor = memo(function RichMarkdownEditor({
       canEdit={canEdit}
       autoFocus={autoFocus}
       disableStreamingAutoScroll={disableStreamingAutoScroll}
+      showBubbleMenu={showBubbleMenu}
       onChange={setDraftContent}
       onSaveShortcut={saveImmediately}
     />
@@ -124,6 +127,7 @@ interface LoadedRichMarkdownEditorProps {
   canEdit: boolean
   autoFocus?: boolean
   disableStreamingAutoScroll?: boolean
+  showBubbleMenu: boolean
   onChange: (markdown: string) => void
   onSaveShortcut: () => Promise<void>
 }
@@ -160,6 +164,7 @@ export function LoadedRichMarkdownEditor({
   canEdit,
   autoFocus,
   disableStreamingAutoScroll,
+  showBubbleMenu,
   onChange,
   onSaveShortcut,
 }: LoadedRichMarkdownEditorProps) {
@@ -377,7 +382,7 @@ export function LoadedRichMarkdownEditor({
       ref={containerRef}
       className={cn('flex flex-1 flex-col overflow-y-auto', isEditable && 'cursor-text')}
     >
-      {editor && <EditorBubbleMenu editor={editor} />}
+      {showBubbleMenu && editor && <EditorBubbleMenu editor={editor} />}
       <EditorContent
         editor={editor}
         className='mx-auto flex w-full max-w-[48rem] flex-1 flex-col px-8 py-6 selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)] dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-editable-file-content.ts

@@ -7,6 +7,7 @@ import {
   useWorkspaceFileContent,
 } from '@/hooks/queries/workspace-files'
 import { type SaveStatus, useAutosave } from '@/hooks/use-autosave'
+import { useSmoothText } from '@/hooks/use-smooth-text'
 import {
   INITIAL_TEXT_EDITOR_CONTENT_STATE,
   type SyncTextEditorContentStateOptions,
@@ -128,6 +129,19 @@ export function useEditableFileContent({
   const updateContentRef = useRef(updateContent)
   updateContentRef.current = updateContent
 
+  // Pace only the streamed text (never user edits) so the preview reveals at the same word-by-word
+  // cadence as chat. Off-stream it reverts to undefined so the engine reconciles to the agent's
+  // persisted write; snapOnNonAppend shows in-place rewrites/patches in full instead of re-revealing.
+  const pacedStreamingContent = useSmoothText(
+    streamingContent ?? '',
+    streamingContent !== undefined,
+    {
+      snapOnNonAppend: true,
+    }
+  )
+  const effectiveStreamingContent =
+    streamingContent !== undefined ? pacedStreamingContent : undefined
+
   const {
     content,
     savedContent,
@@ -138,7 +152,7 @@ export function useEditableFileContent({
   } = useFileContentState({
     canReconcileToFetchedContent: file.key.length > 0,
     fetchedContent,
-    streamingContent,
+    streamingContent: effectiveStreamingContent,
   })
 
   const isStreamInteractionLocked = isStreamPhaseLocked || Boolean(isAgentEditing)

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

@@ -150,6 +150,7 @@ export const ResourceContent = memo(function ResourceContent({
           isAgentEditing={isAgentEditing}
           disableStreamingAutoScroll={disableStreamingAutoScroll}
           previewContextKey={previewContextKey}
+          showBubbleMenu={false}
         />
       </div>
     )
@@ -612,6 +613,7 @@ function EmbeddedFile({
         isAgentEditing={isAgentEditing}
         disableStreamingAutoScroll={disableStreamingAutoScroll}
         previewContextKey={previewContextKey}
+        showBubbleMenu={false}
       />
     </div>
   )