feat(model-picker): live discovery for Groq + GitHub Models (parallel to Google) — 'Quét live model' button per provider

app/api/github/models/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server"
+
+export const runtime = "edge"
+
+interface GitHubModel {
+  id: string
+  name: string
+  friendly_name?: string
+  publisher?: string
+  task?: string
+  summary?: string
+}
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json().catch(() => ({}))
+    const userKey = typeof body?.userKey === "string" ? body.userKey.trim() : ""
+    const apiKey = userKey || process.env.GITHUB_TOKEN
+    if (!apiKey) {
+      return NextResponse.json({ error: "Thiếu GITHUB_TOKEN. Cấu hình ở Cài đặt API keys." }, { status: 400 })
+    }
+
+    const res = await fetch("https://models.inference.ai.azure.com/models", {
+      headers: { Authorization: `Bearer ${apiKey}` },
+      cache: "no-store",
+    })
+    if (!res.ok) {
+      const text = await res.text()
+      return NextResponse.json({ error: `GitHub Models API ${res.status}: ${text.slice(0, 300)}` }, { status: 502 })
+    }
+    const all = (await res.json()) as GitHubModel[]
+
+    // Chỉ giữ chat-completion. Bỏ embedding / image / audio / rerank.
+    const chatModels = (Array.isArray(all) ? all : [])
+      .filter((m) => m.task === "chat-completion")
+      .map((m) => ({ id: m.name, friendlyName: m.friendly_name, publisher: m.publisher, summary: m.summary }))
+      .sort((a, b) => a.id.localeCompare(b.id))
+
+    return NextResponse.json({ models: chatModels, totalRaw: Array.isArray(all) ? all.length : 0 })
+  } catch (err) {
+    return NextResponse.json({ error: err instanceof Error ? err.message : String(err) }, { status: 500 })
+  }
+}

app/api/groq/models/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server"
+
+export const runtime = "edge"
+
+interface GroqModel {
+  id: string
+  context_window?: number
+  active?: boolean
+  owned_by?: string
+}
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json().catch(() => ({}))
+    const userKey = typeof body?.userKey === "string" ? body.userKey.trim() : ""
+    const apiKey = userKey || process.env.GROQ_API_KEY
+    if (!apiKey) {
+      return NextResponse.json({ error: "Thiếu GROQ_API_KEY. Cấu hình ở Cài đặt API keys." }, { status: 400 })
+    }
+
+    const res = await fetch("https://api.groq.com/openai/v1/models", {
+      headers: { Authorization: `Bearer ${apiKey}` },
+      cache: "no-store",
+    })
+    if (!res.ok) {
+      const text = await res.text()
+      return NextResponse.json({ error: `Groq API ${res.status}: ${text.slice(0, 300)}` }, { status: 502 })
+    }
+    const data = (await res.json()) as { data?: GroqModel[] }
+    const all = data.data ?? []
+
+    // Loại whisper (speech-to-text), TTS, vision-only, guard models — chỉ giữ chat LLM.
+    const EXCLUDE = /(whisper|tts|guard|moderation|prompt-guard)/i
+    const chatModels = all
+      .filter((m) => m.active !== false)
+      .filter((m) => !EXCLUDE.test(m.id))
+      .map((m) => ({ id: m.id, contextWindow: m.context_window, ownedBy: m.owned_by }))
+      .sort((a, b) => a.id.localeCompare(b.id))
+
+    return NextResponse.json({ models: chatModels, totalRaw: all.length })
+  } catch (err) {
+    return NextResponse.json({ error: err instanceof Error ? err.message : String(err) }, { status: 500 })
+  }
+}

components/model-picker.tsx

