my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

my-project-public — gitlawb

#1	"use client";
#2
#3	import { useState, useEffect } from "react"
#4	import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
#5	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
#6	import { Button } from "@/components/ui/button"
#7	import { SaveIcon, RotateCcw } from "lucide-react"
#8	import { FormView } from "@/components/form-view"
#9	import { JsonEditor } from "@/components/json-editor"
#10	import { useConfig } from "@/hooks/useConfig"
#11	import { useSelector } from "react-redux"
#12	import { RootState } from "@/store/store"
#13	import { useToast } from "@/components/ui/use-toast"
#14	import {
#15	AlertDialog,
#16	AlertDialogAction,
#17	AlertDialogCancel,
#18	AlertDialogContent,
#19	AlertDialogDescription,
#20	AlertDialogFooter,
#21	AlertDialogHeader,
#22	AlertDialogTitle,
#23	AlertDialogTrigger,
#24	} from "@/components/ui/alert-dialog"
#25
#26	export default function SettingsPage() {
#27	const { toast } = useToast()
#28	const configState = useSelector((state: RootState) => state.config)
#29	const [settings, setSettings] = useState({
#30	openmemory: configState.openmemory \|\| {
#31	custom_instructions: null
#32	},
#33	mem0: configState.mem0
#34	})
#35	const [viewMode, setViewMode] = useState<"form" \| "json">("form")
#36	const { fetchConfig, saveConfig, resetConfig, isLoading, error } = useConfig()
#37
#38	useEffect(() => {
#39	// Load config from API on component mount
#40	const loadConfig = async () => {
#41	try {
#42	await fetchConfig()
#43	} catch (error) {
#44	toast({
#45	title: "Error",
#46	description: "Failed to load configuration",
#47	variant: "destructive",
#48	})
#49	}
#50	}
#51
#52	loadConfig()
#53	}, [])
#54
#55	// Update local state when redux state changes
#56	useEffect(() => {
#57	setSettings(prev => ({
#58	...prev,
#59	openmemory: configState.openmemory \|\| { custom_instructions: null },
#60	mem0: configState.mem0
#61	}))
#62	}, [configState.openmemory, configState.mem0])
#63
#64	const handleSave = async () => {
#65	try {
#66	await saveConfig({
#67	openmemory: settings.openmemory,
#68	mem0: settings.mem0
#69	})
#70	toast({
#71	title: "Settings saved",
#72	description: "Your configuration has been updated successfully.",
#73	})
#74	} catch (error) {
#75	toast({
#76	title: "Error",
#77	description: "Failed to save configuration",
#78	variant: "destructive",
#79	})
#80	}
#81	}
#82
#83	const handleReset = async () => {
#84	try {
#85	await resetConfig()
#86	toast({
#87	title: "Settings reset",
#88	description: "Configuration has been reset to default values.",
#89	})
#90	await fetchConfig()
#91	} catch (error) {
#92	toast({
#93	title: "Error",
#94	description: "Failed to reset configuration",
#95	variant: "destructive",
#96	})
#97	}
#98	}
#99
#100	return (
#101	<div className="text-white py-6">
#102	<div className="container mx-auto py-10 max-w-4xl">
#103	<div className="flex justify-between items-center mb-8">
#104	<div className="animate-fade-slide-down">
#105	<h1 className="text-3xl font-bold tracking-tight">Settings</h1>
#106	<p className="text-muted-foreground mt-1">Manage your OpenMemory and Mem0 configuration</p>
#107	</div>
#108	<div className="flex space-x-2">
#109	<AlertDialog>
#110	<AlertDialogTrigger asChild>
#111	<Button variant="outline" className="border-zinc-800 text-zinc-200 hover:bg-zinc-700 hover:text-zinc-50 animate-fade-slide-down" disabled={isLoading}>
#112	<RotateCcw className="mr-2 h-4 w-4" />
#113	Reset Defaults
#114	</Button>
#115	</AlertDialogTrigger>
#116	<AlertDialogContent>
#117	<AlertDialogHeader>
#118	<AlertDialogTitle>Reset Configuration?</AlertDialogTitle>
#119	<AlertDialogDescription>
#120	This will reset all settings to the system defaults. Any custom configuration will be lost.
#121	API keys will be set to use environment variables.
#122	</AlertDialogDescription>
#123	</AlertDialogHeader>
#124	<AlertDialogFooter>
#125	<AlertDialogCancel>Cancel</AlertDialogCancel>
#126	<AlertDialogAction onClick={handleReset} className="bg-red-600 hover:bg-red-700">
#127	Reset
#128	</AlertDialogAction>
#129	</AlertDialogFooter>
#130	</AlertDialogContent>
#131	</AlertDialog>
#132
#133	<Button onClick={handleSave} className="bg-primary hover:bg-primary/90 animate-fade-slide-down" disabled={isLoading}>
#134	<SaveIcon className="mr-2 h-4 w-4" />
#135	{isLoading ? "Saving..." : "Save Configuration"}
#136	</Button>
#137	</div>
#138	</div>
#139
#140	<Tabs value={viewMode} onValueChange={(value) => setViewMode(value as "form" \| "json")} className="w-full animate-fade-slide-down delay-1">
#141	<TabsList className="grid w-full grid-cols-2 mb-8">
#142	<TabsTrigger value="form">Form View</TabsTrigger>
#143	<TabsTrigger value="json">JSON Editor</TabsTrigger>
#144	</TabsList>
#145
#146	<TabsContent value="form">
#147	<FormView settings={settings} onChange={setSettings} />
#148	</TabsContent>
#149
#150	<TabsContent value="json">
#151	<Card>
#152	<CardHeader>
#153	<CardTitle>JSON Configuration</CardTitle>
#154	<CardDescription>Edit the entire configuration directly as JSON</CardDescription>
#155	</CardHeader>
#156	<CardContent>
#157	<JsonEditor value={settings} onChange={setSettings} />
#158	</CardContent>
#159	</Card>
#160	</TabsContent>
#161	</Tabs>
#162	</div>
#163	</div>
#164	)
#165	}
#166

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public