Merge branch 'lumo/chat-delete-image-warning' into 'main'

Fix to inform users that chat deletion will also delete associated images.

See merge request web/clients!25480

Author: MargeBot

applications/lumo/src/app/components/Modals/ConfirmDeleteModal.tsx

@@ -1,20 +1,47 @@
-import { c } from 'ttag';
+import { c, msgid } from 'ttag';
 
 import { Button } from '@proton/atoms/Button/Button';
 import { Prompt } from '@proton/components';
 import type { ModalStateProps } from '@proton/components/components/modalTwo/useModalState';
+import { IcExclamationTriangleFilled } from '@proton/icons/icons/IcExclamationTriangleFilled';
+import { useFlag } from '@proton/unleash/useFlag';
 
 interface Props extends ModalStateProps {
     handleDelete: () => void;
+    /** Confirm deletion of every conversation (settings "Delete all"). */
     deleteAll?: boolean;
+    /** Number of conversations being deleted. Used for plural messaging on bulk delete. Defaults to 1. */
+    count?: number;
     loading?: boolean;
 }
 
-const ConfirmDeleteModal = ({ handleDelete, deleteAll = false, loading, ...modalProps }: Props) => {
-    const title = deleteAll ? c('Action').t`Delete all conversations?` : c('Action').t`Delete conversation?`;
+const ConfirmDeleteModal = ({ handleDelete, deleteAll = false, count = 1, loading, ...modalProps }: Props) => {
+    const imageTools = useFlag('LumoImageTools');
+
+    // "Delete all" and any multi-selection share the plural copy; a single conversation uses the singular copy.
+    const isPlural = deleteAll || count > 1;
+
+    const title = deleteAll
+        ? c('Action').t`Delete all conversations?`
+        : isPlural
+          ? // translator: ${count} is the number of selected conversations being deleted
+            c('Action').ngettext(msgid`Delete ${count} conversation?`, `Delete ${count} conversations?`, count)
+          : c('Action').t`Delete conversation?`;
+
     const message = deleteAll
         ? c('Action').t`Are you sure you want to delete all conversations?`
-        : c('Action').t`Are you sure you want to delete the conversation?`;
+        : isPlural
+          ? // translator: ${count} is the number of selected conversations being deleted
+            c('Action').ngettext(
+                msgid`Are you sure you want to delete ${count} conversation?`,
+                `Are you sure you want to delete ${count} conversations?`,
+                count
+            )
+          : c('Action').t`Are you sure you want to delete this conversation?`;
+
+    const imagesMessage = isPlural
+        ? c('collider_2025:Info').t`Any images generated in these conversations will also be deleted.`
+        : c('collider_2025:Info').t`Any images generated in this conversation will also be deleted.`;
 
     const deleteButtonText = deleteAll ? c('collider_2025').t`Delete all` : c('collider_2025').t`Delete`;
 
@@ -30,6 +57,12 @@ const ConfirmDeleteModal = ({ handleDelete, deleteAll = false, loading, ...modal
             ]}
         >
             <p className="m-0">{message}</p>
+            {imageTools && (
+                <div className="flex flex-row flex-nowrap items-start gap-2 mt-4 p-3 rounded bg-weak">
+                    <IcExclamationTriangleFilled className="color-warning shrink-0 mt-0.5" size={4} />
+                    <span className="text-bold">{imagesMessage}</span>
+                </div>
+            )}
         </Prompt>
     );
 };

applications/lumo/src/app/components/SelectableConversationList/SelectableConversationList.tsx

@@ -3,10 +3,11 @@ import { useCallback, useState } from 'react';
 import { c, msgid } from 'ttag';
 
 import { Button } from '@proton/atoms/Button/Button';
-import { Checkbox } from '@proton/components';
+import { Checkbox, useModalStateObject } from '@proton/components';
 import { IcTrash } from '@proton/icons/icons/IcTrash';
 
 import type { Conversation, ConversationId } from '../../types';
+import ConfirmDeleteModal from '../Modals/ConfirmDeleteModal';
 
 import './SelectableConversationList.scss';
 
