Add ClearChatButton component and related logic

Author: smorelle-abstracta

browser-extension/src/components/ClearChatButton.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+defineEmits(['clearChat'])
+</script>
+
+<template>
+  <button 
+    @click="$emit('clearChat')" 
+    class="flex items-center p-2 my-2 text-white bg-red-600 w-full h-8 rounded-md hover:bg-red-700"
+  >
+    {{ t('clearChat') }}
+  </button>
+</template>
+
+<i18n>
+{
+  "en": {
+    "clearChat": "Clear chat"
+  },
+  "es": {
+    "clearChat": "Limpiar chat"
+  }
+}
+</i18n>

browser-extension/src/components/CopilotChat.vue

@@ -14,6 +14,7 @@ const emit = defineEmits<{
   (e: 'close'): void,
   (e: 'userMessage', text: string, file: Record<string, string>): void,
   (e: 'minimize'): void,
+  (e: 'clearChat'): void
 }>()
 
 const messagesDiv = ref<HTMLDivElement>()
@@ -64,7 +65,7 @@ const lastMessage = computed((): ChatMessage => props.messages[props.messages.le
     </template>
     <template v-slot:modalsContainer>
       <CopilotConfig :show="showConfig" :agent-id="agentId" :agent-name="agentName" :agent-logo="agentLogo"
-        @close="showConfig = false" />
+        @close="showConfig = false" @clear-chat="$emit('clearChat')" />
     </template>
   </PageOverlay>
 </template>

browser-extension/src/components/CopilotConfig.vue

@@ -7,9 +7,10 @@ import Modal from './Modal.vue'
 import ModalForm from './ModalForm.vue'
 import PromptEditor from './PromptEditor.vue'
 import NewPromptButton from './NewPromptButton.vue'
+import ClearChatButton from './ClearChatButton.vue'
 
 const props = defineProps<{ agentId: string, agentName: string, agentLogo: string, show: boolean }>()
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'clearChat'])
 const { t } = useI18n()
 const prompts = ref<Prompt[]>()
 const editingPrompt = ref<Prompt>()
@@ -60,6 +61,11 @@ const confirmPromptRemoval = async () => {
   prompts.value?.splice(deletingPromptIndex.value, 1)
   closePromptDeletionConfirmation()
 }
+
+const clearChat = () => {
+  emit('clearChat')
+  close()
+}
 </script>
 
 <template>
@@ -69,6 +75,7 @@ const confirmPromptRemoval = async () => {
         <div class="flex-auto self-center cursor-pointer p-1" @click="editingPrompt = prompt">{{ prompt.name }}</div>
         <button @click="removePrompt(index)"><trash-x-icon class="action-icon" /></button>
       </div>
+    <ClearChatButton @clear-chat="clearChat" />
   </Modal>
   <PromptEditor :name="editingPrompt?.name || ''" :text="editingPrompt?.text || ''" @close="closePromptEditor"
     @saved="onPromptUpdate" :show="editingPrompt !== undefined" :agent-id="agentId" />

browser-extension/src/pages/Index.vue

@@ -200,6 +200,14 @@ const onAgentError = (error: any) => {
   }
 }
 
+const onClearChat = () => {
+  messages.value = []
+
+  if (messages.value.length === 0 && agent.value) {
+    messages.value.push(ChatMessage.agentMessage(agent.value.manifest.welcomeMessage))
+  }
+}
+
 const sidebarClasses = computed(() => [
   'fixed flex flex-col bg-white border border-gray-300',
   isMinimized.value 
@@ -213,7 +221,7 @@ const sidebarClasses = computed(() => [
     <div v-if="!isMinimized" class="absolute left-0 z-auto cursor-ew-resize w-2 h-full" @mousedown="onStartResize" />
     <CopilotChat v-if="agent" :messages="messages" :agent-id="agent.manifest.id" :agent-name="agent.manifest.name"
       :agent-logo="agent.logo" :agent-capabilities="agent.manifest.capabilities || []" @userMessage="onUserMessage"
-      @close="onCloseSidebar" @minimize="onMinimizeSidebar" :minimized="isMinimized" />
+      @close="onCloseSidebar" @minimize="onMinimizeSidebar" :minimized="isMinimized" @clear-chat="onClearChat" />
     <CopilotList v-if="!agent" @activateAgent="onActivateAgent" @close="onCloseSidebar" />
   </div>
 </template>