From f303b04684ae9e397464b78470020bb4d6357fdd Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 3 Jun 2026 15:08:31 +0700
Subject: [PATCH] refactor(mascot): simplify chat visibility logic and add
 persistent chat mode

---
 services/frontend/src/widgets/Sidebar.tsx        | 16 ++++++----------
 .../frontend/src/widgets/mascot/MascotImage.tsx  |  6 +++++-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/services/frontend/src/widgets/Sidebar.tsx b/services/frontend/src/widgets/Sidebar.tsx
index 756bde8..b75a874 100644
--- a/services/frontend/src/widgets/Sidebar.tsx
+++ b/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}
-            chatMessage={mascotChatMessage}
+            showChat={!mascotChat.isOpen}
+            chatMessage={
+              mascotChatMessage ||
+              "Halo! Saya mascot mu. Klik aku kalau mau tanya soal obrolan atau moderasi ✨"
+            }
+            persistChat
           />
         </button>
         <MascotChatbot
diff --git a/services/frontend/src/widgets/mascot/MascotImage.tsx b/services/frontend/src/widgets/mascot/MascotImage.tsx
index ad966d8..cdd1aed 100644
--- a/services/frontend/src/widgets/mascot/MascotImage.tsx
+++ b/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">