refactor: update UI components for consistency and improved styling
- Refactored ChannelCultureGlossary, LiveModerationFeed, TermGlossary, and Chatbot components to use new design tokens and styles. - Updated button, badge, and section components to align with the new design system. - Enhanced the visual hierarchy and accessibility of various UI elements. - Improved responsiveness and hover states across components. - Replaced hardcoded colors with design tokens for better maintainability.
This commit is contained in:
asepharyana
@@ -2,217 +2,259 @@
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { Bot, MessageSquare, Send, Trash2, X } from "lucide-react";
|
||||
import {
|
||||
Bot,
|
||||
Loader2,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Send,
|
||||
Sparkles,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Button, toast } from "@/components/primitives";
|
||||
import { MarkdownLite } from "@/components/shared";
|
||||
import { Button } from "@/components/primitives";
|
||||
import { useChatbotUserId } from "@/hooks/use-chatbot-user";
|
||||
import { chatbotApi } from "@/lib/api";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { formatRelativeTime } from "@/lib/format";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
interface Msg {
|
||||
interface ChatMessage {
|
||||
id: string;
|
||||
role: "user" | "bot";
|
||||
content: string;
|
||||
ts: number;
|
||||
}
|
||||
|
||||
function formatTime(ts: number): string {
|
||||
try {
|
||||
return new Date(ts).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
sender: "user" | "bot";
|
||||
text: string;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
export function Chatbot() {
|
||||
const userId = useChatbotUserId();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [msgs, setMsgs] = useState<Msg[]>([]);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const [sending, setSending] = useState(false);
|
||||
const userId = useChatbotUserId();
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!open || !panelRef.current) return;
|
||||
gsap.fromTo(
|
||||
panelRef.current,
|
||||
{ opacity: 0, y: 12, scale: 0.98 },
|
||||
{ opacity: 1, y: 0, scale: 1, duration: 0.22, ease: "power2.out" },
|
||||
);
|
||||
},
|
||||
{ dependencies: [open] },
|
||||
);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Load history on mount
|
||||
useEffect(() => {
|
||||
if (!open || !userId) return;
|
||||
chatbotApi
|
||||
.getHistory(userId)
|
||||
.getHistory(userId || undefined)
|
||||
.then((res) => {
|
||||
setMsgs(
|
||||
res.history.slice(-12).flatMap((h) => [
|
||||
if (res.history) {
|
||||
const loaded: ChatMessage[] = res.history.flatMap((h) => [
|
||||
{
|
||||
id: `${h.id}-u`,
|
||||
role: "user" as const,
|
||||
content: h.user_message,
|
||||
ts: Date.parse(h.created_at) || Date.now(),
|
||||
sender: "user",
|
||||
text: h.user_message,
|
||||
timestamp: new Date(h.created_at).getTime(),
|
||||
},
|
||||
{
|
||||
id: `${h.id}-b`,
|
||||
role: "bot" as const,
|
||||
content: h.bot_response,
|
||||
ts: Date.parse(h.created_at) || Date.now(),
|
||||
sender: "bot",
|
||||
text: h.bot_response,
|
||||
timestamp: new Date(h.created_at).getTime() + 100,
|
||||
},
|
||||
]),
|
||||
);
|
||||
]);
|
||||
setMessages(loaded);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [open, userId]);
|
||||
}, [userId]);
|
||||
|
||||
// Auto-scroll to bottom on new messages
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, []);
|
||||
|
||||
const send = async (text: string) => {
|
||||
if (!text.trim() || loading || !userId) return;
|
||||
setInput("");
|
||||
setMsgs((m) => [
|
||||
...m,
|
||||
{ id: `u-${Date.now()}`, role: "user", content: text, ts: Date.now() },
|
||||
]);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await chatbotApi.send(text, undefined, userId);
|
||||
setMsgs((m) => [
|
||||
...m,
|
||||
{
|
||||
id: `b-${Date.now()}`,
|
||||
role: "bot",
|
||||
content: res.response,
|
||||
ts: Date.parse(res.timestamp) || Date.now(),
|
||||
},
|
||||
]);
|
||||
} catch (e) {
|
||||
toast({ title: "Chat error", description: String(e), tone: "vermilion" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// GSAP animation for floating window
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!containerRef.current) return;
|
||||
if (open) {
|
||||
gsap.fromTo(
|
||||
containerRef.current,
|
||||
{ opacity: 0, scale: 0.95, y: 15 },
|
||||
{ opacity: 1, scale: 1, y: 0, duration: 0.25, ease: "power2.out" },
|
||||
);
|
||||
}
|
||||
},
|
||||
{ dependencies: [open], scope: containerRef },
|
||||
);
|
||||
|
||||
const handleSend = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const query = input.trim();
|
||||
if (!query || sending) return;
|
||||
|
||||
const userMsg: ChatMessage = {
|
||||
id: `u-${Date.now()}`,
|
||||
sender: "user",
|
||||
text: query,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, userMsg]);
|
||||
setInput("");
|
||||
setSending(true);
|
||||
|
||||
const clearAll = async () => {
|
||||
if (!userId) return;
|
||||
setMsgs([]);
|
||||
try {
|
||||
await chatbotApi.clearHistory(userId);
|
||||
const res = await chatbotApi.send(query, undefined, userId || "operator");
|
||||
const botMsg: ChatMessage = {
|
||||
id: `b-${Date.now()}`,
|
||||
sender: "bot",
|
||||
text: res.response || "No response received.",
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
setMessages((prev) => [...prev, botMsg]);
|
||||
} catch {
|
||||
/* best-effort */
|
||||
const errMsg: ChatMessage = {
|
||||
id: `err-${Date.now()}`,
|
||||
sender: "bot",
|
||||
text: "Signal telemetry fault. Failed to communicate with neural core.",
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
setMessages((prev) => [...prev, errMsg]);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open assistant"
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
className="fixed right-4 bottom-5 z-50 flex size-10 items-center justify-center rounded-full border border-white/[0.12] bg-[#0f1011] text-[#f7f8f8] shadow-2xl transition-all duration-150 hover:scale-105 hover:border-[#7170ff] hover:bg-[#191a1b]"
|
||||
>
|
||||
{open ? (
|
||||
<X className="size-4" />
|
||||
) : (
|
||||
<MessageSquare className="size-4 text-[#7170ff]" />
|
||||
)}
|
||||
</button>
|
||||
{/* Floating Tactical Launcher Button */}
|
||||
{!open && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open neural HUD assistant"
|
||||
onClick={() => setOpen(true)}
|
||||
className="fixed right-4 bottom-5 z-50 flex size-11 items-center justify-center rounded-full border border-signal/40 bg-surface text-signal shadow-[0_0_20px_var(--color-signal-glow)] transition-all duration-200 hover:scale-105 hover:border-signal hover:bg-signal hover:text-white"
|
||||
>
|
||||
<Sparkles className="size-5 animate-breathe" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Neural Assistant Dialog */}
|
||||
{open && (
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="fixed right-4 bottom-18 z-50 flex h-[min(65dvh,480px)] w-[min(92vw,350px)] flex-col rounded-[10px] border border-white/[0.08] bg-[#0f1011]/95 p-0 shadow-2xl backdrop-blur-xl"
|
||||
ref={containerRef}
|
||||
className={`glass fixed right-4 bottom-18 z-50 flex flex-col p-0 shadow-2xl transition-all duration-200 ${
|
||||
expanded
|
||||
? "h-[min(85dvh,680px)] w-[min(94vw,540px)]"
|
||||
: "h-[min(65dvh,480px)] w-[min(92vw,360px)]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] px-3.5 py-2.5">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-hairline px-3.5 py-2.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex size-6 items-center justify-center rounded-md bg-[#7170ff]/15 text-[#7170ff]">
|
||||
<span className="flex size-6 items-center justify-center rounded-[4px] bg-signal/15 text-signal">
|
||||
<Bot className="size-3.5" />
|
||||
</span>
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-[#f7f8f8]">
|
||||
Linear Assistant
|
||||
</div>
|
||||
<div className="font-mono text-[9px] text-[#62666d]">
|
||||
active context
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearAll}
|
||||
className="rounded-[5px] p-1 text-[#62666d] hover:bg-white/[0.05] hover:text-[#d0d6e0]"
|
||||
>
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-2.5 overflow-y-auto px-3.5 py-3">
|
||||
{msgs.length === 0 && !loading && (
|
||||
<div className="py-8 text-center text-xs text-[#62666d]">
|
||||
Ask anything about telemetry, moderation, or media.
|
||||
</div>
|
||||
)}
|
||||
{msgs.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className={cn(
|
||||
"flex flex-col text-xs",
|
||||
m.role === "user" ? "items-end" : "items-start",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"max-w-[85%] rounded-[6px] px-2.5 py-1.5",
|
||||
m.role === "user"
|
||||
? "bg-[#5e6ad2] text-white"
|
||||
: "border border-white/[0.06] bg-white/[0.03] text-[#d0d6e0]",
|
||||
)}
|
||||
>
|
||||
{m.role === "bot" ? (
|
||||
<MarkdownLite content={m.content} />
|
||||
) : (
|
||||
<span>{m.content}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="font-mono mt-0.5 text-[9px] text-[#62666d]">
|
||||
{formatTime(m.ts)}
|
||||
<span className="font-mono text-xs font-bold text-ink">
|
||||
Neural Core Assistant
|
||||
</span>
|
||||
<span className="ml-2 font-mono text-[10px] text-success">
|
||||
● ACTIVE
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
|
||||
>
|
||||
{expanded ? (
|
||||
<Minimize2 className="size-3.5" />
|
||||
) : (
|
||||
<Maximize2 className="size-3.5" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(false)}
|
||||
className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages Body */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="flex-1 space-y-3 overflow-y-auto p-3.5"
|
||||
>
|
||||
{messages.length === 0 ? (
|
||||
<div className="flex h-full flex-col items-center justify-center text-center font-mono text-xs text-ink-muted">
|
||||
<Sparkles className="mb-2 size-6 text-signal opacity-60" />
|
||||
<span>Neural Assistant ready.</span>
|
||||
<span className="text-[10px] text-ink-faint">
|
||||
Ask about telemetry, moderation policies, or channel activity.
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
messages.map((m) => {
|
||||
const isUser = m.sender === "user";
|
||||
return (
|
||||
<div
|
||||
key={m.id}
|
||||
className={`flex flex-col ${
|
||||
isUser ? "items-end" : "items-start"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[85%] rounded-[8px] p-2.5 text-xs leading-relaxed ${
|
||||
isUser
|
||||
? "bg-signal text-white"
|
||||
: "hud-card text-ink-soft"
|
||||
}`}
|
||||
>
|
||||
{m.text}
|
||||
</div>
|
||||
<span className="mt-1 font-mono text-[9px] text-ink-faint">
|
||||
{formatRelativeTime(m.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
{sending && (
|
||||
<div className="flex items-center gap-2 font-mono text-xs text-ink-muted">
|
||||
<Loader2 className="size-3.5 animate-spin text-signal" />
|
||||
<span>Processing vector inference...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Input Footer */}
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
send(input);
|
||||
}}
|
||||
className="flex items-center gap-1.5 border-t border-white/[0.06] p-2"
|
||||
onSubmit={handleSend}
|
||||
className="flex items-center gap-1.5 border-t border-hairline p-2"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Transmit instruction to core..."
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Ask command..."
|
||||
className="flex-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2.5 py-1.5 text-xs text-[#f7f8f8] placeholder:text-[#62666d] focus:border-[#7170ff] focus:outline-none"
|
||||
className="flex-1 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
|
||||
/>
|
||||
<Button type="submit" size="sm" variant="primary">
|
||||
<Send className="size-3" />
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
type="submit"
|
||||
disabled={!input.trim() || sending}
|
||||
className="px-2.5"
|
||||
>
|
||||
<Send className="size-3.5" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user