mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 18:59:54 +01:00
feat: enhance chat message handling; add createdAt timestamp to messages and implement dynamic component rendering for various chat types
This commit is contained in:
@@ -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 }}
|
||||
</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 }}
|
||||
{{ formatDate }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
92
app/components/chat/MessageFromArthur.vue
Normal file
92
app/components/chat/MessageFromArthur.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user