Added toggle button to sort chats by title, creation date, or recently updated.

[albertso]

Pull Request Checklist

• Description: Added a button on the sidebar to toggle chat list sorting by title, creation date, or recent
• Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
• Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
• Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
• Testing: Have you written and run sufficient tests for the changes?
• Code Review: Have you self-reviewed your code and addressed any coding standard issues?

---

Description

I want to be able to sort chats alphabetically.

I copied the changes from my local repo to this fork directly on github web.
It should be fine, but please test. Feel free to correct indentation, if anything went off.

The order of toggle is determined by an enum, so it can be changed easily.

In terms of design, I tried other icons, placements, words, with icon to the right, with reverse button...
This was the most simple and clean solution I found. Open to suggestion.

Also works while list is filtered by search.

3 strings for i18n.

---

Changelog

Added

• Button on sidebar to toggle chat list sorting by title, creation date, or recent.

[albertso]

There is this possibility of the button inside the user menu, which takes up less space.

In this case, you have to click again on the user button to close the menu, which can be frustrating until you realize it.

The dropdown doesn't close automatically, but this may be by design, for accessibility and touch.
There could be an X or other symbol to the right of the user button when the dropdown is open, to remind that it can be closed, as long as it doesn't look like it would delete the user.

I have pushed the change in a second commit 7593687 following the first, choose whichever you prefer.

---

Also, there is this in line 445 where swapping a and b would reverse the order of the list:

chatListSortBy === ChatListSortBy.Created ? a.created_at - b.created_at :

It makes sense keep it as it is, I think, returning the oldest at the top, as opposed to sorting by updated_at, where the oldest are at the bottom, but it could be the other way. It can be unintuitive, because "recent" can be applied for both cases, but then it's a matter of labels, and not introducing another button to reverse. Just some thoughts.

[anuraagdjain]

suggestion: Should the button be placed next to the search button? That might make it easer for users to know what's it going to sort the data on. Having the option above search might not be the ideal place.

[albertso]

I agree, it's a good place. What happens there is there's no space for a label, so the icon must be clear enough by itself to tell which sorting is being applied, either by title / created_at / updated_at. There could be a tooltip on hovering the icon to clarify, but that would not work on touch devices.

Looking through heroicons I couldn't find icons that would represent clearly enough what they do. Good candidates are clock for updated_at, calendar for created_at, and maybe hashtag for title (because there is no "abc" or "T" symbol), but nothing seems precisely fitting.

That space is usually reserved for a button to erase the search text, but there is no such thing at the moment. If there was, it would have to coexist with the sort button, because you might want to toggle the order while you are filtering by search.

Another option, could be an icon of three dots at the right of the search box, that would open a dropdown with the sorting choices (or other things that could be done with the search). But that is more involved, and needs more thought.

I might give it another go, if I find more adequate icons.

[anuraagdjain]

True, those are valid points. Could we Show a dropdown upon clicking the button (just the icon) and the dropdown shows the icon and corresponding text? Another approach I think could be, we just have arrow down and arrow up and we don't sort by title in this version.

Future functionality
If search functionality needs to be improved, then clicking on the search text would open a modal which would allow the user to sort of different parameters like title, tags etc., And once you click on the results, the modal closes and that specific message list is rendered after a brief wait (show a spinner).

[tjbck]

I'll refactor this personally in a bit!

[albertso]

Hey @tjbck, happy to contribute :)

In response to @anuraagdjain, here is one way the button could be placed next to the search box, but it looks a bit off:

As you can see, the tooltip disappears when you click, it's finnicky. There might be some way to modify the Tooltip component and make it stay visible between clicks, or even triggered by click, and fade out after some duration, which would make this work for touch, but I haven't tried that.

There is also the issue of the space taken to align with the icon of new chat above. The padding would need some more adjusting, but still, I am not sure it looks/feels right. I haven't pushed this, just giving observations.

[jannikstdl]

I like the sort button next to the search bar personally the most

[albertso]

Ok, I adjusted the padding and commited this last version:

I changed the labels to "Sort by Update" "Sort by Creation" and "Sort Alphabetically", but it could be "Sort by Updated" or "Sort by Recent", and "Sort by Creation Date" or "Sort by Created", or something else.

The code has some mixed tabs and spaces that can be improved, but I don't want to push more commits and make it confusing.

[albertso]

One more thing about the icon in searchbox. With the initial sorting by recent, the icon is a clock, which might not be the most intuitive thing.

If the initial sorting is changed to alphabetical, for which the icon is now arrows-up-down, it becomes more apparent what the toggle does, and what the other icons are. This means changing the default behaviour to something different from ChatGPT, and to what probably most users might expect, so I'm not sure about it.

Comparing to ChatGPT, they segment the list by time slices, which could be introduced as another mode of sorting.

That could be done, either, inserting elements on to the list to act as headers, or, wrapping sub-lists in a list of time-slices. Probably inserting elements into the list is easiest, with least code changes. I may look into it, if there is interest.

---

Edit: After testing it out a bit, the clock is not that unintuitive, it would be okay as the starting choice.

[albertso]

In this last commit, I changed the enum order, and said it is equal, but technically it's not.
If the starting choice is Updated, it feels more natural when the next choice is the other time-based order.
But there isn't much difference, really.

Edit: I don't know why this comment is blue. If I have triggered some specific attention by doing a code review, I didn't mean to. It's just a comment, related to the commit.

[tjbck]

Thanks for the PR but this feature doesn't seem to work nicely with time range grouping feature recently added to our dev branch, so I'll be closing this for now. Hopefully I'll get back to this later soon. I appreciate the effort you put in!