mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 15:54:03 +01:00
refactor: update ESLint configuration and remove unused dependencies
- Replaced Nuxt ESLint configuration with Antfu's ESLint config. - Removed 'nuxt-visitors' module from Nuxt configuration. - Added linting scripts to package.json for easier code quality checks. - Introduced a new API endpoint for fetching weather data from OpenWeather. - Enhanced chat types with new enums and properties for better state management. - Added OpenWeather response types for improved type safety. - Updated social links in types/index.ts to include an email contact.
This commit is contained in:
@@ -1,108 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import type { CommandPaletteItem } from '@nuxt/ui'
|
||||
import { ChatState } from '~~/types'
|
||||
|
||||
const searchTerm = ref('')
|
||||
const open = ref(false)
|
||||
const openMessageModal = ref(false)
|
||||
const openClearModal = ref(false)
|
||||
|
||||
const { t } = useI18n({ useScope: 'local' })
|
||||
|
||||
const messages = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: t('chat.theme.label'),
|
||||
kbds: ['T'],
|
||||
icon: 'i-ph-lightbulb-filament-duotone',
|
||||
prompt: t('chat.theme.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.language.label'),
|
||||
kbds: ['L'],
|
||||
icon: 'i-ph-translate-duotone',
|
||||
prompt: t('chat.language.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.activity.label'),
|
||||
icon: 'i-ph-activity',
|
||||
prompt: t('chat.activity.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.about.label'),
|
||||
icon: 'i-ph-person-arms-spread-duotone',
|
||||
prompt: t('chat.about.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.projects.label'),
|
||||
icon: 'i-ph-code-duotone',
|
||||
prompt: t('chat.projects.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.writings.label'),
|
||||
icon: 'i-ph-books-duotone',
|
||||
prompt: t('chat.writings.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.experiences.label'),
|
||||
icon: 'i-ph-briefcase-duotone',
|
||||
prompt: t('chat.experiences.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.skills.label'),
|
||||
icon: 'i-ph-rocket-duotone',
|
||||
prompt: t('chat.skills.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.stack.label'),
|
||||
icon: 'i-ph-stack-duotone',
|
||||
prompt: t('chat.stack.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.status.label'),
|
||||
icon: 'i-ph-warning-duotone',
|
||||
prompt: t('chat.status.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.resume.label'),
|
||||
icon: 'i-ph-address-book-duotone',
|
||||
prompt: t('chat.resume.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.contact.label'),
|
||||
icon: 'i-ph-envelope-duotone',
|
||||
prompt: t('chat.contact.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.hobbies.label'),
|
||||
icon: 'i-ph-heart-duotone',
|
||||
prompt: t('chat.hobbies.prompt'),
|
||||
},
|
||||
{
|
||||
label: t('chat.credits.label'),
|
||||
icon: 'i-ph-star-duotone',
|
||||
prompt: t('chat.credits.prompt'),
|
||||
},
|
||||
]
|
||||
})
|
||||
const { messages, submitMessage } = useChat(t)
|
||||
|
||||
function onSelect(event: any) {
|
||||
const { clearMessages, messages: storeMessages } = useChatStore()
|
||||
const loading = computed(() => storeMessages.some(msg => msg.state === ChatState.LOADING))
|
||||
function handleDelete() {
|
||||
clearMessages()
|
||||
openClearModal.value = false
|
||||
}
|
||||
|
||||
function onSelect(item: CommandPaletteItem) {
|
||||
searchTerm.value = ''
|
||||
open.value = false
|
||||
// send Message
|
||||
openMessageModal.value = false
|
||||
submitMessage(item.type, item.prompt, item.fetchStates ?? [])
|
||||
}
|
||||
defineShortcuts({
|
||||
meta_enter: () => {
|
||||
open.value = !open.value
|
||||
openMessageModal.value = !openMessageModal.value
|
||||
},
|
||||
meta_d: () => {
|
||||
openClearModal.value = !openClearModal.value
|
||||
},
|
||||
})
|
||||
|
||||
const modalUi = {
|
||||
content: 'bg-default-30 dark:bg-default/70 backdrop-blur-xl border border-accented/70 max-w-2xl h-100 flex flex-col shadow-raycast',
|
||||
}
|
||||
|
||||
const commandPaletteUi = {
|
||||
root: 'flex flex-col h-full',
|
||||
label: 'text-muted font-medium',
|
||||
item: 'data-highlighted:not-data-disabled:before:bg-muted',
|
||||
content: 'flex-1 overflow-y-auto',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="fixed bottom-0 left-1/2 z-50 -translate-x-1/2 pb-4">
|
||||
<nav class="fixed bottom-0 left-1/2 z-50 -translate-x-1/2 pb-8">
|
||||
<UFieldGroup>
|
||||
<UModal v-model:open="open">
|
||||
<UModal v-model:open="openMessageModal" :ui="modalUi">
|
||||
<UButton
|
||||
:label="t('buttons.new')"
|
||||
:label="loading ? t('cmd.sending') : t('cmd.send')"
|
||||
variant="solid"
|
||||
color="neutral"
|
||||
size="xl"
|
||||
icon="i-ph-paper-plane-tilt-duotone"
|
||||
class="rounded-full"
|
||||
:disabled="loading"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd value="meta" />
|
||||
@@ -112,13 +64,26 @@ defineShortcuts({
|
||||
|
||||
<template #content>
|
||||
<UCommandPalette
|
||||
v-model:search-term="searchTerm"
|
||||
close
|
||||
:placeholder="t('buttons.new')"
|
||||
:groups="[{ id: 'messages', items: messages }]"
|
||||
:ui="commandPaletteUi"
|
||||
:groups="messages"
|
||||
@update:model-value="onSelect"
|
||||
@update:open="open = $event"
|
||||
@update:open="openMessageModal = $event"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<div class="relative flex items-center justify-between w-full p-1">
|
||||
<div class="absolute inset-0 -m-1" />
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<UIcon :name="item.icon!" size="20" />
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-muted text-xs font-medium">
|
||||
{{ item.prompt }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
|
||||
@@ -134,13 +99,33 @@ defineShortcuts({
|
||||
</UCommandPalette>
|
||||
</template>
|
||||
</UModal>
|
||||
<UButton
|
||||
:label="t('buttons.clear')"
|
||||
variant="solid"
|
||||
color="error"
|
||||
leading-icon="i-ph-trash-duotone"
|
||||
size="xl"
|
||||
/>
|
||||
<UModal
|
||||
v-model:open="openClearModal"
|
||||
:title="t('clear.title')"
|
||||
:description="t('clear.description')"
|
||||
>
|
||||
<UButton
|
||||
:label="t('clear.button')"
|
||||
variant="solid"
|
||||
color="error"
|
||||
leading-icon="i-ph-trash-duotone"
|
||||
size="xl"
|
||||
class="rounded-full"
|
||||
:disabled="storeMessages.length === 0"
|
||||
>
|
||||
<template #trailing>
|
||||
<UKbd value="meta" />
|
||||
<UKbd value="D" />
|
||||
</template>
|
||||
</UButton>
|
||||
|
||||
<template #footer="{ close }">
|
||||
<UFieldGroup>
|
||||
<UButton :label="t('clear.cancel')" color="neutral" variant="outline" @click="close" />
|
||||
<UButton :label="t('clear.submit')" color="error" @click.prevent="handleDelete()" />
|
||||
</UFieldGroup>
|
||||
</template>
|
||||
</UModal>
|
||||
</UFieldGroup>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -148,60 +133,261 @@ defineShortcuts({
|
||||
<i18n lang="json">
|
||||
{
|
||||
"en": {
|
||||
"buttons": {
|
||||
"new": "Send new message",
|
||||
"clear": "Clear conversation"
|
||||
"clear": {
|
||||
"button": "Clear",
|
||||
"cancel": "Cancel",
|
||||
"submit": "Delete",
|
||||
"title": "Are you sure you want to delete this conversation?",
|
||||
"description": "This action cannot be undone."
|
||||
},
|
||||
"cmd": {
|
||||
"send": "Send message"
|
||||
"send": "Send message",
|
||||
"sending": "Sending..."
|
||||
},
|
||||
"chat": {
|
||||
"theme": {
|
||||
"label": "Switch Theme",
|
||||
"prompt": ""
|
||||
},
|
||||
"language": {
|
||||
"label": "Change Language",
|
||||
"prompt": ""
|
||||
}
|
||||
"action": "Components",
|
||||
"arthur": "More about Arthur",
|
||||
"interface": "Change the interface",
|
||||
"theme": {
|
||||
"label": "Change theme",
|
||||
"prompt": "How can I change the theme?"
|
||||
},
|
||||
"stats": {
|
||||
"label": "View statistics",
|
||||
"prompt": "How can I view the statistics concerning Arthur?"
|
||||
},
|
||||
"weather": {
|
||||
"label": "View weather",
|
||||
"prompt": "How can I view the weather conditions near Arthur?"
|
||||
},
|
||||
"location": {
|
||||
"label": "View location",
|
||||
"prompt": "How can I view the location of Arthur?"
|
||||
},
|
||||
"language": {
|
||||
"label": "Change language",
|
||||
"prompt": "How can I change the chat language?"
|
||||
},
|
||||
"activity": {
|
||||
"label": "Activity",
|
||||
"prompt": "What are you currently doing?"
|
||||
},
|
||||
"about": {
|
||||
"label": "About Arthur",
|
||||
"prompt": "I want you to tell me about yourself."
|
||||
},
|
||||
"projects": {
|
||||
"label": "Projects",
|
||||
"prompt": "Tell me about your projects."
|
||||
},
|
||||
"writings": {
|
||||
"label": "Writings",
|
||||
"prompt": "What are your latest articles?"
|
||||
},
|
||||
"experiences": {
|
||||
"label": "Experiences",
|
||||
"prompt": "What experiences do you have in your career?"
|
||||
},
|
||||
"skills": {
|
||||
"label": "Skills",
|
||||
"prompt": "What are your skills?"
|
||||
},
|
||||
"stack": {
|
||||
"label": "Tech Stack",
|
||||
"prompt": "What tech stack are you currently using?"
|
||||
},
|
||||
"status": {
|
||||
"label": "Homelab status",
|
||||
"prompt": "I saw you have a homelab, is it currently working?"
|
||||
},
|
||||
"resume": {
|
||||
"label": "Resume",
|
||||
"prompt": "Can you send me your resume?"
|
||||
},
|
||||
"contact": {
|
||||
"label": "Contact",
|
||||
"prompt": "How can I contact you?"
|
||||
},
|
||||
"hobbies": {
|
||||
"label": "Hobbies and passions",
|
||||
"prompt": "What are your hobbies? Your passions? Your interests?"
|
||||
},
|
||||
"credits": {
|
||||
"label": "Credits",
|
||||
"prompt": "How is this chat made?"
|
||||
}
|
||||
}
|
||||
},
|
||||
"fr": {
|
||||
"buttons": {
|
||||
"new": "Envoyer un nouveau message",
|
||||
"clear": "Effacer la conversation"
|
||||
"clear": {
|
||||
"button": "Effacer",
|
||||
"cancel": "Annuler",
|
||||
"submit": "Supprimer",
|
||||
"title": "Êtes-vous sûr de vouloir supprimer cette conversation ?",
|
||||
"description": "Cette action ne peut pas être annulée."
|
||||
},
|
||||
"cmd": {
|
||||
"send": "Envoyer le message"
|
||||
"send": "Envoyer le message",
|
||||
"sending": "Envoi..."
|
||||
},
|
||||
"chat": {
|
||||
"action": "Composants",
|
||||
"arthur": "En savoir plus sur Arthur",
|
||||
"interface": "Changer l'interface",
|
||||
"theme": {
|
||||
"label": "Changer de thème",
|
||||
"prompt": ""
|
||||
"prompt": "Comment puis-je changer le thème ?"
|
||||
},
|
||||
"stats": {
|
||||
"label": "Voir les statistiques",
|
||||
"prompt": "Comment puis-je voir les statistiques concernant Arthur ?"
|
||||
},
|
||||
"weather": {
|
||||
"label": "Voir la météo",
|
||||
"prompt": "Comment puis-je voir les conditions météorologiques près d'Arthur ?"
|
||||
},
|
||||
"location": {
|
||||
"label": "Voir la localisation",
|
||||
"prompt": "Comment puis-je voir la localisation d'Arthur ?"
|
||||
},
|
||||
"language": {
|
||||
"label": "Changer de langue",
|
||||
"prompt": ""
|
||||
"prompt": "Comment puis-je changer la langue du chat ?"
|
||||
},
|
||||
"activity": {
|
||||
"label": "Activité",
|
||||
"prompt": "Que fais-tu actuellement ?"
|
||||
},
|
||||
"about": {
|
||||
"label": "A propos d'Arthur",
|
||||
"prompt": "Je veux que tu me parles de toi."
|
||||
},
|
||||
"projects": {
|
||||
"label": "Projets",
|
||||
"prompt": "Je veux que tu me parles de tes projets."
|
||||
},
|
||||
"writings": {
|
||||
"label": "Écrits",
|
||||
"prompt": "Quels sont tes derniers articles ?"
|
||||
},
|
||||
"experiences": {
|
||||
"label": "Expériences",
|
||||
"prompt": "Quelles expériences as-tu lors de ta carrière ?"
|
||||
},
|
||||
"skills": {
|
||||
"label": "Compétences",
|
||||
"prompt": "Quelles sont tes compétences ?"
|
||||
},
|
||||
"stack": {
|
||||
"label": "Tech Stack",
|
||||
"prompt": "Quelle est stack technique utilises-tu en ce moment ?"
|
||||
},
|
||||
"status": {
|
||||
"label": "Statut du homelab",
|
||||
"prompt": "J'ai vu que tu avais un homelab, est-il actuellement fonctionnel ?"
|
||||
},
|
||||
"resume": {
|
||||
"label": "CV",
|
||||
"prompt": "Peux-tu m'envoyer ton CV ?"
|
||||
},
|
||||
"contact": {
|
||||
"label": "Contact",
|
||||
"prompt": "Comment puis-je te contacter ?"
|
||||
},
|
||||
"hobbies": {
|
||||
"label": "Loisirs et passions",
|
||||
"prompt": "Quels sont tes loisirs ? Tes passions ? Tes intérêts ?"
|
||||
},
|
||||
"credits": {
|
||||
"label": "Crédits",
|
||||
"prompt": "Comment est réalisé ce chat ?"
|
||||
}
|
||||
}
|
||||
},
|
||||
"es": {
|
||||
"buttons": {
|
||||
"new": "Enviar un nuevo mensaje",
|
||||
"clear": "Borrar conversación"
|
||||
"clear": {
|
||||
"button": "Borrar",
|
||||
"cancel": "Cancelar",
|
||||
"submit": "Eliminar",
|
||||
"title": "¿Estás seguro de que deseas eliminar esta conversación?",
|
||||
"description": "Esta acción no se puede deshacer."
|
||||
},
|
||||
"cmd": {
|
||||
"send": "Enviar el mensaje"
|
||||
"send": "Enviar el mensaje",
|
||||
"sending": "Enviando..."
|
||||
},
|
||||
"chat": {
|
||||
"theme": {
|
||||
"label": "Cambiar tema",
|
||||
"prompt": ""
|
||||
},
|
||||
"language": {
|
||||
"label": "Cambiar idioma",
|
||||
"prompt": ""
|
||||
}
|
||||
"action": "Componentes",
|
||||
"arthur": "Más sobre Arthur",
|
||||
"interface": "Cambiar la interfaz",
|
||||
"theme": {
|
||||
"label": "Cambiar tema",
|
||||
"prompt": "¿Cómo puedo cambiar el tema?"
|
||||
},
|
||||
"stats": {
|
||||
"label": "Ver estadísticas",
|
||||
"prompt": "¿Cómo puedo ver las estadísticas sobre Arthur?"
|
||||
},
|
||||
"weather": {
|
||||
"label": "Ver el clima",
|
||||
"prompt": "¿Cómo puedo ver las condiciones climáticas cerca de Arthur?"
|
||||
},
|
||||
"location": {
|
||||
"label": "Ver ubicación",
|
||||
"prompt": "¿Cómo puedo ver la ubicación de Arthur?"
|
||||
},
|
||||
"language": {
|
||||
"label": "Cambiar idioma",
|
||||
"prompt": "¿Cómo puedo cambiar el idioma del chat?"
|
||||
},
|
||||
"activity": {
|
||||
"label": "Actividad",
|
||||
"prompt": "¿Qué estás haciendo actualmente?"
|
||||
},
|
||||
"about": {
|
||||
"label": "Sobre Arthur",
|
||||
"prompt": "Quiero que me hables de ti."
|
||||
},
|
||||
"projects": {
|
||||
"label": "Proyectos",
|
||||
"prompt": "Háblame de tus proyectos."
|
||||
},
|
||||
"writings": {
|
||||
"label": "Escritos",
|
||||
"prompt": "¿Cuáles son tus últimos artículos?"
|
||||
},
|
||||
"experiences": {
|
||||
"label": "Experiencias",
|
||||
"prompt": "¿Qué experiencias tienes en tu carrera?"
|
||||
},
|
||||
"skills": {
|
||||
"label": "Habilidades",
|
||||
"prompt": "¿Cuáles son tus habilidades?"
|
||||
},
|
||||
"stack": {
|
||||
"label": "Stack tecnológico",
|
||||
"prompt": "¿Qué stack tecnológico estás usando actualmente?"
|
||||
},
|
||||
"status": {
|
||||
"label": "Estado del homelab",
|
||||
"prompt": "Vi que tienes un homelab, ¿está funcionando actualmente?"
|
||||
},
|
||||
"resume": {
|
||||
"label": "CV",
|
||||
"prompt": "¿Puedes enviarme tu CV?"
|
||||
},
|
||||
"contact": {
|
||||
"label": "Contacto",
|
||||
"prompt": "¿Cómo puedo contactarte?"
|
||||
},
|
||||
"hobbies": {
|
||||
"label": "Pasatiempos y pasiones",
|
||||
"prompt": "¿Cuáles son tus pasatiempos? ¿Tus pasiones? ¿Tus intereses?"
|
||||
},
|
||||
"credits": {
|
||||
"label": "Créditos",
|
||||
"prompt": "¿Cómo se ha hecho este chat?"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ChatFetchState } from '~~/types'
|
||||
import { ChatState } from '~~/types'
|
||||
|
||||
const props = defineProps<{ messageId: number, fetchStates: ChatFetchState[] }>()
|
||||
|
||||
const currentState = ref<ChatFetchState | undefined>(props.fetchStates[0] ?? undefined)
|
||||
|
||||
const { setLoadingState } = useChatStore()
|
||||
|
||||
onMounted(() => {
|
||||
let index = 0
|
||||
function nextState() {
|
||||
index++
|
||||
if (index < props.fetchStates.length) {
|
||||
const delay = Math.random() * 3000 + 500
|
||||
setTimeout(() => {
|
||||
currentState.value = props.fetchStates[index]
|
||||
nextState()
|
||||
}, delay)
|
||||
}
|
||||
else {
|
||||
setLoadingState(props.messageId, ChatState.SENT)
|
||||
}
|
||||
}
|
||||
if (props.fetchStates.length > 1) {
|
||||
nextState()
|
||||
}
|
||||
else {
|
||||
// If only one state, call setLoadingState immediately
|
||||
setLoadingState(props.messageId, ChatState.SENT)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-ph-spinner-duotone" class="animate-spin" />
|
||||
<span
|
||||
class="relative inline-block overflow-hidden animate-shine italic bg-[linear-gradient(110deg,#bfbfbf,35%,#000,50%,#bfbfbf,75%,#bfbfbf)] dark:bg-[linear-gradient(110deg,#404040,35%,#fff,50%,#404040,75%,#404040)] bg-[length:200%_100%] bg-clip-text text-transparent"
|
||||
>
|
||||
<slot>{{ currentState }}</slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style scoped>
|
||||
.animate-shine {
|
||||
animation: shine 2s linear infinite;
|
||||
}
|
||||
|
||||
</style>
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: -200% center;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
user?: 'user' | 'arthur'
|
||||
}>(), {
|
||||
user: 'user',
|
||||
})
|
||||
import type { ChatMessage } from '~~/types'
|
||||
import { ChatSender, ChatState, ChatType } from '~~/types'
|
||||
|
||||
const isArthur = computed(() => props.user === 'arthur')
|
||||
const props = defineProps<{
|
||||
message: ChatMessage
|
||||
}>()
|
||||
|
||||
const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
|
||||
|
||||
const { locale, locales } = useI18n({
|
||||
useScope: 'local',
|
||||
@@ -15,22 +16,69 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group flex flex-col gap-4">
|
||||
<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-300 md:max-w-3/4"
|
||||
:ui="{ body: 'sm:p-2', header: 'sm:p-2', footer: 'sm:p-2' }"
|
||||
>
|
||||
<div class="text-justify">
|
||||
{{ message.content }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
<div class="opacity-0 group-hover:opacity-80 duration-500 flex text-sm italic justify-end">
|
||||
{{ formatted }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex flex-col-reverse gap-4 items-start md:flex-row-reverse">
|
||||
<UCard
|
||||
:variant="isArthur ? 'soft' : 'solid'"
|
||||
class="rounded-xl p-2 mt-1"
|
||||
:class="isArthur ? 'w-full bg-transparent !p-0' : 'bg-sky-300 md:max-w-3/4'"
|
||||
:ui="{ body: isArthur ? 'p-0 sm:p-0' : 'sm:p-2', header: isArthur ? 'p-0 sm:p-0' : 'sm:p-2', footer: isArthur ? 'p-0 sm:p-0' : 'sm:p-2' }"
|
||||
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' }"
|
||||
>
|
||||
<slot />
|
||||
<ChatLoading :fetch-states="message.fetchStates" :message-id="message.id" />
|
||||
</UCard>
|
||||
<div v-if="isArthur" class="flex items-center gap-2">
|
||||
<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.THEME">
|
||||
<ToolTheme />
|
||||
</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>
|
||||
{{ 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-100 duration-500 flex" :class="isArthur ? 'justify-start ml-12' : 'justify-end'">
|
||||
<div class="opacity-0 group-hover:opacity-80 duration-500 flex text-sm italic justify-start ml-12">
|
||||
{{ formatted }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
34
app/components/chat/Typing.vue
Normal file
34
app/components/chat/Typing.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
const children = ref<HTMLElement[]>([])
|
||||
const shown = ref<HTMLElement[]>([])
|
||||
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
|
||||
onMounted(async () => {
|
||||
if (!container.value)
|
||||
return
|
||||
|
||||
children.value = Array.from(container.value.children) as HTMLElement[]
|
||||
|
||||
for (const child of children.value) {
|
||||
shown.value.push(child)
|
||||
await new Promise(resolve => setTimeout(resolve, 400))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div ref="container" class="hidden">
|
||||
<slot />
|
||||
</div>
|
||||
<div>
|
||||
<component
|
||||
:is="el.tagName.toLowerCase()"
|
||||
v-for="(el, index) in shown"
|
||||
:key="index"
|
||||
v-html="el.innerHTML"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user