add loading state to settings screen

iansinnott · Dec 17, 2023 · f185ce3 · f185ce3
1 parent 89a1e98
commit f185ce3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/src/lib/components/SettingsModal.svelte b/src/lib/components/SettingsModal.svelte
@@ -15,6 +15,7 @@
   import { mapKeys, toCamelCase } from "$lib/utils";
   import CloseButton from "./CloseButton.svelte";
   import { env } from "$env/dynamic/public";
+  import { toast } from "$lib/toast";
 
   const versionString = env.PUBLIC_VERSION_STRING;
 
@@ -29,23 +30,38 @@
     dbName = getLatestDbName() || "";
   });
 
+  let modelsLoading = false;
+
   const updateAvailableModels = async () => {
     if ($chatModels.length) {
       console.debug("Already have models, but refetching for latest");
     }
 
-    const openai = getOpenAi();
-    const xs = await openai.models.list();
-    let _chatModels = xs.data;
-
-    // For OpenAI API v1, we only want models relevant to chat. i.e. no whisper, embedding models, etc
-    if ($openAiConfig.baseURL?.startsWith("https://api.openai.com/v1")) {
-      _chatModels = _chatModels.filter((x) => x.id.startsWith("gpt"));
+    modelsLoading = true;
+
+    try {
+      const openai = getOpenAi();
+      const xs = await openai.models.list();
+      let _chatModels = xs.data;
+
+      // For OpenAI API v1, we only want models relevant to chat. i.e. no whisper, embedding models, etc
+      if ($openAiConfig.baseURL?.startsWith("https://api.openai.com/v1")) {
+        _chatModels = _chatModels.filter((x) => x.id.startsWith("gpt"));
+      }
+
+      _chatModels.sort((a, b) => a.id.localeCompare(b.id));
+
+      $chatModels = _chatModels;
+    } catch (error) {
+      console.error("Error fetching models", error);
+      toast({
+        title: "Error fetching models",
+        message: error.message,
+        type: "error",
+      });
+    } finally {
+      modelsLoading = false;
     }
-
-    _chatModels.sort((a, b) => a.id.localeCompare(b.id));
-
-    $chatModels = _chatModels;
   };
 
   let showAdvanced = false;
@@ -112,6 +128,12 @@
             type="password"
             placeholder="sk-abc..."
             bind:value={$openAiConfig.apiKey}
+            on:blur={(e) => {
+              // Assume the API key was changed and refetch models
+              if (e.currentTarget.value) {
+                updateAvailableModels();
+              }
+            }}
           />
           <p class="leading-tight">
             <small>
@@ -139,7 +161,12 @@
         </div>
 
         <label for="a" class="label"> Model: </label>
-        <div class:info={$gptProfileStore.model === "gpt-4"}>
+        <div class="relative">
+          {#if modelsLoading}
+            <div class="absolute bg-gray-600 text-white top-2 inset-x-2 rounded px-2">
+              Loading...
+            </div>
+          {/if}
           <select id="a" class="input rounded w-full" bind:value={$gptProfileStore.model}>
             {#each $chatModels as model}
               <option value={model.id}>{model.id}</option>

diff --git a/src/lib/stores/stores.ts b/src/lib/stores/stores.ts
@@ -224,7 +224,7 @@ export const generateThreadTitle = async ({ threadId }: { threadId: string }) =>
   const messageContext = context.map((x) => ({ content: x.content, role: x.role }));
 
   const prompt: OpenAI.Chat.CompletionCreateParamsNonStreaming = {
-    model: get(gptProfileStore)?.model || "gpt-3.5-turbo", // Use custom model if present, else use turbo 3.5
+    model: get(gptProfileStore)?.model || "gpt-3.5-turbo-1106", // Use custom model if present, else use turbo 3.5
     temperature: 0.2, // Playing around with this value the lower value seems to be more accurate?
     messages: [
       ...messageContext,