From 329015dadd9edad07c24231222bb3958098e8aec Mon Sep 17 00:00:00 2001
From: "$@#il" <sahilsadekar249775@gmail.com>
Date: Tue, 4 Mar 2025 23:40:08 +0530
Subject: [PATCH] prod:added ui for ai reasoning and logs

---
 .../chatAssistance/ChaatInterface.jsx         |  90 ++++---
 .../chatAssistance/StreamingText.jsx          |  80 ++++++
 .../chatAssistance/TypingAnimation.jsx        |  23 ++
 src/components/chatAssistance/chat.css        | 218 ++++++++++++-----
 src/components/deployment/AIAnalysis.jsx      |  65 +++++
 src/components/deployment/LogTerminal.jsx     |  39 +++
 src/components/pages/DeploymentProgress.jsx   | 229 +++++++++---------
 7 files changed, 546 insertions(+), 198 deletions(-)
 create mode 100644 src/components/chatAssistance/StreamingText.jsx
 create mode 100644 src/components/chatAssistance/TypingAnimation.jsx
 create mode 100644 src/components/deployment/AIAnalysis.jsx
 create mode 100644 src/components/deployment/LogTerminal.jsx

diff --git a/src/components/chatAssistance/ChaatInterface.jsx b/src/components/chatAssistance/ChaatInterface.jsx
index 74c6350..2d78a3a 100644
--- a/src/components/chatAssistance/ChaatInterface.jsx
+++ b/src/components/chatAssistance/ChaatInterface.jsx
@@ -8,11 +8,13 @@ import { PaperPlaneIcon, Cross2Icon } from '@radix-ui/react-icons';
 import { cn } from '@/lib/utils';
 import spiderIcon from '../../assets/spider.png';
 import './chat.css';
+import { TypingAnimation } from './TypingAnimation';
+import { StreamingText } from './StreamingText';
 
 export const ChatInterface = ({ triggerAnimation }) => {
   // Add API base URL from environment variable
   const API_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000';
-  
+
   const [isOpen, setIsOpen] = useState(false);
   const [inputMessage, setInputMessage] = useState('');
   const [userId, setUserId] = useState(null);
@@ -55,76 +57,104 @@ export const ChatInterface = ({ triggerAnimation }) => {
     const newMessages = [...messages, { text: inputMessage, isBot: false }];
     setMessages(newMessages);
     setInputMessage('');
-
-    if (inputMessage.toLowerCase().includes('jump')) {
-      triggerAnimation('jump');
-    }
+    setBotThinking(true); // Show bot is thinking
 
     try {
+      // Show typing animation while waiting for response
+      setIsTyping(true);
       const response = await fetch(`${API_URL}/api/llm/chat`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ message: inputMessage, userId })
       });
-
       const data = await response.json();
       setMessages([...newMessages, { text: data.reply, isBot: true }]);
     } catch (error) {
       setMessages([...newMessages, { text: "Oops! Something went wrong. 😵", isBot: true }]);
+    } finally {
+      setIsTyping(false);
+      setBotThinking(false);
     }
-
-    setIsTyping(false);
   };
