sepehr
d91072ed6b
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 44s
- Add image description service + API route for AI-powered image analysis - Image title generation returns 3 selectable suggestions via TitleSuggestions component - Add "Describe images" action in AI assistant (individual + collective) - Fix pin refresh propagation in card and tabs view - Fix note creation refresh in tabs mode, pass all notes to tabs view - Add RTL support (dir="auto") on note content elements - Pass UI language dynamically to AI endpoints instead of hardcoded 'fr' - Add 18 missing i18n keys in both en.json and fr.json - Sparkles button on images for AI title generation (bottom-right, pulse animation) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
603 lines
28 KiB
TypeScript
603 lines
28 KiB
TypeScript
'use client'
|
|
|
|
import { useRef, useEffect, useState } from 'react'
|
|
import { useChat } from '@ai-sdk/react'
|
|
import { DefaultChatTransport } from 'ai'
|
|
import type { UIMessage } from 'ai'
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
X, Bot, Sparkles, Send, Loader2, Square,
|
|
Briefcase, Palette, GraduationCap, Coffee,
|
|
Lightbulb, Minimize2, AlignLeft, Wand2,
|
|
Globe, BookOpen, FileText, RotateCcw, Check,
|
|
Maximize2, ImageIcon,
|
|
} from 'lucide-react'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { MarkdownContent } from '@/components/markdown-content'
|
|
import { toast } from 'sonner'
|
|
import { useWebSearchAvailable } from '@/hooks/use-web-search-available'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import { getNotebookIcon } from '@/lib/notebook-icon'
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
function getMessageContent(msg: UIMessage): string {
|
|
if (typeof (msg as any).content === 'string') return (msg as any).content
|
|
if (msg.parts && Array.isArray(msg.parts)) {
|
|
return msg.parts
|
|
.filter((p: any) => p.type === 'text')
|
|
.map((p: any) => p.text)
|
|
.join('')
|
|
}
|
|
return ''
|
|
}
|
|
|
|
// ── Constants ─────────────────────────────────────────────────────────────────
|
|
|
|
const TONES = [
|
|
{ id: 'professional', label: 'Pro', full: 'Professional', icon: Briefcase },
|
|
{ id: 'creative', label: 'Create', full: 'Creative', icon: Palette },
|
|
{ id: 'academic', label: 'Acad.', full: 'Academic', icon: GraduationCap },
|
|
{ id: 'casual', label: 'Casual', full: 'Casual', icon: Coffee },
|
|
]
|
|
|
|
interface ActionDef {
|
|
id: string
|
|
icon: any
|
|
apiPath: string
|
|
body: (content: string, images?: string[], lang?: string) => object
|
|
resultKey: string
|
|
i18nKey: string
|
|
isImageAction?: boolean
|
|
}
|
|
|
|
const ACTION_IDS = [
|
|
{ id: 'clarify', icon: Lightbulb, apiPath: '/api/ai/reformulate', body: (content: string) => ({ text: content, option: 'clarify' }), resultKey: 'reformulatedText', i18nKey: 'ai.action.clarify' },
|
|
{ id: 'shorten', icon: Minimize2, apiPath: '/api/ai/reformulate', body: (content: string) => ({ text: content, option: 'shorten' }), resultKey: 'reformulatedText', i18nKey: 'ai.action.shorten' },
|
|
{ id: 'improve', icon: AlignLeft, apiPath: '/api/ai/reformulate', body: (content: string) => ({ text: content, option: 'improve' }), resultKey: 'reformulatedText', i18nKey: 'ai.action.improve' },
|
|
{ id: 'markdown', icon: Wand2, apiPath: '/api/ai/transform-markdown', body: (content: string) => ({ text: content }), resultKey: 'transformedText', i18nKey: 'ai.action.toMarkdown' },
|
|
{ id: 'describe-images', icon: ImageIcon, apiPath: '/api/ai/describe-image', body: (_content: string, images?: string[], lang?: string) => ({ imageUrls: images || [], mode: 'description', language: lang || 'fr' }), resultKey: 'descriptions', i18nKey: 'ai.action.describeImages', isImageAction: true },
|
|
]
|
|
|
|
// ── Types ─────────────────────────────────────────────────────────────────────
|
|
|
|
interface ContextualAIChatProps {
|
|
onClose: () => void
|
|
noteTitle?: string
|
|
noteContent?: string
|
|
noteImages?: string[]
|
|
/** Called when an action result should be injected into the note */
|
|
onApplyToNote?: (newContent: string) => void
|
|
/** Called when the user wants to undo the last injected action */
|
|
onUndoLastAction?: () => void
|
|
/** Whether the last action has been applied (so we can show undo) */
|
|
lastActionApplied?: boolean
|
|
/** Notebooks available for scope selection */
|
|
notebooks?: Array<{ id: string; name: string }>
|
|
/** Extra classes forwarded to the aside root element */
|
|
className?: string
|
|
}
|
|
|
|
// ── Component ─────────────────────────────────────────────────────────────────
|
|
|
|
export function ContextualAIChat({
|
|
onClose,
|
|
noteTitle,
|
|
noteContent,
|
|
noteImages,
|
|
onApplyToNote,
|
|
onUndoLastAction,
|
|
lastActionApplied = false,
|
|
notebooks = [],
|
|
className,
|
|
}: ContextualAIChatProps) {
|
|
const { t, language } = useLanguage()
|
|
const webSearchAvailable = useWebSearchAvailable()
|
|
|
|
const [activeTab, setActiveTab] = useState<'chat' | 'actions'>('chat')
|
|
const [selectedTone, setSelectedTone] = useState('professional')
|
|
const [input, setInput] = useState('')
|
|
const [chatScope, setChatScope] = useState<'note' | 'all' | string>('note') // 'note', 'all', or notebook ID
|
|
const [webSearch, setWebSearch] = useState(false)
|
|
const [expanded, setExpanded] = useState(false)
|
|
|
|
// Action state
|
|
const [actionLoading, setActionLoading] = useState<string | null>(null)
|
|
const [actionPreview, setActionPreview] = useState<{ label: string; text: string } | null>(null)
|
|
|
|
const messagesEndRef = useRef<HTMLDivElement>(null)
|
|
|
|
const transport = useRef(new DefaultChatTransport({ api: '/api/chat' })).current
|
|
|
|
const buildChatBody = () => {
|
|
const body: Record<string, any> = { language, webSearch }
|
|
if (chatScope === 'note') {
|
|
body.noteContext = {
|
|
title: noteTitle || '',
|
|
content: noteContent || '',
|
|
tone: selectedTone,
|
|
images: noteImages || [],
|
|
}
|
|
} else if (chatScope !== 'all') {
|
|
// scope is a notebook ID
|
|
body.notebookId = chatScope
|
|
}
|
|
return body
|
|
}
|
|
|
|
const { messages, sendMessage, status, stop } = useChat({ transport })
|
|
|
|
const isLoading = status === 'submitted' || status === 'streaming'
|
|
|
|
useEffect(() => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
|
}, [messages])
|
|
|
|
useEffect(() => {
|
|
window.dispatchEvent(new CustomEvent('contextual-ai-visibility', { detail: true }))
|
|
return () => {
|
|
window.dispatchEvent(new CustomEvent('contextual-ai-visibility', { detail: false }))
|
|
}
|
|
}, [])
|
|
|
|
// ── Chat send ───────────────────────────────────────────────────────────────
|
|
const handleSend = async () => {
|
|
const text = input.trim()
|
|
if (!text || isLoading) return
|
|
setInput('')
|
|
await sendMessage({ text }, { body: buildChatBody() })
|
|
}
|
|
|
|
// ── Action execution ────────────────────────────────────────────────────────
|
|
const handleAction = async (action: ActionDef) => {
|
|
// Image-specific action
|
|
if (action.isImageAction) {
|
|
if (!noteImages || noteImages.length === 0) {
|
|
toast.error(t('ai.noImagesError') || 'Aucune image dans cette note')
|
|
return
|
|
}
|
|
setActionLoading(action.id)
|
|
setActionPreview(null)
|
|
try {
|
|
const res = await fetch(action.apiPath, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(action.body('', noteImages, language)),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.error || t('ai.genericError'))
|
|
// Format image descriptions for preview
|
|
const descs = data.descriptions || []
|
|
let resultText = descs.map((d: any) =>
|
|
noteImages.length > 1 ? `**Image ${d.index + 1}:** ${d.description}` : d.description
|
|
).join('\n\n')
|
|
if (data.combinedSummary) {
|
|
resultText += `\n\n---\n**${t('ai.overview') || 'Résumé'}:** ${data.combinedSummary}`
|
|
}
|
|
setActionPreview({ label: t(action.i18nKey), text: resultText })
|
|
} catch (e: any) {
|
|
toast.error(e.message || t('ai.actionError'))
|
|
} finally {
|
|
setActionLoading(null)
|
|
}
|
|
return
|
|
}
|
|
|
|
// Text-based actions
|
|
const wc = (noteContent || '').split(/\s+/).filter(Boolean).length
|
|
if (!noteContent || wc < 5) {
|
|
toast.error(t('ai.minWordsError'))
|
|
return
|
|
}
|
|
setActionLoading(action.id)
|
|
setActionPreview(null)
|
|
try {
|
|
const res = await fetch(action.apiPath, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(action.body(noteContent, undefined, language)),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.error || t('ai.genericError'))
|
|
const result = data[action.resultKey] || ''
|
|
setActionPreview({ label: t(action.i18nKey), text: result })
|
|
} catch (e: any) {
|
|
toast.error(e.message || t('ai.actionError'))
|
|
} finally {
|
|
setActionLoading(null)
|
|
}
|
|
}
|
|
|
|
const handleApplyPreview = () => {
|
|
if (!actionPreview || !onApplyToNote) return
|
|
onApplyToNote(actionPreview.text)
|
|
setActionPreview(null)
|
|
toast.success(t('ai.appliedToNote'))
|
|
}
|
|
|
|
const handleDiscardPreview = () => setActionPreview(null)
|
|
|
|
// ── Scope label ─────────────────────────────────────────────────────────────
|
|
const scopeLabel =
|
|
chatScope === 'note' ? t('ai.thisNote')
|
|
: chatScope === 'all' ? t('ai.allMyNotes')
|
|
: notebooks.find(n => n.id === chatScope)?.name ?? t('ai.notebookGeneric')
|
|
|
|
return (
|
|
<aside className={cn(
|
|
'border-l border-border/40 bg-card flex flex-col self-stretch flex-shrink-0 z-10 transition-all duration-300',
|
|
expanded ? 'w-[560px]' : 'w-[360px]',
|
|
className,
|
|
)}>
|
|
|
|
{/* ── Header ───────────────────────────────────────────────── */}
|
|
<div className="px-4 py-3 border-b border-border/40 flex items-center justify-between shrink-0">
|
|
<div className="min-w-0">
|
|
<h2 className="text-base font-semibold text-foreground flex items-center gap-2">
|
|
<Sparkles className="h-4 w-4 text-primary shrink-0" />
|
|
{t('ai.assistantTitle')}
|
|
</h2>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{noteTitle ? `"${noteTitle}"` : t('ai.currentNote')}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-0.5 shrink-0">
|
|
{lastActionApplied && onUndoLastAction && (
|
|
<Button
|
|
variant="ghost" size="icon"
|
|
className="h-7 w-7 text-amber-500 hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-950/30"
|
|
onClick={onUndoLastAction}
|
|
title={t('ai.undoLastAction')}
|
|
>
|
|
<RotateCcw className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
{/* Expand / Shrink */}
|
|
<Button
|
|
variant="ghost" size="icon"
|
|
className="h-7 w-7 text-muted-foreground hover:text-foreground"
|
|
onClick={() => setExpanded(e => !e)}
|
|
title={expanded ? t('ai.shrinkPanel') : t('ai.expandPanel')}
|
|
>
|
|
{expanded
|
|
? <Minimize2 className="h-3.5 w-3.5" />
|
|
: <Maximize2 className="h-3.5 w-3.5" />}
|
|
</Button>
|
|
<Button variant="ghost" size="icon" onClick={onClose} className="h-7 w-7 text-muted-foreground hover:text-foreground">
|
|
<X className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Tabs ─────────────────────────────────────────────────── */}
|
|
<div className="flex border-b border-border/40 shrink-0">
|
|
{(['chat', 'actions'] as const).map(tab => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={cn(
|
|
'flex-1 py-3 border-b-2 text-sm font-semibold flex items-center justify-center gap-2 transition-all capitalize',
|
|
activeTab === tab
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground',
|
|
)}
|
|
>
|
|
{tab === 'chat' && <Bot className="h-3.5 w-3.5" />}
|
|
{tab === 'actions' && <Wand2 className="h-3.5 w-3.5" />}
|
|
{tab === 'chat' ? t('ai.chatTab') : t('ai.noteActions')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* ══════════════════════════════════════════════════════════ */}
|
|
{/* ── TAB: CHAT ─────────────────────────────────────────── */}
|
|
{/* ══════════════════════════════════════════════════════════ */}
|
|
{activeTab === 'chat' && (
|
|
<div className="flex flex-col flex-1 min-h-0 overflow-hidden">
|
|
{/* Messages */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-3 flex flex-col">
|
|
{messages.length === 0 && (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-center opacity-60">
|
|
<div className="w-14 h-14 rounded-full bg-primary/5 flex items-center justify-center border border-primary/10 mb-4">
|
|
<Sparkles className="h-6 w-6 text-primary/50" />
|
|
</div>
|
|
<p className="text-sm text-muted-foreground max-w-[220px]">
|
|
{t('ai.askToStart')}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{messages.map((msg: UIMessage) => {
|
|
const content = getMessageContent(msg)
|
|
// Skip empty assistant messages (thinking/reasoning phase)
|
|
if (msg.role === 'assistant' && !content) return null
|
|
return (
|
|
<div key={msg.id} className={cn('flex gap-2', msg.role === 'user' && 'flex-row-reverse')}>
|
|
<div className={cn(
|
|
'w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 border text-[10px] font-bold',
|
|
msg.role === 'user'
|
|
? 'bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300'
|
|
: 'bg-primary/10 text-primary border-primary/20',
|
|
)}>
|
|
{msg.role === 'user' ? 'U' : <Bot className="h-3 w-3" />}
|
|
</div>
|
|
<div className={cn(
|
|
'max-w-[88%] p-3 rounded-2xl text-sm leading-relaxed',
|
|
msg.role === 'user'
|
|
? 'bg-primary text-primary-foreground rounded-tr-sm'
|
|
: 'bg-muted/40 border border-border/40 rounded-tl-sm text-foreground',
|
|
)}>
|
|
{msg.role === 'assistant'
|
|
? <MarkdownContent content={content} />
|
|
: <p>{content}</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{isLoading && (
|
|
<div className="flex gap-2">
|
|
<div className="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 border border-primary/20">
|
|
<Bot className="h-3 w-3" />
|
|
</div>
|
|
<div className="bg-muted/40 border border-border/40 p-3 rounded-2xl rounded-tl-sm">
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
{/* Scope & Tone Control Area */}
|
|
<div className="border-t border-border/20 shrink-0 bg-muted/10">
|
|
{/* Scope bar */}
|
|
<div className="px-3 py-2 border-b border-border/10 flex flex-col gap-1.5">
|
|
<label className="text-xs font-bold tracking-wider text-muted-foreground uppercase">
|
|
{t('ai.contextLabel')}
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<Select value={chatScope} onValueChange={setChatScope}>
|
|
<SelectTrigger className="h-8 flex-1 text-sm bg-card">
|
|
<SelectValue placeholder={t('ai.selectContext')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="note" className="text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<FileText className="h-3 w-3 text-muted-foreground" /> {t('ai.thisNote')}
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="all" className="text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<Bot className="h-3 w-3 text-muted-foreground" /> {t('ai.allMyNotes')}
|
|
</div>
|
|
</SelectItem>
|
|
{notebooks.map(nb => (
|
|
<SelectItem key={nb.id} value={nb.id} className="text-xs">
|
|
<div className="flex items-center gap-2">
|
|
{(() => {
|
|
const Icon = getNotebookIcon((nb as any).icon)
|
|
return <Icon className="w-3 h-3 text-muted-foreground" />
|
|
})()}
|
|
{nb.name.length > 25 ? nb.name.slice(0, 25) + '…' : nb.name}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tone selector */}
|
|
<div className="px-3 py-2 flex flex-col gap-1.5">
|
|
<label className="text-xs font-bold tracking-wider text-muted-foreground uppercase">
|
|
{t('ai.writingTone')}
|
|
</label>
|
|
<div className="grid grid-cols-4 gap-1">
|
|
{TONES.map(tone => {
|
|
const Icon = tone.icon
|
|
const sel = selectedTone === tone.id
|
|
return (
|
|
<button
|
|
key={tone.id}
|
|
onClick={() => setSelectedTone(tone.id)}
|
|
title={tone.full}
|
|
className={cn(
|
|
'py-1.5 rounded border text-xs font-medium transition-all flex flex-col items-center gap-1',
|
|
sel
|
|
? 'border-primary bg-primary/10 text-primary'
|
|
: 'border-border/40 text-muted-foreground hover:bg-muted bg-card',
|
|
)}
|
|
>
|
|
<Icon className="h-3 w-3" />
|
|
{tone.label}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Input */}
|
|
<div className="p-3 border-t border-border/40 shrink-0 bg-card">
|
|
<div className="relative bg-card border border-border/60 rounded-xl p-1 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20 transition-all">
|
|
<textarea
|
|
className="w-full bg-transparent border-none focus:ring-0 resize-none text-sm text-foreground placeholder:text-muted-foreground/60 p-2 min-h-[64px] max-h-[120px]"
|
|
placeholder={
|
|
chatScope === 'note'
|
|
? t('ai.askAboutThisNote')
|
|
: t('ai.askAboutYourNotes')
|
|
}
|
|
value={input}
|
|
onChange={e => setInput(e.target.value)}
|
|
onKeyDown={e => {
|
|
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
|
|
}}
|
|
disabled={isLoading}
|
|
/>
|
|
<div className="flex justify-between items-center px-1 pb-1 pt-1">
|
|
<div className="flex items-center gap-2">
|
|
{webSearchAvailable && (
|
|
<button
|
|
onClick={() => setWebSearch(w => !w)}
|
|
title={t('ai.webSearchLabel')}
|
|
className={cn(
|
|
'flex items-center justify-center gap-1.5 h-8 px-3 rounded-md border transition-all text-xs font-medium',
|
|
webSearch
|
|
? 'border-emerald-500 bg-emerald-50 text-emerald-600 dark:bg-emerald-950/30'
|
|
: 'border-border/50 text-muted-foreground hover:bg-muted bg-card',
|
|
)}
|
|
>
|
|
<Globe className="h-3 w-3" />
|
|
Web
|
|
</button>
|
|
)}
|
|
</div>
|
|
{isLoading ? (
|
|
<Button
|
|
size="icon"
|
|
className="h-7 w-7 rounded-lg bg-red-500 text-white shadow-sm hover:bg-red-600"
|
|
onClick={() => stop()}
|
|
>
|
|
<Square className="h-3.5 w-3.5" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="icon"
|
|
className="h-7 w-7 rounded-lg bg-primary text-primary-foreground shadow-sm disabled:opacity-50"
|
|
onClick={handleSend}
|
|
disabled={!input.trim()}
|
|
>
|
|
<Send className="h-3.5 w-3.5 ml-0.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<p className="text-[9px] text-muted-foreground/40 text-center mt-1">{t('ai.newLineHint')}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ══════════════════════════════════════════════════════════ */}
|
|
{/* ── TAB: ACTIONS ─────────────────────────────────────── */}
|
|
{/* ══════════════════════════════════════════════════════════ */}
|
|
{activeTab === 'actions' && (
|
|
<div className="flex flex-col flex-1 overflow-hidden">
|
|
{/* Preview panel — result to apply */}
|
|
{actionPreview ? (
|
|
<div className="flex flex-col flex-1 overflow-hidden">
|
|
<div className="px-4 py-2.5 border-b border-border/40 flex items-center justify-between shrink-0">
|
|
<p className="text-xs font-semibold text-foreground">{t('ai.resultLabel')} — {actionPreview.label}</p>
|
|
<button onClick={handleDiscardPreview} className="text-muted-foreground hover:text-foreground">
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
<div className="text-xs leading-relaxed text-foreground bg-muted/30 border border-border/40 rounded-xl p-3 whitespace-pre-wrap">
|
|
{actionPreview.text}
|
|
</div>
|
|
</div>
|
|
<div className="p-3 border-t border-border/40 flex gap-2 shrink-0">
|
|
<Button
|
|
variant="ghost" size="sm"
|
|
className="flex-1 text-xs gap-1.5"
|
|
onClick={handleDiscardPreview}
|
|
>
|
|
<X className="h-3.5 w-3.5" /> {t('ai.discardAction')}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="flex-1 text-xs gap-1.5 bg-primary"
|
|
onClick={handleApplyPreview}
|
|
disabled={!onApplyToNote}
|
|
>
|
|
<Check className="h-3.5 w-3.5" /> {t('ai.applyToNote')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-2.5">
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-3">
|
|
{t('ai.transformationsDesc')}
|
|
</p>
|
|
|
|
{/* Image actions — shown when note has images */}
|
|
{noteImages && noteImages.length > 0 && ACTION_IDS.filter(a => a.isImageAction).map(action => {
|
|
const Icon = action.icon
|
|
const loading = actionLoading === action.id
|
|
return (
|
|
<button
|
|
key={action.id}
|
|
onClick={() => handleAction(action)}
|
|
disabled={!!actionLoading}
|
|
className="w-full flex items-center gap-3 rounded-xl border border-border/60 bg-card px-4 py-3 text-sm font-medium text-foreground hover:bg-muted hover:border-primary/40 transition-all text-left disabled:opacity-60"
|
|
>
|
|
{loading
|
|
? <Loader2 className="h-4 w-4 text-primary animate-spin shrink-0" />
|
|
: <Icon className="h-4 w-4 text-primary shrink-0" />
|
|
}
|
|
<div className="flex flex-col">
|
|
<span>{t(action.i18nKey)}</span>
|
|
{noteImages.length > 1 && (
|
|
<span className="text-[10px] text-muted-foreground">{noteImages.length} images</span>
|
|
)}
|
|
</div>
|
|
{loading && <span className="ml-auto text-[10px] text-muted-foreground">{t('ai.processingAction')}</span>}
|
|
</button>
|
|
)
|
|
})}
|
|
|
|
{/* Text actions — shown when note has sufficient text */}
|
|
{!noteContent || noteContent.trim().split(/\s+/).filter(Boolean).length < 5 ? (
|
|
<div className="flex items-start gap-2 p-3 rounded-xl border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30">
|
|
<Lightbulb className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />
|
|
<p className="text-xs text-amber-700 dark:text-amber-400">
|
|
{t('ai.writeMinWordsAction')}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
ACTION_IDS.filter(a => !a.isImageAction).map(action => {
|
|
const Icon = action.icon
|
|
const loading = actionLoading === action.id
|
|
return (
|
|
<button
|
|
key={action.id}
|
|
onClick={() => handleAction(action)}
|
|
disabled={!!actionLoading}
|
|
className="w-full flex items-center gap-3 rounded-xl border border-border/60 bg-card px-4 py-3 text-sm font-medium text-foreground hover:bg-muted hover:border-primary/40 transition-all text-left disabled:opacity-60"
|
|
>
|
|
{loading
|
|
? <Loader2 className="h-4 w-4 text-primary animate-spin shrink-0" />
|
|
: <Icon className="h-4 w-4 text-primary shrink-0" />
|
|
}
|
|
<span>{t(action.i18nKey)}</span>
|
|
{loading && <span className="ml-auto text-[10px] text-muted-foreground">{t('ai.processingAction')}</span>}
|
|
</button>
|
|
)
|
|
})
|
|
)}
|
|
|
|
{/* Undo last action shortcut */}
|
|
{lastActionApplied && onUndoLastAction && (
|
|
<button
|
|
onClick={onUndoLastAction}
|
|
className="w-full mt-2 flex items-center gap-3 rounded-xl border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30 px-4 py-2.5 text-sm font-medium text-amber-700 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-950/50 transition-all text-left"
|
|
>
|
|
<RotateCcw className="h-4 w-4 shrink-0" />
|
|
{t('ai.undoLastAction')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</aside>
|
|
)
|
|
}
|