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

Add react query provider to app

Browse source
This commit is contained in:
Lucas Oliveira 2025-09-04 18:16:28 -03:00
parent 70d3434e5b
commit 047fb305c6
3 changed files with 100 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

151
frontend/src/app/chat/page.tsx
View file

@ -22,6 +22,7 @@ import {
Zap,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
interface Message {
role: "user" | "assistant";
@ -191,7 +192,7 @@ function ChatPage() {
"Upload failed with status:",
response.status,
"Response:",
errorText
errorText,
);
throw new Error("Failed to process document");
}
@ -244,7 +245,7 @@ function ChatPage() {
...prev,
[endpoint]: result.response_id,
}));
// If this is a new conversation (no currentConversationId), set it now
if (!currentConversationId) {
setCurrentConversationId(result.response_id);
@ -436,8 +437,8 @@ function ChatPage() {
// 2. It's different from the last loaded conversation AND
// 3. User is not in the middle of an interaction
if (
conversationData &&
conversationData.messages &&
conversationData &&
conversationData.messages &&
lastLoadedConversationRef.current !== conversationData.response_id &&
!isUserInteracting &&
!isForkingInProgress
@ -445,7 +446,7 @@ function ChatPage() {
console.log(
"Loading conversation with",
conversationData.messages.length,
"messages"
"messages",
);
// Convert backend message format to frontend Message interface
const convertedMessages: Message[] = conversationData.messages.map(
@ -459,7 +460,7 @@ function ChatPage() {
content: msg.content,
timestamp: new Date(msg.timestamp || new Date()),
// Add any other necessary properties
})
}),
);
setMessages(convertedMessages);
@ -471,11 +472,7 @@ function ChatPage() {
[conversationData.endpoint]: conversationData.response_id,
}));
}
}, [
conversationData,
isUserInteracting,
isForkingInProgress,
]);
}, [conversationData, isUserInteracting, isForkingInProgress]);
// Handle new conversation creation - only reset messages when placeholderConversation is set
useEffect(() => {
@ -547,7 +544,7 @@ function ChatPage() {
console.log(
"Chat page received file upload error event:",
filename,
error
error,
);
// Replace the last message with error message
@ -561,37 +558,37 @@ function ChatPage() {
window.addEventListener(
"fileUploadStart",
handleFileUploadStart as EventListener
handleFileUploadStart as EventListener,
);
window.addEventListener(
"fileUploaded",
handleFileUploaded as EventListener
handleFileUploaded as EventListener,
);
window.addEventListener(
"fileUploadComplete",
handleFileUploadComplete as EventListener
handleFileUploadComplete as EventListener,
);
window.addEventListener(
"fileUploadError",
handleFileUploadError as EventListener
handleFileUploadError as EventListener,
);
return () => {
window.removeEventListener(
"fileUploadStart",
handleFileUploadStart as EventListener
handleFileUploadStart as EventListener,
);
window.removeEventListener(
"fileUploaded",
handleFileUploaded as EventListener
handleFileUploaded as EventListener,
);
window.removeEventListener(
"fileUploadComplete",
handleFileUploadComplete as EventListener
handleFileUploadComplete as EventListener,
);
window.removeEventListener(
"fileUploadError",
handleFileUploadError as EventListener
handleFileUploadError as EventListener,
);
};
}, [endpoint, setPreviousResponseIds]);
@ -617,6 +614,10 @@ function ChatPage() {
};
}, [isFilterDropdownOpen]);
const { data: nudges = [], refetch: refetchNudges } = useGetNudgesQuery(
previousResponseIds[endpoint],
);
const handleSSEStream = async (userMessage: Message) => {
const apiEndpoint = endpoint === "chat" ? "/api/chat" : "/api/langflow";
@ -719,7 +720,7 @@ function ChatPage() {
console.log(
"Received chunk:",
chunk.type || chunk.object,
chunk
chunk,
);
// Extract response ID if present
@ -735,14 +736,14 @@ function ChatPage() {
if (chunk.delta.function_call) {
console.log(
"Function call in delta:",
chunk.delta.function_call
chunk.delta.function_call,
);
// Check if this is a new function call
if (chunk.delta.function_call.name) {
console.log(
"New function call:",
chunk.delta.function_call.name
chunk.delta.function_call.name,
);
const functionCall: FunctionCall = {
name: chunk.delta.function_call.name,
@ -758,7 +759,7 @@ function ChatPage() {
else if (chunk.delta.function_call.arguments) {
console.log(
"Function call arguments delta:",
chunk.delta.function_call.arguments
chunk.delta.function_call.arguments,
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
@ -770,14 +771,14 @@ function ChatPage() {
chunk.delta.function_call.arguments;
console.log(
"Accumulated arguments:",
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
// Try to parse arguments if they look complete
if (lastFunctionCall.argumentsString.includes("}")) {
try {
const parsed = JSON.parse(
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed";
@ -785,7 +786,7 @@ function ChatPage() {
} catch (e) {
console.log(
"Arguments not yet complete or invalid JSON:",
e
e,
);
}
}
@ -818,7 +819,7 @@ function ChatPage() {
else if (toolCall.function.arguments) {
console.log(
"Tool call arguments delta:",
toolCall.function.arguments
toolCall.function.arguments,
);
const lastFunctionCall =
currentFunctionCalls[
@ -832,7 +833,7 @@ function ChatPage() {
toolCall.function.arguments;
console.log(
"Accumulated tool arguments:",
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
// Try to parse arguments if they look complete
@ -841,7 +842,7 @@ function ChatPage() {
) {
try {
const parsed = JSON.parse(
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed";
@ -849,7 +850,7 @@ function ChatPage() {
} catch (e) {
console.log(
"Tool arguments not yet complete or invalid JSON:",
e
e,
);
}
}
@ -881,7 +882,7 @@ function ChatPage() {
console.log(
"Error parsing function call on finish:",
fc,
e
e,
);
}
}
@ -897,12 +898,12 @@ function ChatPage() {
console.log(
"🟢 CREATING function call (added):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name
chunk.item.tool_name || chunk.item.name,
);
// Try to find an existing pending call to update (created by earlier deltas)
let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id
(fc) => fc.id === chunk.item.id,
);
if (!existing) {
existing = [...currentFunctionCalls]
@ -911,7 +912,7 @@ function ChatPage() {
(fc) =>
fc.status === "pending" &&
!fc.id &&
fc.name === (chunk.item.tool_name || chunk.item.name)
fc.name === (chunk.item.tool_name || chunk.item.name),
);
}
@ -924,7 +925,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments;
console.log(
"🟢 UPDATED existing pending function call with id:",
existing.id
existing.id,
);
} else {
const functionCall: FunctionCall = {
@ -942,7 +943,7 @@ function ChatPage() {
currentFunctionCalls.map((fc) => ({
id: fc.id,
name: fc.name,
}))
})),
);
}
}
@ -953,7 +954,7 @@ function ChatPage() {
) {
console.log(
"Function args delta (Realtime API):",
chunk.delta
chunk.delta,
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
@ -964,7 +965,7 @@ function ChatPage() {
lastFunctionCall.argumentsString += chunk.delta || "";
console.log(
"Accumulated arguments (Realtime API):",
lastFunctionCall.argumentsString
lastFunctionCall.argumentsString,
);
}
}
@ -975,26 +976,26 @@ function ChatPage() {
) {
console.log(
"Function args done (Realtime API):",
chunk.arguments
chunk.arguments,
);
const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1];
if (lastFunctionCall) {
try {
lastFunctionCall.arguments = JSON.parse(
chunk.arguments || "{}"
chunk.arguments || "{}",
);
lastFunctionCall.status = "completed";
console.log(
"Parsed function arguments (Realtime API):",
lastFunctionCall.arguments
lastFunctionCall.arguments,
);
} catch (e) {
lastFunctionCall.arguments = { raw: chunk.arguments };
lastFunctionCall.status = "error";
console.log(
"Error parsing function arguments (Realtime API):",
e
e,
);
}
}
@ -1008,14 +1009,14 @@ function ChatPage() {
console.log(
"🔵 UPDATING function call (done):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name
chunk.item.tool_name || chunk.item.name,
);
console.log(
"🔵 Looking for existing function calls:",
currentFunctionCalls.map((fc) => ({
id: fc.id,
name: fc.name,
}))
})),
);
// Find existing function call by ID or name
@ -1023,14 +1024,14 @@ function ChatPage() {
(fc) =>
fc.id === chunk.item.id ||
fc.name === chunk.item.tool_name ||
fc.name === chunk.item.name
fc.name === chunk.item.name,
);
if (functionCall) {
console.log(
"🔵 FOUND existing function call, updating:",
functionCall.id,
functionCall.name
functionCall.name,
);
// Update existing function call with completion data
functionCall.status =
@ -1053,7 +1054,7 @@ function ChatPage() {
"🔴 WARNING: Could not find existing function call to update:",
chunk.item.id,
chunk.item.tool_name,
chunk.item.name
chunk.item.name,
);
}
}
@ -1074,7 +1075,7 @@ function ChatPage() {
fc.name === chunk.item.name ||
fc.name === chunk.item.type ||
fc.name.includes(chunk.item.type.replace("_call", "")) ||
chunk.item.type.includes(fc.name)
chunk.item.type.includes(fc.name),
);
if (functionCall) {
@ -1118,12 +1119,12 @@ function ChatPage() {
"🟡 CREATING tool call (added):",
chunk.item.id,
chunk.item.tool_name || chunk.item.name,
chunk.item.type
chunk.item.type,
);
// Dedupe by id or pending with same name
let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id
(fc) => fc.id === chunk.item.id,
);
if (!existing) {
existing = [...currentFunctionCalls]
@ -1135,7 +1136,7 @@ function ChatPage() {
fc.name ===
(chunk.item.tool_name ||
chunk.item.name ||
chunk.item.type)
chunk.item.type),
);
}
@ -1151,7 +1152,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments;
console.log(
"🟡 UPDATED existing pending tool call with id:",
existing.id
existing.id,
);
} else {
const functionCall = {
@ -1172,7 +1173,7 @@ function ChatPage() {
id: fc.id,
name: fc.name,
type: fc.type,
}))
})),
);
}
}
@ -1268,6 +1269,9 @@ function ChatPage() {
if (!controller.signal.aborted && thisStreamId === streamIdRef.current) {
setMessages((prev) => [...prev, finalMessage]);
setStreamingMessage(null);
if (previousResponseIds[endpoint]) {
refetchNudges();
}
}
// Store the response ID for the next request for this endpoint
@ -1280,7 +1284,7 @@ function ChatPage() {
...prev,
[endpoint]: newResponseId,
}));
// If this is a new conversation (no currentConversationId), set it now
if (!currentConversationId) {
setCurrentConversationId(newResponseId);
@ -1385,6 +1389,9 @@ function ChatPage() {
timestamp: new Date(),
};
setMessages((prev) => [...prev, assistantMessage]);
if (result.response_id) {
refetchNudges();
}
// Store the response ID if present for this endpoint
if (result.response_id) {
@ -1392,7 +1399,7 @@ function ChatPage() {
...prev,
[endpoint]: result.response_id,
}));
// If this is a new conversation (no currentConversationId), set it now
if (!currentConversationId) {
setCurrentConversationId(result.response_id);
@ -1440,7 +1447,7 @@ function ChatPage() {
const handleForkConversation = (
messageIndex: number,
event?: React.MouseEvent
event?: React.MouseEvent,
) => {
// Prevent any default behavior and stop event propagation
if (event) {
@ -1508,7 +1515,7 @@ function ChatPage() {
const renderFunctionCalls = (
functionCalls: FunctionCall[],
messageIndex?: number
messageIndex?: number,
) => {
if (!functionCalls || functionCalls.length === 0) return null;
@ -1737,12 +1744,6 @@ function ChatPage() {
);
};
const suggestionChips = [
"Show me this quarter's top 10 deals",
"Summarize recent client interactions",
"Search OpenSearch for mentions of our competitors",
];
const handleSuggestionClick = (suggestion: string) => {
setInput(suggestion);
inputRef.current?.focus();
@ -1883,7 +1884,7 @@ function ChatPage() {
<div className="flex-1 min-w-0">
{renderFunctionCalls(
message.functionCalls || [],
index
index,
)}
<p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
{message.content}
@ -1914,7 +1915,7 @@ function ChatPage() {
<div className="flex-1">
{renderFunctionCalls(
streamingMessage.functionCalls,
messages.length
messages.length,
)}
<p className="text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
{streamingMessage.content}
@ -1963,8 +1964,8 @@ function ChatPage() {
{!streamingMessage && (
<div className="flex-shrink-0 p-6 pb-4 flex justify-center">
<div className="w-full max-w-[75%] relative">
<div className="flex gap-2 justify-start overflow-hidden">
{suggestionChips.map((suggestion, index) => (
<div className="flex gap-2 justify-start overflow-x-auto scrollbar-hide">
{(nudges as string[]).map((suggestion: string, index: number) => (
<button
key={index}
onClick={() => handleSuggestionClick(suggestion)}
@ -2070,7 +2071,7 @@ function ChatPage() {
const filteredFilters = availableFilters.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase())
.includes(filterSearchTerm.toLowerCase()),
);
if (e.key === "Escape") {
@ -2088,7 +2089,7 @@ function ChatPage() {
if (e.key === "ArrowDown") {
e.preventDefault();
setSelectedFilterIndex((prev) =>
prev < filteredFilters.length - 1 ? prev + 1 : 0
prev < filteredFilters.length - 1 ? prev + 1 : 0,
);
return;
}
@ -2096,7 +2097,7 @@ function ChatPage() {
if (e.key === "ArrowUp") {
e.preventDefault();
setSelectedFilterIndex((prev) =>
prev > 0 ? prev - 1 : filteredFilters.length - 1
prev > 0 ? prev - 1 : filteredFilters.length - 1,
);
return;
}
@ -2114,7 +2115,7 @@ function ChatPage() {
) {
e.preventDefault();
handleFilterSelect(
filteredFilters[selectedFilterIndex]
filteredFilters[selectedFilterIndex],
);
return;
}
@ -2133,7 +2134,7 @@ function ChatPage() {
) {
e.preventDefault();
handleFilterSelect(
filteredFilters[selectedFilterIndex]
filteredFilters[selectedFilterIndex],
);
return;
}
@ -2213,7 +2214,7 @@ function ChatPage() {
.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase())
.includes(filterSearchTerm.toLowerCase()),
)
.map((filter, index) => (
<button
@ -2239,7 +2240,7 @@ function ChatPage() {
{availableFilters.filter((filter) =>
filter.name
.toLowerCase()
.includes(filterSearchTerm.toLowerCase())
.includes(filterSearchTerm.toLowerCase()),
).length === 0 &&
filterSearchTerm && (
<div className="px-2 py-3 text-sm text-muted-foreground">

24
frontend/src/app/layout.tsx
View file

@ -8,6 +8,7 @@ import { KnowledgeFilterProvider } from "@/contexts/knowledge-filter-context";
import { ChatProvider } from "@/contexts/chat-context";
import { LayoutWrapper } from "@/components/layout-wrapper";
import { Toaster } from "@/components/ui/sonner";
import Providers from "./providers";
const inter = Inter({
variable: "--font-sans",
@ -28,7 +29,6 @@ export const metadata: Metadata = {
title: "OpenRAG",
description: "Open source RAG (Retrieval Augmented Generation) system",
};
export default function RootLayout({
children,
}: Readonly<{
@ -45,17 +45,17 @@ export default function RootLayout({
enableSystem
disableTransitionOnChange
>
<AuthProvider>
<TaskProvider>
<KnowledgeFilterProvider>
<ChatProvider>
<LayoutWrapper>
{children}
</LayoutWrapper>
</ChatProvider>
</KnowledgeFilterProvider>
</TaskProvider>
</AuthProvider>
<Providers>
<AuthProvider>
<TaskProvider>
<KnowledgeFilterProvider>
<ChatProvider>
<LayoutWrapper>{children}</LayoutWrapper>
</ChatProvider>
</KnowledgeFilterProvider>
</TaskProvider>
</AuthProvider>
</Providers>
</ThemeProvider>
<Toaster />
</body>

12
frontend/src/app/providers.tsx Normal file
View file

@ -0,0 +1,12 @@
"use client";
import { QueryClientProvider } from "@tanstack/react-query";
import { getQueryClient } from "@/app/api/get-query-client";
import type * as React from "react";
export default function Providers({ children }: { children: React.ReactNode }) {
const queryClient = getQueryClient();
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}