authentification nocodebackend ok

2026-02-08 16:12:25 +01:00
commit be5bd2b2bf
37 changed files with 9585 additions and 0 deletions
--- a/components/AIPanel.tsx
+++ b/components/AIPanel.tsx
@@ -0,0 +1,111 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Sparkles, Send, RefreshCw, BookOpen, Bot, ArrowLeft, BrainCircuit, Zap } from 'lucide-react';
+import { ChatMessage, UserUsage } from '../types';
+
+interface AIPanelProps {
+  chatHistory: ChatMessage[];
+  onSendMessage: (msg: string) => void;
+  onInsertText: (text: string) => void;
+  selectedText: string;
+  isGenerating: boolean;
+  usage?: UserUsage;
+}
+
+const AIPanel: React.FC<AIPanelProps> = ({ chatHistory, onSendMessage, onInsertText, selectedText, isGenerating, usage }) => {
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [chatHistory, isGenerating]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isGenerating) return;
+    onSendMessage(input);
+    setInput("");
+  };
+
+  const isLimitReached = usage ? usage.aiActionsCurrent >= usage.aiActionsLimit : false;
+
+  return (
+    <div className="flex flex-col h-full bg-white border-l border-slate-200 shadow-xl w-80 lg:w-96">
+      {/* Header with Usage Counter */}
+      <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>
+        </div>
+        {usage && (
+            <div className="bg-indigo-900/50 px-2 py-1 rounded text-[10px] font-black flex items-center gap-1">
+                <Zap size={10} fill="currentColor" /> {usage.aiActionsCurrent} / {usage.aiActionsLimit === 999999 ? '∞' : usage.aiActionsLimit}
+            </div>
+        )}
+      </div>
+
+      {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="italic truncate opacity-80">"{selectedText.substring(0, 60)}..."</div>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-slate-50">
+        {chatHistory.length === 0 && (
+          <div className="text-center text-slate-400 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>
+            {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.
+                </div>
+            )}
+          </div>
+        )}
+
+        {chatHistory.map((msg) => (
+          <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 ${msg.role === 'user' ? 'bg-indigo-600 text-white rounded-br-none' : 'bg-white text-slate-700 border border-slate-100 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="whitespace-pre-wrap leading-relaxed">{msg.text}</div>
+            </div>
+          </div>
+        ))}
+        
+        {isGenerating && (
+          <div className="flex justify-start">
+            <div className="bg-white p-3 rounded-2xl rounded-bl-none shadow-sm border border-slate-100 flex items-center gap-2 text-xs text-slate-500">
+              <RefreshCw size={14} className="animate-spin" /> L'IA travaille...
+            </div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="p-4 bg-white border-t border-slate-200">
+        <form onSubmit={handleSubmit} className="relative">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={isLimitReached ? "Limite atteinte..." : "Votre message..."}
+            className="w-full pl-4 pr-12 py-3 bg-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-shadow disabled:opacity-50"
+            disabled={isGenerating || isLimitReached}
+          />
+          <button 
+            type="submit"
+            disabled={!input.trim() || isGenerating || isLimitReached}
+            className="absolute right-1.5 top-1.5 p-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 disabled:opacity-50 transition-colors shadow-md"
+          >
+            <Send size={18} />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AIPanel;