Delete message

msveshnikov · Apr 28, 2024 · 490753a · 490753a
1 parent a57ee65
commit 490753a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/ChatHistory.js b/src/components/ChatHistory.js
@@ -1,6 +1,7 @@
 import React, { memo, useState } from "react";
 import { Box, CircularProgress, TextField, IconButton, useTheme } from "@mui/material";
 import ReactMarkdown from "react-markdown";
+import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import { CodeBlock } from "./CodeBlock";
 import { Lightbox } from "react-modal-image";
@@ -55,7 +56,7 @@ const linkStyle = {
     wordBreak: "break-all",
 };
 
-const ChatHistory = memo(({ chatHistory, isModelResponding, onRun, onChange }) => {
+const ChatHistory = memo(({ chatHistory, isModelResponding, onRun, onChange, onDelete }) => {
     const [isLightboxOpen, setIsLightboxOpen] = useState(false);
     const [lightboxImageIndex, setLightboxImageIndex] = useState(0);
     const [lightboxMessageIndex, setLightboxMessageIndex] = useState(0);
@@ -78,6 +79,12 @@ const ChatHistory = memo(({ chatHistory, isModelResponding, onRun, onChange }) =
         setEditingMessage(newMessage);
     };
 
+    const handleDeleteClick = (index) => {
+        const updatedChatHistory = [...chatHistory];
+        updatedChatHistory.splice(index, 1);
+        onDelete(updatedChatHistory);
+    };
+
     const handleKeyDown = (e) => {
         if (e.key === "Enter" || e.keyCode === 13) {
             setEditingMessageIndex(-1);
@@ -127,6 +134,9 @@ const ChatHistory = memo(({ chatHistory, isModelResponding, onRun, onChange }) =
                             />
                         ) : (
                             <>
+                                <IconButton size="small" onClick={() => handleDeleteClick(index)}>
+                                    <DeleteIcon fontSize="inherit" />
+                                </IconButton>
                                 {chat.user}
                                 <IconButton size="small" onClick={() => handleEditClick(index, chat.user)}>
                                     <EditIcon fontSize="inherit" />

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -362,6 +362,10 @@ function Main({ darkMode, toggleTheme }) {
         sendFileAndQuery(null, null, newHistory[index].user, newHistory.slice(0, index));
     };
 
+    const handleDelete = async (newHistory) => {
+        setChatHistory(newHistory);
+    };
+
     const fetchUserData = async () => {
         const token = localStorage.getItem("token");
         const headers = {
@@ -466,6 +470,7 @@ function Main({ darkMode, toggleTheme }) {
             >
                 <ChatHistory
                     onChange={handleChange}
+                    onDelete={handleDelete}
                     onRun={handleRun}
                     chatHistory={chatHistory}
                     isModelResponding={isModelResponding}