@@ -51,6 +52,7 @@ export const SelectableConversationList = ({
     const [isSelectionMode, setIsSelectionMode] = useState(false);
     const [selectedIds, setSelectedIds] = useState<Set<ConversationId>>(new Set());
     const [isDeleting, setIsDeleting] = useState(false);
+    const confirmDeleteModal = useModalStateObject();
 
     // Get all conversation IDs from all groups
     const allConversationIds = groups.flatMap((group) => group.conversations.map((c) => c.id));
@@ -83,6 +85,11 @@ export const SelectableConversationList = ({
         });
     }, []);
 
+    const requestDeleteSelected = useCallback(() => {
+        if (selectedIds.size === 0) return;
+        confirmDeleteModal.openModal(true);
+    }, [selectedIds, confirmDeleteModal]);
+
     const handleDeleteSelected = useCallback(async () => {
         if (selectedIds.size === 0) return;
 
@@ -91,10 +98,11 @@ export const SelectableConversationList = ({
             await onDeleteSelected(Array.from(selectedIds));
             setSelectedIds(new Set());
             setIsSelectionMode(false);
+            confirmDeleteModal.openModal(false);
         } finally {
             setIsDeleting(false);
         }
-    }, [selectedIds, onDeleteSelected]);
+    }, [selectedIds, onDeleteSelected, confirmDeleteModal]);
 
     const handleConversationClick = useCallback(
         (conversationId: ConversationId) => {
@@ -150,7 +158,7 @@ export const SelectableConversationList = ({
                             size="small"
                             color="danger"
                             shape="ghost"
-                            onClick={handleDeleteSelected}
+                            onClick={requestDeleteSelected}
                             loading={isDeleting}
                             disabled={isDeleting}
                             className="text-sm"
@@ -229,6 +237,15 @@ export const SelectableConversationList = ({
                         )
                 )}
             </div>
+
+            {confirmDeleteModal.render && (
+                <ConfirmDeleteModal
+                    {...confirmDeleteModal.modalProps}
+                    handleDelete={handleDeleteSelected}
+                    count={selectedCount}
+                    loading={isDeleting}
+                />
+            )}
         </div>
     );
 };

applications/lumo/src/app/features/projects/ProjectDetailView.tsx

@@ -13,6 +13,7 @@ import { ComposerComponent } from '../../components/Composer/ComposerComponent';
 import { useNativeComposerPromptApi } from '../../components/Composer/hooks/useNativeComposerPromptApi';
 import { sendMessage } from '../../components/Conversation/helper';
 import { FilesManagementView } from '../../components/Files';
+import ConfirmDeleteModal from '../../components/Modals/ConfirmDeleteModal';
 import { type ConversationGroup, SelectableConversationList } from '../../components/SelectableConversationList';
 import { usePersonalization } from '../../hooks';
 import { useIsLumoSmallScreen } from '../../hooks/useIsLumoSmallScreen';
@@ -45,7 +46,6 @@ import { ProjectEmptyState } from './components/ProjectEmptyState';
 import { getProjectCategory, getPromptSuggestionsForCategory } from './constants';
 import { useNativeComposerProjectDetailVisibilityApi } from './hooks/useNativeComposerProjectDetailVisibilityApi';
 import { useProjectActions } from './hooks/useProjectActions';
-import { DeleteConversationModal } from './modals/DeleteConversationModal';
 import { DeleteProjectModal } from './modals/DeleteProjectModal';
 import { ProjectInstructionsModal } from './modals/ProjectInstructionsModal';
 import type { Project } from './types';
@@ -438,9 +438,12 @@ const ProjectDetailViewInner = () => {
             )}
 
             {deleteConversationModal.render && (
-                <DeleteConversationModal
+                <ConfirmDeleteModal
                     {...deleteConversationModal.modalProps}
-                    onConfirm={confirmDeleteConversation}
+                    handleDelete={() => {
+                        confirmDeleteConversation();
+                        deleteConversationModal.openModal(false);
+                    }}
                 />
             )}