improvement(home): name both choices in Sources mode with a Search / Assistant toggle

Author: waleedlatif1

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

@@ -1,5 +1,4 @@
 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 {
@@ -37,3 +36,4 @@ export { PromptEditor, usePromptEditor } from './prompt-editor'
 export { SendButton } from './send-button'
 export type { SkillsMenuHandle } from './skills-menu-dropdown/skills-menu-dropdown'
 export { SkillsMenuDropdown } from './skills-menu-dropdown/skills-menu-dropdown'
+export { SourcesModeToggle } from './sources-mode-toggle'

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

@@ -83,7 +83,7 @@ describe('ModeSwitcher', () => {
     openMenu()
 
     const rows = items()
-    expect(rows.map((row) => row.textContent)).toEqual(['Build', 'Search'])
+    expect(rows.map((row) => row.textContent)).toEqual(['Build', 'Sources'])
     expect(rows[0].querySelector('svg')).not.toBeNull()
     expect(rows[1].querySelector('svg')).toBeNull()
   })
@@ -97,15 +97,15 @@ describe('ModeSwitcher', () => {
     })
 
     expect(useMothershipModeStore.getState().mode).toBe('search')
-    expect(trigger().textContent).toBe('Search')
+    expect(trigger().textContent).toBe('Sources')
     expect(mockCaptureEvent).toHaveBeenCalledWith(null, 'chat_mode_changed', {
       workspace_id: 'workspace-1',
       mode: 'search',
     })
     expect(mockSetSearchQuery).not.toHaveBeenCalled()
   })
 
-  it('drops the search query from the URL when leaving Search', () => {
+  it('drops the search query from the URL when leaving Sources', () => {
     useMothershipModeStore.getState().setMode('search')
     mount()
     openMenu()

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

@@ -28,11 +28,11 @@ import {
 
 const MODE_LABELS: Record<MothershipMode, string> = {
   build: 'Build',
-  search: 'Search',
+  search: 'Sources',
 }
 
 /**
- * The composer's Build / Search switcher: a label-only `Chip` in its `round`
+ * The composer's Build / Sources 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
@@ -47,7 +47,7 @@ export const ModeSwitcher = memo(function ModeSwitcher() {
   const [, setSearchQueryParam] = useQueryState(searchQueryParam.key, searchQueryParam.parser)
   const [, setSearchFilters] = useQueryStates(searchFilterParsers, resourceUrlKeys)
 
-  /** Leaving Search drops the query from the URL, so a clean URL always means no search is showing. */
+  /** Leaving Sources drops the query from the URL, so a clean URL always means no search is showing. */
   const handleSelect = (next: MothershipMode) => {
     if (next === mode) return
     setMode(next)

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

@@ -0,0 +1 @@
+export { SourcesModeToggle } from './sources-mode-toggle'

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

@@ -0,0 +1,84 @@
+/**
+ * @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 { SourcesModeToggle } from '@/app/workspace/[workspaceId]/home/components/user-input/components/sources-mode-toggle/sources-mode-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(<SourcesModeToggle />))
+}
+
+function radios(): HTMLButtonElement[] {
+  return Array.from(container?.querySelectorAll<HTMLButtonElement>('[role="radio"]') ?? [])
+}
+
+function click(radio: HTMLButtonElement) {
+  act(() => {
+    radio.dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
+  })
+}
+
+beforeEach(() => {
+  mockCaptureEvent.mockClear()
+  useMothershipModeStore.getState().reset()
+})
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('SourcesModeToggle', () => {
+  it('renders nothing outside Sources mode', () => {
+    mount()
+    expect(radios()).toHaveLength(0)
+  })
+
+  it('names both choices with Search selected by default, and switches to Assistant on click', () => {
+    useMothershipModeStore.getState().setMode('search')
+    mount()
+
+    expect(radios().map((radio) => radio.textContent)).toEqual(['Search', 'Assistant'])
+    expect(radios().map((radio) => radio.getAttribute('aria-checked'))).toEqual(['true', 'false'])
+
+    click(radios()[1])
+
+    expect(useMothershipModeStore.getState().assistant).toBe(true)
+    expect(radios().map((radio) => radio.getAttribute('aria-checked'))).toEqual(['false', 'true'])
+    expect(mockCaptureEvent).toHaveBeenCalledWith(null, 'chat_sources_mode_changed', {
+      workspace_id: 'workspace-1',
+      mode: 'assistant',
+    })
+  })
+
+  it('does not report re-selecting the current choice', () => {
+    useMothershipModeStore.getState().setMode('search')
+    mount()
+
+    click(radios()[0])
+
+    expect(useMothershipModeStore.getState().assistant).toBe(false)
+    expect(mockCaptureEvent).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,68 @@
+'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'
+
+const OPTIONS = [
+  {
+    assistant: false,
+    label: 'Search',
+    hint: 'Enterprise search: list the documents that match, from every source you can read',
+  },
+  {
+    assistant: true,
+    label: 'Assistant',
+    hint: 'Answer in natural language from your sources, citing them, using your tools when needed',
+  },
+] as const
+
+/**
+ * Sources mode's two ways to use the sources, as a pair of round chips that
+ * act as one radio group: Search lists the matching documents; Assistant
+ * answers the question in natural language from them. The selected chip is
+ * the one in its selected state, so both choices are always named and the
+ * current one is never in doubt.
+ */
+export const SourcesModeToggle = memo(function SourcesModeToggle() {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const posthog = usePostHog()
+  const mode = useMothershipModeStore((state) => state.mode)
+  const assistant = useMothershipModeStore((state) => state.assistant)
+  const setAssistant = useMothershipModeStore((state) => state.setAssistant)
+
+  if (mode !== 'search') return null
+
+  const select = (next: boolean) => {
+    if (next === assistant) return
+    setAssistant(next)
+    captureEvent(posthog, 'chat_sources_mode_changed', {
+      workspace_id: workspaceId,
+      mode: next ? 'assistant' : 'search',
+    })
+  }
+
+  return (
+    <div role='radiogroup' aria-label='How to use your sources' className='flex items-center gap-1'>
+      {OPTIONS.map((option) => (
+        <Tooltip.Root key={option.label}>
+          <Tooltip.Trigger asChild>
+            <Chip
+              shape='round'
+              role='radio'
+              aria-checked={option.assistant === assistant}
+              active={option.assistant === assistant}
+              onClick={() => select(option.assistant)}
+            >
+              {option.label}
+            </Chip>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='top'>{option.hint}</Tooltip.Content>
+        </Tooltip.Root>
+      ))}
+    </div>
+  )
+})

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

@@ -21,14 +21,14 @@ 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,
   MicrophonePermissionHelp,
   ModeSwitcher,
   PromptEditor,
   SendButton,
+  SourcesModeToggle,
   usePromptEditor,
 } from '@/app/workspace/[workspaceId]/home/components/user-input/components'
 import { handleMothershipAddContextEvent } from '@/app/workspace/[workspaceId]/home/components/user-input/mothership-context-event'
@@ -720,7 +720,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
           </Tooltip.Root>
         </div>
         <div className='flex items-center gap-1.5'>
-          {canSearch && <AnswerToggle />}
+          {canSearch && <SourcesModeToggle />}
           {canSearch && <ModeSwitcher />}
           {isSttSupported && (
             <MicButton