Added ability to delete previous messages in the chat history

Author: TannerMidd

src/components/message-item.vue

@@ -3,7 +3,7 @@
 <script setup>
 import hljs from 'highlight.js/lib/common';
 import MarkdownIt from 'markdown-it';
-import { RefreshCcw } from 'lucide-vue-next';
+import { RefreshCcw, Trash } from 'lucide-vue-next';
 import { defineEmits, ref } from 'vue';
 import "/node_modules/highlight.js/scss/github-dark-dimmed.scss";
 
@@ -16,7 +16,7 @@ defineProps({
     modelDisplayName: String
 });
 
-defineEmits(['regenerate-response']);
+defineEmits(['regenerate-response', 'delete-response']);
 
 const loadingIcon = ref(-1);
 
@@ -77,6 +77,9 @@ const startLoading = (index) => {
                 <RefreshCcw v-if="message.role === 'user'" class="icon"
                     :class="{ 'loading': isLoading && loadingIcon === index }"
                     @click="$emit('regenerate-response', message.content), startLoading(index)" />
+                <Trash v-if="message.role === 'user'" class="delete-icon"
+                    :class="{ 'loading': isLoading && loadingIcon === index }"
+                    @click="$emit('delete-response', message.content), startLoading(index)" />
                 {{ message.role === 'user' ? 'User' : modelDisplayName }}
             </div>
             <span class="message-contents" v-html="formatMessage(message.content)"></span>
@@ -136,6 +139,21 @@ const startLoading = (index) => {
     }
 }
 
+
+.delete-icon {
+    position: absolute;
+    top: 3px;
+    left: -65px;
+    color: #9d81a0;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    background-color: transparent;
+
+    &:hover {
+        transform: scale(1.15);
+    }
+}
+
+
 @keyframes spin {
     0% {
         transform: rotate(0deg);

src/views/ChatLayout.vue

@@ -635,6 +635,21 @@ async function regenerateMessageReponse(content) {
     isLoading.value = false;
 }
 
+async function deleteMessageFromHistory(content) {
+    const messageIndex = messages.value.findIndex(message => message.content === content && message.role === 'user');
+
+    if (messageIndex !== -1) {
+        streamedMessageText.value = "";
+
+        const beforeMessages = messages.value.slice(0, messageIndex);
+        const messagesAfter = messages.value.slice(messageIndex + 2); // This line remains the same
+
+        messages.value = [...beforeMessages, ...messagesAfter];
+
+        saveMessages();
+    }
+}
+
 async function sendImagePrompt(imagePrompt) {
     isGeneratingImage.value = true;
     streamedMessageText.value = "";
@@ -910,7 +925,8 @@ onMounted(() => {
                                 :isClaudeEnabled="isClaudeEnabled" :isUsingLocalModel="isUsingLocalModel"
                                 :isAnalyzingImage="isAnalyzingImage" :streamedMessageText="streamedMessageText"
                                 :isGeneratingImage="isGeneratingImage" :modelDisplayName="modelDisplayName"
-                                @regenerate-response="regenerateMessageReponse" />
+                                @regenerate-response="regenerateMessageReponse"
+                                @delete-response="deleteMessageFromHistory" />
                         </div>
                         <!-- Floating button to quick scroll to the bottom of the page -->
                         <div class="floating-button scroll" id="scroll-button" @click="scrollToBottom"