Enhanced Conversation Organization with Optimized Folder Structure

[joriskalz]

Building upon the initial implementation in PR #296, this pull request introduces further optimizations to the conversation organization feature within our chat interface. The new enhancements aim to streamline user experience and improve performance.

Key Updates:

• Refined folder-based structure for better categorization and management of conversations.
• Enhanced UI interactions for creating, renaming, and deleting folders. Currently only a flat list.
• Seamless integration with the new UI changes introduced by Big-AGI.

This update addresses feedback received on the initial version and aligns with the sleek design of the new UI. I look forward to your suggestions and further feedback.

@enricoros, I've seen your message and the exciting news about Big-AGI's new UI. I have ported the code to the main branch as part of this update. Thanks for the New Year wishes, and I hope you've had a great start to the year too!

Please review the changes at your convenience, and let's make our chat interface even better!

Screenshot:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
big-agi	✅ Ready (Inspect)	Visit Preview	Jan 1, 2024 11:47pm

[enricoros]

Thanks for porting the changes. I like that your work and the changes in main complement each other, and thanks for doing the port, much appreciated. I've made some changes on main for animations and your patches work well with that too.

Working on your changes now. I'll verify it all, check if there are optimizations, and the merge.

[enricoros]

Note sure I'll finish the merge today, as I found a couple of bugs in my code as I was code-reviewing yours.
The work-in-progress is on https://github.com/enricoros/big-AGI/tree/joriskalz-folders (branch), and will be merged into main (with all my fixes as well) ASAP.

[enricoros]

Great news! MERGED :)

Here is positive feedback from the review:

• Code for UI and graphics is really good great CSS work!, as well as the 'state.'
• I've done some minor UI changes to have a consistent style with the rest of the app
  • not sure about removing the ok/cancel from the folder creation; it seemed good
• the feature looks good with the new UI

Here are the issues that need to be resolved:

• Please minimize the changes in a PR in the future. In the updated code, AppChat was re-formatted, which is okay for a new file, but not for a core file that needs review. I had to review and verify each line, and I went through many hundreds of lines. It took 3 hours on that file. The "diff" on that file is overflowing here on GitHub. It does not do good to the "git blame" (history), and it makes it really hard for me to see the changes character by character.
• I like the react-beautiful-dnd library; despite adding 30kb to the app, I'm leaning towards keeping it for now and eventually working to remove it in the future
• [Scroll issues] with many folders, the chats disappear, as there are no scrollbars - what can be a good scrolling mechanics for folders + chats?
• [Mobile?] I have not tested it on mobile yet

Please test and let me know if the feature is working or what are the edge cases, or if I disabled some functionality while merging.

[joriskalz]

Hey @enricoros,

Thrilled to see the PR merged – and your UI refinements are spot on! The animations add a nice touch, and the tweaks to the new folder feature really polish it up. I also like the many improvements like putting the colors into folders-store.ts.

On the chat folders, I believe the current flat list is a good starting point for chat organization. It's straightforward and already adds value. While a tree structure could be an option down the line, focusing on AI to auto-sort chats might be the more efficient route for now.

Addressing the issues:

• I apologize for the oversight with the formatting changes in AppChat. I understand the hassle it caused and will be more vigilant about keeping PR changes focused and minimal in the future.

• Regarding the react-beautiful-dnd library, I'll look into alternatives that are more size-efficient. However, if we find more places to use drag and drop, it could validate the library's size.

• On the mobile front, I've noticed a z-index issue where the folder menu is obscured by the side menu.

Thanks for your patience and for the valuable feedback. It's a great learning experience for me, and I'm keen to keep improving.

[enricoros]

Hi, thanks for the comments: can you attach a screenshot of the Mobile issue? I cannot reproduce and would love to release this today as Big AGI 1.10.0

[joriskalz]

Hi @enricoros, I tested it on IOS and also in Chrome on the desktop:

[joriskalz]

@enricoros, also I made a short video to demo the feature. Maybe you can make use of it. Let me know if you need more specific ones.

Video Folders:
https://github.com/enricoros/big-AGI/assets/1590910/6c2f37a5-cb77-4ebc-bf99-3ac3773041bc

[enricoros]

@joriskalz Thanks for showing the Mobile issue! Now I know. Let me fix that!
And the video looks AMAZING - I'm gonna share it right away on Discord, let's see if we get comments.

[enricoros]

@joriskalz I've finally added the Folder selector to the Chat Items in the drawer as well.

1.12.0.-.Chat.Folder.Change.-.2024-01-23.204115.mp4