open llm model select when toast button to settings is clicked

This commit is contained in:
Cole Goldsmith 2025-11-19 14:00:28 -06:00
parent 9da1dcec59
commit 593bd626b4
6 changed files with 1823 additions and 1784 deletions

View file

@ -41,6 +41,7 @@ export function ModelSelector({
noOptionsPlaceholder = "No models available", noOptionsPlaceholder = "No models available",
custom = false, custom = false,
hasError = false, hasError = false,
defaultOpen = false,
}: { }: {
options?: ModelOption[]; options?: ModelOption[];
groupedOptions?: GroupedModelOption[]; groupedOptions?: GroupedModelOption[];
@ -52,8 +53,9 @@ export function ModelSelector({
custom?: boolean; custom?: boolean;
onValueChange: (value: string, provider?: string) => void; onValueChange: (value: string, provider?: string) => void;
hasError?: boolean; hasError?: boolean;
defaultOpen?: boolean;
}) { }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(defaultOpen);
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
// Flatten grouped options or use regular options // Flatten grouped options or use regular options
@ -77,6 +79,13 @@ export function ModelSelector({
} }
}, [allOptions, value, custom, onValueChange]); }, [allOptions, value, custom, onValueChange]);
// Update open state when defaultOpen changes
useEffect(() => {
if (defaultOpen) {
setOpen(true);
}
}, [defaultOpen]);
return ( return (
<Popover open={open} onOpenChange={setOpen} modal={false}> <Popover open={open} onOpenChange={setOpen} modal={false}>
<PopoverTrigger asChild> <PopoverTrigger asChild>

View file

@ -70,7 +70,7 @@ const AnthropicSettingsDialog = ({
action: { action: {
label: "Settings", label: "Settings",
onClick: () => { onClick: () => {
router.push("/settings"); router.push("/settings?focusLlmModel=true");
}, },
}, },
}); });

View file

@ -82,7 +82,7 @@ const OllamaSettingsDialog = ({
action: { action: {
label: "Settings", label: "Settings",
onClick: () => { onClick: () => {
router.push("/settings"); router.push("/settings?focusLlmModel=true");
}, },
}, },
}); });

View file

@ -71,7 +71,7 @@ const OpenAISettingsDialog = ({
action: { action: {
label: "Settings", label: "Settings",
onClick: () => { onClick: () => {
router.push("/settings"); router.push("/settings?focusLlmModel=true");
}, },
}, },
}); });

View file

@ -77,7 +77,7 @@ const WatsonxSettingsDialog = ({
action: { action: {
label: "Settings", label: "Settings",
onClick: () => { onClick: () => {
router.push("/settings"); router.push("/settings?focusLlmModel=true");
}, },
}, },
}); });

View file

@ -98,6 +98,11 @@ function KnowledgeSourcesPage() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
// Check if we should auto-open the LLM model selector
const focusLlmModel = searchParams.get("focusLlmModel") === "true";
// Use a trigger state that changes each time we detect the query param
const [openLlmSelector, setOpenLlmSelector] = useState(false);
// Connectors state // Connectors state
const [connectors, setConnectors] = useState<Connector[]>([]); const [connectors, setConnectors] = useState<Connector[]>([]);
const [isConnecting, setIsConnecting] = useState<string | null>(null); const [isConnecting, setIsConnecting] = useState<string | null>(null);
@ -301,6 +306,30 @@ function KnowledgeSourcesPage() {
} }
}, [settings.knowledge?.picture_descriptions]); }, [settings.knowledge?.picture_descriptions]);
// Handle auto-focus on LLM model selector when coming from provider setup
useEffect(() => {
if (focusLlmModel) {
// Trigger the selector to open
setOpenLlmSelector(true);
// Scroll to the agent card
const agentCard = document.getElementById("agent-card");
if (agentCard) {
agentCard.scrollIntoView({ behavior: "smooth", block: "start" });
}
// Clear the query parameter
const newSearchParams = new URLSearchParams(searchParams.toString());
newSearchParams.delete("focusLlmModel");
router.replace(`/settings?${newSearchParams.toString()}`, {
scroll: false,
});
// Reset the trigger after a brief delay so it can be triggered again
setTimeout(() => setOpenLlmSelector(false), 100);
}
}, [focusLlmModel, searchParams, router]);
// Update model selection immediately (also updates provider) // Update model selection immediately (also updates provider)
const handleModelChange = (newModel: string, provider?: string) => { const handleModelChange = (newModel: string, provider?: string) => {
if (newModel && provider) { if (newModel && provider) {
@ -893,7 +922,7 @@ function KnowledgeSourcesPage() {
</div> </div>
{/* Agent Behavior Section */} {/* Agent Behavior Section */}
<Card> <Card id="agent-card">
<CardHeader> <CardHeader>
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<CardTitle className="text-lg">Agent</CardTitle> <CardTitle className="text-lg">Agent</CardTitle>
@ -982,6 +1011,7 @@ function KnowledgeSourcesPage() {
} }
value={settings.agent?.llm_model || ""} value={settings.agent?.llm_model || ""}
onValueChange={handleModelChange} onValueChange={handleModelChange}
defaultOpen={openLlmSelector}
/> />
</LabelWrapper> </LabelWrapper>
</div> </div>