From 611df1f5a2cd728a143dbe723269ec35060cd158 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Fri, 3 Oct 2025 09:39:19 -0300
Subject: [PATCH] fix: use same model selector as onboarding on settings page
 (#176)

* updated model selector to not call function when model is empty

* Changed settings page to use model selector
---
 .../onboarding/components/model-selector.tsx  |  2 +-
 frontend/src/app/settings/page.tsx            | 37 ++++++-------------
 2 files changed, 13 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/onboarding/components/model-selector.tsx b/frontend/src/app/onboarding/components/model-selector.tsx
index 67021b93..c5f9454c 100644
--- a/frontend/src/app/onboarding/components/model-selector.tsx
+++ b/frontend/src/app/onboarding/components/model-selector.tsx
@@ -44,7 +44,7 @@ export function ModelSelector({
 	const [searchValue, setSearchValue] = useState("");
 
 	useEffect(() => {
-		if (value && (!options.find((option) => option.value === value) && !custom)) {
+		if (value && value !== "" && (!options.find((option) => option.value === value) && !custom)) {
 			onValueChange("");
 		}
 	}, [options, value, custom, onValueChange]);
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index cf9e0497..f4649190 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -13,6 +13,7 @@ import {
 import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
 import { ConfirmationDialog } from "@/components/confirmation-dialog";
 import { LabelWrapper } from "@/components/label-wrapper";
+import OpenAILogo from "@/components/logo/openai-logo";
 import { ProtectedRoute } from "@/components/protected-route";
 import { Button } from "@/components/ui/button";
 import {
@@ -40,6 +41,7 @@ import {
 	UI_CONSTANTS,
 } from "@/lib/constants";
 import { useDebounce } from "@/lib/debounce";
+import { ModelSelector } from "../onboarding/components/model-selector";
 import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers";
 import { ModelSelectItems } from "./helpers/model-select-item";
 
@@ -864,34 +866,19 @@ function KnowledgeSourcesPage() {
 				<CardContent>
 					<div className="space-y-6">
 						<div className="space-y-2">
-							<LabelWrapper
-								helperText="Model used for chat"
-								id="model-select"
+						<LabelWrapper
 								label="Language model"
-								required
+								helperText="Model used for chat"
+								id="embedding-model"
+								required={true}
 							>
-								<Select
-									value={
-										settings.agent?.llm_model ||
-										modelsData?.language_models?.find((m) => m.default)
-											?.value ||
-										"gpt-4"
-									}
+								<ModelSelector
+									options={modelsData?.language_models || []}
+                  noOptionsPlaceholder={modelsData ? "No language models detected." : "Loading models..."}
+									icon={<OpenAILogo className="w-4 h-4" />}
+									value={modelsData ? settings.agent?.llm_model || "" : ""}
 									onValueChange={handleModelChange}
-								>
-									<SelectTrigger id="model-select">
-										<SelectValue placeholder="Select a model" />
-									</SelectTrigger>
-									<SelectContent>
-										<ModelSelectItems
-											models={modelsData?.language_models}
-											fallbackModels={
-												getFallbackModels(currentProvider).language
-											}
-											provider={currentProvider}
-										/>
-									</SelectContent>
-								</Select>
+								/>
 							</LabelWrapper>
 						</div>
 						<div className="space-y-2">