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

Merge pull request #181 from langflow-ai/feat/knowledge-page-sweep

Browse source 
Feat/knowledge page design sweep
This commit is contained in:
Cole Goldsmith 2025-10-06 14:30:13 -05:00 • committed by GitHub
commit 33fa5f04b4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 490 additions and 521 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/components/knowledge-dropdown.tsx
View file

@ -7,7 +7,6 @@ import {
FolderOpen, FolderOpen,
Loader2, Loader2,
PlugZap, PlugZap,
Plus,
Upload, Upload,
} from "lucide-react"; } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@ -29,15 +28,7 @@ import { useTask } from "@/contexts/task-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery"; import type { File as SearchFile } from "@/src/app/api/queries/useGetSearchQuery";
interface KnowledgeDropdownProps { export function KnowledgeDropdown() {
active?: boolean;
variant?: "navigation" | "button";
}
export function KnowledgeDropdown({
active,
variant = "navigation",
}: KnowledgeDropdownProps) {
const { addTask } = useTask(); const { addTask } = useTask();
const { refetch: refetchTasks } = useGetTasksQuery(); const { refetch: refetchTasks } = useGetTasksQuery();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -498,28 +489,16 @@ export function KnowledgeDropdown({
return ( return (
<> <>
<div ref={dropdownRef} className="relative"> <div ref={dropdownRef} className="relative">
<button <Button
type="button" type="button"
onClick={() => !isLoading && setIsOpen(!isOpen)} onClick={() => !isLoading && setIsOpen(!isOpen)}
disabled={isLoading} disabled={isLoading}
className={cn(
variant === "button"
? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
: "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
variant === "navigation" && active
? "bg-accent text-accent-foreground shadow-sm"
: variant === "navigation"
? "text-foreground hover:text-accent-foreground"
: "",
)}
> >
{variant === "button" ? (
<> <>
{isLoading ? ( {isLoading &&
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
) : ( }
<Plus className="h-4 w-4" />
)}
<span> <span>
{isLoading {isLoading
? fileUploading ? fileUploading
@ -542,34 +521,7 @@ export function KnowledgeDropdown({
/> />
)} )}
</> </>
) : ( </Button>
<>
<div className="flex items-center flex-1">
{isLoading ? (
<Loader2 className="h-4 w-4 mr-3 shrink-0 animate-spin" />
) : (
<Upload
className={cn(
"h-4 w-4 mr-3 shrink-0",
active
? "text-accent-foreground"
: "text-muted-foreground group-hover:text-foreground",
)}
/>
)}
Knowledge
</div>
{!isLoading && (
<ChevronDown
className={cn(
"h-4 w-4 transition-transform",
isOpen && "rotate-180",
)}
/>
)}
</>
)}
</button>
{isOpen && !isLoading && ( {isOpen && !isLoading && (
<div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50"> <div className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-md z-50">

6
frontend/components/knowledge-filter-panel.tsx
View file

@ -50,6 +50,7 @@ export const filterAccentClasses: Record<FilterColor, string> = {
export function KnowledgeFilterPanel() { export function KnowledgeFilterPanel() {
const { const {
queryOverride,
selectedFilter, selectedFilter,
parsedFilterData, parsedFilterData,
setSelectedFilter, setSelectedFilter,
@ -231,8 +232,8 @@ export function KnowledgeFilterPanel() {
}; };
return ( return (
<div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l z-40 overflow-y-auto"> <div className="h-full bg-background border-l">
<Card className="h-full rounded-none border-0 shadow-lg flex flex-col"> <Card className="h-full rounded-none border-0 flex flex-col">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-lg flex items-center gap-2"> <CardTitle className="text-lg flex items-center gap-2">
@ -320,6 +321,7 @@ export function KnowledgeFilterPanel() {
className="font-mono placeholder:font-mono" className="font-mono placeholder:font-mono"
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
rows={2} rows={2}
disabled={!!queryOverride && !createMode}
/> />
</div> </div>

100
frontend/components/knowledge-search-input.tsx Normal file
View file

@ -0,0 +1,100 @@
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import {
ChangeEvent,
FormEvent,
useCallback,
useEffect,
useState,
} from "react";
import { filterAccentClasses } from "./knowledge-filter-panel";
import { ArrowRight, Search, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
export const KnowledgeSearchInput = () => {
const {
selectedFilter,
setSelectedFilter,
parsedFilterData,
queryOverride,
setQueryOverride,
} = useKnowledgeFilter();
const [searchQueryInput, setSearchQueryInput] = useState(queryOverride || "");
const handleSearch = useCallback(
(e?: FormEvent<HTMLFormElement>) => {
if (e) e.preventDefault();
setQueryOverride(searchQueryInput.trim());
},
[searchQueryInput, setQueryOverride]
);
// Reset the query text when the selected filter changes
useEffect(() => {
setSearchQueryInput(queryOverride);
}, [queryOverride]);
return (
<form
className="flex flex-1 max-w-[min(640px,100%)] min-w-[100px]"
onSubmit={handleSearch}
>
<div className="primary-input group/input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
{selectedFilter?.name && (
<div
title={selectedFilter?.name}
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
filterAccentClasses[parsedFilterData?.color || "zinc"]
}`}
>
<span className="truncate">{selectedFilter?.name}</span>
<X
aria-label="Remove filter"
className="h-4 w-4 flex-shrink-0 cursor-pointer"
onClick={() => setSelectedFilter(null)}
/>
</div>
)}
<Search
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
strokeWidth={1.5}
/>
<input
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
name="search-query"
id="search-query"
type="text"
placeholder="Search your documents..."
value={searchQueryInput}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setSearchQueryInput(e.target.value)
}
/>
{queryOverride && (
<Button
variant="ghost"
className="h-full !px-1.5 !py-0"
type="button"
onClick={() => {
setSearchQueryInput("");
setQueryOverride("");
}}
>
<X className="h-4 w-4" />
</Button>
)}
<Button
variant="ghost"
className={cn(
"h-full !px-1.5 !py-0 hidden group-focus-within/input:block",
searchQueryInput && "block"
)}
type="submit"
>
<ArrowRight className="h-4 w-4" />
</Button>
</div>
</form>
);
};

2
frontend/src/app/api/queries/useGetSearchQuery.ts
View file

@ -180,7 +180,7 @@ export const useGetSearchQuery = (
const queryResult = useQuery( const queryResult = useQuery(
{ {
queryKey: ["search", queryData], queryKey: ["search", queryData, query],
placeholderData: (prev) => prev, placeholderData: (prev) => prev,
queryFn: getFiles, queryFn: getFiles,
...options, ...options,

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

@ -1,7 +1,6 @@
"use client"; "use client";
import { import {
AtSign,
Bot, Bot,
Check, Check,
ChevronDown, ChevronDown,
@ -11,7 +10,6 @@ import {
Loader2, Loader2,
Plus, Plus,
Settings, Settings,
Upload,
User, User,
X, X,
Zap, Zap,
@ -31,7 +29,6 @@ import {
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
import { type EndpointType, useChat } from "@/contexts/chat-context"; import { type EndpointType, useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useLayout } from "@/contexts/layout-context";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { useLoadingStore } from "@/stores/loadingStore"; import { useLoadingStore } from "@/stores/loadingStore";
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery"; import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
@ -151,9 +148,8 @@ function ChatPage() {
const streamAbortRef = useRef<AbortController | null>(null); const streamAbortRef = useRef<AbortController | null>(null);
const streamIdRef = useRef(0); const streamIdRef = useRef(0);
const lastLoadedConversationRef = useRef<string | null>(null); const lastLoadedConversationRef = useRef<string | null>(null);
const { addTask, isMenuOpen } = useTask(); const { addTask } = useTask();
const { totalTopOffset } = useLayout(); const { selectedFilter, parsedFilterData, setSelectedFilter } =
const { selectedFilter, parsedFilterData, isPanelOpen, setSelectedFilter } =
useKnowledgeFilter(); useKnowledgeFilter();
const scrollToBottom = () => { const scrollToBottom = () => {
@ -260,7 +256,7 @@ function ChatPage() {
"Upload failed with status:", "Upload failed with status:",
response.status, response.status,
"Response:", "Response:",
errorText, errorText
); );
throw new Error("Failed to process document"); throw new Error("Failed to process document");
} }
@ -470,7 +466,7 @@ function ChatPage() {
console.log( console.log(
"Loading conversation with", "Loading conversation with",
conversationData.messages.length, conversationData.messages.length,
"messages", "messages"
); );
// Convert backend message format to frontend Message interface // Convert backend message format to frontend Message interface
const convertedMessages: Message[] = conversationData.messages.map( const convertedMessages: Message[] = conversationData.messages.map(
@ -598,7 +594,7 @@ function ChatPage() {
) === "string" ) === "string"
? toolCall.function?.arguments || toolCall.arguments ? toolCall.function?.arguments || toolCall.arguments
: JSON.stringify( : JSON.stringify(
toolCall.function?.arguments || toolCall.arguments, toolCall.function?.arguments || toolCall.arguments
), ),
result: toolCall.result, result: toolCall.result,
status: "completed", status: "completed",
@ -617,7 +613,7 @@ function ChatPage() {
} }
return message; return message;
}, }
); );
setMessages(convertedMessages); setMessages(convertedMessages);
@ -706,7 +702,7 @@ function ChatPage() {
console.log( console.log(
"Chat page received file upload error event:", "Chat page received file upload error event:",
filename, filename,
error, error
); );
// Replace the last message with error message // Replace the last message with error message
@ -720,43 +716,43 @@ function ChatPage() {
window.addEventListener( window.addEventListener(
"fileUploadStart", "fileUploadStart",
handleFileUploadStart as EventListener, handleFileUploadStart as EventListener
); );
window.addEventListener( window.addEventListener(
"fileUploaded", "fileUploaded",
handleFileUploaded as EventListener, handleFileUploaded as EventListener
); );
window.addEventListener( window.addEventListener(
"fileUploadComplete", "fileUploadComplete",
handleFileUploadComplete as EventListener, handleFileUploadComplete as EventListener
); );
window.addEventListener( window.addEventListener(
"fileUploadError", "fileUploadError",
handleFileUploadError as EventListener, handleFileUploadError as EventListener
); );
return () => { return () => {
window.removeEventListener( window.removeEventListener(
"fileUploadStart", "fileUploadStart",
handleFileUploadStart as EventListener, handleFileUploadStart as EventListener
); );
window.removeEventListener( window.removeEventListener(
"fileUploaded", "fileUploaded",
handleFileUploaded as EventListener, handleFileUploaded as EventListener
); );
window.removeEventListener( window.removeEventListener(
"fileUploadComplete", "fileUploadComplete",
handleFileUploadComplete as EventListener, handleFileUploadComplete as EventListener
); );
window.removeEventListener( window.removeEventListener(
"fileUploadError", "fileUploadError",
handleFileUploadError as EventListener, handleFileUploadError as EventListener
); );
}; };
}, [endpoint, setPreviousResponseIds]); }, [endpoint, setPreviousResponseIds]);
const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery( const { data: nudges = [], cancel: cancelNudges } = useGetNudgesQuery(
previousResponseIds[endpoint], previousResponseIds[endpoint]
); );
const handleSSEStream = async (userMessage: Message) => { const handleSSEStream = async (userMessage: Message) => {
@ -861,7 +857,7 @@ function ChatPage() {
console.log( console.log(
"Received chunk:", "Received chunk:",
chunk.type || chunk.object, chunk.type || chunk.object,
chunk, chunk
); );
// Extract response ID if present // Extract response ID if present
@ -877,14 +873,14 @@ function ChatPage() {
if (chunk.delta.function_call) { if (chunk.delta.function_call) {
console.log( console.log(
"Function call in delta:", "Function call in delta:",
chunk.delta.function_call, chunk.delta.function_call
); );
// Check if this is a new function call // Check if this is a new function call
if (chunk.delta.function_call.name) { if (chunk.delta.function_call.name) {
console.log( console.log(
"New function call:", "New function call:",
chunk.delta.function_call.name, chunk.delta.function_call.name
); );
const functionCall: FunctionCall = { const functionCall: FunctionCall = {
name: chunk.delta.function_call.name, name: chunk.delta.function_call.name,
@ -900,7 +896,7 @@ function ChatPage() {
else if (chunk.delta.function_call.arguments) { else if (chunk.delta.function_call.arguments) {
console.log( console.log(
"Function call arguments delta:", "Function call arguments delta:",
chunk.delta.function_call.arguments, chunk.delta.function_call.arguments
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
@ -912,14 +908,14 @@ function ChatPage() {
chunk.delta.function_call.arguments; chunk.delta.function_call.arguments;
console.log( console.log(
"Accumulated arguments:", "Accumulated arguments:",
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
// Try to parse arguments if they look complete // Try to parse arguments if they look complete
if (lastFunctionCall.argumentsString.includes("}")) { if (lastFunctionCall.argumentsString.includes("}")) {
try { try {
const parsed = JSON.parse( const parsed = JSON.parse(
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
lastFunctionCall.arguments = parsed; lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
@ -927,7 +923,7 @@ function ChatPage() {
} catch (e) { } catch (e) {
console.log( console.log(
"Arguments not yet complete or invalid JSON:", "Arguments not yet complete or invalid JSON:",
e, e
); );
} }
} }
@ -960,7 +956,7 @@ function ChatPage() {
else if (toolCall.function.arguments) { else if (toolCall.function.arguments) {
console.log( console.log(
"Tool call arguments delta:", "Tool call arguments delta:",
toolCall.function.arguments, toolCall.function.arguments
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[ currentFunctionCalls[
@ -974,7 +970,7 @@ function ChatPage() {
toolCall.function.arguments; toolCall.function.arguments;
console.log( console.log(
"Accumulated tool arguments:", "Accumulated tool arguments:",
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
// Try to parse arguments if they look complete // Try to parse arguments if they look complete
@ -983,7 +979,7 @@ function ChatPage() {
) { ) {
try { try {
const parsed = JSON.parse( const parsed = JSON.parse(
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
lastFunctionCall.arguments = parsed; lastFunctionCall.arguments = parsed;
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
@ -991,7 +987,7 @@ function ChatPage() {
} catch (e) { } catch (e) {
console.log( console.log(
"Tool arguments not yet complete or invalid JSON:", "Tool arguments not yet complete or invalid JSON:",
e, e
); );
} }
} }
@ -1023,7 +1019,7 @@ function ChatPage() {
console.log( console.log(
"Error parsing function call on finish:", "Error parsing function call on finish:",
fc, fc,
e, e
); );
} }
} }
@ -1039,12 +1035,12 @@ function ChatPage() {
console.log( console.log(
"🟢 CREATING function call (added):", "🟢 CREATING function call (added):",
chunk.item.id, 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) // Try to find an existing pending call to update (created by earlier deltas)
let existing = currentFunctionCalls.find( let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id, (fc) => fc.id === chunk.item.id
); );
if (!existing) { if (!existing) {
existing = [...currentFunctionCalls] existing = [...currentFunctionCalls]
@ -1053,7 +1049,7 @@ function ChatPage() {
(fc) => (fc) =>
fc.status === "pending" && fc.status === "pending" &&
!fc.id && !fc.id &&
fc.name === (chunk.item.tool_name || chunk.item.name), fc.name === (chunk.item.tool_name || chunk.item.name)
); );
} }
@ -1066,7 +1062,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments; chunk.item.inputs || existing.arguments;
console.log( console.log(
"🟢 UPDATED existing pending function call with id:", "🟢 UPDATED existing pending function call with id:",
existing.id, existing.id
); );
} else { } else {
const functionCall: FunctionCall = { const functionCall: FunctionCall = {
@ -1084,7 +1080,7 @@ function ChatPage() {
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map((fc) => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
})), }))
); );
} }
} }
@ -1095,7 +1091,7 @@ function ChatPage() {
) { ) {
console.log( console.log(
"Function args delta (Realtime API):", "Function args delta (Realtime API):",
chunk.delta, chunk.delta
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
@ -1106,7 +1102,7 @@ function ChatPage() {
lastFunctionCall.argumentsString += chunk.delta || ""; lastFunctionCall.argumentsString += chunk.delta || "";
console.log( console.log(
"Accumulated arguments (Realtime API):", "Accumulated arguments (Realtime API):",
lastFunctionCall.argumentsString, lastFunctionCall.argumentsString
); );
} }
} }
@ -1117,26 +1113,26 @@ function ChatPage() {
) { ) {
console.log( console.log(
"Function args done (Realtime API):", "Function args done (Realtime API):",
chunk.arguments, chunk.arguments
); );
const lastFunctionCall = const lastFunctionCall =
currentFunctionCalls[currentFunctionCalls.length - 1]; currentFunctionCalls[currentFunctionCalls.length - 1];
if (lastFunctionCall) { if (lastFunctionCall) {
try { try {
lastFunctionCall.arguments = JSON.parse( lastFunctionCall.arguments = JSON.parse(
chunk.arguments || "{}", chunk.arguments || "{}"
); );
lastFunctionCall.status = "completed"; lastFunctionCall.status = "completed";
console.log( console.log(
"Parsed function arguments (Realtime API):", "Parsed function arguments (Realtime API):",
lastFunctionCall.arguments, lastFunctionCall.arguments
); );
} catch (e) { } catch (e) {
lastFunctionCall.arguments = { raw: chunk.arguments }; lastFunctionCall.arguments = { raw: chunk.arguments };
lastFunctionCall.status = "error"; lastFunctionCall.status = "error";
console.log( console.log(
"Error parsing function arguments (Realtime API):", "Error parsing function arguments (Realtime API):",
e, e
); );
} }
} }
@ -1150,14 +1146,14 @@ function ChatPage() {
console.log( console.log(
"🔵 UPDATING function call (done):", "🔵 UPDATING function call (done):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name, chunk.item.tool_name || chunk.item.name
); );
console.log( console.log(
"🔵 Looking for existing function calls:", "🔵 Looking for existing function calls:",
currentFunctionCalls.map((fc) => ({ currentFunctionCalls.map((fc) => ({
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
})), }))
); );
// Find existing function call by ID or name // Find existing function call by ID or name
@ -1165,14 +1161,14 @@ function ChatPage() {
(fc) => (fc) =>
fc.id === chunk.item.id || fc.id === chunk.item.id ||
fc.name === chunk.item.tool_name || fc.name === chunk.item.tool_name ||
fc.name === chunk.item.name, fc.name === chunk.item.name
); );
if (functionCall) { if (functionCall) {
console.log( console.log(
"🔵 FOUND existing function call, updating:", "🔵 FOUND existing function call, updating:",
functionCall.id, functionCall.id,
functionCall.name, functionCall.name
); );
// Update existing function call with completion data // Update existing function call with completion data
functionCall.status = functionCall.status =
@ -1195,7 +1191,7 @@ function ChatPage() {
"🔴 WARNING: Could not find existing function call to update:", "🔴 WARNING: Could not find existing function call to update:",
chunk.item.id, chunk.item.id,
chunk.item.tool_name, chunk.item.tool_name,
chunk.item.name, chunk.item.name
); );
} }
} }
@ -1216,7 +1212,7 @@ function ChatPage() {
fc.name === chunk.item.name || fc.name === chunk.item.name ||
fc.name === chunk.item.type || fc.name === chunk.item.type ||
fc.name.includes(chunk.item.type.replace("_call", "")) || fc.name.includes(chunk.item.type.replace("_call", "")) ||
chunk.item.type.includes(fc.name), chunk.item.type.includes(fc.name)
); );
if (functionCall) { if (functionCall) {
@ -1260,12 +1256,12 @@ function ChatPage() {
"🟡 CREATING tool call (added):", "🟡 CREATING tool call (added):",
chunk.item.id, chunk.item.id,
chunk.item.tool_name || chunk.item.name, chunk.item.tool_name || chunk.item.name,
chunk.item.type, chunk.item.type
); );
// Dedupe by id or pending with same name // Dedupe by id or pending with same name
let existing = currentFunctionCalls.find( let existing = currentFunctionCalls.find(
(fc) => fc.id === chunk.item.id, (fc) => fc.id === chunk.item.id
); );
if (!existing) { if (!existing) {
existing = [...currentFunctionCalls] existing = [...currentFunctionCalls]
@ -1277,7 +1273,7 @@ function ChatPage() {
fc.name === fc.name ===
(chunk.item.tool_name || (chunk.item.tool_name ||
chunk.item.name || chunk.item.name ||
chunk.item.type), chunk.item.type)
); );
} }
@ -1293,7 +1289,7 @@ function ChatPage() {
chunk.item.inputs || existing.arguments; chunk.item.inputs || existing.arguments;
console.log( console.log(
"🟡 UPDATED existing pending tool call with id:", "🟡 UPDATED existing pending tool call with id:",
existing.id, existing.id
); );
} else { } else {
const functionCall = { const functionCall = {
@ -1314,7 +1310,7 @@ function ChatPage() {
id: fc.id, id: fc.id,
name: fc.name, name: fc.name,
type: fc.type, type: fc.type,
})), }))
); );
} }
} }
@ -1592,7 +1588,7 @@ function ChatPage() {
const handleForkConversation = ( const handleForkConversation = (
messageIndex: number, messageIndex: number,
event?: React.MouseEvent, event?: React.MouseEvent
) => { ) => {
// Prevent any default behavior and stop event propagation // Prevent any default behavior and stop event propagation
if (event) { if (event) {
@ -1657,7 +1653,7 @@ function ChatPage() {
const renderFunctionCalls = ( const renderFunctionCalls = (
functionCalls: FunctionCall[], functionCalls: FunctionCall[],
messageIndex?: number, messageIndex?: number
) => { ) => {
if (!functionCalls || functionCalls.length === 0) return null; if (!functionCalls || functionCalls.length === 0) return null;
@ -1908,7 +1904,7 @@ function ChatPage() {
if (isFilterDropdownOpen) { if (isFilterDropdownOpen) {
const filteredFilters = availableFilters.filter((filter) => const filteredFilters = availableFilters.filter((filter) =>
filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase()), filter.name.toLowerCase().includes(filterSearchTerm.toLowerCase())
); );
if (e.key === "Escape") { if (e.key === "Escape") {
@ -1926,7 +1922,7 @@ function ChatPage() {
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
setSelectedFilterIndex((prev) => setSelectedFilterIndex((prev) =>
prev < filteredFilters.length - 1 ? prev + 1 : 0, prev < filteredFilters.length - 1 ? prev + 1 : 0
); );
return; return;
} }
@ -1934,7 +1930,7 @@ function ChatPage() {
if (e.key === "ArrowUp") { if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
setSelectedFilterIndex((prev) => setSelectedFilterIndex((prev) =>
prev > 0 ? prev - 1 : filteredFilters.length - 1, prev > 0 ? prev - 1 : filteredFilters.length - 1
); );
return; return;
} }
@ -2031,7 +2027,7 @@ function ChatPage() {
// Get button position for popover anchoring // Get button position for popover anchoring
const button = document.querySelector( const button = document.querySelector(
"[data-filter-button]", "[data-filter-button]"
) as HTMLElement; ) as HTMLElement;
if (button) { if (button) {
const rect = button.getBoundingClientRect(); const rect = button.getBoundingClientRect();
@ -2047,21 +2043,10 @@ function ChatPage() {
}; };
return ( return (
<div <div className="flex flex-col h-full">
className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${
isMenuOpen && isPanelOpen
? "md:right-[704px]" // Both open: 384px (menu) + 320px (KF panel)
: isMenuOpen
? "md:right-96" // Only menu open: 384px
: isPanelOpen
? "md:right-80" // Only KF panel open: 320px
: "md:right-6" // Neither open: 24px
}`}
style={{ top: `${totalTopOffset}px` }}
>
{/* Debug header - only show in debug mode */} {/* Debug header - only show in debug mode */}
{isDebugMode && ( {isDebugMode && (
<div className="flex items-center justify-between mb-6 px-6 pt-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-2"></div> <div className="flex items-center gap-2"></div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{/* Async Mode Toggle */} {/* Async Mode Toggle */}
@ -2167,7 +2152,7 @@ function ChatPage() {
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
{renderFunctionCalls( {renderFunctionCalls(
message.functionCalls || [], message.functionCalls || [],
index, index
)} )}
<MarkdownRenderer chatMessage={message.content} /> <MarkdownRenderer chatMessage={message.content} />
</div> </div>
@ -2196,7 +2181,7 @@ function ChatPage() {
<div className="flex-1"> <div className="flex-1">
{renderFunctionCalls( {renderFunctionCalls(
streamingMessage.functionCalls, streamingMessage.functionCalls,
messages.length, messages.length
)} )}
<MarkdownRenderer <MarkdownRenderer
chatMessage={streamingMessage.content} chatMessage={streamingMessage.content}
@ -2263,29 +2248,31 @@ function ChatPage() {
</span> </span>
</div> </div>
)} )}
<div className="relative" style={{height: `${textareaHeight + 60}px`}}> <div
<TextareaAutosize className="relative"
ref={inputRef} style={{ height: `${textareaHeight + 60}px` }}
value={input} >
onChange={onChange} <TextareaAutosize
onKeyDown={handleKeyDown} ref={inputRef}
onHeightChange={(height) => setTextareaHeight(height)} value={input}
maxRows={7} onChange={onChange}
minRows={2} onKeyDown={handleKeyDown}
placeholder="Type to ask a question..." onHeightChange={(height) => setTextareaHeight(height)}
disabled={loading} maxRows={7}
className={`w-full bg-transparent px-4 ${ minRows={2}
selectedFilter ? "pt-2" : "pt-4" placeholder="Type to ask a question..."
} focus-visible:outline-none resize-none`} disabled={loading}
rows={2} className={`w-full bg-transparent px-4 ${
/> selectedFilter ? "pt-2" : "pt-4"
} focus-visible:outline-none resize-none`}
rows={2}
/>
{/* Safe area at bottom for buttons */} {/* Safe area at bottom for buttons */}
<div <div
className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none" className="absolute bottom-0 left-0 right-0 bg-transparent pointer-events-none"
style={{ height: '60px' }} style={{ height: "60px" }}
/> />
</div> </div>
</div> </div>
<input <input
ref={fileInputRef} ref={fileInputRef}
@ -2370,7 +2357,7 @@ function ChatPage() {
.filter((filter) => .filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()), .includes(filterSearchTerm.toLowerCase())
) )
.map((filter, index) => ( .map((filter, index) => (
<button <button
@ -2399,7 +2386,7 @@ function ChatPage() {
{availableFilters.filter((filter) => {availableFilters.filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()), .includes(filterSearchTerm.toLowerCase())
).length === 0 && ).length === 0 &&
filterSearchTerm && ( filterSearchTerm && (
<div className="px-2 py-3 text-sm text-muted-foreground"> <div className="px-2 py-3 text-sm text-muted-foreground">

41
frontend/src/app/globals.css
View file

@ -108,8 +108,47 @@
} }
@layer components { @layer components {
.app-grid-arrangement {
--sidebar-width: 0px;
--notifications-width: 0px;
--filters-width: 0px;
--app-header-height: 53px;
--top-banner-height: 0px;
@media (width >= 48rem) {
--sidebar-width: 288px;
}
&.notifications-open {
--notifications-width: 320px;
}
&.filters-open {
--filters-width: 320px;
}
&.banner-visible {
--top-banner-height: 52px;
}
display: grid;
height: 100%;
width: 100%;
grid-template-rows:
var(--top-banner-height)
var(--app-header-height)
1fr;
grid-template-columns:
var(--sidebar-width)
1fr
var(--notifications-width)
var(--filters-width);
grid-template-areas:
"banner banner banner banner"
"header header header header"
"nav main notifications filters";
transition: grid-template-columns 0.25s ease-in-out,
grid-template-rows 0.25s ease-in-out;
}
.header-arrangement { .header-arrangement {
@apply flex w-full h-[53px] items-center justify-between border-b border-border; @apply flex w-full items-center justify-between border-b border-border;
} }
.header-start-display { .header-start-display {

199
frontend/src/app/knowledge/chunks/page.tsx
View file

@ -12,13 +12,15 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useLayout } from "@/contexts/layout-context";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { import {
type ChunkResult, type ChunkResult,
type File, type File,
useGetSearchQuery, useGetSearchQuery,
} from "../../api/queries/useGetSearchQuery"; } from "../../api/queries/useGetSearchQuery";
// import { Label } from "@/components/ui/label";
// import { Checkbox } from "@/components/ui/checkbox";
import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
const getFileTypeLabel = (mimetype: string) => { const getFileTypeLabel = (mimetype: string) => {
if (mimetype === "application/pdf") return "PDF"; if (mimetype === "application/pdf") return "PDF";
@ -28,22 +30,18 @@ const getFileTypeLabel = (mimetype: string) => {
}; };
function ChunksPageContent() { function ChunksPageContent() {
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } = const { parsedFilterData, queryOverride } = useKnowledgeFilter();
useKnowledgeFilter(); const filename = searchParams.get("filename");
const { isMenuOpen } = useTask(); const [chunks, setChunks] = useState<ChunkResult[]>([]);
const { totalTopOffset } = useLayout(); const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
ChunkResult[]
const filename = searchParams.get("filename"); >([]);
const [chunks, setChunks] = useState<ChunkResult[]>([]); // const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState< const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
ChunkResult[] number | null
>([]); >(null);
const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
number | null
>(null);
// Calculate average chunk length // Calculate average chunk length
const averageChunkLength = useMemo( const averageChunkLength = useMemo(
@ -53,25 +51,13 @@ function ChunksPageContent() {
[chunks], [chunks],
); );
const [selectAll, setSelectAll] = useState(false); // const [selectAll, setSelectAll] = useState(false);
const [queryInputText, setQueryInputText] = useState(
parsedFilterData?.query ?? "",
);
// Use the same search query as the knowledge page, but we'll filter for the specific file // Use the same search query as the knowledge page, but we'll filter for the specific file
const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData); const { data = [], isFetching } = useGetSearchQuery(
queryOverride,
useEffect(() => { parsedFilterData
if (queryInputText === "") { );
setChunksFilteredByQuery(chunks);
} else {
setChunksFilteredByQuery(
chunks.filter((chunk) =>
chunk.text.toLowerCase().includes(queryInputText.toLowerCase()),
),
);
}
}, [queryInputText, chunks]);
const handleCopy = useCallback((text: string, index: number) => { const handleCopy = useCallback((text: string, index: number) => {
// Trim whitespace and remove new lines/tabs for cleaner copy // Trim whitespace and remove new lines/tabs for cleaner copy
@ -138,67 +124,28 @@ function ChunksPageContent() {
); );
} }
return ( return (
<div <div className="flex flex-col h-full">
className={`fixed inset-0 md:left-72 flex flex-row transition-all duration-300 ${ <div className="flex flex-col h-full">
isMenuOpen && isPanelOpen {/* Header */}
? "md:right-[704px]" <div className="flex flex-col mb-6">
: // Both open: 384px (menu) + 320px (KF panel) <div className="flex items-center gap-3 mb-6">
isMenuOpen <Button
? "md:right-96" variant="ghost"
: // Only menu open: 384px onClick={handleBack}
isPanelOpen size="sm"
? "md:right-80" className="max-w-8 max-h-8 -m-2"
: // Only KF panel open: 320px >
"md:right-6" // Neither open: 24px <ArrowLeft size={24} />
}`} </Button>
style={{ top: `${totalTopOffset}px` }} <h1 className="text-lg font-semibold">
> {/* Removes file extension from filename */}
<div className="flex-1 flex flex-col min-h-0 px-6 py-6"> {filename.replace(/\.[^/.]+$/, "")}
{/* Header */} </h1>
<div className="flex flex-col mb-6"> </div>
<div className="flex flex-row items-center gap-3 mb-6"> <div className="flex flex-1">
<Button variant="ghost" onClick={handleBack} size="sm"> <KnowledgeSearchInput />
<ArrowLeft size={24} /> {/* <div className="flex items-center pl-4 gap-2">
</Button>
<h1 className="text-lg font-semibold">
{/* Removes file extension from filename */}
{filename.replace(/\.[^/.]+$/, "")}
</h1>
</div>
<div className="flex flex-col items-start mt-2">
<div className="flex-1 flex items-center gap-2 w-full max-w-[640px]">
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
{selectedFilter?.name && (
<div
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
filterAccentClasses[parsedFilterData?.color || "zinc"]
}`}
>
<span className="truncate">{selectedFilter?.name}</span>
<X
aria-label="Remove filter"
className="h-4 w-4 flex-shrink-0 cursor-pointer"
onClick={() => setSelectedFilter(null)}
/>
</div>
)}
<Search
className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground"
strokeWidth={1.5}
/>
<input
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
name="search-query"
id="search-query"
type="text"
placeholder="Enter your search query..."
onChange={(e) => setQueryInputText(e.target.value)}
value={queryInputText}
/>
</div>
</div>
{/* <div className="flex items-center pl-4 gap-2">
<Checkbox <Checkbox
id="selectAllChunks" id="selectAllChunks"
checked={selectAll} checked={selectAll}
@ -216,36 +163,36 @@ function ChunksPageContent() {
</div> </div>
</div> </div>
{/* Content Area - matches knowledge page structure */} {/* Content Area - matches knowledge page structure */}
<div className="flex-1 overflow-scroll pr-6"> <div className="flex-1 overflow-auto pr-6">
{isFetching ? ( {isFetching ? (
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="text-center"> <div className="text-center">
<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" /> <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
<p className="text-lg text-muted-foreground"> <p className="text-lg text-muted-foreground">
Loading chunks... Loading chunks...
</p> </p>
</div> </div>
</div> </div>
) : chunks.length === 0 ? ( ) : chunks.length === 0 ? (
<div className="flex items-center justify-center h-64"> <div className="flex items-center justify-center h-64">
<div className="text-center"> <div className="text-center">
<p className="text-xl font-semibold mb-2">No knowledge</p> <p className="text-xl font-semibold mb-2">No knowledge</p>
<p className="text-sm text-secondary-foreground"> <p className="text-sm text-secondary-foreground">
Clear the knowledge filter or return to the knowledge page Clear the knowledge filter or return to the knowledge page
</p> </p>
</div> </div>
</div> </div>
) : ( ) : (
<div className="space-y-4 pb-6"> <div className="space-y-4 pb-6">
{chunksFilteredByQuery.map((chunk, index) => ( {chunksFilteredByQuery.map((chunk, index) => (
<div <div
key={chunk.filename + index} key={chunk.filename + index}
className="bg-muted rounded-lg p-4 border border-border/50" className="bg-muted rounded-lg p-4 border border-border/50"
> >
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{/* <div> {/* <div>
<Checkbox <Checkbox
checked={selectedChunks.has(index)} checked={selectedChunks.has(index)}
onCheckedChange={() => onCheckedChange={() =>

166
frontend/src/app/knowledge/page.tsx
View file

@ -1,72 +1,60 @@
"use client"; "use client";
import type { ColDef, GetRowIdParams } from "ag-grid-community"; import {
themeQuartz,
type ColDef,
type GetRowIdParams,
} from "ag-grid-community";
import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react"; import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
import { import { Cloud, FileIcon, Globe } from "lucide-react";
Building2,
Cloud,
Globe,
HardDrive,
Search,
Trash2,
X,
} from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { import { useCallback, useEffect, useRef, useState } from "react";
type ChangeEvent,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import { SiGoogledrive } from "react-icons/si";
import { TbBrandOnedrive } from "react-icons/tb";
import { KnowledgeDropdown } from "@/components/knowledge-dropdown"; import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
import { ProtectedRoute } from "@/components/protected-route"; import { ProtectedRoute } from "@/components/protected-route";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useLayout } from "@/contexts/layout-context";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery"; import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
import "@/components/AgGrid/registerAgGridModules"; import "@/components/AgGrid/registerAgGridModules";
import "@/components/AgGrid/agGridStyles.css"; import "@/components/AgGrid/agGridStyles.css";
import { toast } from "sonner"; import { toast } from "sonner";
import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown"; import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown";
import { filterAccentClasses } from "@/components/knowledge-filter-panel";
import { StatusBadge } from "@/components/ui/status-badge"; import { StatusBadge } from "@/components/ui/status-badge";
import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog"; import { DeleteConfirmationDialog } from "../../../components/confirmation-dialog";
import { useDeleteDocument } from "../api/mutations/useDeleteDocument"; import { useDeleteDocument } from "../api/mutations/useDeleteDocument";
import GoogleDriveIcon from "../settings/icons/google-drive-icon";
import OneDriveIcon from "../settings/icons/one-drive-icon";
import SharePointIcon from "../settings/icons/share-point-icon";
import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
// Function to get the appropriate icon for a connector type // Function to get the appropriate icon for a connector type
function getSourceIcon(connectorType?: string) { function getSourceIcon(connectorType?: string) {
switch (connectorType) { switch (connectorType) {
case "url":
return <Globe className="h-4 w-4 text-muted-foreground flex-shrink-0" />;
case "google_drive": case "google_drive":
return ( return (
<SiGoogledrive className="h-4 w-4 text-foreground flex-shrink-0" /> <GoogleDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />
); );
case "onedrive": case "onedrive":
return ( return <OneDriveIcon className="h-4 w-4 text-foreground flex-shrink-0" />;
<TbBrandOnedrive className="h-4 w-4 text-foreground flex-shrink-0" />
);
case "sharepoint": case "sharepoint":
return <Building2 className="h-4 w-4 text-foreground flex-shrink-0" />; return (
<SharePointIcon className="h-4 w-4 text-foreground flex-shrink-0" />
);
case "url":
return <Globe className="h-4 w-4 text-muted-foreground flex-shrink-0" />;
case "s3": case "s3":
return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />; return <Cloud className="h-4 w-4 text-foreground flex-shrink-0" />;
default: default:
return ( return (
<HardDrive className="h-4 w-4 text-muted-foreground flex-shrink-0" /> <FileIcon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
); );
} }
} }
function SearchPage() { function SearchPage() {
const router = useRouter(); const router = useRouter();
const { isMenuOpen, files: taskFiles, refreshTasks } = useTask(); const { files: taskFiles, refreshTasks } = useTask();
const { totalTopOffset } = useLayout(); const { parsedFilterData, queryOverride } = useKnowledgeFilter();
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
useKnowledgeFilter();
const [selectedRows, setSelectedRows] = useState<File[]>([]); const [selectedRows, setSelectedRows] = useState<File[]>([]);
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false); const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
@ -77,8 +65,8 @@ function SearchPage() {
}, [refreshTasks]); }, [refreshTasks]);
const { data: searchData = [], isFetching } = useGetSearchQuery( const { data: searchData = [], isFetching } = useGetSearchQuery(
parsedFilterData?.query || "*", queryOverride,
parsedFilterData, parsedFilterData
); );
// Convert TaskFiles to File format and merge with backend results // Convert TaskFiles to File format and merge with backend results
const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => { const taskFilesAsFiles: File[] = taskFiles.map((taskFile) => {
@ -94,7 +82,7 @@ function SearchPage() {
// Create a map of task files by filename for quick lookup // Create a map of task files by filename for quick lookup
const taskFileMap = new Map( const taskFileMap = new Map(
taskFilesAsFiles.map((file) => [file.filename, file]), taskFilesAsFiles.map((file) => [file.filename, file])
); );
// Override backend files with task file status if they exist // Override backend files with task file status if they exist
@ -117,7 +105,7 @@ function SearchPage() {
return ( return (
taskFile.status !== "active" && taskFile.status !== "active" &&
!backendFiles.some( !backendFiles.some(
(backendFile) => backendFile.filename === taskFile.filename, (backendFile) => backendFile.filename === taskFile.filename
) )
); );
}); });
@ -125,10 +113,6 @@ function SearchPage() {
// Combine task files first, then backend files // Combine task files first, then backend files
const fileResults = [...backendFiles, ...filteredTaskFiles]; const fileResults = [...backendFiles, ...filteredTaskFiles];
const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
};
const gridRef = useRef<AgGridReact>(null); const gridRef = useRef<AgGridReact>(null);
const columnDefs = [ const columnDefs = [
@ -161,8 +145,8 @@ function SearchPage() {
} }
router.push( router.push(
`/knowledge/chunks?filename=${encodeURIComponent( `/knowledge/chunks?filename=${encodeURIComponent(
data?.filename ?? "", data?.filename ?? ""
)}`, )}`
); );
}} }}
> >
@ -263,7 +247,7 @@ function SearchPage() {
try { try {
// Delete each file individually since the API expects one filename at a time // Delete each file individually since the API expects one filename at a time
const deletePromises = selectedRows.map((row) => const deletePromises = selectedRows.map((row) =>
deleteDocumentMutation.mutateAsync({ filename: row.filename }), deleteDocumentMutation.mutateAsync({ filename: row.filename })
); );
await Promise.all(deletePromises); await Promise.all(deletePromises);
@ -271,7 +255,7 @@ function SearchPage() {
toast.success( toast.success(
`Successfully deleted ${selectedRows.length} document${ `Successfully deleted ${selectedRows.length} document${
selectedRows.length > 1 ? "s" : "" selectedRows.length > 1 ? "s" : ""
}`, }`
); );
setSelectedRows([]); setSelectedRows([]);
setShowBulkDeleteDialog(false); setShowBulkDeleteDialog(false);
@ -284,74 +268,23 @@ function SearchPage() {
toast.error( toast.error(
error instanceof Error error instanceof Error
? error.message ? error.message
: "Failed to delete some documents", : "Failed to delete some documents"
); );
} }
}; };
return ( return (
<div <>
className={`fixed inset-0 md:left-72 flex flex-col transition-all duration-300 ${ <div className="flex flex-col h-full">
isMenuOpen && isPanelOpen
? "md:right-[704px]"
: // Both open: 384px (menu) + 320px (KF panel)
isMenuOpen
? "md:right-96"
: // Only menu open: 384px
isPanelOpen
? "md:right-80"
: // Only KF panel open: 320px
"md:right-6" // Neither open: 24px
}`}
style={{ top: `${totalTopOffset}px` }}
>
<div className="flex-1 flex flex-col min-h-0 px-6 py-6">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-semibold">Project Knowledge</h2> <h2 className="text-lg font-semibold">Project Knowledge</h2>
<KnowledgeDropdown variant="button" />
</div> </div>
{/* Search Input Area */} {/* Search Input Area */}
<div className="flex-shrink-0 mb-6 xl:max-w-[75%]"> <div className="flex-1 flex items-center flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
<form className="flex gap-3"> <KnowledgeSearchInput />
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]"> {/* //TODO: Implement sync button */}
{selectedFilter?.name && ( {/* <Button
<div
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
filterAccentClasses[parsedFilterData?.color || "zinc"]
}`}
>
<span className="truncate">{selectedFilter?.name}</span>
<X
aria-label="Remove filter"
className="h-4 w-4 flex-shrink-0 cursor-pointer"
onClick={() => setSelectedFilter(null)}
/>
</div>
)}
<Search className="h-4 w-4 ml-1 flex-shrink-0 text-placeholder-foreground" />
<input
className="bg-transparent w-full h-full ml-2 focus:outline-none focus-visible:outline-none font-mono placeholder:font-mono"
name="search-query"
id="search-query"
type="text"
placeholder="Enter your search query..."
onChange={handleTableSearch}
/>
</div>
{/* <Button
type="submit"
variant="outline"
className="rounded-lg p-0 flex-shrink-0"
>
{isFetching ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<Search className="h-4 w-4" />
)}
</Button> */}
{/* //TODO: Implement sync button */}
{/* <Button
type="button" type="button"
variant="outline" variant="outline"
className="rounded-lg flex-shrink-0" className="rounded-lg flex-shrink-0"
@ -359,17 +292,19 @@ function SearchPage() {
> >
Sync Sync
</Button> */} </Button> */}
{selectedRows.length > 0 && ( {selectedRows.length > 0 && (
<Button <Button
type="button" type="button"
variant="destructive" variant="destructive"
className="rounded-lg flex-shrink-0" className="rounded-lg flex-shrink-0"
onClick={() => setShowBulkDeleteDialog(true)} onClick={() => setShowBulkDeleteDialog(true)}
> >
<Trash2 className="h-4 w-4" /> Delete Delete
</Button> </Button>
)} )}
</form> <div className="ml-auto">
<KnowledgeDropdown />
</div>
</div> </div>
<AgGridReact <AgGridReact
className="w-full overflow-auto" className="w-full overflow-auto"
@ -377,6 +312,7 @@ function SearchPage() {
defaultColDef={defaultColDef} defaultColDef={defaultColDef}
loading={isFetching} loading={isFetching}
ref={gridRef} ref={gridRef}
theme={themeQuartz.withParams({ browserColorScheme: "inherit" })}
rowData={fileResults} rowData={fileResults}
rowSelection="multiple" rowSelection="multiple"
rowMultiSelectWithClick={false} rowMultiSelectWithClick={false}
@ -414,7 +350,7 @@ ${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
onConfirm={handleBulkDelete} onConfirm={handleBulkDelete}
isLoading={deleteDocumentMutation.isPending} isLoading={deleteDocumentMutation.isPending}
/> />
</div> </>
); );
} }

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

@ -38,7 +38,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body
className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-full w-full overflow-hidden`} className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-lvh w-full overflow-hidden`}
> >
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"

3
frontend/src/app/settings/icons/google-drive-icon.tsx
View file

@ -1,10 +1,11 @@
const GoogleDriveIcon = () => ( const GoogleDriveIcon = ({ className }: { className?: string }) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
height="16" height="16"
viewBox="0 0 18 16" viewBox="0 0 18 16"
fill="none" fill="none"
className={className}
> >
<path <path
d="M2.03338 13.2368L2.75732 14.4872C2.90774 14.7504 3.12398 14.9573 3.37783 15.1077L5.9633 10.6325H0.792358C0.792358 10.9239 0.867572 11.2154 1.018 11.4786L2.03338 13.2368Z" d="M2.03338 13.2368L2.75732 14.4872C2.90774 14.7504 3.12398 14.9573 3.37783 15.1077L5.9633 10.6325H0.792358C0.792358 10.9239 0.867572 11.2154 1.018 11.4786L2.03338 13.2368Z"

3
frontend/src/app/settings/icons/one-drive-icon.tsx
View file

@ -1,10 +1,11 @@
const OneDriveIcon = () => ( const OneDriveIcon = ({ className }: { className?: string }) => (
<svg <svg
width="17" width="17"
height="12" height="12"
viewBox="0 0 17 12" viewBox="0 0 17 12"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<g clip-path="url(#clip0_3016_367)"> <g clip-path="url(#clip0_3016_367)">
<path <path

3
frontend/src/app/settings/icons/share-point-icon.tsx
View file

@ -1,10 +1,11 @@
const SharePointIcon = () => ( const SharePointIcon = ({ className }: { className?: string }) => (
<svg <svg
width="15" width="15"
height="16" height="16"
viewBox="0 0 15 16" viewBox="0 0 15 16"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}
> >
<g clip-path="url(#clip0_3016_409)"> <g clip-path="url(#clip0_3016_409)">
<path <path

2
frontend/src/app/settings/page.tsx
View file

@ -623,7 +623,7 @@ function KnowledgeSourcesPage() {
}; };
return ( return (
<div className="space-y-8"> <div className="space-y-8 pb-6">
{/* Connectors Section */} {/* Connectors Section */}
<div className="space-y-6"> <div className="space-y-6">
<div> <div>

3
frontend/src/components/AgGrid/agGridStyles.css
View file

@ -10,6 +10,9 @@ body {
--ag-row-hover-color: hsl(var(--muted)); --ag-row-hover-color: hsl(var(--muted));
--ag-wrapper-border: none; --ag-wrapper-border: none;
--ag-font-family: var(--font-sans); --ag-font-family: var(--font-sans);
--ag-selected-row-background-color: hsl(var(--accent));
--ag-focus-shadow: none;
--ag-range-selection-border-color: hsl(var(--primary));
/* Checkbox styling */ /* Checkbox styling */
--ag-checkbox-background-color: hsl(var(--background)); --ag-checkbox-background-color: hsl(var(--background));

88
frontend/src/components/layout-wrapper.tsx
View file

@ -12,12 +12,10 @@ import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
import Logo from "@/components/logo/logo"; import Logo from "@/components/logo/logo";
import { Navigation } from "@/components/navigation"; import { Navigation } from "@/components/navigation";
import { TaskNotificationMenu } from "@/components/task-notification-menu"; import { TaskNotificationMenu } from "@/components/task-notification-menu";
import { Button } from "@/components/ui/button";
import { UserNav } from "@/components/user-nav"; import { UserNav } from "@/components/user-nav";
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
import { useChat } from "@/contexts/chat-context"; import { useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { LayoutProvider } from "@/contexts/layout-context";
// import { GitHubStarButton } from "@/components/github-star-button" // import { GitHubStarButton } from "@/components/github-star-button"
// import { DiscordLink } from "@/components/discord-link" // import { DiscordLink } from "@/components/discord-link"
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
@ -35,7 +33,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
refreshConversations, refreshConversations,
startNewConversation, startNewConversation,
} = useChat(); } = useChat();
const { isLoading: isSettingsLoading, data: settings } = useGetSettingsQuery({ const { isLoading: isSettingsLoading } = useGetSettingsQuery({
enabled: isAuthenticated || isNoAuthMode, enabled: isAuthenticated || isNoAuthMode,
}); });
const { const {
@ -59,6 +57,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
// List of paths that should not show navigation // List of paths that should not show navigation
const authPaths = ["/login", "/auth/callback", "/onboarding"]; const authPaths = ["/login", "/auth/callback", "/onboarding"];
const isAuthPage = authPaths.includes(pathname); const isAuthPage = authPaths.includes(pathname);
const isOnKnowledgePage = pathname.startsWith("/knowledge");
// List of paths with smaller max-width // List of paths with smaller max-width
const smallWidthPaths = ["/settings", "/settings/connector/new"]; const smallWidthPaths = ["/settings", "/settings/connector/new"];
@ -66,7 +65,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
// Calculate active tasks for the bell icon // Calculate active tasks for the bell icon
const activeTasks = tasks.filter( const activeTasks = tasks.filter(
task => (task) =>
task.status === "pending" || task.status === "pending" ||
task.status === "running" || task.status === "running" ||
task.status === "processing" task.status === "processing"
@ -75,14 +74,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
const isUnhealthy = health?.status === "unhealthy" || isError; const isUnhealthy = health?.status === "unhealthy" || isError;
const isBannerVisible = !isHealthLoading && isUnhealthy; const isBannerVisible = !isHealthLoading && isUnhealthy;
// Dynamic height calculations based on banner visibility
const headerHeight = 53;
const bannerHeight = 52; // Approximate banner height
const totalTopOffset = isBannerVisible
? headerHeight + bannerHeight
: headerHeight;
const mainContentHeight = `calc(100vh - ${totalTopOffset}px)`;
// Show loading state when backend isn't ready // Show loading state when backend isn't ready
if (isLoading || isSettingsLoading) { if (isLoading || isSettingsLoading) {
return ( return (
@ -102,9 +93,18 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
// For all other pages, render with Langflow-styled navigation and task menu // For all other pages, render with Langflow-styled navigation and task menu
return ( return (
<div className="h-full relative"> <div
<DoclingHealthBanner className="w-full pt-2" /> className={cn(
<header className="header-arrangement bg-background sticky top-0 z-50 h-10"> "app-grid-arrangement",
isBannerVisible && "banner-visible",
isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
isMenuOpen && "notifications-open"
)}
>
<div className="w-full [grid-area:banner]">
<DoclingHealthBanner className="w-full" />
</div>
<header className="header-arrangement bg-background [grid-area:header]">
<div className="header-start-display px-[16px]"> <div className="header-start-display px-[16px]">
{/* Logo/Title */} {/* Logo/Title */}
<div className="flex items-center"> <div className="flex items-center">
@ -144,47 +144,37 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
</div> </div>
</div> </div>
</header> </header>
<div
className="side-bar-arrangement bg-background fixed left-0 top-[40px] bottom-0 md:flex hidden pt-1" {/* Sidebar Navigation */}
style={{ top: `${totalTopOffset}px` }} <aside className="bg-background border-r overflow-hidden [grid-area:nav]">
>
<Navigation <Navigation
conversations={conversations} conversations={conversations}
isConversationsLoading={isConversationsLoading} isConversationsLoading={isConversationsLoading}
onNewConversation={handleNewConversation} onNewConversation={handleNewConversation}
/> />
</div> </aside>
<main
className={`md:pl-72 transition-all duration-300 overflow-y-auto ${ {/* Main Content */}
isMenuOpen && isPanelOpen <main className="overflow-y-auto [grid-area:main]">
? "md:pr-[728px]" <div
: // Both open: 384px (menu) + 320px (KF panel) + 24px (original padding) className={cn(
isMenuOpen "p-6 h-full container",
? "md:pr-96" isSmallWidthPath && "max-w-[850px] ml-0"
: // Only menu open: 384px )}
isPanelOpen
? "md:pr-80"
: // Only KF panel open: 320px
"md:pr-0" // Neither open: 24px
}`}
style={{ height: mainContentHeight }}
>
<LayoutProvider
headerHeight={headerHeight}
totalTopOffset={totalTopOffset}
> >
<div {children}
className={cn( </div>
"py-6 lg:py-8 px-4 lg:px-6",
isSmallWidthPath ? "max-w-[850px]" : "container"
)}
>
{children}
</div>
</LayoutProvider>
</main> </main>
<TaskNotificationMenu />
<KnowledgeFilterPanel /> {/* Task Notifications Panel */}
<aside className="overflow-y-auto overflow-x-hidden [grid-area:notifications]">
{isMenuOpen && <TaskNotificationMenu />}
</aside>
{/* Knowledge Filter Panel */}
<aside className="overflow-y-auto overflow-x-hidden [grid-area:filters]">
{isPanelOpen && <KnowledgeFilterPanel />}
</aside>
</div> </div>
); );
} }

4
frontend/src/components/task-notification-menu.tsx
View file

@ -143,10 +143,10 @@ export function TaskNotificationMenu() {
} }
return ( return (
<div className="fixed top-14 right-0 z-40 w-80 h-[calc(100vh-3.5rem)] bg-background border-l border-border/40"> <div className="h-full bg-background border-l">
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
{/* Header */} {/* Header */}
<div className="p-4 border-b border-border/40"> <div className="p-4 border-b">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Bell className="h-5 w-5 text-muted-foreground" /> <Bell className="h-5 w-5 text-muted-foreground" />

103
frontend/src/components/ui/animated-processing-icon.tsx
View file

@ -1,37 +1,70 @@
import type { SVGProps } from "react"; import { cn } from "@/lib/utils";
import { motion, easeInOut } from "framer-motion";
export const AnimatedProcessingIcon = (props: SVGProps<SVGSVGElement>) => { export const AnimatedProcessingIcon = ({
return ( className,
<svg }: {
viewBox="0 0 8 12" className?: string;
fill="none" }) => {
xmlns="http://www.w3.org/2000/svg" const createAnimationFrames = (delay: number) => ({
{...props} opacity: [1, 1, 0.5, 0], // Opacity Steps
> transition: {
<title>Processing</title> delay,
<style> duration: 1,
{` ease: easeInOut,
.dot-1 { animation: pulse-wave 1.5s infinite; animation-delay: 0s; } repeat: Infinity,
.dot-2 { animation: pulse-wave 1.5s infinite; animation-delay: 0.1s; } times: [0, 0.33, 0.66, 1], // Duration Percentages that Correspond to opacity Array
.dot-3 { animation: pulse-wave 1.5s infinite; animation-delay: 0.2s; } },
.dot-4 { animation: pulse-wave 1.5s infinite; animation-delay: 0.3s; } });
.dot-5 { animation: pulse-wave 1.5s infinite; animation-delay: 0.4s; }
return (
@keyframes pulse-wave { <svg
0%, 60%, 100% { data-testid="rotating-dot-animation"
opacity: 0.25; className={cn("h-[10px] w-[6px]", className)}
} viewBox="0 0 6 10"
30% { >
opacity: 1; <motion.circle
} animate={createAnimationFrames(0)}
} fill="currentColor"
`} cx="1"
</style> cy="1"
<circle className="dot-1" cx="2" cy="6" r="1" fill="currentColor" /> r="1"
<circle className="dot-2" cx="2" cy="10" r="1" fill="currentColor" /> />
<circle className="dot-3" cx="6" cy="2" r="1" fill="currentColor" /> <motion.circle
<circle className="dot-4" cx="6" cy="6" r="1" fill="currentColor" /> animate={createAnimationFrames(0.16)}
<circle className="dot-5" cx="6" cy="10" r="1" fill="currentColor" /> fill="currentColor"
</svg> cx="1"
); cy="5"
r="1"
/>
<motion.circle
animate={createAnimationFrames(0.33)}
fill="currentColor"
cx="1"
cy="9"
r="1"
/>
<motion.circle
animate={createAnimationFrames(0.83)}
fill="currentColor"
cx="5"
cy="1"
r="1"
/>
<motion.circle
animate={createAnimationFrames(0.66)}
fill="currentColor"
cx="5"
cy="5"
r="1"
/>
<motion.circle
animate={createAnimationFrames(0.5)}
fill="currentColor"
cx="5"
cy="9"
r="1"
/>
</svg>
);
}; };

2
frontend/src/components/ui/status-badge.tsx
View file

@ -50,7 +50,7 @@ export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
}`} }`}
> >
{status === "processing" && ( {status === "processing" && (
<AnimatedProcessingIcon className="text-current h-3 w-3 shrink-0" /> <AnimatedProcessingIcon className="text-current shrink-0" />
)} )}
{config.label} {config.label}
</div> </div>

11
frontend/src/contexts/knowledge-filter-context.tsx
View file

@ -5,6 +5,7 @@ import React, {
createContext, createContext,
type ReactNode, type ReactNode,
useContext, useContext,
useEffect,
useState, useState,
} from "react"; } from "react";
@ -44,6 +45,8 @@ interface KnowledgeFilterContextType {
createMode: boolean; createMode: boolean;
startCreateMode: () => void; startCreateMode: () => void;
endCreateMode: () => void; endCreateMode: () => void;
queryOverride: string;
setQueryOverride: (query: string) => void;
} }
const KnowledgeFilterContext = createContext< const KnowledgeFilterContext = createContext<
@ -73,6 +76,7 @@ export function KnowledgeFilterProvider({
useState<ParsedQueryData | null>(null); useState<ParsedQueryData | null>(null);
const [isPanelOpen, setIsPanelOpen] = useState(false); const [isPanelOpen, setIsPanelOpen] = useState(false);
const [createMode, setCreateMode] = useState(false); const [createMode, setCreateMode] = useState(false);
const [queryOverride, setQueryOverride] = useState("");
const setSelectedFilter = (filter: KnowledgeFilter | null) => { const setSelectedFilter = (filter: KnowledgeFilter | null) => {
setSelectedFilterState(filter); setSelectedFilterState(filter);
@ -136,6 +140,11 @@ export function KnowledgeFilterProvider({
setCreateMode(false); setCreateMode(false);
}; };
// Clear the search override when we change filters
useEffect(() => {
setQueryOverride("");
}, [selectedFilter]);
const value: KnowledgeFilterContextType = { const value: KnowledgeFilterContextType = {
selectedFilter, selectedFilter,
parsedFilterData, parsedFilterData,
@ -148,6 +157,8 @@ export function KnowledgeFilterProvider({
createMode, createMode,
startCreateMode, startCreateMode,
endCreateMode, endCreateMode,
queryOverride,
setQueryOverride,
}; };
return ( return (

34
frontend/src/contexts/layout-context.tsx
View file

@ -1,34 +0,0 @@
"use client";
import { createContext, useContext } from "react";
interface LayoutContextType {
headerHeight: number;
totalTopOffset: number;
}
const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
export function useLayout() {
const context = useContext(LayoutContext);
if (context === undefined) {
throw new Error("useLayout must be used within a LayoutProvider");
}
return context;
}
export function LayoutProvider({
children,
headerHeight,
totalTopOffset
}: {
children: React.ReactNode;
headerHeight: number;
totalTopOffset: number;
}) {
return (
<LayoutContext.Provider value={{ headerHeight, totalTopOffset }}>
{children}
</LayoutContext.Provider>
);
}