feat: add Skills component and integrate skills data; enhance CommandPalette and MessageContainer with improved UI and animations

app/components/chat/CommandPalette.vue

@@ -2,6 +2,13 @@
 import type { CommandPaletteItem } from '@nuxt/ui'
 import { ChatState } from '~~/types'
 
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const searchTerm = ref('')
 const openMessageModal = ref(false)
 const openClearModal = ref(false)
@@ -51,10 +58,15 @@ const commandPaletteUi = {
   item: 'data-highlighted:not-data-disabled:before:bg-muted',
   content: 'flex-1 overflow-y-auto',
 }
+
+// const isDesktop = computed(() => window.innerWidth >= 768)
 </script>
 
 <template>
-  <nav class="fixed bottom-0 left-1/2 z-50 -translate-x-1/2 pb-8">
+  <nav
+    class="fixed z-50 pb-8 duration-700"
+    :class="active ? 'bottom-0 left-1/2 -translate-x-1/2' : 'md:bottom-1/4 left-1/2 -translate-x-1/2 bottom-0'"
+  >
     <UCard variant="outline" class="rounded-xl shadow-lg" :ui="{ body: 'p-2 sm:p-2 flex gap-2' }">
       <UFieldGroup>
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
@@ -65,6 +77,7 @@ const commandPaletteUi = {
             size="xl"
             icon="i-ph-paper-plane-tilt-duotone"
             class="rounded-lg cursor-pointer"
+            :class="active ? '' : 'p-6'"
             :disabled="loading"
           >
             <template #trailing>
@@ -119,6 +132,7 @@ const commandPaletteUi = {
           </template>
         </UModal>
         <UModal
+          v-if="active"
           v-model:open="openClearModal"
           :title="t('palette.clear.title')"
           :description="t('palette.clear.description')"
@@ -142,7 +156,7 @@ const commandPaletteUi = {
         </UModal>
       </UFieldGroup>
       <ClientOnly>
-        <UFieldGroup>
+        <UFieldGroup class="flex items-center justify-center" :orientation="active ? 'horizontal' : 'vertical'">
           <UButton
             :icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="neutral"

app/components/chat/Main.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
 <template>
   <div class="flex flex-col my-16 md:my-32">
     <h1
@@ -11,10 +15,11 @@
         opacity: 1,
         y: 0,
         scale: 1,
+        transition: { ease: 'linear' },
       }"
-      class="font-bold text-3xl sm:text-4xl"
+      class="font-bold text-3xl sm:text-4xl duration-200"
     >
-      Welcome to ArtChat
+      {{ t('chat.welcome') }}
     </h1>
     <h3
       v-motion
@@ -29,11 +34,12 @@
         scale: 1,
         transition: {
           delay: 400,
+          ease: 'linear',
         },
       }"
-      class="text-3xl sm:text-4xl bg-gradient-to-r from-inverted/40 to-inverted/75 to-50% bg-clip-text text-transparent font-medium"
+      class="text-3xl sm:text-4xl bg-gradient-to-r from-inverted/40 to-inverted/75 to-50% bg-clip-text text-transparent font-medium duration-200"
     >
-      Ask me anything about Arthur DANJOU
+      {{ t('chat.ask') }}
     </h3>
   </div>
 </template>

app/components/chat/MessageContainer.vue

@@ -14,7 +14,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
 </script>
 
 <template>
-  <div v-if="!isArthur" class="group flex flex-col gap-2">
+  <div v-if="!isArthur" class="group flex flex-col gap-2 duration-200">
     <div class="flex flex-col-reverse md:flex-row-reverse items-end">
       <UCard
         variant="solid"
@@ -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">
+  <div v-else class="group space-y-2 duration-200">
     <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"
@@ -41,7 +41,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
       <UCard
         v-else
         variant="soft"
-        class="mt-1 w-full bg-transparent"
+        class="mt-1 w-full max-w-none bg-transparent"
         :ui="{ body: 'p-0 sm:p-0', header: 'p-0 sm:p-0', footer: 'p-0 sm:p-0' }"
       >
         <div v-if="message.type === ChatType.INIT">
@@ -74,6 +74,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-else-if="message.type === ChatType.LOCATION">
           <ToolLocation />
         </div>
+        <div v-else-if="message.type === ChatType.SKILLS">
+          <ToolSkills />
+        </div>
         <div v-else>
           {{ message }}
         </div>