Fix defaults

Author: kah-seng

webapp/_webapp/src/views/settings/sections/api-key-settings.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
 import { Modal } from "../../../components/modal";
 import { SettingsSectionContainer, SettingsSectionTitle } from "./components";
@@ -104,19 +104,31 @@ const CustomModelSection = ({ isNew, onChange, model: customModel }: CustomModel
   const { models } = useLanguageModels();
   const { settings } = useSettingStore();
 
+  var availableModels = models.filter((m) => !Array.from(settings?.customModels || []).some((cm) => cm.slug == m.slug));
+  var firstAvailable = availableModels[0] ?? { slug: "", name: "" };
+
   const [isEditing, setIsEditing] = useState(isNew);
   const [baseUrl, setBaseUrl] = useState(customModel?.baseUrl || "");
-  const [slug, setSlug] = useState(customModel?.slug || "");
+  const [slug, setSlug] = useState(customModel?.slug ?? firstAvailable.slug);
   const [apiKey, setApiKey] = useState(customModel?.apiKey || "");
   const [contextWindow, setContextWindow] = useState<number>(customModel?.contextWindow || 0);
   const [maxOutput, setMaxOutput] = useState<number>(customModel?.maxOutput || 0);
   const [inputPrice, setInputPrice] = useState<number>(customModel?.inputPrice || 0);
   const [outputPrice, setOutputPrice] = useState<number>(customModel?.outputPrice || 0);
-  const [modelName, setModelName] = useState(isNew ? models[0].name : customModel.name);
+  const [modelName, setModelName] = useState(isNew ? firstAvailable.name : customModel?.name || "");
   const isModelNameEdited = useRef(false);
 
+  useEffect(() => {
+    if (!isNew) return;
+    const firstAvailable = availableModels[0] ?? { slug: "", name: "" };
+    if (!isModelNameEdited.current) {
+      setModelName(firstAvailable.name);
+    }
+    setSlug(firstAvailable.slug);
+  }, [models?.length, settings?.customModels?.length, isNew]);
+
   const baseInputClassName = "hover:cursor-pointer bg-transparent p-1 focus:outline-none";
-  const nameInputClassName = `${baseInputClassName} text-sm text-default-900 font-medium`;
+  const nameInputClassName = `${baseInputClassName} text-sm text-default-900 font-medium flex-1 truncate`;
   const labelClassName = `${baseInputClassName} text-xs text-default-900 w-auto`;
   const detailInputClassName = `${baseInputClassName} text-xs text-default-400 font-normal flex-1`;
 
@@ -139,9 +151,11 @@ const CustomModelSection = ({ isNew, onChange, model: customModel }: CustomModel
     );
 
     if (isNew) {
-      setModelName(models[0].name);
+      availableModels = availableModels.filter((m) => m.slug != slug);
+      const next = availableModels[0] ?? { slug: "", name: "" };
+      setModelName(next.name);
       setBaseUrl("");
-      setSlug("");
+      setSlug(next.slug);
       setApiKey("");
       setContextWindow(0);
       setMaxOutput(0);
@@ -150,7 +164,6 @@ const CustomModelSection = ({ isNew, onChange, model: customModel }: CustomModel
     }
   };
 
-  // TODO: Multiple models per key
   return (
     <div className="flex flex-col w-full pl-1">
       <div className="flex flex-row justify-between">
@@ -167,7 +180,15 @@ const CustomModelSection = ({ isNew, onChange, model: customModel }: CustomModel
 
         {isNew ? (
           <Tooltip content="Add" placement="bottom" className="noselect" delay={500}>
-            <button onClick={() => handleOnChange(false)} className="p-1 hover:bg-default-100 rounded">
+            <button
+              onClick={() => {
+                if (availableModels.length > 0) {
+                  handleOnChange(false);
+                }
+              }}
+              className="p-1 hover:bg-default-100 rounded"
+              disabled={availableModels.length === 0}
+            >
               <Icon icon="tabler:device-floppy" width="16" />
             </button>
           </Tooltip>
@@ -203,23 +224,29 @@ const CustomModelSection = ({ isNew, onChange, model: customModel }: CustomModel
             disabled={!isEditing}
             onChange={(e) => {
               setSlug(e.target.value);
-              if (!isModelNameEdited.current) {
+              if (!isModelNameEdited.current && isNew) {
                 // Custom name not yet defined, default to the selected model's name
-                setModelName(models.filter((m) => m.slug == e.target.value)[0].name);
+                const m = availableModels.find((mo) => mo.slug == e.target.value);
+                if (m) setModelName(m.name);
               }
             }}
+            value={slug}
           >
-            {models
-              .filter(
-                (m) =>
-                  (!isNew && m.slug == slug) ||
-                  !Array.from(settings?.customModels || []).some((cm) => cm.slug == m.slug),
-              )
-              .map((m) => (
-                <option selected={slug == m.slug} key={m.slug} value={m.slug}>
-                  {m.slug}
+            {isNew ? (
+              availableModels.length > 0 ? (
+                availableModels.map((m) => (
+                  <option key={m.slug} value={m.slug}>
+                    {m.slug}
+                  </option>
+                ))
+              ) : (
+                <option disabled value="">
+                  No available models
                 </option>
-              ))}
+              )
+            ) : (
+              <option>{slug}</option>
+            )}
           </select>
         </div>