streaming, markdown, model selecting, and lots more

app/pages/index.vue

@@ -1,44 +1,40 @@
 <script setup lang="ts">
-const { user } = useAuth();
-
-if (user.value === null) {
-    navigateTo("/auth/login");
-}
+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"
+        '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"
+        '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",
+        '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"
-    ]
-}
+        'last call for wins',
+        'close it out like a champion',
+        'seal the deal before bed',
+    ],
+};
 
-const animatedText = ref("");
+const animatedText = ref('');
 const currentTaglineIndex = ref(0);
 const isDeleting = ref(false);
 
@@ -55,7 +51,7 @@ const typeWriter = (time: 'morning' | 'afternoon' | 'evening') => {
         }
     } else {
         animatedText.value = currentText.substring(0, animatedText.value.length - 1);
-        if (animatedText.value === "") {
+        if (animatedText.value === '') {
             isDeleting.value = false;
             currentTaglineIndex.value = (currentTaglineIndex.value + 1) % currentTaglines.length;
         }
@@ -69,22 +65,23 @@ const typeWriter = (time: 'morning' | 'afternoon' | 'evening') => {
     setTimeout(() => typeWriter(time), speed);
 };
 
-const handleChatSubmit = (message: string) => {
-    console.log('Message submitted:', message);
+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";
+    let time: 'morning' | 'afternoon' | 'evening' = 'morning';
     const now = new Date();
     const hours = now.getHours();
 
     if (hours < 12) {
-        time = "morning";
+        time = 'morning';
     } else if (hours < 22) {
-        time = "afternoon";
+        time = 'afternoon';
     } else {
-        time = "evening";
+        time = 'evening';
     }
 
     // randomly select a tagline
@@ -95,9 +92,34 @@ onMounted(() => {
 
 <template>
     <div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
-        <h1 class="text-center">{{ animatedText }}<span class="cursor">&nbsp;</span></h1>
+        <h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span class="cursor">&nbsp;</span></h1>
         <div class="max-w-4xl h-full w-full">
-            <ChatInput @submit="handleChatSubmit" />
+            <!-- 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>