gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make nudges and new conversations appear after onboarding, fix behavior on conversations (#418)

Browse source 
* fixed docker to old way

* added refetch when nudges are not fetched

* show skip overview just when finishing embedding

* just show children when show layout

* increased total onboarding steps

* made assistant message be saved on local storage to save progress on onboarding

* clean all items from local storage on finish onboarding

* only show navigation when onboarding is complete

* fixed navigation style to not placeholder for new conversation, not show loading state, and to show correct files

* fixed chat losing past message when navigating out of the chat

* fixed conversation be selected even though its a new conversation

* set the messages as just the user message when messages.length is 1

* fixed conversation be selected when exiting onboarding
This commit is contained in:
Lucas Oliveira 2025-11-19 14:23:34 -03:00 • committed by GitHub
parent 60598b65ca
commit dce97c97e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 1132 additions and 1148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Dockerfile.langflow
View file

@ -1,4 +1,4 @@
FROM langflowai/langflow-nightly:1.6.3.dev1
FROM langflowai/langflow-nightly:1.7.0.dev5
EXPOSE 7860

2
docker-compose-cpu.yml
View file

@ -91,7 +91,7 @@ services:
langflow:
volumes:
- ./flows:/app/flows:U,z
image: langflowai/langflow-nightly:${LANGFLOW_VERSION:-1.7.0.dev5}
image: phact/openrag-langflow:${LANGFLOW_VERSION:-latest}
# build:
# context: .
# dockerfile: Dockerfile.langflow

5
frontend/app/api/queries/useGetNudgesQuery.ts
View file

@ -76,6 +76,11 @@ export const useGetNudgesQuery = (
{
queryKey: ["nudges", chatId, filters, limit, scoreThreshold],
queryFn: getNudges,
refetchInterval: (query) => {
// If data is empty, refetch every 5 seconds
const data = query.state.data;
return Array.isArray(data) && data.length === 0 ? 5000 : false;
},
...options,
},
queryClient,

4
frontend/app/chat/page.tsx
View file

@ -782,7 +782,11 @@ function ChatPage() {
timestamp: new Date(),
};
if (messages.length === 1) {
setMessages([userMessage]);
} else {
setMessages((prev) => [...prev, userMessage]);
}
setInput("");
setLoading(true);
setIsFilterHighlighted(false);

7
frontend/app/onboarding/_components/animated-provider-steps.tsx
View file

@ -10,6 +10,7 @@ import {
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
import { cn } from "@/lib/utils";
export function AnimatedProviderSteps({
@ -17,7 +18,7 @@ export function AnimatedProviderSteps({
isCompleted,
setCurrentStep,
steps,
storageKey = "provider-steps",
storageKey = ONBOARDING_CARD_STEPS_KEY,
processingStartTime,
hasError = false,
}: {
@ -34,7 +35,7 @@ export function AnimatedProviderSteps({
// Initialize start time from prop or local storage
useEffect(() => {
const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
const storedElapsedTime = localStorage.getItem(storageKey);
if (isCompleted && storedElapsedTime) {
// If completed, use stored elapsed time
@ -60,7 +61,7 @@ export function AnimatedProviderSteps({
if (isCompleted && startTime) {
const elapsed = Date.now() - startTime;
setElapsedTime(elapsed);
localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString());
localStorage.setItem(storageKey, elapsed.toString());
}
}, [isCompleted, startTime, storageKey]);

2
frontend/app/onboarding/_components/onboarding-card.tsx
View file

@ -24,6 +24,7 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
import { cn } from "@/lib/utils";
import { AnimatedProviderSteps } from "./animated-provider-steps";
import { AnthropicOnboarding } from "./anthropic-onboarding";
@ -527,6 +528,7 @@ const OnboardingCard = ({
setCurrentStep={setCurrentStep}
steps={isEmbedding ? EMBEDDING_STEP_LIST : STEP_LIST}
processingStartTime={processingStartTime}
storageKey={ONBOARDING_CARD_STEPS_KEY}
hasError={!!error}
/>
</motion.div>

67
frontend/app/onboarding/_components/onboarding-content.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { StickToBottom } from "use-stick-to-bottom";
import { AssistantMessage } from "@/app/chat/_components/assistant-message";
import Nudges from "@/app/chat/_components/nudges";
@ -8,26 +8,79 @@ import { UserMessage } from "@/app/chat/_components/user-message";
import type { Message } from "@/app/chat/_types/types";
import OnboardingCard from "@/app/onboarding/_components/onboarding-card";
import { useChatStreaming } from "@/hooks/useChatStreaming";
import {
ONBOARDING_ASSISTANT_MESSAGE_KEY,
ONBOARDING_SELECTED_NUDGE_KEY,
} from "@/lib/constants";
import { OnboardingStep } from "./onboarding-step";
import OnboardingUpload from "./onboarding-upload";
export function OnboardingContent({
handleStepComplete,
handleStepBack,
currentStep,
}: {
handleStepComplete: () => void;
handleStepBack: () => void;
currentStep: number;
}) {
const parseFailedRef = useRef(false);
const [responseId, setResponseId] = useState<string | null>(null);
const [selectedNudge, setSelectedNudge] = useState<string>("");
const [selectedNudge, setSelectedNudge] = useState<string>(() => {
// Retrieve selected nudge from localStorage on mount
if (typeof window === "undefined") return "";
return localStorage.getItem(ONBOARDING_SELECTED_NUDGE_KEY) || "";
});
const [assistantMessage, setAssistantMessage] = useState<Message | null>(
null,
() => {
// Retrieve assistant message from localStorage on mount
if (typeof window === "undefined") return null;
const savedMessage = localStorage.getItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
if (savedMessage) {
try {
const parsed = JSON.parse(savedMessage);
// Convert timestamp string back to Date object
return {
...parsed,
timestamp: new Date(parsed.timestamp),
};
} catch (error) {
console.error("Failed to parse saved assistant message:", error);
parseFailedRef.current = true;
// Clear corrupted data - will go back a step in useEffect
if (typeof window !== "undefined") {
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
}
return null;
}
}
return null;
},
);
// Handle parse errors by going back a step
useEffect(() => {
if (parseFailedRef.current && currentStep >= 2) {
handleStepBack();
}
}, [handleStepBack, currentStep]);
const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
onComplete: (message, newResponseId) => {
setAssistantMessage(message);
// Save assistant message to localStorage when complete
if (typeof window !== "undefined") {
try {
localStorage.setItem(
ONBOARDING_ASSISTANT_MESSAGE_KEY,
JSON.stringify(message),
);
} catch (error) {
console.error("Failed to save assistant message to localStorage:", error);
}
}
if (newResponseId) {
setResponseId(newResponseId);
}
@ -47,7 +100,15 @@ export function OnboardingContent({
const handleNudgeClick = async (nudge: string) => {
setSelectedNudge(nudge);
// Save selected nudge to localStorage
if (typeof window !== "undefined") {
localStorage.setItem(ONBOARDING_SELECTED_NUDGE_KEY, nudge);
}
setAssistantMessage(null);
// Clear saved assistant message when starting a new conversation
if (typeof window !== "undefined") {
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
}
setTimeout(async () => {
await sendMessage({
prompt: nudge,

2
frontend/app/onboarding/_components/onboarding-upload.tsx
View file

@ -4,6 +4,7 @@ import { useGetNudgesQuery } from "@/app/api/queries/useGetNudgesQuery";
import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
import { AnimatedProviderSteps } from "@/app/onboarding/_components/animated-provider-steps";
import { Button } from "@/components/ui/button";
import { ONBOARDING_UPLOAD_STEPS_KEY } from "@/lib/constants";
import { uploadFile } from "@/lib/upload-utils";
interface OnboardingUploadProps {
@ -147,6 +148,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
setCurrentStep={setCurrentStep}
isCompleted={false}
steps={STEP_LIST}
storageKey={ONBOARDING_UPLOAD_STEPS_KEY}
/>
</motion.div>
)}

2
frontend/app/onboarding/_components/progress-bar.tsx
View file

@ -32,7 +32,7 @@ export function ProgressBar({
</span>
</div>
<div className="flex-1 flex justify-end">
{currentStep > 0 && onSkip && (
{currentStep > 1 && onSkip && (
<Button
variant="link"
size="sm"

23
frontend/components/chat-renderer.tsx
View file

@ -18,7 +18,11 @@ import { useChat } from "@/contexts/chat-context";
import {
ANIMATION_DURATION,
HEADER_HEIGHT,
ONBOARDING_ASSISTANT_MESSAGE_KEY,
ONBOARDING_CARD_STEPS_KEY,
ONBOARDING_SELECTED_NUDGE_KEY,
ONBOARDING_STEP_KEY,
ONBOARDING_UPLOAD_STEPS_KEY,
SIDEBAR_WIDTH,
TOTAL_ONBOARDING_STEPS,
} from "@/lib/constants";
@ -81,15 +85,29 @@ export function ChatRenderer({
// 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);
}
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);
}
setShowLayout(true);
};
@ -124,11 +142,13 @@ export function ChatRenderer({
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 */}
@ -185,12 +205,15 @@ export function ChatRenderer({
}}
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}
/>
)}

226
frontend/components/navigation.tsx
View file

@ -83,7 +83,6 @@ export function Navigation({
startNewConversation,
conversationDocs,
conversationData,
addConversationDoc,
refreshConversations,
placeholderConversation,
setPlaceholderConversation,
@ -92,12 +91,12 @@ export function Navigation({
const { loading } = useLoadingStore();
const [loadingNewConversation, setLoadingNewConversation] = useState(false);
const [previousConversationCount, setPreviousConversationCount] = useState(0);
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [conversationToDelete, setConversationToDelete] =
useState<ChatConversation | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const hasCompletedInitialLoad = useRef(false);
const mountTimeRef = useRef<number | null>(null);
const { selectedFilter, setSelectedFilter } = useKnowledgeFilter();
@ -140,8 +139,6 @@ export function Navigation({
});
const handleNewConversation = () => {
setLoadingNewConversation(true);
// Use the prop callback if provided, otherwise use the context method
if (onNewConversation) {
onNewConversation();
@ -153,96 +150,8 @@ export function Navigation({
if (typeof window !== "undefined") {
window.dispatchEvent(new CustomEvent("newConversation"));
}
// Clear loading state after a short delay to show the new conversation is created
setTimeout(() => {
setLoadingNewConversation(false);
}, 300);
};
const handleFileUpload = async (file: File) => {
console.log("Navigation file upload:", file.name);
// Trigger loading start event for chat page
window.dispatchEvent(
new CustomEvent("fileUploadStart", {
detail: { filename: file.name },
}),
);
try {
const formData = new FormData();
formData.append("file", file);
formData.append("endpoint", endpoint);
const response = await fetch("/api/upload_context", {
method: "POST",
body: formData,
});
if (!response.ok) {
const errorText = await response.text();
console.error("Upload failed:", errorText);
// Trigger error event for chat page to handle
window.dispatchEvent(
new CustomEvent("fileUploadError", {
detail: {
filename: file.name,
error: "Failed to process document",
},
}),
);
// Trigger loading end event
window.dispatchEvent(new CustomEvent("fileUploadComplete"));
return;
}
const result = await response.json();
console.log("Upload result:", result);
// Add the file to conversation docs
if (result.filename) {
addConversationDoc(result.filename);
}
// Trigger file upload event for chat page to handle
window.dispatchEvent(
new CustomEvent("fileUploaded", {
detail: { file, result },
}),
);
// Trigger loading end event
window.dispatchEvent(new CustomEvent("fileUploadComplete"));
} catch (error) {
console.error("Upload failed:", error);
// Trigger loading end event even on error
window.dispatchEvent(new CustomEvent("fileUploadComplete"));
// Trigger error event for chat page to handle
window.dispatchEvent(
new CustomEvent("fileUploadError", {
detail: { filename: file.name, error: "Failed to process document" },
}),
);
}
};
const handleFilePickerClick = () => {
fileInputRef.current?.click();
};
const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
if (files && files.length > 0) {
handleFileUpload(files[0]);
}
// Reset the input so the same file can be selected again
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
};
const handleDeleteConversation = (
conversation: ChatConversation,
@ -303,15 +212,43 @@ export function Navigation({
const isOnChatPage = pathname === "/" || pathname === "/chat";
const isOnKnowledgePage = pathname.startsWith("/knowledge");
// Track mount time to prevent auto-selection right after component mounts (e.g., after onboarding)
useEffect(() => {
if (mountTimeRef.current === null) {
mountTimeRef.current = Date.now();
}
}, []);
// Track when initial load completes
useEffect(() => {
if (!isConversationsLoading && !hasCompletedInitialLoad.current) {
hasCompletedInitialLoad.current = true;
// Set initial count after first load completes
setPreviousConversationCount(conversations.length);
}
}, [isConversationsLoading, conversations.length]);
// Clear placeholder when conversation count increases (new conversation was created)
useEffect(() => {
const currentCount = conversations.length;
const timeSinceMount = mountTimeRef.current
? Date.now() - mountTimeRef.current
: Infinity;
const MIN_TIME_AFTER_MOUNT = 2000; // 2 seconds - prevents selection right after onboarding
// If we had a placeholder and the conversation count increased, clear the placeholder and highlight the new conversation
// Only select if:
// 1. We have a placeholder (new conversation was created)
// 2. Initial load has completed (prevents selection on browser refresh)
// 3. Count increased (new conversation appeared)
// 4. Not currently loading
// 5. Enough time has passed since mount (prevents selection after onboarding completes)
if (
placeholderConversation &&
hasCompletedInitialLoad.current &&
currentCount > previousConversationCount &&
conversations.length > 0
conversations.length > 0 &&
!isConversationsLoading &&
timeSinceMount >= MIN_TIME_AFTER_MOUNT
) {
setPlaceholderConversation(null);
// Highlight the most recent conversation (first in sorted array) without loading its messages
@ -321,8 +258,10 @@ export function Navigation({
}
}
// Update the previous count
// Update the previous count only after initial load
if (hasCompletedInitialLoad.current) {
setPreviousConversationCount(currentCount);
}
}, [
conversations.length,
placeholderConversation,
@ -330,6 +269,7 @@ export function Navigation({
previousConversationCount,
conversations,
setCurrentConversationId,
isConversationsLoading,
]);
useEffect(() => {
@ -341,10 +281,10 @@ export function Navigation({
);
}
if (isOnChatPage) {
if (isOnChatPage && !isConversationsLoading) {
if (conversations.length === 0 && !placeholderConversation) {
handleNewConversation();
} else if (activeConvo && !conversationLoaded) {
} else if (activeConvo) {
loadConversation(activeConvo);
refreshConversations();
} else if (
@ -431,35 +371,22 @@ export function Navigation({
<div className="flex-1 min-h-0 overflow-y-auto scrollbar-hide">
<div className="space-y-1 flex flex-col">
{loadingNewConversation || isConversationsLoading ? (
<div className="text-[13px] text-muted-foreground p-2">
Loading...
{/* Show skeleton loaders when loading and no conversations exist */}
{isConversationsLoading && conversations.length === 0 ? (
[0,1].map((skeletonIndex) => (
<div
key={`conversation-skeleton-${skeletonIndex}`}
className={cn("w-full px-3 h-11 rounded-lg animate-pulse", skeletonIndex === 0 ? "bg-accent/50" : "")}
>
<div className="h-3 bg-muted-foreground/20 rounded w-3/4 mt-3.5" />
</div>
))
) : (
<>
{/* Show placeholder conversation if it exists */}
{placeholderConversation && (
<button
type="button"
className="w-full px-3 rounded-lg bg-accent border border-dashed border-accent cursor-pointer group text-left h-[44px]"
onClick={() => {
// Don't load placeholder as a real conversation, just focus the input
if (typeof window !== "undefined") {
window.dispatchEvent(new CustomEvent("focusInput"));
}
}}
>
<div className="text-[13px] font-medium text-foreground truncate">
{placeholderConversation.title}
</div>
<div className="text-xs text-muted-foreground">
Start typing to begin...
</div>
</button>
)}
{/* Show regular conversations */}
{conversations.length === 0 && !placeholderConversation ? (
{conversations.length === 0 && !isConversationsLoading ? (
<div className="text-[13px] text-muted-foreground py-2 pl-3">
No conversations yet
</div>
@ -469,7 +396,7 @@ export function Navigation({
key={conversation.response_id}
type="button"
className={`w-full px-3 h-11 rounded-lg group relative text-left ${
loading
loading || isConversationsLoading
? "opacity-50 cursor-not-allowed"
: "hover:bg-accent cursor-pointer"
} ${
@ -478,11 +405,11 @@ export function Navigation({
: ""
}`}
onClick={() => {
if (loading) return;
if (loading || isConversationsLoading) return;
loadConversation(conversation);
refreshConversations();
}}
disabled={loading}
disabled={loading || isConversationsLoading}
>
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
@ -493,7 +420,7 @@ export function Navigation({
<DropdownMenu>
<DropdownMenuTrigger
disabled={
loading || deleteSessionMutation.isPending
loading || isConversationsLoading || deleteSessionMutation.isPending
}
asChild
>
@ -543,51 +470,6 @@ export function Navigation({
</>
)}
</div>
{/* Conversation Knowledge Section - appears right after last conversation
<div className="flex-shrink-0 mt-4">
<div className="flex items-center justify-between mb-3 mx-3">
<h3 className="text-xs font-medium text-muted-foreground">
Conversation knowledge
</h3>
<button
type="button"
onClick={handleFilePickerClick}
className="p-1 hover:bg-accent rounded"
disabled={loading}
>
<Plus className="h-4 w-4 text-muted-foreground" />
</button>
</div>
<input
ref={fileInputRef}
type="file"
onChange={handleFilePickerChange}
className="hidden"
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
/>
<div className="overflow-y-auto scrollbar-hide space-y-1">
{conversationDocs.length === 0 ? (
<div className="text-[13px] text-muted-foreground py-2 px-3">
No documents yet
</div>
) : (
conversationDocs.map(doc => (
<div
key={`${doc.filename}-${doc.uploadTime.getTime()}`}
className="w-full px-3 h-11 rounded-lg hover:bg-accent cursor-pointer group flex items-center"
>
<FileText className="h-4 w-4 mr-2 text-muted-foreground flex-shrink-0" />
<div className="flex-1 min-w-0">
<div className="text-sm text-foreground truncate">
{doc.filename}
</div>
</div>
</div>
))
)}
</div>
</div> */}
<div className="flex-shrink-0 mt-4">
<div className="flex items-center justify-between mb-3 mx-3">
<h3 className="text-xs font-medium text-muted-foreground">
@ -595,7 +477,7 @@ export function Navigation({
</h3>
</div>
<div className="overflow-y-auto scrollbar-hide space-y-1">
{newConversationFiles?.length === 0 ? (
{(newConversationFiles?.length ?? 0) === 0 ? (
<div className="text-[13px] text-muted-foreground py-2 px-3">
No documents yet
</div>

6
frontend/lib/constants.ts
View file

@ -28,12 +28,16 @@ export const UI_CONSTANTS = {
export const ANIMATION_DURATION = 0.4;
export const SIDEBAR_WIDTH = 280;
export const HEADER_HEIGHT = 54;
export const TOTAL_ONBOARDING_STEPS = 4;
export const TOTAL_ONBOARDING_STEPS = 5;
/**
* Local Storage Keys
*/
export const ONBOARDING_STEP_KEY = "onboarding_current_step";
export const ONBOARDING_ASSISTANT_MESSAGE_KEY = "onboarding_assistant_message";
export const ONBOARDING_SELECTED_NUDGE_KEY = "onboarding_selected_nudge";
export const ONBOARDING_CARD_STEPS_KEY = "onboarding_card_steps";
export const ONBOARDING_UPLOAD_STEPS_KEY = "onboarding_upload_steps";
export const FILES_REGEX =
/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;