Fix client-side crash when vLLM server is unavailable

.gitignore

@@ -36,4 +36,5 @@ yarn-error.log*
 next-env.d.ts
 
 # env
-.env
+.env
+package-lock.json

src/components/chat/chat-bottombar.tsx

@@ -44,7 +44,11 @@ export default function ChatBottombar({
 
   const [tokenLimit, setTokenLimit] = React.useState<number>(4096);
   React.useEffect(() => {
-    getTokenLimit(basePath).then((limit) => setTokenLimit(limit));
+    getTokenLimit(basePath)
+      .then((limit) => setTokenLimit(limit))
+      .catch((error) => {
+        console.error("Failed to get token limit:", error);
+      });
   }, [hasMounted]);
 
   const tokenCount = React.useMemo(

src/components/chat/chat-topbar.tsx

@@ -62,18 +62,25 @@ export default function ChatTopbar({
 
       const data = await res.json();
       // Extract the "name" field from each model object and store them in the state
+      if (!data.data || !Array.isArray(data.data) || data.data.length === 0) {
+        throw new Error("No models available from vLLM server");
+      }
       const modelNames = data.data.map((model: any) => model.id);
       // save the first and only model in the list as selectedModel in localstorage
       setChatOptions({ ...chatOptions, selectedModel: modelNames[0] });
     } catch (error) {
       setChatOptions({ ...chatOptions, selectedModel: undefined });
-      toast.error(error as string);
+      toast.error(error instanceof Error ? error.message : String(error));
     }
   };
 
   useEffect(() => {
     fetchData();
-    getTokenLimit(basePath).then((limit) => setTokenLimit(limit));
+    getTokenLimit(basePath)
+      .then((limit) => setTokenLimit(limit))
+      .catch((error) => {
+        console.error("Failed to get token limit:", error);
+      });
   }, [hasMounted]);
 
   if (!hasMounted) {

src/lib/token-counter.ts

@@ -1,16 +1,22 @@
 import { CoreMessage, Message } from "ai";
 import llama3Tokenizer from "llama3-tokenizer-js";
 
-export const getTokenLimit = async (basePath: string) => {
-  const res = await fetch(basePath + "/api/settings");
+const DEFAULT_TOKEN_LIMIT = 4096;
 
-  if (!res.ok) {
-    const errorResponse = await res.json();
-    const errorMessage = `Connection to vLLM server failed: ${errorResponse.error} [${res.status} ${res.statusText}]`;
-    throw new Error(errorMessage);
+export const getTokenLimit = async (basePath: string): Promise<number> => {
+  try {
+    const res = await fetch(basePath + "/api/settings");
+
+    if (!res.ok) {
+      console.error(`Failed to fetch settings: ${res.status} ${res.statusText}`);
+      return DEFAULT_TOKEN_LIMIT;
+    }
+    const data = await res.json();
+    return data.tokenLimit ?? DEFAULT_TOKEN_LIMIT;
+  } catch (error) {
+    console.error("Failed to fetch token limit:", error);
+    return DEFAULT_TOKEN_LIMIT;
   }
-  const data = await res.json();
-  return data.tokenLimit;
 };
 
 export const encodeChat = (messages: Message[] | CoreMessage[]): number => {