feat: implement duplicate message detection and display notification

app/components/chat/CommandPalette.vue

@@ -9,9 +9,9 @@ const openClearModal = ref(false)
 const { t } = useI18n({ useScope: 'local' })
 
 const { messages, submitMessage } = useChat(t)
-
 const { clearMessages, messages: storeMessages } = useChatStore()
 const loading = computed(() => storeMessages.some(msg => msg.state === ChatState.LOADING))
+
 function handleDelete() {
   clearMessages()
   openClearModal.value = false
@@ -22,6 +22,7 @@ function onSelect(item: CommandPaletteItem) {
   openMessageModal.value = false
   submitMessage(item.type, item.prompt, item.fetchStates ?? [])
 }
+
 defineShortcuts({
   meta_enter: () => {
     openMessageModal.value = !openMessageModal.value
@@ -45,88 +46,91 @@ const commandPaletteUi = {
 
 <template>
   <nav class="fixed bottom-0 left-1/2 z-50 -translate-x-1/2 pb-8">
-    <UFieldGroup>
-      <UModal v-model:open="openMessageModal" :ui="modalUi">
-        <UButton
-          :label="loading ? t('cmd.sending') : t('cmd.send')"
-          variant="outline"
-          color="neutral"
-          size="xl"
-          icon="i-ph-paper-plane-tilt-duotone"
-          class="rounded-full cursor-pointer"
-          :disabled="loading"
-        >
-          <template #trailing>
-            <UKbd value="meta" color="neutral" />
-            <UKbd value="enter" color="neutral" />
-          </template>
-        </UButton>
-
-        <template #content>
-          <UCommandPalette
-            close
-            :ui="commandPaletteUi"
-            :groups="messages"
-            @update:model-value="onSelect"
-            @update:open="openMessageModal = $event"
+    <UCard class="rounded-xl" :ui="{ body: 'p-2 sm:p-2' }">
+      <UFieldGroup>
+        <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
+          <UButton
+            :label="loading ? t('cmd.sending') : t('cmd.send')"
+            variant="outline"
+            color="neutral"
+            size="xl"
+            icon="i-ph-paper-plane-tilt-duotone"
+            class="rounded-lg cursor-pointer"
+            :disabled="loading"
           >
-            <template #item="{ item }">
-              <div class="relative flex items-center justify-between w-full p-1">
-                <div class="absolute inset-0 -m-1" />
-                <div class="flex items-center gap-2.5">
+            <template #trailing>
+              <UKbd value="meta" color="neutral" />
+              <UKbd value="enter" color="neutral" />
+            </template>
+          </UButton>
+
+          <template #content>
+            <UCommandPalette
+              close
+              :ui="commandPaletteUi"
+              :groups="messages"
+              @update:model-value="onSelect"
+              @update:open="openMessageModal = $event"
+            >
+              <template #item="{ item }">
+                <div class="relative flex items-center justify-between w-full p-1">
+                  <div class="absolute inset-0 -m-1" />
                   <div class="flex items-center gap-2.5">
-                    <UIcon :name="item.icon!" size="20" />
-                    <span>{{ item.label }}</span>
+                    <div class="flex items-center gap-2.5">
+                      <UIcon :name="item.icon!" size="20" />
+                      <span>{{ item.label }}</span>
+                    </div>
+                  </div>
+                  <span class="text-muted text-xs font-medium">
+                    {{ item.prompt }}
+                  </span>
+                </div>
+              </template>
+              <template #footer>
+                <div class="flex items-center justify-between gap-2">
+                  <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
+                  <div class="flex items-center gap-1">
+                    <UButton color="neutral" variant="ghost" :label="t('cmd.send')" class="text-dimmed" size="xs">
+                      <template #trailing>
+                        <UKbd value="enter" />
+                      </template>
+                    </UButton>
                   </div>
                 </div>
-                <span class="text-muted text-xs font-medium">
-                  {{ item.prompt }}
-                </span>
-              </div>
-            </template>
-            <template #footer>
-              <div class="flex items-center justify-between gap-2">
-                <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
-                <div class="flex items-center gap-1">
-                  <UButton color="neutral" variant="ghost" :label="t('cmd.send')" class="text-dimmed" size="xs">
-                    <template #trailing>
-                      <UKbd value="enter" />
-                    </template>
-                  </UButton>
-                </div>
-              </div>
-            </template>
-          </UCommandPalette>
-        </template>
-      </UModal>
-      <UModal
-        v-model:open="openClearModal"
-        :title="t('clear.title')"
-        :description="t('clear.description')"
-      >
-        <UButton
-          :label="t('clear.button')"
-          variant="subtle"
-          color="error"
-          leading-icon="i-ph-trash-duotone"
-          size="xl"
-          class="rounded-full"
-          :disabled="storeMessages.length === 0"
-        >
-          <template #trailing>
-            <UKbd value="meta" color="error" />
-            <UKbd value="D" color="error" />
+              </template>
+            </UCommandPalette>
           </template>
-        </UButton>
+        </UModal>
+        <UModal
+          v-model:open="openClearModal"
+          :title="t('clear.title')"
+          :description="t('clear.description')"
+        >
+          <UButton
+            :label="t('clear.button')"
+            variant="subtle"
+            color="error"
+            leading-icon="i-ph-trash-duotone"
+            size="xl"
+            class="rounded-lg"
+            :class="storeMessages.length !== 0 ? 'cursor-pointer' : 'cursor-default'"
+            :disabled="storeMessages.length === 0"
+          >
+            <template #trailing>
+              <UKbd value="meta" color="error" />
+              <UKbd value="D" color="error" />
+            </template>
+          </UButton>
 
-        <template #footer="{ close }">
-          <UFieldGroup>
-            <UButton :label="t('clear.cancel')" color="neutral" variant="outline" @click="close" />
-            <UButton :label="t('clear.submit')" color="error" @click.prevent="handleDelete()" />
-          </UFieldGroup>
-        </template>
-      </UModal>
-    </UFieldGroup>
+          <template #footer="{ close }">
+            <UFieldGroup>
+              <UButton :label="t('clear.cancel')" color="neutral" variant="outline" @click="close" />
+              <UButton :label="t('clear.submit')" color="error" @click.prevent="handleDelete()" />
+            </UFieldGroup>
+          </template>
+        </UModal>
+      </UFieldGroup>
+    </UCard>
   </nav>
 </template>
 
@@ -145,7 +149,7 @@ const commandPaletteUi = {
       "sending": "Sending..."
     },
     "chat": {
-        "action": "Components",
+        "actions": "Components",
         "arthur": "More about Arthur",
         "interface": "Change the interface",
         "theme": {
@@ -231,7 +235,7 @@ const commandPaletteUi = {
       "sending": "Envoi..."
     },
     "chat": {
-      "action": "Composants",
+      "actions": "Composants",
       "arthur": "En savoir plus sur Arthur",
       "interface": "Changer l'interface",
       "theme": {
@@ -317,7 +321,7 @@ const commandPaletteUi = {
       "sending": "Enviando..."
     },
     "chat": {
-        "action": "Componentes",
+        "actions": "Componentes",
         "arthur": "Más sobre Arthur",
         "interface": "Cambiar la interfaz",
         "theme": {

app/components/chat/MessageContainer.vue

@@ -51,6 +51,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-if="message.type === ChatType.INIT">
           {{ message.content }}
         </div>
+        <div v-else-if="message.type === ChatType.DUPLICATED">
+          <ToolDuplicated />
+        </div>
         <div v-else-if="message.type === ChatType.THEME">
           <ToolTheme />
         </div>

app/components/tool/Duplicated.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+const { t } = useI18n({ useScope: 'local' })
+</script>
+
+<template>
+  <section class="prose dark:prose-invert">
+    <h2>{{ t('duplicated.title') }}</h2>
+    <p>{{ t('duplicated.description') }}</p>
+  </section>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "duplicated": {
+      "title": "⚠️ I detected duplicated messages",
+      "description": "I have therefore removed the older duplicated messages to lighten the application."
+    }
+  },
+  "fr": {
+    "duplicated": {
+      "title": "⚠️ J'ai détecté des messages dupliqués",
+      "description": "J'ai donc supprimé les anciens messages dupliqués pour alléger l'application."
+    }
+  },
+  "es": {
+    "duplicated": {
+      "title": "⚠️ He detectado mensajes duplicados",
+      "description": "Por lo tanto, eliminé los mensajes duplicados más antiguos para aligerar la aplicación."
+    }
+  }
+}
+</i18n>

app/composables/chat.ts

@@ -136,10 +136,10 @@ export function useChat(t: any) {
     ]
   })
 
-  const { addMessage, checkForDuplicateMessages } = useChatStore()
+  const { addMessage, checkForDuplicateMessages, deleteMessage, cleanDuplicatedMessages } = useChatStore()
 
   async function submitMessage(type: ChatType, prompt: string, fetchStates: ChatFetchState[]) {
-    checkForDuplicateMessages(type)
+    const duplicates = checkForDuplicateMessages(type)
     addMessage(
       type,
       prompt,
@@ -147,6 +147,17 @@ export function useChat(t: any) {
       [],
     )
     await new Promise(resolve => setTimeout(resolve, 700))
+    if (duplicates.length > 0) {
+      duplicates.forEach(msg => deleteMessage(msg.id, msg.type))
+      cleanDuplicatedMessages()
+      addMessage(
+        ChatType.DUPLICATED,
+        '',
+        ChatSender.ARTHUR,
+        [ChatFetchState.THINKING, ChatFetchState.DONE],
+      )
+      await new Promise(resolve => setTimeout(resolve, 700))
+    }
     addMessage(
       type,
       '',

app/pages/index.vue

@@ -9,20 +9,14 @@ useSeoMeta({
 const { messages } = useChatStore()
 const { t } = useI18n({ useScope: 'local' })
 
-const scrollParents = ref<HTMLElement | null>(null)
-const lastMessage = computed(() => messages[messages.length - 1])
+const parents = useTemplateRef('parents')
+const { height } = useElementBounding(parents)
 
 watch(
-  () => lastMessage.value?.state,
+  height,
   async () => {
     await nextTick()
-    const container = scrollParents.value
-    if (container) {
-      const lastChild = container.lastElementChild
-      if (lastChild) {
-        lastChild.scrollIntoView({ behavior: 'smooth' })
-      }
-    }
+    window.scrollTo({ top: parents.value?.scrollHeight, behavior: 'smooth' })
   },
 )
 </script>
@@ -30,7 +24,7 @@ watch(
 <template>
   <main class="!max-w-none">
     <ChatCommandPalette />
-    <div ref="scrollParents" class="space-y-8 max-h-[calc(100vh-10rem)] overflow-y-auto">
+    <div ref="parents" class="space-y-8 my-32">
       <ChatMessageContainer
         :message="{
           content: t('init'),
@@ -58,7 +52,11 @@ watch(
           type: ChatType.INIT,
         }"
       />
-      <ChatMessageContainer v-for="message in messages" :key="message.id" :message="message" />
+      <ChatMessageContainer
+        v-for="message in messages"
+        :key="message.id"
+        :message="message"
+      />
     </div>
   </main>
 </template>

app/stores/chat.ts

@@ -1,5 +1,5 @@
-import type { ChatMessage, ChatType } from '~~/types'
-import { ChatFetchState, ChatSender, ChatState } from '~~/types'
+import type { ChatMessage } from '~~/types'
+import { ChatFetchState, ChatSender, ChatState, ChatType } from '~~/types'
 
 export const useChatStore = defineStore('chat', () => {
   const messages = ref<ChatMessage[]>([])
@@ -10,10 +10,17 @@ export const useChatStore = defineStore('chat', () => {
   })
 
   function checkForDuplicateMessages(type: ChatType) {
-    const duplicate = messages.value.findLast(msg => msg.type === type)
-    if (duplicate) {
-      messages.value.splice(messages.value.indexOf(duplicate) - 1, 2)
-    }
+    return messages.value.filter(msg => msg.type === type)
+  }
+
+  function deleteMessage(id: number, type: ChatType) {
+    const message = messages.value.find(msg => msg.id === id && msg.type === type)
+    messages.value.splice(messages.value.indexOf(message!), 1)
+  }
+
+  function cleanDuplicatedMessages() {
+    const duplicated = messages.value.filter(msg => msg.type === ChatType.DUPLICATED)
+    duplicated.forEach(msg => messages.value.splice(messages.value.indexOf(msg), 1))
   }
 
   function addMessage(type: ChatType, content: string, sender: ChatSender, fetchStates: ChatFetchState[]) {
@@ -52,6 +59,5 @@ export const useChatStore = defineStore('chat', () => {
       message.state = loadingState
     }
   }
-
-  return { messages, addMessage, clearMessages, canSend, setLoadingState, checkForDuplicateMessages }
+  return { messages, addMessage, clearMessages, canSend, setLoadingState, checkForDuplicateMessages, deleteMessage, cleanDuplicatedMessages }
 })

types/chat.ts

@@ -1,4 +1,5 @@
 export enum ChatType {
+  DUPLICATED = 'duplicated',
   WEATHER = 'weather',
   LOCATION = 'location',
   THEME = 'theme',