refine model picker (#87)

src/components/ModelPicker.tsx

@@ -61,14 +61,16 @@ export function ModelPicker({
   const getModelDisplayName = () => {
     if (selectedModel.provider === "ollama") {
       return (
-        ollamaModels.find((model: LocalModel) => model.modelName === selectedModel.name)
-          ?.displayName || selectedModel.name
+        ollamaModels.find(
+          (model: LocalModel) => model.modelName === selectedModel.name
+        )?.displayName || selectedModel.name
       );
     }
     if (selectedModel.provider === "lmstudio") {
       return (
-        lmStudioModels.find((model: LocalModel) => model.modelName === selectedModel.name)
-          ?.displayName || selectedModel.name // Fallback to path if not found
+        lmStudioModels.find(
+          (model: LocalModel) => model.modelName === selectedModel.name
+        )?.displayName || selectedModel.name // Fallback to path if not found
       );
     }
 
@@ -92,8 +94,10 @@ export function ModelPicker({
   );
 
   // Determine availability of local models
-  const hasOllamaModels = !ollamaLoading && !ollamaError && ollamaModels.length > 0;
-  const hasLMStudioModels = !lmStudioLoading && !lmStudioError && lmStudioModels.length > 0;
+  const hasOllamaModels =
+    !ollamaLoading && !ollamaError && ollamaModels.length > 0;
+  const hasLMStudioModels =
+    !lmStudioLoading && !lmStudioError && lmStudioModels.length > 0;
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
@@ -110,10 +114,11 @@ export function ModelPicker({
           <ChevronDown className="h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-64" align="start"> {/* Increased width slightly */}
+      <DropdownMenuContent className="w-64" align="start">
+        {" "}
+        {/* Increased width slightly */}
         <DropdownMenuLabel>Cloud Models</DropdownMenuLabel>
         <DropdownMenuSeparator />
-
         {/* Cloud models */}
         {cloudModels.map((model) => (
           <Tooltip key={`${model.provider}-${model.name}`}>
@@ -151,9 +156,18 @@ export function ModelPicker({
             <TooltipContent side="right">{model.description}</TooltipContent>
           </Tooltip>
         ))}
-
         <DropdownMenuSeparator />
-
+        {/* Local Models Parent SubMenu */}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="w-full font-normal">
+            <div className="flex flex-col items-start">
+              <span>Local models</span>
+              <span className="text-xs text-muted-foreground">
+                LM Studio, Ollama
+              </span>
+            </div>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="w-56">
             {/* Ollama Models SubMenu */}
             <DropdownMenuSub>
               <DropdownMenuSubTrigger
@@ -161,16 +175,14 @@ export function ModelPicker({
                 className="w-full font-normal"
               >
                 <div className="flex flex-col items-start">
-              <span>Local models (Ollama)</span>
+                  <span>Ollama</span>
                   {ollamaLoading ? (
                     <span className="text-xs text-muted-foreground">
                       Loading...
                     </span>
                   ) : ollamaError ? (
-                 <span className="text-xs text-red-500">
-                   Error loading
-                 </span>
-              ): !hasOllamaModels ? (
+                    <span className="text-xs text-red-500">Error loading</span>
+                  ) : !hasOllamaModels ? (
                     <span className="text-xs text-muted-foreground">
                       None available
                     </span>
@@ -244,15 +256,13 @@ export function ModelPicker({
                 className="w-full font-normal"
               >
                 <div className="flex flex-col items-start">
-              <span>Local models (LM Studio)</span>
+                  <span>LM Studio</span>
                   {lmStudioLoading ? (
                     <span className="text-xs text-muted-foreground">
                       Loading...
                     </span>
                   ) : lmStudioError ? (
-                 <span className="text-xs text-red-500">
-                   Error loading
-                 </span>
+                    <span className="text-xs text-red-500">Error loading</span>
                   ) : !hasLMStudioModels ? (
                     <span className="text-xs text-muted-foreground">
                       None available
@@ -321,7 +331,8 @@ export function ModelPicker({
                 )}
               </DropdownMenuSubContent>
             </DropdownMenuSub>
-
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
       </DropdownMenuContent>
     </DropdownMenu>
   );