From acae444e2b964df3aa131e1a0e4527690f8651e1 Mon Sep 17 00:00:00 2001
From: MarBert <41899883+MarBert@users.noreply.github.com>
Date: Wed, 30 Oct 2024 18:21:31 +0100
Subject: [PATCH] [CAI-237] Add modal for history deletion (#1216)

* add modal

* add changeset

* fix required by review

---------

Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com>
---
 .changeset/nasty-pumpkins-clap.md             |  5 ++
 .../ChatbotHistoryDetailLayout.tsx            | 53 +++++++++++++++++--
 apps/nextjs-website/src/messages/it.json      |  4 ++
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nasty-pumpkins-clap.md

diff --git a/.changeset/nasty-pumpkins-clap.md b/.changeset/nasty-pumpkins-clap.md
new file mode 100644
index 0000000000..44faced185
--- /dev/null
+++ b/.changeset/nasty-pumpkins-clap.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Add modal to confirm history deletion
diff --git a/apps/nextjs-website/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx b/apps/nextjs-website/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx
index 5c627e2352..ff87e83151 100644
--- a/apps/nextjs-website/src/components/organisms/ChatbotHistoryDetailLayout/ChatbotHistoryDetailLayout.tsx
+++ b/apps/nextjs-website/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
index 0cde203d01..e76d2d7b11 100644
--- 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)",