feat: enhance chat message handling; add createdAt timestamp to messages and implement dynamic component rendering for various chat types

app/components/chat/MessageContainer.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ChatMessage } from '~~/types'
-import { ChatSender, ChatState, ChatType } from '~~/types'
+import { ChatSender } from '~~/types'
 
 const props = defineProps<{
   message: ChatMessage
@@ -10,11 +10,12 @@ const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
 
 const { t, locale, locales } = useI18n()
 const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
-const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
+const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
 </script>
 
 <template>
-  <div v-if="!isArthur" class="group flex flex-col gap-2 duration-200">
+  <ChatMessageFromArthur v-if="isArthur" :message="props.message" />
+  <div v-else class="group flex flex-col gap-2 duration-200">
     <div class="flex flex-col-reverse md:flex-row-reverse items-end">
       <UCard
         variant="solid"
@@ -25,87 +26,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
       </UCard>
     </div>
     <div class="text-muted opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-end">
-      {{ formatted }}
+      {{ formatDate }}
-    </div>
-  </div>
-  <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"
-        variant="soft"
-        class="mt-1 w-full bg-transparent"
-        :ui="{ body: 'p-0 sm:p-0', header: 'p-0 sm:p-0', footer: 'p-0 sm:p-0' }"
-      >
-        <ChatLoading :fetch-states="message.fetchStates" :message-id="message.id" />
-      </UCard>
-      <UCard
-        v-else
-        variant="soft"
-        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">
-          {{ t(message.content || '') }}
-        </div>
-        <div v-else-if="message.type === ChatType.DUPLICATED">
-          <ToolDuplicated />
-        </div>
-        <div v-else-if="message.type === ChatType.THEME">
-          <ToolTheme />
-        </div>
-        <div v-else-if="message.type === ChatType.HARDWARE">
-          <ToolUses category="hardware" />
-        </div>
-        <div v-else-if="message.type === ChatType.SOFTWARE">
-          <ToolUses category="software" />
-        </div>
-        <div v-else-if="message.type === ChatType.HOMELAB">
-          <ToolUses category="homelab" />
-        </div>
-        <div v-else-if="message.type === ChatType.IDE">
-          <ToolUses category="ide" />
-        </div>
-        <div v-else-if="message.type === ChatType.LANGUAGE">
-          <ToolLanguage />
-        </div>
-        <div v-else-if="message.type === ChatType.STATS">
-          <ToolStats />
-        </div>
-        <div v-else-if="message.type === ChatType.ACTIVITY">
-          <ToolActivity />
-        </div>
-        <div v-else-if="message.type === ChatType.CONTACT">
-          <ToolContact />
-        </div>
-        <div v-else-if="message.type === ChatType.WEATHER">
-          <ToolWeather />
-        </div>
-        <div v-else-if="message.type === ChatType.LOCATION">
-          <ToolLocation />
-        </div>
-        <div v-else-if="message.type === ChatType.SKILLS">
-          <ToolSkills />
-        </div>
-        <div v-else-if="message.type === ChatType.PROJECTS">
-          <ToolProjects />
-        </div>
-        <div v-else-if="message.type === ChatType.WRITINGS">
-          <ToolWritings />
-        </div>
-        <div v-else-if="message.type === ChatType.HOBBIES">
-          <ToolHobbies />
-        </div>
-        <div v-else>
-          {{ message }}
-        </div>
-      </UCard>
-      <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">
-      {{ formatted }}
     </div>
   </div>
 </template>

app/components/chat/MessageFromArthur.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { ChatMessage } from '~~/types'
+import { ChatState, ChatType } from '~~/types'
+import ToolActivity from '~/components/tool/Activity.vue'
+import ToolContact from '~/components/tool/Contact.vue'
+import ToolDuplicated from '~/components/tool/Duplicated.vue'
+import ToolHobbies from '~/components/tool/Hobbies.vue'
+import ToolLanguage from '~/components/tool/Language.vue'
+import ToolLocation from '~/components/tool/Location.vue'
+import ToolProjects from '~/components/tool/Projects.vue'
+import ToolSkills from '~/components/tool/Skills.vue'
+import ToolStats from '~/components/tool/Stats.vue'
+import ToolTheme from '~/components/tool/Theme.vue'
+import ToolUsesProxy from '~/components/tool/UsesProxy.vue'
+import ToolWeather from '~/components/tool/Weather.vue'
+import ToolWritings from '~/components/tool/Writings.vue'
+
+const props = defineProps<{
+  message: ChatMessage
+}>()
+
+const { t, locale, locales } = useI18n()
+const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
+const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
+
+const componentMap: Record<ChatType, Component | undefined> = {
+  [ChatType.INIT]: undefined,
+  [ChatType.DUPLICATED]: ToolDuplicated,
+  [ChatType.THEME]: ToolTheme,
+  [ChatType.HARDWARE]: ToolUsesProxy,
+  [ChatType.SOFTWARE]: ToolUsesProxy,
+  [ChatType.HOMELAB]: ToolUsesProxy,
+  [ChatType.IDE]: ToolUsesProxy,
+  [ChatType.LANGUAGE]: ToolLanguage,
+  [ChatType.STATS]: ToolStats,
+  [ChatType.ACTIVITY]: ToolActivity,
+  [ChatType.CONTACT]: ToolContact,
+  [ChatType.WEATHER]: ToolWeather,
+  [ChatType.LOCATION]: ToolLocation,
+  [ChatType.SKILLS]: ToolSkills,
+  [ChatType.PROJECTS]: ToolProjects,
+  [ChatType.WRITINGS]: ToolWritings,
+  [ChatType.HOBBIES]: ToolHobbies,
+  [ChatType.ABOUT]: undefined,
+  [ChatType.EXPERIENCES]: undefined,
+  [ChatType.STATUS]: undefined,
+  [ChatType.CREDITS]: undefined,
+  [ChatType.RESUME]: undefined,
+}
+
+const dynamicComponent = computed(() => componentMap[props.message.type])
+</script>
+
+<template>
+  <div 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"
+        variant="soft"
+        class="mt-1 w-full bg-transparent"
+        :ui="{ body: 'p-0 sm:p-0', header: 'p-0 sm:p-0', footer: 'p-0 sm:p-0' }"
+      >
+        <ChatLoading :fetch-states="message.fetchStates" :message-id="message.id" />
+      </UCard>
+      <UCard
+        v-else
+        variant="soft"
+        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' }"
+      >
+        <component
+          :is="dynamicComponent"
+          v-if="dynamicComponent"
+          :type="message.type"
+        />
+        <div v-else-if="message.type === ChatType.INIT">
+          {{ t(message.content || '') }}
+        </div>
+        <div v-else>
+          {{ message }}
+        </div>
+      </UCard>
+      <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">
+      {{ formatDate }}
+    </div>
+  </div>
+</template>

app/components/tool/UsesProxy.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { ChatType } from '~~/types'
+
+const props = defineProps<{
+  type: ChatType
+}>()
+
+const category = computed(() => {
+  switch (props.type) {
+    case ChatType.HARDWARE:
+      return 'hardware'
+    case ChatType.SOFTWARE:
+      return 'software'
+    case ChatType.HOMELAB:
+      return 'homelab'
+    case ChatType.IDE:
+      return 'ide'
+    default:
+      return 'unknown'
+  }
+})
+</script>
+
+<template>
+  <ToolUses :category="category" />
+</template>

app/pages/canva.vue

@@ -7,7 +7,3 @@
     
   </div>
 </template>
-
-<style scoped>
-
-</style>

app/pages/index.vue

@@ -51,6 +51,7 @@ watch(
           sender: ChatSender.USER,
           state: ChatState.SENT,
           type: ChatType.INIT,
+          createdAt: new Date(),
         }"
       />
       <ChatMessageContainer
@@ -76,6 +77,7 @@ watch(
           sender: ChatSender.ARTHUR,
           state: ChatState.SENT,
           type: ChatType.INIT,
+          createdAt: new Date(),
         }"
       />
       <ChatMessageContainer

app/stores/chat.ts

@@ -32,6 +32,7 @@ export const useChatStore = defineStore('chat', () => {
         sender,
         state: ChatState.LOADING,
         fetchStates: [...fetchStates, ChatFetchState.DONE],
+        createdAt: new Date(),
       }
 
       messages.value.push(message)
@@ -44,6 +45,7 @@ export const useChatStore = defineStore('chat', () => {
         sender,
         state: ChatState.SENT,
         fetchStates: [ChatFetchState.DONE],
+        createdAt: new Date(),
       })
     }
   }

types/chat.ts

@@ -48,6 +48,7 @@ export interface ChatMessage {
   type: ChatType
   state: ChatState
   fetchStates?: ChatFetchState[]
+  createdAt: Date
 }
 
 export const ChatMessages = [