Skip to content

Add model management to settings page #17

@kashifpk

Description

@kashifpk

Description

Add a secondary access point to the Model Management Modal from the Settings page, providing users with flexible discoverability.

Requirements

Settings Page Integration

Location: Settings page (SettingsView.vue or similar)

UI Section:

┌─────────────────────────────────────────────┐
│ Settings                                    │
├─────────────────────────────────────────────┤
│                                             │
│ [... existing settings sections ...]       │
│                                             │
│ ──────────────────────────────────────────  │
│                                             │
│ Model Management                            │
│ ─────────────────                           │
│ Configure available AI models from          │
│ different providers (OpenAI, Anthropic,     │
│ Google, OpenRouter).                        │
│                                             │
│ [Manage Models...]                          │
│                                             │
└─────────────────────────────────────────────┘

Behavior:

  • Button/link: "Manage Models..."
  • Opens the same ModelManagementModal used in chat
  • No duplication of logic, reuse component

Access Points Summary

After this implementation, users can open model management from:

  1. Chat dropdown - Click "⚙ Manage Models..." in model selector
  2. Settings page - Click "Manage Models..." in settings

Both open the same modal component with identical functionality.

Design System

  • PrimeVue Panel or Card for settings section
  • PrimeVue Button for "Manage Models..." action
  • Consistent with other settings sections
  • Use semantic tokens for styling

Implementation

Component Structure

SettingsView.vue:

<template>
  <!-- Existing settings sections -->
  
  <Panel header="Model Management">
    <p class="text-muted mb-3">
      Configure available AI models from different providers 
      (OpenAI, Anthropic, Google, OpenRouter).
    </p>
    <Button 
      label="Manage Models..." 
      icon="pi pi-cog"
      @click="showModelModal = true"
    />
  </Panel>
  
  <ModelManagementModal 
    v-model:visible="showModelModal"
  />
</template>

Shared Modal:

  • Import ModelManagementModal component
  • Use v-model:visible for dialog visibility
  • No props needed (modal fetches its own data)

User Experience

Benefits:

  • Provides alternate access for users who expect model config in settings
  • Chat access is convenient for quick changes
  • Settings access is for more thorough configuration sessions
  • Consistent experience across both entry points

Related Issues

Part of #10 - Model Selector Revamp - Frontend
Depends on #TBD (ModelManagementModal component)

Acceptance Criteria

  • Settings page has new "Model Management" section
  • "Manage Models..." button opens the modal
  • Modal functions identically to chat-initiated modal
  • Settings page styling is consistent with existing sections
  • No duplication of modal logic
  • Both access points work independently

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestmodel-selectorModel selector revamp feature

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions