mirror of
https://github.com/ArthurDanjou/artagents.git
synced 2026-01-14 20:19:33 +01:00
Arthur DANJOU
c0b5539f12
- Introduced new API endpoints for chat management including posting and retrieving chat messages. - Implemented file upload and deletion functionalities for chat and other files. - Added utility functions for streaming text and loading chat data. - Created TypeScript types for models and agents used in the application. - Configured TypeScript settings for server and project. - Added favicon and workspace configuration for pnpm.
120 lines
2.6 KiB
Vue
120 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { AGENTS } from '~~/types'
|
|
|
|
const colorMode = useColorMode()
|
|
const isDark = ref(colorMode.value === 'dark')
|
|
watch(isDark, () => {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
})
|
|
|
|
const agentRoutes = AGENTS.map(item => ({
|
|
slug: item.slug,
|
|
name: item.name,
|
|
icon: item.icon,
|
|
to: `/${item.slug}`
|
|
}))
|
|
|
|
async function toggleTheme() {
|
|
document.body.style.animation = 'switch-on .5s'
|
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|
|
|
isDark.value = !isDark.value
|
|
document.body.style.animation = 'switch-off .5s'
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|
document.body.style.animation = ''
|
|
}
|
|
|
|
const router = useRouter()
|
|
defineShortcuts({
|
|
t: () => toggleTheme(),
|
|
backspace: () => router.back()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex md:items-center justify-between my-8 gap-2">
|
|
<NuxtLink
|
|
class="text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-white"
|
|
to="/"
|
|
>
|
|
Art'Agents
|
|
</NuxtLink>
|
|
<nav class="flex gap-2 items-center justify-end flex-wrap">
|
|
<UTooltip
|
|
v-for="agent in agentRoutes"
|
|
:key="agent.slug"
|
|
:text="agent.name"
|
|
:delay-duration="4"
|
|
>
|
|
<UButton
|
|
:icon="agent.icon"
|
|
:href="agent.to"
|
|
:aria-label="agent.name"
|
|
color="neutral"
|
|
size="sm"
|
|
variant="ghost"
|
|
/>
|
|
</UTooltip>
|
|
<UTooltip
|
|
:delay-duration="4"
|
|
text="Status page"
|
|
>
|
|
<UButton
|
|
icon="i-ph-warning-duotone"
|
|
target="_blank"
|
|
href="https://status.arthurdanjou.fr"
|
|
color="neutral"
|
|
size="sm"
|
|
variant="ghost"
|
|
/>
|
|
</UTooltip>
|
|
<USeparator
|
|
orientation="vertical"
|
|
class="h-6"
|
|
/>
|
|
<ClientOnly>
|
|
<UTooltip
|
|
:kbds="['T']"
|
|
text="Change theme"
|
|
class="cursor-pointer"
|
|
:delay-duration="4"
|
|
>
|
|
<UButton
|
|
:icon="isDark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
|
|
color="neutral"
|
|
aria-label="switch theme"
|
|
size="sm"
|
|
variant="ghost"
|
|
@click="toggleTheme()"
|
|
/>
|
|
</UTooltip>
|
|
</ClientOnly>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<style>
|
|
@keyframes switch-on {
|
|
0% {
|
|
filter: blur(0);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0.98);
|
|
filter: blur(3px);
|
|
}
|
|
}
|
|
|
|
@keyframes switch-off {
|
|
0% {
|
|
transform: scale(0.98);
|
|
filter: blur(3px);
|
|
}
|
|
100% {
|
|
filter: blur(0);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|