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
@@ -63,7 +63,7 @@ export function ChannelCultureGlossary({
|
||||
placeholder="Filter channels or culture topics..."
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none"
|
||||
className="w-full rounded-[6px] border border-hairline bg-surface-2 py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -80,9 +80,9 @@ export function ChannelCultureGlossary({
|
||||
})),
|
||||
)
|
||||
}
|
||||
className="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink"
|
||||
className="inline-flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
|
||||
>
|
||||
<Download className="size-3.5 text-[#7170ff]" />
|
||||
<Download className="size-3.5 text-signal" />
|
||||
EXPORT_CSV
|
||||
</button>
|
||||
)}
|
||||
@@ -116,13 +116,13 @@ export function ChannelCultureGlossary({
|
||||
return (
|
||||
<div
|
||||
key={c.channel_id}
|
||||
className="channel-node-card group relative flex flex-col justify-between overflow-hidden rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] hover:shadow-lg"
|
||||
className="channel-node-card hud-card group relative flex flex-col justify-between overflow-hidden p-4"
|
||||
>
|
||||
<div>
|
||||
{/* Channel Card Header */}
|
||||
<div className="flex items-center justify-between gap-2 border-b border-white/[0.05] pb-2.5">
|
||||
<div className="flex items-center justify-between gap-2 border-b border-hairline pb-2.5">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="flex size-6 items-center justify-center rounded bg-white/[0.04] text-[#7170ff]">
|
||||
<span className="flex size-6 items-center justify-center rounded bg-surface-2 text-signal">
|
||||
<Hash className="size-3.5" />
|
||||
</span>
|
||||
<span className="truncate font-mono text-xs font-semibold text-ink">
|
||||
@@ -152,10 +152,10 @@ export function ChannelCultureGlossary({
|
||||
</div>
|
||||
|
||||
{/* Signal Strength Bar & Timestamp */}
|
||||
<div className="mt-4 pt-3 border-t border-white/[0.04]">
|
||||
<div className="mt-4 pt-3 border-t border-hairline">
|
||||
<div className="flex items-center justify-between font-mono text-[10px] text-ink-faint mb-1.5">
|
||||
<span className="flex items-center gap-1">
|
||||
<Activity className="size-3 text-[#7170ff]" />
|
||||
<Activity className="size-3 text-signal" />
|
||||
INTEL RATIO
|
||||
</span>
|
||||
<span>
|
||||
@@ -164,9 +164,9 @@ export function ChannelCultureGlossary({
|
||||
: "NEVER"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1 w-full overflow-hidden rounded-full bg-white/[0.06]">
|
||||
<div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-2">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff] transition-all duration-500"
|
||||
className="h-full rounded-full bg-signal transition-all duration-500"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -27,14 +27,14 @@ function actionIcon(type: string) {
|
||||
switch (type) {
|
||||
case "ban_user":
|
||||
case "kick_user":
|
||||
return <UserX className="size-3.5 text-[#f43f5e]" />;
|
||||
return <UserX className="size-3.5 text-vermilion" />;
|
||||
case "timeout_user":
|
||||
return <VolumeX className="size-3.5 text-[#f59e0b]" />;
|
||||
return <VolumeX className="size-3.5 text-amber" />;
|
||||
case "delete_message":
|
||||
case "warn_user":
|
||||
return <ShieldAlert className="size-3.5 text-[#7170ff]" />;
|
||||
return <ShieldAlert className="size-3.5 text-signal" />;
|
||||
default:
|
||||
return <CheckCircle2 className="size-3.5 text-[#10b981]" />;
|
||||
return <CheckCircle2 className="size-3.5 text-success" />;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,11 +90,11 @@ export function LiveModerationFeed({
|
||||
|
||||
return (
|
||||
<div className="flex max-h-[460px] flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] pb-3">
|
||||
<div className="flex items-center justify-between border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="relative flex size-2">
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-[#10b981] opacity-75" />
|
||||
<span className="relative inline-flex size-2 rounded-full bg-[#10b981]" />
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-success opacity-75" />
|
||||
<span className="relative inline-flex size-2 rounded-full bg-success" />
|
||||
</span>
|
||||
<span className="font-mono text-xs font-medium text-ink">
|
||||
Live Stream Audit Log
|
||||
@@ -116,9 +116,9 @@ export function LiveModerationFeed({
|
||||
return (
|
||||
<div
|
||||
key={a.id}
|
||||
className="mod-feed-item flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
|
||||
className="mod-feed-item hud-card flex items-start gap-3 p-3 transition-all"
|
||||
>
|
||||
<span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-white/[0.08] bg-white/[0.03]">
|
||||
<span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-hairline bg-surface-2">
|
||||
{actionIcon(a.action_type)}
|
||||
</span>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<div className="glossary-entry overflow-hidden rounded-[6px] border border-white/[0.06] bg-white/[0.02] transition-all hover:border-white/[0.12] hover:bg-white/[0.04]">
|
||||
<div className="glossary-entry hud-card overflow-hidden transition-all">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
@@ -42,7 +42,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
|
||||
style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
<div className="border-t border-white/[0.04] bg-black/20 px-3.5 py-2.5 text-xs">
|
||||
<div className="border-t border-hairline bg-surface-2 px-3.5 py-2.5 text-xs">
|
||||
<p className="font-sans text-ink-soft leading-relaxed">
|
||||
{t.definition}
|
||||
</p>
|
||||
@@ -51,7 +51,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
|
||||
href={t.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-[#7170ff] hover:underline"
|
||||
className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-signal hover:underline"
|
||||
>
|
||||
<Globe className="size-3" />
|
||||
{t.source_url}
|
||||
@@ -86,16 +86,16 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
|
||||
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
|
||||
Slang & Term Glossary · Knowledge Base
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
|
||||
<span>INDEXED:</span>
|
||||
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
|
||||
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
|
||||
{terms.length} TERMS_RECORDED
|
||||
</span>
|
||||
</div>
|
||||
@@ -110,7 +110,7 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
|
||||
placeholder="Search slang term or definition keywords..."
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none"
|
||||
className="w-full rounded-[6px] border border-hairline bg-surface-2 py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
{terms.length > 0 && (
|
||||
@@ -128,9 +128,9 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
|
||||
})),
|
||||
)
|
||||
}
|
||||
className="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink"
|
||||
className="inline-flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
|
||||
>
|
||||
<Download className="size-3.5 text-[#7170ff]" />
|
||||
<Download className="size-3.5 text-signal" />
|
||||
EXPORT_CSV
|
||||
</button>
|
||||
)}
|
||||
@@ -141,7 +141,7 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
|
||||
eyebrow="knowledge directory"
|
||||
title="Slang & Definition Index"
|
||||
action={
|
||||
<span className="mono text-xs text-[#8a8f98]">
|
||||
<span className="mono text-xs text-ink-muted">
|
||||
{filtered.length} of {terms.length} terms
|
||||
</span>
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -16,19 +16,19 @@ export function Badge({
|
||||
...props
|
||||
}: BadgeProps) {
|
||||
const tones = {
|
||||
neutral: "bg-white/[0.04] text-[#d0d6e0] border-white/[0.08]",
|
||||
signal: "bg-[#7170ff]/10 text-[#7170ff] border-[#7170ff]/25",
|
||||
success: "bg-[#10b981]/10 text-[#10b981] border-[#10b981]/25",
|
||||
amber: "bg-[#f59e0b]/10 text-[#f59e0b] border-[#f59e0b]/25",
|
||||
vermilion: "bg-[#f43f5e]/10 text-[#f43f5e] border-[#f43f5e]/25",
|
||||
neutral: "bg-surface-2 text-ink-soft border-hairline",
|
||||
signal: "bg-signal/15 text-signal border-signal/30",
|
||||
success: "bg-success/15 text-success border-success/30",
|
||||
amber: "bg-amber/15 text-amber border-amber/30",
|
||||
vermilion: "bg-vermilion/15 text-vermilion border-vermilion/30",
|
||||
};
|
||||
|
||||
const dots = {
|
||||
neutral: "bg-[#8a8f98]",
|
||||
signal: "bg-[#7170ff]",
|
||||
success: "bg-[#10b981]",
|
||||
amber: "bg-[#f59e0b]",
|
||||
vermilion: "bg-[#f43f5e]",
|
||||
neutral: "bg-ink-muted",
|
||||
signal: "bg-signal",
|
||||
success: "bg-success",
|
||||
amber: "bg-amber",
|
||||
vermilion: "bg-vermilion",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
|
||||
@@ -11,21 +11,20 @@ export const buttonVariants = ({
|
||||
className?: string;
|
||||
}) => {
|
||||
const base =
|
||||
"inline-flex items-center justify-center font-sans font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7170ff] disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
|
||||
"inline-flex items-center justify-center font-sans font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-signal disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
|
||||
|
||||
const variants = {
|
||||
primary:
|
||||
"bg-[#5e6ad2] text-white hover:bg-[#7170ff] shadow-sm active:scale-[0.98]",
|
||||
"bg-signal text-white hover:opacity-90 shadow-xs active:scale-[0.98]",
|
||||
ghost:
|
||||
"bg-white/[0.03] text-[#d0d6e0] border border-white/[0.08] hover:bg-white/[0.06] hover:text-[#f7f8f8] hover:border-white/[0.14] active:scale-[0.98]",
|
||||
"bg-surface-2 text-ink-soft border border-hairline hover:bg-surface hover:text-ink hover:border-hairline-focus active:scale-[0.98]",
|
||||
outline:
|
||||
"bg-transparent text-[#d0d6e0] border border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8] active:scale-[0.98]",
|
||||
"bg-transparent text-ink-soft border border-hairline hover:bg-surface-2 hover:text-ink active:scale-[0.98]",
|
||||
secondary:
|
||||
"bg-white/[0.06] text-[#f7f8f8] hover:bg-white/[0.1] border border-white/[0.08] active:scale-[0.98]",
|
||||
subtle:
|
||||
"bg-transparent text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#f7f8f8]",
|
||||
"bg-surface text-ink hover:bg-surface-2 border border-hairline active:scale-[0.98]",
|
||||
subtle: "bg-transparent text-ink-muted hover:bg-surface-2 hover:text-ink",
|
||||
danger:
|
||||
"bg-[#f43f5e]/15 text-[#f43f5e] border border-[#f43f5e]/30 hover:bg-[#f43f5e]/25 active:scale-[0.98]",
|
||||
"bg-vermilion/15 text-vermilion border border-vermilion/30 hover:bg-vermilion/25 active:scale-[0.98]",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
|
||||
@@ -19,12 +19,8 @@ export function SectionHeader({
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
{eyebrow && (
|
||||
<div className="font-mono text-[10px] font-medium tracking-wider uppercase text-[#8a8f98] mb-0.5">
|
||||
{eyebrow}
|
||||
</div>
|
||||
)}
|
||||
<h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-[#f7f8f8]">
|
||||
{eyebrow && <div className="eyebrow mb-0.5">{eyebrow}</div>}
|
||||
<h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-ink">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -54,46 +50,44 @@ export function MetricTile({
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}) {
|
||||
const toneColor =
|
||||
const toneClass =
|
||||
tone === "vermilion"
|
||||
? "#f43f5e"
|
||||
? "text-vermilion"
|
||||
: tone === "amber"
|
||||
? "#f59e0b"
|
||||
? "text-amber"
|
||||
: tone === "signal"
|
||||
? "#7170ff"
|
||||
: "#f7f8f8";
|
||||
? "text-signal"
|
||||
: "text-ink";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative rounded-[8px] border border-white/[0.07] bg-white/[0.025] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04]",
|
||||
className,
|
||||
)}
|
||||
className={cn("hud-card p-4 transition-all duration-200", className)}
|
||||
style={style}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="font-mono text-[10px] font-medium uppercase tracking-wider text-[#8a8f98]">
|
||||
{label}
|
||||
</div>
|
||||
{icon && <span className="text-[#8a8f98]">{icon}</span>}
|
||||
<div className="eyebrow">{label}</div>
|
||||
{icon && <span className="text-ink-muted">{icon}</span>}
|
||||
</div>
|
||||
<div
|
||||
className="font-sans mt-1.5 text-[1.65rem] font-semibold leading-none tracking-tight"
|
||||
style={{ color: tone === "neutral" ? undefined : toneColor }}
|
||||
className={cn(
|
||||
"font-sans mt-2 text-[1.65rem] font-semibold leading-none tracking-tight",
|
||||
toneClass,
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
{hint && (
|
||||
<div className="font-mono mt-1 text-[10px] text-[#62666d]">{hint}</div>
|
||||
<div className="font-mono mt-1.5 text-[11px] text-ink-muted">
|
||||
{hint}
|
||||
</div>
|
||||
)}
|
||||
{spark && spark.length > 1 && (
|
||||
<div className="mt-2.5">
|
||||
<div className="h-[3px] w-full overflow-hidden rounded-full bg-white/[0.06]">
|
||||
<div className="h-[3px] w-full overflow-hidden rounded-full bg-surface-2">
|
||||
<div
|
||||
className="h-full rounded-full"
|
||||
className={cn("h-full rounded-full bg-current", toneClass)}
|
||||
style={{
|
||||
width: `${Math.min(100, (spark[spark.length - 1] / (Math.max(...spark) || 1)) * 100)}%`,
|
||||
background: toneColor,
|
||||
opacity: 0.8,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -30,17 +30,17 @@ function NavItem({
|
||||
className={cn(
|
||||
"nav-dock-item group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150",
|
||||
active
|
||||
? "is-active bg-white/[0.08] text-[#f7f8f8] shadow-sm border border-white/[0.12]"
|
||||
: "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
|
||||
? "is-active bg-signal/15 text-signal font-semibold shadow-xs border border-signal/30"
|
||||
: "text-ink-muted hover:bg-surface-2 hover:text-ink",
|
||||
)}
|
||||
>
|
||||
<Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} />
|
||||
{/* Precision Micro-Indicator */}
|
||||
{active && (
|
||||
<span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-[#7170ff]" />
|
||||
<span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
|
||||
)}
|
||||
{/* Tooltip on hover */}
|
||||
<span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-white/[0.08] bg-[#0f1011] px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-[#f7f8f8] opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
|
||||
<span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
|
||||
{label}
|
||||
</span>
|
||||
</a>
|
||||
@@ -75,7 +75,7 @@ export function NavRail() {
|
||||
return (
|
||||
<nav
|
||||
ref={railRef}
|
||||
className="mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[54px] flex-col items-center gap-1 rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 py-3 shadow-xl backdrop-blur-md md:flex"
|
||||
className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[54px] flex-col items-center gap-1 py-3 md:flex"
|
||||
>
|
||||
<div className="flex flex-1 flex-col gap-1">
|
||||
{navItems.map((item) => (
|
||||
|
||||
@@ -54,7 +54,7 @@ export function TopBar() {
|
||||
onClick={() =>
|
||||
window.dispatchEvent(new Event("command-palette:open"))
|
||||
}
|
||||
className="hidden items-center gap-1.5 rounded-[11px] border border-hairline bg-white/5 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-signal/40 sm:flex"
|
||||
className="hidden items-center gap-1.5 rounded-[8px] border border-hairline bg-surface-2 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-hairline-focus sm:flex"
|
||||
>
|
||||
<span className="mono text-[0.65rem]">⌘K</span>
|
||||
</button>
|
||||
@@ -62,7 +62,7 @@ export function TopBar() {
|
||||
type="button"
|
||||
aria-label="Toggle theme"
|
||||
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
|
||||
className="flex size-9 items-center justify-center rounded-[11px] border border-hairline bg-white/5 text-ink-soft transition-colors hover:text-ink hover:border-signal/40"
|
||||
className="flex size-8.5 items-center justify-center rounded-[8px] border border-hairline bg-surface-2 text-ink-soft transition-colors hover:text-ink hover:border-hairline-focus"
|
||||
>
|
||||
{mounted && theme === "light" ? (
|
||||
<Moon className="size-4" />
|
||||
|
||||
@@ -141,7 +141,7 @@ export function RecordingAudioPlayer({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-[10px] border bg-white/[0.04] px-3 py-2.5 transition-colors",
|
||||
"rounded-[8px] border bg-surface-2 px-3 py-2.5 transition-colors",
|
||||
playing || buffering
|
||||
? "border-signal/40 shadow-[0_0_24px_-10px_var(--color-signal-glow)]"
|
||||
: "border-hairline",
|
||||
@@ -160,7 +160,7 @@ export function RecordingAudioPlayer({
|
||||
"flex size-9 shrink-0 items-center justify-center rounded-full border transition-all active:scale-95",
|
||||
playing || buffering
|
||||
? "border-signal/50 bg-signal/15 text-signal"
|
||||
: "border-hairline bg-white/5 text-ink-soft hover:border-signal/40 hover:text-ink",
|
||||
: "border-hairline bg-surface text-ink-soft hover:border-signal/40 hover:text-ink",
|
||||
)}
|
||||
>
|
||||
{buffering ? (
|
||||
@@ -195,7 +195,7 @@ export function RecordingAudioPlayer({
|
||||
}}
|
||||
className="group relative h-4 cursor-pointer"
|
||||
>
|
||||
<div className="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 overflow-hidden rounded-full bg-white/10">
|
||||
<div className="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 overflow-hidden rounded-full bg-surface">
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-full transition-[width]",
|
||||
|
||||
Reference in New Issue
Block a user