feat: add research/search mode toggle with config and feature flag (#779)

[frano-m]

Closes #779.

This pull request introduces a new mode selection feature ("search" vs. "research") for the Explore view, controlled by a feature flag or configuration. It adds a context-based provider for managing the mode, a toggle button group UI for switching modes, and updates the Explore view layout to accommodate these changes. Additionally, it includes some minor style and test ID updates, and deprecates an old sidebar tools component.

Mode selection and management:

• Added a ModeProvider component that supplies mode context ("search" or "research") based on the "chat" feature flag or AI configuration, using a ToggleButtonGroupProvider for state management. (src/views/ExploreView/mode/provider/provider.tsx, src/views/ExploreView/mode/provider/context.ts, src/views/ExploreView/mode/provider/types.ts, src/views/ExploreView/mode/provider/hook.ts, src/views/ExploreView/mode/types.ts, src/views/ExploreView/mode/constants.ts, src/config/entities.ts, src/config/entities.ts) [1] [2] [3] [4] [5] [6] [7] [8]
• Integrated the new ModeProvider and ToggleButtonGroup into the Explore view, updating the sidebar layout and replacing the deprecated SidebarTools component. (src/views/ExploreView/exploreView.tsx, src/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.ts) [1] [2] [3] [4] [5] [6]

Toggle button group implementation:

• Added a generic, context-based toggle button group provider and hook for managing group state, along with supporting types. (src/components/common/ToggleButtonGroup/provider/context.ts, src/components/common/ToggleButtonGroup/provider/hook.ts, src/components/common/ToggleButtonGroup/provider/provider.tsx, src/components/common/ToggleButtonGroup/provider/types.ts) [1] [2] [3] [4]
• Implemented the ToggleButtonGroup UI component with storybook stories and custom styles for mode selection. (src/views/ExploreView/mode/components/ToggleButtonGroup/toggleButtonGroup.tsx, src/views/ExploreView/mode/components/ToggleButtonGroup/constants.ts, src/views/ExploreView/mode/components/ToggleButtonGroup/toggleButtonGroup.styles.ts, src/views/ExploreView/mode/components/ToggleButtonGroup/stories/toggleButtonGroup.stories.tsx) [1] [2] [3] [4]

Layout and style adjustments:

• Updated layout and styles for the Explore view's sidebar and filter controls to use new styled components and grid layouts. (src/views/ExploreView/search/filters/filters.styles.ts, src/views/ExploreView/search/sidebar/sidebar.styles.ts, src/components/Filter/components/SearchAllFilters/searchAllFilters.styles.ts) [1] [2] [3]

Other minor changes:

• Added new test IDs for search controls. (src/tests/testIds.ts)
• Deprecated the old SidebarTools styled component. (src/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.ts)

[Copilot]

Pull request overview

This pull request introduces a new mode selection feature for the Explore view, allowing users to toggle between "search" and "research" modes. The feature is controlled by either a feature flag ("chat") or a configuration setting (config.ai.enabled). The PR creates a generic, context-based toggle button group provider for managing state, implements a mode-specific provider that wraps it, and integrates the toggle UI into the Explore view's sidebar.

Changes:

• Adds a generic ToggleButtonGroupProvider for managing toggle button state via React context
• Implements a ModeProvider that enables mode toggling based on feature flags or AI configuration
• Creates a ToggleButtonGroup UI component for switching between "research" and "search" modes
• Updates the Explore view layout with new styled components and integrates the mode toggle
• Adds comprehensive test coverage for both providers
• Deprecates the old SidebarTools component
• Adds configuration support for AI features in SiteConfig

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tests/toggleButtonGroupProvider.test.tsx	Adds comprehensive tests for the generic ToggleButtonGroupProvider
tests/modeProvider.test.tsx	Adds comprehensive tests for the ModeProvider with feature flag and config scenarios
src/views/ExploreView/search/sidebar/sidebar.styles.ts	Adds styled Stack component for sidebar layout
src/views/ExploreView/search/filters/filters.styles.ts	Adds styled Grid component for filter controls layout
src/views/ExploreView/mode/types.ts	Defines MODE enum with RESEARCH and SEARCH values
src/views/ExploreView/mode/provider/types.ts	Defines type definitions for mode context and provider props
src/views/ExploreView/mode/provider/provider.tsx	Implements ModeProvider that conditionally enables mode toggling
src/views/ExploreView/mode/provider/hook.ts	Exports useMode hook for consuming mode context
src/views/ExploreView/mode/provider/context.ts	Creates ModeContext with React's createContext
src/views/ExploreView/mode/constants.ts	Defines FEATURE_FLAG constant for "chat" feature
src/views/ExploreView/mode/components/ToggleButtonGroup/toggleButtonGroup.tsx	Implements the ToggleButtonGroup UI component
src/views/ExploreView/mode/components/ToggleButtonGroup/toggleButtonGroup.styles.ts	Styles for the ToggleButtonGroup component
src/views/ExploreView/mode/components/ToggleButtonGroup/stories/toggleButtonGroup.stories.tsx	Storybook story for visual testing of ToggleButtonGroup
src/views/ExploreView/mode/components/ToggleButtonGroup/constants.ts	Configuration for toggle button group props and button definitions
src/views/ExploreView/exploreView.tsx	Integrates ModeProvider and ToggleButtonGroup into the Explore view
src/tests/testIds.ts	Adds SEARCH_CONTROLS test ID
src/config/entities.ts	Adds AiConfig interface and ai property to SiteConfig
src/components/common/ToggleButtonGroup/provider/types.ts	Defines generic types for toggle button group context and provider
src/components/common/ToggleButtonGroup/provider/provider.tsx	Implements generic ToggleButtonGroupProvider with state management
src/components/common/ToggleButtonGroup/provider/hook.ts	Exports useToggleButtonGroup hook
src/components/common/ToggleButtonGroup/provider/context.ts	Creates ToggleButtonGroupContext
src/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles.ts	Deprecates SidebarTools component with proper documentation
src/components/Filter/components/SearchAllFilters/searchAllFilters.styles.ts	Adds grid-column styling to make SearchAllFilters span full width