Merge dev onto main

.env.example

@@ -7,3 +7,4 @@ NEXT_PUBLIC_TURN_CREDENTIAL=
 S3_URL=https://s3.b.solvro.pl
 OPENAI_API_KEY=your-openai-api-key
 ANTHROPIC_API_KEY=your-anthropic-api-key
+XAI_API_KEY=your-xai-api-key

package.json

@@ -26,6 +26,7 @@
     "@ai-sdk/anthropic": "^3.0.82",
     "@ai-sdk/openai": "^3.0.63",
     "@ai-sdk/react": "^3.0.184",
+    "@ai-sdk/xai": "^3.0.96",
     "@assistant-ui/react": "^0.14.5",
     "@assistant-ui/react-ai-sdk": "^1.3.26",
     "@assistant-ui/react-markdown": "^0.14.0",

src/app/ai/explain/route.ts

@@ -1,8 +1,10 @@
 import { streamText } from "ai";
+import type { LanguageModel } from "ai";
 
 import { env } from "@/env";
 import { resolveImages } from "@/lib/ai/images";
-import { chatModel } from "@/lib/ai/model";
+import { getChatModelForUser } from "@/lib/ai/model";
+import { isAiModel } from "@/lib/ai/models";
 import {
   buildQuestionExplanationSystemPrompt,
   buildQuestionExplanationUserPrompt,
@@ -20,7 +22,7 @@ import type { Question } from "@/types/quiz";
 export const maxDuration = 30;
 
 export async function POST(request: Request) {
-  if (!env.NEXT_PUBLIC_AI_ENABLED || env.OPENAI_API_KEY === undefined) {
+  if (!env.NEXT_PUBLIC_AI_ENABLED) {
     return new Response("AI is not configured", { status: 503 });
   }
 
@@ -42,8 +44,9 @@ export async function POST(request: Request) {
     return createRateLimitExceededResponse(rateLimitResult);
   }
 
-  const { question } = (await request.json()) as {
+  const { question, config } = (await request.json()) as {
     question?: Question;
+    config?: { modelName?: unknown };
   };
 
   if (question === undefined) {
@@ -53,8 +56,20 @@ export async function POST(request: Request) {
   const imageParts = await resolveImages(collectQuestionImages(question));
   const prompt = buildQuestionExplanationUserPrompt(question);
 
+  let model: LanguageModel;
+  try {
+    const aiModel = isAiModel(config?.modelName) ? config.modelName : undefined;
+    model = getChatModelForUser({
+      accountLevel: user.account_level,
+      requestedModel: aiModel,
+    });
+  } catch (error) {
+    console.error("Failed to resolve AI explanation model", error);
+    return new Response("AI model is not configured", { status: 503 });
+  }
+
   const result = streamText({
-    model: chatModel,
+    model,
     system: buildQuestionExplanationSystemPrompt(),
     prompt:
       imageParts.length > 0

src/app/ai/hint/route.ts

@@ -1,8 +1,10 @@
 import { streamText } from "ai";
+import type { LanguageModel } from "ai";
 
 import { env } from "@/env";
 import { resolveImages } from "@/lib/ai/images";
-import { chatModel } from "@/lib/ai/model";
+import { getChatModelForUser } from "@/lib/ai/model";
+import { isAiModel } from "@/lib/ai/models";
 import {
   buildQuestionHintSystemPrompt,
   buildQuestionHintUserPrompt,
@@ -20,7 +22,7 @@ import type { Question } from "@/types/quiz";
 export const maxDuration = 30;
 
 export async function POST(request: Request) {
-  if (!env.NEXT_PUBLIC_AI_ENABLED || env.OPENAI_API_KEY === undefined) {
+  if (!env.NEXT_PUBLIC_AI_ENABLED) {
     return new Response("AI is not configured", { status: 503 });
   }
 
@@ -42,8 +44,9 @@ export async function POST(request: Request) {
     return createRateLimitExceededResponse(rateLimitResult);
   }
 
-  const { question } = (await request.json()) as {
+  const { question, config } = (await request.json()) as {
     question?: Question;
+    config?: { modelName?: unknown };
   };
 
   if (question === undefined) {
@@ -53,8 +56,20 @@ export async function POST(request: Request) {
   const imageParts = await resolveImages(collectQuestionImages(question));
   const prompt = buildQuestionHintUserPrompt(question);
 
+  let model: LanguageModel;
+  try {
+    const aiModel = isAiModel(config?.modelName) ? config.modelName : undefined;
+    model = getChatModelForUser({
+      accountLevel: user.account_level,
+      requestedModel: aiModel,
+    });
+  } catch (error) {
+    console.error("Failed to resolve AI hint model", error);
+    return new Response("AI model is not configured", { status: 503 });
+  }
+
   const result = streamText({
-    model: chatModel,
+    model,
     system: buildQuestionHintSystemPrompt(),
     prompt:
       imageParts.length > 0

src/app/quiz/[quizId]/client.tsx

@@ -394,6 +394,7 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
               {showAi && showAiExplain && currentQuestion != null ? (
                 questionChecked ? (
                   <AiExplanationCard
+                    defaultAiModel={quiz.user_settings?.default_ai_model}
                     question={currentQuestion}
                     onClose={() => {
                       setShowAiExplain(false);
@@ -402,6 +403,7 @@ function QuizPageContent({ quizId }: { quizId: string }): React.JSX.Element {
                   />
                 ) : (
                   <AiHintCard
+                    defaultAiModel={quiz.user_settings?.default_ai_model}
                     question={currentQuestion}
                     onClose={() => {
                       setShowAiExplain(false);

src/components/ai/ai-explain-card.tsx

@@ -14,6 +14,7 @@ import { AiDisclaimer } from "@/components/ai/ai-disclaimer";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { resolveSelectableAiModel } from "@/lib/ai/models";
 import { cn } from "@/lib/utils";
 import type { Question } from "@/types/quiz";
 
@@ -87,10 +88,12 @@ interface CompletionState {
 /* eslint-disable react-you-might-not-need-an-effect/no-event-handler */
 function useQuestionCompletion({
   api,
+  defaultAiModel,
   question,
   onClose,
 }: {
   api: string;
+  defaultAiModel?: string | null;
   question: Question;
   onClose: () => void;
 }): CompletionState {
@@ -141,8 +144,15 @@ function useQuestionCompletion({
   const startCompletion = useCallback(() => {
     setRetryAfter(null);
     startedRef.current = true;
-    void complete("generate", { body: { question } });
-  }, [complete, question]);
+    void complete("generate", {
+      body: {
+        question,
+        config: {
+          modelName: resolveSelectableAiModel(defaultAiModel),
+        },
+      },
+    });
+  }, [complete, defaultAiModel, question]);
 
   const handleStart = useCallback(() => {
     if (retryAfter !== null && retryAfter > 0) {
@@ -288,12 +298,14 @@ function AiCardShell({
 }
 
 interface AiHintCardProps {
+  defaultAiModel?: string | null;
   question: Question;
   onClose: () => void;
   onAnswerHints?: (hints: AnswerHint[]) => void;
 }
 
 export function AiHintCard({
+  defaultAiModel,
   question,
   onClose,
   onAnswerHints,
@@ -303,6 +315,7 @@ export function AiHintCard({
   const { completion, isLoading, error, retryAfter, handleStart, stop } =
     useQuestionCompletion({
       api: "/ai/hint",
+      defaultAiModel,
       question,
       onClose,
     });
@@ -378,17 +391,20 @@ export function AiHintCard({
 }
 
 interface AiExplanationCardProps {
+  defaultAiModel?: string | null;
   question: Question;
   onClose: () => void;
 }
 
 export function AiExplanationCard({
+  defaultAiModel,
   question,
   onClose,
 }: AiExplanationCardProps) {
   const { completion, isLoading, error, retryAfter, handleStart, stop } =
     useQuestionCompletion({
       api: "/ai/explain",
+      defaultAiModel,
       question,
       onClose,
     });

src/components/ai/ai-model-provider-icon.tsx

@@ -1,4 +1,4 @@
-import { Anthropic, OpenAI } from "@lobehub/icons";
+import { Anthropic, Grok, OpenAI } from "@lobehub/icons";
 
 import type { AiModelProvider } from "@/lib/ai/models";
 
@@ -11,9 +11,15 @@ export function AiModelProviderIcon({
   className,
   provider,
 }: AiModelProviderIconProps) {
-  return provider === "Anthropic" ? (
-    <Anthropic aria-hidden="true" className={className} />
-  ) : (
-    <OpenAI aria-hidden="true" className={className} />
-  );
+  switch (provider) {
+    case "Anthropic": {
+      return <Anthropic aria-hidden="true" className={className} />;
+    }
+    case "xAI": {
+      return <Grok aria-hidden="true" className={className} />;
+    }
+    case "OpenAI": {
+      return <OpenAI aria-hidden="true" className={className} />;
+    }
+  }
 }

src/env.ts

@@ -8,6 +8,7 @@ export const env = createEnv({
     INTERNAL_API_KEY: z.string().min(1).optional(),
     OPENAI_API_KEY: z.string().min(1).optional(),
     ANTHROPIC_API_KEY: z.string().min(1).optional(),
+    XAI_API_KEY: z.string().min(1).optional(),
     AI_CHAT_RATE_LIMIT: z.coerce.number().default(10),
     AI_CHAT_RATE_WINDOW: z.coerce.number().default(60),
     AI_EXPLAIN_RATE_LIMIT: z.coerce.number().default(15),