arthur/artchat
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artchat.git synced 2026-01-29 11:57:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Arthur Danjou
2025-09-04 10:38:57 +02:00
parent 6dbbd1b609
commit 313b8180c0
7 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/chat/CommandPalette.vue
View File

@@ -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')"
/>

8
app/components/chat/MessageContainer.vue
View File

@@ -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>