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

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,
Loader2,
PlugZap,
Plus,
Upload,
} from "lucide-react";
import { useRouter } from "next/navigation";
@ -25,15 +24,7 @@ import { Label } from "@/components/ui/label";
import { useTask } from "@/contexts/task-context";
import { cn } from "@/lib/utils";
interface KnowledgeDropdownProps {
active?: boolean;
variant?: "navigation" | "button";
}
export function KnowledgeDropdown({
active,
variant = "navigation",
}: KnowledgeDropdownProps) {
export function KnowledgeDropdown() {
const { addTask } = useTask();
const router = useRouter();
const [isOpen, setIsOpen] = useState(false);
@ -437,77 +428,35 @@ export function KnowledgeDropdown({
return (
<>
<div ref={dropdownRef} className="relative">
<button
<Button
onClick={() => !isLoading && setIsOpen(!isOpen)}
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" />
) : (
<Plus className="h-4 w-4" />
)}
<span>
{isLoading
? fileUploading
? "Uploading..."
: folderLoading
? "Processing Folder..."
: s3Loading
? "Processing S3..."
: isNavigatingToCloud
? "Loading..."
: "Processing..."
: "Add Knowledge"}
</span>
{!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"
)}
/>
<>
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
<span>
{isLoading
? fileUploading
? "Uploading..."
: folderLoading
? "Processing Folder..."
: s3Loading
? "Processing S3..."
: isNavigatingToCloud
? "Loading..."
: "Processing..."
: "Add Knowledge"}
</span>
{!isLoading && (
<ChevronDown
className={cn(
"h-4 w-4 transition-transform",
isOpen && "rotate-180"
)}
Knowledge
</div>
{!isLoading && (
<ChevronDown
className={cn(
"h-4 w-4 transition-transform",
isOpen && "rotate-180"
)}
/>
)}
</>
)}
</button>
/>
)}
</>
</Button>
{isOpen && !isLoading && (
<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}
title={"tooltip" in item ? item.tooltip : undefined}
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 &&
item.disabled &&
"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}
</button>
))}
@ -561,7 +511,7 @@ export function KnowledgeDropdown({
type="text"
placeholder="/path/to/documents"
value={folderPath}
onChange={e => setFolderPath(e.target.value)}
onChange={(e) => setFolderPath(e.target.value)}
/>
</div>
<div className="flex justify-end gap-2">
@ -603,7 +553,7 @@ export function KnowledgeDropdown({
type="text"
placeholder="s3://bucket/path"
value={bucketUrl}
onChange={e => setBucketUrl(e.target.value)}
onChange={(e) => setBucketUrl(e.target.value)}
/>
</div>
<div className="flex justify-end gap-2">

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

@ -231,8 +231,8 @@ export function KnowledgeFilterPanel() {
};
return (
<div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l z-40 overflow-y-auto">
<Card className="h-full rounded-none border-0 shadow-lg flex flex-col">
<div className="h-full bg-background border-l">
<Card className="h-full rounded-none border-0 flex flex-col">
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-lg flex items-center gap-2">

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

@ -53,6 +53,8 @@
--flow-icon: #2f67d0;
--radius: 0.5rem;
--app-header-height: 53px;
}
.dark {
@ -108,6 +110,29 @@
}
@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 {
@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";
import type { ColDef } from "ag-grid-community";
import { themeQuartz, type ColDef } from "ag-grid-community";
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 { type ChangeEvent, useCallback, useRef, useState } from "react";
import { SiGoogledrive } from "react-icons/si";
@ -46,8 +46,8 @@ function getSourceIcon(connectorType?: string) {
function SearchPage() {
const router = useRouter();
const { isMenuOpen, files: taskFiles } = useTask();
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
const { files: taskFiles } = useTask();
const { selectedFilter, setSelectedFilter, parsedFilterData } =
useKnowledgeFilter();
const [selectedRows, setSelectedRows] = useState<File[]>([]);
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
@ -144,7 +144,6 @@ function SearchPage() {
{
field: "avgScore",
headerName: "Avg score",
initialFlex: 0.5,
cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
return (
<span className="text-xs text-accent-emerald-foreground bg-accent-emerald px-2 py-1 rounded">
@ -229,32 +228,19 @@ function SearchPage() {
};
return (
<div
className={`fixed inset-0 md:left-72 top-[53px] 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
}`}
>
<div className="flex-1 flex flex-col min-h-0 px-6 py-6">
<>
<div className="flex flex-col h-full">
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-semibold">Project Knowledge</h2>
<KnowledgeDropdown variant="button" />
<h2 className="text-lg font-semibold">Knowledge</h2>
</div>
{/* Search Input Area */}
<div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
<form className="flex gap-3">
<div className="primary-input min-h-10 !flex items-center flex-nowrap focus-within:border-foreground transition-colors !p-[0.3rem]">
<div className="flex-1 flex flex-shrink-0 flex-wrap-reverse gap-3 mb-6">
<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] max-w-[min(640px,100%)] min-w-[100px]">
{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"]
}`}
@ -307,10 +293,13 @@ function SearchPage() {
className="rounded-lg flex-shrink-0"
onClick={() => setShowBulkDeleteDialog(true)}
>
<Trash2 className="h-4 w-4" /> Delete
Delete
</Button>
)}
</form>
<div className="ml-auto">
<KnowledgeDropdown />
</div>
</div>
<AgGridReact
className="w-full overflow-auto"
@ -324,6 +313,7 @@ function SearchPage() {
suppressRowClickSelection={true}
getRowId={(params) => params.data.filename}
domLayout="normal"
theme={themeQuartz.withParams({ browserColorScheme: "inherit" })}
onSelectionChanged={onSelectionChanged}
noRowsOverlayComponent={() => (
<div className="text-center pb-[45px]">
@ -347,15 +337,12 @@ function SearchPage() {
selectedRows.length
} document${
selectedRows.length > 1 ? "s" : ""
}? 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")}`}
}? This will remove all chunks and data associated with these documents. This action cannot be undone.`}
confirmText="Delete All"
onConfirm={handleBulkDelete}
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 [tableStructure, setTableStructure] = 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
const { data: settings = {} } = useGetSettingsQuery({
@ -164,7 +165,7 @@ function KnowledgeSourcesPage() {
onSuccess: () => {
console.log("Setting updated successfully");
},
onError: error => {
onError: (error) => {
console.error("Failed to update setting:", error.message);
},
});
@ -303,8 +304,8 @@ function KnowledgeSourcesPage() {
// Initialize connectors list with metadata from backend
const initialConnectors = connectorTypes
.filter(type => connectorsResult.connectors[type].available) // Only show available connectors
.map(type => ({
.filter((type) => connectorsResult.connectors[type].available) // Only show available connectors
.map((type) => ({
id: type,
name: connectorsResult.connectors[type].name,
description: connectorsResult.connectors[type].description,
@ -327,8 +328,8 @@ function KnowledgeSourcesPage() {
);
const isConnected = activeConnection !== undefined;
setConnectors(prev =>
prev.map(c =>
setConnectors((prev) =>
prev.map((c) =>
c.type === connectorType
? {
...c,
@ -347,7 +348,7 @@ function KnowledgeSourcesPage() {
const handleConnect = async (connector: Connector) => {
setIsConnecting(connector.id);
setSyncResults(prev => ({ ...prev, [connector.id]: null }));
setSyncResults((prev) => ({ ...prev, [connector.id]: null }));
try {
// Use the shared auth callback URL, same as connectors page
@ -508,9 +509,9 @@ function KnowledgeSourcesPage() {
// Watch for task completions and refresh stats
useEffect(() => {
// Find newly completed tasks by comparing with previous state
const newlyCompletedTasks = tasks.filter(task => {
const newlyCompletedTasks = tasks.filter((task) => {
const wasCompleted =
prevTasks.find(prev => prev.task_id === task.task_id)?.status ===
prevTasks.find((prev) => prev.task_id === task.task_id)?.status ===
"completed";
return task.status === "completed" && !wasCompleted;
});
@ -564,7 +565,7 @@ function KnowledgeSourcesPage() {
fetch(`/api/reset-flow/retrieval`, {
method: "POST",
})
.then(response => {
.then((response) => {
if (response.ok) {
return response.json();
}
@ -577,7 +578,7 @@ function KnowledgeSourcesPage() {
handleModelChange(DEFAULT_AGENT_SETTINGS.llm_model);
closeDialog(); // Close after successful completion
})
.catch(error => {
.catch((error) => {
console.error("Error restoring retrieval flow:", error);
closeDialog(); // Close even on error (could show error toast instead)
});
@ -587,7 +588,7 @@ function KnowledgeSourcesPage() {
fetch(`/api/reset-flow/ingest`, {
method: "POST",
})
.then(response => {
.then((response) => {
if (response.ok) {
return response.json();
}
@ -602,14 +603,14 @@ function KnowledgeSourcesPage() {
setPictureDescriptions(false);
closeDialog(); // Close after successful completion
})
.catch(error => {
.catch((error) => {
console.error("Error restoring ingest flow:", error);
closeDialog(); // Close even on error (could show error toast instead)
});
};
return (
<div className="space-y-8">
<div className="space-y-8 pb-6">
{/* Connectors Section */}
<div className="space-y-6">
<div>
@ -700,7 +701,7 @@ function KnowledgeSourcesPage() {
{/* Connectors Grid */}
<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">
<CardHeader>
<div className="flex items-center justify-between">
@ -834,7 +835,7 @@ function KnowledgeSourcesPage() {
}
confirmText="Proceed"
confirmIcon={<ArrowUpRight />}
onConfirm={closeDialog =>
onConfirm={(closeDialog) =>
handleEditInLangflow("chat", closeDialog)
}
variant="warning"
@ -854,7 +855,8 @@ function KnowledgeSourcesPage() {
<Select
value={
settings.agent?.llm_model ||
modelsData?.language_models?.find(m => m.default)?.value ||
modelsData?.language_models?.find((m) => m.default)
?.value ||
"gpt-4"
}
onValueChange={handleModelChange}
@ -882,7 +884,7 @@ function KnowledgeSourcesPage() {
id="system-prompt"
placeholder="Enter your agent instructions here..."
value={systemPrompt}
onChange={e => setSystemPrompt(e.target.value)}
onChange={(e) => setSystemPrompt(e.target.value)}
rows={6}
className={`resize-none ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
@ -993,7 +995,7 @@ function KnowledgeSourcesPage() {
confirmText="Proceed"
confirmIcon={<ArrowUpRight />}
variant="warning"
onConfirm={closeDialog =>
onConfirm={(closeDialog) =>
handleEditInLangflow("ingest", closeDialog)
}
/>
@ -1013,7 +1015,8 @@ function KnowledgeSourcesPage() {
disabled={true}
value={
settings.knowledge?.embedding_model ||
modelsData?.embedding_models?.find(m => m.default)?.value ||
modelsData?.embedding_models?.find((m) => m.default)
?.value ||
"text-embedding-ada-002"
}
onValueChange={handleEmbeddingModelChange}
@ -1051,7 +1054,7 @@ function KnowledgeSourcesPage() {
type="number"
min="1"
value={chunkSize}
onChange={e => handleChunkSizeChange(e.target.value)}
onChange={(e) => handleChunkSizeChange(e.target.value)}
className="w-full pr-20"
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none">
@ -1074,7 +1077,7 @@ function KnowledgeSourcesPage() {
type="number"
min="0"
value={chunkOverlap}
onChange={e => handleChunkOverlapChange(e.target.value)}
onChange={(e) => handleChunkOverlapChange(e.target.value)}
className="w-full pr-20"
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-8 pointer-events-none">
@ -1113,7 +1116,8 @@ function KnowledgeSourcesPage() {
OCR
</Label>
<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>
<Switch

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

@ -2,7 +2,10 @@
import { Bell, Loader2 } from "lucide-react";
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 { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
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 { DiscordLink } from "@/components/discord-link"
import { useTask } from "@/contexts/task-context";
import { cn } from "@/lib/utils";
export function LayoutWrapper({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
@ -34,6 +38,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
// Only fetch conversations on chat page
const isOnChatPage = pathname === "/" || pathname === "/chat";
const isOnKnowledgePage = pathname === "/knowledge";
const { data: conversations = [], isLoading: isConversationsLoading } =
useGetConversationsQuery(endpoint, refreshTrigger, {
enabled: isOnChatPage && (isAuthenticated || isNoAuthMode),
@ -53,7 +58,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
(task) =>
task.status === "pending" ||
task.status === "running" ||
task.status === "processing",
task.status === "processing"
);
// 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
return (
<div className="h-full relative">
<header className="header-arrangement bg-background sticky top-0 z-50">
<div className="h-screen">
{/* Header */}
<header className="header-arrangement bg-background">
<div className="header-start-display px-4">
{/* Logo/Title */}
<div className="flex items-center gap-2">
@ -118,31 +124,38 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
</div>
</div>
</header>
<div className="side-bar-arrangement bg-background fixed left-0 top-[53px] bottom-0 md:flex hidden">
<Navigation
conversations={conversations}
isConversationsLoading={isConversationsLoading}
onNewConversation={handleNewConversation}
/>
</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={cn(
"app-grid-cols-arrangement group",
isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
isMenuOpen && "notifications-open"
)}
>
<div className="container py-6 lg:py-8 px-4 lg:px-6">{children}</div>
</main>
<TaskNotificationMenu />
<KnowledgeFilterPanel />
{/* Sidebar Navigation */}
<aside className="bg-background border-r overflow-hidden">
<Navigation
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>
);
}

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

@ -136,10 +136,10 @@ export function TaskNotificationMenu() {
}
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">
{/* 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 gap-2">
<Bell className="h-5 w-5 text-muted-foreground" />