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

refactor page layout styles to use grid

Browse source
This commit is contained in:
Cole Goldsmith 2025-10-02 17:17:09 -05:00
parent 331f737c00
commit 3a1bde1bb5
7 changed files with 145 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,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";
@ -25,15 +24,7 @@ import { Label } from "@/components/ui/label";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
interface KnowledgeDropdownProps { export function KnowledgeDropdown() {
active?: boolean;
variant?: "navigation" | "button";
}
export function KnowledgeDropdown({
active,
variant = "navigation",
}: KnowledgeDropdownProps) {
const { addTask } = useTask(); const { addTask } = useTask();
const router = useRouter(); const router = useRouter();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -437,77 +428,35 @@ export function KnowledgeDropdown({
return ( return (
<> <>
<div ref={dropdownRef} className="relative"> <div ref={dropdownRef} className="relative">
<button <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 && <Loader2 className="h-4 w-4 animate-spin" />}
{isLoading ? ( <span>
<Loader2 className="h-4 w-4 animate-spin" /> {isLoading
) : ( ? fileUploading
<Plus className="h-4 w-4" /> ? "Uploading..."
)} : folderLoading
<span> ? "Processing Folder..."
{isLoading : s3Loading
? fileUploading ? "Processing S3..."
? "Uploading..." : isNavigatingToCloud
: folderLoading ? "Loading..."
? "Processing Folder..." : "Processing..."
: s3Loading : "Add Knowledge"}
? "Processing S3..." </span>
: isNavigatingToCloud {!isLoading && (
? "Loading..." <ChevronDown
: "Processing..." className={cn(
: "Add Knowledge"} "h-4 w-4 transition-transform",
</span> isOpen && "rotate-180"
{!isLoading && (
<ChevronDown
className={cn(
"h-4 w-4 transition-transform",
isOpen && "rotate-180"
)}
/>
)}
</>
) : (
<>
<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 </Button>
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">
@ -519,12 +468,13 @@ export function KnowledgeDropdown({
disabled={"disabled" in item ? item.disabled : false} disabled={"disabled" in item ? item.disabled : false}
title={"tooltip" in item ? item.tooltip : undefined} title={"tooltip" in item ? item.tooltip : undefined}
className={cn( className={cn(
"w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground", "w-full flex flex-nowrap items-center px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground",
"disabled" in item && "disabled" in item &&
item.disabled && item.disabled &&
"opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current" "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current"
)} )}
> >
{item.icon && <item.icon className="h-4 w-4 mr-2 text-muted-foreground" />}
{item.label} {item.label}
</button> </button>
))} ))}
@ -561,7 +511,7 @@ export function KnowledgeDropdown({
type="text" type="text"
placeholder="/path/to/documents" placeholder="/path/to/documents"
value={folderPath} value={folderPath}
onChange={e => setFolderPath(e.target.value)} onChange={(e) => setFolderPath(e.target.value)}
/> />
</div> </div>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
@ -603,7 +553,7 @@ export function KnowledgeDropdown({
type="text" type="text"
placeholder="s3://bucket/path" placeholder="s3://bucket/path"
value={bucketUrl} value={bucketUrl}
onChange={e => setBucketUrl(e.target.value)} onChange={(e) => setBucketUrl(e.target.value)}
/> />
</div> </div>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">

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

@ -231,8 +231,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">

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

@ -53,6 +53,8 @@
--flow-icon: #2f67d0; --flow-icon: #2f67d0;
--radius: 0.5rem; --radius: 0.5rem;
--app-header-height: 53px;
} }
.dark { .dark {
@ -108,6 +110,29 @@
} }
@layer components { @layer components {
.app-grid-cols-arrangement {
--sidebar-width: 0px;
--notifications-width: 0px;
--filters-width: 0px;
@media (width >= 48rem) {
--sidebar-width: 288px;
}
&.notifications-open {
--notifications-width: 320px;
}
&.filters-open {
--filters-width: 320px;
}
display: grid;
height: calc(100% - var(--app-header-height));
grid-template-columns: var(--sidebar-width) 1fr var(--notifications-width) var(
--filters-width
);
transition: grid-template-columns 0.3s 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 h-[53px] items-center justify-between border-b border-border;
} }

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

@ -1,8 +1,8 @@
"use client"; "use client";
import type { ColDef } from "ag-grid-community"; import { themeQuartz, type ColDef } from "ag-grid-community";
import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react"; import { AgGridReact, type CustomCellRendererProps } from "ag-grid-react";
import { Building2, Cloud, HardDrive, Search, Trash2, X } from "lucide-react"; import { Building2, Cloud, HardDrive, Search, X } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { type ChangeEvent, useCallback, useRef, useState } from "react"; import { type ChangeEvent, useCallback, useRef, useState } from "react";
import { SiGoogledrive } from "react-icons/si"; import { SiGoogledrive } from "react-icons/si";
@ -46,8 +46,8 @@ function getSourceIcon(connectorType?: string) {
function SearchPage() { function SearchPage() {
const router = useRouter(); const router = useRouter();
const { isMenuOpen, files: taskFiles } = useTask(); const { files: taskFiles } = useTask();
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } = const { selectedFilter, setSelectedFilter, parsedFilterData } =
useKnowledgeFilter(); useKnowledgeFilter();
const [selectedRows, setSelectedRows] = useState<File[]>([]); const [selectedRows, setSelectedRows] = useState<File[]>([]);
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false); const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
@ -144,7 +144,6 @@ function SearchPage() {
{ {
field: "avgScore", field: "avgScore",
headerName: "Avg score", headerName: "Avg score",
initialFlex: 0.5,
cellRenderer: ({ value }: CustomCellRendererProps<File>) => { cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
return ( return (
<span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded"> <span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
@ -229,32 +228,19 @@ function SearchPage() {
}; };
return ( return (
<div <>
className={`fixed inset-0 md:left-72 top-[53px] 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
}`}
>
<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">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 flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
<form className="flex gap-3"> <form className="flex flex-1 gap-3 max-w-full">
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]"> <div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem] max-w-[min(640px,100%)] min-w-[100px]">
{selectedFilter?.name && ( {selectedFilter?.name && (
<div <div
title={selectedFilter?.name}
className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${ className={`flex items-center gap-1 h-full px-1.5 py-0.5 mr-1 rounded max-w-[25%] ${
filterAccentClasses[parsedFilterData?.color || "zinc"] filterAccentClasses[parsedFilterData?.color || "zinc"]
}`} }`}
@ -307,10 +293,13 @@ function SearchPage() {
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> </form>
<div className="ml-auto">
<KnowledgeDropdown />
</div>
</div> </div>
<AgGridReact <AgGridReact
className="w-full overflow-auto" className="w-full overflow-auto"
@ -324,6 +313,7 @@ function SearchPage() {
suppressRowClickSelection={true} suppressRowClickSelection={true}
getRowId={(params) => params.data.filename} getRowId={(params) => params.data.filename}
domLayout="normal" domLayout="normal"
theme={themeQuartz.withParams({ browserColorScheme: "inherit" })}
onSelectionChanged={onSelectionChanged} onSelectionChanged={onSelectionChanged}
noRowsOverlayComponent={() => ( noRowsOverlayComponent={() => (
<div className="text-center pb-[45px]"> <div className="text-center pb-[45px]">
@ -347,15 +337,12 @@ function SearchPage() {
selectedRows.length selectedRows.length
} document${ } document${
selectedRows.length > 1 ? "s" : "" selectedRows.length > 1 ? "s" : ""
}? This will remove all chunks and data associated with these documents. This action cannot be undone. }? This will remove all chunks and data associated with these documents. This action cannot be undone.`}
Documents to be deleted:
${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
confirmText="Delete All" confirmText="Delete All"
onConfirm={handleBulkDelete} onConfirm={handleBulkDelete}
isLoading={deleteDocumentMutation.isPending} isLoading={deleteDocumentMutation.isPending}
/> />
</div> </>
); );
} }

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

@ -114,7 +114,8 @@ function KnowledgeSourcesPage() {
const [chunkOverlap, setChunkOverlap] = useState<number>(50); const [chunkOverlap, setChunkOverlap] = useState<number>(50);
const [tableStructure, setTableStructure] = useState<boolean>(false); const [tableStructure, setTableStructure] = useState<boolean>(false);
const [ocr, setOcr] = useState<boolean>(false); const [ocr, setOcr] = useState<boolean>(false);
const [pictureDescriptions, setPictureDescriptions] = useState<boolean>(false); const [pictureDescriptions, setPictureDescriptions] =
useState<boolean>(false);
// Fetch settings using React Query // Fetch settings using React Query
const { data: settings = {} } = useGetSettingsQuery({ const { data: settings = {} } = useGetSettingsQuery({
@ -164,7 +165,7 @@ function KnowledgeSourcesPage() {
onSuccess: () => { onSuccess: () => {
console.log("Setting updated successfully"); console.log("Setting updated successfully");
}, },
onError: error => { onError: (error) => {
console.error("Failed to update setting:", error.message); console.error("Failed to update setting:", error.message);
}, },
}); });
@ -303,8 +304,8 @@ function KnowledgeSourcesPage() {
// Initialize connectors list with metadata from backend // Initialize connectors list with metadata from backend
const initialConnectors = connectorTypes const initialConnectors = connectorTypes
.filter(type => connectorsResult.connectors[type].available) // Only show available connectors .filter((type) => connectorsResult.connectors[type].available) // Only show available connectors
.map(type => ({ .map((type) => ({
id: type, id: type,
name: connectorsResult.connectors[type].name, name: connectorsResult.connectors[type].name,
description: connectorsResult.connectors[type].description, description: connectorsResult.connectors[type].description,
@ -327,8 +328,8 @@ function KnowledgeSourcesPage() {
); );
const isConnected = activeConnection !== undefined; const isConnected = activeConnection !== undefined;
setConnectors(prev => setConnectors((prev) =>
prev.map(c => prev.map((c) =>
c.type === connectorType c.type === connectorType
? { ? {
...c, ...c,
@ -347,7 +348,7 @@ function KnowledgeSourcesPage() {
const handleConnect = async (connector: Connector) => { const handleConnect = async (connector: Connector) => {
setIsConnecting(connector.id); setIsConnecting(connector.id);
setSyncResults(prev => ({ ...prev, [connector.id]: null })); setSyncResults((prev) => ({ ...prev, [connector.id]: null }));
try { try {
// Use the shared auth callback URL, same as connectors page // Use the shared auth callback URL, same as connectors page
@ -508,9 +509,9 @@ function KnowledgeSourcesPage() {
// Watch for task completions and refresh stats // Watch for task completions and refresh stats
useEffect(() => { useEffect(() => {
// Find newly completed tasks by comparing with previous state // Find newly completed tasks by comparing with previous state
const newlyCompletedTasks = tasks.filter(task => { const newlyCompletedTasks = tasks.filter((task) => {
const wasCompleted = const wasCompleted =
prevTasks.find(prev => prev.task_id === task.task_id)?.status === prevTasks.find((prev) => prev.task_id === task.task_id)?.status ===
"completed"; "completed";
return task.status === "completed" && !wasCompleted; return task.status === "completed" && !wasCompleted;
}); });
@ -564,7 +565,7 @@ function KnowledgeSourcesPage() {
fetch(`/api/reset-flow/retrieval`, { fetch(`/api/reset-flow/retrieval`, {
method: "POST", method: "POST",
}) })
.then(response => { .then((response) => {
if (response.ok) { if (response.ok) {
return response.json(); return response.json();
} }
@ -577,7 +578,7 @@ function KnowledgeSourcesPage() {
handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model); handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model);
closeDialog(); // Close after successful completion closeDialog(); // Close after successful completion
}) })
.catch(error => { .catch((error) => {
console.error("Error restoring retrieval flow:", error); console.error("Error restoring retrieval flow:", error);
closeDialog(); // Close even on error (could show error toast instead) closeDialog(); // Close even on error (could show error toast instead)
}); });
@ -587,7 +588,7 @@ function KnowledgeSourcesPage() {
fetch(`/api/reset-flow/ingest`, { fetch(`/api/reset-flow/ingest`, {
method: "POST", method: "POST",
}) })
.then(response => { .then((response) => {
if (response.ok) { if (response.ok) {
return response.json(); return response.json();
} }
@ -602,14 +603,14 @@ function KnowledgeSourcesPage() {
setPictureDescriptions(false); setPictureDescriptions(false);
closeDialog(); // Close after successful completion closeDialog(); // Close after successful completion
}) })
.catch(error => { .catch((error) => {
console.error("Error restoring ingest flow:", error); console.error("Error restoring ingest flow:", error);
closeDialog(); // Close even on error (could show error toast instead) closeDialog(); // Close even on error (could show error toast instead)
}); });
}; };
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>
@ -700,7 +701,7 @@ function KnowledgeSourcesPage() {
{/* Connectors Grid */} {/* Connectors Grid */}
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{connectors.map(connector => ( {connectors.map((connector) => (
<Card key={connector.id} className="relative flex flex-col"> <Card key={connector.id} className="relative flex flex-col">
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -834,7 +835,7 @@ function KnowledgeSourcesPage() {
} }
confirmText="Proceed" confirmText="Proceed"
confirmIcon={<ArrowUpRight />} confirmIcon={<ArrowUpRight />}
onConfirm={closeDialog => onConfirm={(closeDialog) =>
handleEditInLangflow("chat", closeDialog) handleEditInLangflow("chat", closeDialog)
} }
variant="warning" variant="warning"
@ -854,7 +855,8 @@ function KnowledgeSourcesPage() {
<Select <Select
value={ value={
settings.agent?.llm_model || settings.agent?.llm_model ||
modelsData?.language_models?.find(m => m.default)?.value || modelsData?.language_models?.find((m) => m.default)
?.value ||
"gpt-4" "gpt-4"
} }
onValueChange={handleModelChange} onValueChange={handleModelChange}
@ -882,7 +884,7 @@ function KnowledgeSourcesPage() {
id="system-prompt" id="system-prompt"
placeholder="Enter your agent instructions here..." placeholder="Enter your agent instructions here..."
value={systemPrompt} value={systemPrompt}
onChange={e => setSystemPrompt(e.target.value)} onChange={(e) => setSystemPrompt(e.target.value)}
rows={6} rows={6}
className={`resize-none ${ className={`resize-none ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
@ -993,7 +995,7 @@ function KnowledgeSourcesPage() {
confirmText="Proceed" confirmText="Proceed"
confirmIcon={<ArrowUpRight />} confirmIcon={<ArrowUpRight />}
variant="warning" variant="warning"
onConfirm={closeDialog => onConfirm={(closeDialog) =>
handleEditInLangflow("ingest", closeDialog) handleEditInLangflow("ingest", closeDialog)
} }
/> />
@ -1013,7 +1015,8 @@ function KnowledgeSourcesPage() {
disabled={true} disabled={true}
value={ value={
settings.knowledge?.embedding_model || settings.knowledge?.embedding_model ||
modelsData?.embedding_models?.find(m => m.default)?.value || modelsData?.embedding_models?.find((m) => m.default)
?.value ||
"text-embedding-ada-002" "text-embedding-ada-002"
} }
onValueChange={handleEmbeddingModelChange} onValueChange={handleEmbeddingModelChange}
@ -1051,7 +1054,7 @@ function KnowledgeSourcesPage() {
type="number" type="number"
min="1" min="1"
value={chunkSize} value={chunkSize}
onChange={e => handleChunkSizeChange(e.target.value)} onChange={(e) => handleChunkSizeChange(e.target.value)}
className="w-full pr-20" className="w-full pr-20"
/> />
<div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none"> <div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none">
@ -1074,7 +1077,7 @@ function KnowledgeSourcesPage() {
type="number" type="number"
min="0" min="0"
value={chunkOverlap} value={chunkOverlap}
onChange={e => handleChunkOverlapChange(e.target.value)} onChange={(e) => handleChunkOverlapChange(e.target.value)}
className="w-full pr-20" className="w-full pr-20"
/> />
<div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none"> <div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none">
@ -1113,7 +1116,8 @@ function KnowledgeSourcesPage() {
OCR OCR
</Label> </Label>
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Extracts text from images/PDFs. Ingest is slower when enabled. Extracts text from images/PDFs. Ingest is slower when
enabled.
</div> </div>
</div> </div>
<Switch <Switch

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

@ -2,7 +2,10 @@
import { Bell, Loader2 } from "lucide-react"; import { Bell, Loader2 } from "lucide-react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useGetConversationsQuery, type ChatConversation } from "@/app/api/queries/useGetConversationsQuery"; import {
useGetConversationsQuery,
type ChatConversation,
} from "@/app/api/queries/useGetConversationsQuery";
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery"; import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel"; import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
import Logo from "@/components/logo/logo"; import Logo from "@/components/logo/logo";
@ -16,6 +19,7 @@ import { useKnowledgeFilter } from "@/contexts/knowledge-filter-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";
import { cn } from "@/lib/utils";
export function LayoutWrapper({ children }: { children: React.ReactNode }) { export function LayoutWrapper({ children }: { children: React.ReactNode }) {
const pathname = usePathname(); const pathname = usePathname();
@ -34,6 +38,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
// Only fetch conversations on chat page // Only fetch conversations on chat page
const isOnChatPage = pathname === "/" || pathname === "/chat"; const isOnChatPage = pathname === "/" || pathname === "/chat";
const isOnKnowledgePage = pathname === "/knowledge";
const { data: conversations = [], isLoading: isConversationsLoading } = const { data: conversations = [], isLoading: isConversationsLoading } =
useGetConversationsQuery(endpoint, refreshTrigger, { useGetConversationsQuery(endpoint, refreshTrigger, {
enabled: isOnChatPage && (isAuthenticated || isNoAuthMode), enabled: isOnChatPage && (isAuthenticated || isNoAuthMode),
@ -53,7 +58,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
(task) => (task) =>
task.status === "pending" || task.status === "pending" ||
task.status === "running" || task.status === "running" ||
task.status === "processing", task.status === "processing"
); );
// Show loading state when backend isn't ready // Show loading state when backend isn't ready
@ -75,8 +80,9 @@ 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 className="h-screen">
<header className="header-arrangement bg-background sticky top-0 z-50"> {/* Header */}
<header className="header-arrangement bg-background">
<div className="header-start-display px-4"> <div className="header-start-display px-4">
{/* Logo/Title */} {/* Logo/Title */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -118,31 +124,38 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
</div> </div>
</div> </div>
</header> </header>
<div className="side-bar-arrangement bg-background fixed left-0 top-[53px] bottom-0 md:flex hidden">
<Navigation <div
conversations={conversations} className={cn(
isConversationsLoading={isConversationsLoading} "app-grid-cols-arrangement group",
onNewConversation={handleNewConversation} isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
/> isMenuOpen && "notifications-open"
</div> )}
<main
className={`md:pl-72 transition-all duration-300 overflow-y-auto h-[calc(100vh-53px)] ${
isMenuOpen && isPanelOpen
? "md:pr-[728px]"
: // Both open: 384px (menu) + 320px (KF panel) + 24px (original padding)
isMenuOpen
? "md:pr-96"
: // Only menu open: 384px
isPanelOpen
? "md:pr-80"
: // Only KF panel open: 320px
"md:pr-0" // Neither open: 24px
}`}
> >
<div className="container py-6 lg:py-8 px-4 lg:px-6">{children}</div> {/* Sidebar Navigation */}
</main> <aside className="bg-background border-r overflow-hidden">
<TaskNotificationMenu /> <Navigation
<KnowledgeFilterPanel /> conversations={conversations}
isConversationsLoading={isConversationsLoading}
onNewConversation={handleNewConversation}
/>
</aside>
{/* Main Content */}
<main className="overflow-y-auto">
<div className="container p-6 h-full">{children}</div>
</main>
{/* Task Notifications Panel */}
<aside className="overflow-y-auto overflow-x-hidden">
{isMenuOpen && <TaskNotificationMenu />}
</aside>
{/* Knowledge Filter Panel */}
<aside className="overflow-y-auto overflow-x-hidden">
{isPanelOpen && <KnowledgeFilterPanel />}
</aside>
</div>
</div> </div>
); );
} }

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

@ -136,10 +136,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" />