dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: agent node

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-11 14:39:38 +01:00
parent 94da42f9fc
commit f201fe92f4
15 changed files with 772 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/app/platform/SettingsDialog.tsx
View File

@@ -2,7 +2,7 @@
* Settings dialog with sidebar-style nav (Appearance, AI). Reference: shadcn sidebar-13.
*/
import React, { useState } from 'react'
import React, { useCallback, useState } from 'react'
import {
Dialog,
DialogContent,
@@ -19,9 +19,11 @@ import {
SelectValue,
} from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import { Input } from '@/components/ui/input'
import { useTheme } from '@/lib/themeContext'
import type { Theme } from '@/lib/themeContext'
import { usePlatform } from './platformContext'
import type { AiConnection, AiConnectionProvider } from './platformContext'
import { Sun, Sparkles } from 'lucide-react'
type SettingsSection = 'appearance' | 'ai'
@@ -34,7 +36,14 @@ export function SettingsDialog({
const [open, setOpen] = useState(false)
const [section, setSection] = useState<SettingsSection>('appearance')
const { theme, setTheme } = useTheme()
const { showMinimap, setShowMinimap } = usePlatform()
const { showMinimap, setShowMinimap, aiConnection, setAiConnection } = usePlatform()
const updateAiConnection = useCallback(
(partial: Partial<AiConnection>) => {
setAiConnection({ ...aiConnection, ...partial })
},
[aiConnection, setAiConnection]
)
return (
<Dialog open={open} onOpenChange={setOpen}>
@@ -110,14 +119,70 @@ export function SettingsDialog({
)}
{section === 'ai' && (
<div className="space-y-6">
<h3 className="text-sm font-medium text-muted-foreground">AI</h3>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
<span className="text-sm font-medium text-muted-foreground/80">
AI settings
</span>
<span className="text-xs text-muted-foreground sm:text-right">
Coming soon
</span>
<h3 className="text-sm font-medium text-muted-foreground">AI connection</h3>
<p className="text-xs text-muted-foreground">
Used by the Agent node. Choose OpenAI or a local server (e.g. LM Studio).
</p>
<div className="space-y-4">
<div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
<label htmlFor="settings-ai-provider" className="text-sm font-medium">
Provider
</label>
<Select
value={aiConnection.provider}
onValueChange={(v) => updateAiConnection({ provider: v as AiConnectionProvider })}
>
<SelectTrigger id="settings-ai-provider" className="w-full min-w-[10rem] sm:w-48">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="local">Local (LM Studio, Ollama, etc.)</SelectItem>
<SelectItem value="openai">OpenAI</SelectItem>
</SelectContent>
</Select>
</div>
{aiConnection.provider === 'local' && (
<div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_1fr] sm:items-center">
<label htmlFor="settings-ai-baseurl" className="text-sm font-medium">
Base URL
</label>
<Input
id="settings-ai-baseurl"
type="url"
placeholder="http://localhost:1234/v1"
value={aiConnection.baseURL}
onChange={(e) => updateAiConnection({ baseURL: e.target.value })}
className="font-mono text-xs"
/>
</div>
)}
<div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_1fr] sm:items-center">
<label htmlFor="settings-ai-model" className="text-sm font-medium">
Model
</label>
<Input
id="settings-ai-model"
type="text"
placeholder={aiConnection.provider === 'local' ? 'local-model' : 'gpt-4o-mini'}
value={aiConnection.model}
onChange={(e) => updateAiConnection({ model: e.target.value })}
className="font-mono text-xs"
/>
</div>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_1fr] sm:items-center">
<label htmlFor="settings-ai-apikey" className="text-sm font-medium">
API key
</label>
<Input
id="settings-ai-apikey"
type="password"
autoComplete="off"
placeholder={aiConnection.provider === 'openai' ? 'sk-...' : 'Optional for local'}
value={aiConnection.apiKey}
onChange={(e) => updateAiConnection({ apiKey: e.target.value })}
className="font-mono text-xs"
/>
</div>
</div>
</div>
)}

54
frontend/src/app/platform/platformContext.tsx
View File

@@ -12,8 +12,49 @@ const STORAGE_KEY = 'zui_platform_projects'
const ORDER_STORAGE_KEY = 'zui_platform_project_order'
const RECENT_STORAGE_KEY = 'zui_platform_recent_project_ids'
const CANVAS_MINIMAP_KEY = 'zui_canvas_show_minimap'
const AI_CONNECTION_KEY = 'zui_ai_connection'
const RECENT_MAX = 5
export type AiConnectionProvider = 'openai' | 'local'
export type AiConnection = {
provider: AiConnectionProvider
baseURL: string
model: string
apiKey: string
}
const DEFAULT_AI_CONNECTION: AiConnection = {
provider: 'local',
baseURL: 'http://localhost:1234/v1',
model: 'local-model',
apiKey: '',
}
function loadAiConnection(): AiConnection {
try {
const raw = localStorage.getItem(AI_CONNECTION_KEY)
if (!raw) return DEFAULT_AI_CONNECTION
const parsed = JSON.parse(raw) as unknown
if (!parsed || typeof parsed !== 'object') return DEFAULT_AI_CONNECTION
const p = parsed as Record<string, unknown>
return {
provider: p.provider === 'openai' ? 'openai' : 'local',
baseURL: typeof p.baseURL === 'string' ? p.baseURL : DEFAULT_AI_CONNECTION.baseURL,
model: typeof p.model === 'string' ? p.model : DEFAULT_AI_CONNECTION.model,
apiKey: typeof p.apiKey === 'string' ? p.apiKey : '',
}
} catch {
return DEFAULT_AI_CONNECTION
}
}
function saveAiConnection(value: AiConnection) {
try {
localStorage.setItem(AI_CONNECTION_KEY, JSON.stringify(value))
} catch {}
}
function loadShowMinimap(): boolean {
try {
const raw = localStorage.getItem(CANVAS_MINIMAP_KEY)
@@ -126,6 +167,9 @@ export type PlatformContextValue = {
/** Canvas: show React Flow minimap (persisted) */
showMinimap: boolean
setShowMinimap: (value: boolean) => void
/** Agent node: AI connection (persisted). Sent to backend when running agent. */
aiConnection: AiConnection
setAiConnection: (value: AiConnection) => void
}
const PlatformContext = createContext<PlatformContextValue | null>(null)
@@ -135,12 +179,18 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) {
const [projectOrder, setProjectOrder] = useState<string[]>(loadOrder)
const [recentProjectIds, setRecentProjectIds] = useState<string[]>(loadRecentIds)
const [showMinimap, setShowMinimapState] = useState<boolean>(loadShowMinimap)
const [aiConnection, setAiConnectionState] = useState<AiConnection>(loadAiConnection)
const setShowMinimap = useCallback((value: boolean) => {
setShowMinimapState(value)
saveShowMinimap(value)
}, [])
const setAiConnection = useCallback((value: AiConnection) => {
setAiConnectionState(value)
saveAiConnection(value)
}, [])
const persist = useCallback((next: Project[]) => {
setProjects(next)
saveProjects(next)
@@ -247,6 +297,8 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) {
restoreProject,
showMinimap,
setShowMinimap,
aiConnection,
setAiConnection,
}),
[
projects,
@@ -263,6 +315,8 @@ export function PlatformProvider({ children }: { children: React.ReactNode }) {
restoreProject,
showMinimap,
setShowMinimap,
aiConnection,
setAiConnection,
]
)