bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
595 lines
30 KiB
TypeScript
595 lines
30 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useRef, useEffect, useCallback } from 'react'
|
|
import { useChat } from '@ai-sdk/react'
|
|
import { DefaultChatTransport } from 'ai'
|
|
import type { UIMessage } from 'ai'
|
|
import { cn } from '@/lib/utils'
|
|
import {
|
|
X, Bot, Sparkles, History, Send, Globe, Briefcase, Palette, GraduationCap, Coffee,
|
|
Loader2, Layers, Square, Plus, ChevronRight, MessageSquare, FileCode,
|
|
Zap, Network, Clock, Scissors, Languages, Layout, ArrowRightLeft, BookOpen,
|
|
Maximize2, Minimize2
|
|
} from 'lucide-react'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { MarkdownContent } from '@/components/markdown-content'
|
|
import { useWebSearchAvailable } from '@/hooks/use-web-search-available'
|
|
import { useNotebooks } from '@/context/notebooks-context'
|
|
import { HierarchicalNotebookSelector } from '@/components/hierarchical-notebook-selector'
|
|
import { toast } from 'sonner'
|
|
import { createConversation } from '@/app/actions/chat-actions'
|
|
import { motion, AnimatePresence } from 'motion/react'
|
|
|
|
function getTextContent(msg: UIMessage): string {
|
|
if (msg.parts && Array.isArray(msg.parts)) {
|
|
return msg.parts.filter((p: any) => p.type === 'text' && typeof p.text === 'string').map((p: any) => p.text).join('')
|
|
}
|
|
if (typeof (msg as any).content === 'string') return (msg as any).content
|
|
return ''
|
|
}
|
|
|
|
const TONE_IDS = [
|
|
{ id: 'professional', icon: Briefcase },
|
|
{ id: 'creative', icon: Palette },
|
|
{ id: 'academic', icon: GraduationCap },
|
|
{ id: 'casual', icon: Coffee },
|
|
] as const
|
|
|
|
type AITab = 'discussion' | 'actions' | 'explore' | 'resources'
|
|
|
|
export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: boolean } = {}) {
|
|
const { t, language } = useLanguage()
|
|
const webSearchAvailable = useWebSearchAvailable()
|
|
const { notebooks } = useNotebooks()
|
|
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
const [aiTab, setAiTab] = useState<AITab>('discussion')
|
|
const [selectedTone, setSelectedTone] = useState('professional')
|
|
const [webSearch, setWebSearch] = useState(false)
|
|
const [chatScope, setChatScope] = useState<'all' | string>('all')
|
|
const [input, setInput] = useState('')
|
|
const [conversationId, setConversationId] = useState<string | undefined>()
|
|
const [isContextualAIVisible, setIsContextualAIVisible] = useState(false)
|
|
|
|
const [history, setHistory] = useState<any[]>([])
|
|
const [historyLoading, setHistoryLoading] = useState(false)
|
|
|
|
const [insights, setInsights] = useState<string>('')
|
|
const [insightsLoading, setInsightsLoading] = useState(false)
|
|
|
|
const messagesEndRef = useRef<HTMLDivElement>(null)
|
|
const transport = useRef(new DefaultChatTransport({ api: '/api/chat' })).current
|
|
|
|
const { messages, setMessages, sendMessage, status, stop } = useChat({
|
|
transport,
|
|
onError: (error) => {
|
|
console.error('Chat error:', error)
|
|
toast.error(t('chat.assistantError') || 'Chat error')
|
|
}
|
|
})
|
|
|
|
const isLoading = status === 'submitted' || status === 'streaming'
|
|
|
|
const handleSend = async () => {
|
|
const text = input.trim()
|
|
if (!text || isLoading) return
|
|
setInput('')
|
|
let convId = conversationId
|
|
if (!convId) {
|
|
try {
|
|
const result = await createConversation(text, chatScope !== 'all' ? chatScope : undefined)
|
|
convId = result.id
|
|
setConversationId(convId)
|
|
} catch {
|
|
toast.error(t('chat.createError'))
|
|
return
|
|
}
|
|
}
|
|
try {
|
|
await sendMessage(
|
|
{ text },
|
|
{
|
|
body: {
|
|
tone: selectedTone,
|
|
chatScope,
|
|
notebookId: chatScope !== 'all' ? chatScope : undefined,
|
|
webSearch: webSearch && webSearchAvailable,
|
|
conversationId: convId,
|
|
language,
|
|
}
|
|
}
|
|
)
|
|
} catch (error) {
|
|
console.error('Chat send error:', error)
|
|
toast.error(t('chat.assistantError') || 'Failed to send message')
|
|
}
|
|
}
|
|
|
|
const fetchHistory = async () => {
|
|
setHistoryLoading(true)
|
|
try {
|
|
const res = await fetch('/api/chat/history')
|
|
if (res.ok) setHistory(await res.json())
|
|
} catch (e) { console.error(e) }
|
|
setHistoryLoading(false)
|
|
}
|
|
|
|
const fetchInsights = async () => {
|
|
setInsightsLoading(true)
|
|
try {
|
|
const res = await fetch('/api/chat/insights')
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setInsights(data.insight)
|
|
}
|
|
} catch (e) { console.error(e) }
|
|
setInsightsLoading(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (aiTab === 'discussion') {
|
|
// history is loaded on demand via insights tab
|
|
}
|
|
}, [aiTab])
|
|
|
|
useEffect(() => {
|
|
if (messagesEndRef.current) {
|
|
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
|
|
}
|
|
}, [messages])
|
|
|
|
const handleToggle = useCallback(() => setIsOpen(v => !v), [])
|
|
const handleVisibility = useCallback((e: any) => setIsContextualAIVisible(e.detail), [])
|
|
useEffect(() => {
|
|
window.addEventListener('toggle-ai-chat', handleToggle)
|
|
window.addEventListener('contextual-ai-visibility', handleVisibility)
|
|
return () => {
|
|
window.removeEventListener('toggle-ai-chat', handleToggle)
|
|
window.removeEventListener('contextual-ai-visibility', handleVisibility)
|
|
}
|
|
}, [handleToggle, handleVisibility])
|
|
|
|
// Floating trigger when closed
|
|
if (!isOpen) {
|
|
if (!showFloatingTrigger || isContextualAIVisible) return null
|
|
return (
|
|
<motion.button
|
|
onClick={() => setIsOpen(true)}
|
|
className="fixed bottom-6 end-6 h-12 w-12 rounded-2xl shadow-xl z-40 bg-brand-accent text-white hover:scale-105 border border-brand-accent/20"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
title={t('ai.openAssistant')}
|
|
>
|
|
<Sparkles className="h-5 w-5 mx-auto" />
|
|
</motion.button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<motion.aside
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
|
|
className={cn(
|
|
"fixed bottom-20 end-6 border border-border/60 bg-[#FDFCFB] dark:bg-[#0D0D0D] shadow-2xl flex flex-col z-50 rounded-2xl overflow-hidden transition-all duration-300",
|
|
isExpanded ? "w-[80vw] h-[85vh] max-w-[1200px]" : "w-[420px] h-[85vh] max-h-[800px]"
|
|
)}
|
|
>
|
|
<div className="flex flex-col h-full">
|
|
{/* Header */}
|
|
<div className="p-6 border-b border-border/60 space-y-1.5 bg-white/50 dark:bg-black/20 backdrop-blur-md shrink-0">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="flex items-center gap-2 font-serif text-xl font-medium text-ink">
|
|
<Sparkles size={18} className="text-brand-accent" />
|
|
{t('ai.assistantTitle')}
|
|
</h3>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => setIsExpanded(e => !e)}
|
|
className="p-1.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg transition-colors text-concrete"
|
|
title={isExpanded ? t('ai.shrinkPanel') : t('ai.expandPanel')}
|
|
>
|
|
{isExpanded ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
|
|
</button>
|
|
<button
|
|
onClick={() => { setMessages([]); setConversationId(undefined) }}
|
|
className="p-1.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg transition-colors text-concrete"
|
|
title={t('ai.newDiscussion')}
|
|
>
|
|
<Plus size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="p-1.5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg transition-colors text-concrete"
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p className="text-[11px] text-concrete uppercase tracking-wider font-medium opacity-60">
|
|
{t('ai.poweredByMomento')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex border-b border-border px-2 shrink-0">
|
|
{(['discussion', 'actions', 'explore', 'resources'] as AITab[]).map((tab) => {
|
|
const labels: Record<AITab, string> = {
|
|
discussion: t('ai.chatTab') || 'Discussion',
|
|
actions: t('ai.actionsTab') || 'Actions',
|
|
explore: t('ai.exploreTab') || 'Explorer',
|
|
resources: t('ai.resourcesTab') || 'Ressources',
|
|
}
|
|
return (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setAiTab(tab)}
|
|
className={cn(
|
|
"flex-1 py-3 text-[10px] uppercase tracking-[0.2em] font-bold transition-all relative",
|
|
aiTab === tab ? 'text-brand-accent' : 'text-concrete hover:text-ink/60'
|
|
)}
|
|
>
|
|
{labels[tab]}
|
|
{aiTab === tab && (
|
|
<motion.div
|
|
layoutId="activeAiTab"
|
|
className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-accent"
|
|
/>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
|
|
<AnimatePresence mode="wait">
|
|
{aiTab === 'discussion' && (
|
|
<motion.div key="discussion" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="space-y-6">
|
|
{/* Context selector */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-concrete">{t('ai.writingTone')}</label>
|
|
<div className="flex items-center gap-1">
|
|
{TONE_IDS.map((tone) => {
|
|
const Icon = tone.icon
|
|
return (
|
|
<button
|
|
key={tone.id}
|
|
onClick={() => setSelectedTone(tone.id)}
|
|
title={t(`ai.tones.${tone.id}`)}
|
|
className={cn(
|
|
'w-8 h-8 rounded-lg flex items-center justify-center text-[9px] font-bold transition-all border',
|
|
selectedTone === tone.id
|
|
? 'bg-brand-accent text-white border-brand-accent shadow-sm'
|
|
: 'bg-white/50 dark:bg-white/5 border-border/40 text-concrete hover:border-brand-accent/40'
|
|
)}
|
|
>
|
|
<Icon className="h-3.5 w-3.5" />
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setChatScope('all')}
|
|
className={cn(
|
|
'w-full p-2.5 border rounded-xl text-[11px] flex items-center justify-between transition-all',
|
|
chatScope === 'all' ? 'bg-brand-accent/5 border-brand-accent/30' : 'bg-white/50 dark:bg-white/5 border-border/40 hover:border-ink/20'
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2.5">
|
|
<FileCode size={14} className="text-brand-accent/60" />
|
|
<span className={cn('font-medium', chatScope === 'all' ? 'text-brand-accent' : 'text-concrete')}>
|
|
{t('ai.allMyNotes') || 'Toutes mes notes'}
|
|
</span>
|
|
</div>
|
|
{chatScope === 'all' && (
|
|
<span className="text-[8px] bg-brand-accent/10 text-brand-accent px-1.5 py-0.5 rounded-full uppercase font-bold">Auto</span>
|
|
)}
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2 px-2">
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
<span className="text-[9px] font-bold text-concrete uppercase tracking-widest">+ Carnet</span>
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
</div>
|
|
|
|
<HierarchicalNotebookSelector
|
|
notebooks={notebooks.filter(nb => !nb.trashedAt)}
|
|
selectedId={chatScope !== 'all' ? chatScope : null}
|
|
onSelect={(id) => setChatScope(id)}
|
|
placeholder={t('ai.selectNotebook') || 'Inclure un carnet...'}
|
|
dropUp
|
|
/>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
{messages.length === 0 && (
|
|
<div className="h-48 flex flex-col items-center justify-center text-center space-y-3 text-concrete/30">
|
|
<div className="w-12 h-12 rounded-full border border-dashed border-concrete/10 flex items-center justify-center">
|
|
<MessageSquare size={18} />
|
|
</div>
|
|
<p className="text-[11px] italic leading-relaxed px-12">{t('ai.welcomeMsg')}</p>
|
|
</div>
|
|
)}
|
|
|
|
{messages.map((msg: UIMessage) => {
|
|
const text = getTextContent(msg)
|
|
if (msg.role === 'assistant' && !text) return null
|
|
return (
|
|
<div key={msg.id} className={cn('flex gap-3', msg.role === 'user' && 'flex-row-reverse')}>
|
|
<div className={cn(
|
|
'w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0',
|
|
msg.role === 'user' ? 'bg-ink text-paper' : 'bg-brand-accent/10 text-brand-accent',
|
|
)}>
|
|
{msg.role === 'user' ? 'U' : <Bot className="h-4 w-4" />}
|
|
</div>
|
|
<div className={cn(
|
|
'max-w-[85%] p-3.5 rounded-2xl text-sm leading-relaxed',
|
|
msg.role === 'user'
|
|
? 'bg-ink text-paper rounded-tr-sm'
|
|
: 'bg-white/60 dark:bg-white/5 border border-border rounded-tl-sm text-ink',
|
|
)}>
|
|
{msg.role === 'assistant' ? <MarkdownContent content={text} /> : <p>{text}</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{isLoading && (
|
|
<div className="flex gap-3">
|
|
<div className="w-8 h-8 rounded-xl bg-brand-accent/10 text-brand-accent flex items-center justify-center flex-shrink-0">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
</div>
|
|
<div className="bg-white/60 dark:bg-white/5 border border-border p-3.5 rounded-2xl rounded-tl-sm">
|
|
<Loader2 className="h-4 w-4 animate-spin text-concrete" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div ref={messagesEndRef} />
|
|
</motion.div>
|
|
)}
|
|
|
|
{aiTab === 'actions' && (
|
|
<motion.div key="actions" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="space-y-8">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
<h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-concrete whitespace-nowrap">Transformations</h4>
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{[
|
|
{ icon: <Sparkles size={14} />, label: t('ai.actionClarify') || 'Clarifier' },
|
|
{ icon: <Scissors size={14} />, label: t('ai.actionShorten') || 'Raccourcir' },
|
|
{ icon: <Zap size={14} />, label: t('ai.actionImprove') || 'Améliorer' },
|
|
{ icon: <Languages size={14} />, label: t('ai.actionTranslate') || 'Traduire' },
|
|
].map((action, i) => (
|
|
<button key={i} className="flex flex-col items-center gap-3 p-4 bg-white/50 dark:bg-white/5 border border-border rounded-xl transition-all group hover:border-ink/20">
|
|
<div className="p-2 rounded-lg bg-slate-50 dark:bg-white/10 transition-colors group-hover:bg-brand-accent group-hover:text-white shadow-sm text-concrete">
|
|
{action.icon}
|
|
</div>
|
|
<span className="text-[10px] font-bold text-ink/80 uppercase tracking-widest">{action.label}</span>
|
|
</button>
|
|
))}
|
|
<button className="col-span-2 flex items-center justify-center gap-3 py-3 px-4 bg-white/50 dark:bg-white/5 border border-border rounded-xl text-[10px] font-bold text-ink/80 hover:bg-white dark:hover:bg-white/10 transition-colors hover:border-ink/20 uppercase tracking-widest">
|
|
<FileCode size={14} className="text-concrete" />
|
|
{t('ai.actionMarkdown') || 'Convertir en Markdown'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
<h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-concrete whitespace-nowrap">Generation Tools</h4>
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
</div>
|
|
|
|
<div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-brand-accent/30 transition-all duration-500 overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<Layout size={80} className="text-brand-accent" />
|
|
</div>
|
|
<div className="relative space-y-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-slate-50 rounded-lg text-brand-accent"><Layout size={18} /></div>
|
|
<div className="space-y-0.5">
|
|
<h5 className="text-sm font-bold text-ink leading-none">{t('ai.slides') || 'Présentation'}</h5>
|
|
<p className="text-[10px] text-concrete uppercase tracking-tight">{t('ai.slidesDesc') || 'Convertir en slides interactives'}</p>
|
|
</div>
|
|
</div>
|
|
<button className="w-full py-3.5 bg-brand-accent text-white rounded-xl text-[10px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-brand-accent/20 uppercase tracking-[0.2em]">
|
|
{t('ai.generate') || 'Générer'} <ArrowRightLeft size={14} className="opacity-60" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-emerald-500/30 transition-all duration-500 overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<BookOpen size={80} className="text-emerald-500" />
|
|
</div>
|
|
<div className="relative space-y-5">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 bg-slate-50 rounded-lg text-emerald-500"><BookOpen size={18} /></div>
|
|
<div className="space-y-0.5">
|
|
<h5 className="text-sm font-bold text-ink leading-none">{t('ai.diagram') || 'Diagramme'}</h5>
|
|
<p className="text-[10px] text-concrete uppercase tracking-tight">{t('ai.diagramDesc') || 'Visualisation de structure'}</p>
|
|
</div>
|
|
</div>
|
|
<button className="w-full py-3.5 bg-emerald-600 text-white rounded-xl text-[10px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-emerald-600/20 uppercase tracking-[0.2em]">
|
|
{t('ai.trace') || 'Tracer'} <ArrowRightLeft size={14} className="opacity-60" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-2 opacity-20 py-4">
|
|
<History size={16} />
|
|
<span className="text-[10px] font-bold uppercase tracking-widest whitespace-nowrap">Auto-Save Enabled</span>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{aiTab === 'explore' && (
|
|
<motion.div key="explore" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="space-y-6">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
<h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-concrete whitespace-nowrap">Intelligence Modules</h4>
|
|
<div className="h-px flex-1 bg-border/40" />
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<button className="w-full group relative p-5 rounded-2xl bg-white border border-border hover:border-brand-accent/30 transition-all text-left overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<Zap size={60} className="text-brand-accent" />
|
|
</div>
|
|
<div className="relative flex items-center gap-4">
|
|
<div className="p-3 bg-brand-accent/10 rounded-xl text-brand-accent group-hover:bg-brand-accent group-hover:text-white transition-colors">
|
|
<Zap size={20} />
|
|
</div>
|
|
<div>
|
|
<h5 className="font-bold text-ink text-sm">{t('ai.brainstormWave') || 'Brainstorm Wave'}</h5>
|
|
<p className="text-[10px] text-concrete uppercase tracking-tight">{t('ai.brainstormWaveDesc') || 'Unfold dimensions of thought'}</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button className="w-full group relative p-5 rounded-2xl bg-white border border-border hover:border-indigo-500/30 transition-all text-left overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<Network size={60} className="text-indigo-500" />
|
|
</div>
|
|
<div className="relative flex items-center gap-4">
|
|
<div className="p-3 bg-indigo-500/10 rounded-xl text-indigo-500 group-hover:bg-indigo-500 group-hover:text-white transition-colors">
|
|
<Network size={20} />
|
|
</div>
|
|
<div>
|
|
<h5 className="font-bold text-ink text-sm">{t('ai.semanticNetwork') || 'Réseau Sémantique'}</h5>
|
|
<p className="text-[10px] text-concrete uppercase tracking-tight">{t('ai.semanticNetworkDesc') || 'Detect clusters and bridges'}</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button className="w-full group relative p-5 rounded-2xl bg-white border border-border hover:border-rose-500/30 transition-all text-left overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<Clock size={60} className="text-rose-500" />
|
|
</div>
|
|
<div className="relative flex items-center gap-4">
|
|
<div className="p-3 bg-rose-500/10 rounded-xl text-rose-500 group-hover:bg-rose-500 group-hover:text-white transition-colors">
|
|
<Clock size={20} />
|
|
</div>
|
|
<div>
|
|
<h5 className="font-bold text-ink text-sm">{t('ai.temporalForecast') || 'Prévision Temporelle'}</h5>
|
|
<p className="text-[10px] text-concrete uppercase tracking-tight">{t('ai.temporalForecastDesc') || 'Predict relevance recurrence'}</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 rounded-2xl bg-slate-50 dark:bg-white/5 border border-dashed border-border">
|
|
<p className="text-[10px] text-concrete leading-relaxed font-medium italic text-center">
|
|
{t('ai.modulesHint') || 'Ces modules utilisent les embeddings pour analyser vos pensées.'}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{aiTab === 'resources' && (
|
|
<motion.div key="resources" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="space-y-6">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-concrete">{t('ai.resourceUrl') || 'URL (Optionnel)'}</label>
|
|
<div className="relative">
|
|
<input type="text" placeholder="https://..." className="w-full bg-white/50 dark:bg-white/5 border border-border rounded-xl pl-4 pr-10 py-3 text-xs outline-none focus:border-brand-accent transition-colors text-ink" />
|
|
<Globe size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-concrete/40" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-concrete">{t('ai.resourceText') || 'Texte de la ressource'}</label>
|
|
<textarea
|
|
rows={8}
|
|
placeholder={t('ai.resourcePlaceholder') || 'Collez votre texte ici...'}
|
|
className="w-full bg-white/50 dark:bg-white/5 border border-border rounded-xl p-4 text-xs outline-none focus:border-brand-accent transition-colors resize-none leading-relaxed text-ink"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<label className="text-[10px] uppercase tracking-[0.2em] font-bold text-concrete">{t('ai.integrationMode') || "Mode d'intégration"}</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{[
|
|
{ id: 'replace', label: t('ai.modeReplace') || 'Remplacer', sub: 'Direct' },
|
|
{ id: 'append', label: t('ai.modeAppend') || 'Compléter', sub: 'Ajoute' },
|
|
{ id: 'merge', label: t('ai.modeMerge') || 'Fusionner', sub: 'Intègre' },
|
|
].map((mode) => (
|
|
<button key={mode.id} className="flex flex-col items-center justify-center p-3 rounded-xl border transition-all text-center bg-white border-border hover:bg-slate-50 dark:hover:bg-white/5">
|
|
<span className="text-[10px] font-bold text-ink">{mode.label}</span>
|
|
<span className="text-[8px] text-concrete opacity-60 leading-tight mt-1 font-medium">{mode.sub}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<button className="w-full py-4 bg-brand-accent text-white rounded-xl text-[11px] font-bold uppercase tracking-[0.2em] flex items-center justify-center gap-3 hover:opacity-90 transition-opacity shadow-lg shadow-brand-accent/20">
|
|
<Sparkles size={18} />
|
|
{t('ai.generatePreview') || "Générer l'aperçu"}
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Textarea — only on discussion tab */}
|
|
<AnimatePresence>
|
|
{aiTab === 'discussion' && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="p-6 bg-white/40 dark:bg-black/20 border-t border-border backdrop-blur-xl shrink-0"
|
|
>
|
|
<div className="relative group/chat">
|
|
<textarea
|
|
rows={4}
|
|
placeholder={t('ai.chatPlaceholder')}
|
|
className="w-full bg-white/80 dark:bg-white/5 border border-border rounded-[24px] p-5 pr-14 text-sm outline-none focus:border-brand-accent focus:ring-4 ring-brand-accent/5 transition-all resize-none leading-relaxed font-light shadow-inner text-ink"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={e => {
|
|
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
|
|
}}
|
|
disabled={isLoading}
|
|
/>
|
|
<div className="absolute right-4 bottom-4 flex flex-col gap-2">
|
|
{isLoading ? (
|
|
<button onClick={() => stop()} className="p-2.5 bg-rose-500 text-white rounded-xl transition-all hover:scale-110 active:scale-95 shadow-lg shadow-rose-500/20">
|
|
<Square size={16} />
|
|
</button>
|
|
) : (
|
|
<button onClick={handleSend} disabled={!input.trim()} className="p-2.5 bg-brand-accent text-white rounded-xl transition-all hover:scale-110 active:scale-95 shadow-lg shadow-brand-accent/20 disabled:opacity-40 disabled:pointer-events-none">
|
|
<Send size={16} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="absolute left-6 bottom-4 flex gap-3 text-concrete/40">
|
|
<button
|
|
onClick={() => webSearchAvailable && setWebSearch(!webSearch)}
|
|
className={cn("hover:text-brand-accent transition-colors", webSearch && "text-brand-accent")}
|
|
>
|
|
<Globe size={14} />
|
|
</button>
|
|
<button className="hover:text-brand-accent transition-colors"><Network size={14} /></button>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-center mt-4">
|
|
<p className="text-[9px] text-concrete/40 uppercase tracking-[0.3em] font-bold">Shift+Enter for new line</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</motion.aside>
|
|
)
|
|
}
|