feat: implement core application structure, UI components, internationalization, and database seeding.
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Sparkles, Send, RefreshCw, BookOpen, Bot, ArrowLeft, BrainCircuit, Zap } from 'lucide-react';
|
||||
import { ChatMessage, UserUsage } from '@/lib/types';
|
||||
import { useLanguage } from '@/providers/LanguageProvider';
|
||||
|
||||
interface AIPanelProps {
|
||||
chatHistory: ChatMessage[];
|
||||
@@ -15,6 +16,7 @@ interface AIPanelProps {
|
||||
}
|
||||
|
||||
const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertText, selectedText, isGenerating, usage }) => {
|
||||
const { t } = useLanguage();
|
||||
const [input, setInput] = useState("");
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -37,7 +39,7 @@ const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertT
|
||||
<div className="p-4 bg-indigo-600 text-white flex items-center justify-between shadow-md">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={20} className="animate-pulse" />
|
||||
<h3 className="font-bold tracking-tight">Assistant IA</h3>
|
||||
<h3 className="font-bold tracking-tight">{t('ai_panel.title')}</h3>
|
||||
</div>
|
||||
{usage && (
|
||||
<div className="bg-indigo-900/50 px-2 py-1 rounded text-[10px] font-black flex items-center gap-1">
|
||||
@@ -48,7 +50,7 @@ const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertT
|
||||
|
||||
{selectedText && (
|
||||
<div className="bg-indigo-50 p-3 border-b border-indigo-100 text-xs text-indigo-800">
|
||||
<div className="font-bold flex items-center gap-1 mb-1"><BookOpen size={12} /> Contexte :</div>
|
||||
<div className="font-bold flex items-center gap-1 mb-1"><BookOpen size={12} /> {t('ai_panel.context')}</div>
|
||||
<div className="italic truncate opacity-80">"{selectedText.substring(0, 60)}..."</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -57,10 +59,10 @@ const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertT
|
||||
{chatHistory.length === 0 && (
|
||||
<div className="text-center text-theme-muted mt-10">
|
||||
<Bot size={48} className="mx-auto mb-2 opacity-50" />
|
||||
<p className="text-sm">Bonjour ! Comment puis-je vous aider aujourd'hui ?</p>
|
||||
<p className="text-sm">{t('ai_panel.greeting')}</p>
|
||||
{isLimitReached && (
|
||||
<div className="mt-4 p-4 bg-red-50 border border-red-100 rounded-xl text-red-600 text-xs font-bold uppercase animate-pulse">
|
||||
Limite atteinte ! Améliorez votre plan.
|
||||
{t('ai_panel.limit_reached_upgrade')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -70,7 +72,7 @@ const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertT
|
||||
<div key={msg.id} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
|
||||
<div className={`max-w-[85%] rounded-2xl p-4 text-sm shadow-sm transition-colors duration-300 ${msg.role === 'user' ? 'bg-indigo-600 text-white rounded-br-none' : 'bg-theme-panel text-theme-text border border-theme-border rounded-bl-none'}`}>
|
||||
{msg.role === 'model' && msg.responseType === 'reflection' && (
|
||||
<div className="flex items-center gap-1.5 text-[10px] font-black text-amber-600 mb-1.5 uppercase tracking-wide"><BrainCircuit size={12} /> Réflexion</div>
|
||||
<div className="flex items-center gap-1.5 text-[10px] font-black text-amber-600 mb-1.5 uppercase tracking-wide"><BrainCircuit size={12} /> {t('ai_panel.reflection')}</div>
|
||||
)}
|
||||
<div className="whitespace-pre-wrap leading-relaxed">{msg.text}</div>
|
||||
</div>
|
||||
@@ -80,7 +82,7 @@ const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertT
|
||||
{isGenerating && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-theme-panel p-3 rounded-2xl rounded-bl-none shadow-sm border border-theme-border flex items-center gap-2 text-xs text-theme-muted transition-colors duration-300">
|
||||
<RefreshCw size={14} className="animate-spin" /> L'IA travaille...
|
||||
<RefreshCw size={14} className="animate-spin" /> {t('ai_panel.ai_working')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -93,7 +95,7 @@ const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertT
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder={isLimitReached ? "Limite atteinte..." : "Votre message..."}
|
||||
placeholder={isLimitReached ? t('ai_panel.limit_reached') : t('ai_panel.your_message')}
|
||||
className="w-full pl-4 pr-12 py-3 bg-theme-bg text-theme-text border border-theme-border rounded-2xl text-sm focus:outline-none focus:border-indigo-500 transition-all disabled:opacity-50"
|
||||
disabled={isGenerating || isLimitReached}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user