Enhance Agent Chat with typing effects, suggested questions, and premium visual feedback

frontend/components/AgentChat.tsx

@@ -32,8 +32,40 @@ export default function AgentChat({ tender, companyProfile }: Props) {
   const [selectedAgent, setSelectedAgent] = useState(agents[0]);
   const [selectedModel, setSelectedModel] = useState(models[0]);
   const [isLoading, setIsLoading] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const suggestedQuestions = [
+    "Summarize the main requirements",
+    "Identify legal risks for my company",
+    "How does my experience fit here?",
+    "Generate a technical summary",
+  ];
+
+  const simulateTyping = (text: string, agentName: string) => {
+    setIsTyping(true);
+    let currentText = "";
+    const words = text.split(" ");
+    let i = 0;
+
+    const interval = setInterval(() => {
+      if (i < words.length) {
+        currentText += (i === 0 ? "" : " ") + words[i];
+        setMessages(prev => {
+          const last = prev[prev.length - 1];
+          if (last && last.role === 'assistant' && last.agent === agentName) {
+            return [...prev.slice(0, -1), { ...last, content: currentText }];
+          }
+          return [...prev, { role: 'assistant', content: currentText, agent: agentName }];
+        });
+        i++;
+      } else {
+        clearInterval(interval);
+        setIsTyping(false);
+      }
+    }, 40);
+  };
+
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -65,12 +97,7 @@ export default function AgentChat({ tender, companyProfile }: Props) {
       if (!response.ok) throw new Error("Failed to chat");
 
       const data = await response.json();
-      const assistantMsg: Message = { 
-        role: "assistant", 
-        content: data.response,
-        agent: selectedAgent.name 
-      };
-      setMessages(prev => [...prev, assistantMsg]);
+      simulateTyping(data.response, selectedAgent.name);
     } catch (error) {
       console.error(error);
       setMessages(prev => [...prev, { role: "assistant", content: "⚠️ Error connecting to the agent. Please try again." }]);
@@ -79,14 +106,26 @@ export default function AgentChat({ tender, companyProfile }: Props) {
     }
   };
 
+  const handleSuggestedClick = (question: string) => {
+    setInput(question);
+  };
+
   return (
     <div className="flex flex-col h-[600px] glass-card rounded-[2rem] overflow-hidden border border-white/10 bg-slate-900/60 backdrop-blur-xl">
       {/* Chat Header */}
-      <div className="p-6 border-b border-white/5 flex items-center justify-between bg-white/5">
+      <div className="p-6 border-b border-white/5 flex items-center justify-between bg-white/[0.03]">
         <div className="flex items-center gap-4">
-          <div className="text-3xl">{selectedAgent.avatar}</div>
+          <div className={`text-3xl transition-all duration-500 relative ${isLoading || isTyping ? 'scale-110' : ''}`}>
+             {selectedAgent.avatar}
+             {(isLoading || isTyping) && (
+               <div className="absolute inset-0 bg-purple-500/20 blur-xl rounded-full animate-pulse" />
+             )}
+          </div>
           <div>
-            <h4 className="text-white font-bold">{selectedAgent.name}</h4>
+            <h4 className="text-white font-bold flex items-center gap-2">
+              {selectedAgent.name}
+              {(isLoading || isTyping) && <span className="h-1.5 w-1.5 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.8)]" />}
+            </h4>
             <p className="text-[10px] text-slate-500 uppercase tracking-widest font-black">Expert Consultant</p>
           </div>
         </div>
@@ -94,16 +133,17 @@ export default function AgentChat({ tender, companyProfile }: Props) {
           <select 
             value={selectedAgent.id}
             onChange={(e) => setSelectedAgent(agents.find(a => a.id === e.target.value) || agents[0])}
-            className="bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:ring-1 focus:ring-purple-500"
+            className="bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-[10px] uppercase font-black tracking-widest text-slate-400 hover:text-white transition-all cursor-pointer outline-none focus:border-purple-500/50"
           >
-            {agents.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
+            {agents.map(a => <option key={a.id} value={a.id} className="bg-slate-900">{a.name}</option>)}
           </select>
+          <div className="h-6 w-px bg-white/5" />
           <select 
             value={selectedModel}
             onChange={(e) => setSelectedModel(e.target.value)}
-            className="bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:ring-1 focus:ring-purple-500"
+            className="bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-[10px] uppercase font-black tracking-widest text-slate-400 hover:text-white transition-all cursor-pointer outline-none focus:border-purple-500/50"
           >
-            {models.map(m => <option key={m} value={m}>{m}</option>)}
+            {models.map(m => <option key={m} value={m} className="bg-slate-900">{m}</option>)}
           </select>
         </div>
       </div>
@@ -137,19 +177,36 @@ export default function AgentChat({ tender, companyProfile }: Props) {
             </div>
           </div>
         ))}
-        {isLoading && (
+        {isLoading && !isTyping && (
           <div className="flex justify-start">
             <div className="bg-white/5 rounded-2xl rounded-tl-none px-5 py-3 border border-white/10">
-              <div className="flex gap-1">
-                <div className="w-1.5 h-1.5 bg-slate-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-                <div className="w-1.5 h-1.5 bg-slate-500 rounded-full animate-bounce" style={{ animationDelay: '200ms' }} />
-                <div className="w-1.5 h-1.5 bg-slate-500 rounded-full animate-bounce" style={{ animationDelay: '400ms' }} />
+              <div className="flex gap-1.5">
+                <div className="w-1.5 h-1.5 bg-purple-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                <div className="w-1.5 h-1.5 bg-purple-500 rounded-full animate-bounce" style={{ animationDelay: '200ms' }} />
+                <div className="w-1.5 h-1.5 bg-purple-500 rounded-full animate-bounce" style={{ animationDelay: '400ms' }} />
               </div>
             </div>
           </div>
         )}
       </div>
 
+      {/* Suggested Questions */}
+      {messages.length < 3 && !isLoading && !isTyping && (
+        <div className="px-6 pb-4 bg-transparent overflow-x-auto no-scrollbar">
+          <div className="flex gap-2 whitespace-nowrap">
+            {suggestedQuestions.map((q, i) => (
+              <button 
+                key={i}
+                onClick={() => handleSuggestedClick(q)}
+                className="bg-white/5 border border-white/10 rounded-full px-4 py-2 text-[10px] font-bold text-slate-400 hover:text-white hover:bg-white/10 hover:border-purple-500/50 transition-all active:scale-95"
+              >
+                {q}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Input Area */}
       <div className="p-6 bg-white/5 border-t border-white/5">
         <div className="flex gap-3">