streaming, markdown, model selecting, and lots more

app/pages/agent/[id]/index.vue

@@ -1,37 +1,58 @@
 <script setup lang="ts">
-const { createTopic, fetchingTopics } = await useTopics();
-const { activeAgent } = await useAgents();
+import type { ModelWithProvider } from '~/composables/useModels';
 
-const creatingTopic = ref(false);
+const route = useRoute();
 
-const handleSubmit = async (message: string) => {
-    // create a new topic, and send the message to it
-    console.log('handleSubmit', message);
-    if (!activeAgent.value) return;
+const { createTopic, sendMessage } = useChat(route.params.id as string);
+const { getAgent } = await useAgents();
+const { providers, unsubscribe: unsubscribeModels } = await useModels();
 
-    creatingTopic.value = true
-    try {
-        const newTopic = await createTopic('New Topic', activeAgent.value.id)
-        // Navigate to the new topic
-        await navigateTo(`/agent/${activeAgent.value.id}/topic/${newTopic.id}`)
-    } catch (error) {
-        console.error('Failed to create topic:', error)
-    } finally {
-        creatingTopic.value = false
+const agent = computed(() => {
+    if (route.params.id === null || typeof route.params.id !== 'string') {
+        throw new Error('Invalid agent ID');
     }
-}
+
+    return getAgent(route.params.id)!;
+});
+
+const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
+    if (!model) {
+        console.error('No model selected');
+        return;
+    }
+
+    const topic = await createTopic();
+    if (!topic) throw new Error('Failed to create topic');
+
+    sendMessage(message, topic, [], agent.value!, model.provider, model);
+
+    return navigateTo(`/agent/${route.params.id}/topic/${topic.id}`);
+};
+
+onUnmounted(() => {
+    unsubscribeModels?.()
+});
 </script>
 
+
 <template>
-    <div class="flex h-full w-full pb-4 justify-center">
-        <div class="max-w-4xl h-full w-full flex flex-col">
-            <!-- chat pane -->
-            <div class="flex h-full flex-col gap-2 justify-end mb-28">
-                <h1 v-if="activeAgent" class="font-bold">{{ activeAgent.name }}</h1>
-                <p class="text-[var(--color-subtle)]">Select a topic to continue or create a new one</p>
+    <div class="h-full w-full">
+        <!-- chat pane -->
+        <div class="flex flex-col w-full px-4 overflow-y-auto h-full"
+            style="scrollbar-width: thin; scrollbar-color: #888 transparent;" ref="chatPane">
+            <div class="flex-grow w-full flex justify-center">
+                <div class="flex h-full max-w-4xl w-full flex-col gap-2 justify-end">
+                    <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
+                    <p class="mb-28 text-[var(--color-muted)]">Select a topic to continue or create a new one</p>
+                </div>
             </div>
 
-            <ChatInput @submit="handleSubmit" :loading="fetchingTopics" />
+            <div class="sticky max-h-full z-10 bottom-0 w-full flex justify-center">
+                <div class="pb-4 w-full max-w-4xl bg-[var(--color-neutral)] rounded-t-2xl">
+                    <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
+                        :providers="providers" @submit="handleSubmit"></ChatInput>
+                </div>
+            </div>
         </div>
     </div>
-</template>
+</template>