Multi model from api

chatsbt/src/lib/Chat.svelte

@@ -39,20 +39,24 @@
         <select
             class="select select-bordered join-item"
             bind:value={chatStore.model}
-            disabled={chatStore.loading}
+            disabled={chatStore.loading || chatStore.loadingModels}
         >
-            <option value="qwen/qwen3-235b-a22b-2507"
-                >qwen/qwen3-235b-a22b-2507</option
-            >
-            <option value="deepseek/deepseek-r1-0528"
-                >deepseek/deepseek-r1-0528</option
-            >
-            <option value="moonshotai/kimi-k2">moonshotai/kimi-k2</option>
+            {#if chatStore.loadingModels}
+                <option value="" disabled>Loading models...</option>
+            {:else if chatStore.models.length === 0}
+                <option value="" disabled>No model available</option>
+            {:else}
+                {#each chatStore.models as modelOption}
+                    <option value={modelOption.id || modelOption}>
+                        {modelOption.name || modelOption.id || modelOption}
+                    </option>
+                {/each}
+            {/if}
         </select>
         <button
             class="btn btn-primary ml-auto"
             onclick={chatStore.send}
-            disabled={!chatStore.input.trim()}
+            disabled={!chatStore.input.trim() || chatStore.models.length === 0}
         >
             {#if chatStore.loading}
                 <span class="loading loading-spinner loading-xs"></span>

chatsbt/src/lib/chatApi.svelte.js

@@ -22,3 +22,14 @@ export function openStream(chatId, messageId) {
     `${API}/chats/${chatId}/stream?message_id=${messageId}`,
   );
 }
+
+export async function fetchModels() {
+  try {
+    const response = await fetch(`${API}/models`);
+    const data = await response.json();
+    return data.models || [];
+  } catch (error) {
+    console.error('Failed to fetch models:', error);
+    return [];
+  }
+}

chatsbt/src/lib/chatStore.svelte.js

@@ -1,4 +1,4 @@
-import { createChat, sendUserMessage, openStream } from "./chatApi.svelte.js";
+import { createChat, sendUserMessage, openStream, fetchModels } from "./chatApi.svelte.js";
 
 const STORAGE_KEY = "chatHistory";
 
@@ -19,7 +19,9 @@ export const chatStore = (() => {
   let messages = $state([]);
   let loading = $state(false);
   let input = $state("");
-  let model = $state("qwen/qwen3-235b-a22b-2507");
+  let model = $state("qwen/qwen3-235b-a22b-2507"); // default
+  let models = $state([]);
+  let loadingModels = $state(true);
 
   // public helpers
   const history = $derived(loadHistory());
@@ -81,6 +83,17 @@ export const chatStore = (() => {
     });
   }
 
+  async function loadModels() {
+    loadingModels = true;
+    models = await fetchModels();
+    loadingModels = false;
+    
+    // Set default model if available and not already set
+    if (models.length > 0 && !model) {
+      model = models[0].id || models[0];
+    }
+  }
+
   function handleKey(e) {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -97,6 +110,9 @@ export const chatStore = (() => {
     selectChat(path);
   }
 
+  // Load models on initialization
+  loadModels();
+
   return {
     get chatId() {
       return chatId;
@@ -119,6 +135,12 @@ export const chatStore = (() => {
     set model(v) {
       model = v;
     },
+    get models() {
+      return models;
+    },
+    get loadingModels() {
+      return loadingModels;
+    },
     get history() {
       return loadHistory();
     },
@@ -126,5 +148,6 @@ export const chatStore = (() => {
     send,
     handleKey,
     createAndSelect,
+    loadModels,
   };
 })();