Folders for conversation categorization, improving navigation and manageability.

package.json

@@ -38,6 +38,7 @@
  "plantuml-encoder": "^1.4.0",
  "prismjs": "^1.29.0",
  "react": "^18.2.0",
+ "react-beautiful-dnd": "^13.1.1",
  "react-dom": "^18.2.0",
  "react-katex": "^3.0.1",
  "react-markdown": "^9.0.1",
@@ -55,6 +56,7 @@
  "@types/plantuml-encoder": "^1.4.2",
  "@types/prismjs": "^1.26.3",
  "@types/react": "^18.2.45",
+ "@types/react-beautiful-dnd": "^13.1.7",
  "@types/react-dom": "^18.2.17",
  "@types/react-katex": "^3.0.4",
  "@types/react-timeago": "^4.1.6",

src/apps/chat/AppChat.tsx

@@ -17,7 +17,7 @@ import { useChatLLM, useModelsStore } from '~/modules/llms/store-llms';
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
 import { GlobalShortcutItem, ShortcutKeyName, useGlobalShortcuts } from '~/common/components/useGlobalShortcut';
 import { addSnackbar, removeSnackbar } from '~/common/components/useSnackbarsStore';
-import { createDMessage, DConversationId, DMessage, getConversation, useConversation } from '~/common/state/store-chats';
+import { createDMessage, DConversationId, DMessage, getConversation, useChatStore, useConversation } from '~/common/state/store-chats';
 import { openLayoutLLMOptions, useLayoutPluggable } from '~/common/layout/store-applayout';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
@@ -35,6 +35,7 @@ import { runAssistantUpdatingState } from './editors/chat-stream';
 import { runBrowseUpdatingState } from './editors/browse-load';
 import { runImageGenerationUpdatingState } from './editors/image-generate';
 import { runReActUpdatingState } from './editors/react-tangent';
+import { useFolderStore } from '~/common/state/store-folders';
 
 
 /**
@@ -60,9 +61,16 @@ export function AppChat() {
  const [flattenConversationId, setFlattenConversationId] = React.useState<DConversationId | null>(null);
  const showNextTitle = React.useRef(false);
  const composerTextAreaRef = React.useRef<HTMLTextAreaElement>(null);
+ const [selectedFolderId, setSelectedFolderId] = React.useState<string | null>(null);
+
 
  // external state
  const { chatLLM } = useChatLLM();
+ const addConversationToFolder = useFolderStore((state) => state.addConversationToFolder);
+
+ // Get the list of conversations from the store
+ const conversations = useChatStore(state => state.conversations);
+
 
  const {
  chatPanes,
@@ -246,18 +254,49 @@ export function AppChat() {
  await speakText(text);
  };
 
+ // Function to check if the selected folder has an empty chat
+ const doesSelectedFolderHaveEmptyChat = (selectedFolderId: string | null, conversations: any[]) => {
+ // If no folder is selected (default folder), check if there is an empty chat globally
+ if (selectedFolderId === null) {
+ // get all conversations that are not in a folder
+ const conversationsNotInFolder = conversations.filter(convo => convo.folderId === null);
+ return conversationsNotInFolder.some(convo => convo.messages.length === 0);
+ }
+
+
+ // Retrieve the folder's conversations
+ const folderConversations = useFolderStore.getState().folders.find(folder => folder.id === selectedFolderId)?.conversationIds || [];
+
+ // Check if any of the folder's conversations are empty
+ return folderConversations.some(convoId => {
+ const convo = conversations.find(conversation => conversation.id === convoId);
+ return convo && convo.messages.length === 0;
+ });
+ };
+
 
- // Chat actions
+ // Determine if the "New" button should be disabled
+ const disableNewButton = doesSelectedFolderHaveEmptyChat(selectedFolderId, conversations);
 
- const handleConversationNew = React.useCallback(() => {
- // activate an existing new conversation if present, or create another
- setFocusedConversationId(newConversationId
- ? newConversationId
- : prependNewConversation(focusedSystemPurposeId ?? undefined),
- );
- composerTextAreaRef.current?.focus();
- }, [focusedSystemPurposeId, newConversationId, prependNewConversation, setFocusedConversationId]);
 
+const handleConversationNew = React.useCallback(() => {
+ // Create a new conversation
+ const newConversationId = prependNewConversation(focusedSystemPurposeId ?? undefined);
+
+ // If a folder is selected, add the new conversation to the folder
+ if (selectedFolderId) {
+ addConversationToFolder(selectedFolderId, newConversationId);
+ }
+
+ // Focus on the new conversation
+ setFocusedConversationId(newConversationId);
+ composerTextAreaRef.current?.focus();
+
+ // Return the new conversation ID
+ return newConversationId;
+}, [focusedSystemPurposeId, prependNewConversation, setFocusedConversationId, selectedFolderId, addConversationToFolder]);
+
+
  const handleConversationImportDialog = () => setTradeConfig({ dir: 'import' });
 
  const handleConversationExport = (conversationId: DConversationId | null) => setTradeConfig({ dir: 'export', conversationId });
@@ -299,15 +338,16 @@ export function AppChat() {
  if (deleteConversationId) {
  let nextConversationId: DConversationId | null;
  if (deleteConversationId === SPECIAL_ID_WIPE_ALL)
- nextConversationId = wipeAllConversations(focusedSystemPurposeId ?? undefined);
+ nextConversationId = wipeAllConversations(focusedSystemPurposeId ?? undefined, selectedFolderId);
  else
  nextConversationId = deleteConversation(deleteConversationId);
  setFocusedConversationId(nextConversationId);
  setDeleteConversationId(null);
  }
  };
+
 
- const handleConversationsDeleteAll = () => setDeleteConversationId(SPECIAL_ID_WIPE_ALL);
+ const handleConversationsDeleteAll = (folderId: string | null) => setDeleteConversationId(SPECIAL_ID_WIPE_ALL);
 
  const handleConversationDelete = React.useCallback((conversationId: DConversationId, bypassConfirmation: boolean) => {
  if (bypassConfirmation)
@@ -348,14 +388,16 @@ export function AppChat() {
  const drawerItems = React.useMemo(() =>
  <ChatDrawerItemsMemo
  activeConversationId={focusedConversationId}
- disableNewButton={isFocusedChatEmpty}
+ disableNewButton={disableNewButton}
  onConversationActivate={setFocusedConversationId}
  onConversationDelete={handleConversationDelete}
  onConversationImportDialog={handleConversationImportDialog}
  onConversationNew={handleConversationNew}
  onConversationsDeleteAll={handleConversationsDeleteAll}
+ selectedFolderId={selectedFolderId}
+ setSelectedFolderId={setSelectedFolderId} 
  />,
- [focusedConversationId, handleConversationDelete, handleConversationNew, isFocusedChatEmpty, setFocusedConversationId],
+ [focusedConversationId, handleConversationDelete, handleConversationNew, setFocusedConversationId, selectedFolderId, disableNewButton],
  );
 
  const menuItems = React.useMemo(() =>
@@ -373,6 +415,11 @@ export function AppChat() {
  [areChatsEmpty, focusedConversationId, handleConversationBranch, isFocusedChatEmpty, isMessageSelectionMode],
  );
 
+ const conversationsToDeleteCount = selectedFolderId
+ ? useFolderStore.getState().folders.find(folder => folder.id === selectedFolderId)?.conversationIds.length || 0
+ : conversations.length;
+
+
  useLayoutPluggable(centerItems, drawerItems, menuItems);
 
  return <>
@@ -472,12 +519,13 @@ export function AppChat() {
  {!!deleteConversationId && <ConfirmationModal
  open onClose={() => setDeleteConversationId(null)} onPositive={handleConfirmedDeleteConversation}
  confirmationText={deleteConversationId === SPECIAL_ID_WIPE_ALL
- ? 'Are you absolutely sure you want to delete ALL conversations? This action cannot be undone.'
+ ? `Are you absolutely sure you want to delete ${selectedFolderId ? 'ALL conversations in this folder' : 'ALL conversations'}? This action cannot be undone.`
  : 'Are you sure you want to delete this conversation?'}
  positiveActionText={deleteConversationId === SPECIAL_ID_WIPE_ALL
- ? 'Yes, delete all'
+ ? `Yes, delete all ${conversationsToDeleteCount} conversations` 
  : 'Delete conversation'}
  />}
 
  </>;
 }
+