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/components/ui/radio-group.tsx b/frontend/components/ui/radio-group.tsx index 0968c2a8..de9da9af 100644 --- a/frontend/components/ui/radio-group.tsx +++ b/frontend/components/ui/radio-group.tsx @@ -1,10 +1,10 @@ -"use client" +"use client"; -import * as React from "react" -import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" -import { Circle } from "lucide-react" +import * as React from "react"; +import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; +import { Circle } from "lucide-react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const RadioGroup = React.forwardRef< React.ElementRef, @@ -16,9 +16,9 @@ const RadioGroup = React.forwardRef< {...props} ref={ref} /> - ) -}) -RadioGroup.displayName = RadioGroupPrimitive.Root.displayName + ); +}); +RadioGroup.displayName = RadioGroupPrimitive.Root.displayName; const RadioGroupItem = React.forwardRef< React.ElementRef, @@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef< - ) -}) -RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName + ); +}); +RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName; -export { RadioGroup, RadioGroupItem } \ No newline at end of file +export { RadioGroup, RadioGroupItem }; diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx index b8e19381..66665060 100644 --- a/frontend/components/ui/select.tsx +++ b/frontend/components/ui/select.tsx @@ -1,42 +1,48 @@ -"use client" +"use client"; -import * as React from "react" -import * as SelectPrimitive from "@radix-ui/react-select" -import { Check, ChevronDown, ChevronUp, Lock } from "lucide-react" +import * as React from "react"; +import * as SelectPrimitive from "@radix-ui/react-select"; +import { + Check, + ChevronDown, + ChevronsUpDown, + ChevronUp, + LockIcon, +} from "lucide-react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const Select = SelectPrimitive.Root +const Select = SelectPrimitive.Root; -const SelectGroup = SelectPrimitive.Group +const SelectGroup = SelectPrimitive.Group; -const SelectValue = SelectPrimitive.Value +const SelectValue = SelectPrimitive.Value; const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, disabled, ...props }, ref) => ( - span]:line-clamp-1", - disabled && "bg-muted", - className - )} - disabled={disabled} - {...props} - > - {children} - - {disabled ? ( - - ) : ( - +>(({ className, children, ...props }, ref) => { + return ( + span]:line-clamp-1", + className )} - - -)) -SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + {...props} + > + {children} + + {props.disabled ? ( + + ) : ( + + )} + + + ); +}); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; const SelectScrollUpButton = React.forwardRef< React.ElementRef, @@ -52,8 +58,8 @@ const SelectScrollUpButton = React.forwardRef< > -)) -SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; const SelectScrollDownButton = React.forwardRef< React.ElementRef, @@ -69,9 +75,9 @@ const SelectScrollDownButton = React.forwardRef< > -)) +)); SelectScrollDownButton.displayName = - SelectPrimitive.ScrollDownButton.displayName + SelectPrimitive.ScrollDownButton.displayName; const SelectContent = React.forwardRef< React.ElementRef, @@ -102,8 +108,8 @@ const SelectContent = React.forwardRef< -)) -SelectContent.displayName = SelectPrimitive.Content.displayName +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; const SelectLabel = React.forwardRef< React.ElementRef, @@ -114,8 +120,8 @@ const SelectLabel = React.forwardRef< className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} /> -)) -SelectLabel.displayName = SelectPrimitive.Label.displayName +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; const SelectItem = React.forwardRef< React.ElementRef, @@ -137,8 +143,8 @@ const SelectItem = React.forwardRef< {children} -)) -SelectItem.displayName = SelectPrimitive.Item.displayName +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; const SelectSeparator = React.forwardRef< React.ElementRef, @@ -149,8 +155,8 @@ const SelectSeparator = React.forwardRef< className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> -)) -SelectSeparator.displayName = SelectPrimitive.Separator.displayName +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; export { Select, @@ -163,4 +169,4 @@ export { SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, -} \ No newline at end of file +}; diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx index 91575423..a63d91d3 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"; @@ -38,6 +38,12 @@ import { useDebounce } from "@/lib/debounce"; import { DEFAULT_AGENT_SETTINGS, DEFAULT_KNOWLEDGE_SETTINGS, UI_CONSTANTS } from "@/lib/constants"; import { getFallbackModels, type ModelProvider } from "./helpers/model-helpers"; import { ModelSelectItems } from "./helpers/model-select-item"; +import { LabelWrapper } from "@/components/label-wrapper"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@radix-ui/react-tooltip"; const { MAX_SYSTEM_PROMPT_CHARS } = UI_CONSTANTS; @@ -123,7 +129,7 @@ function KnowledgeSourcesPage() { { enabled: (isAuthenticated || isNoAuthMode) && currentProvider === "openai", - }, + } ); const { data: ollamaModelsData } = useGetOllamaModelsQuery( @@ -131,14 +137,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 @@ -166,7 +172,7 @@ function KnowledgeSourcesPage() { (variables: Parameters[0]) => { updateFlowSettingMutation.mutate(variables); }, - 500, + 500 ); // Sync system prompt state with settings data @@ -294,7 +300,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; @@ -306,8 +312,8 @@ function KnowledgeSourcesPage() { status: isConnected ? "connected" : "not_connected", connectionId: activeConnection?.connection_id, } - : c, - ), + : c + ) ); } } @@ -350,7 +356,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&` + @@ -499,7 +505,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 = @@ -574,350 +580,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) - } - /> -
-
- - -
-
- - -
-
- -