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

feat: add tooltips for navigation and action buttons in CommandPalette; update localization files for new tooltip texts

Browse Source
This commit is contained in:
Arthur Danjou
2025-09-04 13:50:07 +02:00
parent b40546ed9f
commit 334bd93099
5 changed files with 136 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,6 +61,12 @@ function up() {
function down() {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
}
const toolTipContent = {
align: 'center',
side: 'top',
sideOffset: 0,
}
</script>
<template>
@@ -71,41 +77,64 @@ function down() {
<UCard variant="outline" class="rounded-xl shadow-lg w-full" :ui="{ body: 'p-2 sm:p-2 flex gap-2 w-full' }">
<ClientOnly>
<UFieldGroup v-if="active" class="flex items-center justify-center">
<UButton
icon="i-ph-arrow-fat-up-duotone"
color="neutral"
variant="outline"
class="cursor-pointer"
size="xl"
@click.prevent="up"
/>
<UButton
icon="i-ph-arrow-fat-down-duotone"
color="neutral"
variant="outline"
class="cursor-pointer"
size="xl"
@click.prevent="down"
/>
<UTooltip
:text="t('palette.tooltip.up')"
arrow
:content="toolTipContent"
:delay-duration="0"
>
<UButton
icon="i-ph-arrow-fat-up-duotone"
color="neutral"
variant="outline"
class="cursor-pointer"
size="xl"
@click.prevent="up"
/>
</UTooltip>
<UTooltip
:text="t('palette.tooltip.down')"
arrow
:content="toolTipContent"
:delay-duration="0"
>
<UButton
icon="i-ph-arrow-fat-down-duotone"
color="neutral"
variant="outline"
class="cursor-pointer"
size="xl"
@click.prevent="down"
/>
</UTooltip>
</UFieldGroup>
</ClientOnly>
<UFieldGroup class="w-full">
<UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
<UButton
:label="loading ? t('palette.cmd.sending') : t('palette.cmd.send')"
variant="outline"
color="neutral"
size="xl"
icon="i-ph-paper-plane-tilt-duotone"
class="rounded-lg cursor-pointer p-2 w-full justify-center"
:disabled="loading"
<UTooltip
:text="t('palette.tooltip.send')"
arrow
:content="toolTipContent"
:kbds="['enter']"
:delay-duration="0"
>
<template #trailing>
<div class="hidden md:flex px-2 items-center">
<UKbd value="enter" color="info" />
</div>
</template>
</UButton>
<UButton
:label="loading ? t('palette.cmd.sending') : t('palette.cmd.send')"
variant="outline"
color="neutral"
size="xl"
icon="i-ph-paper-plane-tilt-duotone"
class="rounded-lg cursor-pointer p-2 w-full justify-center"
:disabled="loading"
>
<template #trailing>
<div class="hidden md:flex px-2 items-center">
<UKbd value="enter" color="info" />
</div>
</template>
</UButton>
</UTooltip>
<template #content>
<UCommandPalette
@@ -156,15 +185,23 @@ function down() {
:title="t('palette.clear.title')"
:description="t('palette.clear.description')"
>
<UButton
variant="subtle"
color="error"
leading-icon="i-ph-trash-duotone"
size="xl"
class="rounded-lg"
:class="storeMessages.length !== 0 ? 'cursor-pointer' : 'cursor-default'"
:disabled="storeMessages.length === 0"
/>
<UTooltip
:text="t('palette.tooltip.clear')"
arrow
:content="toolTipContent"
:kbds="['meta', 'D']"
:delay-duration="0"
>
<UButton
variant="subtle"
color="error"
leading-icon="i-ph-trash-duotone"
size="xl"
class="rounded-lg"
:class="storeMessages.length !== 0 ? 'cursor-pointer' : 'cursor-default'"
:disabled="storeMessages.length === 0"
/>
</UTooltip>
<template #footer="{ close }">
<UFieldGroup>
@@ -175,23 +212,39 @@ function down() {
</UModal>
</UFieldGroup>
<ClientOnly>
<UFieldGroup class="flex items-center justify-center" :orientation="active ? 'horizontal' : 'vertical'">
<UButton
:icon="dark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
color="neutral"
variant="outline"
class="cursor-pointer"
size="xl"
@click.prevent="toggleDark"
/>
<UButton
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')"
/>
<UFieldGroup class="flex items-center justify-center">
<UTooltip
:text="t('palette.tooltip.theme')"
arrow
:content="toolTipContent"
:kbds="['T']"
:delay-duration="0"
>
<UButton
:icon="dark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
color="neutral"
variant="outline"
class="cursor-pointer"
size="xl"
@click.prevent="toggleDark"
/>
</UTooltip>
<UTooltip
:text="t('palette.tooltip.language')"
arrow
:content="toolTipContent"
:kbds="['L']"
:delay-duration="0"
>
<UButton
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')"
/>
</UTooltip>
</UFieldGroup>
</ClientOnly>
</UCard>

3
app/pages/index.vue
View File

@@ -47,6 +47,7 @@ watch(
<ChatMain />
<div ref="parents" class="space-y-4 my-32">
<ChatMessageContainer
:id="99999999998"
v-motion
:initial="{
opacity: 0,
@@ -71,6 +72,7 @@ watch(
}"
/>
<ChatMessageContainer
:id="99999999999"
v-motion
:initial="{
opacity: 0,
@@ -96,6 +98,7 @@ watch(
/>
<ChatMessageContainer
v-for="message in messages"
:id="message.id"
:key="message.id"
v-motion
:message="message"