Archestra Logo
Archestra.AI

Thread

VB
Vadim Boltach4:57 PMOpen in Slack
Hey everyone! I spoke to Matvey yesterday (first interview call) and we agreed that I can suggest and improve any UI/UX aspect of the app as my take home assignment. He mentioned that chats might need some improvements (they don't show status etc.), but before getting to the status part, I found a few things that can be better. I listed them all in this issue: https://github.com/archestra-ai/archestra/issues/5084 and recorded a quick demo of how I suggest to fix them (the code is ready). Would love some feedback before I continue any further. Thanks!
chats_ui_demo.mp4
29 replies
J(
joey (archestra team)11:53 AMOpen in Slack
hey! first off, welcome 🙂
I really like your demo - well articulated, good job.
generally speaking, I think you're in the right direction for chats nav - I agree it needs some polishing. My main concern at first would be when you have > 4 chats + a few pinned, it already starts to take up a good portion of vertical sidebar real-estate - can you think of a way to address this? (maybe shadcn has some other sidebar variations which could be useful in this case? not sure, just thinking out loud).
rest of the changes (title generation + pinning hiding new convos + active chats getting buried) LGTM.
on a broader chat topic, how do you feel about /chat/:sessionId page in general ("actual" chat page) - do you feel there're any low-hanging-fruits for UX improvement there?
👀1
II
Ildar Iskhakov (archestra team)1:58 PMOpen in Slack
Hi Vadim, thank you for the work, I like the idea to remove vertical bar and agree that pinned shouldn't push recents out of sidebar.
As we are trying to save some real estate, can you research how to reduce the amount of space it takes.
Also now part of the sidebar is hidden under the scroll. I'd be really interested in your ideas how to solve that problem. Feel free to propose redical changes. e.g. have sections by roles, smth like (Chat, Connect, Build, Admin)
Join Slack to see the image
👍1
VB
Vadim Boltach4:22 PMOpen in Slack
Yeah, totally agree with the space concern. I just didn’t feel familiar enough with the product to propose more radical changes yet. A safe next step could be to make Pinned and Recents sections collapsible.
VB
Vadim Boltach4:23 PMOpen in Slack
As for more radical changes, I have a few questions first.
Is this more a chat product or a platform console? I mean, is the platform side (Agents, MCPs, Knowledge) something people set up once and change occasionally or something they use daily? And is chat itself a core component or it is just convenient way for admins to test if everything works correctly? Does that differ by role? Just trying to understand the importance of each element so I know what to optimize for.
II
Ildar Iskhakov (archestra team)4:24 PMOpen in Slack
it differs by roles: Admins, Power Users (Builders), End Users
VB
Vadim Boltach4:39 PMOpen in Slack
then it might make sense to have slightly different sidebars depending on the role. for now, two simple Chats/Platform tabs could be an option since there’s no clear winner (i'd try to avoid introducing more categories, when you categorize something which is not well defined knowledge, different people tend to put same things in different categories)
VB
Vadim Boltach4:42 PMOpen in Slack
another option is to separate chats and platform areas more explicitly depending on what’s actually primary. if platform configuration matters more, chats could live one level deeper, e.g. opening a secondary sidebar. if chat is the main workflow, it should probably use the full sidebar height and platform/admin sections could move one click away instead.
II
Ildar Iskhakov (archestra team)4:43 PMOpen in Slack
right now Roles defined by RBAC and some items disappear of you don't have access to them
VB
Vadim Boltach4:44 PMOpen in Slack
yes, I saw that. I mean if say end users do not need settings at all (or need just a few of them), there's no reason to limit the number of recent chats in the sidebar
💯1
VB
Vadim Boltach4:50 PMOpen in Slack
A safe next step could be to make Pinned and Recents sections collapsible.
do you think this could be good incremental improvement? I can open a PR for that change (+ title generation, pinning and surfacing) first and then tackle scroll issue, review the actual chat window (Joey asked above) and try a few prototypes of more radical changes separately
VB
Vadim Boltach2:50 AMOpen in Slack
^ something like this
collapsible_sections.mp4
II
Ildar Iskhakov (archestra team)7:38 AMOpen in Slack
I'm a bit on the fence because we will introduce scroll
Maybe we remove gaps, labels “recent” and “pinned” at all?
J(
joey (archestra team)7:46 AMOpen in Slack
does shadcn natively support any other "variants" of the sidebar? how do other applications handle larger navigation? (ex. Sentry)
VB
Vadim Boltach2:46 PMOpen in Slack
Seems like I accidentally picked a very painful component to work on, haha
No, there's no other variants, but their api is quite flexible and we could do everything we want.
Sentry uses slack-like navigation (e.g. vertical tabs, icon per category). I think it's overkill at this stage. We could just add two simple tabs, Chat/Platform (idk if Platform is THE best name, but this is how I see the two main flows: you either chat or you configure the platform). Those tabs could also be visible based on user role.
As for scrolling: introducing "recents" and "pinned" headers definitely makes the chats section a bit taller, but I always had a scroll on my 13 inch MacBook, even before my changes. I said it above, I think we shouldn't reinvent the wheel here and copy frontier labs UI, so users feel familiar with the UI right away.
I don't think we can nix the scroll in 100% of cases, but I love what Vercel does to communicate scroll existence: they always display the scrollbar, and the sidebar footer has a gradual opacity decrease, so you clearly see there are more items in the sidebar (see the screenshot with the arrow).
I added a tabs component from shadcn and made a quick demo of what it might look like. I think we could also display a search input above the tabs later (to search both chats and pages), since it's an industry standard for platform consoles at this point. Also, let's make the logo smaller. It currently takes up more than 10% of all the height of the sidebar.
Join Slack to see the imagetabs.mp4
J(
joey (archestra team)2:59 PMOpen in Slack
but I love what Vercel does to communicate scroll existence: they always display the scrollbar, and the sidebar footer has a gradual opacity decrease
[...]
let's make the logo smaller. It currently takes up more than 10% of all the height of the sidebar
agree with these two points!
what I would propose is this - do you want to open a separate PR for the slow title generation fix and I can review that now + we can keep brainstorming / iterating on the sidebar topic independently?
VB
Vadim Boltach3:00 PMOpen in Slack
sure thing, will do it today, thanks
:archestra-love:1
VB
Vadim Boltach7:11 PMOpen in Slack
that one: https://github.com/archestra-ai/archestra/pull/5142
👀1
EK
Eugene K10:31 PMOpen in Slack
Just a random thought out of nowhere
What if we'll add second sidebar where all the chats will live? And pinned ones go to the main sidebar.
In this case we only eat a bit of horizontal space and any scroll within second sidebar won't be a problem since it's not the main one
What do you think?
EK
Eugene K9:26 AMOpen in Slack
https://dribbble.com/shots/23817733-Double-Sidebar-Settings like that
EK
Eugene K9:26 AMOpen in Slack
https://dribbble.com/shots/23318523-Opened-and-Closed-Sidebar or that
VB
Vadim Boltach10:22 PMOpen in Slack
Yes, as I mentioned earlier, a separate sidebar for chats is one option:
another option is to separate chats and platform areas more explicitly depending on what’s actually primary. if platform configuration matters more, chats could live one level deeper [...]
As for:
And pinned ones go to the main sidebar
I don't think pinned chats belong in the main sidebar unless we introduce a generalized pinning mechanism -- not just for chats, but for any nav item (e.g. an admin wants to pin the API keys page, since they use it more often).
To add some visuals I implemented how I see it working: instead of trading vertical space for horizontal, the chat panel slides over. Chatting is a separate mode, there's no need to show it as a persistent second sidebar, since users rarely need to jump from a specific chat to a specific settings page in one click. It also keeps things clean given there's already a right-side panel for the browser, artifacts, etc.
It can also adapt for non-power users: no sliding over, main sidebar is chats with settings in the bottom, since those users have fewer options to navigate and scroll is not a problem.
Cheers!
slide_over_chats.mp4
➕1
EK
Eugene K10:27 PMOpen in Slack
@user Why I thought that pinning chats should be possible in the main sidebar -> to have 1-click-away chat (e.g. with knowledge base) instead of 2-clicks-away
EK
Eugene K10:27 PMOpen in Slack
and just an idea -> what do you think to collapse main menu items instead of replacing them with chats?
EK
Eugene K10:28 PMOpen in Slack
like in this case we will keep menu available yet won't eat lots of space
VB
Vadim Boltach10:30 PMOpen in Slack
if anyone wants to try it live, you can use this wip branch in my fork: https://github.com/vadik49b/archestra/tree/feat/chats-ui-improvements -- it only contains changes to the navigation, everything else was already merged to the main repo
VB
Vadim Boltach2:35 PMOpen in Slack
hey! just to keep this conversation going. have anyone had a chance to watch the video in https://archestracommunity.slack.com/archives/C0975QYN5LZ/p1780266173472459?thread_ts=1779901042.064749&cid=C0975QYN5LZ?
(upd: my bad, haven't seen the news before posting. congrats! take you time to celebrate! my question can wait)
II
Ildar Iskhakov (archestra team)2:41 PMOpen in Slack
Hi Vadim, sorry for the delay in the answer!
I don't think we need to hide "New chat button" and recent/pinned chats under the second sidebar.
I think we should keep them visible on the first screen as this is our main feature and all roles would use it
I'd rather reduce the amount of items in the sidebar and create sections Build, Admin with subitems collapsed by default
VB
Vadim Boltach7:34 PMOpen in Slack
Hey everyone. I spoke to Ildar in DMs and we made another iteration on the sidebar design. The main thing I try to address here is that different users might want to see different items in their sidebars, so... I made the sidebar customizable. Here's a little demo and some screenshots. Thanks!
sidebar_demo.mp4sidebar_revamp.pdf
VB
Vadim Boltach7:40 PMOpen in Slack
I have to admit, it grew way beyond of just addressing issues with the chat history, but I am happy to cut it in individual mergable pieces or revert some.