fix(chat): guide blocked browser microphone access

Author: waleedlatif1

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

@@ -23,6 +23,7 @@ export {
 } from './constants'
 export { DropOverlay } from './drop-overlay'
 export { MicButton } from './mic-button'
+export { MicrophonePermissionHelp } from './microphone-permission-help'
 export { PlusMenuDropdown } from './plus-menu-dropdown'
 export type {
   PromptEditorInstance,

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/microphone-permission-help/index.ts

@@ -0,0 +1 @@
+export { MicrophonePermissionHelp } from './microphone-permission-help'

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/microphone-permission-help/microphone-permission-help.test.tsx

@@ -0,0 +1,61 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@sim/emcn', () => ({
+  ChipModal: ({ open, children }: { open: boolean; children: ReactNode }) =>
+    open ? <div role='dialog'>{children}</div> : null,
+  ChipModalBody: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  ChipModalHeader: ({ children, onClose }: { children: ReactNode; onClose: () => void }) => (
+    <header>
+      {children}
+      <button type='button' onClick={onClose}>
+        Close
+      </button>
+    </header>
+  ),
+}))
+
+import { MicrophonePermissionHelp } from '@/app/workspace/[workspaceId]/home/components/user-input/components/microphone-permission-help/microphone-permission-help'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+function renderPermissionHelp(onOpenChange = vi.fn()) {
+  act(() => root.render(<MicrophonePermissionHelp open onOpenChange={onOpenChange} />))
+  return onOpenChange
+}
+
+describe('MicrophonePermissionHelp', () => {
+  it('explains how to recover blocked browser microphone access', () => {
+    renderPermissionHelp()
+
+    expect(container.textContent).toContain('Open the site controls beside the address bar.')
+    expect(container.textContent).toContain('Set Microphone access for this site to Allow.')
+    expect(container.textContent).toContain('Safari Settings')
+  })
+
+  it('closes from the header action', () => {
+    const onOpenChange = renderPermissionHelp()
+    const closeButton = container.querySelector('button')
+
+    act(() => closeButton?.click())
+
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+})

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

@@ -0,0 +1,42 @@
+'use client'
+
+import { useId } from 'react'
+import { ChipModal, ChipModalBody, ChipModalHeader } from '@sim/emcn'
+
+interface MicrophonePermissionHelpProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function MicrophonePermissionHelp({ open, onOpenChange }: MicrophonePermissionHelpProps) {
+  const descriptionId = useId()
+  const handleClose = () => onOpenChange(false)
+
+  return (
+    <ChipModal
+      open={open}
+      onOpenChange={onOpenChange}
+      srTitle='Allow microphone access'
+      aria-describedby={descriptionId}
+      size='sm'
+    >
+      <ChipModalHeader onClose={handleClose}>Allow microphone access</ChipModalHeader>
+      <ChipModalBody>
+        <div className='flex flex-col gap-3 px-2 text-sm'>
+          <p id={descriptionId} className='text-[var(--text-secondary)]'>
+            Once microphone access is blocked, your browser requires you to change it from the site
+            controls.
+          </p>
+          <ol className='flex list-decimal flex-col gap-2 pl-5 text-[var(--text-body)]'>
+            <li>Open the site controls beside the address bar.</li>
+            <li>Set Microphone access for this site to Allow.</li>
+            <li>Reload the page if prompted, then try voice input again.</li>
+          </ol>
+          <p className='text-[var(--text-tertiary)]'>
+            In Safari, open Safari Settings, then Websites, then Microphone.
+          </p>
+        </div>
+      </ChipModalBody>
+    </ChipModal>
+  )
+}

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

@@ -24,6 +24,7 @@ import {
   AttachedFilesList,
   DropOverlay,
   MicButton,
+  MicrophonePermissionHelp,
   PromptEditor,
   SendButton,
   usePromptEditor,
@@ -102,6 +103,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const { navigateToSettings } = useSettingsNavigation()
   const { userId, onContextAdd, onContextRemove } = useChatSurface()
+  const [microphonePermissionHelpOpen, setMicrophonePermissionHelpOpen] = useState(false)
 
   const [initialValue] = useState(() => {
     if (defaultValue) return defaultValue
@@ -323,19 +325,27 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   function handleSpeechError(error: SpeechToTextError) {
     if (error === 'microphone-blocked') {
       const desktopBridge = getDesktopBridge()
-      toast.error(
-        desktopBridge
-          ? 'Microphone access is blocked. Allow Sim to use the microphone in your system privacy settings.'
-          : 'Microphone access is blocked. Allow it for this site and try again.',
-        desktopBridge?.openMicrophoneSettings
-          ? {
-              action: {
-                label: 'Open Settings',
-                onClick: () => void desktopBridge.openMicrophoneSettings?.(),
-              },
-            }
-          : undefined
-      )
+      if (desktopBridge) {
+        const { openMicrophoneSettings } = desktopBridge
+        toast.error(
+          'Microphone access is blocked. Allow Sim to use the microphone in your system privacy settings.',
+          openMicrophoneSettings
+            ? {
+                action: {
+                  label: 'Open Settings',
+                  onClick: () => void openMicrophoneSettings(),
+                },
+              }
+            : undefined
+        )
+      } else {
+        toast.error('Microphone access is blocked. Allow it for this site and try again.', {
+          action: {
+            label: 'Show steps',
+            onClick: () => setMicrophonePermissionHelpOpen(true),
+          },
+        })
+      }
       return
     }
     if (error === 'microphone-unavailable') {
@@ -504,7 +514,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
-      if ((e.target as HTMLElement).closest('button')) return
+      if ((e.target as HTMLElement).closest('button, [role="dialog"]')) return
       textareaRef.current?.focus()
     },
     [textareaRef]
@@ -697,6 +707,11 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
       />
 
       {files.isDragging && <DropOverlay />}
+
+      <MicrophonePermissionHelp
+        open={microphonePermissionHelpOpen}
+        onOpenChange={setMicrophonePermissionHelpOpen}
+      />
     </div>
   )
 })