AI Collaborative Canvas

import { AICollaborativeCanvas } from '@/blocks/ai-transparency/ai-collaborative-canvas'

export default function DesignTool() {
 const [collaborators, setCollaborators] = useState([
 {
 id: 'user1',
 name: 'You',
 type: 'human',
 status: 'editing',
 color: '#10b981',
 },
 {
 id: 'ai1',
 name: 'AI Assistant',
 type: 'ai',
 status: 'viewing',
 color: '#6366f1',
 },
 ])

 const [elements, setElements] = useState([])
 const [aiCanEdit, setAiCanEdit] = useState(false)

 const handleAcceptSuggestion = (id: string) => {
 // Convert AI suggestion to regular element
 }

 const handleRequestAIAssist = (context) => {
 // Generate AI suggestions
 }

 return (
 <AICollaborativeCanvas
 collaborators={collaborators}
 elements={elements}
 currentUserId="user1"
 aiCanEdit={aiCanEdit}
 variant="full"
 showCursors={true}
 showToolbar={true}
 onAcceptSuggestion={handleAcceptSuggestion}
 onRejectSuggestion={(id) => removeElement(id)}
 onAIPermissionChange={setAiCanEdit}
 onRequestAIAssist={handleRequestAIAssist}
 />
 )
}