🚀feat: allow user mark model as favorite

[urmauur]

Describe Your Changes

This pull request introduces a "favorites" feature for managing models in the application. Users can now mark models as favorites, which are stored persistently and displayed in a dedicated section within the model dropdown. Key changes include the addition of a new useFavoriteModel hook, updates to the dropdown and model settings UI, and logic to handle favorite models during deletion of models or providers.

New Favorites Feature Implementation:

• State Management for Favorites:

  • Added useFavoriteModel hook using Zustand to manage favorite models, including methods for adding, removing, toggling, and checking if a model is a favorite. Favorites are stored persistently in local storage under the key favoriteModels. (web-app/src/hooks/useFavoriteModel.ts)

• UI Enhancements:

  • Updated DropdownModelProvider to display a dedicated "Favorites" section, which is shown only when not searching. Favorite models are excluded from regular provider sections in this case. (web-app/src/containers/DropdownModelProvider.tsx) [1] [2] [3] [4] [5]
  • Added a FavoriteModelAction component to toggle the favorite status of a model, with a heart icon indicating the current state. (web-app/src/containers/FavoriteModelAction.tsx)

Integration with Existing Features:

• Model Settings:

  • Integrated FavoriteModelAction into the model settings page, allowing users to mark models as favorites directly from the settings UI. (web-app/src/routes/settings/providers/$providerName.tsx) [1] [2] [3]

• Model and Provider Deletion:

  • Updated DialogDeleteModel to remove models from favorites when they are deleted. (web-app/src/containers/dialogs/DeleteModel.tsx) [1] [2]
  • Updated DeleteProvider to remove all favorite models associated with a provider when the provider is deleted. (web-app/src/containers/dialogs/DeleteProvider.tsx) [1] [2]

Supporting Changes:

• Constants:
  • Added a new key favoriteModels to localStorageKey for managing favorite models in local storage. (web-app/src/constants/localStorage.ts)

These changes collectively enhance the user experience by allowing users to easily manage and access their favorite models.

Test Plan

• Verify users can mark/unmark models as favorites from
  model dropdown
• Confirm favorite models appear at top of dropdown list
• Test favorite toggle in provider settings page
• Validate favorites persist across browser sessions
• Check cleanup when deleting favorited models/providers

Fixes Issues

• Closes feat: Allow users to mark models as favourites  #3075
• Closes bug: custom provider models doesn't show up in chat ui without API key value #5662

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

---

Important

Introduces a feature to mark models as favorites, with state management, UI updates, and integration into model settings and deletion processes.

• Favorites Feature:
  • Added useFavoriteModel hook to manage favorite models with methods for adding, removing, toggling, and checking favorites. Uses Zustand and persists in local storage under favoriteModels. (useFavoriteModel.ts)
  • Updated DropdownModelProvider to include a "Favorites" section in the dropdown, excluding favorites from regular sections when not searching. (DropdownModelProvider.tsx)
  • Added FavoriteModelAction component to toggle favorite status with a heart icon. (FavoriteModelAction.tsx)
• Integration:
  • Integrated FavoriteModelAction into model settings, allowing users to mark favorites from settings UI. ($providerName.tsx)
  • Updated DialogDeleteModel to remove models from favorites upon deletion. (DeleteModel.tsx)
  • Updated DeleteProvider to remove all favorite models associated with a provider upon deletion. (DeleteProvider.tsx)
• Supporting Changes:
  • Added favoriteModels key to localStorageKey for managing favorites in local storage. (localStorage.ts)

