From 2ac257480ce7d5c42b2d5855fd3daeda39b27044 Mon Sep 17 00:00:00 2001 From: Brent O'Neill Date: Wed, 24 Sep 2025 11:54:25 -0600 Subject: [PATCH] Settings page design sweep --- frontend/components/ui/button.tsx | 11 +- frontend/src/app/settings/page.tsx | 716 +++++++++--------- .../src/components/confirmation-dialog.tsx | 61 +- 3 files changed, 396 insertions(+), 392 deletions(-) diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx index b9a83922..aff33335 100644 --- a/frontend/components/ui/button.tsx +++ b/frontend/components/ui/button.tsx @@ -14,8 +14,7 @@ const buttonVariants = cva( "border border-input hover:bg-muted hover:text-accent-foreground disabled:bg-muted disabled:!border-none", primary: "border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm", - warning: - "bg-warning-foreground text-warning-text hover:bg-warning-foreground/90 hover:shadow-sm", + warning: "bg-warning text-secondary hover:bg-warning/90", secondary: "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5", ghost: @@ -39,14 +38,14 @@ const buttonVariants = cva( variant: "default", size: "default", }, - }, + } ); function toTitleCase(text: string) { return text ?.split(" ") ?.map( - (word) => word?.charAt(0)?.toUpperCase() + word?.slice(1)?.toLowerCase(), + (word) => word?.charAt(0)?.toUpperCase() + word?.slice(1)?.toLowerCase() ) ?.join(" "); } @@ -72,7 +71,7 @@ const Button = React.forwardRef( ignoreTitleCase = false, ...props }, - ref, + ref ) => { const Comp = asChild ? Slot : "button"; let newChildren = children; @@ -101,7 +100,7 @@ const Button = React.forwardRef( )} ); - }, + } ); Button.displayName = "Button"; diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx index f49ff393..937d76c0 100644 --- a/frontend/src/app/settings/page.tsx +++ b/frontend/src/app/settings/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { Loader2, PlugZap, RefreshCw } from "lucide-react"; +import { ArrowUpRight, Loader2, PlugZap, RefreshCw } from "lucide-react"; import { useSearchParams } from "next/navigation"; import { Suspense, useCallback, useEffect, useState } from "react"; import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation"; @@ -88,6 +88,7 @@ interface Connection { function KnowledgeSourcesPage() { const { isAuthenticated, isNoAuthMode } = useAuth(); + console.log({ isAuthenticated, isNoAuthMode }); const { addTask, tasks } = useTask(); const searchParams = useSearchParams(); @@ -122,7 +123,7 @@ function KnowledgeSourcesPage() { { enabled: (isAuthenticated || isNoAuthMode) && currentProvider === "openai", - }, + } ); const { data: ollamaModelsData } = useGetOllamaModelsQuery( @@ -130,14 +131,14 @@ function KnowledgeSourcesPage() { { enabled: (isAuthenticated || isNoAuthMode) && currentProvider === "ollama", - }, + } ); const { data: ibmModelsData } = useGetIBMModelsQuery( undefined, // No params for now, could be extended later { enabled: (isAuthenticated || isNoAuthMode) && currentProvider === "ibm", - }, + } ); // Select the appropriate models data based on provider @@ -165,7 +166,7 @@ function KnowledgeSourcesPage() { (variables: Parameters[0]) => { updateFlowSettingMutation.mutate(variables); }, - 500, + 500 ); // Sync system prompt state with settings data @@ -293,7 +294,7 @@ function KnowledgeSourcesPage() { const data = await response.json(); const connections = data.connections || []; const activeConnection = connections.find( - (conn: Connection) => conn.is_active, + (conn: Connection) => conn.is_active ); const isConnected = activeConnection !== undefined; @@ -305,8 +306,8 @@ function KnowledgeSourcesPage() { status: isConnected ? "connected" : "not_connected", connectionId: activeConnection?.connection_id, } - : c, - ), + : c + ) ); } } @@ -349,7 +350,7 @@ function KnowledgeSourcesPage() { `response_type=code&` + `scope=${result.oauth_config.scopes.join(" ")}&` + `redirect_uri=${encodeURIComponent( - result.oauth_config.redirect_uri, + result.oauth_config.redirect_uri )}&` + `access_type=offline&` + `prompt=consent&` + @@ -498,7 +499,7 @@ function KnowledgeSourcesPage() { const handleEditInLangflow = ( flowType: "chat" | "ingest", - closeDialog: () => void, + closeDialog: () => void ) => { // Select the appropriate flow ID and edit URL based on flow type const targetFlowId = @@ -555,349 +556,6 @@ function KnowledgeSourcesPage() { return (
- {/* Agent Behavior Section */} - - -
-
- Agent - - Quick Agent settings. Edit in Langflow for full control. - -
-
- Restore flow} - title="Restore default Agent flow" - description="This restores defaults and discards all custom settings and overrides. This can't be undone." - confirmText="Restore" - variant="destructive" - onConfirm={handleRestoreRetrievalFlow} - /> - - - Langflow icon - - - - - Edit in Langflow - - } - title="Edit Agent flow in Langflow" - description="You're entering Langflow. You can edit the Agent flow and other underlying flows. Manual changes to components, wiring, or I/O can break this experience." - confirmText="Proceed" - onConfirm={(closeDialog) => - handleEditInLangflow("chat", closeDialog) - } - /> -
-
- - -
-
- - -
-
- -