54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useEffect } from "react";
|
|
|
|
import { getCanvasThread } from "../../api/threads";
|
|
import { useCanvasGraphContext } from "../../contexts/CanvasGraphContext";
|
|
import { useCanvasThreadContext } from "../../contexts/CanvasThreadContext";
|
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
import { CanvasHeader } from "./CanvasHeader";
|
|
import { CanvasResizableLayout } from "./CanvasResizableLayout";
|
|
|
|
export function CanvasShell() {
|
|
const { threadId, setThreadId } = useCanvasThreadContext();
|
|
const { setMessages, setArtifact } = useCanvasGraphContext();
|
|
|
|
// Load existing thread state when navigating to a saved thread.
|
|
// If the thread doesn't exist in the backend (e.g. pre-generated UUID from
|
|
// CanvasHomePage or stale URL after a DB reset), clear threadId so that
|
|
// the next sendMessage call creates a fresh thread instead of hitting 404.
|
|
useEffect(() => {
|
|
if (!threadId) return;
|
|
let cancelled = false;
|
|
|
|
getCanvasThread(threadId)
|
|
.then((values) => {
|
|
if (cancelled) return;
|
|
if (!values) {
|
|
setThreadId(null);
|
|
return;
|
|
}
|
|
if (values.messages?.length) {
|
|
setMessages(values.messages);
|
|
}
|
|
if (values.artifact) {
|
|
setArtifact(values.artifact);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error("[canvas] failed to load thread state:", err);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [threadId, setMessages, setArtifact, setThreadId]);
|
|
|
|
return (
|
|
<TooltipProvider delayDuration={300}>
|
|
<div className="h-full flex flex-col overflow-hidden bg-background">
|
|
<CanvasHeader />
|
|
<CanvasResizableLayout />
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
}
|