125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
const { agents } = await useAgents();
|
|
|
|
const taglines = {
|
|
morning: [
|
|
'crush your goals before breakfast',
|
|
'turn your productivity to 11',
|
|
'start your day like a boss',
|
|
'make it happen before noon',
|
|
'rise and grind, repeat',
|
|
'morning MVP, all day',
|
|
'fuel your fire early',
|
|
'own the first half of your day',
|
|
],
|
|
afternoon: [
|
|
'afternoon focus session',
|
|
'making afternoon moves',
|
|
'steady progress continues',
|
|
'keeping the flow going',
|
|
'afternoon productivity boost',
|
|
'momentum is building',
|
|
'making it happen today',
|
|
'afternoon hustle mode',
|
|
],
|
|
evening: [
|
|
'finish strong today',
|
|
'end on a high note',
|
|
'wrap it up like a pro',
|
|
'leave it all on the field',
|
|
"tomorrow's success starts tonight",
|
|
'last call for wins',
|
|
'close it out like a champion',
|
|
'seal the deal before bed',
|
|
],
|
|
};
|
|
|
|
const animatedText = ref('');
|
|
const currentTaglineIndex = ref(0);
|
|
const isDeleting = ref(false);
|
|
|
|
const typeWriter = (time: 'morning' | 'afternoon' | 'evening') => {
|
|
const currentTaglines = taglines[time];
|
|
const currentText = currentTaglines[currentTaglineIndex.value]!;
|
|
|
|
if (!isDeleting.value) {
|
|
animatedText.value = currentText.substring(0, animatedText.value.length + 1);
|
|
if (animatedText.value === currentText) {
|
|
isDeleting.value = true;
|
|
setTimeout(() => typeWriter(time), 2000);
|
|
return;
|
|
}
|
|
} else {
|
|
animatedText.value = currentText.substring(0, animatedText.value.length - 1);
|
|
if (animatedText.value === '') {
|
|
isDeleting.value = false;
|
|
currentTaglineIndex.value = (currentTaglineIndex.value + 1) % currentTaglines.length;
|
|
}
|
|
}
|
|
|
|
const baseDeleteSpeed = 80;
|
|
const speed = isDeleting.value
|
|
? baseDeleteSpeed * (0.5 + 0.25 * (animatedText.value.length / currentText.length))
|
|
: 100;
|
|
|
|
setTimeout(() => typeWriter(time), speed);
|
|
};
|
|
|
|
const handleChatSubmit = async (message: string, _model: unknown) => {
|
|
console.log('Message submitted:', message, agents);
|
|
await navigateTo(`/agent/${agents.value![0]!.id}`);
|
|
// TODO: Implement chat functionality
|
|
};
|
|
|
|
onMounted(() => {
|
|
let time: 'morning' | 'afternoon' | 'evening' = 'morning';
|
|
const now = new Date();
|
|
const hours = now.getHours();
|
|
|
|
if (hours < 12) {
|
|
time = 'morning';
|
|
} else if (hours < 22) {
|
|
time = 'afternoon';
|
|
} else {
|
|
time = 'evening';
|
|
}
|
|
|
|
// randomly select a tagline
|
|
currentTaglineIndex.value = Math.floor(Math.random() * taglines[time].length);
|
|
typeWriter(time);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
|
|
<h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span class="cursor"> </span></h1>
|
|
<div class="max-w-4xl h-full w-full">
|
|
<!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now. -->
|
|
<ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" @submit="handleChatSubmit" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.cursor {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 0.9em;
|
|
background-color: currentColor;
|
|
animation: blink 1s step-end infinite;
|
|
vertical-align: middle;
|
|
margin-left: 0.125rem;
|
|
}
|
|
|
|
@keyframes blink {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |