From 792f6eba92c8dc5ae16fe6cb895e85e8f0223e69 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 14 Jun 2026 21:59:06 +0530
Subject: [PATCH] fix(model-selector): update chat model display logic and
 replace icon for manage models button

---
 .../components/new-chat/model-selector.tsx         | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 23c98889c..22d86aa92 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtom, useAtomValue } from "jotai";
-import { Check, ChevronDown, Search, Settings2 } from "lucide-react";
+import { Check, ChevronDown, Search, SlidersHorizontal } from "lucide-react";
 import { useRouter } from "next/navigation";
 import type { UIEvent } from "react";
 import { useCallback, useMemo, useState } from "react";
@@ -130,6 +130,7 @@ export function ModelSelector({
 	const selected = chatModelsById.get(selectedModelId);
 	const groups = useMemo(() => groupedModels(visibleChatModels), [visibleChatModels]);
 	const loading = globalLoading || connectionsLoading;
+	const hasSearchQuery = search.trim().length > 0;
 
 	function handleOpenChange(nextOpen: boolean) {
 		if (!nextOpen) setSearch("");
@@ -197,7 +198,9 @@ export function ModelSelector({
 					</div>
 				) : Object.keys(groups).length === 0 ? (
 					<div className="px-3 py-8 text-center text-sm text-muted-foreground">
-						No enabled chat models. Add or enable models in Settings.
+						{hasSearchQuery
+							? "No matching chat models."
+							: "No enabled chat models. Add or enable models in Settings."}
 					</div>
 				) : (
 					Object.entries(groups).map(([connection, models]) => (
@@ -257,7 +260,7 @@ export function ModelSelector({
 					className="w-full justify-start rounded-md bg-foreground/5 hover:bg-foreground/10 hover:text-foreground"
 					onClick={manageModelConnections}
 				>
-					<Settings2 className="mr-2 h-4 w-4" /> Manage models
+					<SlidersHorizontal className="h-4 w-4" /> Manage models
 				</Button>
 			</div>
 		</div>
@@ -304,7 +307,10 @@ export function ModelSelector({
 	return (
 		<Popover open={open} onOpenChange={handleOpenChange}>
 			<PopoverTrigger asChild>{trigger}</PopoverTrigger>
-			<PopoverContent align="start" className="w-[340px] p-0">
+			<PopoverContent
+				align="start"
+				className="w-[340px] border border-popover-border bg-popover p-0 text-popover-foreground shadow-md"
+			>
 				{content}
 			</PopoverContent>
 		</Popover>