implements enhancement outlined in #4049
in the model selection dialog, the user can press enter to select the model currently selected in the list. (#3962)
this PR adds the ability to move the selected model using the arrow keys, and to select it with the enter key.
Changed
refactored on:keydown and related components to keep track of the currently selected model via arrow keys.
Additional Information
models that are out of view will be scrolled to when they are selected with arrow keys.
if the user clicks out of the modal, or selects a model, or opens a new chat, the pseusoSelectedIndex is reset.
this was done to avoid the state of this from lingering across selections. For example, if the user selects a model, then opens a new chat, the pseudoSelectedIndex could be off screen. This could be solved by resetting the state utilizing a store, but that could have possible side effects so i've decided to keep it contained within the component.
holding the arrow keys down does not cause any unexpected behaviour
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/open-webui/open-webui/pull/4059
**Author:** [@thearyadev](https://github.com/thearyadev)
**Created:** 7/23/2024
**Status:** ✅ Merged
**Merged:** 7/25/2024
**Merged by:** [@tjbck](https://github.com/tjbck)
**Base:** `dev` ← **Head:** `feat/model-selection-with-arrow-keys`
---
### 📝 Commits (5)
- [`5beaa5d`](https://github.com/open-webui/open-webui/commit/5beaa5d89291a326425c921890462bb754c7fbb5) feat: select model with arrow keys (+enter)
- [`eb38d38`](https://github.com/open-webui/open-webui/commit/eb38d382bab339427dc3194ab638cf5be74112b4) fix: pseudoSelectedIndex is reset when modal is closed.
- [`dbf88a2`](https://github.com/open-webui/open-webui/commit/dbf88a2ecacd8a207a41a13284c9df7d9ac4f25c) refactor: rename `pseudoSelectedIndex` to `selectedModelIdx`
- [`fbef731`](https://github.com/open-webui/open-webui/commit/fbef731a04d560e6e823ab79dd9057603351e0d1) fix: check `filteredItems` length before unsafe index access
- [`9e4326a`](https://github.com/open-webui/open-webui/commit/9e4326a582b5827c4ab51314ced8285ad1033dbe) fix: unintentional import from previous commit
### 📊 Changes
**1 file changed** (+18 additions, -2 deletions)
<details>
<summary>View changed files</summary>
📝 `src/lib/components/chat/ModelSelector/Selector.svelte` (+18 -2)
</details>
### 📄 Description
# Changelog Entry
## Description
implements enhancement outlined in #4049
in the model selection dialog, the user can press enter to select the model currently selected in the list. (#3962)
this PR adds the ability to move the selected model using the arrow keys, and to select it with the enter key.
## Changed
- refactored `on:keydown` and related components to keep track of the currently selected model via arrow keys.
# Additional Information
- models that are out of view will be scrolled to when they are selected with arrow keys.
- if the user clicks out of the modal, or selects a model, or opens a new chat, the `pseusoSelectedIndex` is reset.
- this was done to avoid the state of this from lingering across selections. For example, if the user selects a model, then opens a new chat, the pseudoSelectedIndex could be off screen. This could be solved by resetting the state utilizing a store, but that could have possible side effects so i've decided to keep it contained within the component.
- holding the arrow keys down does not cause any unexpected behaviour
# Screenshots or Videos
https://github.com/user-attachments/assets/4ccc2225-9b1e-4fdd-a724-3b3b8b8670a2
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/4059
Author: @thearyadev
Created: 7/23/2024
Status: ✅ Merged
Merged: 7/25/2024
Merged by: @tjbck
Base:
dev← Head:feat/model-selection-with-arrow-keys📝 Commits (5)
5beaa5dfeat: select model with arrow keys (+enter)eb38d38fix: pseudoSelectedIndex is reset when modal is closed.dbf88a2refactor: renamepseudoSelectedIndextoselectedModelIdxfbef731fix: checkfilteredItemslength before unsafe index access9e4326afix: unintentional import from previous commit📊 Changes
1 file changed (+18 additions, -2 deletions)
View changed files
📝
src/lib/components/chat/ModelSelector/Selector.svelte(+18 -2)📄 Description
Changelog Entry
Description
implements enhancement outlined in #4049
in the model selection dialog, the user can press enter to select the model currently selected in the list. (#3962)
this PR adds the ability to move the selected model using the arrow keys, and to select it with the enter key.
Changed
on:keydownand related components to keep track of the currently selected model via arrow keys.Additional Information
pseusoSelectedIndexis reset.Screenshots or Videos
https://github.com/user-attachments/assets/4ccc2225-9b1e-4fdd-a724-3b3b8b8670a2
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.