feat(mascot): add AI-powered chat insights to sidebar mascot with useMascotSummary hook

services/frontend/src/widgets/mascot/MascotImage.tsx

@@ -1,11 +1,18 @@
+import { motion } from "framer-motion";
+import { MessageCircle } from "lucide-react";
+import { useState, useEffect } from "react";
+
 /**
  * MascotImage — Anime mascot PNG from GitHub CDN
  * Replaces ChibiMascot SVG component with external PNG asset
+ * Now includes optional floating chat bubble with AI insights
  */
 
 interface MascotImageProps {
   size?: "sm" | "md" | "lg";
   className?: string;
+  showChat?: boolean;
+  chatMessage?: string;
 }
 
 const sizeMap = {
@@ -14,15 +21,66 @@ const sizeMap = {
   lg: "w-48 h-auto",
 };
 
-export function MascotImage({ size = "md", className = "" }: MascotImageProps) {
+const chatSizeMap = {
+  sm: "max-w-xs",
+  md: "max-w-sm",
+  lg: "max-w-md",
+};
+
+export function MascotImage({
+  size = "md",
+  className = "",
+  showChat = false,
+  chatMessage = "",
+}: MascotImageProps) {
   const sizeClass = sizeMap[size];
+  const chatSizeClass = chatSizeMap[size];
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (showChat && chatMessage) {
+      setIsVisible(true);
+      const timer = setTimeout(() => setIsVisible(false), 8000); // Auto hide after 8s
+      return () => clearTimeout(timer);
+    }
+  }, [showChat, chatMessage]);
 
   return (
-    <img
-      src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png"
-      alt="Mascot"
-      className={`object-contain drop-shadow-md ${sizeClass} ${className}`}
-    />
+    <div className="relative inline-block">
+      <motion.img
+        src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png"
+        alt="Mascot"
+        className={`object-contain drop-shadow-md ${sizeClass} ${className}`}
+        whileHover={{ scale: 1.05 }}
+        transition={{ type: "spring", stiffness: 300, damping: 30 }}
+      />
+
+      {/* Floating Chat Bubble */}
+      {isVisible && chatMessage && (
+        <motion.div
+          initial={{ opacity: 0, y: 10, scale: 0.8 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 10, scale: 0.8 }}
+          transition={{ type: "spring", stiffness: 300, damping: 25 }}
+          className={`absolute -top-2 -right-2 ${chatSizeClass} pointer-events-none`}
+        >
+          <div className="relative">
+            {/* Chat bubble */}
+            <div className="bg-gradient-to-br from-primary/90 to-primary/80 text-white rounded-2xl px-4 py-2.5 shadow-lg backdrop-blur-sm border border-primary/50">
+              <div className="flex items-start gap-2">
+                <MessageCircle className="h-4 w-4 shrink-0 mt-0.5 text-white/80" />
+                <p className="text-xs leading-relaxed font-medium line-clamp-3">
+                  {chatMessage}
+                </p>
+              </div>
+
+              {/* Chat bubble tail */}
+              <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-primary/80 rounded-full opacity-70" />
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </div>
   );
 }