Add demo example cards #401
Conversation
WalkthroughThis change introduces a new system for loading and displaying demo search examples on the homepage. It adds a generic JSON file loader with schema validation, new types and schemas for demo data, and a React component for rendering demo cards. The homepage and agentic search components are updated to support and display these demo examples, with configuration via an environment variable. Additionally, minor UI text updates and simplifications were made in the agentic search component. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomePage
participant Env
participant Loader
participant Schema
participant AgenticSearch
participant DemoCards
User->>HomePage: Visit homepage
HomePage->>Env: Read SOURCEBOT_DEMO_EXAMPLES_PATH
HomePage->>Loader: loadJsonFile(path, demoExamplesSchema)
Loader->>Schema: Validate JSON against schema
Schema-->>Loader: Return validated data
Loader-->>HomePage: Return demoExamples
HomePage->>AgenticSearch: Render with demoExamples
AgenticSearch->>DemoCards: Render demo cards if demoExamples present
User->>DemoCards: Interact with cards (select/search)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@msukkari your pull request is missing a changelog! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx (1)
21-26: Interface inconsistency:chatHistoryprop is declared but not used.The
AgenticSearchPropsinterface still declares achatHistoryprop (lines 21-25), but this prop is not used in the component function parameters (line 34) or anywhere in the component. According to the AI summary, this prop was supposed to be removed as part of the refactoring.- chatHistory: { - id: string; - createdAt: Date; - name: string | null; - }[];
🧹 Nitpick comments (4)
packages/shared/src/utils.ts (1)
22-22: Address the TODO: Consider consolidating with existing config loading logic.The TODO comment highlights significant code duplication between
loadJsonFileandloadConfig. Both functions implement identical retry logic for local files and similar remote file handling.Consider extracting the common file loading logic into a shared helper function to reduce duplication and improve maintainability.
packages/web/src/types.ts (1)
15-20: Consider adding URL validation for better data integrity.The
urlfield indemoSearchExampleSchemaaccepts any string, but since it's used to open links in new tabs, consider adding URL format validation for better data integrity and security.- url: z.string(), + url: z.string().url(),packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx (2)
59-101: Complex selection logic could benefit from refactoring.The
handleContextClickfunction contains duplicated logic for handling selection/deselection of different context types. Consider extracting the common selection logic into helper functions for better maintainability.Consider creating helper functions like:
const toggleContextSelection = (context: DemoSearchContext, searchContext: SearchContextQuery) => { const isSelected = selectedItems.some( (selected) => selected.type === 'context' && selected.value === context.value ); return isSelected ? selectedItems.filter( (selected) => !(selected.type === 'context' && selected.value === context.value) ) : [...selectedItems, { type: 'context', value: context.value, name: context.displayName, repoCount: searchContext.repoNames.length } as SearchContextItem]; }; const toggleRepoSelection = (context: DemoSearchContext, repo: RepositoryQuery) => { // Similar logic for repo selection };
177-206: Potential performance issue: repeated array filtering in render.The search contexts filtering inside the map function (line 178) could impact performance if the arrays are large, as it runs on every render. Consider memoizing this computation.
+import { useMemo } from 'react'; +const examplesWithContexts = useMemo(() => + demoExamples.searchExamples.map(example => ({ + ...example, + searchContexts: demoExamples.searchContexts.filter(context => + example.searchContext.includes(context.id) + ) + })), [demoExamples] +); -{demoExamples.searchExamples.map((example) => { - const searchContexts = demoExamples.searchContexts.filter((context) => example.searchContext.includes(context.id)) +{examplesWithContexts.map((example) => { + const { searchContexts } = example;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/shared/src/index.server.ts(1 hunks)packages/shared/src/utils.ts(2 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/index.tsx(4 hunks)packages/web/src/app/[domain]/page.tsx(3 hunks)packages/web/src/env.mjs(1 hunks)packages/web/src/types.ts(1 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/shared/src/index.server.tspackages/web/src/app/[domain]/components/homepage/index.tsxpackages/web/src/env.mjspackages/web/src/app/[domain]/page.tsxpackages/shared/src/utils.tspackages/web/src/app/[domain]/components/homepage/agenticSearch.tsxpackages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsxpackages/web/src/types.ts
⏰ 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). (1)
- GitHub Check: build
🔇 Additional comments (9)
packages/web/src/env.mjs (1)
133-133: LGTM! Clean environment variable addition.The new
SOURCEBOT_DEMO_EXAMPLES_PATHenvironment variable follows the established patterns and conventions in the codebase.packages/shared/src/utils.ts (1)
27-80: The implementation logic is solid.The retry logic, error handling, and validation approach are all well-implemented and consistent with existing patterns in the codebase.
packages/shared/src/index.server.ts (1)
15-15: LGTM! Proper export addition.The new
loadJsonFileexport is correctly placed with other utility functions.packages/web/src/app/[domain]/page.tsx (1)
14-16: Good integration of the demo examples feature.The imports are clean and the prop passing follows the established patterns in the component.
Also applies to: 69-69
packages/web/src/app/[domain]/components/homepage/index.tsx (1)
13-13: LGTM! Clean integration of demo examples prop.The interface extension, parameter handling, and prop passing all follow established patterns and are correctly implemented.
Also applies to: 25-25, 35-35, 92-92
packages/web/src/app/[domain]/components/homepage/agenticSearch.tsx (1)
74-82: LGTM! Clean conditional rendering with proper prop passing.The conditional rendering of
AskSourcebotDemoCardsis well-implemented with all necessary props passed correctly. The component will only render when demo examples are available.packages/web/src/types.ts (2)
7-13: LGTM! Well-structured schema for demo search contexts.The
demoSearchContextSchemaappropriately defines the structure with proper validation including the enum constraint fortypeand optionalcodeHostType.
27-31: LGTM! Comprehensive aggregation schema for demo examples.The
demoExamplesSchemaproperly aggregates all the individual schemas into a cohesive structure that matches the expected JSON format.packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx (1)
188-193: Missing key prop for Badge components in map.The Badge components inside the map don't have unique keys, which could cause React rendering issues when the list changes.
The
keyprop usescontext.valuewhich should be unique, but verify this is always the case. If not, consider usingcontext.idinstead:-<Badge key={context.value} variant="secondary" className="text-[10px] px-1.5 py-0.5 h-4 flex items-center gap-1"> +<Badge key={context.id} variant="secondary" className="text-[10px] px-1.5 py-0.5 h-4 flex items-center gap-1">Likely an incorrect or invalid review comment.
packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx
Show resolved
Hide resolved
packages/web/src/app/[domain]/components/homepage/askSourcebotDemoCards.tsx
Show resolved
Hide resolved
1 participant
SOURCEBOT_DEMO_EXAMPLES_PATHwhich points to a JSON that defines demo cards. This includes search contexts to highlight, as well as example ask sessionsdemo_cards.mp4
Summary by CodeRabbit
New Features
Improvements
Configuration