improve UI of model selector

components/editor/ask-ai/settings.tsx

@@ -67,6 +67,24 @@ export function Settings({
     }
   }, [model, provider]);
 
+  const formattedModels = useMemo(() => {
+    const lists: ((typeof MODELS)[0] | { isCategory: true; name: string })[] =
+      [];
+    const keys = new Set<string>();
+    MODELS.forEach((model) => {
+      if (!keys.has(model.companyName)) {
+        lists.push({
+          isCategory: true,
+          name: model.companyName,
+          logo: model.logo,
+        });
+        keys.add(model.companyName);
+      }
+      lists.push(model);
+    });
+    return lists;
+  }, [MODELS]);
+
   return (
     <Popover open={open} onOpenChange={onClose}>
       <PopoverTrigger asChild>
@@ -115,19 +133,24 @@ export function Settings({
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
-                  <SelectLabel>Models</SelectLabel>
-                  {MODELS.map(
-                    ({
+                  {formattedModels.map((item: any) => {
+                    if ("isCategory" in item) {
+                      return (
+                        <SelectLabel
+                          key={item.name}
+                          className="flex items-center gap-1"
+                        >
+                          {item.name}
+                        </SelectLabel>
+                      );
+                    }
+                    const {
                       value,
                       label,
                       isNew = false,
                       isThinker = false,
-                    }: {
-                      value: string;
-                      label: string;
-                      isNew?: boolean;
-                      isThinker?: boolean;
-                    }) => (
+                    } = item;
+                    return (
                       <SelectItem
                         key={value}
                         value={value}
@@ -141,8 +164,8 @@ export function Settings({
                           </span>
                         )}
                       </SelectItem>
-                    )
-                  )}
+                    );
+                  })}
                 </SelectGroup>
               </SelectContent>
             </Select>

lib/providers.ts

@@ -40,34 +40,7 @@ export const MODELS = [
     providers: ["fireworks-ai", "nebius", "sambanova", "novita", "hyperbolic"],
     autoProvider: "novita",
     logo: DeepSeekLogo,
-  },
-  // {
-  //   value: "deepseek-ai/DeepSeek-R1-0528",
-  //   label: "DeepSeek R1 0528",
-  //   providers: [
-  //     "fireworks-ai",
-  //     "novita",
-  //     "hyperbolic",
-  //     "nebius",
-  //     "together",
-  //     "sambanova",
-  //   ],
-  //   autoProvider: "novita",
-  //   isThinker: true,
-  // },
-  {
-    value: "Qwen/Qwen3-Coder-480B-A35B-Instruct",
-    label: "Qwen3 Coder 480B A35B Instruct",
-    providers: ["novita", "hyperbolic"],
-    autoProvider: "novita",
-    logo: QwenLogo,
-  },
-  {
-    value: "moonshotai/Kimi-K2-Instruct",
-    label: "Kimi K2 Instruct",
-    providers: ["together", "novita", "groq"],
-    autoProvider: "groq",
-    logo: KimiLogo,
+    companyName: "DeepSeek",
   },
   {
     value: "deepseek-ai/DeepSeek-V3.1",
@@ -75,13 +48,7 @@ export const MODELS = [
     providers: ["fireworks-ai", "novita"],
     autoProvider: "fireworks-ai",
     logo: DeepSeekLogo,
-  },
-  {
-    value: "moonshotai/Kimi-K2-Instruct-0905",
-    label: "Kimi K2 Instruct 0905",
-    providers: ["together", "groq", "novita"],
-    autoProvider: "groq",
-    logo: KimiLogo,
+    companyName: "DeepSeek",
   },
   {
     value: "deepseek-ai/DeepSeek-V3.1-Terminus",
@@ -89,6 +56,7 @@ export const MODELS = [
     providers: ["novita"],
     autoProvider: "novita",
     logo: DeepSeekLogo,
+    companyName: "DeepSeek",
   },
   {
     value: "deepseek-ai/DeepSeek-V3.2-Exp",
@@ -97,5 +65,30 @@ export const MODELS = [
     autoProvider: "novita",
     logo: DeepSeekLogo,
     isNew: true,
-  }
+    companyName: "DeepSeek",
+  },
+  {
+    value: "Qwen/Qwen3-Coder-480B-A35B-Instruct",
+    label: "Qwen3 Coder 480B A35B Instruct",
+    providers: ["novita", "hyperbolic"],
+    autoProvider: "novita",
+    logo: QwenLogo,
+    companyName: "Qwen",
+  },
+  {
+    value: "moonshotai/Kimi-K2-Instruct",
+    label: "Kimi K2 Instruct",
+    providers: ["together", "novita", "groq"],
+    autoProvider: "groq",
+    logo: KimiLogo,
+    companyName: "Kimi",
+  },
+  {
+    value: "moonshotai/Kimi-K2-Instruct-0905",
+    label: "Kimi K2 Instruct 0905",
+    providers: ["together", "groq", "novita"],
+    autoProvider: "groq",
+    logo: KimiLogo,
+    companyName: "Kimi",
+  },
 ];