feat(frontend): persist model selection by mode (chat/code) #784

qdaxb · 2025-12-30T08:23:52Z

Summary

Add mode-specific model persistence in localStorage for chat and code modes
Chat and code modes now remember their own model selections independently
When switching teams, try to restore saved model preference if compatible with new team's protocol
If saved model is not compatible with new team's protocol, clear selection and let user choose again

Changes

New Functions in `userPreferences.ts`

saveLastModelByMode(modelId, mode, modelType) - Save model preference for specific mode
getLastModelByMode(mode) - Get saved model preference for specific mode
clearModelPreferenceByMode(mode) - Clear model preference for specific mode
Added new localStorage keys: wegent_last_model_id_chat, wegent_last_model_type_chat, wegent_last_model_id_code, wegent_last_model_type_code

ModelSelector Modifications

Added taskType prop to support mode-aware persistence
Modified model restore logic to use mode-specific storage
Improved team change logic to:
1. First try to restore from mode-specific saved preference if compatible
2. If not found or incompatible, check if current model is still compatible
3. If neither works, clear selection

Component Updates

ChatInputControls.tsx - Added taskType prop and passed to ModelSelector
ChatInputCard.tsx - Pass taskType to ChatInputControls
TaskShareHandler.tsx - Added taskType based on isCodeTask
CreateGroupChatDialog.tsx - Added taskType="chat" for group chat creation

Test Plan

Select a model in chat mode, switch to code mode, verify the model selection is independent
Select a model in code mode, switch to chat mode, verify the previous chat mode model is restored
In chat mode, select a Claude model, switch to an Agno team (OpenAI protocol), verify model is cleared
In code mode, select an OpenAI model, switch to a Claude team, verify model is cleared and code mode preference is not affected
Refresh page in chat mode, verify the last selected chat model is restored
Refresh page in code mode, verify the last selected code model is restored

Summary by CodeRabbit

New Features
- Per-mode model persistence: Your selected model is now saved separately for chat and code tasks, ensuring the appropriate model is restored when switching between task types
- Improved team switching: Enhanced compatibility checks ensure model selection is properly updated when you change teams

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

- Add mode-specific model persistence in localStorage - Chat and code modes now remember their own model selections independently - When switching teams, try to restore saved model preference if compatible - If saved model is not compatible with new team's protocol, clear selection - Add saveLastModelByMode and getLastModelByMode functions in userPreferences - Pass taskType prop to ModelSelector for mode-aware persistence

coderabbitai · 2025-12-30T08:24:01Z

📝 Walkthrough

Walkthrough

The PR implements per-mode model selection persistence, allowing chat and code task types to maintain separate last-selected model preferences. It adds storage utilities, introduces a taskType prop propagated through components, and updates ModelSelector's initialization and restoration logic to respect mode-specific preferences and protocol compatibility.

Changes

Cohort / File(s)	Summary
Storage & Persistence `frontend/src/utils/userPreferences.ts`	Introduces per-mode (chat/code) model persistence: adds four new storage keys (LAST_MODEL_ID_CHAT, LAST_MODEL_TYPE_CHAT, LAST_MODEL_ID_CODE, LAST_MODEL_TYPE_CODE), a new ModelPreference interface, and three public functions (saveLastModelByMode, getLastModelByMode, clearModelPreferenceByMode) with error handling and validation.
Model Selector Logic `frontend/src/features/tasks/components/selector/ModelSelector.tsx`	Adds taskType prop ('chat' \| 'code') to enable per-mode persistence. Extends initialization and restoration logic to check mode-specific saved preferences, validate protocol compatibility, and restore compatible models on team changes. Updates model persistence to save by mode via taskType-dependent dependency tracking.
Input Controls & Dialog `frontend/src/features/tasks/components/input/ChatInputControls.tsx`, `frontend/src/features/tasks/components/input/ChatInputCard.tsx`, `frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsx`	Threads taskType prop through the component hierarchy: ChatInputControls adds optional taskType prop (default 'chat') and passes to ModelSelector; ChatInputCard forwards taskType to ChatInputControls; CreateGroupChatDialog hardcodes taskType='chat' to ModelSelector.
Task Handler `frontend/src/features/tasks/components/share/TaskShareHandler.tsx`	Derives taskType conditionally based on task type ('code' for code tasks, 'chat' otherwise) and passes to ModelSelector.

Sequence Diagram(s)

sequenceDiagram
    participant Component as React Component<br/>(ChatInputControls/<br/>TaskShareHandler)
    participant ModelSelector
    participant StorageUtil as userPreferences.ts<br/>(getLastModelByMode)
    participant LocalStorage as localStorage

    Component->>ModelSelector: Mount with taskType prop<br/>('chat' | 'code')
    
    rect rgb(200, 220, 255)
    Note over ModelSelector,LocalStorage: On Mount / Team Change
    ModelSelector->>StorageUtil: getLastModelByMode(taskType)
    StorageUtil->>LocalStorage: Read saved model<br/>for specific mode
    LocalStorage-->>StorageUtil: Return ModelPreference<br/>or null
    StorageUtil-->>ModelSelector: ModelPreference with<br/>modelId & modelType
    end

    rect rgb(220, 255, 220)
    Note over ModelSelector: Compatibility Check
    ModelSelector->>ModelSelector: Validate protocol<br/>compatibility with<br/>current team/config
    end

    alt Compatible Model Found
        ModelSelector->>ModelSelector: Restore saved model
    else No Compatible Model
        ModelSelector->>ModelSelector: Clear selection or<br/>set default
    end

    rect rgb(255, 240, 200)
    Note over Component,LocalStorage: On Model Selection
    Component->>ModelSelector: User selects model
    ModelSelector->>StorageUtil: saveLastModelByMode<br/>(modelId, taskType, modelType)
    StorageUtil->>LocalStorage: Write mode-specific<br/>model data
    LocalStorage-->>StorageUtil: ✓ Stored
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

fix: fix model selector #239: Modifies ModelSelector's selection/restoration and compatibility logic that forms the foundation for this PR's per-mode persistence additions.
refactor(frontend): split ChatArea.tsx into submodules for maintainability #675: Directly touches the same components (ChatInputControls, ChatInputCard, CreateGroupChatDialog, ModelSelector) and selector orchestration being extended here.
fix(frontend): require model selection for legacy teams without predefined models #232: Modifies ModelSelector's public API and behavior (team-change logic and model-required UI) that intersects with the PR's enhanced restoration and compatibility handling.

Suggested reviewers

feifei325
Micro66

🐰 Hop, hop! A task-type aware picker is born,
Chat and code, each with memory to adorn,
Per-mode persistence, clever and spry,
No more forgotten selections—they'll comply! 🎯✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the primary change: implementing per-mode model selection persistence. It accurately reflects the main objective of the PR without being vague or misleading.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a8a34b5 and 9441ce6.

📒 Files selected for processing (6)

frontend/src/features/tasks/components/group-chat/CreateGroupChatDialog.tsx
frontend/src/features/tasks/components/input/ChatInputCard.tsx
frontend/src/features/tasks/components/input/ChatInputControls.tsx
frontend/src/features/tasks/components/selector/ModelSelector.tsx
frontend/src/features/tasks/components/share/TaskShareHandler.tsx
frontend/src/utils/userPreferences.ts

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{py,ts,tsx,js,jsx}