MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(chatbot): FAB opens chat directly — remove extra toggle + UX polish

Browse Source 
- 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)
This commit is contained in:
asepharyana
2026-08-03 06:44:23 +07:00
parent d1c1f3e4a7
commit 9718940258
3 changed files with 50 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/components/chatbot/chat-panel.tsx
+36 -11
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { Eraser, Send } from "lucide-react"; import { Eraser, Send, Sparkles } from "lucide-react";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { useChatbot } from "./chatbot-context"; 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) { export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
const { messages, sendMessage, clearMessages, isTyping } = useChatbot(); const { messages, sendMessage, clearMessages, isTyping } = useChatbot();
const listRef = useRef<HTMLDivElement>(null); const listRef = useRef<HTMLDivElement>(null);
@@ -39,21 +46,37 @@ export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
input.value = ""; input.value = "";
}; };
const handleSuggestion = (text: string) => {
if (isTyping) return;
sendMessage(text);
};
return ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
{/* Chat messages */} {/* Chat messages */}
<div <div
ref={listRef} 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 ? ( {messages.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full gap-1 px-3 text-center"> <div className="flex flex-col justify-center h-full gap-3 px-3 text-center">
<p className="text-[10px] text-text-secondary/50"> <p className="text-[11px] text-text-secondary/50">
Halo! 👋 Aku tau soal server ini — pesan, flag, dan aktivitas. Halo! 👋 Aku tau soal server ini — pesan, flag, dan aktivitas.
</p> </p>
<p className="text-[10px] text-text-secondary/30"> <div className="flex flex-wrap justify-center gap-1.5">
Coba tanya: "Gimana suasana server hari ini?" {SUGGESTIONS.map((s) => (
</p> <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> </div>
) : ( ) : (
messages.map((msg, i) => ( messages.map((msg, i) => (
@@ -101,14 +124,15 @@ export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
{/* Input bar */} {/* Input bar */}
<form <form
onSubmit={handleSubmit} 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 <input
ref={inputRef} ref={inputRef}
type="text" 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" className="flex-1 bg-transparent text-[11px] text-text-primary placeholder-text-secondary/30 outline-none"
disabled={isTyping} disabled={isTyping}
autoComplete="off"
/> />
{messages.length > 0 && ( {messages.length > 0 && (
<button <button
@@ -124,11 +148,12 @@ export function ChatPanel({ inputRef: externalInputRef }: ChatPanelProps) {
)} )}
<button <button
type="submit" 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} disabled={isTyping}
aria-label="Kirim pesan" aria-label="Kirim pesan"
title="Kirim"
> >
<Send className="size-3 text-primary" /> <Send className="size-3.5 text-primary" />
</button> </button>
</form> </form>
</div> </div>
services/frontend/src/components/chatbot/chatbot-container.tsx
+14 -38
View File
@@ -1,12 +1,12 @@
"use client"; "use client";
import { Bot, MessageCircle, Minimize2, PanelLeft } from "lucide-react"; import { Bot, Minimize2 } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { ChatPanel } from "./chat-panel"; import { ChatPanel } from "./chat-panel";
import { useChatbot } from "./chatbot-context"; import { useChatbot } from "./chatbot-context";
export function ChatbotContainer() { export function ChatbotContainer() {
const { minimized, setMinimized, chatOpen, setChatOpen } = useChatbot(); const { minimized, setMinimized } = useChatbot();
const [position, setPosition] = useState({ x: 0, y: 0 }); const [position, setPosition] = useState({ x: 0, y: 0 });
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
const [dragStart, setDragStart] = useState({ x: 0, y: 0 }); const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
@@ -32,11 +32,11 @@ export function ChatbotContainer() {
// Focus input when chat opens // Focus input when chat opens
useEffect(() => { useEffect(() => {
if (chatOpen) { if (!minimized) {
const id = setTimeout(() => inputRef.current?.focus(), 150); const id = setTimeout(() => inputRef.current?.focus(), 150);
return () => clearTimeout(id); return () => clearTimeout(id);
} }
}, [chatOpen]); }, [minimized]);
return ( return (
// biome-ignore lint/a11y/noStaticElementInteractions: drag container — mouse-move gesture surface, not keyboard-interactive content // biome-ignore lint/a11y/noStaticElementInteractions: drag container — mouse-move gesture surface, not keyboard-interactive content
@@ -47,12 +47,11 @@ export function ChatbotContainer() {
onMouseUp={handleMouseUp} onMouseUp={handleMouseUp}
onMouseLeave={handleMouseUp} onMouseLeave={handleMouseUp}
> >
{/* Main chatbot bubble */} {/* Main chatbot bubble — minimized FAB opens the full chat directly */}
<div <div
className={`glass-intense rounded-2xl overflow-hidden transition-all duration-200 ${ 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 ? ( {minimized ? (
<button <button
@@ -60,16 +59,17 @@ export function ChatbotContainer() {
onClick={() => setMinimized(false)} onClick={() => setMinimized(false)}
className="w-full h-full flex items-center justify-center" className="w-full h-full flex items-center justify-center"
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
aria-label="Open chatbot" aria-label="Buka chatbot"
title="Buka chatbot"
> >
<Bot className="size-6 text-primary" /> <Bot className="size-6 text-primary" />
</button> </button>
) : ( ) : (
<> <div className="flex flex-col h-full">
{/* Drag handle + controls */} {/* Drag handle + controls */}
{/* biome-ignore lint/a11y/noStaticElementInteractions: drag handle — mouse-only gesture, keyboard users use the buttons in this header */} {/* biome-ignore lint/a11y/noStaticElementInteractions: drag handle — mouse-only gesture, keyboard users use the buttons in this header */}
<div <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} onMouseDown={handleMouseDown}
> >
<span className="flex items-center gap-1.5 text-[10px] font-semibold text-text-secondary tracking-wide uppercase"> <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 Chatbot
</span> </span>
<div className="flex items-center gap-0.5"> <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 <button
type="button" type="button"
onClick={() => setMinimized(true)} onClick={() => setMinimized(true)}
className="size-6 flex items-center justify-center rounded hover:bg-glass-bg transition-colors" className="size-6 flex items-center justify-center rounded hover:bg-glass-bg transition-colors"
aria-label="Kecilkan chatbot" aria-label="Kecilkan chatbot"
title="Kecilkan chatbot"
> >
<Minimize2 className="size-3.5 text-text-secondary/60 hover:text-text-primary" /> <Minimize2 className="size-3.5 text-text-secondary/60 hover:text-text-primary" />
</button> </button>
</div> </div>
</div> </div>
{/* Chat panel (expandable) */} {/* Chat panel — always open when bubble is expanded */}
<div <div className="flex-1 min-h-0">
className={`transition-all duration-200 overflow-hidden ${
chatOpen ? "h-[300px]" : "h-0"
}`}
>
<ChatPanel inputRef={inputRef} /> <ChatPanel inputRef={inputRef} />
</div> </div>
</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> </div>
services/frontend/src/components/chatbot/chatbot-context.tsx
-7
View File
@@ -35,10 +35,6 @@ interface ChatbotContextValue {
minimized: boolean; minimized: boolean;
setMinimized: (v: boolean) => void; setMinimized: (v: boolean) => void;
/** Whether the chat panel inside the bubble is open */
chatOpen: boolean;
setChatOpen: (v: boolean) => void;
/** /**
* @deprecated Use `minimized` / `setMinimized` instead. * @deprecated Use `minimized` / `setMinimized` instead.
* Legacy toggle alias kept for compatibility. * Legacy toggle alias kept for compatibility.
@@ -63,7 +59,6 @@ const ChatbotContext = createContext<ChatbotContextValue | null>(null);
export function ChatbotProvider({ children }: { children: ReactNode }) { export function ChatbotProvider({ children }: { children: ReactNode }) {
const [expression, setExpression] = useState<ChatbotExpression>("idle"); const [expression, setExpression] = useState<ChatbotExpression>("idle");
const [minimized, setMinimized] = useState(true); const [minimized, setMinimized] = useState(true);
const [chatOpen, setChatOpen] = useState(false);
const [messages, setMessages] = useState<ChatbotMessage[]>([]); const [messages, setMessages] = useState<ChatbotMessage[]>([]);
const [isTyping, setIsTyping] = useState(false); const [isTyping, setIsTyping] = useState(false);
const [guildId, setGuildId] = useState(""); const [guildId, setGuildId] = useState("");
@@ -168,8 +163,6 @@ export function ChatbotProvider({ children }: { children: ReactNode }) {
setExpression, setExpression,
minimized, minimized,
setMinimized, setMinimized,
chatOpen,
setChatOpen,
isOpen, isOpen,
setOpen, setOpen,
toggle, toggle,