Add refresh icon next to Model label in Chat Settings

[Copilot]

Description:

Users adding models via the "Add Model" tool had to restart the application to see them in the model selector. Added a refresh icon button next to the "Model" label that calls models.refreshModels() to scan directories and update the list immediately.

Changes Made:

Modified WebUI/src/components/SettingsChat.vue:

• Import useModels store and instantiate
• Add refresh icon next to "Model" label in the grid layout:
  • i-refresh icon (existing SVG asset)
  • Click handler: models.refreshModels()
  • Tooltip: "Refresh model list"
  • Positioned in first column alongside the label
  • Styling consistent with refresh button in SettingsBasic.vue

<div class="grid grid-cols-[120px_1fr] items-center gap-4">
  <div class="flex items-center gap-2">
    <Label class="whitespace-nowrap">{{ languages.MODEL }}</Label>
    <button
      class="svg-icon i-refresh w-5 h-5 text-primary shrink-0"
      @click="models.refreshModels"
      :title="languages.COM_REFRESH || 'Refresh model list'"
    ></button>
  </div>
  <ModelSelector />
</div>

Testing Done:

• Verified TypeScript syntax and imports
• Confirmed i-refresh icon asset exists and is used elsewhere
• Pattern matches existing implementation in SettingsBasic.vue
• Function models.refreshModels() already tested in DownloadDialog.vue
• Verified grid layout integration and positioning

Screenshots:

N/A - Adds small icon button next to "Model" label in the settings grid

Checklist:

• I have tested the changes locally.
• I have self-reviewed the code changes.
• I have updated the documentation, if necessary.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Refresh Model List</issue_title>
<issue_description>Add refresh icon back to the model list to refresh models added using Add model tool</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Refresh Model List #161

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[tnglemongrass]

Two remarks:

1. The ticket says "add refresh icon back to the models list...". Did you check git history, was there such a model refresh button in the past? If yes, how did it look like? Where was it placed?
2. Trying out the UI, I think this is not the right place to put that button. It should be placed in the line with the model dropdown. Let's try it next to the "Model" label in the first column.

[Copilot]

Updated in commit b1db539:

1. Git history check: The repository appears to be grafted at commit 9c4b2f5, so I don't have access to earlier history to verify if/how a model refresh button existed previously. The current implementation uses the i-refresh icon pattern consistent with other refresh buttons in the codebase (e.g., SettingsBasic.vue for preset refresh).

2. Positioning updated: Moved the refresh icon next to the "Model" label in the first column of the grid layout as suggested. The icon now appears as:

Model ⟳       [Model Selector ▼]

The refresh icon is wrapped with the label in a flex container within the 120px first column, providing a more compact and intuitive layout that visually associates the refresh action with the model selector.

[tnglemongrass]

1. good.
2. good. Feel free to add that to the PR as well.