fix(collections,agents): added empty state for collection and agents page #1062
Conversation
rahul1841
requested review from
devesh-juspay,
junaid-shirur,
kalpadhwaryu,
shivamashtikar and
zereraz
as code owners
Summary of ChangesHello @rahul1841, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces significant user interface enhancements to the Agents and Knowledge Management sections of the application. The primary goal is to provide a more intuitive and engaging experience for users when these sections are empty, guiding them on how to create their first agent or collection. This is achieved through the implementation of dedicated empty state designs, which include relevant imagery, descriptive text, and prominent call-to-action buttons, alongside refined conditional rendering of UI components to maintain a clean and focused interface. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughConditional rendering added for header actions and empty states in Agents and Knowledge Management routes; action buttons now depend on data presence or upload state and illustrative empty-state icons were introduced. Refresh and upload behaviors retained; no public API changes. (50 words) Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant AR as AgentsRoute
participant DS as AgentData
U->>AR: Navigate / switch tab
AR->>DS: Fetch agents for active tab
DS-->>AR: Agent list
alt Has agents
AR-->>U: Render tabs + actions (Search, CREATE) + list
else No agents
AR-->>U: Render tabs + empty-state illustration + guidance (+ CREATE action where applicable)
end
U->>AR: Click Refresh
AR->>DS: Refetch agents
DS-->>AR: Updated list
AR-->>U: Rerender per state
sequenceDiagram
autonumber
participant U as User
participant KM as KnowledgeManagementContent
participant KB as CollectionsData
participant UP as UploadState
U->>KM: Navigate
KM->>KB: Load collections
KB-->>KM: Collections list
KM->>UP: Check uploading
UP-->>KM: Upload status
alt Collections exist or uploading
KM-->>U: Render header + (NEW/ADD) button + list or upload progress
else No collections and not uploading
KM-->>U: Render empty-state illustration + title/subtitle + ADD COLLECTION button
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
Thank you for this pull request. You've done a great job of adding empty states to the agents and collections pages, which significantly improves the user experience for new users or empty accounts. I've identified a critical syntax issue and a few opportunities for code simplification and consistency. Please see my detailed comments below.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/routes/_authenticated/agent.tsx (1)
2926-2928: Improve alt text specificity for accessibility.The alt text
"No agents"is generic. Consider making it more descriptive to better convey the context to screen reader users:- alt="No agents" + alt="Empty agents list illustration"For the shared-to-me tab:
- alt="No agents" + alt="No shared agents illustration"More descriptive alt text improves accessibility without affecting visual presentation.
Also applies to: 2950-2952
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
frontend/src/assets/emptystateIcons/agent.pngis excluded by!**/*.pngfrontend/src/assets/emptystateIcons/kb.pngis excluded by!**/*.png
📒 Files selected for processing (2)
frontend/src/routes/_authenticated/agent.tsx(4 hunks)frontend/src/routes/_authenticated/knowledgeManagement.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-06-23T07:43:59.494Z
Learnt from: rahul1841
PR: xynehq/xyne#582
File: frontend/src/routes/_authenticated/agent.tsx:1654-1654
Timestamp: 2025-06-23T07:43:59.494Z
Learning: In the agent test interface dropdown (frontend/src/routes/_authenticated/agent.tsx), the agent selection dropdown specifically uses `allAgentsList` only and should only check `allAgentsList.length > 0` for visibility. It does not need to check other agent lists like `madeByMeAgentsList` or `sharedToMeAgentsList` because the dropdown is designed to show agents from the "all agents" tab only.
Applied to files:
frontend/src/routes/_authenticated/agent.tsx
📚 Learning: 2025-10-07T13:55:21.003Z
Learnt from: Ravishekhar7870
PR: xynehq/xyne#1059
File: frontend/src/routes/_authenticated/agent.tsx:3642-3692
Timestamp: 2025-10-07T13:55:21.003Z
Learning: In the agent.tsx file, folder navigation from Google Drive search results is now intended functionality - users should be able to navigate into searched folders via the GoogleDriveNavigation component.
Applied to files:
frontend/src/routes/_authenticated/agent.tsx
🔇 Additional comments (6)
frontend/src/routes/_authenticated/knowledgeManagement.tsx (3)
64-64: LGTM!The import statement is correct and follows the project's convention for importing static assets.
1778-1793: LGTM!The conditional rendering logic is correct. The header actions are appropriately shown when there are collections or during an upload, which ensures a smooth UX when creating the first collection.
1820-2104: LGTM!The existing collections list is correctly wrapped in an else block to ensure it's only shown when appropriate (not in empty state). The internal logic remains unchanged and functions as expected.
frontend/src/routes/_authenticated/agent.tsx (3)
81-81: LGTM: Empty state icon import.The import is correctly structured and follows the existing naming convention for asset files.
2755-2782: Verify: Inconsistent CREATE button visibility.The IIFE hides both the search input and CREATE button when the current tab has no agents. While the empty states (lines 2922-2943) provide a CREATE button for "all" and "made-by-me" tabs, this creates an inconsistency:
- With agents: CREATE button appears in the header (line 2774-2779)
- Without agents: CREATE button appears in the empty state (line 2936-2941)
This shifting location might confuse users. Consider one of these approaches:
- Option 1: Always show the CREATE button in the header, hide only the search input when empty
- Option 2: Keep current behavior but ensure it's intentional UX design
If the current behavior is intended (showing CREATE in empty state encourages users to act), please confirm. Otherwise, adjust the conditional to keep CREATE always visible in the header.
// Option 1: Always show CREATE, conditionally show search const currentTabHasAgents = (activeTab === "all" && allAgentsList.length > 0) || (activeTab === "made-by-me" && madeByMeAgentsList.length > 0) || (activeTab === "shared-to-me" && sharedToMeAgentsList.length > 0) return ( <> {currentTabHasAgents && ( <div className="relative"> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" /> <input type="text" placeholder="Search agents.." value={listSearchQuery} onChange={handleListSearchChange} className="pl-10 pr-4 py-2 rounded-full border border-gray-200 dark:border-slate-600 w-[300px] focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-slate-500 bg-white dark:bg-slate-700 dark:text-gray-100" /> </div> )} <Button onClick={handleCreateNewAgent} className="bg-slate-800 hover:bg-slate-700 text-white font-mono font-medium rounded-full px-6 py-2 flex items-center gap-2" > <Plus size={18} /> CREATE </Button> </> )
2836-2871: LGTM: Tab layout reorganization.The restructured layout correctly ensures tab buttons and the refresh button are always accessible, while the action cluster (search/CREATE) is conditionally rendered. The refresh button properly reflects loading state with both disabled attribute and spinning animation.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/src/routes/_authenticated/agent.tsx (2)
2755-2784: Refactor IIFE touseMemofor better performance and readability.The IIFE pattern for calculating
currentTabHasAgentsinside JSX is awkward and recomputes on every render. Consider extracting this logic to auseMemohook for clarity and to avoid unnecessary recalculations:+ const currentTabHasAgents = useMemo(() => { + const agentLists: Record<string, SelectPublicAgent[]> = { + "all": allAgentsList, + "made-by-me": madeByMeAgentsList, + "shared-to-me": sharedToMeAgentsList, + } + return (agentLists[activeTab]?.length ?? 0) > 0 + }, [activeTab, allAgentsList, madeByMeAgentsList, sharedToMeAgentsList]) <div className="flex items-center gap-4 "> - {(() => { - // Calculate whether current tab has agents - const agentLists: Record<string, SelectPublicAgent[]> = { - "all": allAgentsList, - "made-by-me": madeByMeAgentsList, - "shared-to-me": sharedToMeAgentsList, - } - const currentTabHasAgents = (agentLists[activeTab]?.length ?? 0) > 0 - - return currentTabHasAgents && ( - <> - <div className="relative"> - <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" /> - <input - type="text" - placeholder="Search agents.." - value={listSearchQuery} - onChange={handleListSearchChange} - className="pl-10 pr-4 py-2 rounded-full border border-gray-200 dark:border-slate-600 w-[300px] focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-slate-500 bg-white dark:bg-slate-700 dark:text-gray-100" - /> - </div> - <Button - onClick={handleCreateNewAgent} - className="bg-slate-800 hover:bg-slate-700 text-white font-mono font-medium rounded-full px-6 py-2 flex items-center gap-2" - > - <Plus size={18} /> CREATE - </Button> - </> - ) - })()} + {currentTabHasAgents && ( + <> + <div className="relative"> + <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" /> + <input + type="text" + placeholder="Search agents.." + value={listSearchQuery} + onChange={handleListSearchChange} + className="pl-10 pr-4 py-2 rounded-full border border-gray-200 dark:border-slate-600 w-[300px] focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-slate-500 bg-white dark:bg-slate-700 dark:text-gray-100" + /> + </div> + <Button + onClick={handleCreateNewAgent} + className="bg-slate-800 hover:bg-slate-700 text-white font-mono font-medium rounded-full px-6 py-2 flex items-center gap-2" + > + <Plus size={18} /> CREATE + </Button> + </> + )} </div>
2935-2937: Improve alt text for better accessibility.The alt text "No agents" is minimal. Consider making it more descriptive to help screen reader users understand the context:
<img src={agentEmptyStateIcon} - alt="No agents" + alt="Empty state illustration" className="w-32 h-32 mb-6 opacity-60" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/src/routes/_authenticated/agent.tsx(4 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-06-23T07:43:59.494Z
Learnt from: rahul1841
PR: xynehq/xyne#582
File: frontend/src/routes/_authenticated/agent.tsx:1654-1654
Timestamp: 2025-06-23T07:43:59.494Z
Learning: In the agent test interface dropdown (frontend/src/routes/_authenticated/agent.tsx), the agent selection dropdown specifically uses `allAgentsList` only and should only check `allAgentsList.length > 0` for visibility. It does not need to check other agent lists like `madeByMeAgentsList` or `sharedToMeAgentsList` because the dropdown is designed to show agents from the "all agents" tab only.
Applied to files:
frontend/src/routes/_authenticated/agent.tsx
📚 Learning: 2025-10-07T13:55:21.003Z
Learnt from: Ravishekhar7870
PR: xynehq/xyne#1059
File: frontend/src/routes/_authenticated/agent.tsx:3642-3692
Timestamp: 2025-10-07T13:55:21.003Z
Learning: In the agent.tsx file, folder navigation from Google Drive search results is now intended functionality - users should be able to navigate into searched folders via the GoogleDriveNavigation component.
Applied to files:
frontend/src/routes/_authenticated/agent.tsx
🧬 Code graph analysis (1)
frontend/src/routes/_authenticated/agent.tsx (2)
server/db/schema/agents.ts (1)
SelectPublicAgent(131-131)server/shared/types.ts (1)
SelectPublicAgent(113-113)
🔇 Additional comments (1)
frontend/src/routes/_authenticated/agent.tsx (1)
2923-2957: LGTM! Clean empty state implementation.The empty state logic appropriately handles different tab scenarios:
- Shared tab: Shows a passive message without action button (correct, as users can't create shared agents)
- Other tabs: Shows a call-to-action with CREATE button
The conditional rendering of the CREATE button (in header when agents exist, in empty state when none exist) is an intentional UX pattern that keeps the primary action visible and accessible in both scenarios.
3 participants
Description
added empty state for collection and agents page
Testing
tested locally
Summary by CodeRabbit
New Features
Style