mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 20:59:51 +01:00
Arthur DANJOU
3fa4f574d3
- 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.
61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<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 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 scoped>
|
|
.animate-shine {
|
|
animation: shine 2s linear infinite;
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
background-position: -200% center;
|
|
}
|
|
100% {
|
|
background-position: 200% center;
|
|
}
|
|
}
|
|
</style>
|