@@ -54,29 +54,31 @@ export function ModelPicker({
   size = "sm",
   disabled,
 }: ModelPickerProps) {
-  const [discoveredGoogleModels, setDiscoveredGoogleModels] = useState<string[] | null>(null)
-  const [discoveringGoogle, setDiscoveringGoogle] = useState(false)
-  const [discoverError, setDiscoverError] = useState<string | null>(null)
+  const [discovered, setDiscovered] = useState<Partial<Record<ProviderKey, string[]>>>({})
+  const [discovering, setDiscovering] = useState<ProviderKey | null>(null)
+  const [discoverError, setDiscoverError] = useState<Partial<Record<ProviderKey, string>>>({})
   const isAutoModel = model === "auto"
   const providerLabel = provider ? PROVIDERS[provider].label : ""
 
-  async function discoverGoogleModels() {
-    setDiscoveringGoogle(true)
-    setDiscoverError(null)
+  async function discoverModels(p: ProviderKey) {
+    setDiscovering(p)
+    setDiscoverError((prev) => ({ ...prev, [p]: undefined }))
     try {
-      const res = await fetch("/api/google/models", {
+      const userKey =
+        p === "google" ? userKeys?.gemini : p === "groq" ? userKeys?.groq : userKeys?.github
+      const res = await fetch(`/api/${p}/models`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ userKey: userKeys?.gemini ?? "" }),
+        body: JSON.stringify({ userKey: userKey ?? "" }),
       })
       const data = await res.json()
       if (!res.ok) throw new Error(data?.error || `HTTP ${res.status}`)
       const ids = (data.models as Array<{ id: string }>).map((m) => m.id)
-      setDiscoveredGoogleModels(ids)
+      setDiscovered((prev) => ({ ...prev, [p]: ids }))
     } catch (err) {
-      setDiscoverError(err instanceof Error ? err.message : String(err))
+      setDiscoverError((prev) => ({ ...prev, [p]: err instanceof Error ? err.message : String(err) }))
     } finally {
-      setDiscoveringGoogle(false)
+      setDiscovering(null)
     }
   }
 
@@ -129,11 +131,14 @@ export function ModelPicker({
           </>
         )}
         {Object.entries(PROVIDERS).map(([pKey, p]) => {
-          const isGoogle = pKey === "google"
+          const pTyped = pKey as ProviderKey
+          const discoveredIds = discovered[pTyped]
           const modelList: readonly string[] =
-            isGoogle && discoveredGoogleModels && discoveredGoogleModels.length > 0
-              ? Array.from(new Set([...p.models, ...discoveredGoogleModels]))
+            discoveredIds && discoveredIds.length > 0
+              ? Array.from(new Set([...p.models, ...discoveredIds]))
               : p.models
+          const isDiscovering = discovering === pTyped
+          const errMsg = discoverError[pTyped]
           return (
             <div key={pKey}>
               <DropdownMenuLabel className="flex items-center justify-between">
@@ -146,7 +151,7 @@ export function ModelPicker({
                 return (
                   <DropdownMenuItem
                     key={m}
-                    onClick={() => onChange(pKey as ProviderKey, m)}
+                    onClick={() => onChange(pTyped, m)}
                     className={cn("font-mono text-xs", (selected || onlyByModel) && "bg-accent")}
                   >
                     <span className="flex-1 break-all">{m}</span>
@@ -154,25 +159,23 @@ export function ModelPicker({
                   </DropdownMenuItem>
                 )
               })}
-              {isGoogle && (
-                <DropdownMenuItem
-                  onSelect={(e) => {
-                    e.preventDefault()
-                    discoverGoogleModels()
-                  }}
-                  className="text-[11px] text-muted-foreground"
-                  disabled={discoveringGoogle}
-                >
-                  {discoveringGoogle
-                    ? "Đang quét..."
-                    : discoveredGoogleModels
-                    ? `↻ Quét lại (${discoveredGoogleModels.length} model)`
-                    : "↻ Quét live model có sẵn với key của bạn"}
-                </DropdownMenuItem>
-              )}
-              {isGoogle && discoverError && (
+              <DropdownMenuItem
+                onSelect={(e) => {
+                  e.preventDefault()
+                  discoverModels(pTyped)
+                }}
+                className="text-[11px] text-muted-foreground"
+                disabled={isDiscovering}
+              >
+                {isDiscovering
+                  ? "Đang quét..."
+                  : discoveredIds
+                  ? `↻ Quét lại (${discoveredIds.length} model)`
+                  : "↻ Quét live model có sẵn với key của bạn"}
+              </DropdownMenuItem>
+              {errMsg && (
                 <div className="px-2 py-1 text-[10px] text-destructive break-words [overflow-wrap:anywhere]">
-                  {discoverError}
+                  {errMsg}
                 </div>
               )}
               <DropdownMenuSeparator />