feat: enhance CommandPalette and MessageContainer with improved styling and interactivity; update localization messages for clarity

app/components/chat/CommandPalette.vue

@@ -152,6 +152,7 @@ const commandPaletteUi = {
             :icon="dark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="neutral"
             variant="outline"
+            class="cursor-pointer"
             size="xl"
             @click.prevent="toggleDark"
           />
@@ -159,6 +160,7 @@ const commandPaletteUi = {
             icon="i-ph-translate-duotone"
             color="neutral"
             variant="outline"
+            class="cursor-pointer"
             size="xl"
             @click.prevent="changeLocale(currentLocale!.code === 'en' ? 'fr' : currentLocale!.code === 'fr' ? 'es' : 'en')"
           />

app/components/chat/MessageContainer.vue

@@ -28,7 +28,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
       {{ formatted }}
     </div>
   </div>
-  <div v-else class="group space-y-2 duration-200">
+  <div v-else class="group space-y-2 duration-200 relative">
     <div class="flex flex-col-reverse gap-2 items-start md:flex-row-reverse">
       <UCard
         v-if="message.state === ChatState.LOADING && message.fetchStates && message.fetchStates.length > 0"
@@ -90,12 +90,12 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
           {{ message }}
         </div>
       </UCard>
-      <div class="flex items-center gap-2">
-        <UAvatar src="/arthur.webp" size="lg" />
+      <div class="flex items-center gap-2 lg:absolute lg:-left-12">
+        <UAvatar src="/arthur.webp" size="lg" class="shadow-lg" />
         <span class="md:hidden">Arthur DANJOU</span>
       </div>
     </div>
-    <div class="text-muted opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-start ml-12">
+    <div class="text-muted opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-start">
       {{ formatted }}
     </div>
   </div>

app/components/tool/Activity.vue

@@ -107,14 +107,14 @@ const getActivity = computed(() => {
               {{ getActivity.state!.split(' ').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') }}
             </div>
             <div>{{ getActivity.project }}</div>
-            <div class="italic text-xs">
-              {{ getActivity.start.ago }}
-            </div>
           </div>
 
           <template #footer>
             <div class="flex justify-end text-sm">
               <i18n-t keypath="tool.activity.started" tag="p">
+                <template #ago>
+                  {{ getActivity.start.ago }}
+                </template>
                 <template #date>
                   {{ getActivity.start.formated.date }}
                 </template>

app/pages/index.vue

@@ -34,7 +34,7 @@ watch(
         scale: 1,
         transition: {
           delay: 1800,
-          ease: 'easeInOut',
+          ease: 'easeIn',
         },
       }"
       :active="messages.length > 0"

locales/en.json

@@ -133,7 +133,7 @@
         "offline": "I'm offline 🫥",
         "idling": "I'm sleeping 😴"
       },
-      "started": "Started the {date} at {hour}",
+      "started": "Started {ago}, the {date} at {hour}",
       "secret": "Secret Project"
     },
     "location": "I'm currently based in {location}. See below for more details.",

locales/es.json

@@ -26,15 +26,15 @@
       "prompt": "¿Cómo puedo cambiar el tema?"
     },
     "stats": {
-      "label": "Ver estadísticas",
+      "label": "Estadística de desarrollo",
       "prompt": "¿Cómo puedo ver las estadísticas sobre Arthur?"
     },
     "weather": {
-      "label": "Ver el clima",
+      "label": "Clima",
       "prompt": "¿Cómo puedo ver las condiciones climáticas cerca de Arthur?"
     },
     "location": {
-      "label": "Ver ubicación",
+      "label": "Ubicación",
       "prompt": "¿Cómo puedo ver la ubicación de Arthur?"
     },
     "language": {
@@ -133,7 +133,7 @@
         "offline": "Estoy desconectado 🫥",
         "idling": "Estoy durmiendo 😴"
       },
-      "started": "Comenzado el {date} a {hour}",
+      "started": "Comenzó {ago}, el {date} en {hour}",
       "secret": "Proyecto Secreto"
     },
     "location": "Actualmente estoy basado en {location}. Consulta más detalles a continuación.",

locales/fr.json

@@ -26,15 +26,15 @@
       "prompt": "Comment puis-je changer le thème ?"
     },
     "stats": {
-      "label": "Voir les statistiques",
+      "label": "Statistiques de développement",
       "prompt": "Comment puis-je voir les statistiques concernant Arthur ?"
     },
     "weather": {
-      "label": "Voir la météo",
+      "label": "Météo",
       "prompt": "Comment puis-je voir les conditions météorologiques près d'Arthur ?"
     },
     "location": {
-      "label": "Voir la localisation",
+      "label": "Localisation",
       "prompt": "Comment puis-je voir la localisation d'Arthur ?"
     },
     "language": {
@@ -133,7 +133,7 @@
         "offline": "Je suis déconnecté 🫥",
         "idling": "Je dors 😴"
       },
-      "started": "Commencé le {date} à {hour}",
+      "started": "Commencé {ago}, le {date} à {hour}",
       "secret": "Projet Secret"
     },
     "location": "Je suis actuellement basé à {location}. Voir ci-dessous pour plus de détails.",