Style design: Nav bar with Infinite Scroll and Group Convo by Date

[walbercardoso]

Summary

Change the conversations list in the SideBar, grouping Convos by: Today, Last 7 days, Last 30 days, and year

Before:

After:

Change Type

Please delete any irrelevant options.

• New feature (non-breaking change which adds functionality)

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• I have made pertinent documentation changes
• My changes do not introduce new warnings
• I have written tests demonstrating that my changes are effective or that my feature works
• Local unit tests pass with my changes
• Any changes dependent on mine have been merged and published in downstream modules.

[danny-avila]

Are you at a spot where I can take a look at the new convo/deleted convo issue?

[walbercardoso]

Its in the infinite scroll implementation. You want me to include in this same PR or make a New for it?

[danny-avila]

O

Its in the infinite scroll implementation. You want me to include in this same PR or make a New for it?

Got it. I would not merge this without that so you can do whichever is easier

[walbercardoso]

Updated. Including infinite loop. New convos is now being displayed in the convos list, just the title is not updating

[walbercardoso]

Closed by mistake. Updated with all cleaned code. Sorry

[walbercardoso]

Wondering if would be better to hide scroll bar

[fuegovic]

Wondering if would be better to hide scroll bar

I tested briefly and it looks like you fixed the issue with the new convo titles 🎉

About the scroll bar, I think it's good to have it but the position could be optimized a little bit, maybe make it more like on the official OpenAI website (the current lack of space between the title-box and the scroll bar makes it look out of place imo)

LibreChat

OpenAI

Overall great job, this is going to be a nice improvement over the current system! 🔥

[walbercardoso]

Wondering if would be better to hide scroll bar

I tested briefly and it looks like you fixed the issue with the new convo titles 🎉

About the scroll bar, I think it's good to have it but the position could be optimized a little bit, maybe make it more like on the official OpenAI website (the current lack of space between the title-box and the scroll bar makes it look out of place imo)

LibreChat

OpenAI

Overall great job, this is going to be a nice improvement over the current system! 🔥

Thank you @fuegovic. I will improve the layout with your suggestion

[fuegovic]

@walbercardoso I tested the latest changes you made, it's looking good! 💫

[walbercardoso]

I think its done:

Icon changes based on Endpoint selected

[walbercardoso]

Also, it improved a fade effect of the convos

[berry-13]

I think its done:

Icon changes based on Endpoint selected

why is the icon so big?

[danny-avila]

Amazing work @walbercardoso

As @berry-13 mentioned, there could be better formatting for the icon in the New Chat button

On official when hovering:

[walbercardoso]

Amazing work @walbercardoso

As @berry-13 mentioned, there could be better formatting for the icon in the New Chat button

On official when hovering:

Agree... gonna improve that

[walbercardoso]

Its done

[danny-avila]

@walbercardoso thanks so much for this contribution. I'm going to sprint this one out as I'd like to address the following items myself.

There's a couple of errors in the browser logs:

Warning: Cannot update a component (Nav) while rendering a different component (Landing). To locate the bad setState() call inside Landing, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Uncaught (in promise) Error: Unknown endpoint: Mistral

This second is due to my configuration but some extra steps you didn't know about need to handle it

Next, in the network logs. The fetching should not be so frequent

LibreChat

ChatGPT:

page 1 is being invalidated every time. also these requests should be throttled as they can easily be abused right now. these are also fetching again on refocus, which is a legacy thing but I'll removing it with this update

Lastly some styling items:

Would like to more closely mirror still (LibreChat on left)

And the spinner should be part of the convo items like in ChatGPT:

[danny-avila]

Closing for #1708

[walbercardoso]

@danny-avila It's always a pleasure to contribute. I started programming in react because of Librechat and since then it has been very rewarding to learn a little more from you all. Love this project.

[danny-avila]

@danny-avila It's always a pleasure to contribute. I started programming in react because of Librechat and since then it has been very rewarding to learn a little more from you all. Love this project.

Thanks man! Greatly appreciate you taking the time to contribute. I just mean to take over to include these changes in the assistants branch on my schedule. It also gives me the impetus to implement this long awaited styling much sooner than I would've without you.