^{This description was created by for 76341db. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to fd46f0d in 1 minute and 55 seconds. Click for details.

• Reviewed 371 lines of code in 7 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/DropdownModelProvider.tsx:157

• Draft comment:
  Consider using strict equality (===) instead of 'includes' when comparing provider IDs. Using 'includes' may lead to unintended matches.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% 1. The comment has a valid point - using includes() could match partial strings like "gpt" matching "gpt3" and "gpt4". 2. Provider IDs should be exact matches, not partial matches. 3. However, I don't have enough context about the predefinedProviders structure - maybe includes() is intentional here? 4. Without seeing predefinedProviders, I can't be 100% sure this is a bug. I don't have visibility into the predefinedProviders data structure. The current code using includes() may be intentionally designed to handle provider ID patterns or variations. While strict equality would generally be safer for ID comparisons, I can't be certain that includes() isn't serving a valid purpose here without seeing the predefinedProviders implementation. Without seeing the predefinedProviders implementation, I cannot be confident that this change would be correct. The current includes() usage may be intentional.

2. web-app/src/containers/DropdownModelProvider.tsx:242

• Draft comment:
  A comment explaining why favorite models are intentionally excluded from regular provider groups when not searching would improve clarity.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment suggests adding an explanation for why favorite models are excluded from regular provider groups. This is asking for clarification rather than making a specific code suggestion or pointing out a potential issue. It violates the rule against asking the PR author to explain their intention.

3. web-app/src/hooks/useFavoriteModel.ts:52

• Draft comment:
  Consider adding a trailing newline at the end of the file for consistency with common style guidelines.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

4. web-app/src/routes/settings/providers/$providerName.tsx:32

• Draft comment:
  Typographical error: The file path '@/containers/CustomeTooltipJoyRide' appears to contain a misspelling. The import is named 'CustomTooltipJoyRide', so consider renaming the file path to '@/containers/CustomTooltipJoyRide' if that was intended.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_KC5X9S7ju13aTaFK

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[github-actions]

Barecheck - Code coverage report

Total: 33.12%

Your code coverage diff: -0.08% ▾

Uncovered files and lines

File	Lines
web-app/src/containers/DropdownModelProvider.tsx	38-45, 48-56, 85, 88-89, 91-96, 98-100, 102-104, 106-107, 131-134, 136-139, 144-145, 155, 157-161, 163, 165-167, 170-171, 173-179, 195, 203-210, 212-216, 227-228, 234-237, 240-241, 243, 251-258, 260-268, 289-291, 304-308, 334-340, 347-349, 354, 356-360, 363-368, 370-380, 382-395, 397-398, 400-401, 406, 411-413, 415, 417-420, 423-439, 441-446, 449, 451, 453-459, 461-471, 473-476, 478-482, 484-485, 487, 489
web-app/src/containers/FavoriteModelAction.tsx	1-2, 8-10, 12-16, 18-19, 21, 23, 25
web-app/src/containers/dialogs/DeleteModel.tsx	1-2, 12-14, 16, 18-21, 28-35, 37, 39, 41-43, 45-63, 66-72, 75, 77-78, 80-82, 84-99, 101-114, 116
web-app/src/containers/dialogs/DeleteProvider.tsx	1-2, 13-21, 26-34, 36, 38, 40-45, 47-62, 64-85, 87-97, 99-104, 106, 108-109
web-app/src/hooks/useFavoriteModel.ts	19-27, 30-33, 36-37, 40-46
web-app/src/routes/settings/providers/$providerName.tsx	2-8, 15, 21-43, 46-48, 50-54, 56-86, 89-97, 99, 101, 104-106, 108-109, 112-113, 115, 117-122, 125-126, 128-131, 136-137, 139-142, 144-150, 152-154, 157-163, 166-169, 171, 173-177, 179-203, 205, 207-217, 219-221, 223-233, 235-272, 274-280, 283-284, 286-293, 295-305, 309-311, 314, 317-319, 321-332, 335-339, 341-344, 347-348, 351, 353-357, 359-366, 368-371, 373, 376-385, 387-391, 393-403, 405-407, 409-410, 412-413, 415, 417-418, 421-438, 440-445, 447-450, 452-458, 460-461, 463-478, 480-483, 485-493, 495-505, 507-516, 518-519, 522-532, 534-537, 539-549, 551-560, 562-574, 576-577, 579-584, 586-592, 594, 596, 598, 600, 602, 604, 606-613, 615-617, 619-625, 627

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed f30ea9f in 59 seconds. Click for details.

• Reviewed 29 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 1 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/FavoriteModelAction.tsx:13

• Draft comment:
  Consider using a element (or add appropriate role and tabindex) instead of a
  for clickable actions to improve accessibility (keyboard support and semantics).
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_VMVNmeEbFNoC0WjA

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 76341db in 46 seconds. Click for details.

• Reviewed 12 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 1 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/containers/DropdownModelProvider.tsx:161

• Draft comment:
  Extraneous closing brace removed. This ensures proper control flow and avoids potential syntax issues.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative, explaining a change that was made without suggesting any action or asking for clarification. It doesn't provide any actionable feedback or raise any concerns about the code.

Workflow ID: wflow_RgdCNSaHOSpWvmyn

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}