Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import React from 'react';
import { useLabState } from '../../useLabState';
import { api } from '../../api';
import { vscodeNative } from '../../vscodeNative';
import { Brain, X, Trash2, GraduationCap } from 'lucide-react';
export default function KnowledgeModal() {
const {
showKnowledge,
setShowKnowledge,
knowledge,
setKnowledge,
newConcept,
setNewConcept,
teachAgent
} = useLabState();
if (!showKnowledge) return null;
const confirmDeleteKnowledge = async (item) => {
const result = await vscodeNative.confirm('Delete knowledge item?', 'Delete', 'Cancel');
if (result === 'Delete') {
await api.deleteKnowledge(item.id);
setKnowledge(prev => prev.filter(i => i.id !== item.id));
}
};
return (
<div className="fixed inset-0 z-[300] flex items-center justify-center p-4 bg-lab-bg/95 backdrop-blur-xl animate-in fade-in">
<div className="bg-lab-bg-secondary border border-lab-border rounded-[2.5rem] w-full max-w-lg p-8 shadow-2xl flex flex-col gap-6 ring-1 ring-white/10 overflow-hidden">
<div className="flex justify-between items-center">
<h3 className="text-xl font-bold flex items-center gap-2 text-lab-accent tracking-tight">
<Brain className="w-6 h-6" /> Cognitive Core
</h3>
<button onClick={() => setShowKnowledge(false)} className="p-2">
<X className="w-6 h-6 text-lab-fg-secondary hover:text-white" />
</button>
</div>
<div className="space-y-4 max-h-[40vh] overflow-y-auto pr-2 custom-scrollbar">
{knowledge.map(k => (
<div key={k.id} className={`p-4 bg-lab-bg/50 border rounded-2xl flex justify-between items-start group transition-colors ${k.source === 'agent-self-update' ? 'border-amber-500/30' : 'border-lab-border'}`}>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<p className="font-bold text-lab-accent text-sm">{String(k.title)}</p>
{k.source === 'agent-self-update' && (
<div className="px-1.5 py-0.5 bg-lab-warning/10 text-lab-warning text-[8px] font-bold uppercase rounded border border-amber-500/20">
Discovery
</div>
)}
</div>
<p className="text-[11px] text-lab-fg-secondary leading-relaxed">{String(k.detail)}</p>
</div>
<button
onClick={() => confirmDeleteKnowledge(k)}
className="text-lab-fg-muted group-hover:text-lab-error ml-2 transition-all"
>
<Trash2 className="w-4 h-4" />
</button>
</div>
))}
</div>
<div className="pt-4 border-t border-lab-border space-y-4">
<input
value={newConcept.title}
onChange={e => setNewConcept(p => ({...p, title: e.target.value}))}
placeholder="Concept Title"
className="w-full bg-lab-bg border border-lab-border rounded-xl py-3 px-4 text-sm focus:ring-2 focus:ring-lab-accent outline-none"
/>
<textarea
value={newConcept.detail}
onChange={e => setNewConcept(p => ({...p, detail: e.target.value}))}
placeholder="Logical context..."
className="w-full bg-lab-bg border border-lab-border rounded-xl py-3 px-4 text-sm focus:ring-2 focus:ring-lab-accent outline-none h-24 resize-none"
/>
<button
onClick={teachAgent}
className="w-full py-4 bg-lab-button-bg rounded-2xl font-bold text-sm shadow-xl flex items-center justify-center gap-2 transition-all active:scale-95"
>
<GraduationCap className="w-5 h-5" /> Ingest Theory
</button>
</div>
</div>
</div>
);
}
|