Various visual tweaks

[TylerLaBree]

I have a few ideas for moving some buttons around to simplify/improve the look and feel of the app. If these should be separate feature requests, let me know. I didn't want to clutter the page with too many issues. Below are my ideas for how to reorganize the UI.

• Top bar on the left should have the "new chat" button (left), followed by "Alpaca" (centered), followed by the single "hamburger" menu button (right).
  • This means moving the hamburger button from where it is currently.
• Place "Export chat" and "Import chat" buttons in the hamburger menu drop down.
• Place the chat name as a title centered in the right pane titlebar, where the model dropdown is currently.
  • Place the model name as subtitle below this.
  • The chat name + model name should be a button, similar to how Flare does, and it should open a page or dialog which allows selection of models, clearing of chats, etc.
  • See mock-up made in Fractal

• Place the "Manage models" button in Preferences, or as a "Get more" button in the list of available models.

• Place the send button on the right of the text input box with the "paper-plane" icon and no text.
• When send button becomes stop, use the "stop" symbol with no text.

Complete

• Replace the "+" button at the top of the left panel with the chat-message-new symbolic icon .
• Place the attach image button to the left of the text input box with no text.
• (This one is likely more difficult.) Make the input text box start with a single line height, and expand to allow for more text as the line count gets bigger.
  • A maximum height could be set. Fractal has this feature and has a max line count of 5 before it makes you scroll to see it all.

[Jeffser]

Hi thanks for the suggestion, and thanks for making it a single issue, I prefer that.

For now I think I can easily change the send button for and icon and change the 'new chat' icon for the one you suggested, as for moving the manage button inside the dropdown, I don't think I will be doing that because it would look like 'Manage Models' is a model name, I don't think it looks elegant, there might be another way of making it look better.

There must be a easy way of making the entry increase in size as the user types text, I think that looks great. As for the rest of suggestions, I think they might be worth exploring but seem to be more difficult.

In general these are great suggestions, thanks for putting them together

[Jeffser]

I just fixed the send/stop buttons

07a12ba

[TylerLaBree]

I agree with you about the "get more" button in the model list. I originally envisioned a "+" symbol to the left, but I don't actually think this is the best solution.

My intuition says that the best place to manage models is likely in settings/preferences. I'm not sure the package icon used currently conveys that it's a place to get more models.

What do you think of making it look like VPN settings in gnome-settings?

Downloaded models will appear in a list, with delete buttons on the right, and you can download more with the + button at the top of the list.

---

I also wanted to ask about the title of the sidebar. I advocated for two buttons in this region (new chat, hamburger), because most apps with alpaca's sidebar width only have two icons

Flare has more space to accommodate their chat profile pictures and message previews, and they go for three icons. Settings doesn't need that space, so they go for two icons.

This actually leads to a small problem, where the "Alpaca" label can't fit at narrower window sizes. To fix this issue, either the sidebar should be wider (which might be unnecessary), or there should be less buttons there.

[Jeffser]

alright I'm doing hamburger menu, as for the models page, I'm going to look for another icon for now.

[Jeffser]

I think this one looks better

[TylerLaBree]

What about the vertical view-more-symbolic ?

[Jeffser]

Well I'm using that one for this

[Jeffser]

oh yeah btw I just did that hahaha

[TylerLaBree]

Also, I recognize that the icons used is sort of a matter of preference, so I'll make the case for my changes, but they definitely don't have to change because of my preferences.

paper-plane vs send-to

The paper-plane looks more casual, like for a chat with a friend, whereas send-to looks more (to me) like "upload", which is sort of accurate, but maybe less fun, and might indicate that you're uploading to a server.

stop vs edit-delete

I've actually come around to edit-delete. It looks more like cancel than the stop button. I originally proposed this change because stop is what ChatGPT uses.

[Jeffser]

The problem with the paper plane is that it isn't included in Adwaita, I will add the SVG just because like 4 people have ask me for that before hahahaha, and yeah you are right, it's better, I just didn't want to search how to add SVGs :p

[TylerLaBree]

Ah. That makes sense. Are you typically limited only to Pre-Installed System Icons?

I'm browsing these with Icon Library, by the way

[Jeffser]

yeah I also use that, and yeah only pre installed stuff, but I just added the airplane to the project, problem is that it doesn't recolor automatically

[Jeffser]

Got it

[Jeffser]

now that I can import icons, I wanted to set a different icon for the manage models thing

[Jeffser]

maybe this is better

[loulou64490]

maybe this is better

This look like settings, or tweak
I prefere the previous one, bc books are more likes models

[Jeffser]

alright, I'll use the books one

[Jeffser]

This is the current state of the app, I'm going to release a new version with the changes

[loulou64490]

Awesome, soon 1.0? Because you will can ask to add your app to the ollama readme !!!

[Jeffser]

I already made an issue for that but no one has answer

ollama/ollama#4582

[Jeffser]

I don't blame them of course, they have much more important stuff to do

[TylerLaBree]

I love the changes! I'm not sure that my other suggestions are necessary, so I'm going to mark them complete.

I have another thought. Currently, the drop-down for model selection is off-center. See below:

Consider switching to the drop-down menu present in most new libadwaita apps. The menu should be centered on the button, and should have an "arrow" at the top, pointing to the button it came from. See below:

I don't think that search is necessary unless the user is testing huge amounts of models, but I won't insist on removing it.

[Jeffser]

Yeah I thought of making a split button, problem is that the label won't change when you change models, and I think it's important for the user to know what model is selected at every moment

[frandavid100]

I was about to open a new issue asking for Alpaca's UI to be a bit more like Fractal's. I'm glad this issue already exists.