feat: add better provider support, icons, regen, and a lot more

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { ModelWithProvider } from '~/composables/useModels';
+import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
 
 const route = useRoute();
+const pendingMessage = ref<Message | null>(null);
 
-const { createTopic, sendMessage } = useChat(route.params.id as string);
-const { getAgent } = await useAgents();
+const { createTopic, sendMessage, autoRename } = useChat(route.params.id as string);
+const { getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
 const { providers, unsubscribe: unsubscribeModels } = await useModels();
 
 const agent = computed(() => {
@@ -15,22 +16,49 @@ const agent = computed(() => {
     return getAgent(route.params.id)!;
 });
 
+if (!agent.value) navigateTo('/');
+
 const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
         return;
     }
 
+    const user = useAuth().user;
+    if (!user) {
+        console.error('No user');
+        return;
+    }
+
+    pendingMessage.value = {
+        id: '',
+        userId: user.value!.id,
+        topicId: null,
+        content: message,
+        role: 'user',
+        parts: [],
+        generation: null,
+        parentMessageId: null,
+        children: [],
+        generationId: null,
+        focusedIndex: null,
+        deleted: false,
+        createdAt: new Date(),
+    }
+
     const topic = await createTopic();
     if (!topic) throw new Error('Failed to create topic');
 
-    sendMessage(message, topic, [], agent.value!, model.provider, model);
+    autoRename(topic.id, message);
 
-    return navigateTo(`/agent/${route.params.id}/topic/${topic.id}`);
+    await navigateTo(`/agent/${route.params.id}/topic/${topic.id}`);
+
+    return sendMessage(message, topic, [], agent.value!, model.provider, model);
 };
 
 onUnmounted(() => {
-    unsubscribeModels?.()
+    unsubscribeAgents?.();
+    unsubscribeModels?.();
 });
 </script>
 
@@ -41,16 +69,22 @@ onUnmounted(() => {
         <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 class="flex h-full max-w-4xl w-full flex-col gap-2"
+                    :class="pendingMessage === null ? 'justify-end' : ''">
+                    <div v-if="pendingMessage === null">
+                        <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 class="opacity-70" v-else>
+                        <Message :message="pendingMessage" />
+                    </div>
                 </div>
             </div>
 
             <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>
+                        :providers="providers.filter(p => p.enabled)" @submit="handleSubmit"></ChatInput>
                 </div>
             </div>
         </div>