Skip to content

Commit 1432099

Browse files
giovanni-vaccarinogiovanni-vaccarino
committed
Delete popup.
1 parent 74c8c50 commit 1432099

5 files changed

Lines changed: 134 additions & 17 deletions

File tree

‎frontend/src/components/Chatbot.tsx‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const Chatbot = () => {
2020
const [sessions, setSessions] = useState<ChatSession[]>(loadChatbotSessions);
2121
const [currentSessionId, setCurrentSessionId] = useState<string | null>(loadChatbotLastSessionId);
2222
const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
23+
const [isPopupOpen, setIsPopupOpen] = useState<boolean>(false);
24+
const [sessionIdToDelete, setSessionIdToDelete] = useState<string | null>(null);
2325

2426
/**
2527
* Saving the chat sessions in the session storage only
@@ -62,18 +64,19 @@ export const Chatbot = () => {
6264
* Handles the delete process of a chat session.
6365
*/
6466
const handleDeleteChat = async () => {
65-
if (currentSessionId === null){
66-
console.error("No current session active")
67+
if (sessionIdToDelete === null){
68+
console.error("No current selected to delete")
6769
return
6870
}
6971

70-
await deleteChatSession(currentSessionId);
71-
const updatedSessions = sessions.filter(s => s.id !== currentSessionId);
72-
setSessions(updatedSessions)
72+
await deleteChatSession(sessionIdToDelete);
73+
const updatedSessions = sessions.filter(s => s.id !== sessionIdToDelete);
74+
setSessions(updatedSessions);
75+
setIsPopupOpen(false);
7376
if (updatedSessions.length === 0) {
7477
setCurrentSessionId(null);
7578
} else {
76-
setCurrentSessionId(updatedSessions[0].id)
79+
setCurrentSessionId(updatedSessions[0].id);
7780
}
7881
};
7982

@@ -154,7 +157,12 @@ export const Chatbot = () => {
154157

155158
const onSwitchChat = (chatSessionId: string) => {
156159
openSideBar();
157-
setCurrentSessionId(chatSessionId)
160+
setCurrentSessionId(chatSessionId);
161+
}
162+
163+
const openConfirmDeleteChatPopup = (chatSessionId: string) => {
164+
setSessionIdToDelete(chatSessionId);
165+
setIsPopupOpen(true);
158166
}
159167

160168
const getWelcomePage = () => {
@@ -175,6 +183,31 @@ export const Chatbot = () => {
175183
)
176184
}
177185

186+
const getDeletePopup = () => {
187+
return(
188+
189+
<div
190+
style={chatbotStyles.popupContainer}
191+
>
192+
<h2 style={chatbotStyles.popupTitle}>{getChatbotText("popupTitle")}</h2>
193+
<p style={chatbotStyles.popupMessage}>
194+
{getChatbotText("popupMessage")}
195+
</p>
196+
<div style={chatbotStyles.popupButtonsContainer}>
197+
<button style={chatbotStyles.popupDeleteButton} onClick={handleDeleteChat}>
198+
{getChatbotText("popupDeleteButton")}
199+
</button>
200+
<button style={chatbotStyles.popupCancelButton} onClick={() => {
201+
setIsPopupOpen(false);
202+
setSessionIdToDelete(null);
203+
}}>
204+
{getChatbotText("popupCancelButton")}
205+
</button>
206+
</div>
207+
</div>
208+
)
209+
}
210+
178211
return (
179212
<>
180213
<button
@@ -186,7 +219,7 @@ export const Chatbot = () => {
186219

187220
{isOpen && (
188221
<div
189-
style={{...chatbotStyles.container}}
222+
style={{...chatbotStyles.container, pointerEvents: isPopupOpen ? 'none' : 'auto'}}
190223
>
191224
{isSidebarOpen && (
192225
<Sidebar
@@ -195,9 +228,13 @@ export const Chatbot = () => {
195228
onSwitchChat={onSwitchChat}
196229
chatList={sessions}
197230
activeChatId={currentSessionId}
231+
openConfirmDeleteChatPopup={openConfirmDeleteChatPopup}
198232
/>
199233
)}
200-
<Header isChat={currentSessionId !== null} openSideBar={openSideBar} clearMessages={handleDeleteChat} />
234+
{isPopupOpen && (
235+
getDeletePopup()
236+
)}
237+
<Header currentSessionId={currentSessionId} openSideBar={openSideBar} clearMessages={openConfirmDeleteChatPopup} />
201238
{(currentSessionId !== null) ?
202239
<>
203240
<Messages messages={getSessionMessages(currentSessionId)} loading={getChatLoading()} />

‎frontend/src/components/Header.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { chatbotStyles } from '../styles/styles';
55
* Props for the Header component.
66
*/
77
interface HeaderProps {
8-
isChat: boolean;
9-
clearMessages: () => void;
8+
currentSessionId: string | null;
9+
clearMessages: (chatSessionId: string) => void;
1010
openSideBar: () => void;
1111
}
1212

@@ -15,7 +15,7 @@ interface HeaderProps {
1515
* a button to clear the current conversation. It receives a callback to handle
1616
* message clearing, typically triggered by user interaction.
1717
*/
18-
export const Header = ({ isChat, clearMessages, openSideBar }: HeaderProps) => {
18+
export const Header = ({ currentSessionId, clearMessages, openSideBar }: HeaderProps) => {
1919
return(
2020
<div
2121
style={chatbotStyles.chatbotHeader}
@@ -27,9 +27,9 @@ export const Header = ({ isChat, clearMessages, openSideBar }: HeaderProps) => {
2727
>
2828
{getChatbotText("sidebarLabel")}
2929
</button>
30-
{isChat &&
30+
{(currentSessionId !== null) &&
3131
<button
32-
onClick={clearMessages}
32+
onClick={() => clearMessages(currentSessionId)}
3333
style={chatbotStyles.clearButton}
3434
>
3535
{getChatbotText("clearChat")}

‎frontend/src/components/Sidebar.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ interface SidebarProps {
99
onClose: () => void;
1010
onCreateChat: () => void;
1111
onSwitchChat: (chatSessionId: string) => void;
12+
openConfirmDeleteChatPopup: (chatSessionId: string) => void;
1213
chatList: ChatSession[];
1314
activeChatId: string | null;
1415
}
@@ -17,11 +18,11 @@ interface SidebarProps {
1718
* Sidebar renders the sidebar section of the chatbot UI, including the button to
1819
* create new chats, and the list of active chats.
1920
*/
20-
export const Sidebar = ({ onClose, onCreateChat, onSwitchChat, chatList, activeChatId }: SidebarProps) => {
21+
export const Sidebar = ({ onClose, onCreateChat, onSwitchChat, openConfirmDeleteChatPopup, chatList, activeChatId }: SidebarProps) => {
2122
const getChatName = (chat: ChatSession, index: number) => {
2223
if (chat.messages.length > 0){
2324
const firstMessage = chat.messages[0].text;
24-
return firstMessage.slice(0, 20);
25+
return firstMessage.length > 25 ? `${firstMessage.slice(0, 25).trim()}...` : firstMessage;
2526
}
2627

2728
return `Chat ${index + 1}`
@@ -61,6 +62,15 @@ export const Sidebar = ({ onClose, onCreateChat, onSwitchChat, chatList, activeC
6162
style={chatbotStyles.sidebarChatContainer(isActive)}
6263
>
6364
{getChatName(chat, index)}
65+
<button
66+
style={chatbotStyles.sidebarDeleteChatButton}
67+
onClick={(e) => {
68+
e.stopPropagation();
69+
openConfirmDeleteChatPopup(chat.id)
70+
}}
71+
>
72+
&#128465;
73+
</button>
6474
</div>
6575
);
6676
})

‎frontend/src/data/chatbotTexts.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
"noInputWarningMessage": "Please enter a message before sending.",
77
"generatingMessage": "Generating...",
88
"clearChat": "Delete chat",
9+
"popupTitle": "Delete this chat?",
10+
"popupMessage": "This action cannot be undone. Are you sure you want to delete this conversation?",
11+
"popupDeleteButton": "Delete",
12+
"popupCancelButton": "Cancel",
913
"errorMessage": "Sorry, I had trouble responding.",
1014
"noResponseMessage": "No response",
1115
"sendMessage": "Send",

‎frontend/src/styles/styles.ts‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,64 @@ export const chatbotStyles = {
4545
alignItems: 'center',
4646
} as CSSProperties,
4747

48+
popupContainer: {
49+
pointerEvents: 'auto',
50+
position: 'absolute',
51+
top: 200,
52+
left: 100,
53+
height: '125px',
54+
width: '400px',
55+
display: 'flex',
56+
flexDirection: 'column',
57+
justifyContent: 'center',
58+
alignItems: 'center',
59+
padding: '2rem 1rem',
60+
backgroundColor: 'rgba(44, 41, 41, 1)',
61+
boxShadow: '4px 4px 10px rgba(0, 0, 0, 0.4)',
62+
borderRadius: '10px',
63+
zIndex: 11,
64+
} as CSSProperties,
65+
66+
popupTitle: {
67+
fontSize: '1.25rem',
68+
fontWeight: 'bold',
69+
color: '#ffffff',
70+
marginBottom: '10px',
71+
} as CSSProperties,
72+
73+
popupMessage: {
74+
fontSize: '1rem',
75+
textAlign: 'center',
76+
color: '#d1d5db',
77+
marginBottom: '1.5rem',
78+
} as CSSProperties,
79+
80+
popupButtonsContainer: {
81+
display: 'flex',
82+
justifyContent: 'flex-end',
83+
gap: '1rem',
84+
} as CSSProperties,
85+
86+
popupDeleteButton: {
87+
backgroundColor: '#dc2626',
88+
color: '#ffffff',
89+
padding: '8px 16px',
90+
border: 'none',
91+
borderRadius: '6px',
92+
cursor: 'pointer',
93+
fontSize: '1rem',
94+
} as CSSProperties,
95+
96+
popupCancelButton: {
97+
backgroundColor: '#5e5b5b',
98+
color: '#ffffff',
99+
padding: '8px 16px',
100+
border: 'none',
101+
borderRadius: '6px',
102+
cursor: 'pointer',
103+
fontSize: '1rem',
104+
} as CSSProperties,
105+
48106
boxWelcomePage: {
49107
textAlign: 'center',
50108
color: '#888'
@@ -150,7 +208,7 @@ export const chatbotStyles = {
150208
borderTopRightRadius: 20,
151209
borderBottomLeftRadius: 20,
152210
borderBottomRightRadius: sender === 'user' ? 6 : 20,
153-
backgroundColor: sender === 'user' ? '#0073e6' : '#2d2d2d',
211+
backgroundColor: sender === 'user' ? '#0073e6' : '#5e5b5b',
154212
color: sender === 'user' ? '#fff' : '#f0f0f0',
155213
maxWidth: '80%',
156214
wordWrap: 'break-word',
@@ -209,9 +267,17 @@ export const chatbotStyles = {
209267
textAlign: 'center'
210268
} as CSSProperties,
211269

270+
sidebarDeleteChatButton: {
271+
border: 'none',
272+
backgroundColor: 'transparent',
273+
cursor: 'pointer',
274+
} as CSSProperties,
275+
212276
sidebarChatContainer: (isActive: boolean): CSSProperties => ({
213277
display: 'flex',
278+
justifyContent: 'space-between',
214279
alignItems: 'center',
280+
maxHeight: '3vh',
215281
padding: '0.75rem',
216282
marginBottom: '0.5rem',
217283
borderRadius: '0.5rem',

0 commit comments

Comments
 (0)