-
   return (
-    <div className="fixed bottom-6 right-6 z-50">
+    <div className="fixed bottom-0 right-0 z-50 sm:bottom-6 sm:right-6">
       {isOpen ? (
-        <Card className="w-[95vw] sm:w-[400px] shadow-2xl rounded-2xl overflow-hidden border border-red-500/20 bg-gradient-to-br from-slate-900/95 to-slate-950/95 backdrop-blur-xl">
-          <CardHeader className="p-4 border-b border-red-500/20 bg-gradient-to-r from-slate-900/90 via-red-950/30 to-slate-900/90">
+        <Card className="w-full h-[100vh] sm:h-auto sm:w-[400px] shadow-2xl rounded-none sm:rounded-2xl overflow-hidden border-0 sm:border border-red-500/20 bg-gradient-to-br from-slate-900/95 to-slate-950/95 backdrop-blur-xl">
+          <CardHeader className="p-3 sm:p-4 border-b border-red-500/20 bg-gradient-to-r from-slate-900/90 via-red-950/30 to-slate-900/90">
             <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-3">
-                <Avatar className="border-2 border-red-500/80 bg-slate-900/50 p-1 ring-2 ring-red-500/20 animate-pulse">
+              <div className="flex items-center space-x-2 sm:space-x-3">
+                <Avatar className={`w-8 h-8 sm:w-10 sm:h-10 border-2 border-red-500/80 bg-slate-900/50 p-1 ring-2 ring-red-500/20 ${botThinking ? 'animate-pulse' : ''}`}>
                   <AvatarImage src={spiderIcon} className="p-1" />
                   <AvatarFallback className="bg-red-600/80">SP</AvatarFallback>
                 </Avatar>
                 <div>
-                  <h3 className="font-bold bg-gradient-to-r from-red-400 to-red-600 bg-clip-text text-transparent">Spider-Assist</h3>
-                  <p className="text-xs text-red-500/80">{isTyping ? 'Weaving response...' : 'Ready to assist'}</p>
+                  <h3 className="text-sm sm:text-base font-bold bg-gradient-to-r from-red-400 to-red-600 bg-clip-text text-transparent">Spider-Assist</h3>
+                  <p className="text-[10px] sm:text-xs text-red-500/80">
+                    {isTyping ? 'Weaving response...' : botThinking ? 'Processing...' : 'Ready to assist'}
+                  </p>
                 </div>
               </div>
-              <Button variant="ghost" size="sm" className="text-red-400/50 hover:text-red-400 rounded-full hover:bg-red-500/10" onClick={() => setIsOpen(false)}>
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                className="text-red-400/50 hover:text-red-400 rounded-full hover:bg-red-500/10" 
+                onClick={() => setIsOpen(false)}
+              >
                 <Cross2Icon className="h-4 w-4" />
               </Button>
             </div>
           </CardHeader>
-
-          <CardContent className="p-0 h-[60vh] sm:h-[480px] bg-gradient-to-b from-slate-900/95 via-slate-950/95 to-slate-900/95">
-            <ScrollArea className="h-full p-4">
-              <div className="flex flex-col gap-4">
+    
+          <CardContent className="p-0 h-[calc(100vh-120px)] sm:h-[480px] bg-gradient-to-b from-slate-900/95 via-slate-950/95 to-slate-900/95">
+            <ScrollArea className="h-full p-3 sm:p-4">
+              <div className="flex flex-col gap-3 sm:gap-4">
                 {messages.map((msg, i) => (
                   <div key={i} className={cn("flex", msg.isBot ? 'justify-start' : 'justify-end')}>
-                    <div className={cn("max-w-[85%] p-3 rounded-2xl relative shadow-lg backdrop-blur-sm",
-                      msg.isBot ? 'bg-gradient-to-br from-slate-800/90 to-slate-900/90 text-red-100 border border-red-500/10' : 'bg-gradient-to-r from-red-600 to-red-500 text-white shadow-lg shadow-red-500/20')}>{msg.text}
+                    <div className={cn("max-w-[90%] sm:max-w-[85%] p-2.5 sm:p-3 rounded-2xl relative shadow-lg backdrop-blur-sm text-sm sm:text-base",
+                      msg.isBot ? 'bg-gradient-to-br from-slate-800/90 to-slate-900/90 text-red-100 border border-red-500/10' : 'bg-gradient-to-r from-red-600 to-red-500 text-white shadow-lg shadow-red-500/20')}>
+                      {msg.isBot ? (
+                        <StreamingText text={msg.text} />
+                      ) : (
+                        msg.text
+                      )}
                     </div>
                   </div>
                 ))}
+                {botThinking && (
+                  <div className="flex justify-start">
+                    <TypingAnimation />
+                  </div>
+                )}
                 <div ref={messagesEndRef} />
               </div>
             </ScrollArea>
           </CardContent>
-
-          <CardFooter className="p-4 border-t border-red-500/20 bg-gradient-to-r from-slate-900/90 via-red-950/30 to-slate-900/90">
+    
+          <CardFooter className="p-3 sm:p-4 border-t border-red-500/20 bg-gradient-to-r from-slate-900/90 via-red-950/30 to-slate-900/90">
             <form onSubmit={(e) => { e.preventDefault(); handleSend(); }} className="flex w-full gap-2">
-              <Input value={inputMessage} onChange={handleTyping} placeholder="Ask your friendly neighborhood Spider-Assist..." className="bg-slate-800/50 text-red-100 border-red-500/20 backdrop-blur-sm focus:border-red-500/50 focus-visible:ring-1 focus-visible:ring-red-500/50 rounded-xl h-11 placeholder:text-red-400/50" />
-              <Button type="submit" size="icon" className="bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 rounded-xl h-11 w-11 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-red-500/20" disabled={isTyping}>
-                <PaperPlaneIcon className="h-5 w-5" />
+              <Input 
+                value={inputMessage} 
+                onChange={handleTyping} 
+                placeholder="Ask Spider-Assist..." 
+                className="bg-slate-800/50 text-sm text-red-100 border-red-500/20 backdrop-blur-sm focus:border-red-500/50 focus-visible:ring-1 focus-visible:ring-red-500/50 rounded-xl h-10 sm:h-11 placeholder:text-red-400/50" 
+              />
+              <Button 
+                type="submit" 
+                size="icon" 
+                className="bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 rounded-xl h-10 w-10 sm:h-11 sm:w-11 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-red-500/20" 
+                disabled={isTyping}
+              >
+                <PaperPlaneIcon className="h-4 w-4 sm:h-5 sm:w-5" />
               </Button>
             </form>
           </CardFooter>
         </Card>
       ) : (
-        <Button onClick={() => setIsOpen(true)} className="chat-icon-button h-14 w-14 sm:h-16 sm:w-16 rounded-full bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 shadow-lg shadow-red-500/20 hover:shadow-red-500/30 transition-all duration-300 hover:scale-105">
-          <img src={spiderIcon} alt="Chat" className="h-8 w-8 sm:h-9 sm:w-9 invert opacity-95 hover:opacity-100 transition-all duration-300" />
+        <Button 
+          onClick={() => setIsOpen(true)} 
+          className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 chat-icon-button h-12 w-12 sm:h-16 sm:w-16 rounded-full bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 shadow-lg shadow-red-500/20 hover:shadow-red-500/30 transition-all duration-300 hover:scale-105"
+        >
+          <img src={spiderIcon} alt="Chat" className="h-7 w-7 sm:h-9 sm:w-9 invert opacity-95 hover:opacity-100 transition-all duration-300" />
         </Button>
       )}
     </div>
diff --git a/src/components/chatAssistance/StreamingText.jsx b/src/components/chatAssistance/StreamingText.jsx
new file mode 100644
index 0000000..476d91b
--- /dev/null
+++ b/src/components/chatAssistance/StreamingText.jsx
@@ -0,0 +1,80 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useState, useEffect } from "react";
+
+export const StreamingText = ({ text, onComplete }) => {
+  const [displayedText, setDisplayedText] = useState("");
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (currentIndex < text.length) {
+      const timer = setTimeout(() => {
+        setDisplayedText(prev => prev + text[currentIndex]);
+        setCurrentIndex(currentIndex + 1);
+      }, 50); // Slightly faster typing speed
+
+      return () => clearTimeout(timer);
+    } else {
+      onComplete?.();
+    }
+  }, [currentIndex, text]);
+
+  return (
+    <div className="relative">
+      <div className="absolute inset-0 bg-gradient-to-r from-purple-500/5 via-cyan-500/5 to-blue-500/5 rounded-lg blur-xl" />
+      <AnimatePresence mode="wait">
+        {displayedText.split(" ").map((word, idx) => (
+          <motion.span
+            key={idx}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="inline-block mr-1 relative"
+          >
+            <span className="relative">
+              {word}
+              <motion.span
+                className="absolute -bottom-0.5 left-0 h-[1.5px] bg-gradient-to-r from-cyan-400 via-blue-400 to-transparent"
+                initial={{ width: 0 }}
+                animate={{ width: "100%" }}
+                transition={{ duration: 0.4 }}
+              />
+              <motion.span
+                className="absolute -inset-1 bg-gradient-to-r from-cyan-500/20 to-blue-500/20 blur-sm rounded-lg"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: [0, 1, 0] }}
+                transition={{ duration: 1, delay: idx * 0.1 }}
+              />
+            </span>
+          </motion.span>
+        ))}
+      </AnimatePresence>
+      {currentIndex < text.length && (
+        <motion.span
+          className="inline-block w-1 h-4 bg-gradient-to-b from-cyan-400 to-blue-400 ml-0.5 rounded-full"
+          animate={{ 
+            opacity: [1, 0.5],
+            scale: [1, 1.1, 1]
+          }}
+          transition={{ 
+            duration: 0.6, 
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        />
+      )}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent animate-wave" />
+        <motion.div 
+          className="absolute inset-0 bg-gradient-to-b from-transparent via-blue-500/5 to-transparent"
+          animate={{
+            opacity: [0.3, 0.6, 0.3]
+          }}
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        />
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/chatAssistance/TypingAnimation.jsx b/src/components/chatAssistance/TypingAnimation.jsx
new file mode 100644
index 0000000..8f12912
--- /dev/null
+++ b/src/components/chatAssistance/TypingAnimation.jsx
@@ -0,0 +1,23 @@
+import { motion } from "framer-motion";
+
+export const TypingAnimation = () => {
+  return (
+    <div className="flex space-x-2 p-3 bg-gradient-to-br from-slate-800/90 to-slate-900/90 text-red-100 border border-red-500/10 rounded-2xl max-w-[85%]">
+      <motion.div
+        className="w-2 h-2 bg-red-400 rounded-full"
+        animate={{ y: [0, -5, 0] }}
+        transition={{ duration: 0.5, repeat: Infinity, repeatType: "reverse" }}
+      />
+      <motion.div
+        className="w-2 h-2 bg-red-400 rounded-full"
+        animate={{ y: [0, -5, 0] }}
+        transition={{ duration: 0.5, delay: 0.2, repeat: Infinity, repeatType: "reverse" }}
+      />
+      <motion.div
+        className="w-2 h-2 bg-red-400 rounded-full"
+        animate={{ y: [0, -5, 0] }}
+        transition={{ duration: 0.5, delay: 0.4, repeat: Infinity, repeatType: "reverse" }}
+      />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/chatAssistance/chat.css b/src/components/chatAssistance/chat.css
index 1881d36..bccbfcc 100644
--- a/src/components/chatAssistance/chat.css
+++ b/src/components/chatAssistance/chat.css
@@ -1,20 +1,37 @@
 /* Modern Chat Interface Styling */
 /* Chat Icon Animation */
 @keyframes float {
-  0%, 100% { 
+
+  0%,
+  100% {
     transform: translateY(0);
     box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
   }
-  50% { 
+
+  50% {
     transform: translateY(-8px);
     box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.2);
   }
 }
 
+@keyframes wave {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-wave {
+  animation: wave 2s linear infinite;
+}
+
 /* Chat Icon Glow */
 .chat-icon-button {
   background: linear-gradient(135deg, #2563eb, #1d4ed8);
-  box-shadow: 
+  box-shadow:
     0 0 20px 2px rgba(37, 99, 235, 0.3),
     0 0 0 2px rgba(37, 99, 235, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.1);
@@ -23,7 +40,7 @@
 
 .chat-icon-button:hover {
   background: linear-gradient(135deg, #3b82f6, #2563eb);
-  box-shadow: 
+  box-shadow:
     0 0 30px 4px rgba(37, 99, 235, 0.4),
     0 0 0 2px rgba(37, 99, 235, 0.2),
     inset 0 0 0 1px rgba(255, 255, 255, 0.2);
@@ -36,23 +53,40 @@
 
 /* Add this to your existing animations */
 @keyframes typing {
-  0%, 100% { transform: scale(0.8) translateY(0); }
-  50% { transform: scale(1.2) translateY(-2px); }
+
+  0%,
+  100% {
+    transform: scale(0.8) translateY(0);
+  }
+
+  50% {
+    transform: scale(1.2) translateY(-2px);
+  }
 }
+
 .pulse-border {
   animation: pulseBorder 2s infinite;
 }
 
 @keyframes pulseBorder {
-  0% { border-color: rgba(59, 130, 246, 0.1); }
-  50% { border-color: rgba(59, 130, 246, 0.3); }
-  100% { border-color: rgba(59, 130, 246, 0.1); }
+  0% {
+    border-color: rgba(59, 130, 246, 0.1);
+  }
+
+  50% {
+    border-color: rgba(59, 130, 246, 0.3);
+  }
+
+  100% {
+    border-color: rgba(59, 130, 246, 0.1);
+  }
 }
 
 .glass-morphism {
   background: rgba(15, 23, 42, 0.8);
   backdrop-filter: blur(12px);
 }
+
 .typing-dot {
   @apply h-2.5 w-2.5 bg-indigo-400 rounded-full;
   animation: typing 1.2s ease-in-out infinite;
@@ -70,16 +104,14 @@
 }
 
 .chat-message-bot {
-  @apply relative before:absolute before:-left-3 before:top-0 before:h-5 before:w-5 
-         before:rounded-bl-2xl before:bg-indigo-900/40;
+  @apply relative before:absolute before:-left-3 before:top-0 before:h-5 before:w-5 before:rounded-bl-2xl before:bg-indigo-900/40;
   backdrop-filter: blur(12px);
   box-shadow: 0 4px 15px -3px rgba(99, 102, 241, 0.1);
   border: 1px solid rgba(129, 140, 248, 0.1);
 }
 
 .chat-message-user {
-  @apply relative after:absolute after:-right-3 after:top-0 after:h-5 after:w-5 
-         after:rounded-br-2xl after:bg-gradient-to-br after:from-violet-500 after:to-purple-600;
+  @apply relative after:absolute after:-right-3 after:top-0 after:h-5 after:w-5 after:rounded-br-2xl after:bg-gradient-to-br after:from-violet-500 after:to-purple-600;
   backdrop-filter: blur(12px);
   box-shadow: 0 4px 15px -3px rgba(139, 92, 246, 0.15);
   border: 1px solid rgba(139, 92, 246, 0.1);
@@ -91,6 +123,7 @@
     opacity: 0;
     transform: translateY(20px) scale(0.95) rotate(-1deg);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0) scale(1) rotate(0);
@@ -106,7 +139,7 @@
   background: linear-gradient(165deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.85));
   backdrop-filter: blur(20px);
   border: 1px solid rgba(99, 102, 241, 0.1);
-  box-shadow: 
+  box-shadow:
     0 8px 32px -4px rgba(0, 0, 0, 0.3),
     inset 0 0 0 1px rgba(255, 255, 255, 0.05);
 }
@@ -128,8 +161,7 @@
 }
 
 .chat-message-bot {
-  @apply relative before:absolute before:-left-3 before:top-0 before:h-5 before:w-5 
-         before:rounded-bl-2xl before:bg-slate-800/80;
+  @apply relative before:absolute before:-left-3 before:top-0 before:h-5 before:w-5 before:rounded-bl-2xl before:bg-slate-800/80;
   backdrop-filter: blur(12px);
   background: linear-gradient(to right, rgba(51, 65, 85, 0.3), rgba(71, 85, 105, 0.2));
   box-shadow: 0 4px 15px -3px rgba(51, 65, 85, 0.2);
@@ -137,17 +169,24 @@
 }
 
 .chat-message-user {
-  @apply relative after:absolute after:-right-3 after:top-0 after:h-5 after:w-5 
-         after:rounded-br-2xl after:bg-gradient-to-br after:from-blue-600 after:to-indigo-700;
+  @apply relative after:absolute after:-right-3 after:top-0 after:h-5 after:w-5 after:rounded-br-2xl after:bg-gradient-to-br after:from-blue-600 after:to-indigo-700;
   backdrop-filter: blur(12px);
   background: linear-gradient(to right, rgba(37, 99, 235, 0.9), rgba(79, 70, 229, 0.9));
   box-shadow: 0 4px 15px -3px rgba(37, 99, 235, 0.2);
   border: 1px solid rgba(37, 99, 235, 0.2);
 }
+
 /* Enhanced animations */
 @keyframes float {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-10px) rotate(2deg); }
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+
+  50% {
+    transform: translateY(-10px) rotate(2deg);
+  }
 }
 
 .new-message-animation {
@@ -155,8 +194,15 @@
 }
 
 @keyframes glowPulse {
-  0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.1); }
-  50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.2); }
+
+  0%,
+  100% {
+    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
+  }
+
+  50% {
+    box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
+  }
 }
 
 .thinking-animation {
@@ -168,18 +214,21 @@
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(239, 68, 68, 0.2),
-    transparent
-  );
+  background: linear-gradient(90deg,
+      transparent,
+      rgba(239, 68, 68, 0.2),
+      transparent);
   animation: shimmer 1.5s infinite;
 }
 
 @keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 .typing-dot {
@@ -191,27 +240,52 @@
   opacity: 0.5;
 }
 
