Files
Momento/architectural-grid11/src/components/SlashMenu.tsx
Antigravity 1fcea6ed7d
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 7s
feat: brainstorm sessions, PDF document Q&A, embedding fixes, and UI improvements
- Add brainstorm feature with collaborative canvas, AI idea generation, live cursors, playback, and export
- Add PDF upload/extraction/ingestion pipeline with pgvector document search (RAG)
- Add document Q&A overlay with streaming chat and PDF preview
- Add note attachments UI with status polling, grid layout, and auto-scroll
- Add task extraction AI tool and agent executor improvements
- Fix NoteEmbedding missing updatedAt column, re-index 66 notes with 1536-dim embeddings
- Fix brainstorm 'Create Note' button: add success toast and redirect to created note
- Fix memory echo notification infinite polling
- Fix chat route to always include document_search tool
- Add brainstorm i18n keys across all 14 locales
- Add socket server for real-time brainstorm collaboration
- Add hierarchical notebook selector and organize notebook dialog improvements
- Add sidebar brainstorm section with session management
- Update prisma schema with brainstorm tables, attachments, and document chunks
2026-05-14 17:43:21 +00:00

66 lines
2.7 KiB
TypeScript

import React from 'react';
import {
Heading1,
Heading2,
List,
Quote,
Code,
Image as ImageIcon,
Type,
Sparkles
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
interface SlashMenuProps {
position: { top: number; left: number };
onSelect: (type: string) => void;
onClose: () => void;
}
export const SlashMenu: React.FC<SlashMenuProps> = ({ position, onSelect, onClose }) => {
const commands = [
{ id: 'h1', label: 'Titre Principal', icon: <Heading1 size={14} />, desc: 'Grand titre de section' },
{ id: 'h2', label: 'Sous-titre', icon: <Heading2 size={14} />, desc: 'Titre de niveau 2' },
{ id: 'bullet', label: 'Liste à puces', icon: <List size={14} />, desc: 'Liste simple' },
{ id: 'quote', label: 'Citation', icon: <Quote size={14} />, desc: 'Bloc de texte mis en avant' },
{ id: 'code', label: 'Bloc de Code', icon: <Code size={14} />, desc: 'Code ou texte technique' },
{ id: 'image', label: 'Image', icon: <ImageIcon size={14} />, desc: 'Insérer un visuel' },
{ id: 'ai-summary', label: 'Résumé IA', icon: <Sparkles size={14} />, desc: 'Générer un résumé court', special: true },
];
return (
<>
<div className="fixed inset-0 z-[60]" onClick={onClose} />
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 10 }}
className="fixed z-[70] w-64 bg-white dark:bg-[#1A1A1A] border border-border shadow-2xl rounded-xl overflow-hidden py-2"
style={{ top: position.top, left: position.left }}
>
<div className="px-3 py-2 text-[10px] font-bold text-concrete uppercase tracking-widest border-b border-border/40 mb-1">
Commandes rapides
</div>
<div className="max-h-80 overflow-y-auto custom-scrollbar">
{commands.map((cmd) => (
<button
key={cmd.id}
onClick={() => onSelect(cmd.id)}
className="w-full flex items-start gap-3 px-3 py-2 hover:bg-paper dark:hover:bg-white/5 transition-colors group text-left"
>
<div className={`p-2 rounded-lg border border-border transition-colors group-hover:border-ink/20
${cmd.special ? 'bg-blueprint/10 text-blueprint border-blueprint/20' : 'bg-white/50 dark:bg-white/5 text-ink'}`}>
{cmd.icon}
</div>
<div className="space-y-0.5">
<p className="text-xs font-bold text-ink">{cmd.label}</p>
<p className="text-[10px] text-muted-ink leading-tight">{cmd.desc}</p>
</div>
</button>
))}
</div>
</motion.div>
</>
);
};