Folders for conversation categorization, improving navigation and manageability. #296
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi @joriskalz - I'm testing it now - let me know when you're out of Draft and want to merge it. I'll do careful merging and a cosmetic pass (as I always do :). In the meantime: this is REALLY impressive - large in scope and the code (esp. hooks) are good. A couple of questions:
For other notes, I'll wait until you have reviewed, tightened up, and submitted :) |
…ersations based on selected folder filter.
# Aider chat conversation:
USER: in ChatDrawerItems.tsx in the menu item props.onConversationsDeleteAll is called to delete all conversations. It finally calls wipeAllConversations. However with the new Folder filter (const conversations = useConversationsByFolder(selectedFolderId)) it shows the exact number (Delete {totalConversations >= 2 ? `all ${totalConversations} chats` : 'chat'}), but in the delete function it does not take care about the selected filter. Please change it to only delete the one based on the selectedFolderId.
ASSISTANT: To make this change, we need to modify `src/apps/chat/components/applayout/ChatDrawerItems.tsx` and `src/common/state/store-chats.ts`.
Here are the steps:
1. In `src/apps/chat/components/applayout/ChatDrawerItems.tsx`, we need to pass `selectedFolderId` to `onConversationsDeleteAll`.
2. In `src/common/state/store-chats.ts`, we need to modify `wipeAllConversations` to delete only the conversations in the selected folder.
Here are the *SEARCH/REPLACE* blocks:
src/apps/chat/components/applayout/ChatDrawerItems.tsx
```python
<<<<<<< SEARCH
<MenuItem disabled={!hasChats} onClick={props.onConversationsDeleteAll}>
=======
<MenuItem disabled={!hasChats} onClick={() => props.onConversationsDeleteAll(selectedFolderId)}>
>>>>>>> REPLACE
```
src/common/state/store-chats.ts
```python
<<<<<<< SEARCH
wipeAllConversations: (personaId: SystemPurposeId | undefined): DConversationId => {
const { conversations } = _get();
// abort any pending requests on all conversations
conversations.forEach(conversation => conversation.abortController?.abort());
const conversation = createDConversation(personaId);
_set({
conversations: [conversation],
});
return conversation.id;
},
=======
wipeAllConversations: (personaId: SystemPurposeId | undefined, folderId: string | null): DConversationId => {
let { conversations } = _get();
// If a folder is selected, only delete conversations in that folder
if (folderId) {
const folderConversations = useFolderStore.getState().folders.find(folder => folder.id === folderId)?.conversationIds || [];
conversations = conversations.filter(conversation => folderConversations.includes(conversation.id));
}
// abort any pending requests on all conversations
conversations.forEach(conversation => conversation.abortController?.abort());
const conversation = createDConversation(personaId);
_set({
conversations: folderId ? conversations : [conversation],
});
return conversation.id;
},
>>>>>>> REPLACE
```
Please confirm these changes.
|
Hi @enricoros, thank you very much for your feedback. Here's an updated version with a more streamlined UI: Screenshot: Regarding your questions, please find my responses inline:
I haven't formed an opinion yet, but yes, this should be carefully considered.
If I'm observing this correctly, this function only executes during interaction with the Drawer. But yes, there's room for further optimization.
Now they should.
I really like this idea, and I think the new UX might fit in even better. I also have some further issues for which I don't have good solutions yet:
I am eagerly looking forward to your thoughts, and feedback. Thank you very much for considering this pull request! |
|
Thanks @joriskalz - I'm very excited to work on merging this. There are elements of beauty and much brilliance in this design. I'm a fan of how you implemented drag & drop. The default colors also look sweet. One element I'll challenge you to think about is: how do we make the "dropdown" with the folder usable on mobile, where the screen space is so limited? This is what I'm working on at this exact moment (branch I'm ensuring you have a fully stable surface to list the chats on (the Popup Menu has limitations). See the red outlined elements in this mockup. On both desktop and mobile, we'll have full control over that plane, which also leads the way to renaming chats, auto-naming chats, etc. I would love to have this done by the end of the day. I really need the surface & structure to add other root apps (call, draw, knowledge base, etc). To your specific questions:
I will take a look at this when merging.
No problem, let's work on this once we have the full surface at our disposal.
For sure, and please leave some of that to me as well; I recently learned to react hooks quite well and enjoy optimizing.
This is probably solved automatically by the new layouting I'm working on 👍 If you want, you can continue on this until I finish the |
Thanks @enricoros for your helpful feedback! I've been thinking over your challenge regarding the "dropdown" and its mobile usability. Transforming it into a more compact dropdown might be a practical start.In addition, I propose leveraging the concept of adaptive design, rather than just responsive design. This approach allows us to tailor the user experience specifically for mobile users, rather than merely resizing desktop features. Drawing from my own experiences with ChatGPT on mobile, I've noticed a distinct shift in interaction style. On mobile, I tend to lean towards voice mode and prefer concise dialogues. This got me thinking – could we perhaps streamline the mobile experience to focus more on immediate, dialogue-based interactions? By doing so, we could reduce the reliance on features like folders or extensive dialogue histories, which are more desktop-centric. Imagine a scenario where users swiftly access key functions via voice commands or simple gestures. This makes the app more conversational and intuitive, enhancing the mobile experience for on-the-go users. I would love to explore these ideas further. What are your thoughts on this adaptive approach? |
|
Yes! Absolutely yes to that. I want and need that on mobile. And quickly on the Folders on mobile, we need to find a way, maybe not on the App bar with drop downs. Maybe within the folders/chats pane. Also a question on the folder structure. Usually people go for a tree, so conversations are "children" of folders, but you prefer having folders as labels on top, and conversations at the bottom? Now on the next-cool part, the mobile UX that up mentioned. Have you used voice calls on big-AGI on mobile? They're rough around the edges, but they're my preferred ways to use the app for hours or when driving/commuting. Mobile UX is key, and on of the pillars of big-AGI is to reduce friction/streamline UX. Every click we save is a win. In some tickets here there are references to an Operator or Commander. That's not defined yet, but will be the entity you interact with when using the mobile UX. On mobile, a dedicated "drawer" will open on the bottom if you cold-start the app, and will listen to your commands:
We can implement this with function calling. What do you think? |
- Optima Layout: new Context based pluggable layout system - Now children have context functions, for better behaviors - Removed `store-applayout` - using withLayout on top-level Pages - ScrollToBottom: grounds-up subsystem for smooth scrolling with snap-to-bottom - Panes subsystem: use react-resizeable-panels together with our Panes subsystem - New: Split window chats, Drag to close windows, Button to split - using: https://github.com/bvaughn/react-resizable-panels - Cosmetic: Colors: update Light and Dark themes - Bootstrap Logic provider: will enable Mobile use cases - Removed NoSSR (the backend provided natually acts as the same) - Next load progress: loading indicator for slower pages (>300ms) - withLayout() system Additional benefits include: no-pluggable-flashing, pane-ready, fixed X-scrolling on Firefox, and more. Closes #308, #304, #255, #59. Progress on #305, #201, #296, #233, #208, #203.
|
Sorry for the late, I just dropped the first part of the New UI system. Biggest changes are: new layout system "Optima", new Scroll-to-bottom system (fully home-grown), new React Panes library. This is a video for you: New.UI.Subsystems.-.2023-12-28.032151.mp4This took a while because my wish to add an icon messed the layout, which messed the layout system, which messed the Panes system (overflow), which required the in-order rendering of messages, which required a new scroll-to-bottom system. Tomorrow I should be able to land the Left Panel (on Desktop), and Drawer (on Mobile) where the folders & chats will live. |
|
Hi @joriskalz, just giving you a quick update - the UI is pretty banged'up right now, but it should be done very soon, this is the current status. At least you begin to see the panel that will be dedicated to the chats.
|
|
Hi @enricoros, thanks for the heads up! Exciting to see the progress, even with the UI still in its final stages. The dedicated chat panel sounds like a game changer for desktop users, making things much smoother without constantly toggling the drawer. Can’t wait to see the finished product in action. Unfortunately, I won’t be able to dive into it or give feedback for the next few days. Keep up the great work! |
|
Hi @joriskalz - enjoy your Happy New Year! Could you port your code to |
|
Hi @enricoros, Happy New Year to you as well! 🎉 I hope you've had a fantastic start to 2024. The new UI looks incredible—kudos to you for the great work on Big-AGI's landing! I wanted to let you know that I've taken your suggestion into account and merged it with main in the latest version. created a new pull request to port the code with further optimizations. You can find the new PR here: #321 This should align well with the new UI changes. Looking forward to your thoughts on the updates! |
This pull request introduces a new feature as requested in #162 that enhances the organization of conversations within our chat interface. By integrating a folder-based structure, users can now categorize and manage their conversations more efficiently, addressing the previous issue of having a single, overwhelming list of chats.
Key Features:
Technical Details:
Please note that this is an initial ugly version and there are still rough edges present. The current UI does not fully match the sleekness of the mockups. I am seeking feedback on the functionality and would appreciate any suggestions for UI improvements to enhance the visual appeal and user experience.
Screenshot:
