mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 18:59:54 +01:00
Arthur DANJOU
ff28b719de
- Added "View setup" command to the command palette in English, French, and Spanish. - Removed "Tech Stack" command from the command palette. - Updated MessageContainer to handle new "uses" message type. - Refactored chat.ts to use a new ChatMessages function for better organization. - Created new Uses.vue component to display a list of software and gadgets. - Added Item.vue and List.vue components for rendering individual items and categories. - Updated content configuration to include new skills and uses categories. - Added new JSON files for programming languages, frontend, backend, devops, and python frameworks. - Updated existing JSON files for homelab items with improved descriptions. - Removed obsolete stack JSON files.
93 lines
3.1 KiB
Vue
93 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import type { ChatMessage } from '~~/types'
|
|
import { ChatSender, ChatState, ChatType } from '~~/types'
|
|
|
|
const props = defineProps<{
|
|
message: ChatMessage
|
|
}>()
|
|
|
|
const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
|
|
|
|
const { locale, locales } = useI18n({
|
|
useScope: 'local',
|
|
})
|
|
const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value))
|
|
const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="!isArthur" class="group flex flex-col gap-4">
|
|
<div class="flex flex-col-reverse gap-4 md:flex-row-reverse items-end">
|
|
<UCard
|
|
variant="solid"
|
|
class="rounded-xl mt-1 bg-sky-500 md:max-w-3/4 text-white font-medium"
|
|
:ui="{ body: 'sm:p-2', header: 'sm:p-2', footer: 'sm:p-2' }"
|
|
>
|
|
{{ message.content }}
|
|
</UCard>
|
|
</div>
|
|
<div class="opacity-0 group-hover:opacity-80 duration-500 flex text-sm italic justify-end">
|
|
{{ formatted }}
|
|
</div>
|
|
</div>
|
|
<div v-else class="group space-y-2">
|
|
<div class="flex flex-col-reverse gap-4 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 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">
|
|
{{ 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.USES">
|
|
<ToolUses />
|
|
</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>
|
|
{{ message }}
|
|
</div>
|
|
</UCard>
|
|
<div class="flex items-center gap-2">
|
|
<UAvatar src="/arthur.webp" size="lg" />
|
|
<span class="md:hidden">Arthur DANJOU</span>
|
|
</div>
|
|
</div>
|
|
<div class="opacity-0 group-hover:opacity-80 duration-500 flex text-sm italic justify-start ml-12">
|
|
{{ formatted }}
|
|
</div>
|
|
</div>
|
|
</template>
|