[CAI-237] Add modal for history deletion (#1216)

* add modal * add changeset * fix required by review --------- Co-authored-by: marcobottaro <[email protected]>
pagopa · Oct 30, 2024 · acae444 · acae444
1 parent e5e9647
commit acae444
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/.changeset/nasty-pumpkins-clap.md b/.changeset/nasty-pumpkins-clap.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Add modal to confirm history deletion
diff --git a/...ebsite/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx b/...ebsite/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx
@@ -5,10 +5,21 @@ import ChatbotHistoryMessages from '@/components/molecules/ChatbotHistoryMessage
 import { defaultLocale } from '@/config';
 import { Query } from '@/lib/chatbot/queries';
 import { Delete } from '@mui/icons-material';
-import { Box, Button, Stack, Typography, useTheme } from '@mui/material';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { isEmpty } from 'fp-ts/lib/Array';
 import { useTranslations } from 'next-intl';
-import React from 'react';
+import React, { useState } from 'react';
 
 type DateFormatOptions = {
   locale?: string;
@@ -39,9 +50,18 @@ const ChatbotHistoryDetailLayout = ({
   nextSession,
   onDeleteChatSession,
 }: ChatbotHistoryDetailLayoutProps) => {
+  const [open, setOpen] = useState(false);
   const t = useTranslations();
   const { palette } = useTheme();
 
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
   if (isEmpty(queries)) {
     return (
       <Typography variant='h4'>{t('chatBot.thereAreNoMessages')}</Typography>
@@ -56,6 +76,33 @@ const ChatbotHistoryDetailLayout = ({
 
   return (
     <Stack direction='column' spacing={2}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby='alert-dialog-title'
+        aria-describedby='alert-dialog-description'
+      >
+        <DialogTitle id='alert-dialog-title'>
+          {t('chatBot.deleteHeader')}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id='alert-dialog-description'>
+            {t('chatBot.confirmDelete')}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button variant='outlined' onClick={handleClose}>
+            {t('chatBot.deleteDismiss')}
+          </Button>
+          <Button
+            variant='contained'
+            onClick={() => onDeleteChatSession(firstQuery.sessionId)}
+            autoFocus
+          >
+            {t('chatBot.deleteConfirm')}
+          </Button>
+        </DialogActions>
+      </Dialog>
       <Typography variant='h4'>{firstQuery.question}</Typography>
       <Stack direction='row' justifyContent='space-between'>
         <Typography
@@ -70,7 +117,7 @@ const ChatbotHistoryDetailLayout = ({
           startIcon={<Delete />}
           color='error'
           sx={{ display: { xs: 'none', sm: 'flex' } }}
-          onClick={() => onDeleteChatSession(firstQuery.sessionId)}
+          onClick={handleClickOpen}
         >
           {t('chatBot.deleteChat')}
         </Button>

diff --git a/apps/nextjs-website/src/messages/it.json b/apps/nextjs-website/src/messages/it.json
@@ -604,6 +604,10 @@
         "copied": "Copiato",
         "welcomeMessage": "**Benvenuto nel Dev Portal!**\n\nSono _Discovery_, il tuo assistente virtuale per la documentazione tecnica. Posso aiutarti con informazioni su API, guide e altro.\n\n_Nota_: Discovery è in versione beta, quindi alcune risposte potrebbero non essere accurate. Verifica sempre le informazioni importanti con la documentazione ufficiale.\n\nCome posso aiutarti oggi?",
         "deleteChat": "Elimina Chat",
+        "deleteHeader":"Elimina le conversazioni",
+        "deleteConfirm": "Si",
+        "deleteDismiss": "No",
+        "confirmDelete": "Sei sicuro di voler eliminare tutte le conversazioni passate?",
         "previousChat": "Chat Precedente",
         "nextChat": "Chat Successiva",
         "guestMessage": "Ciao sono _Discovery_ , il chatbot di DevPortal!\n\nPosso aiutarti a trovare in modo semplice e rapido le informazioni presenti nella documentazione del Portale.\n\nPer poter accedere al servizio, ti invito ad [accedere]({host}/auth/login)",