feat(ask_sb): Add back search scope requirement and other UI changes

[msukkari]

• Adds back search scope requirement
• Adds Select all option in search scope selector
• Adds repo carousel in Ask Sourcebot view
• Minor UI nits

Summary by CodeRabbit

• New Features

  • Added a "Select all" option in the search scope selector for easier selection of all available scopes.
  • Introduced a new resource card for "Language Models" in the onboarding page.
  • Added a repository snapshot section to the homepage, displaying indexed repositories and a promotional message in demo environments.

• Enhancements

  • Improved the search scope filter UI with an "All" badge and updated badge styling and icons.
  • Updated chat submission logic to prevent submitting without a selected search scope, providing user feedback via a warning tooltip and toast notification.
  • Synchronized context selector open state across chat components for a more consistent user experience.

• UI Updates

  • Refreshed icons in the chat thread details card for better clarity.
  • Adjusted layout spacing and container widths for demo cards and other homepage elements.

• Documentation

  • Updated changelog to reflect the reintroduction of the search scope requirement and other UI changes.

[coderabbitai]

Walkthrough

This change reintroduces the requirement for selecting a search scope in the "ask sb" feature, updating UI components and control flow to enforce and communicate this constraint. It also adds visual and usability enhancements to related components, including improved filter badges, icons, and contextual documentation links.

Changes

Cohort / File(s)	Change Summary
Changelog Update CHANGELOG.md	Updates the changelog to document the reintroduction of the search scope requirement and related UI changes for the unreleased version.
ChatBox Search Scope Enforcement packages/web/src/features/chat/components/chatBox/chatBox.tsx	Adds logic to prevent submission without a selected search scope, displays a warning tooltip and toast, and introduces a new prop for context selector state.
Context Selector State Propagation packages/web/src/app/[domain]/chat/components/newChatPanel.tsx, packages/web/src/features/chat/components/chatThread/chatThread.tsx, packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx	Passes the onContextSelectorOpenChanged prop to ChatBox to enable parent components to track context selector state.
Homepage Demo Cards UI packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx	Simplifies JSX, removes an environment-dependent docs link, enhances search scope filter badges with icons and selection styling, and adds an "All" badge.
Repository Snapshot Enhancements packages/web/src/app/[domain]/components/homepage/repositorySnapshot.tsx	Adjusts repository count text, adds a conditional docs link with event tracking in demo environments.
Search Scope Selector Improvements packages/web/src/features/chat/components/chatBox/searchScopeSelector.tsx	Adds a "Select all" action, tracks search input state, and updates UI to allow selecting all search scopes at once.
Onboarding Resource Card packages/web/src/app/onboard/page.tsx	Adds a new resource card for "Language Models" with an associated icon and documentation link.
Chat Thread Details Icons packages/web/src/features/chat/components/chatThread/detailsCard.tsx	Updates icons for model name and thinking steps for visual consistency.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ChatBox
    participant ParentComponent

    User->>ChatBox: Attempt to submit (with no search scope)
    ChatBox-->>User: Show tooltip and toast warning
    ChatBox-->>ParentComponent: onContextSelectorOpenChanged(true)
    User->>ChatBox: Select search scope(s)
    ChatBox-->>User: Enable submit
    User->>ChatBox: Submit question
    ChatBox-->>ParentComponent: onContextSelectorOpenChanged(false)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15–20 minutes

Possibly related PRs

• feat(ask_sb): Improved search tool ; tools for listing / searching repos ; removed search scope constraint #400: Reversed the removal of the search scope requirement and UI logic, directly connected to the current PR's restoration of these features.
• Search scope refactor #405: Refactored "search context" to "search scope," affecting state, props, and UI, which aligns with the changes in this PR.

Suggested reviewers

• brendan-kellam

Poem

A rabbit hops through UI fields anew,
Restoring search scope for answers true.
Tooltips and badges, icons so bright,
"Select all" for ease, just click and delight!
With docs just a hop away,
Review these changes—let’s not delay!
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 211ad8f and 259ca41.

📒 Files selected for processing (10)

• CHANGELOG.md (1 hunks)
• packages/web/src/app/[domain]/chat/components/newChatPanel.tsx (1 hunks)
• packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx (3 hunks)
• packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx (1 hunks)
• packages/web/src/app/[domain]/components/homepage/repositorySnapshot.tsx (2 hunks)
• packages/web/src/app/onboard/page.tsx (2 hunks)
• packages/web/src/features/chat/components/chatBox/chatBox.tsx (9 hunks)
• packages/web/src/features/chat/components/chatBox/searchScopeSelector.tsx (3 hunks)
• packages/web/src/features/chat/components/chatThread/chatThread.tsx (1 hunks)
• packages/web/src/features/chat/components/chatThread/detailsCard.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*

📄 CodeRabbit Inference Engine (.cursor/rules/style.mdc)

Filenames should always be camelCase. Exception: if there are filenames in the same directory with a format other than camelCase, use that format to keep things consistent.

Files:

• packages/web/src/app/onboard/page.tsx
• packages/web/src/features/chat/components/chatThread/chatThread.tsx
• packages/web/src/app/[domain]/chat/components/newChatPanel.tsx
• packages/web/src/features/chat/components/chatThread/detailsCard.tsx
• packages/web/src/app/[domain]/components/homepage/repositorySnapshot.tsx
• packages/web/src/features/chat/components/chatBox/searchScopeSelector.tsx
• packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx
• CHANGELOG.md
• packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx
• packages/web/src/features/chat/components/chatBox/chatBox.tsx

🧬 Code Graph Analysis (2)

packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx (2)

packages/web/src/features/chat/components/chatBox/searchScopeInfoCard.tsx (1)

• SearchScopeInfoCard (3-26)

packages/web/src/components/ui/card.tsx (2)

• Card (79-79)
• CardContent (79-79)

packages/web/src/features/chat/components/chatBox/chatBox.tsx (3)

packages/web/src/components/hooks/use-toast.ts (2)

• useToast (194-194)
• toast (194-194)

packages/web/src/components/ui/tooltip.tsx (3)

• Tooltip (30-30)
• TooltipTrigger (30-30)
• TooltipContent (30-30)

packages/web/src/components/ui/button.tsx (1)

• Button (56-56)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: build
• GitHub Check: build

🔇 Additional comments (27)

packages/web/src/app/[domain]/components/homepage/repositorySnapshot.tsx (3)

19-19: LGTM - Import addition is used consistently.

The captureEvent import is properly utilized in the new promotional content section below.

---

72-79: LGTM - Text format improvement.

The text update removes "Search" and repositions "indexed" after the repository link, providing a clearer description of the repository status.

---

82-95: LGTM - Well-implemented promotional content.

The conditional rendering for demo environment is appropriate, and the analytics event capture is properly implemented with meaningful event naming.

CHANGELOG.md (1)

27-27: LGTM - Properly documented feature change.

The changelog entry clearly documents the reintroduction of the search scope requirement with appropriate PR reference.

packages/web/src/features/chat/components/chatThread/chatThread.tsx (1)

324-324: LGTM - Proper state communication pattern.

The onContextSelectorOpenChanged prop correctly enables the ChatBox component to communicate state changes back to the parent, following standard React patterns for component communication.

packages/web/src/features/chat/components/chatThread/detailsCard.tsx (3)

9-9: LGTM - Import update matches usage.

The import statement correctly replaces ScanSearchIcon with List to match the icon usage changes below.

---

92-92: LGTM - More semantically appropriate icon.

Changing from Cpu to Brain icon for the model name is more semantically appropriate for representing AI language models.

---

109-109: LGTM - Better visual representation.

The List icon is more appropriate for representing thinking steps count than the previous Brain icon.

packages/web/src/app/[domain]/chat/components/newChatPanel.tsx (1)

54-54: LGTM - Consistent state management pattern.

The onContextSelectorOpenChanged prop addition maintains consistency with the same pattern used in other components like ChatThread, enabling proper state synchronization.

packages/web/src/app/onboard/page.tsx (2)

17-17: LGTM: Clean import addition

The Brain icon import is properly added alongside existing Lucide React icons.

---

90-96: Well-structured resource card addition

The new "Language Models" resource card follows the established pattern perfectly, with appropriate documentation link and consistent icon usage. This enhances the onboarding experience by guiding users to configure language model providers.

packages/web/src/features/chat/components/chatBox/searchScopeSelector.tsx (3)

60-60: Good state management for search input tracking

The hasSearchInput state properly tracks whether the user has entered search text, enabling conditional UI rendering.

---

97-99: Clean "Select all" implementation

The handleSelectAll function correctly sets all available search scope items as selected, providing convenient bulk selection functionality.

---

193-200: Well-implemented conditional "Select all" UI

The "Select all" option is appropriately shown only when there's no search input, preventing confusion during filtered results. The styling and interaction patterns match the existing design system.

packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx (3)

16-16: Clean import addition

The RepositorySnapshot import follows the established import pattern.

---

62-62: Proper context selector state synchronization

The onContextSelectorOpenChanged prop correctly connects the ChatBox with the local state, enabling coordinated UI behavior.

---

84-92: Well-positioned repository snapshot integration

The RepositorySnapshot component is logically placed below the chat interface, and the separator provides good visual hierarchy. The styling maintains consistency with the overall design.

packages/web/src/features/chat/components/chatBox/chatBox.tsx (6)

10-10: Appropriate imports for enhanced functionality

The new imports (TriangleAlertIcon, useToast, SearchContextQuery) support the search scope validation and user feedback features.

Also applies to: 20-21

---

33-33: Well-defined interface extension

The onContextSelectorOpenChanged prop addition properly extends the interface to support context selector state management.

---

132-137: Correct search scope validation

The validation logic properly checks for empty search scopes and returns the appropriate disabled state and reason.

---

160-174: Excellent user feedback implementation

The enhanced onSubmit function provides clear user feedback through destructive toast notification and opens the context selector when no search scopes are selected. The early return prevents submission while guiding the user to fix the issue.

---

316-324: Smart workaround for disabled button interaction

The hack comment clearly explains the need for the wrapper div to capture clicks on disabled buttons. This ensures users get feedback even when the submit button is disabled, which is good UX design.

---

337-343: Clear visual warning for missing search scopes

The conditional tooltip with warning icon and descriptive text provides immediate visual feedback about why submission is disabled, improving user experience.

packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx (4)

69-69: Improved container structure and styling

Changing from Fragment to div with updated margins and max-width provides better layout control for the demo cards section.

---

91-100: Excellent "All" filter badge implementation

The "All" badge provides a clear way to reset filters, with proper selection state styling and intuitive interaction. The dynamic styling based on selection state enhances user experience.

---

111-111: Consistent icon integration in filter badges

The use of getSearchScopeIcon with size 12 and selection state provides visual consistency across the filter UI, making it easier for users to understand different scope types.

---

118-123: Clean filtering logic implementation

The filtering logic correctly handles both "show all" (null selection) and specific scope filtering, providing the expected user experience.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch msukkarieh/search_scope

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.