@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/views/memories-panel.tsx

@@ -1,365 +0,0 @@
-'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';