import { useState, useEffect } from 'react'; import { Plus, BookOpen, Pencil, Trash2, Search, X } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Head, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import axios from 'axios'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'; import { toast } from 'sonner'; interface KnowledgeBaseItem { id: number; name: string; content: string | null; created_at: string; updated_at: string; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url }, { title: 'Conversational AI', href: '/ai-agents' }, { title: 'Knowledge Base' }, ]; export default function KnowledgeBaseIndex() { const [items, setItems] = useState([]); const [loading, setLoading] = useState(true); const [searchTerm, setSearchTerm] = useState(''); const [deleteId, setDeleteId] = useState(null); const filteredItems = items.filter((item) => { if (!searchTerm) return true; const search = searchTerm.toLowerCase(); return ( item.name.toLowerCase().includes(search) || (item.content?.toLowerCase().includes(search) ?? false) ); }); useEffect(() => { loadItems(); }, []); const loadItems = async () => { try { const response = await axios.get('/api/v1/knowledge-bases', { params: { per_page: 100 } }); setItems(response.data.data ?? []); } catch (error) { console.error('Failed to load knowledge bases', error); toast.error('Failed to load knowledge bases'); } finally { setLoading(false); } }; const handleDelete = async (id: number) => { try { await axios.delete(`/api/v1/knowledge-bases/${id}`); setItems((prev) => prev.filter((item) => item.id !== id)); setDeleteId(null); toast.success('Knowledge Base deleted'); } catch (error) { toast.error('Failed to delete'); } }; if (loading) { return (
); } return (
{items.length > 0 && (
setSearchTerm(e.target.value)} className="pl-9 pr-9" /> {searchTerm && ( )}
)}
{items.length === 0 ? (

No Knowledge Bases Yet

Create a knowledge base and assign it to an AI agent so the agent can use it during conversations.

) : filteredItems.length === 0 ? (

No items match your search.

 ) : (
{filteredItems.map((item) => (
{item.name}
{item.content || 'No content'} ))}
)}
setDeleteId(null)}> Delete Knowledge Base? This will remove the knowledge base. Agents using it will fall back to their custom knowledge text (if any). Cancel deleteId !== null && handleDelete(deleteId)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90" > Delete ); }