feat: lock model selector during guided tour and refine open state logic
This commit is contained in:
parent
541179ba98
commit
d0bcf02784
2 changed files with 27 additions and 5 deletions
|
|
@ -205,6 +205,7 @@ export function ChatPage(): ReactElement {
|
|||
});
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
|
||||
const [modelSelectorLocked, setModelSelectorLocked] = useState(false);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const viewBeforeCompareRef = useRef<ChatView | null>(null);
|
||||
const inferenceParams = useChatRuntimeStore((state) => state.params);
|
||||
|
|
@ -239,8 +240,23 @@ export function ChatPage(): ReactElement {
|
|||
[],
|
||||
);
|
||||
|
||||
const openModelSelector = useCallback(() => setModelSelectorOpen(true), []);
|
||||
const closeModelSelector = useCallback(() => setModelSelectorOpen(false), []);
|
||||
const openModelSelector = useCallback(() => {
|
||||
setModelSelectorLocked(true);
|
||||
setModelSelectorOpen(true);
|
||||
}, []);
|
||||
|
||||
const closeModelSelector = useCallback(() => {
|
||||
setModelSelectorLocked(false);
|
||||
setModelSelectorOpen(false);
|
||||
}, []);
|
||||
|
||||
const handleModelSelectorOpenChange = useCallback(
|
||||
(open: boolean) => {
|
||||
if (!open && modelSelectorLocked) return;
|
||||
setModelSelectorOpen(open);
|
||||
},
|
||||
[modelSelectorLocked],
|
||||
);
|
||||
const openSettings = useCallback(() => setSettingsOpen(true), []);
|
||||
const closeSettings = useCallback(() => setSettingsOpen(false), []);
|
||||
const openSidebar = useCallback(() => setSidebarOpen(true), []);
|
||||
|
|
@ -313,6 +329,13 @@ export function ChatPage(): ReactElement {
|
|||
steps: tourSteps,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (tour.open) return;
|
||||
if (!modelSelectorLocked) return;
|
||||
setModelSelectorLocked(false);
|
||||
setModelSelectorOpen(false);
|
||||
}, [modelSelectorLocked, tour.open]);
|
||||
|
||||
return (
|
||||
<div className="h-[calc(100vh-4rem)] bg-background overflow-hidden">
|
||||
<GuidedTour {...tour.tourProps} />
|
||||
|
|
@ -355,7 +378,7 @@ export function ChatPage(): ReactElement {
|
|||
onEject={handleEject}
|
||||
variant="ghost"
|
||||
open={modelSelectorOpen}
|
||||
onOpenChange={setModelSelectorOpen}
|
||||
onOpenChange={handleModelSelectorOpenChange}
|
||||
triggerDataTour="chat-model-selector"
|
||||
contentDataTour="chat-model-selector-popover"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export function StudioPage(): ReactElement {
|
|||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<main className="mx-auto max-w-7xl px-6 py-4">
|
||||
<GuidedTour {...tour.tourProps} celebrate={true} />
|
||||
<GuidedTour {...tour.tourProps} celebrate={isConfigTour} />
|
||||
|
||||
<DatasetPreviewDialog
|
||||
open={dialogOpen}
|
||||
|
|
@ -114,4 +114,3 @@ export function StudioPage(): ReactElement {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue