refactor(mascot): simplify chat visibility logic and add persistent chat mode

services/frontend/src/widgets/Sidebar.tsx

@@ -1,6 +1,5 @@
 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";
@@ -34,7 +33,6 @@ export function Sidebar({
   guildId,
   channelId,
 }: SidebarProps) {
-  const [showChat, setShowChat] = useState(false);
   const mascotChat = useMascotChat({
     messageCount: recentMessages.length,
     activeParticipants: new Set(recentMessages.map((message) => message.user_id)).size,
@@ -43,12 +41,6 @@ export function Sidebar({
     guildId,
     channelId,
   });
-
-  useEffect(() => {
-    if (mascotChatMessage) {
-      setShowChat(true);
-    }
-  }, [mascotChatMessage]);
   return (
     <motion.nav
       className={cn(
@@ -121,8 +113,12 @@ export function Sidebar({
         >
           <MascotImage
             size="sm"
-            showChat={showChat && !mascotChat.isOpen}
+            showChat={!mascotChat.isOpen}
-            chatMessage={mascotChatMessage}
+            chatMessage={
+              mascotChatMessage ||
+              "Halo! Saya mascot mu. Klik aku kalau mau tanya soal obrolan atau moderasi ✨"
+            }
+            persistChat
           />
         </button>
         <MascotChatbot

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

@@ -13,6 +13,7 @@ interface MascotImageProps {
   className?: string;
   showChat?: boolean;
   chatMessage?: string;
+  persistChat?: boolean;
 }
 
 const sizeMap = {
@@ -32,6 +33,7 @@ export function MascotImage({
   className = "",
   showChat = false,
   chatMessage = "",
+  persistChat = false,
 }: MascotImageProps) {
   const sizeClass = sizeMap[size];
   const chatSizeClass = chatSizeMap[size];
@@ -40,10 +42,12 @@ export function MascotImage({
   useEffect(() => {
     if (showChat && chatMessage) {
       setIsVisible(true);
+      if (persistChat) return;
       const timer = setTimeout(() => setIsVisible(false), 8000); // Auto hide after 8s
       return () => clearTimeout(timer);
     }
-  }, [showChat, chatMessage]);
+    setIsVisible(false);
+  }, [showChat, chatMessage, persistChat]);
 
   return (
     <div className="relative inline-block">