fix(extension): preserve composer focus and pending page reads

Author: waleedlatif1

apps/sim/app/extension/hooks/use-page-context.ts

@@ -76,7 +76,14 @@ export function usePageContext(origins: string[], scopeKey: string) {
     let focusRequested = false
     const confirmFocus = () => {
       const bridge = bridgeRef.current
-      if (!focusRequested || bridge?.sessionId !== sessionId || !document.hasFocus()) return
+      if (
+        !focusRequested ||
+        bridge?.sessionId !== sessionId ||
+        !document.hasFocus() ||
+        !composerFocus?.current?.isFocused()
+      ) {
+        return
+      }
       focusRequested = false
       const message: AppToExtensionMessage = {
         channel: 'sim-extension',
@@ -98,7 +105,7 @@ export function usePageContext(origins: string[], scopeKey: string) {
       if (parsed.data.type === 'focus-composer') {
         if (bridgeRef.current?.sessionId === sessionId) {
           focusRequested = true
-          composerFocus?.current?.()
+          composerFocus?.current?.focus()
           confirmFocus()
         }
         return

apps/sim/app/extension/providers.tsx

@@ -7,7 +7,7 @@ import { useSession } from '@/lib/auth/client'
 import ExtensionLoading from '@/app/extension/loading'
 import { ExtensionSignIn } from '@/app/extension/sign-in'
 import { FeatureFlagsProvider } from '@/app/workspace/[workspaceId]/providers/feature-flags-provider'
-import { ChatInputFocusContext } from '@/hooks/use-chat-input-focus'
+import { ChatInputFocusContext, type ChatInputFocusHandle } from '@/hooks/use-chat-input-focus'
 
 interface ExtensionIdentity {
   origins: string[]
@@ -29,7 +29,7 @@ export function ExtensionProviders({
   modelSelectorEnabled,
   planModeEnabled,
 }: ExtensionProvidersProps) {
-  const focusComposer = useRef<(() => void) | null>(null)
+  const focusComposer = useRef<ChatInputFocusHandle | null>(null)
   const { data: session, isPending, error } = useSession()
   if (isPending) return <ExtensionLoading />
   const accessDenied = isApiClientError(error) && (error.status === 401 || error.status === 403)

apps/sim/app/o/[organizationId]/components/organization-conversation.tsx

@@ -67,7 +67,7 @@ import { useFeatureFlag } from '@/app/workspace/[workspaceId]/providers/feature-
 import { useFileAttachments } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments'
 import { mentionifyIntegrations } from '@/blocks/integration-matcher'
 import { useMarkMothershipChatRead } from '@/hooks/queries/mothership-chats'
-import type { PrepareChatSubmission } from '@/hooks/use-composer-submission'
+import { type PrepareChatSubmission, useComposerSubmission } from '@/hooks/use-composer-submission'
 import { useHydrated } from '@/hooks/use-hydrated'
 import { useMothershipDraftsStore } from '@/stores/mothership-drafts/store'
 import type { ChatContext } from '@/stores/panel'
@@ -289,8 +289,10 @@ function OrganizationConversationContent({
     }
   }
   const fileDropTarget = useRef<HTMLElement>(null)
+  const submission = useComposerSubmission({ mode: requestMode })
   const files = useFileAttachments({
     fileDropTarget: compact ? fileDropTarget : undefined,
+    disabled: submission.pending,
     userId: session?.user?.id,
     organizationId: organization.id,
     requestMode,
@@ -458,6 +460,7 @@ function OrganizationConversationContent({
   const composer = (
     <Composer
       requestMode={requestMode}
+      submission={submission}
       compact={Boolean(panelOptions)}
       attachments={panelOptions?.attachments}
       resourceActions={panelOptions?.resourceActions}

apps/sim/app/o/[organizationId]/home/components/composer/composer.test.tsx

@@ -14,6 +14,7 @@ import {
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, expect, it, vi } from 'vitest'
+import { useComposerSubmission } from '@/hooks/use-composer-submission'
 import type { useSpeechToText } from '@/hooks/use-speech-to-text'
 import {
   useMothershipEffortStore,
@@ -202,14 +203,17 @@ async function render(
 ) {
   function Harness() {
     const [value, setValue] = useState(initialValue)
+    const submission = useComposerSubmission({ mode: requestMode })
     const files = useFileAttachments({
       userId: 'user-a',
       organizationId: 'organization-a',
       requestMode,
+      disabled: submission.pending,
     })
     return (
       <Composer
         requestMode={requestMode}
+        submission={submission}
         restoredContexts={controls.restoredContexts}
         value={value}
         files={files}
@@ -292,14 +296,17 @@ it.each([false, true])(
             : []),
         ])
       }
+      const submission = useComposerSubmission({ mode: 'agent' })
       const files = useFileAttachments({
         userId: 'user-a',
         organizationId: 'organization-a',
         requestMode: 'agent',
+        disabled: submission.pending,
       })
       return (
         <Composer
           requestMode='agent'
+          submission={submission}
           value={value}
           onChange={setValue}
           restoredContexts={contexts}

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -38,8 +38,8 @@ import { getSkillsQueryOptions } from '@/hooks/queries/skills'
 import { useWorkspacesQuery } from '@/hooks/queries/workspace'
 import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'
 import { useChatInputFocus } from '@/hooks/use-chat-input-focus'
-import {
-  type PendingComposerSubmission,
+import type {
+  PendingComposerSubmission,
   useComposerSubmission,
 } from '@/hooks/use-composer-submission'
 import { useVoiceInput } from '@/hooks/use-voice-input'
@@ -50,6 +50,7 @@ interface ComposerProps {
   onPlanChange?: () => void
   value: string
   files: ReturnType<typeof useFileAttachments>
+  submission: ReturnType<typeof useComposerSubmission>
   /** On the empty home the placeholder types itself and the field is taller; in a chat it is the plain footer input. */
   isInitialView: boolean
   isSending: boolean
@@ -76,6 +77,7 @@ export function Composer({
   onPlanChange,
   value,
   files,
+  submission,
   isInitialView,
   isSending,
   onChange,
@@ -174,9 +176,7 @@ export function Composer({
   )
   const placeholder = isInitialView && !compact ? animatedPlaceholder : 'Send message to Sim'
 
-  const { pending: preparingSubmission, accept: acceptSubmission } = useComposerSubmission({
-    mode: requestMode,
-  })
+  const { pending: preparingSubmission, accept: acceptSubmission } = submission
   const submit = () => {
     if (attachedFilesRef.current.some((file) => file.uploading)) return
     const hasPayload =

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -133,10 +133,15 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
 
   const prevDefaultValueRef = useRef(defaultValue)
 
+  const { pending: preparingSubmission, accept: acceptSubmission } = useComposerSubmission({
+    scope: draftScopeKey,
+    mode: requestMode,
+  })
   const files = useFileAttachments({
     fileDropTarget,
     userId,
     workspaceId,
+    disabled: preparingSubmission,
   })
   const hasFiles = files.attachedFiles.some((f) => !f.uploading && f.key)
   const hasUploadingFiles = files.attachedFiles.some((f) => f.uploading)
@@ -535,10 +540,6 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
     filesRef.current = { ...filesRef.current, attachedFiles: [] }
   }, [resetTranscript, history.reset])
 
-  const { pending: preparingSubmission, accept: acceptSubmission } = useComposerSubmission({
-    scope: draftScopeKey,
-    mode: requestMode,
-  })
   const handleSubmit = useCallback(() => {
     if (chatPlanRequired) {
       useChatPlanModalStore.getState().open(workspaceId)

apps/sim/hooks/use-chat-input-focus.ts

@@ -1,7 +1,14 @@
 import { createContext, type RefObject, useContext, useEffect, useImperativeHandle } from 'react'
 import { isMobileViewport } from '@/hooks/use-is-mobile'
 
-export const ChatInputFocusContext = createContext<RefObject<(() => void) | null> | null>(null)
+export interface ChatInputFocusHandle {
+  focus: () => void
+  isFocused: () => boolean
+}
+
+export const ChatInputFocusContext = createContext<RefObject<ChatInputFocusHandle | null> | null>(
+  null
+)
 
 interface UseChatInputFocusProps {
   textareaRef: RefObject<HTMLTextAreaElement | null>
@@ -12,9 +19,13 @@ export function useChatInputFocus({ textareaRef }: UseChatInputFocusProps) {
   const requestedFocus = useContext(ChatInputFocusContext)
   useImperativeHandle(
     requestedFocus,
-    () => () => {
-      if (!document.querySelector('[role="dialog"], dialog[open]')) textareaRef.current?.focus()
-    },
+    () => ({
+      focus: () => {
+        if (!document.querySelector('[role="dialog"], dialog[open]')) textareaRef.current?.focus()
+      },
+      isFocused: () =>
+        textareaRef.current !== null && document.activeElement === textareaRef.current,
+    }),
     [textareaRef]
   )
   useEffect(() => {