From baaf624eae9d5e90b95c2540404f0f0ea8d91716 Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Tue, 30 Sep 2025 13:26:24 -0600 Subject: [PATCH 01/12] added button themes and fixed alignment --- frontend/components/navigation-layout.tsx | 5 +- frontend/src/components/layout-wrapper.tsx | 23 +++--- frontend/src/components/ui/buttonTheme.tsx | 68 ++++++++++++++++ frontend/src/components/user-nav.tsx | 95 +++++++++++++--------- 4 files changed, 139 insertions(+), 52 deletions(-) create mode 100644 frontend/src/components/ui/buttonTheme.tsx diff --git a/frontend/components/navigation-layout.tsx b/frontend/components/navigation-layout.tsx index a2fdbe8f..2722c81f 100644 --- a/frontend/components/navigation-layout.tsx +++ b/frontend/components/navigation-layout.tsx @@ -1,7 +1,10 @@ "use client"; import { usePathname } from "next/navigation"; -import { useGetConversationsQuery, type ChatConversation } from "@/app/api/queries/useGetConversationsQuery"; +import { + useGetConversationsQuery, + type ChatConversation, +} from "@/app/api/queries/useGetConversationsQuery"; import { KnowledgeFilterDropdown } from "@/components/knowledge-filter-dropdown"; import { ModeToggle } from "@/components/mode-toggle"; import { Navigation } from "@/components/navigation"; diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx index 5c2f0e13..c59b5158 100644 --- a/frontend/src/components/layout-wrapper.tsx +++ b/frontend/src/components/layout-wrapper.tsx @@ -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"; @@ -50,10 +53,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) { // Calculate active tasks for the bell icon const activeTasks = tasks.filter( - (task) => + task => task.status === "pending" || task.status === "running" || - task.status === "processing", + task.status === "processing" ); // Show loading state when backend isn't ready @@ -85,7 +88,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
-
+
{/* Knowledge Filter Dropdown */} {/* */} {/* Task Notification Bell */} - + {/* Separator */} -
+
diff --git a/frontend/src/components/ui/buttonTheme.tsx b/frontend/src/components/ui/buttonTheme.tsx new file mode 100644 index 00000000..b23b6a89 --- /dev/null +++ b/frontend/src/components/ui/buttonTheme.tsx @@ -0,0 +1,68 @@ +import { useEffect, useState } from "react"; +import { Monitor, Moon, Sun } from "lucide-react"; +import { useTheme } from "next-themes"; + +export const ThemeButtons = () => { + const { theme, setTheme } = useTheme(); + const [selectedTheme, setSelectedTheme] = useState("dark"); + + // Sync local state with theme context + useEffect(() => { + if (theme) { + setSelectedTheme(theme); + } + }, [theme]); + + const handleThemeChange = (newTheme: string) => { + setSelectedTheme(newTheme); + setTheme(newTheme); + }; + + return ( +
+ {/* Light Theme Button */} + + + {/* Dark Theme Button */} + + + {/* System Theme Button */} + +
+ ); +}; + +export default ThemeButtons; diff --git a/frontend/src/components/user-nav.tsx b/frontend/src/components/user-nav.tsx index 85ec5ddd..3adc9fd7 100644 --- a/frontend/src/components/user-nav.tsx +++ b/frontend/src/components/user-nav.tsx @@ -1,7 +1,7 @@ -"use client" +"use client"; -import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" -import { Button } from "@/components/ui/button" +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, @@ -9,65 +9,79 @@ import { DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" -import { useAuth } from "@/contexts/auth-context" -import { LogIn, LogOut, User, Moon, Sun, ChevronsUpDown } from "lucide-react" -import { useTheme } from "next-themes" +} from "@/components/ui/dropdown-menu"; +import { useAuth } from "@/contexts/auth-context"; +import { LogIn, LogOut, User, Moon, Sun, ChevronsUpDown } from "lucide-react"; +import { useTheme } from "next-themes"; +import ThemeButtons from "./ui/buttonTheme"; export function UserNav() { - const { user, isLoading, isAuthenticated, isNoAuthMode, login, logout } = useAuth() - const { theme, setTheme } = useTheme() + const { user, isLoading, isAuthenticated, isNoAuthMode, login, logout } = + useAuth(); + const { theme, setTheme } = useTheme(); if (isLoading) { - return ( -
- ) + return
; } // In no-auth mode, show a simple theme switcher instead of auth UI if (isNoAuthMode) { return ( - - ) + ); } if (!isAuthenticated) { return ( - - ) + ); } return ( - + + -
+

{user?.name}

{user?.email} @@ -75,20 +89,21 @@ export function UserNav() {

- setTheme(theme === "light" ? "dark" : "light")}> - {theme === "light" ? ( - - ) : ( - - )} - Toggle Theme - + {/* */} +
+ Theme + +
+ {/* */} - + Log out - ) -} \ No newline at end of file + ); +} From e94e6bb5a8bb26d34a7dedd4b964bd0f64a1f837 Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Tue, 30 Sep 2025 13:39:33 -0600 Subject: [PATCH 02/12] logo fix --- frontend/src/components/layout-wrapper.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx index c59b5158..0585a357 100644 --- a/frontend/src/components/layout-wrapper.tsx +++ b/frontend/src/components/layout-wrapper.tsx @@ -80,11 +80,11 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) { return (
-
+
{/* Logo/Title */} -
+
- OpenRAG + OpenRAG
From d1b6ff74290978687c3ec3beed14c38e2563f42b Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Tue, 30 Sep 2025 13:56:04 -0600 Subject: [PATCH 03/12] Refactor user navigation and theme button styles for improved layout and consistency. Adjusted padding and margins in user dropdown, updated button sizes in theme selection. --- frontend/src/components/ui/buttonTheme.tsx | 8 ++++---- frontend/src/components/user-nav.tsx | 22 ++++++++++------------ 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/ui/buttonTheme.tsx b/frontend/src/components/ui/buttonTheme.tsx index b23b6a89..62648541 100644 --- a/frontend/src/components/ui/buttonTheme.tsx +++ b/frontend/src/components/ui/buttonTheme.tsx @@ -19,10 +19,10 @@ export const ThemeButtons = () => { }; return ( -
+
{/* Light Theme Button */} - + -
+

{user?.name}

{user?.email}

- - {/* */} -
+ +
Theme
- {/* */} - - + ); From 9863eed98b2af62c108ed94c0c55014687e82a22 Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Tue, 30 Sep 2025 14:03:46 -0600 Subject: [PATCH 04/12] Update header and user navigation styles for improved layout consistency. Adjusted header height and button sizes for better alignment and usability. --- frontend/src/components/layout-wrapper.tsx | 4 ++-- frontend/src/components/user-nav.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx index 0585a357..8143a63c 100644 --- a/frontend/src/components/layout-wrapper.tsx +++ b/frontend/src/components/layout-wrapper.tsx @@ -79,7 +79,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) { // For all other pages, render with Langflow-styled navigation and task menu return (
-
+
{/* Logo/Title */}
@@ -104,7 +104,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) { {/* Task Notification Bell */} + ); } if (!isAuthenticated) { return ( - + ); } From 73af333060601bbee87a1234c1e2f8705d322d57 Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Wed, 1 Oct 2025 11:58:51 -0600 Subject: [PATCH 06/12] fixed hover and colors for nav --- frontend/components/navigation.tsx | 38 ++++++++++++++-------------- frontend/src/components/user-nav.tsx | 6 ++--- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/frontend/components/navigation.tsx b/frontend/components/navigation.tsx index 339b7d22..a8f80c43 100644 --- a/frontend/components/navigation.tsx +++ b/frontend/components/navigation.tsx @@ -111,7 +111,7 @@ export function Navigation({ ) { // Filter out the deleted conversation and find the next one const remainingConversations = conversations.filter( - (conv) => conv.response_id !== conversationToDelete.response_id, + conv => conv.response_id !== conversationToDelete.response_id ); if (remainingConversations.length > 0) { @@ -132,7 +132,7 @@ export function Navigation({ setDeleteModalOpen(false); setConversationToDelete(null); }, - onError: (error) => { + onError: error => { toast.error(`Failed to delete conversation: ${error.message}`); }, }); @@ -164,7 +164,7 @@ export function Navigation({ window.dispatchEvent( new CustomEvent("fileUploadStart", { detail: { filename: file.name }, - }), + }) ); try { @@ -188,7 +188,7 @@ export function Navigation({ filename: file.name, error: "Failed to process document", }, - }), + }) ); // Trigger loading end event @@ -208,7 +208,7 @@ export function Navigation({ window.dispatchEvent( new CustomEvent("fileUploaded", { detail: { file, result }, - }), + }) ); // Trigger loading end event @@ -222,7 +222,7 @@ export function Navigation({ window.dispatchEvent( new CustomEvent("fileUploadError", { detail: { filename: file.name, error: "Failed to process document" }, - }), + }) ); } }; @@ -244,7 +244,7 @@ export function Navigation({ const handleDeleteConversation = ( conversation: ChatConversation, - event?: React.MouseEvent, + event?: React.MouseEvent ) => { if (event) { event.preventDefault(); @@ -256,7 +256,7 @@ export function Navigation({ const handleContextMenuAction = ( action: string, - conversation: ChatConversation, + conversation: ChatConversation ) => { switch (action) { case "delete": @@ -334,15 +334,15 @@ export function Navigation({
- {routes.map((route) => ( + {routes.map(route => (
@@ -350,8 +350,8 @@ export function Navigation({ className={cn( "h-4 w-4 mr-3 shrink-0", route.active - ? "text-accent-foreground" - : "text-muted-foreground group-hover:text-foreground", + ? "text-muted-foreground" + : "text-muted-foreground group-hover:text-muted-foreground" )} /> {route.label} @@ -429,7 +429,7 @@ export function Navigation({ No conversations yet
) : ( - conversations.map((conversation) => ( + conversations.map(conversation => (
) : ( - conversationDocs.map((doc) => ( + conversationDocs.map(doc => (
setTheme(theme === "dark" ? "light" : "dark")} @@ -42,7 +42,7 @@ export function UserNav() { return ( @@ -52,7 +52,7 @@ export function UserNav() { return ( - {/* Separator */} -
+
diff --git a/frontend/src/components/user-nav.tsx b/frontend/src/components/user-nav.tsx index bac2f538..cf0f5527 100644 --- a/frontend/src/components/user-nav.tsx +++ b/frontend/src/components/user-nav.tsx @@ -42,7 +42,7 @@ export function UserNav() { return ( From b27ec87fe9f4b36a14429771d023976afeb5833d Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Wed, 1 Oct 2025 14:26:08 -0600 Subject: [PATCH 08/12] Refactor KnowledgeFilterList component layout and improve loading states. Update Navigation component styles for consistency. Adjust LayoutWrapper sidebar positioning. Fix UserNav conditional rendering logic. Clean up ChatProvider state update functions for clarity. --- frontend/components/knowledge-filter-list.tsx | 184 +++++++++--------- frontend/components/navigation.tsx | 15 +- frontend/src/components/layout-wrapper.tsx | 2 +- frontend/src/components/user-nav.tsx | 2 +- frontend/src/contexts/chat-context.tsx | 10 +- 5 files changed, 109 insertions(+), 104 deletions(-) diff --git a/frontend/components/knowledge-filter-list.tsx b/frontend/components/knowledge-filter-list.tsx index bac0e5ca..8e62058f 100644 --- a/frontend/components/knowledge-filter-list.tsx +++ b/frontend/components/knowledge-filter-list.tsx @@ -1,8 +1,7 @@ "use client"; import { useState } from "react"; -import { Button } from "@/components/ui/button"; -import { Loader2, Plus } from "lucide-react"; +import { Plus } from "lucide-react"; import { cn } from "@/lib/utils"; import { useGetFiltersSearchQuery, @@ -65,95 +64,102 @@ export function KnowledgeFilterList({ }; return ( - <> -
-
-
- Knowledge Filters -
- -
- {loading ? ( -
- - - Loading... - -
- ) : filters.length === 0 ? ( -
- {searchQuery ? "No filters found" : "No saved filters"} -
- ) : ( - filters.map((filter) => ( -
handleFilterSelect(filter)} - className={cn( - "flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors", - selectedFilter?.id === filter.id && - "active bg-accent text-accent-foreground" - )} +
+
+
+
+

+ Knowledge Filters +

+ +
+
+ {loading ? ( +
+ Loading...
-
- )) - )} + ) : filters.length === 0 ? ( +
+ {searchQuery ? "No filters found" : "No saved filters"} +
+ ) : ( + filters.map(filter => ( +
handleFilterSelect(filter)} + className={cn( + "flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors", + selectedFilter?.id === filter.id && + "active bg-accent text-accent-foreground" + )} + > +
+
+ {(() => { + const parsed = parseQueryData( + filter.query_data + ) as ParsedQueryData; + const Icon = iconKeyToComponent(parsed.icon); + return ( +
+ {Icon && } +
+ ); + })()} +
+ {filter.name} +
+
+ {filter.description && ( +
+ {filter.description} +
+ )} +
+
+ {new Date(filter.created_at).toLocaleDateString( + undefined, + { + month: "short", + day: "numeric", + year: "numeric", + } + )} +
+ + {(() => { + const dataSources = parseQueryData(filter.query_data) + .filters.data_sources; + if (dataSources[0] === "*") return "All sources"; + const count = dataSources.length; + return `${count} ${ + count === 1 ? "source" : "sources" + }`; + })()} + +
+
+
+ )) + )} +
+
+ {/* Create flow moved to panel create mode */}
- {/* Create flow moved to panel create mode */} - +
); } diff --git a/frontend/components/navigation.tsx b/frontend/components/navigation.tsx index c215f3dc..83306f21 100644 --- a/frontend/components/navigation.tsx +++ b/frontend/components/navigation.tsx @@ -5,7 +5,6 @@ import { FileText, Library, MessageSquare, - MoreHorizontal, Plus, Settings2, Trash2, @@ -397,7 +396,7 @@ export function Navigation({ {/* Conversations List - grows naturally, doesn't fill all space */}
{loadingNewConversation || isConversationsLoading ? ( -
+
Loading...
) : ( @@ -406,7 +405,7 @@ export function Navigation({ {placeholderConversation && (
-
+
setTheme(theme === "dark" ? "light" : "dark")} diff --git a/frontend/src/contexts/chat-context.tsx b/frontend/src/contexts/chat-context.tsx index db79e0d3..f41cd5d9 100644 --- a/frontend/src/contexts/chat-context.tsx +++ b/frontend/src/contexts/chat-context.tsx @@ -96,7 +96,7 @@ export function ChatProvider({ children }: ChatProviderProps) { const refreshConversations = useCallback((force = false) => { if (force) { // Immediate refresh for important updates like new conversations - setRefreshTrigger((prev) => prev + 1); + setRefreshTrigger(prev => prev + 1); return; } @@ -107,7 +107,7 @@ export function ChatProvider({ children }: ChatProviderProps) { // Set a new timeout to debounce multiple rapid refresh calls refreshTimeoutRef.current = setTimeout(() => { - setRefreshTrigger((prev) => prev + 1); + setRefreshTrigger(prev => prev + 1); }, 250); // 250ms debounce }, []); @@ -123,7 +123,7 @@ export function ChatProvider({ children }: ChatProviderProps) { // Silent refresh - updates data without loading states const refreshConversationsSilent = useCallback(async () => { // Trigger silent refresh that updates conversation data without showing loading states - setRefreshTriggerSilent((prev) => prev + 1); + setRefreshTriggerSilent(prev => prev + 1); }, []); const loadConversation = useCallback((conversation: ConversationData) => { @@ -164,7 +164,7 @@ export function ChatProvider({ children }: ChatProviderProps) { }, [endpoint, refreshConversations]); const addConversationDoc = useCallback((filename: string) => { - setConversationDocs((prev) => [ + setConversationDocs(prev => [ ...prev, { filename, uploadTime: new Date() }, ]); @@ -180,7 +180,7 @@ export function ChatProvider({ children }: ChatProviderProps) { setCurrentConversationId(null); // Clear current conversation to indicate new conversation setConversationData(null); // Clear conversation data to prevent reloading // Set the response ID that we're forking from as the previous response ID - setPreviousResponseIds((prev) => ({ + setPreviousResponseIds(prev => ({ ...prev, [endpoint]: responseId, })); From bf89b16854473d1246a21c0acdd686dc6de1ec00 Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Wed, 1 Oct 2025 14:32:02 -0600 Subject: [PATCH 09/12] border better --- frontend/components/navigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/navigation.tsx b/frontend/components/navigation.tsx index 83306f21..74046447 100644 --- a/frontend/components/navigation.tsx +++ b/frontend/components/navigation.tsx @@ -357,7 +357,7 @@ export function Navigation({
{route.label === "Settings" && ( -
+
)}
))} From 9fb771d048422584c8f7ab9622761d443127ea43 Mon Sep 17 00:00:00 2001 From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com> Date: Thu, 2 Oct 2025 12:38:09 -0600 Subject: [PATCH 10/12] Update Navigation component styles for improved layout consistency and spacing adjustments. --- frontend/components/navigation.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/components/navigation.tsx b/frontend/components/navigation.tsx index 74046447..423172f5 100644 --- a/frontend/components/navigation.tsx +++ b/frontend/components/navigation.tsx @@ -331,7 +331,7 @@ export function Navigation({ return (
-
+
{routes.map(route => (
@@ -373,10 +373,10 @@ export function Navigation({ {/* Chat Page Specific Sections */} {isOnChatPage && ( -
+
{/* Conversations Section */} -
-
+
+

Conversations

@@ -392,7 +392,7 @@ export function Navigation({
-
+
{/* Conversations List - grows naturally, doesn't fill all space */}
{loadingNewConversation || isConversationsLoading ? ( @@ -424,7 +424,7 @@ export function Navigation({ {/* Show regular conversations */} {conversations.length === 0 && !placeholderConversation ? ( -
+
No conversations yet
) : ( @@ -432,7 +432,7 @@ export function Navigation({