fix: update sidebar icon styles to maintain backward compatibility

[viktoravelino]

This pull request expands the list of sidebar categories in the SIDEBAR_CATEGORIES array in src/frontend/src/utils/styleUtils.ts. The update introduces several new categories, each with a display name, internal name, and associated icon, which will help organize and visually distinguish different types of items in the sidebar.

New sidebar categories added:

• Agents, Data, Logic, Helpers, Models, Vector Stores, Inputs, Outputs, Prompts, Chains, Loaders, Link Extractors, Output Parsers, Retrievers, Text Splitters, and Toolkits, each with a corresponding icon.

Summary by CodeRabbit

• New Features
  • Added new sidebar categories including Agents, Data, Logic, Helpers, Models, Vector Stores, Inputs, Outputs, Prompts, Chains, Loaders, Link Extractors, Output Parsers, Retrievers, and Text Splitters for enhanced navigation and content organization.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Extends the SIDEBAR_CATEGORIES export in styleUtils.ts by adding sixteen new sidebar category entries (Agents, Data, Logic, Helpers, Models, Vector Stores, Inputs, Outputs, Prompts, Chains, Loaders, Link Extractors, Output Parsers, Retrievers, Text Splitters, Toolkits) after the Tools category.

Changes

Cohort / File(s)	Change Summary
Sidebar Categories Expansion src/frontend/src/utils/styleUtils.ts	Added sixteen new entries to the SIDEBAR_CATEGORIES constant array, expanding available sidebar categories without altering function signatures or control flow.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file modification with straightforward constant array extension
• No logic changes, function signature modifications, or control flow alterations
• Repetitive data addition pattern (adding similar category objects)

Possibly related PRs

• ref: sidebar experience improvement with new bundles #8824: Modifies sidebar-related exports in the same styleUtils.ts file, specifically SIDEBAR_BUNDLES reordering and expansion.
• ref: Prompt Category Icon Update #8308: Changes the same SIDEBAR_CATEGORIES constant, previously updating the "prompts" category icon.

Suggested labels

size:M, lgtm

Suggested reviewers

• Yukiyukiyeah
• erichare
• mfortman11

Pre-merge checks and finishing touches

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title claims to 'update sidebar icon styles' but the actual change is expanding SIDEBAR_CATEGORIES array with new category entries, not updating icon styles or maintaining backward compatibility.	Revise the title to accurately reflect the main change, such as 'feat: add new sidebar categories for agents, data, logic, and other item types' or 'chore: expand SIDEBAR_CATEGORIES array with additional categories'.
Test Quality And Coverage	⚠️ Warning	The pull request adds 16 new sidebar category entries without corresponding test coverage for validation.	Create test file to validate SIDEBAR_CATEGORIES entries have required fields and icon names are valid.
Test File Naming And Structure	⚠️ Warning	Pull request modifies styleUtils.ts expanding SIDEBAR_CATEGORIES with 16 new entries without corresponding Jest test coverage in the established tests directory.	Create src/frontend/src/utils/tests/styleUtils.test.ts with tests for SIDEBAR_CATEGORIES properties, duplicates, icon validity, and backward compatibility.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Test Coverage For New Implementations	✅ Passed	No test files found that import or use SIDEBAR_CATEGORIES constant
Excessive Mock Usage Warning	✅ Passed	No test files were modified in this PR; changes are purely declarative configuration updates to a constant array with no excessive mock usage.

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	16.37% (4586/28003)	9.65% (2087/21610)	10.68% (659/6165)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
1777	0 💤	0 ❌	0 🔥	24.951s ⏱️

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 32.93%. Comparing base (c8a28cf) to head (b4322c9).
⚠️ Report is 2 commits behind head on main.

❌ Your project status has failed because the head coverage (39.27%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10947      +/-   ##
==========================================
- Coverage   32.94%   32.93%   -0.02%     
==========================================
  Files        1387     1387              
  Lines       65338    65334       -4     
  Branches     9653     9653              
==========================================
- Hits        21528    21520       -8     
- Misses      42716    42721       +5     
+ Partials     1094     1093       -1     

Flag	Coverage Δ
frontend	15.11% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/frontend/src/utils/styleUtils.ts	49.12% <ø> (ø)

... and 3 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/frontend/src/utils/styleUtils.ts (1)

234-249: Align new sidebar category metadata with existing icon/color mappings

New categories and icons look consistent overall with existing usage, but a couple of small alignment points are worth checking:

• Prompts uses icon: "braces" while categoryIcons.prompts and nodeIconToDisplayIconMap.prompts use "Braces". Resolution will still work via getLucideIconName, but using the same casing everywhere ("Braces") would keep icon naming consistent.
• Logic is introduced here (name: "logic") but there is no corresponding entry for "logic" in nodeColors, nodeColorsName, or categoryIcons/nodeIconToDisplayIconMap in this file. If logic will be used as a node/category key elsewhere (for colors or icon lookup), consider adding matching entries; if it’s only a UI grouping label, this is fine as is.

Can you confirm whether you want Prompts to standardize on "Braces" and whether logic needs color/icon mappings, or is purely cosmetic in the sidebar? Based on learnings, icon names should stay consistent across mappings.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a209acd and a8dbc4d.

📒 Files selected for processing (1)

• src/frontend/src/utils/styleUtils.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

src/frontend/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management

Files:

• src/frontend/src/utils/styleUtils.ts

src/frontend/src/utils/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)

Use named exports for utility functions in the utils/ directory

Files:

• src/frontend/src/utils/styleUtils.ts

🧠 Learnings (3)

📓 Common learnings

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-11-24T19:46:26.770Z
Learning: Applies to docs/sidebars.js : Sidebar configuration in sidebars.js must use category types to organize documentation into logical sections

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/utils/**/*.{ts,tsx} : Use named exports for utility functions in the utils/ directory

📚 Learning: 2025-11-24T19:46:26.770Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-11-24T19:46:26.770Z
Learning: Applies to docs/sidebars.js : Sidebar configuration in sidebars.js must use category types to organize documentation into logical sections

Applied to files:

• src/frontend/src/utils/styleUtils.ts

📚 Learning: 2025-11-24T19:46:45.790Z

Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/utils/**/*.{ts,tsx} : Use named exports for utility functions in the utils/ directory

Applied to files:

• src/frontend/src/utils/styleUtils.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). (3)

• GitHub Check: Test Starter Templates
• GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
• GitHub Check: Test Docker Images / Test docker images