From 9718940258dcf16b8955ce369a1a996153b96ecc Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Mon, 3 Aug 2026 06:44:23 +0700
Subject: [PATCH] =?UTF-8?q?fix(chatbot):=20FAB=20opens=20chat=20directly?=
 =?UTF-8?q?=20=E2=80=94=20remove=20extra=20toggle=20+=20UX=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- chatbot-container: remove chatOpen layer — the minimized bubble now
  expands straight into the chat panel (single click, no extra button)
- Remove the redundant 'Tanya soal server...' quick-prompt button and
  the PanelLeft collapse toggle (one less state to fight)
- Bubble fixed h-[460px], chat panel flex-fills remaining space
- chat-panel: suggestion chips on empty state (suasana server, channel
  paling ramai, total pesan, pesan bermasalah) so first-time users can
  start with a single click
- Input: roomier padding, more descriptive placeholder, bigger send
  button, autoComplete off
- Drop chatOpen/setChatOpen from context (dead state)
---
 .../src/components/chatbot/chat-panel.tsx     | 47 +++++++++++++----
 .../components/chatbot/chatbot-container.tsx  | 52 +++++--------------
 .../components/chatbot/chatbot-context.tsx    |  7 ---
 3 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/services/frontend/src/components/chatbot/chat-panel.tsx b/services/frontend/src/components/chatbot/chat-panel.tsx
index 6006d87..272b411 100644
--- a/services/frontend/src/components/chatbot/chat-panel.tsx
+++ b/services/frontend/src/components/chatbot/chat-panel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Eraser, Send } from "lucide-react";
+import { Eraser, Send, Sparkles } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { useChatbot } from "./chatbot-context";
 
@@ -17,6 +17,13 @@ function formatTime(ts: string): string {
   });
 }
 
+const SUGGESTIONS = [
+  "Gimana suasana server hari ini?",
+  "Channel mana yang paling ramai?",
+  "Total pesan di server?",
+  "Ada pesan bermasalah?",
+];
+
 export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
   const { messages, sendMessage, clearMessages, isTyping } = useChatbot();
   const listRef = useRef<HTMLDivElement>(null);
@@ -39,21 +46,37 @@ export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
     input.value = "";
   };
 
