improvement(home): fold Ask into Search behind an Answer toggle

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.test.tsx

@@ -128,14 +128,4 @@ describe('SuggestedActions', () => {
     expect(document.querySelector('[data-testid="search-sources"]')).not.toBeNull()
     expect(rows()).toHaveLength(0)
   })
-
-  it('shows the sources in Ask mode, which answers from them', () => {
-    mount()
-
-    act(() => useMothershipModeStore.getState().setMode('ask'))
-
-    expect(heading()).toBe('Sources')
-    expect(document.querySelector('[data-testid="search-sources"]')).not.toBeNull()
-    expect(rows()).toHaveLength(0)
-  })
 })

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx

@@ -234,7 +234,6 @@ const INITIAL_ACTIONS: Action[] = [
 /** Section heading per composer mode — Search reads as a connect-your-sources list. */
 const HEADINGS: Record<MothershipMode, string> = {
   build: 'Suggested actions',
-  ask: 'Sources',
   search: 'Sources',
 }
 
@@ -373,7 +372,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
               `collapsible-up`/`-down` interpolate height alone, so a margin here
               would hold its full value through the close and then vanish on unmount,
               snapping the content below up. */}
-          {mode !== 'build' && workspaceId ? (
+          {mode === 'search' && workspaceId ? (
             <div className='pt-1.5'>
               <SearchSources workspaceId={workspaceId} />
             </div>

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

@@ -0,0 +1,71 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockCaptureEvent } = vi.hoisted(() => ({ mockCaptureEvent: vi.fn() }))
+
+vi.mock('next/navigation', () => ({
+  useParams: () => ({ workspaceId: 'workspace-1' }),
+}))
+vi.mock('posthog-js/react', () => ({ usePostHog: () => null }))
+vi.mock('@/lib/posthog/client', () => ({ captureEvent: mockCaptureEvent }))
+
+import { AnswerToggle } from '@/app/workspace/[workspaceId]/home/components/user-input/components/answer-toggle/answer-toggle'
+import { useMothershipModeStore } from '@/stores/mothership-mode/store'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount() {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(<AnswerToggle />))
+}
+
+function button(): HTMLButtonElement | null {
+  return container?.querySelector('button') ?? null
+}
+
+beforeEach(() => {
+  mockCaptureEvent.mockClear()
+  useMothershipModeStore.getState().reset()
+})
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('AnswerToggle', () => {
+  it('renders nothing outside Search mode', () => {
+    mount()
+    expect(button()).toBeNull()
+  })
+
+  it('shows an unpressed Answer chip in Search mode and flips the shared flag on click', () => {
+    useMothershipModeStore.getState().setMode('search')
+    mount()
+
+    const chip = button()
+    expect(chip?.textContent).toBe('Answer')
+    expect(chip?.getAttribute('aria-pressed')).toBe('false')
+
+    act(() => {
+      chip?.dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
+    })
+
+    expect(useMothershipModeStore.getState().answer).toBe(true)
+    expect(button()?.getAttribute('aria-pressed')).toBe('true')
+    expect(mockCaptureEvent).toHaveBeenCalledWith(null, 'chat_answer_toggled', {
+      workspace_id: 'workspace-1',
+      enabled: true,
+    })
+  })
+})

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

@@ -0,0 +1,44 @@
+'use client'
+
+import { memo } from 'react'
+import { Chip, Tooltip } from '@sim/emcn'
+import { useParams } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { captureEvent } from '@/lib/posthog/client'
+import { useMothershipModeStore } from '@/stores/mothership-mode/store'
+
+/**
+ * Search mode's Answer toggle: off, a query lists the matching documents; on,
+ * Sim answers the question from those sources and may use the person's
+ * connected tools. A label-only round `Chip` in its selected state while on,
+ * sitting beside the mode switcher in the toolbar's row of round controls.
+ */
+export const AnswerToggle = memo(function AnswerToggle() {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const posthog = usePostHog()
+  const mode = useMothershipModeStore((state) => state.mode)
+  const answer = useMothershipModeStore((state) => state.answer)
+  const setAnswer = useMothershipModeStore((state) => state.setAnswer)
+
+  if (mode !== 'search') return null
+
+  const handleToggle = () => {
+    setAnswer(!answer)
+    captureEvent(posthog, 'chat_answer_toggled', { workspace_id: workspaceId, enabled: !answer })
+  }
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Chip shape='round' active={answer} aria-pressed={answer} onClick={handleToggle}>
+          Answer
+        </Chip>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>
+        {answer
+          ? 'Sim answers from your sources and can use your tools'
+          : 'List matching documents'}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+})

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

@@ -0,0 +1 @@
+export { AnswerToggle } from './answer-toggle'

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

@@ -1,4 +1,5 @@
 export { AnimatedPlaceholderEffect } from './animated-placeholder-effect'
+export { AnswerToggle } from './answer-toggle'
 export { AttachedFilesList } from './attached-files-list'
 export type { ParsedChipLink, PortableKind } from './chip-clipboard-codec'
 export {

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

@@ -78,23 +78,22 @@ describe('ModeSwitcher', () => {
     expect(button.querySelector('svg')).toBeNull()
   })
 
-  it('lists every mode and checks the active one', () => {
+  it('lists both modes and checks the active one', () => {
     mount()
     openMenu()
 
     const rows = items()
-    expect(rows.map((row) => row.textContent)).toEqual(['Build', 'Ask', 'Search'])
+    expect(rows.map((row) => row.textContent)).toEqual(['Build', 'Search'])
     expect(rows[0].querySelector('svg')).not.toBeNull()
     expect(rows[1].querySelector('svg')).toBeNull()
-    expect(rows[2].querySelector('svg')).toBeNull()
   })
 
   it('switches the shared mode and reports the change', () => {
     mount()
     openMenu()
 
     act(() => {
-      items()[2].dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
+      items()[1].dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
     })
 
     expect(useMothershipModeStore.getState().mode).toBe('search')

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

@@ -28,12 +28,11 @@ import {
 
 const MODE_LABELS: Record<MothershipMode, string> = {
   build: 'Build',
-  ask: 'Ask',
   search: 'Search',
 }
 
 /**
- * The composer's Build / Ask / Search switcher: a label-only `Chip` in its `round`
+ * The composer's Build / Search switcher: a label-only `Chip` in its `round`
  * shape — chip chrome throughout (`--text-body` label, `--surface-hover` on
  * hover, no text-color shift), fully round to sit in the toolbar's row of
  * round controls — opening a menu that checks the active mode, as

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

@@ -21,6 +21,7 @@ import { MOTHERSHIP_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import {
   AnimatedPlaceholderEffect,
+  AnswerToggle,
   AttachedFilesList,
   DropOverlay,
   MicButton,
@@ -719,6 +720,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
           </Tooltip.Root>
         </div>
         <div className='flex items-center gap-1.5'>
+          {canSearch && <AnswerToggle />}
           {canSearch && <ModeSwitcher />}
           {isSttSupported && (
             <MicButton

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -195,6 +195,7 @@ export function Home({ chatId, userName, userId }: HomeProps) {
     if (searchQuery) useMothershipModeStore.getState().setMode('search')
   }, [searchQuery])
   const composerMode = useMothershipModeStore((state) => state.mode)
+  const answerMode = useMothershipModeStore((state) => state.answer)
   /** The bases an Ask turn is grounded in; read through a ref so a list refresh never rebuilds the submit handler. */
   const { data: knowledgeBases = EMPTY_KNOWLEDGE_BASES } = useKnowledgeBasesQuery(workspaceId)
   const knowledgeBasesRef = useRef(knowledgeBases)
@@ -487,11 +488,13 @@ export function Home({ chatId, userName, userId }: HomeProps) {
       })
 
       /**
-       * Search mode answers with documents, not a turn of the agent, and only
+       * Search without Answer lists documents, not a turn of the agent, and only
        * a query can be answered: attachments alone have nothing to search for.
+       * With Answer on, the query is a turn of the agent grounded in the sources.
        */
-      const mode = useMothershipModeStore.getState().mode
-      if (mode === 'search') {
+      const { mode, answer } = useMothershipModeStore.getState()
+      const answering = mode === 'search' && answer
+      if (mode === 'search' && !answer) {
         if (trimmed) setSearchQuery(trimmed)
         return
       }
@@ -501,18 +504,17 @@ export function Home({ chatId, userName, userId }: HomeProps) {
       }
 
       prepareResourceViewForAgentTurn()
-      const turnContexts =
-        mode === 'ask'
-          ? withSearchedKnowledgeContexts(
-              contexts,
-              searchedKnowledgeBases(knowledgeBasesRef.current, workspaceId)
-            )
-          : contexts
+      const turnContexts = answering
+        ? withSearchedKnowledgeContexts(
+            contexts,
+            searchedKnowledgeBases(knowledgeBasesRef.current, workspaceId)
+          )
+        : contexts
       sendMessage(
         trimmed || 'Analyze the attached file(s).',
         fileAttachments,
         turnContexts,
-        mode === 'ask' ? { requestMode: 'ask' } : undefined
+        answering ? { requestMode: 'ask' } : undefined
       )
     },
     [workspaceId, chatId, prepareResourceViewForAgentTurn, sendMessage, setSearchQuery]
@@ -521,20 +523,23 @@ export function Home({ chatId, userName, userId }: HomeProps) {
   /** An emptied search box returns to the sources; nothing else reads the cleared query. */
   const clearSearch = useCallback(() => setSearchQuery(''), [setSearchQuery])
 
-  /** Summarize or Answer on a result: hand the question to the agent in Ask mode. */
+  /** Summarize or Answer on a result: turn Answer on and hand the question to the agent. */
   const handleSummarize = (prompt: string) => {
-    useMothershipModeStore.getState().setMode('ask')
+    const store = useMothershipModeStore.getState()
+    store.setMode('search')
+    store.setAnswer(true)
     setSearchQuery('')
     handleSubmit(prompt)
   }
   /**
-   * A chat that already exists never opens in Search: its transcript is a
-   * conversation, and search results never join it. Build and Ask both carry
-   * over, so a follow-up question stays grounded in the sources.
+   * A chat that already exists never opens in document-listing Search: its
+   * transcript is a conversation, and search results never join it. Build and
+   * Search with Answer both carry over, so a follow-up stays grounded in the
+   * sources.
    */
   useEffect(() => {
     const store = useMothershipModeStore.getState()
-    if (chatId && store.mode === 'search') store.setMode('build')
+    if (chatId && store.mode === 'search' && !store.answer) store.setMode('build')
   }, [chatId])
   const showSearchResults = composerMode === 'search' && searchQuery.trim().length > 0
   const searchResults = showSearchResults ? (
@@ -767,7 +772,7 @@ export function Home({ chatId, userName, userId }: HomeProps) {
                     draftScopeKey={draftScopeKey}
                     onSubmit={handleSubmit}
                     canSearch
-                    clearOnSubmit={composerMode !== 'search'}
+                    clearOnSubmit={composerMode !== 'search' || answerMode}
                     onCleared={clearSearch}
                     isSending={isSending}
                     onStopGeneration={handleStopGeneration}
@@ -796,7 +801,7 @@ export function Home({ chatId, userName, userId }: HomeProps) {
             isLoading={showChatSkeleton}
             onSubmit={handleSubmit}
             canSearch
-            clearOnSubmit={composerMode !== 'search'}
+            clearOnSubmit={composerMode !== 'search' || answerMode}
             onCleared={clearSearch}
             onStopGeneration={handleStopGeneration}
             messageQueue={messageQueue}