-.typing-dot:nth-child(2) { animation-delay: 0.2s; }
-.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+.typing-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
 
 @keyframes typingDot {
-  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
-  30% { transform: translateY(-4px); opacity: 1; }
+
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
 }
+
 .pulse-border {
   animation: pulseBorder 2s infinite;
 }
 
 @keyframes pulseBorder {
-  0% { border-color: rgba(59, 130, 246, 0.1); }
-  50% { border-color: rgba(59, 130, 246, 0.3); }
-  100% { border-color: rgba(59, 130, 246, 0.1); }
+  0% {
+    border-color: rgba(59, 130, 246, 0.1);
+  }
+
+  50% {
+    border-color: rgba(59, 130, 246, 0.3);
+  }
+
+  100% {
+    border-color: rgba(59, 130, 246, 0.1);
+  }
 }
 
 .glass-morphism {
   background: rgba(15, 23, 42, 0.8);
   backdrop-filter: blur(12px);
 }
+
 .typing-dot {
   @apply h-2.5 w-2.5 bg-indigo-400 rounded-full;
   animation: typing 1.2s ease-in-out infinite;
@@ -229,16 +303,14 @@
 }
 
 .chat-message-bot {
-  @apply relative before:absolute before:-left-3 before:top-0 before:h-5 before:w-5 
-         before:rounded-bl-2xl before:bg-indigo-900/40;
+  @apply relative before:absolute before:-left-3 before:top-0 before:h-5 before:w-5 before:rounded-bl-2xl before:bg-indigo-900/40;
   backdrop-filter: blur(12px);
   box-shadow: 0 4px 15px -3px rgba(99, 102, 241, 0.1);
   border: 1px solid rgba(129, 140, 248, 0.1);
 }
 
 .chat-message-user {
-  @apply relative after:absolute after:-right-3 after:top-0 after:h-5 after:w-5 
-         after:rounded-br-2xl after:bg-gradient-to-br after:from-violet-500 after:to-purple-600;
+  @apply relative after:absolute after:-right-3 after:top-0 after:h-5 after:w-5 after:rounded-br-2xl after:bg-gradient-to-br after:from-violet-500 after:to-purple-600;
   backdrop-filter: blur(12px);
   box-shadow: 0 4px 15px -3px rgba(139, 92, 246, 0.15);
   border: 1px solid rgba(139, 92, 246, 0.1);
@@ -246,8 +318,15 @@
 
 /* Enhanced animations */
 @keyframes float {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-10px) rotate(2deg); }
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+
+  50% {
+    transform: translateY(-10px) rotate(2deg);
+  }
 }
 
 .new-message-animation {
@@ -255,8 +334,15 @@
 }
 
 @keyframes glowPulse {
-  0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.1); }
-  50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.2); }
+
+  0%,
+  100% {
+    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
+  }
+
+  50% {
+    box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
+  }
 }
 
 .thinking-animation {
@@ -268,18 +354,21 @@
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(239, 68, 68, 0.2),
-    transparent
-  );
+  background: linear-gradient(90deg,
+      transparent,
+      rgba(239, 68, 68, 0.2),
+      transparent);
   animation: shimmer 1.5s infinite;
 }
 
 @keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 .typing-dot {
@@ -291,10 +380,25 @@
   opacity: 0.5;
 }
 
-.typing-dot:nth-child(2) { animation-delay: 0.2s; }
-.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+.typing-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
 
 @keyframes typingDot {
-  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
-  30% { transform: translateY(-4px); opacity: 1; }
+
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
 }
\ No newline at end of file
diff --git a/src/components/deployment/AIAnalysis.jsx b/src/components/deployment/AIAnalysis.jsx
new file mode 100644
index 0000000..1389ee0
--- /dev/null
+++ b/src/components/deployment/AIAnalysis.jsx
@@ -0,0 +1,65 @@
+import { motion } from "framer-motion";
+import { StreamingText } from "../chatAssistance/StreamingText";
+
+export const AIAnalysis = ({ logs }) => {
+  return (
+    <div className="rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 hover:border-blue-500/30 transition-all duration-500 p-6">
+      <div className="flex items-center gap-4 mb-6">
+        <div className="relative">
+          <motion.div
+            className="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500"
+            animate={{
+              scale: [1, 1.1, 1],
+              opacity: [0.5, 1, 0.5],
+            }}
+            transition={{ duration: 2, repeat: Infinity }}
+          />
+          <div className="absolute inset-0 backdrop-blur-sm rounded-full" />
+        </div>
+        <div>
+          <h3 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
+            AI Analysis
+          </h3>
+          <p className="text-sm text-blue-300/60">Real-time deployment insights</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div className="p-4 rounded-xl bg-slate-900/50 border border-blue-500/10">
+          <h4 className="text-sm font-medium text-blue-300/80 mb-2">Performance Metrics</h4>
+          <motion.div
+            className="h-2 rounded-full bg-gradient-to-r from-green-500 to-blue-500 mb-2"
+            initial={{ width: 0 }}
+            animate={{ width: "80%" }}
+            transition={{ duration: 1 }}
+          />
+          <p className="text-xs text-blue-300/60">Build optimization: 80%</p>
+        </div>
+        <div className="p-4 rounded-xl bg-slate-900/50 border border-blue-500/10">
+          <h4 className="text-sm font-medium text-blue-300/80 mb-2">Security Check</h4>
+          <motion.div
+            className="h-2 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 mb-2"
+            initial={{ width: 0 }}
+            animate={{ width: "95%" }}
+            transition={{ duration: 1 }}
+          />
+          <p className="text-xs text-blue-300/60">Vulnerability scan: 95% safe</p>
+        </div>
+      </div>
+
+      <div className="rounded-xl bg-slate-900/50 border border-blue-500/10 p-4">
+        <div className="flex items-center justify-between mb-4">
+          <h4 className="text-sm font-medium text-blue-300/80">AI Insights</h4>
+          <span className="px-2 py-1 rounded-full bg-blue-500/20 text-blue-400 text-xs">
+            Live Analysis
+          </span>
+        </div>
+        <div className="space-y-3">
+          <StreamingText text="Analyzing deployment patterns and optimizing resource allocation..." />
+          <div className="h-px bg-gradient-to-r from-transparent via-blue-500/20 to-transparent" />
+          <StreamingText text="Build process completed successfully. No critical issues detected." />
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/deployment/LogTerminal.jsx b/src/components/deployment/LogTerminal.jsx
new file mode 100644
index 0000000..de87b75
--- /dev/null
+++ b/src/components/deployment/LogTerminal.jsx
@@ -0,0 +1,39 @@
+import { motion } from "framer-motion";
+
+export const LogTerminal = ({ logs }) => {
+  return (
+    <div className="rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 hover:border-blue-500/30 transition-all duration-500 p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
+          Deployment Logs
+        </h3>
+        <div className="flex items-center gap-2">
+          <motion.div
+            className="w-2 h-2 rounded-full bg-green-500"
+            animate={{ opacity: [1, 0.5, 1] }}
+            transition={{ duration: 1, repeat: Infinity }}
+          />
+          <span className="text-xs text-green-400">LIVE</span>
+        </div>
+      </div>
+      
+      <div className="terminal-window h-[400px] overflow-y-auto rounded-xl bg-slate-900/50 p-4 font-mono">
+        {logs.map((log, index) => (
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3 }}
+            className={`py-2 px-4 rounded-lg mb-2 text-sm ${
+              index % 2 === 0
+                ? 'bg-blue-500/10 text-blue-200'
+                : 'bg-purple-500/10 text-purple-200'
+            }`}
+          >
+            {log}
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/pages/DeploymentProgress.jsx b/src/components/pages/DeploymentProgress.jsx
index 80dee6d..6374b83 100644
--- a/src/components/pages/DeploymentProgress.jsx
+++ b/src/components/pages/DeploymentProgress.jsx
@@ -2,9 +2,10 @@ import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { useNavigate, useParams, useLocation } from "react-router-dom";
 import "./DeploymentProgress.css";
-import NavBar from "../NavBar";
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";
 import axios from "axios";
+import { AIAnalysis } from "../deployment/AIAnalysis";
+import { LogTerminal } from "../deployment/LogTerminal";
 
 const DeploymentProgress = () => {
   const API_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000';
@@ -56,21 +57,21 @@ const DeploymentProgress = () => {
 
   useEffect(() => {
     let lastFetchedTimestamp = null;
-  
+
     const fetchLogs = async () => {
       try {
         const url = lastFetchedTimestamp
           ? `${API_URL}/getLogs/${id}?since=${lastFetchedTimestamp}`
           : `${API_URL}/getLogs/${id}`;
-  
+
         const response = await fetch(url);
         if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
-  
+
         const data = await response.json();
-  
+
         if (data.logs?.length) {
           lastFetchedTimestamp = data.logs[data.logs.length - 1].created_at; // Track last log timestamp
-  
+
           setLogs((prevLogs) => {
             const newLogs = data.logs.map(
               (log) =>
@@ -81,18 +82,18 @@ const DeploymentProgress = () => {
             return Array.from(new Set([...prevLogs, ...newLogs]));
           });
         }
-  
+
         setProgress(data.progress || progress);
         setDeploymentStats(data.stats || deploymentStats);
       } catch (error) {
         console.error("Error fetching logs:", error.message);
       }
     };
-  
+
     const interval = setInterval(fetchLogs, 2000);
     return () => clearInterval(interval);
   }, [id]);
-  
+
 
   const handleCancel = () => {
     setIsDeploying(false);
@@ -100,132 +101,138 @@ const DeploymentProgress = () => {
   };
   return (
     <div className="min-h-screen bg-gradient-to-b from-gray-900 to-black text-white relative overflow-hidden pt-20">
-        {/* Background Effects */}
-        <div className="absolute inset-0">
-            <div className="absolute inset-0 bg-grid-pattern opacity-[0.07]" />
-            <div className="absolute top-1/4 left-1/4 w-[40rem] h-[40rem] bg-gradient-to-r from-blue-500/10 to-cyan-500/10 rounded-full filter blur-3xl animate-orb-float" />
-            <div className="absolute bottom-1/4 right-1/4 w-[35rem] h-[35rem] bg-gradient-to-r from-indigo-500/10 to-blue-500/10 rounded-full filter blur-3xl animate-orb-float-delayed" />
+      {/* Background Effects */}
+      <div className="absolute inset-0">
+        <div className="absolute inset-0 bg-grid-pattern opacity-[0.07]" />
+        <div className="absolute top-1/4 left-1/4 w-[40rem] h-[40rem] bg-gradient-to-r from-blue-500/10 to-cyan-500/10 rounded-full filter blur-3xl animate-orb-float" />
+        <div className="absolute bottom-1/4 right-1/4 w-[35rem] h-[35rem] bg-gradient-to-r from-indigo-500/10 to-blue-500/10 rounded-full filter blur-3xl animate-orb-float-delayed" />
+      </div>
+
+      <div className="relative z-10 container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent mb-4">
+            Deployment Progress
+          </h2>
+          <p className="text-lg text-gray-400">Live deployment logs and real-time analytics</p>
         </div>
 
-        <div className="relative z-10 container mx-auto px-4">
-            <div className="text-center mb-12">
-                <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent mb-4">
-                    Deployment Progress
-                </h2>
-                <p className="text-lg text-gray-400">Live deployment logs and real-time analytics</p>
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-                {["Total Deployments", "Success Rate", "Failure Rate"].map((label, index) => (
-                    <div key={index} 
-                         className="p-6 rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+          {["Total Deployments", "Success Rate", "Failure Rate"].map((label, index) => (
+            <div key={index}
+              className="p-6 rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 
                                   hover:border-blue-500/30 transition-all duration-500">
-                        <h3 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 
+              <h3 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 
                                      bg-clip-text text-transparent mb-4">{label}</h3>
-                        <div className="h-[200px]">
-                            <ResponsiveContainer width="100%" height="100%">
-                                <PieChart>
-                                    <Pie
-                                        data={[
-                                            { name: "Success", value: deploymentStats.success },
-                                            { name: "Failure", value: deploymentStats.failure },
-                                        ]}
-                                        cx="50%"
-                                        cy="50%"
-                                        outerRadius={70}
-                                        dataKey="value"
-                                    >
-                                        {COLORS.map((color, idx) => (
-                                            <Cell key={idx} fill={color} />
-                                        ))}
-                                    </Pie>
-                                    <Tooltip contentStyle={{ background: 'rgba(15, 23, 42, 0.9)', border: 'none' }} />
-                                </PieChart>
-                            </ResponsiveContainer>
-                        </div>
-                    </div>
-                ))}
+              <div className="h-[200px]">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={[
+                        { name: "Success", value: deploymentStats.success },
+                        { name: "Failure", value: deploymentStats.failure },
+                      ]}
+                      cx="50%"
+                      cy="50%"
+                      outerRadius={70}
+                      dataKey="value"
+                    >
+                      {COLORS.map((color, idx) => (
+                        <Cell key={idx} fill={color} />
+                      ))}
+                    </Pie>
+                    <Tooltip contentStyle={{ background: 'rgba(15, 23, 42, 0.9)', border: 'none' }} />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
             </div>
+          ))}
+        </div>
 
-            <div className="mb-8">
-                <div className="rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 
+        <div className="mb-8">
+          <div className="rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 
                               hover:border-blue-500/30 transition-all duration-500 p-6">
-                    <div className="flex items-center justify-between mb-4">
-                        <h3 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 
                                      bg-clip-text text-transparent">Deployment Logs</h3>
-                        <span className="px-3 py-1 rounded-full bg-green-500/20 text-green-400 
+              <span className="px-3 py-1 rounded-full bg-green-500/20 text-green-400 
                                      border border-green-500/30 text-sm">LIVE</span>
-                    </div>
-                    <div className="terminal-window h-[400px] overflow-y-auto rounded-xl bg-slate-900/50 p-4">
-                        {logs.map((log, index) => (
-                            <div key={index} 
-                                 className={`py-2 px-4 rounded-lg mb-2 font-mono text-sm
-                                          ${index % 2 === 0 
-                                              ? 'bg-blue-500/10 text-blue-200' 
-                                              : 'bg-purple-500/10 text-purple-200'}`}>
-                                {log}
-                            </div>
-                        ))}
-                    </div>
-                </div>
             </div>
-
-            <div className="mb-8">
-                <div className="h-2 rounded-full bg-slate-800/50 overflow-hidden">
-                    <div className="h-full bg-gradient-to-r from-blue-500 to-cyan-500 transition-all duration-500"
-                         style={{ width: `${progress}%` }}></div>
+            <div className="terminal-window h-[400px] overflow-y-auto rounded-xl bg-slate-900/50 p-4">
+              {logs.map((log, index) => (
+                <div key={index}
+                  className={`py-2 px-4 rounded-lg mb-2 font-mono text-sm
+                                          ${index % 2 === 0
+                      ? 'bg-blue-500/10 text-blue-200'
+                      : 'bg-purple-500/10 text-purple-200'}`}>
+                  {log}
                 </div>
+              ))}
             </div>
+          </div>
+        </div>
+
+        <div className="mb-8">
+          <div className="h-2 rounded-full bg-slate-800/50 overflow-hidden">
+            <div className="h-full bg-gradient-to-r from-blue-500 to-cyan-500 transition-all duration-500"
+              style={{ width: `${progress}%` }}></div>
+          </div>
+        </div>
+
+        {/* //logs anf ai Analysis */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+          <LogTerminal logs={logs} />
+          <AIAnalysis logs={logs} />
+        </div>
 
-            <div className="flex flex-wrap gap-4 justify-center mb-12">
-                {isDeploying ? (
-                    <>
-                        <Button onClick={handleCancel}
-                                className="bg-red-500/20 text-red-400 hover:bg-red-500/30 border 
+        <div className="flex flex-wrap gap-4 justify-center mb-12">
+          {isDeploying ? (
+            <>
+              <Button onClick={handleCancel}
+                className="bg-red-500/20 text-red-400 hover:bg-red-500/30 border 
                                          border-red-500/30 transition-all duration-300">
-                            Cancel Deployment
-                        </Button>
-                        <Button onClick={() => navigate("/dashboard")}
-                                className="bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border 
+                Cancel Deployment
+              </Button>
+              <Button onClick={() => navigate("/dashboard")}
+                className="bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border 
                                          border-blue-500/30 transition-all duration-300">
-                            View Dashboard
-                        </Button>
-                    </>
-                ) : (
-                    <Button onClick={() => navigate("/")}
-                            className="bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border 
+                View Dashboard
+              </Button>
+            </>
+          ) : (
+            <Button onClick={() => navigate("/")}
+              className="bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border 
                                      border-blue-500/30 transition-all duration-300">
-                        Go Back Home
-                    </Button>
-                )}
-            </div>
+              Go Back Home
+            </Button>
+          )}
+        </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
-                {["/assects/images/photoShowcase.png", "/assects/images/showCase.png"].map((img, idx) => (
-                    <div key={idx} 
-                         className="rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+          {["/assects/images/photoShowcase.png", "/assects/images/showCase.png"].map((img, idx) => (
+            <div key={idx}
+              className="rounded-2xl backdrop-blur-xl bg-slate-800/30 border border-blue-500/10 
                                   hover:border-blue-500/30 transition-all duration-500 p-6 group">
-                        <img src={img} alt="Showcase" 
-                             className="w-full h-48 object-cover rounded-xl mb-4 group-hover:scale-[1.02] 
+              <img src={img} alt="Showcase"
+                className="w-full h-48 object-cover rounded-xl mb-4 group-hover:scale-[1.02] 
                                       transition-transform duration-500" />
-                        <h4 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 
+              <h4 className="text-xl font-semibold bg-gradient-to-r from-blue-400 to-cyan-400 
                                      bg-clip-text text-transparent mb-2">
-                            {idx === 0 ? "🚀 Try Our Cloud Services!" : "🔒 Secure Your Applications!"}
-                        </h4>
-                        <p className="text-gray-400 mb-4">
-                            {idx === 0
-                                ? "Experience seamless deployments. Sign up now for 20% off!"
-                                : "Ensure your applications stay secure. Learn more."}
-                        </p>
-                        <Button className="bg-gradient-to-r from-blue-600 to-blue-500 text-white 
+                {idx === 0 ? "🚀 Try Our Cloud Services!" : "🔒 Secure Your Applications!"}
+              </h4>
+              <p className="text-gray-400 mb-4">
+                {idx === 0
+                  ? "Experience seamless deployments. Sign up now for 20% off!"
+                  : "Ensure your applications stay secure. Learn more."}
+              </p>
+              <Button className="bg-gradient-to-r from-blue-600 to-blue-500 text-white 
                                        hover:from-blue-500 hover:to-blue-400 transform hover:scale-[1.02] 
                                        transition-all duration-300 shadow-lg shadow-blue-500/20">
-                            {idx === 0 ? "Sign Up" : "Learn More"}
-                        </Button>
-                    </div>
-                ))}
+                {idx === 0 ? "Sign Up" : "Learn More"}
+              </Button>
             </div>
+          ))}
         </div>
+      </div>
     </div>
   );
 };