+  const handleSuggestion = (text: string) => {
+    if (isTyping) return;
+    sendMessage(text);
+  };
+
   return (
     <div className="flex flex-col h-full">
       {/* Chat messages */}
       <div
         ref={listRef}
-        className="flex-1 overflow-y-auto px-2 py-1.5 space-y-1.5"
+        className="flex-1 overflow-y-auto px-2 py-2 space-y-1.5"
       >
         {messages.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full gap-1 px-3 text-center">
-            <p className="text-[10px] text-text-secondary/50">
+          <div className="flex flex-col justify-center h-full gap-3 px-3 text-center">
+            <p className="text-[11px] text-text-secondary/50">
               Halo! 👋 Aku tau soal server ini — pesan, flag, dan aktivitas.
             </p>
-            <p className="text-[10px] text-text-secondary/30">
-              Coba tanya: "Gimana suasana server hari ini?"
-            </p>
+            <div className="flex flex-wrap justify-center gap-1.5">
+              {SUGGESTIONS.map((s) => (
+                <button
+                  key={s}
+                  type="button"
+                  onClick={() => handleSuggestion(s)}
+                  disabled={isTyping}
+                  className="flex items-center gap-1 rounded-full border border-glass-border px-2.5 py-1 text-[10px] text-text-secondary/70 transition-colors hover:bg-glass-bg hover:text-text-primary disabled:opacity-40"
+                >
+                  <Sparkles className="size-2.5 text-primary/60" />
+                  {s}
+                </button>
+              ))}
+            </div>
           </div>
         ) : (
           messages.map((msg, i) => (
@@ -101,14 +124,15 @@ export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
       {/* Input bar */}
       <form
         onSubmit={handleSubmit}
-        className="flex items-center gap-1.5 px-2 py-1.5 border-t border-glass-border shrink-0"
+        className="flex items-center gap-1.5 px-2 py-2 border-t border-glass-border shrink-0"
       >
         <input
           ref={inputRef}
           type="text"
-          placeholder="Tanya chatbot…"
+          placeholder="Tanya soal server, pesan, atau statistik…"
           className="flex-1 bg-transparent text-[11px] text-text-primary placeholder-text-secondary/30 outline-none"
           disabled={isTyping}
+          autoComplete="off"
         />
         {messages.length > 0 && (
           <button
@@ -124,11 +148,12 @@ export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
         )}
         <button
           type="submit"
-          className="size-6 flex items-center justify-center rounded bg-primary/15 hover:bg-primary/25 transition-colors disabled:opacity-40"
+          className="size-7 flex items-center justify-center rounded-lg bg-primary/15 hover:bg-primary/25 transition-colors disabled:opacity-40"
           disabled={isTyping}
           aria-label="Kirim pesan"
+          title="Kirim"
         >
-          <Send className="size-3 text-primary" />
+          <Send className="size-3.5 text-primary" />
         </button>
       </form>
     </div>
diff --git a/services/frontend/src/components/chatbot/chatbot-container.tsx b/services/frontend/src/components/chatbot/chatbot-container.tsx
index 4919a41..343d056 100644
--- a/services/frontend/src/components/chatbot/chatbot-container.tsx
+++ b/services/frontend/src/components/chatbot/chatbot-container.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { Bot, MessageCircle, Minimize2, PanelLeft } from "lucide-react";
+import { Bot, Minimize2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ChatPanel } from "./chat-panel";
 import { useChatbot } from "./chatbot-context";
 
 export function ChatbotContainer() {
-  const { minimized, setMinimized, chatOpen, setChatOpen } = useChatbot();
+  const { minimized, setMinimized } = useChatbot();
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [dragging, setDragging] = useState(false);
   const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
@@ -32,11 +32,11 @@ export function ChatbotContainer() {
 
   // Focus input when chat opens
   useEffect(() => {
-    if (chatOpen) {
+    if (!minimized) {
       const id = setTimeout(() => inputRef.current?.focus(), 150);
       return () => clearTimeout(id);
     }
-  }, [chatOpen]);
+  }, [minimized]);
 
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: drag container — mouse-move gesture surface, not keyboard-interactive content
@@ -47,12 +47,11 @@ export function ChatbotContainer() {
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp}
     >
-      {/* Main chatbot bubble */}
+      {/* Main chatbot bubble — minimized FAB opens the full chat directly */}
       <div
         className={`glass-intense rounded-2xl overflow-hidden transition-all duration-200 ${
-          minimized ? "w-14 h-14 cursor-pointer" : "w-[320px]"
+          minimized ? "w-14 h-14 cursor-pointer" : "w-[320px] h-[460px]"
         }`}
-        style={{ height: minimized ? 56 : 400 }}
       >
         {minimized ? (
           <button
@@ -60,16 +59,17 @@ export function ChatbotContainer() {
             onClick={() => setMinimized(false)}
             className="w-full h-full flex items-center justify-center"
             onMouseDown={handleMouseDown}
-            aria-label="Open chatbot"
+            aria-label="Buka chatbot"
+            title="Buka chatbot"
           >
             <Bot className="size-6 text-primary" />
           </button>
         ) : (
-          <>
+          <div className="flex flex-col h-full">
             {/* Drag handle + controls */}
             {/* biome-ignore lint/a11y/noStaticElementInteractions: drag handle — mouse-only gesture, keyboard users use the buttons in this header */}
             <div
-              className="flex items-center justify-between px-3 py-2 border-b border-glass-border cursor-grab active:cursor-grabbing"
+              className="flex items-center justify-between px-3 py-2 border-b border-glass-border cursor-grab active:cursor-grabbing shrink-0"
               onMouseDown={handleMouseDown}
             >
               <span className="flex items-center gap-1.5 text-[10px] font-semibold text-text-secondary tracking-wide uppercase">
@@ -77,47 +77,23 @@ export function ChatbotContainer() {
                 Chatbot
               </span>
               <div className="flex items-center gap-0.5">
-                <button
-                  type="button"
-                  onClick={() => setChatOpen(!chatOpen)}
-                  className="size-6 flex items-center justify-center rounded hover:bg-glass-bg transition-colors"
-                  aria-label={chatOpen ? "Sembunyikan chat" : "Buka chat"}
-                  title={chatOpen ? "Sembunyikan chat" : "Buka chat"}
-                >
-                  <PanelLeft className="size-3.5 text-text-secondary/60 hover:text-text-primary" />
-                </button>
                 <button
                   type="button"
                   onClick={() => setMinimized(true)}
                   className="size-6 flex items-center justify-center rounded hover:bg-glass-bg transition-colors"
                   aria-label="Kecilkan chatbot"
+                  title="Kecilkan chatbot"
                 >
                   <Minimize2 className="size-3.5 text-text-secondary/60 hover:text-text-primary" />
                 </button>
               </div>
             </div>
 
-            {/* Chat panel (expandable) */}
-            <div
-              className={`transition-all duration-200 overflow-hidden ${
-                chatOpen ? "h-[300px]" : "h-0"
-              }`}
-            >
+            {/* Chat panel — always open when bubble is expanded */}
+            <div className="flex-1 min-h-0">
               <ChatPanel inputRef={inputRef} />
             </div>
-
-            {/* Quick prompt row when chat is closed */}
-            {!chatOpen && (
-              <button
-                type="button"
-                onClick={() => setChatOpen(true)}
-                className="mx-3 mb-2 flex items-center gap-2 rounded-lg border border-glass-border px-2.5 py-1.5 text-[10px] text-text-secondary/60 transition-colors hover:bg-glass-bg hover:text-text-primary"
-              >
-                <MessageCircle className="size-3 shrink-0 text-primary/60" />
-                Tanya soal server, pesan, atau statistik…
-              </button>
-            )}
-          </>
+          </div>
         )}
       </div>
     </div>
diff --git a/services/frontend/src/components/chatbot/chatbot-context.tsx b/services/frontend/src/components/chatbot/chatbot-context.tsx
index 86398b5..986d1c7 100644
--- a/services/frontend/src/components/chatbot/chatbot-context.tsx
+++ b/services/frontend/src/components/chatbot/chatbot-context.tsx
@@ -35,10 +35,6 @@ interface ChatbotContextValue {
   minimized: boolean;
   setMinimized: (v: boolean) => void;
 
-  /** Whether the chat panel inside the bubble is open */
-  chatOpen: boolean;
-  setChatOpen: (v: boolean) => void;
-
   /**
    * @deprecated Use `minimized` / `setMinimized` instead.
    * Legacy toggle alias kept for compatibility.
@@ -63,7 +59,6 @@ const ChatbotContext = createContext<ChatbotContextValue | null>(null);
 export function ChatbotProvider({ children }: { children: ReactNode }) {
   const [expression, setExpression] = useState<ChatbotExpression>("idle");
   const [minimized, setMinimized] = useState(true);
-  const [chatOpen, setChatOpen] = useState(false);
   const [messages, setMessages] = useState<ChatbotMessage[]>([]);
   const [isTyping, setIsTyping] = useState(false);
   const [guildId, setGuildId] = useState("");
@@ -168,8 +163,6 @@ export function ChatbotProvider({ children }: { children: ReactNode }) {
         setExpression,
         minimized,
         setMinimized,
-        chatOpen,
-        setChatOpen,
         isOpen,
         setOpen,
         toggle,