sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: restore blue accents for AI dialog components and standardize gold header

Browse Source
This commit is contained in:
Antigravity
2026-05-09 13:23:04 +00:00
parent 60a3fe5453
commit b0c2556a12
16 changed files with 274 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
memento-note/components/contextual-ai-chat.tsx
View File

@@ -482,7 +482,7 @@ export function ContextualAIChat({
/>
)}
<aside className={cn(
'border-l border-border bg-[#F9F8F6] flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
'border-l border-border bg-[#FDFDFE] flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
expanded
? 'fixed right-0 top-0 h-screen w-[640px] z-[200]'
: 'h-full w-[360px]',
@@ -492,7 +492,7 @@ export function ContextualAIChat({
<div className="p-6 border-b border-border shrink-0">
<div className="flex items-start justify-between">
<div className="min-w-0 space-y-2">
<h2 className="font-serif text-xl font-medium text-[#D4A373] flex items-center gap-2 leading-tight">
<h2 className="font-serif text-xl font-medium text-[#1C1C1C] flex items-center gap-2 leading-tight">
<Sparkles className="h-[18px] w-[18px] shrink-0 text-[#D4A373]" />
IA Assistant
</h2>
@@ -534,7 +534,7 @@ export function ContextualAIChat({
>
{tab.label}
{activeTab === tab.id && (
<motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#D4A373]" />
<motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#75B2D6]" />
)}
</button>
))}
@@ -542,9 +542,9 @@ export function ContextualAIChat({
<div className="flex-1 flex flex-col min-h-0 relative">
{actionPreview && (
<div className="absolute inset-0 z-20 flex flex-col bg-[#F2F0E9]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
<div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
<div className="px-6 py-4 border-b border-border flex items-center justify-between shrink-0">
<p className="text-[10px] font-bold uppercase tracking-widest text-[#D4A373]">{actionPreview.label}</p>
<p className="text-[10px] font-bold uppercase tracking-widest text-[#75B2D6]">{actionPreview.label}</p>
<button onClick={handleDiscardPreview} className="text-[#1C1C1C]/40 hover:text-[#1C1C1C]"><X size={18} /></button>
</div>
<div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
@@ -554,13 +554,13 @@ export function ContextualAIChat({
</div>
<div className="p-6 border-t border-border flex gap-3 shrink-0">
<button onClick={handleDiscardPreview} className="flex-1 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#1C1C1C]/40 hover:text-[#1C1C1C] transition-all">ANNULER</button>
<button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-[#1C1C1C] text-[#F2F0E9] rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
<button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-[#1C1C1C] text-[#FDFDFE] rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
</div>
</div>
)}
{resourcePreview && (
<div className="absolute inset-0 z-20 flex flex-col bg-[#F2F0E9]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
<div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
<div className="px-6 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
<p className="text-[10px] font-bold uppercase tracking-widest text-[#75B2D6]">
{resourcePreview.source === 'chat' ? 'Injecter depuis Discussion' : 'Aperçu IA'}
@@ -594,7 +594,7 @@ export function ContextualAIChat({
{messages.length === 0 && (
<div className="h-full flex flex-col items-center justify-center text-center space-y-6 py-12">
<div className="w-20 h-20 rounded-full bg-white/40 backdrop-blur-sm border border-dashed border-border flex items-center justify-center shadow-sm">
<MessageSquare size={32} className="text-[#D4A373]/30" />
<MessageSquare size={32} className="text-[#75B2D6]/60" />
</div>
<p className="text-xs font-serif italic text-[#1C1C1C]/40 leading-relaxed max-w-[200px]">Posez une question à l'Assistant pour commencer.</p>
</div>
@@ -606,12 +606,12 @@ export function ContextualAIChat({
return (
<div key={msg.id} className={cn('flex flex-col gap-3', !isAssistant && 'items-end')} onMouseEnter={() => isAssistant && setHoveredMsgId(msg.id)} onMouseLeave={() => setHoveredMsgId(null)}>
<div className="relative group max-w-[95%]">
<div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-[#1C1C1C] text-[#F2F0E9]' : 'bg-white/60 backdrop-blur-sm border border-border text-[#1C1C1C]')}>
<div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-[#1C1C1C] text-[#FDFDFE]' : 'bg-white/60 backdrop-blur-sm border border-border text-[#1C1C1C]')}>
{isAssistant ? <MarkdownContent content={content} /> : <p className="font-medium">{content}</p>}
</div>
{isAssistant && onApplyToNote && (hoveredMsgId === msg.id || messages.at(-1)?.id === msg.id) && (
<div className="flex gap-2 mt-3 opacity-0 group-hover:opacity-100 transition-all">
<button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-[#1C1C1C] text-[#F2F0E9] hover:opacity-90">REPLACER</button>
<button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-[#1C1C1C] text-[#FDFDFE] hover:opacity-90">REPLACER</button>
<button onClick={() => handleInjectFromChat(content, 'complete')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">COMPLÉTER</button>
<button onClick={() => handleInjectFromChat(content, 'merge')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">FUSIONNER</button>
</div>
@@ -623,7 +623,7 @@ export function ContextualAIChat({
{isLoading && (
<div className="flex flex-col gap-3">
<div className="bg-white/60 backdrop-blur-sm border border-border p-5 rounded-2xl shadow-sm w-fit">
<div className="flex gap-1.5"><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse" /><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse delay-75" /><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse delay-150" /></div>
<div className="flex gap-1.5"><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse" /><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse delay-75" /><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse delay-150" /></div>
</div>
</div>
)}
@@ -642,7 +642,7 @@ export function ContextualAIChat({
<SelectValue />
</div>
</SelectTrigger>
<SelectContent className="rounded-xl border-border shadow-xl bg-[#F2F0E9]">
<SelectContent className="rounded-xl border-border shadow-xl bg-[#FDFDFE]">
<SelectItem value="note" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Cette note</SelectItem>
<SelectItem value="all" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Tout Momento</SelectItem>
{notebooks.map(nb => (
@@ -664,11 +664,11 @@ export function ContextualAIChat({
className={cn(
'h-[52px] rounded-xl border transition-all flex flex-col items-center justify-center gap-1.5 shadow-sm',
isActive
? 'bg-[#ACB995]/10 border-[#ACB995] text-[#ACB995]'
? 'bg-[#75B2D6]/10 border-[#75B2D6] text-[#75B2D6]'
: 'bg-white/60 border-border text-[#1C1C1C]/40 hover:border-[#1C1C1C]/20'
)}
>
<Icon size={14} className={isActive ? 'text-[#ACB995]' : 'text-[#1C1C1C]/40'} />
<Icon size={14} className={isActive ? 'text-[#75B2D6]' : 'text-[#1C1C1C]/40'} />
<span className="text-[9px] font-bold uppercase tracking-tight">{tone.label}</span>
</button>
)
@@ -680,7 +680,7 @@ export function ContextualAIChat({
<div className="relative">
<textarea
rows={4}
className="w-full bg-white/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-[#ACB995] transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-[#1C1C1C]"
className="w-full bg-white/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-[#75B2D6] transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-[#1C1C1C]"
placeholder="Posez votre question sur cette note..."
value={input}
onChange={e => setInput(e.target.value)}
@@ -690,12 +690,12 @@ export function ContextualAIChat({
<div className="absolute right-4 bottom-4 flex gap-2">
<button
onClick={() => setWebSearch(!webSearch)}
className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-[#ACB995] bg-[#ACB995]/10" : "text-[#1C1C1C]/20 hover:text-[#1C1C1C]")}
className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-[#75B2D6] bg-[#75B2D6]/10" : "text-[#1C1C1C]/20 hover:text-[#1C1C1C]")}
title="Web Search"
>
<Globe size={18} />
</button>
<button onClick={handleSend} disabled={!input.trim() || isLoading} className="p-2.5 bg-[#ACB995] text-white rounded-xl transition-all hover:scale-105 active:scale-95 shadow-lg shadow-[#ACB995]/20 disabled:opacity-30">
<button onClick={handleSend} disabled={!input.trim() || isLoading} className="p-2.5 bg-[#75B2D6] text-white rounded-xl transition-all hover:scale-105 active:scale-95 shadow-lg shadow-[#75B2D6]/20 disabled:opacity-30">
<Send size={18} />
</button>
</div>
@@ -725,7 +725,7 @@ export function ContextualAIChat({
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
onClick={onUndoLastAction}
className="w-full py-3.5 bg-[#D4A373]/20 border border-[#D4A373]/50 rounded-xl flex items-center justify-center gap-2 text-[11px] font-bold text-[#D4A373] uppercase tracking-[0.2em] hover:bg-[#D4A373]/30 transition-all shadow-md"
className="w-full py-3.5 bg-[#75B2D6]/20 border border-[#75B2D6]/50 rounded-xl flex items-center justify-center gap-2 text-[11px] font-bold text-[#75B2D6] uppercase tracking-[0.2em] hover:bg-[#75B2D6]/30 transition-all shadow-md"
>
<RotateCcw size={12} /> {t('ai.undoLastAction')}
</motion.button>
@@ -736,11 +736,11 @@ export function ContextualAIChat({
const isActive = action.id === 'translate' && showLangPicker
const Icon = action.icon
return (
<button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading} className={cn("flex flex-col items-center gap-3 p-4 bg-white/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-[#ACB995] bg-[#ACB995]/5" : "border-border hover:border-[#1C1C1C]/20")}>
<div className={cn("p-2 rounded-lg bg-white/60 transition-colors group-hover:bg-[#1C1C1C] group-hover:text-[#F2F0E9] shadow-sm", loading && "animate-pulse", isActive && "bg-[#ACB995] text-white")}>
<button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading} className={cn("flex flex-col items-center gap-3 p-4 bg-white/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-[#75B2D6] bg-[#75B2D6]/5" : "border-border hover:border-[#1C1C1C]/20")}>
<div className={cn("p-2 rounded-lg bg-white/60 transition-colors group-hover:bg-[#1C1C1C] group-hover:text-[#FDFDFE] shadow-sm", loading && "animate-pulse", isActive && "bg-[#75B2D6] text-white")}>
{loading ? <Loader2 size={14} className="animate-spin" /> : <Icon size={14} />}
</div>
<span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-[#ACB995]" : "text-[#1C1C1C]/80")}>{t(action.i18nKey)}</span>
<span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-[#75B2D6]" : "text-[#1C1C1C]/80")}>{t(action.i18nKey)}</span>
</button>
)
})}
@@ -763,7 +763,7 @@ export function ContextualAIChat({
className={cn(
"py-2 px-1 rounded-lg border text-[10px] font-bold uppercase tracking-tighter transition-all",
translateTarget === lang
? "bg-[#ACB995] border-[#ACB995] text-white shadow-md shadow-[#ACB995]/20"
? "bg-[#75B2D6] border-[#75B2D6] text-white shadow-md shadow-[#75B2D6]/20"
: "bg-white/60 border-border text-[#1C1C1C]/60 hover:border-[#1C1C1C]/20"
)}
>
@@ -862,13 +862,13 @@ export function ContextualAIChat({
</button>
{generateResult?.type === 'slides' && generateResult.canvasId && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="mt-4 p-4 bg-[#75B2D6]/10 border border-[#75B2D6]/20 rounded-xl space-y-3"
>
<div className="flex items-center justify-between">
<span className="text-[9px] font-bold text-[#75B2D6] uppercase tracking-widest flex items-center gap-1.5">
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="mt-4 p-4 bg-[#75B2D6]/10 border border-[#75B2D6]/20 rounded-xl space-y-3"
>
<div className="flex items-center justify-between">
<span className="text-[9px] font-bold text-[#75B2D6] uppercase tracking-widest flex items-center gap-1.5">
<Check size={12} /> Présentation prête
</span>
<a
@@ -905,7 +905,7 @@ export function ContextualAIChat({
mToast.error('Échec du téléchargement')
}
}}
className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#ACB995] text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#75B2D6] text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
>
<Download size={13} />
Télécharger .pptx