feat/optional key support

app/api/completion/route.ts

@@ -1,30 +1,48 @@
-import { createGoogleGenerativeAI } from '@ai-sdk/google';
-import { generateText } from 'ai';
-import { headers } from 'next/headers';
-import { NextResponse } from 'next/server';
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { createOpenAI } from "@ai-sdk/openai";
+import { generateText } from "ai";
+import { headers } from "next/headers";
+import { NextResponse } from "next/server";
 
 export async function POST(req: Request) {
   const headersList = await headers();
-  const googleApiKey = headersList.get('X-Google-API-Key');
+  const googleApiKey = headersList.get("X-Google-API-Key");
+  const openaiApiKey = headersList.get("X-OpenAI-API-Key");
+  const openrouterApiKey = headersList.get("X-OpenRouter-API-Key");
 
-  if (!googleApiKey) {
+  const { prompt, isTitle, messageId, threadId } = await req.json();
+
+  let model;
+
+  if (googleApiKey) {
+    const google = createGoogleGenerativeAI({
+      apiKey: googleApiKey,
+    });
+    model = google("gemini-2.5-flash-preview-04-17");
+  } else if (openaiApiKey) {
+    const openai = createOpenAI({
+      apiKey: openaiApiKey,
+    });
+    model = openai("gpt-4.1-mini");
+  } else if (openrouterApiKey) {
+    const openrouter = createOpenAI({
+      baseURL: "https://openrouter.ai/api/v1",
+      apiKey: openrouterApiKey,
+    });
+    model = openrouter("deepseek/deepseek-chat-v3-0324:free");
+  } else {
     return NextResponse.json(
       {
-        error: 'Google API key is required to enable chat title generation.',
+        error:
+          "At least one API key is required to enable chat title generation.",
       },
       { status: 400 }
     );
   }
 
-  const google = createGoogleGenerativeAI({
-    apiKey: googleApiKey,
-  });
-
-  const { prompt, isTitle, messageId, threadId } = await req.json();
-
   try {
     const { text: title } = await generateText({
-      model: google('gemini-2.5-flash-preview-04-17'),
+      model,
       system: `\n
       - you will generate a short title based on the first message a user begins a conversation with
       - ensure it is not more than 80 characters long
@@ -36,9 +54,9 @@ export async function POST(req: Request) {
 
     return NextResponse.json({ title, isTitle, messageId, threadId });
   } catch (error) {
-    console.error('Failed to generate title:', error);
+    console.error("Failed to generate title:", error);
     return NextResponse.json(
-      { error: 'Failed to generate title' },
+      { error: "Failed to generate title" },
       { status: 500 }
     );
   }

frontend/components/APIKeyForm.tsx

@@ -18,12 +18,16 @@ import { useAPIKeyStore } from '@/frontend/stores/APIKeyStore';
 import { Badge } from './ui/badge';
 
 const formSchema = z.object({
-  google: z.string().trim().min(1, {
-    message: 'Google API key is required for Title Generation',
-  }),
+  google: z.string().trim().optional(),
   openrouter: z.string().trim().optional(),
   openai: z.string().trim().optional(),
-});
+}).refine(
+  (data) => data.google || data.openrouter || data.openai,
+  {
+    message: 'At least one API key is required',
+    path: ['google'],
+  }
+);
 
 type FormValues = z.infer<typeof formSchema>;
 
@@ -81,7 +85,6 @@ const Form = () => {
         placeholder="AIza..."
         register={register}
         error={errors.google}
-        required
       />
 
       <ApiKeyField

frontend/components/ChatInput.tsx

@@ -23,6 +23,8 @@ import { v4 as uuidv4 } from 'uuid';
 import { StopIcon } from './ui/icons';
 import { toast } from 'sonner';
 import { useMessageSummary } from '../hooks/useMessageSummary';
+import { useAutoSelectModel } from '../hooks/useAutoSelectModel';
+import { useTitleLoadingStore } from '../stores/TitleLoadingStore';
 
 interface ChatInputProps {
   threadId: string;
@@ -59,6 +61,7 @@ function PureChatInput({
   stop,
 }: ChatInputProps) {
   const canChat = useAPIKeyStore((state) => state.hasRequiredKeys());
+  useAutoSelectModel();
 
   const { textareaRef, adjustHeight } = useAutoResizeTextarea({
     minHeight: 72,

frontend/components/ChatSidebar.tsx

@@ -13,14 +13,16 @@ import { Button, buttonVariants } from './ui/button';
 import { deleteThread, getThreads } from '@/frontend/dexie/queries';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { Link, useNavigate, useParams } from 'react-router';
-import { X } from 'lucide-react';
+import { X, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { memo } from 'react';
+import { useTitleLoadingStore } from '@/frontend/stores/TitleLoadingStore';
 
 export default function ChatSidebar() {
   const { id } = useParams();
   const navigate = useNavigate();
   const threads = useLiveQuery(() => getThreads(), []);
+  const isLoading = useTitleLoadingStore((state) => state.isLoading);
 
   return (
     <Sidebar>
@@ -45,7 +47,12 @@ export default function ChatSidebar() {
                           navigate(`/chat/${thread.id}`);
                         }}
                       >
-                        <span className="truncate block">{thread.title}</span>
+                        <span className="truncate block flex items-center gap-2">
+                          {thread.title}
+                          {isLoading(thread.id) && (
+                            <Loader2 className="h-3 w-3 animate-spin shrink-0" />
+                          )}
+                        </span>
                         <Button
                           variant="ghost"
                           size="icon"

frontend/hooks/useAutoSelectModel.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useAPIKeyStore } from '@/frontend/stores/APIKeyStore';
+import { useModelStore } from '@/frontend/stores/ModelStore';
+import { AI_MODELS, getModelConfig } from '@/lib/models';
+
+export const useAutoSelectModel = () => {
+  const getKey = useAPIKeyStore((state) => state.getKey);
+  const { selectedModel, setModel } = useModelStore();
+
+  useEffect(() => {
+    // Check if the currently selected model has a valid API key
+    const currentModelConfig = getModelConfig(selectedModel);
+    const currentApiKey = getKey(currentModelConfig.provider);
+
+    if (!currentApiKey) {
+      // Find the first model with an available API key
+      const firstAvailableModel = AI_MODELS.find((model) => {
+        const modelConfig = getModelConfig(model);
+        const apiKey = getKey(modelConfig.provider);
+        return !!apiKey;
+      });
+
+      if (firstAvailableModel && firstAvailableModel !== selectedModel) {
+        setModel(firstAvailableModel);
+      }
+    }
+  }, [getKey, selectedModel, setModel]);
+};

frontend/hooks/useMessageSummary.ts

@@ -1,7 +1,9 @@
-import { useCompletion } from '@ai-sdk/react';
-import { useAPIKeyStore } from '@/frontend/stores/APIKeyStore';
-import { toast } from 'sonner';
-import { createMessageSummary, updateThread } from '@/frontend/dexie/queries';
+import { useCompletion } from "@ai-sdk/react";
+import { useAPIKeyStore } from "@/frontend/stores/APIKeyStore";
+import { toast } from "sonner";
+import { createMessageSummary, updateThread } from "@/frontend/dexie/queries";
+import { useTitleLoadingStore } from "@/frontend/stores/TitleLoadingStore";
+import { getProviderHeaderKey } from "@/lib/models";
 
 interface MessageSummaryPayload {
   title: string;
@@ -11,13 +13,20 @@ interface MessageSummaryPayload {
 }
 
 export const useMessageSummary = () => {
-  const getKey = useAPIKeyStore((state) => state.getKey);
+  const getFirstAvailableKey = useAPIKeyStore(
+    (state) => state.getFirstAvailableKey
+  );
+  const setLoading = useTitleLoadingStore((state) => state.setLoading);
+
+  const availableKey = getFirstAvailableKey();
 
   const { complete, isLoading } = useCompletion({
-    api: '/api/completion',
-    ...(getKey('google') && {
-      headers: { 'X-Google-API-Key': getKey('google')! },
-    }),
+    api: "/api/completion",
+    headers: availableKey
+      ? {
+          [getProviderHeaderKey(availableKey.provider)]: availableKey.key,
+        }
+      : {},
     onResponse: async (response) => {
       try {
         const payload: MessageSummaryPayload = await response.json();
@@ -28,20 +37,33 @@ export const useMessageSummary = () => {
           if (isTitle) {
             await updateThread(threadId, title);
             await createMessageSummary(threadId, messageId, title);
+            setLoading(threadId, false);
           } else {
             await createMessageSummary(threadId, messageId, title);
           }
         } else {
-          toast.error('Failed to generate a summary for the message');
+          toast.error("Failed to generate a summary for the message");
         }
       } catch (error) {
         console.error(error);
       }
     },
   });
 
+  const completeWithLoading = (
+    prompt: string,
+    options: {
+      body: { threadId: string; messageId: string; isTitle?: boolean };
+    }
+  ) => {
+    if (options.body.isTitle) {
+      setLoading(options.body.threadId, true);
+    }
+    return complete(prompt, options);
+  };
+
   return {
-    complete,
+    complete: completeWithLoading,
     isLoading,
   };
 };

frontend/stores/APIKeyStore.ts

@@ -11,6 +11,7 @@ type APIKeyStore = {
   setKeys: (newKeys: Partial<APIKeys>) => void;
   hasRequiredKeys: () => boolean;
   getKey: (provider: Provider) => string | null;
+  getFirstAvailableKey: () => { provider: Provider; key: string } | null;
 };
 
 type StoreWithPersist = Mutate<
@@ -48,13 +49,22 @@ export const useAPIKeyStore = create<APIKeyStore>()(
       },
 
       hasRequiredKeys: () => {
-        return !!get().keys.google;
+        const keys = get().keys;
+        return !!keys.google || !!keys.openrouter || !!keys.openai;
       },
 
       getKey: (provider) => {
         const key = get().keys[provider];
         return key ? key : null;
       },
+
+      getFirstAvailableKey: () => {
+        const keys = get().keys;
+        if (keys.google) return { provider: 'google' as Provider, key: keys.google };
+        if (keys.openai) return { provider: 'openai' as Provider, key: keys.openai };
+        if (keys.openrouter) return { provider: 'openrouter' as Provider, key: keys.openrouter };
+        return null;
+      },
     }),
     {
       name: 'api-keys',

frontend/stores/TitleLoadingStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+
+type TitleLoadingStore = {
+  loadingThreads: Set<string>;
+  setLoading: (threadId: string, isLoading: boolean) => void;
+  isLoading: (threadId: string) => boolean;
+};
+
+export const useTitleLoadingStore = create<TitleLoadingStore>((set, get) => ({
+  loadingThreads: new Set(),
+
+  setLoading: (threadId, isLoading) => {
+    set((state) => {
+      const newSet = new Set(state.loadingThreads);
+      if (isLoading) {
+        newSet.add(threadId);
+      } else {
+        newSet.delete(threadId);
+      }
+      return { loadingThreads: newSet };
+    });
+  },
+
+  isLoading: (threadId) => {
+    return get().loadingThreads.has(threadId);
+  },
+}));