fix(chatbot): FAB opens chat directly — remove extra toggle + UX polish
- 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
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user