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

app/components/ChatInput.vue

@@ -4,6 +4,8 @@ import type { ModelWithProvider, ProviderWithModels } from '~/composables/useMod
 import type { Entity } from '@triplit/client';
 import { schema } from '#triplit/schema';
 
+const { allModels } = await useModels();
+
 const inputRef = ref<HTMLTextAreaElement | null>(null);
 let tempInput = '';
 const inputValue = ref('');
@@ -23,17 +25,6 @@ const props = defineProps<{
 // Model selection state
 const selectedModel = ref<ModelWithProvider | null>(null);
 
-// Get all available models from all providers
-const allModels = computed(() => {
-    if (!props.providers) return [];
-    return props.providers.flatMap((provider) =>
-        provider.models.map((model) => ({
-            ...model,
-            provider,
-        }))
-    );
-});
-
 // Initialize model selection based on agent's defaultModelId or first available
 const initializeModel = () => {
     if (selectedModel.value) return;
@@ -147,11 +138,12 @@ onBeforeMount(() => {
 
 onMounted(() => {
     inputValue.value = tempInput;
-    handleInput();
+    nextTick(() => {
+        handleInput();
+    });
 });
 </script>
 
-
 <template>
     <div :class="['w-full flex max-h-full', $attrs.class]">
         <div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-3 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--color-input)]
@@ -167,10 +159,10 @@ onMounted(() => {
             </div>
 
             <!-- Toolbar -->
-            <div class="flex items-center gap-2">
+            <div class="flex items-center justify-between gap-2">
                 <div class="flex-1">
-                    <ModelSelector v-if="providers && providers.length > 0" v-model="selectedModel"
-                        :providers="providers"></ModelSelector>
+                    <ModelSelector v-if="providers !== undefined" v-model="selectedModel" :providers="providers">
+                    </ModelSelector>
                 </div>
                 <!-- Send/Stop Button -->
                 <button aria-label="Send message" @click="handleSubmit" :disabled="!inputValue.trim() && !loading"