'use client';
import { useState } from 'react';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
interface CreateMemoryDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
onMemoryCreated: () => void;
}
export function CreateMemoryDialog({
open,
onOpenChange,
onMemoryCreated,
}: CreateMemoryDialogProps) {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [memoryType, setMemoryType] = useState('MEMORY');
const [importance, setImportance] = useState('0.5');
const [tags, setTags] = useState('');
const [submitting, setSubmitting] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setSubmitting(true);
try {
const response = await fetch('/api/memories', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title,
content,
memoryType,
importance: parseFloat(importance),
tags: tags.split(',').map((t) => t.trim()).filter(Boolean),
}),
});
if (response.ok) {
setTitle('');
setContent('');
setMemoryType('MEMORY');
setImportance('0.5');
setTags('');
onMemoryCreated();
} else {
alert('Failed to create memory');
}
} catch (error) {
console.error('Failed to create memory:', error);
alert('Failed to create memory');
} finally {
setSubmitting(false);
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle>Create New Memory</DialogTitle>
<DialogDescription>
Add a new memory to your AI memory service with semantic search capabilities.
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit}>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="title">Title</Label>
<Input
id="title"
placeholder="Memory title..."
value={title}
onChange={(e) => setTitle(e.target.value)}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="content">Content</Label>
<Textarea
id="content"
placeholder="Memory content..."
value={content}
onChange={(e) => setContent(e.target.value)}
rows={6}
required
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="type">Type</Label>
<Select value={memoryType} onValueChange={setMemoryType}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="MEMORY">Memory</SelectItem>
<SelectItem value="SYSTEM">System</SelectItem>
<SelectItem value="LEARNED">Learned</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="importance">Importance ({(parseFloat(importance) * 100).toFixed(0)}%)</Label>
<Input
id="importance"
type="number"
min="0"
max="1"
step="0.1"
value={importance}
onChange={(e) => setImportance(e.target.value)}
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="tags">Tags (comma-separated)</Label>
<Input
id="tags"
placeholder="tag1, tag2, tag3"
value={tags}
onChange={(e) => setTags(e.target.value)}
/>
</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button type="submit" disabled={submitting}>
{submitting ? 'Creating...' : 'Create Memory'}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}
