@docyrus/ui-pro-ai-assistant 0.0.1

package/src/views/memories-panel.tsx

@@ -0,0 +1,365 @@
+'use client';
+
+import {
+  useCallback, useEffect, useState, type FC, type MouseEvent
+} from 'react';
+
+import { Badge } from '@docyrus/ui-pro-shared/components/badge';
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@docyrus/ui-pro-shared/components/dialog';
+import { Input } from '@docyrus/ui-pro-shared/components/input';
+import { Label } from '@docyrus/ui-pro-shared/components/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@docyrus/ui-pro-shared/components/select';
+import { Textarea } from '@docyrus/ui-pro-shared/components/textarea';
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+import {
+  Brain,
+  Plus,
+  Search,
+  Star,
+  Trash
+} from 'lucide-react';
+
+import { useApiClient } from '../lib/api-client';
+import { type Memory } from '../types';
+
+const MEMORY_LEVELS = [
+  { id: 'user', name: 'User' },
+  { id: 'user_agent', name: 'User Agent' },
+  { id: 'project', name: 'Project' },
+  { id: 'team', name: 'Team' },
+  { id: 'team_agent', name: 'Team Agent' },
+  { id: 'tenant', name: 'Tenant' },
+  { id: 'tenant_agent', name: 'Tenant Agent' }
+];
+
+interface MemoryFormState {
+  title: string;
+  content: string;
+  memoryLevel: string;
+  importance: number;
+  alwaysInclude: boolean;
+}
+
+const defaultForm: MemoryFormState = {
+  title: '',
+  content: '',
+  memoryLevel: 'user',
+  importance: 5,
+  alwaysInclude: false
+};
+
+interface MemoryDialogProps {
+  open: boolean;
+  memory: Memory | null;
+  saving: boolean;
+  onClose: () => void;
+  onSave: (form: MemoryFormState) => void;
+  t: (key: string) => string;
+}
+
+function MemoryDialog({
+  open,
+  memory,
+  saving,
+  onClose,
+  onSave,
+  t
+}: MemoryDialogProps) {
+  const [form, setForm] = useState<MemoryFormState>(defaultForm);
+
+  useEffect(() => {
+    if (open) {
+      setForm(
+        memory ? {
+          title: memory.title,
+          content: memory.content,
+          memoryLevel: memory.memoryLevel ?? 'user',
+          importance: memory.importance ?? 5,
+          alwaysInclude: memory.alwaysInclude ?? false
+        } : defaultForm
+      );
+    }
+  }, [memory, open]);
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Brain className="h-4 w-4" />
+            {memory ? t('memory.edit') : t('memory.new')}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 py-2">
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('memory.title')}</Label>
+            <Input
+              value={form.title}
+              onChange={e => setForm(prev => ({ ...prev, title: e.target.value }))}
+              placeholder={t('memory.title_placeholder')} />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label>{t('memory.content')}</Label>
+            <Textarea
+              value={form.content}
+              onChange={e => setForm(prev => ({ ...prev, content: e.target.value }))}
+              placeholder={t('memory.content_placeholder')}
+              rows={3} />
+          </div>
+
+          <div className="flex gap-3">
+            <div className="flex flex-col gap-1.5 flex-1">
+              <Label>{t('memory_extraction.level')}</Label>
+              <Select
+                value={form.memoryLevel}
+                onValueChange={val => setForm(prev => ({ ...prev, memoryLevel: val }))}>
+                <SelectTrigger className="h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MEMORY_LEVELS.map(level => (
+                    <SelectItem key={level.id} value={level.id}>{level.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex flex-col gap-1.5 w-24">
+              <Label>{t('memory.importance')}</Label>
+              <Input
+                type="number"
+                min={1}
+                max={10}
+                value={form.importance}
+                onChange={e => setForm(prev => ({ ...prev, importance: Number(e.target.value) }))} />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <input
+              id="always_include"
+              type="checkbox"
+              checked={form.alwaysInclude}
+              onChange={e => setForm(prev => ({ ...prev, alwaysInclude: e.target.checked }))}
+              className="rounded" />
+            <Label htmlFor="always_include">{t('memory.always_include')}</Label>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={saving}>
+            {t('buttons.cancel')}
+          </Button>
+          <Button onClick={() => onSave(form)} disabled={saving || !form.title.trim()}>
+            {saving ? t('buttons.saving') : t('buttons.save_changes')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface MemoriesPanelProps {
+  t: (key: string, params?: Record<string, string>) => string;
+}
+
+export const MemoriesPanel: FC<MemoriesPanelProps> = ({ t }) => {
+  const apiClient = useApiClient();
+  const [memories, setMemories] = useState<Memory[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingMemory, setEditingMemory] = useState<Memory | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const fetchMemories = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await apiClient.get('/ai/memories');
+      const data = response?.data as any;
+      const items: Memory[] = Array.isArray(data) ? data : (data?.memories ?? data?.items ?? []);
+
+      items.sort((a, b) => {
+        const aTime = a.createdOn ? new Date(a.createdOn).getTime() : 0;
+        const bTime = b.createdOn ? new Date(b.createdOn).getTime() : 0;
+
+        return bTime - aTime;
+      });
+      setMemories(items);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiClient]);
+
+  useEffect(() => {
+    void fetchMemories();
+  }, [fetchMemories]);
+
+  const handleSave = async (form: MemoryFormState) => {
+    setSaving(true);
+    try {
+      if (editingMemory) {
+        await apiClient.patch(`/ai/memories/${editingMemory.id}`, form);
+        setMemories(prev => prev.map(m => (
+          m.id === editingMemory.id ? { ...m, ...form } : m
+        )));
+      } else {
+        const response = await apiClient.post('/ai/memories', { ...form, sourceType: 'user_manual' });
+        const created = (response?.data as any)?.memory ?? response?.data as Memory;
+
+        if (created?.id) setMemories(prev => [created, ...prev]);
+        else void fetchMemories();
+      }
+      setDialogOpen(false);
+      setEditingMemory(null);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (e: MouseEvent, id: string) => {
+    e.stopPropagation();
+    setDeletingId(id);
+    try {
+      await apiClient.delete(`/ai/memories/${id}`);
+      setMemories(prev => prev.filter(m => m.id !== id));
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const filtered = memories.filter((m) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+
+    return m.title.toLowerCase().includes(q) || m.content.toLowerCase().includes(q);
+  });
+
+  return (
+    <div className="flex-1 flex flex-col overflow-y-auto p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-col min-w-0">
+          <h1 className="text-2xl font-semibold ps-2">{t('tabs.memories')}</h1>
+        </div>
+        <Button
+          size="sm"
+          className="shrink-0"
+          onClick={() => {
+            setEditingMemory(null);
+            setDialogOpen(true);
+          }}>
+          <Plus className="w-4 h-4" />
+          {t('memory.new')}
+        </Button>
+      </div>
+
+      {/* Search */}
+      <div className="flex items-center gap-4 mb-6">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-4 h-4" />
+          <Input
+            placeholder={t('placeholders.search_memories')}
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className="pl-10 pr-4 py-2 w-full border border-border rounded-lg focus:outline-none" />
+        </div>
+      </div>
+
+      {/* List */}
+      {loading ? (
+        <div className="flex-1 flex items-center justify-center text-muted-foreground text-sm">
+          {t('messages.loading_memories')}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+          <Brain className="w-10 h-10 opacity-30" />
+          <p className="text-sm">{t('messages.no_memories_yet')}</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {filtered.map(memory => (
+            <div
+              key={memory.id}
+              onClick={() => {
+                setEditingMemory(memory);
+                setDialogOpen(true);
+              }}
+              className={cn(
+                'group relative p-3 rounded-lg border border-border bg-card cursor-pointer',
+                'hover:border-primary/40 hover:shadow-sm transition-all'
+              )}>
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <div className="flex flex-wrap items-center gap-1.5 mb-1">
+                    {memory.alwaysInclude && (
+                      <Star className="w-3 h-3 text-amber-500 shrink-0" />
+                    )}
+                    <span className="text-sm font-medium">{memory.title}</span>
+                    {memory.memoryLevel && (
+                      <Badge variant="secondary" className="text-xs h-4 px-1.5">
+                        {memory.memoryLevel}
+                      </Badge>
+                    )}
+                    {memory.importance != null && (
+                      <span className="text-xs text-muted-foreground ml-auto shrink-0">
+                        {memory.importance}/10
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground line-clamp-2">{memory.content}</p>
+                  {memory.tags && memory.tags.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-1.5">
+                      {memory.tags.map(tag => (
+                        <span key={tag} className="text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  disabled={deletingId === memory.id}
+                  onClick={e => handleDelete(e, memory.id)}
+                  className="h-7 w-7 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive">
+                  <Trash className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <MemoryDialog
+        open={dialogOpen}
+        memory={editingMemory}
+        saving={saving}
+        onClose={() => {
+          setDialogOpen(false);
+          setEditingMemory(null);
+        }}
+        onSave={handleSave}
+        t={t} />
+    </div>
+  );
+};
+
+MemoriesPanel.displayName = 'MemoriesPanel';