open llm model select when toast button to settings is clicked
This commit is contained in:
parent
9da1dcec59
commit
593bd626b4
6 changed files with 1823 additions and 1784 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@ const AnthropicSettingsDialog = ({
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ const OllamaSettingsDialog = ({
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,7 @@ const OpenAISettingsDialog = ({
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ const WatsonxSettingsDialog = ({
|
||||||
action: {
|
action: {
|
||||||
label: "Settings",
|
label: "Settings",
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
router.push("/settings");
|
router.push("/settings?focusLlmModel=true");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue