From 6f9c0aa3b18e4c2407083db20f60250483a946ac Mon Sep 17 00:00:00 2001 From: Neha Prasad Date: Wed, 31 Dec 2025 07:29:30 +0530 Subject: [PATCH] fix: display conversation title in delete confirmation modal (#11818) Co-authored-by: amanape <83104063+amanape@users.noreply.github.com> --- .../confirm-delete-modal.test.tsx | 30 +++++++++++++++++++ .../confirm-delete-modal.tsx | 18 ++++++++--- .../conversation-panel/conversation-panel.tsx | 16 ++++++++-- .../conversation/conversation-name.tsx | 1 + frontend/src/i18n/declaration.ts | 1 + frontend/src/i18n/translation.json | 16 ++++++++++ 6 files changed, 75 insertions(+), 7 deletions(-) create mode 100644 frontend/__tests__/components/features/conversation-panel/confirm-delete-modal.test.tsx diff --git a/frontend/__tests__/components/features/conversation-panel/confirm-delete-modal.test.tsx b/frontend/__tests__/components/features/conversation-panel/confirm-delete-modal.test.tsx new file mode 100644 index 0000000000..077ff88760 --- /dev/null +++ b/frontend/__tests__/components/features/conversation-panel/confirm-delete-modal.test.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { describe, it, expect, vi } from "vitest"; +import { screen } from "@testing-library/react"; +import { renderWithProviders } from "test-utils"; +import { ConfirmDeleteModal } from "#/components/features/conversation-panel/confirm-delete-modal"; + +vi.mock("react-i18next", async (importOriginal) => ({ + ...(await importOriginal()), + Trans: ({ + values, + components, + }: { + values: { title: string }; + components: { title: React.ReactElement }; + }) => React.cloneElement(components.title, {}, values.title), +})); + +describe("ConfirmDeleteModal", () => { + it("should display the conversation title", () => { + renderWithProviders( + , + ); + + expect(screen.getByText(/My Test Conversation/)).toBeInTheDocument(); + }); +}); diff --git a/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx b/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx index 8c636a6900..630ce03eaf 100644 --- a/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx +++ b/frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx @@ -1,4 +1,4 @@ -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { BaseModalDescription, BaseModalTitle, @@ -11,22 +11,32 @@ import { I18nKey } from "#/i18n/declaration"; interface ConfirmDeleteModalProps { onConfirm: () => void; onCancel: () => void; + conversationTitle?: string; } export function ConfirmDeleteModal({ onConfirm, onCancel, + conversationTitle, }: ConfirmDeleteModalProps) { const { t } = useTranslation(); + const confirmationMessage = conversationTitle ? ( + }} + /> + ) : ( + t(I18nKey.CONVERSATION$DELETE_WARNING) + ); + return (
- + {confirmationMessage}
(null); + const [selectedConversationTitle, setSelectedConversationTitle] = + React.useState(null); const [selectedConversationVersion, setSelectedConversationVersion] = React.useState<"V0" | "V1" | undefined>(undefined); const [openContextMenuId, setOpenContextMenuId] = React.useState< @@ -73,9 +75,10 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) { threshold: 200, // Load more when 200px from bottom }); - const handleDeleteProject = (conversationId: string) => { + const handleDeleteProject = (conversationId: string, title: string) => { setConfirmDeleteModalVisible(true); setSelectedConversationId(conversationId); + setSelectedConversationTitle(title); }; const handleStopConversation = ( @@ -171,7 +174,9 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) { onClick={onClose} > handleDeleteProject(project.conversation_id)} + onDelete={() => + handleDeleteProject(project.conversation_id, project.title) + } onStop={() => handleStopConversation( project.conversation_id, @@ -212,8 +217,13 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) { onConfirm={() => { handleConfirmDelete(); setConfirmDeleteModalVisible(false); + setSelectedConversationTitle(null); }} - onCancel={() => setConfirmDeleteModalVisible(false)} + onCancel={() => { + setConfirmDeleteModalVisible(false); + setSelectedConversationTitle(null); + }} + conversationTitle={selectedConversationTitle ?? undefined} /> )} diff --git a/frontend/src/components/features/conversation/conversation-name.tsx b/frontend/src/components/features/conversation/conversation-name.tsx index 241fd8cd2a..7366ad06f1 100644 --- a/frontend/src/components/features/conversation/conversation-name.tsx +++ b/frontend/src/components/features/conversation/conversation-name.tsx @@ -227,6 +227,7 @@ export function ConversationName() { setConfirmDeleteModalVisible(false)} + conversationTitle={conversation?.title} /> )} diff --git a/frontend/src/i18n/declaration.ts b/frontend/src/i18n/declaration.ts index 1c6b0c618d..a3c04ce323 100644 --- a/frontend/src/i18n/declaration.ts +++ b/frontend/src/i18n/declaration.ts @@ -606,6 +606,7 @@ export enum I18nKey { AUTH$SIGN_IN_WITH_IDENTITY_PROVIDER = "AUTH$SIGN_IN_WITH_IDENTITY_PROVIDER", WAITLIST$JOIN_WAITLIST = "WAITLIST$JOIN_WAITLIST", CONVERSATION$DELETE_WARNING = "CONVERSATION$DELETE_WARNING", + CONVERSATION$DELETE_WARNING_WITH_TITLE = "CONVERSATION$DELETE_WARNING_WITH_TITLE", FEEDBACK$TITLE = "FEEDBACK$TITLE", FEEDBACK$DESCRIPTION = "FEEDBACK$DESCRIPTION", EXIT_PROJECT$WARNING = "EXIT_PROJECT$WARNING", diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json index 39dd9d0f78..b2aaeb1a1d 100644 --- a/frontend/src/i18n/translation.json +++ b/frontend/src/i18n/translation.json @@ -9695,6 +9695,22 @@ "de": "Sind Sie sicher, dass Sie dieses Gespräch löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.", "uk": "Ви впевнені, що хочете видалити цю розмову? Цю дію не можна скасувати." }, + "CONVERSATION$DELETE_WARNING_WITH_TITLE": { + "en": "Are you sure you want to delete the \"{{title}}\" conversation? This action cannot be undone.", + "ja": "「{{title}}」の会話を削除してもよろしいですか？この操作は元に戻せません。", + "zh-CN": "您确定要删除\"{{title}}\"对话吗？此操作无法撤消。", + "zh-TW": "您確定要刪除「{{title}}」對話嗎？此操作無法撤消。", + "ko-KR": "\"{{title}}\" 대화를 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.", + "no": "Er du sikker på at du vil slette samtalen \"{{title}}\"? Denne handlingen kan ikke angres.", + "it": "Sei sicuro di voler eliminare la conversazione \"{{title}}\"? Questa azione non può essere annullata.", + "pt": "Tem certeza de que deseja excluir a conversa \"{{title}}\"? Esta ação não pode ser desfeita.", + "es": "¿Está seguro de que desea eliminar la conversación \"{{title}}\"? Esta acción no se puede deshacer.", + "ar": "هل أنت متأكد أنك تريد حذف المحادثة \"{{title}}\"؟ لا يمكن التراجع عن هذا الإجراء.", + "fr": "Êtes-vous sûr de vouloir supprimer la conversation « {{title}} » ? Cette action ne peut pas être annulée.", + "tr": "\"{{title}}\" konuşmasını silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.", + "de": "Sind Sie sicher, dass Sie das Gespräch „{{title}}\" löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.", + "uk": "Ви впевнені, що хочете видалити розмову «{{title}}»? Цю дію не можна скасувати." + }, "FEEDBACK$TITLE": { "en": "Feedback", "ja": "フィードバック",