339 lines
12 KiB
TypeScript
339 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import {
|
|
type ChatConversation,
|
|
useGetConversationsQuery,
|
|
} from "@/app/api/queries/useGetConversationsQuery";
|
|
import { getFilterById } from "@/app/api/queries/useGetFilterByIdQuery";
|
|
import type { Settings } from "@/app/api/queries/useGetSettingsQuery";
|
|
import { OnboardingContent } from "@/app/onboarding/_components/onboarding-content";
|
|
import { ProgressBar } from "@/app/onboarding/_components/progress-bar";
|
|
import { AnimatedConditional } from "@/components/animated-conditional";
|
|
import { Header } from "@/components/header";
|
|
import { Navigation } from "@/components/navigation";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { useChat } from "@/contexts/chat-context";
|
|
import {
|
|
ANIMATION_DURATION,
|
|
HEADER_HEIGHT,
|
|
ONBOARDING_ASSISTANT_MESSAGE_KEY,
|
|
ONBOARDING_CARD_STEPS_KEY,
|
|
ONBOARDING_OPENRAG_DOCS_FILTER_ID_KEY,
|
|
ONBOARDING_SELECTED_NUDGE_KEY,
|
|
ONBOARDING_STEP_KEY,
|
|
ONBOARDING_UPLOAD_STEPS_KEY,
|
|
ONBOARDING_USER_DOC_FILTER_ID_KEY,
|
|
SIDEBAR_WIDTH,
|
|
TOTAL_ONBOARDING_STEPS,
|
|
} from "@/lib/constants";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function ChatRenderer({
|
|
settings,
|
|
children,
|
|
}: {
|
|
settings: Settings | undefined;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const { isAuthenticated, isNoAuthMode } = useAuth();
|
|
const {
|
|
endpoint,
|
|
refreshTrigger,
|
|
refreshConversations,
|
|
startNewConversation,
|
|
setConversationFilter,
|
|
setOnboardingComplete,
|
|
} = useChat();
|
|
|
|
// Initialize onboarding state based on local storage and settings
|
|
const [currentStep, setCurrentStep] = useState<number>(() => {
|
|
if (typeof window === "undefined") return 0;
|
|
const savedStep = localStorage.getItem(ONBOARDING_STEP_KEY);
|
|
return savedStep !== null ? parseInt(savedStep, 10) : 0;
|
|
});
|
|
|
|
const [showLayout, setShowLayout] = useState<boolean>(() => {
|
|
if (typeof window === "undefined") return false;
|
|
const savedStep = localStorage.getItem(ONBOARDING_STEP_KEY);
|
|
// Show layout if settings.edited is true and if no onboarding step is saved
|
|
const isEdited = settings?.edited ?? true;
|
|
return isEdited ? savedStep === null : false;
|
|
});
|
|
|
|
// Only fetch conversations on chat page
|
|
const isOnChatPage = pathname === "/" || pathname === "/chat";
|
|
const { data: conversations = [], isLoading: isConversationsLoading } =
|
|
useGetConversationsQuery(endpoint, refreshTrigger, {
|
|
enabled: isOnChatPage && (isAuthenticated || isNoAuthMode),
|
|
}) as { data: ChatConversation[]; isLoading: boolean };
|
|
|
|
const handleNewConversation = () => {
|
|
refreshConversations();
|
|
startNewConversation();
|
|
};
|
|
|
|
// Navigate to /chat when onboarding is active so animation reveals chat underneath
|
|
useEffect(() => {
|
|
if (!showLayout && pathname !== "/chat" && pathname !== "/") {
|
|
router.push("/chat");
|
|
}
|
|
}, [showLayout, pathname, router]);
|
|
|
|
// Helper to store default filter ID for new conversations after onboarding
|
|
const storeDefaultFilterForNewConversations = useCallback(
|
|
async (preferUserDoc: boolean) => {
|
|
if (typeof window === "undefined") return;
|
|
|
|
// Check if we already have a default filter set
|
|
const existingDefault = localStorage.getItem("default_conversation_filter_id");
|
|
if (existingDefault) {
|
|
console.log("[FILTER] Default filter already set:", existingDefault);
|
|
// Try to apply it to context state (don't save to localStorage to avoid overwriting)
|
|
try {
|
|
const filter = await getFilterById(existingDefault);
|
|
if (filter) {
|
|
// Pass null to skip localStorage save
|
|
setConversationFilter(filter, null);
|
|
return; // Successfully loaded and set, we're done
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load existing default filter, will set new one:", error);
|
|
// Filter doesn't exist anymore, clear it and continue to set a new one
|
|
localStorage.removeItem("default_conversation_filter_id");
|
|
}
|
|
}
|
|
|
|
// Try to get the appropriate filter ID
|
|
let filterId: string | null = null;
|
|
|
|
if (preferUserDoc) {
|
|
// Completed full onboarding - prefer user document filter
|
|
filterId = localStorage.getItem(ONBOARDING_USER_DOC_FILTER_ID_KEY);
|
|
console.log("[FILTER] User doc filter ID:", filterId);
|
|
}
|
|
|
|
// Fall back to OpenRAG docs filter
|
|
if (!filterId) {
|
|
filterId = localStorage.getItem(ONBOARDING_OPENRAG_DOCS_FILTER_ID_KEY);
|
|
console.log("[FILTER] OpenRAG docs filter ID:", filterId);
|
|
}
|
|
|
|
console.log("[FILTER] Final filter ID to use:", filterId);
|
|
|
|
if (filterId) {
|
|
// Store this as the default filter for new conversations
|
|
localStorage.setItem("default_conversation_filter_id", filterId);
|
|
|
|
// Apply filter to context state only (don't save to localStorage since there's no conversation yet)
|
|
// The default_conversation_filter_id will be used when a new conversation is started
|
|
try {
|
|
const filter = await getFilterById(filterId);
|
|
console.log("[FILTER] Loaded filter:", filter);
|
|
if (filter) {
|
|
// Pass null to skip localStorage save - this prevents overwriting existing conversation filters
|
|
setConversationFilter(filter, null);
|
|
console.log("[FILTER] Set conversation filter (no save):", filter.id);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to set onboarding filter:", error);
|
|
}
|
|
} else {
|
|
console.log("[FILTER] No filter ID found, not setting default");
|
|
}
|
|
},
|
|
[setConversationFilter]
|
|
);
|
|
|
|
// Save current step to local storage whenever it changes
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined" && !showLayout) {
|
|
localStorage.setItem(ONBOARDING_STEP_KEY, currentStep.toString());
|
|
}
|
|
}, [currentStep, showLayout]);
|
|
|
|
const handleStepComplete = async () => {
|
|
if (currentStep < TOTAL_ONBOARDING_STEPS - 1) {
|
|
setCurrentStep(currentStep + 1);
|
|
} else {
|
|
// Onboarding is complete - remove from local storage and show layout
|
|
if (typeof window !== "undefined") {
|
|
localStorage.removeItem(ONBOARDING_STEP_KEY);
|
|
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
|
|
localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
|
|
localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
|
|
localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
|
|
}
|
|
|
|
// Mark onboarding as complete in context
|
|
setOnboardingComplete(true);
|
|
|
|
// Store the user document filter as default for new conversations FIRST
|
|
// This must happen before startNewConversation() so the filter is available
|
|
await storeDefaultFilterForNewConversations(true);
|
|
|
|
// Clear ALL conversation state so next message starts fresh
|
|
// This will pick up the default filter we just set
|
|
await startNewConversation();
|
|
|
|
// Clean up onboarding filter IDs now that we've set the default
|
|
if (typeof window !== "undefined") {
|
|
localStorage.removeItem(ONBOARDING_OPENRAG_DOCS_FILTER_ID_KEY);
|
|
localStorage.removeItem(ONBOARDING_USER_DOC_FILTER_ID_KEY);
|
|
console.log("[FILTER] Cleaned up onboarding filter IDs");
|
|
}
|
|
|
|
setShowLayout(true);
|
|
}
|
|
};
|
|
|
|
const handleStepBack = () => {
|
|
if (currentStep > 0) {
|
|
setCurrentStep(currentStep - 1);
|
|
}
|
|
};
|
|
|
|
const handleSkipOnboarding = () => {
|
|
// Skip onboarding by marking it as complete
|
|
if (typeof window !== "undefined") {
|
|
localStorage.removeItem(ONBOARDING_STEP_KEY);
|
|
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
|
|
localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
|
|
localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
|
|
localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
|
|
}
|
|
// Mark onboarding as complete in context
|
|
setOnboardingComplete(true);
|
|
// Store the OpenRAG docs filter as default for new conversations
|
|
storeDefaultFilterForNewConversations(false);
|
|
setShowLayout(true);
|
|
};
|
|
|
|
// List of paths with smaller max-width
|
|
const smallWidthPaths = ["/settings", "/upload"];
|
|
const isSmallWidthPath = smallWidthPaths.some((path) =>
|
|
pathname.startsWith(path),
|
|
);
|
|
|
|
const x = showLayout ? "0px" : `calc(-${SIDEBAR_WIDTH / 2}px + 50vw)`;
|
|
const y = showLayout ? "0px" : `calc(-${HEADER_HEIGHT / 2}px + 50vh)`;
|
|
const translateY = showLayout ? "0px" : `-50vh`;
|
|
const translateX = showLayout ? "0px" : `-50vw`;
|
|
|
|
// For all other pages, render with Langflow-styled navigation and task menu
|
|
return (
|
|
<>
|
|
<AnimatedConditional
|
|
className="[grid-area:header] bg-background border-b"
|
|
vertical
|
|
slide
|
|
isOpen={showLayout}
|
|
delay={ANIMATION_DURATION / 2}
|
|
>
|
|
<Header />
|
|
</AnimatedConditional>
|
|
|
|
{/* Sidebar Navigation */}
|
|
<AnimatedConditional
|
|
isOpen={showLayout}
|
|
slide
|
|
className={`border-r bg-background overflow-hidden [grid-area:nav] w-[${SIDEBAR_WIDTH}px]`}
|
|
>
|
|
{showLayout && (
|
|
<Navigation
|
|
conversations={conversations}
|
|
isConversationsLoading={isConversationsLoading}
|
|
onNewConversation={handleNewConversation}
|
|
/>
|
|
)}
|
|
</AnimatedConditional>
|
|
|
|
{/* Main Content */}
|
|
<main className="overflow-hidden w-full flex items-center justify-center [grid-area:main]">
|
|
<motion.div
|
|
initial={{
|
|
width: showLayout ? "100%" : "100vw",
|
|
height: showLayout ? "100%" : "100vh",
|
|
x: x,
|
|
y: y,
|
|
translateX: translateX,
|
|
translateY: translateY,
|
|
}}
|
|
animate={{
|
|
width: showLayout ? "100%" : "850px",
|
|
borderRadius: showLayout ? "0" : "16px",
|
|
border: showLayout ? "0" : "1px solid hsl(var(--border))",
|
|
height: showLayout ? "100%" : "800px",
|
|
x: x,
|
|
y: y,
|
|
translateX: translateX,
|
|
translateY: translateY,
|
|
}}
|
|
transition={{
|
|
duration: ANIMATION_DURATION,
|
|
ease: "easeOut",
|
|
}}
|
|
className={cn(
|
|
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-y-auto",
|
|
!showLayout &&
|
|
"absolute max-h-[calc(100vh-190px)] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]",
|
|
showLayout && !isOnChatPage && "bg-background",
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"h-full bg-background w-full",
|
|
showLayout && !isOnChatPage && "p-6 container",
|
|
showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
|
|
!showLayout && "p-0 py-2",
|
|
)}
|
|
>
|
|
<motion.div
|
|
initial={{
|
|
opacity: showLayout ? 1 : 0,
|
|
}}
|
|
animate={{
|
|
opacity: "100%",
|
|
}}
|
|
transition={{
|
|
duration: ANIMATION_DURATION,
|
|
ease: "easeOut",
|
|
delay: ANIMATION_DURATION,
|
|
}}
|
|
className={cn("w-full h-full")}
|
|
>
|
|
{showLayout && (
|
|
<div className={cn("w-full h-full", !showLayout && "hidden")}>
|
|
{children}
|
|
</div>
|
|
)}
|
|
{!showLayout && (
|
|
<OnboardingContent
|
|
handleStepComplete={handleStepComplete}
|
|
handleStepBack={handleStepBack}
|
|
currentStep={currentStep}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: showLayout ? 0 : 1, y: showLayout ? 20 : 0 }}
|
|
transition={{ duration: ANIMATION_DURATION, ease: "easeOut" }}
|
|
className={cn("absolute bottom-6 left-0 right-0")}
|
|
>
|
|
<ProgressBar
|
|
currentStep={currentStep}
|
|
totalSteps={TOTAL_ONBOARDING_STEPS}
|
|
onSkip={handleSkipOnboarding}
|
|
/>
|
|
</motion.div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|