```

services/frontend/src/widgets/DashboardLayout.tsx

@@ -1,8 +1,7 @@
 import { motion } from "framer-motion";
 import type { ReactNode } from "react";
-import { useMemo } from "react";
 import type { DashboardTab } from "../entities/ui/types";
-import type { VoiceStatus } from "../shared/api/client";
+import type { MessageRecord, VoiceStatus } from "../shared/api/client";
 import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
 import { useMascotSummary } from "../shared/hooks/useMascotSummary";
 import type { WsStatus } from "../shared/ws/socket";
@@ -16,7 +15,9 @@ interface DashboardLayoutProps {
   voiceStatus: VoiceStatus;
   onTabChange: (tab: DashboardTab) => void;
   children: ReactNode;
-  recentMessages?: any[];
+  recentMessages?: MessageRecord[];
+  guildId?: string;
+  channelId?: string;
 }
 
 export function DashboardLayout({
@@ -26,6 +27,8 @@ export function DashboardLayout({
   onTabChange,
   children,
   recentMessages = [],
+  guildId,
+  channelId,
 }: DashboardLayoutProps) {
   // Generate mascot summary from recent messages
   const mascotSummary = useMascotSummary({
@@ -42,6 +45,9 @@ export function DashboardLayout({
           activeTab={activeTab}
           onTabChange={onTabChange}
           mascotChatMessage={mascotSummary}
+          recentMessages={recentMessages}
+          guildId={guildId}
+          channelId={channelId}
         />
         <main className="flex min-w-0 flex-1 flex-col">
           <Header

services/frontend/src/widgets/Sidebar.tsx

@@ -2,7 +2,10 @@ import { motion } from "framer-motion";
 import { BarChart3, MessageSquare, Radio } from "lucide-react";
 import { useEffect, useState } from "react";
 import type { DashboardTab } from "../entities/ui/types";
+import type { MessageRecord } from "../shared/api/client";
+import { useMascotChat } from "../shared/hooks/useMascotChat";
 import { cn } from "../shared/lib/utils";
+import { MascotChatbot } from "./mascot/MascotChatbot";
 import { MascotImage } from "./mascot/MascotImage";
 
 const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
@@ -17,6 +20,9 @@ interface SidebarProps {
   onTabChange: (tab: DashboardTab) => void;
   collapsed?: boolean;
   mascotChatMessage?: string;
+  recentMessages?: MessageRecord[];
+  guildId?: string;
+  channelId?: string;
 }
 
 export function Sidebar({
@@ -24,8 +30,19 @@ export function Sidebar({
   onTabChange,
   collapsed = true,
   mascotChatMessage = "",
+  recentMessages = [],
+  guildId,
+  channelId,
 }: SidebarProps) {
   const [showChat, setShowChat] = useState(false);
+  const mascotChat = useMascotChat({
+    messageCount: recentMessages.length,
+    activeParticipants: new Set(recentMessages.map((message) => message.user_id)).size,
+    lastActivity: recentMessages.length > 0 ? "Active" : "Idle",
+    topicsDiscussed: ["Messages", "Moderation", "Analytics"],
+    guildId,
+    channelId,
+  });
 
   useEffect(() => {
     if (mascotChatMessage) {
@@ -35,7 +52,7 @@ export function Sidebar({
   return (
     <motion.nav
       className={cn(
-        "hidden shrink-0 flex-col border-r border-[#7EC8E3]/20 bg-white/70 backdrop-blur-md transition-all duration-300 md:flex",
+        "relative hidden shrink-0 flex-col overflow-visible border-r border-[#7EC8E3]/20 bg-white/70 backdrop-blur-md transition-all duration-300 md:flex",
         collapsed ? "w-16" : "w-64",
       )}
       layout
@@ -94,12 +111,26 @@ export function Sidebar({
       {/* Spacer pushes mascot to bottom */}
       <div className="flex-1" />
 
-      {/* Mascot PNG with chat bubble */}
-      <div className="flex justify-center pb-4">
-        <MascotImage
-          size="sm"
-          showChat={showChat && !collapsed}
-          chatMessage={mascotChatMessage}
+      {/* Mascot PNG with anchored chatbot */}
+      <div className="relative flex justify-center pb-4">
+        <button
+          type="button"
+          onClick={() => mascotChat.setIsOpen(!mascotChat.isOpen)}
+          className="rounded-2xl p-1 transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
+          title="Chat dengan mascot"
+        >
+          <MascotImage
+            size="sm"
+            showChat={showChat && !mascotChat.isOpen}
+            chatMessage={mascotChatMessage}
+          />
+        </button>
+        <MascotChatbot
+          isOpen={mascotChat.isOpen}
+          onClose={() => mascotChat.setIsOpen(false)}
+          onSendMessage={mascotChat.handleSendMessage}
+          mascotName="Discord Watcher"
+          className="absolute bottom-16 left-12 z-50"
         />
       </div>
     </motion.nav>

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

@@ -1,5 +1,5 @@
-import { motion, AnimatePresence } from "framer-motion";
-import { Send, X, MessageCircle, Minimize2, Maximize2 } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Maximize2, MessageCircle, Minimize2, Send, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../shared/lib/utils";
 
@@ -12,23 +12,21 @@ export interface ChatMessage {
 }
 
 interface MascotChatbotProps {
-  onOpen?: () => void;
   onClose?: () => void;
   isOpen?: boolean;
-  onSetIsOpen?: (isOpen: boolean) => void;
   onSendMessage?: (message: string) => Promise<string>;
   mascotName?: string;
   mascotAvatar?: string;
+  className?: string;
 }
 
 export function MascotChatbot({
-  onOpen,
   onClose,
   isOpen = false,
-  onSetIsOpen,
   onSendMessage,
   mascotName = "Mascot",
   mascotAvatar = "https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png",
+  className,
 }: MascotChatbotProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([
     {
@@ -51,7 +49,7 @@ export function MascotChatbot({
     scrollToBottom();
   }, [messages]);
 
-  const handleSendMessage = async (e: React.FormEvent) => {
+  const handleSendMessage = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
     if (!input.trim() || loading) return;
 
@@ -98,22 +96,7 @@ export function MascotChatbot({
     }
   };
 
-  if (!isOpen) {
-    return (
-      <motion.button
-        whileHover={{ scale: 1.1 }}
-        whileTap={{ scale: 0.95 }}
-        onClick={() => {
-          onSetIsOpen?.(true);
-          onOpen?.();
-        }}
-        className="fixed bottom-6 right-6 bg-gradient-to-br from-primary to-primary/80 text-white rounded-full p-4 shadow-lg hover:shadow-xl transition-all"
-        title="Buka chat mascot"
-      >
-        <MessageCircle className="h-6 w-6" />
-      </motion.button>
-    );
-  }
+  if (!isOpen) return null;
 
   return (
     <AnimatePresence>
@@ -122,8 +105,9 @@ export function MascotChatbot({
         animate={{ opacity: 1, y: 0, scale: 1 }}
         exit={{ opacity: 0, y: 20, scale: 0.95 }}
         className={cn(
-          "fixed bottom-6 right-6 w-96 bg-white rounded-2xl shadow-2xl border border-primary/10 overflow-hidden flex flex-col",
-          isMinimized ? "h-16" : "h-[600px]"
+          "w-96 bg-white rounded-2xl shadow-2xl border border-primary/10 overflow-hidden flex flex-col",
+          isMinimized ? "h-16" : "h-[520px]",
+          className,
         )}
       >
         {/* Header */}