Refactor moderation and recordings views; enhance UI components and improve performance
- Cleaned up imports and removed unused hooks in ModerationView and RecordingsView. - Updated UI elements for better visual consistency and accessibility. - Improved performance by optimizing rendering logic and reducing unnecessary state updates. - Added filtering functionality in ChannelCultureGlossary and TermGlossary components. - Enhanced LiveModerationFeed with GSAP animations for smoother transitions. - Updated chatbot component for better user experience and responsiveness. - Refined NavRail component for cleaner code and improved navigation item rendering.
This commit is contained in:
asepharyana
@@ -8,6 +8,7 @@ import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { Avatar, Badge, GlassPanel, Input } from "@/components/primitives";
|
||||
import { EmptyState, SectionHeader, SkeletonRows } from "@/components/shared";
|
||||
import { useChannels, useMessageSearch, useTopReactors } from "@/hooks";
|
||||
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||
import { aiTone } from "@/lib/ai-status";
|
||||
import {
|
||||
formatDuration,
|
||||
@@ -29,6 +30,12 @@ export function AnalysisView() {
|
||||
const reactorsRef = useRef<HTMLDivElement>(null);
|
||||
const channelsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const resultsRef = useStaggerReveal<HTMLDivElement>(".search-result-card", {
|
||||
stagger: 0.03,
|
||||
y: 8,
|
||||
dependencies: [search.data?.length, query],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
ambient.set(
|
||||
query ? "amber" : "signal",
|
||||
@@ -109,90 +116,90 @@ export function AnalysisView() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex size-3 items-center justify-center">
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
|
||||
<span className="relative inline-flex size-2 rounded-full bg-signal" />
|
||||
</div>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||
ANALYSIS ENGINE · DEEP_SCAN
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] 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">
|
||||
Deep Scan · Semantic Search & Telemetry Analysis
|
||||
</h1>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||
<span className="text-ink-faint">MODE:</span>
|
||||
<span className="font-bold text-signal">
|
||||
{query.trim().length >= 2 ? "SEARCHING" : "IDLE"}
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
|
||||
<span>ENGINE:</span>
|
||||
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
|
||||
{query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GlassPanel glow className="relative overflow-hidden">
|
||||
<div className="scan-line absolute inset-x-0 top-0" />
|
||||
{/* Hero Query Stage */}
|
||||
<GlassPanel className="p-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<Sparkles className="size-5 text-signal" />
|
||||
<span className="flex size-8 items-center justify-center rounded-[6px] border border-white/[0.08] bg-[#7170ff]/10 text-[#7170ff]">
|
||||
<Sparkles className="size-4" />
|
||||
</span>
|
||||
<div>
|
||||
<div className="eyebrow">Semantic search</div>
|
||||
<h2 className="display text-balance text-2xl text-ink">
|
||||
Search the archive
|
||||
<h2 className="text-base font-semibold text-ink">
|
||||
Cross-Guild Archive Intelligence
|
||||
</h2>
|
||||
<p className="font-mono text-[11px] text-[#8a8f98]">
|
||||
Query vectorized messages, heuristic flags, and user behavior
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-4">
|
||||
<Search className="absolute left-4 top-1/2 size-5 -translate-y-1/2 text-ink-faint" />
|
||||
<Search className="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
|
||||
<Input
|
||||
className="h-12 pl-12 text-base"
|
||||
placeholder="Find messages, patterns, flags…"
|
||||
className="h-10 pl-10 text-xs text-ink"
|
||||
placeholder="Search keywords, behavioral patterns, infraction terms..."
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
{query.trim().length > 0 && query.trim().length < 2 && (
|
||||
<div className="mono mt-2 text-xs text-ink-faint">
|
||||
Type at least 2 characters…
|
||||
</div>
|
||||
)}
|
||||
</GlassPanel>
|
||||
|
||||
<div className="grid gap-5 lg:grid-cols-5">
|
||||
<div className="grid gap-3 lg:grid-cols-5">
|
||||
{/* Search Results Column */}
|
||||
<GlassPanel className="lg:col-span-3">
|
||||
<SectionHeader
|
||||
eyebrow="results"
|
||||
title="Matches"
|
||||
eyebrow="search output"
|
||||
title="Matched Log Packets"
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{(search.data ?? []).length}
|
||||
<span className="mono text-xs text-[#8a8f98]">
|
||||
{(search.data ?? []).length} results
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{query.trim().length >= 2 && search.isLoading && (
|
||||
<SkeletonRows rows={6} />
|
||||
)}
|
||||
{(search.data ?? []).length === 0 ? (
|
||||
{(search.data ?? []).length === 0 && !search.isLoading ? (
|
||||
<EmptyState
|
||||
icon={<Search className="size-7" />}
|
||||
title="No matches yet"
|
||||
description="Run a search to surface messages across the guild."
|
||||
title="No packets matched"
|
||||
description="Enter a query string above to scan across all captured guild communication."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<div ref={resultsRef} className="space-y-1.5 mt-3">
|
||||
{(search.data ?? []).map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="flex items-start gap-3 rounded-[12px] border border-hairline bg-white/[0.03] p-3"
|
||||
className="search-result-card 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]"
|
||||
>
|
||||
<Avatar src={m.avatar_url} name={m.username} size={32} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-ink">
|
||||
<span className="text-xs font-semibold text-ink">
|
||||
{m.username}
|
||||
</span>
|
||||
<span className="mono text-[0.65rem] text-ink-faint">
|
||||
<span className="font-mono text-[10px] text-ink-faint">
|
||||
{getMessageChannelLabel(m)}
|
||||
</span>
|
||||
{m.ai_status && (
|
||||
<Badge tone={aiTone(m.ai_status)} className="ml-auto">
|
||||
<Badge
|
||||
tone={aiTone(m.ai_status)}
|
||||
className="ml-auto font-mono text-[9px]"
|
||||
>
|
||||
{m.ai_analysis_duration_ms &&
|
||||
m.ai_analysis_duration_ms > 0
|
||||
? `${m.ai_status} · ${formatDuration(m.ai_analysis_duration_ms)}`
|
||||
@@ -200,7 +207,7 @@ export function AnalysisView() {
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-0.5 text-sm text-ink-soft">
|
||||
<div className="mt-1 text-xs text-ink-soft leading-relaxed">
|
||||
{renderMessageContent(m.content, m.metadata) || "(embed)"}
|
||||
</div>
|
||||
</div>
|
||||
@@ -210,17 +217,19 @@ export function AnalysisView() {
|
||||
)}
|
||||
</GlassPanel>
|
||||
|
||||
<div className="space-y-5 lg:col-span-2">
|
||||
{/* Culture & Leaderboard Side Column */}
|
||||
<div className="space-y-3 lg:col-span-2">
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="culture"
|
||||
eyebrow="engagement"
|
||||
title={
|
||||
<span className="flex items-center gap-2">
|
||||
<TrendingUp className="size-4 text-signal" /> Top reactors
|
||||
<span className="flex items-center gap-1.5">
|
||||
<TrendingUp className="size-3.5 text-[#7170ff]" /> Top
|
||||
Reactors
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<div ref={reactorsRef} className="space-y-2">
|
||||
<div ref={reactorsRef} className="space-y-2 mt-3">
|
||||
{(reactors ?? []).slice(0, 6).map((r, i) => {
|
||||
const maxNet = reactors?.[0]?.net_count || 1;
|
||||
const pct = Math.max(
|
||||
@@ -230,20 +239,22 @@ export function AnalysisView() {
|
||||
return (
|
||||
<div
|
||||
key={r.user_id}
|
||||
className="flex items-center gap-3 text-sm"
|
||||
className="flex items-center gap-3 text-xs"
|
||||
>
|
||||
<span className="mono w-5 text-ink-faint">{i + 1}</span>
|
||||
<span className="w-28 shrink-0 truncate text-ink-soft sm:w-40">
|
||||
<span className="font-mono w-4 text-[10px] text-ink-faint">
|
||||
0{i + 1}
|
||||
</span>
|
||||
<span className="w-24 shrink-0 truncate font-mono text-xs text-ink sm:w-32">
|
||||
{r.username}
|
||||
</span>
|
||||
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/8">
|
||||
<div className="h-1 flex-1 overflow-hidden rounded-full bg-white/[0.06]">
|
||||
<div
|
||||
className="reactor-bar-fill h-full rounded-full bg-signal/70"
|
||||
className="reactor-bar-fill h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff]"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="reactor-count mono w-12 text-right text-xs text-signal"
|
||||
className="reactor-count font-mono w-10 text-right text-[11px] font-semibold text-[#7170ff]"
|
||||
data-target={r.net_count}
|
||||
>
|
||||
+0
|
||||
@@ -252,8 +263,8 @@ export function AnalysisView() {
|
||||
);
|
||||
})}
|
||||
{(reactors ?? []).length === 0 && (
|
||||
<div className="py-4 text-center text-xs text-ink-faint">
|
||||
No data
|
||||
<div className="py-4 text-center font-mono text-xs text-ink-faint">
|
||||
NO REACTOR DATA
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -261,30 +272,32 @@ export function AnalysisView() {
|
||||
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="channels"
|
||||
eyebrow="volume"
|
||||
title={
|
||||
<span className="flex items-center gap-2">
|
||||
<Hash className="size-4 text-signal" /> Top channels
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Hash className="size-3.5 text-[#7170ff]" /> Top Active
|
||||
Channels
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<div ref={channelsRef} className="space-y-2">
|
||||
<div ref={channelsRef} className="space-y-2 mt-3">
|
||||
{(channels ?? []).slice(0, 6).map((c) => (
|
||||
<div
|
||||
key={c.channel_id}
|
||||
className="channel-row flex items-center gap-3 text-sm"
|
||||
className="channel-row flex items-center justify-between rounded-[6px] border border-white/[0.04] bg-white/[0.01] p-2 text-xs hover:bg-white/[0.03]"
|
||||
>
|
||||
<span className="flex-1 truncate text-ink-soft">
|
||||
{c.channel_name ?? c.channel_id.slice(0, 8)}
|
||||
<span className="flex items-center gap-1.5 truncate font-mono text-xs text-ink">
|
||||
<Hash className="size-3 text-[#7170ff]" />
|
||||
{c.channel_name ?? c.channel_id.slice(0, 10)}
|
||||
</span>
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{c.total_messages}
|
||||
<span className="font-mono text-[10px] text-[#8a8f98]">
|
||||
{c.total_messages.toLocaleString()} msgs
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{(channels ?? []).length === 0 && (
|
||||
<div className="py-4 text-center text-xs text-ink-faint">
|
||||
No data
|
||||
<div className="py-4 text-center font-mono text-xs text-ink-faint">
|
||||
NO CHANNEL DATA
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import {
|
||||
AudioWaveform,
|
||||
ChevronRight,
|
||||
Flame,
|
||||
MessageSquare,
|
||||
Mic,
|
||||
Shield,
|
||||
@@ -177,13 +176,17 @@ export function DashboardView({
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center">
|
||||
<div>
|
||||
<div className="font-mono text-[10px] text-[#8a8f98]">CLEAN</div>
|
||||
<div className="font-mono text-[10px] text-[#8a8f98]">
|
||||
CLEAN
|
||||
</div>
|
||||
<div className="font-sans text-sm font-semibold text-[#10b981]">
|
||||
{formatNumber(s.total_clean)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-mono text-[10px] text-[#8a8f98]">FLAGGED</div>
|
||||
<div className="font-mono text-[10px] text-[#8a8f98]">
|
||||
FLAGGED
|
||||
</div>
|
||||
<div className="font-sans text-sm font-semibold text-[#f43f5e]">
|
||||
{formatNumber(s.total_flagged)}
|
||||
</div>
|
||||
@@ -220,10 +223,7 @@ export function DashboardView({
|
||||
|
||||
<GlassPanel className="linear-tile flex flex-col justify-between">
|
||||
<div>
|
||||
<SectionHeader
|
||||
eyebrow="Navigation"
|
||||
title="Quick Diagnostics"
|
||||
/>
|
||||
<SectionHeader eyebrow="Navigation" title="Quick Diagnostics" />
|
||||
<div className="mt-2 space-y-1.5">
|
||||
<Link
|
||||
href="/moderation"
|
||||
|
||||
@@ -1,14 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Disc,
|
||||
ListMusic,
|
||||
Play,
|
||||
Repeat,
|
||||
SkipForward,
|
||||
Sliders,
|
||||
Square,
|
||||
} from "lucide-react";
|
||||
import { Disc, Play, Repeat, SkipForward, Square } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { Equalizer } from "@/components/charts";
|
||||
@@ -161,7 +153,9 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => loop.mutateAsync()}
|
||||
className={media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""}
|
||||
className={
|
||||
media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""
|
||||
}
|
||||
>
|
||||
<Repeat className="size-3.5" />
|
||||
</Button>
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Paperclip,
|
||||
Search,
|
||||
ShieldAlert,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { ActivityHeatmap } from "@/components/ActivityHeatmap";
|
||||
@@ -42,6 +43,7 @@ import {
|
||||
useReviewWsSync,
|
||||
useSemanticSearch,
|
||||
} from "@/hooks";
|
||||
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||
import { aiTone } from "@/lib/ai-status";
|
||||
import {
|
||||
formatBytes,
|
||||
@@ -57,7 +59,6 @@ import type {
|
||||
Guild,
|
||||
MessageRecord,
|
||||
} from "@/lib/types";
|
||||
import { staggerDelay } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export function MessagesView({
|
||||
@@ -217,28 +218,32 @@ export function MessagesView({
|
||||
prevLen.current = list.length;
|
||||
}, [list.length, searching]);
|
||||
|
||||
const streamRef = useStaggerReveal<HTMLDivElement>(".msg-feed-card", {
|
||||
stagger: 0.02,
|
||||
y: 6,
|
||||
dependencies: [display.length, viewMode],
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex size-3 items-center justify-center">
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
|
||||
<span className="relative inline-flex size-2 rounded-full bg-signal" />
|
||||
</div>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||
CHAT LOG STREAM · SCAN_01
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] 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">
|
||||
Chat Log Stream · Ingestion Stream
|
||||
</h1>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||
<span className="text-ink-faint">FEED:</span>
|
||||
<span className="font-bold text-signal">
|
||||
{searching ? "SEARCH" : viewMode.toUpperCase()}
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
|
||||
<span>MODE:</span>
|
||||
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
|
||||
{searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GlassPanel className="flex flex-wrap items-center gap-3">
|
||||
{/* Filter and Mode Bar */}
|
||||
<GlassPanel className="flex flex-wrap items-center gap-3 p-3">
|
||||
<GuildChannelPicker
|
||||
mode="text"
|
||||
guildsInitial={initialGuilds}
|
||||
@@ -255,48 +260,72 @@ export function MessagesView({
|
||||
<div className="relative ml-auto w-full sm:w-64">
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
|
||||
<Input
|
||||
className="pl-9"
|
||||
placeholder="Search messages…"
|
||||
className="pl-9 text-xs"
|
||||
placeholder="Search captured logs..."
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSemanticMode((v) => !v)}
|
||||
className={`rounded-full border px-3 py-1.5 text-xs transition-colors ${
|
||||
semanticMode
|
||||
? "border-signal/40 bg-signal/10 text-signal"
|
||||
: "border-hairline bg-white/[0.03] text-ink-soft hover:bg-white/[0.06]"
|
||||
}`}
|
||||
title="Toggle semantic (vector) search over the message archive"
|
||||
>
|
||||
{semanticMode ? "Semantic" : "Exact"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setViewMode((v) => (v === "feed" ? "timeline" : "feed"))
|
||||
}
|
||||
className={`rounded-full border px-3 py-1.5 text-xs transition-colors ${
|
||||
viewMode === "timeline"
|
||||
? "border-signal/40 bg-signal/10 text-signal"
|
||||
: "border-hairline bg-white/[0.03] text-ink-soft hover:bg-white/[0.06]"
|
||||
}`}
|
||||
title="Toggle timeline (date-grouped) view"
|
||||
>
|
||||
{viewMode === "timeline" ? "Timeline" : "Feed"}
|
||||
</button>
|
||||
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSemanticMode(false)}
|
||||
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
|
||||
!semanticMode
|
||||
? "bg-white/[0.08] text-white border border-white/[0.12]"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
}`}
|
||||
>
|
||||
EXACT
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSemanticMode(true)}
|
||||
className={`flex items-center gap-1 rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
|
||||
semanticMode
|
||||
? "bg-[#7170ff]/20 text-[#7170ff] border border-[#7170ff]/30"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
}`}
|
||||
>
|
||||
<Sparkles className="size-3" />
|
||||
SEMANTIC
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setViewMode("feed")}
|
||||
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
|
||||
viewMode === "feed"
|
||||
? "bg-white/[0.08] text-white border border-white/[0.12]"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
}`}
|
||||
>
|
||||
FEED
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setViewMode("timeline")}
|
||||
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
|
||||
viewMode === "timeline"
|
||||
? "bg-white/[0.08] text-white border border-white/[0.12]"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
}`}
|
||||
>
|
||||
TIMELINE
|
||||
</button>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-5">
|
||||
<div className="grid gap-3 lg:grid-cols-5">
|
||||
{semanticSearching && (
|
||||
<GlassPanel className="lg:col-span-5">
|
||||
<SectionHeader
|
||||
eyebrow="semantic"
|
||||
title={`“${query}”`}
|
||||
eyebrow="semantic archive"
|
||||
title={`Vector Matches for “${query}”`}
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
<span className="mono text-xs text-[#8a8f98]">
|
||||
{semantic.data?.length ?? 0} matches
|
||||
</span>
|
||||
}
|
||||
@@ -308,19 +337,18 @@ export function MessagesView({
|
||||
{semantic.data.map((r, i) => (
|
||||
<div
|
||||
key={r.message_id ?? i}
|
||||
className="animate-stagger flex items-start gap-3 rounded-[10px] border border-hairline bg-white/[0.03] p-3"
|
||||
style={staggerDelay(i)}
|
||||
className="flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 hover:border-white/[0.12] hover:bg-white/[0.04]"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="mono text-[0.6rem] text-signal">
|
||||
{(r.score * 100).toFixed(0)}%
|
||||
<span className="font-mono text-[10px] font-semibold text-[#7170ff]">
|
||||
{(r.score * 100).toFixed(0)}% RELEVANCE
|
||||
</span>
|
||||
<span className="mono ml-auto text-[0.6rem] text-ink-faint">
|
||||
<span className="ml-auto font-mono text-[10px] text-[#8a8f98]">
|
||||
{formatRelativeTime(r.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 line-clamp-3 text-sm text-ink-soft">
|
||||
<div className="mt-1 text-xs text-[#d0d6e0] leading-relaxed">
|
||||
{r.content}
|
||||
</div>
|
||||
</div>
|
||||
@@ -331,19 +359,20 @@ export function MessagesView({
|
||||
<EmptyState
|
||||
icon={<Search className="size-7" />}
|
||||
title="No semantic matches"
|
||||
description="Try different wording — semantic search finds meaning, not exact text."
|
||||
description="Try different phrasing — vector search inspects contextual semantics."
|
||||
/>
|
||||
)}
|
||||
</GlassPanel>
|
||||
)}
|
||||
|
||||
{/* Message Stream Deck */}
|
||||
<GlassPanel className="lg:col-span-3">
|
||||
<SectionHeader
|
||||
eyebrow={searching ? "results" : "live feed"}
|
||||
title={searching ? `“${query}”` : "Messages"}
|
||||
eyebrow={searching ? "query results" : "realtime log"}
|
||||
title={searching ? `Matches for “${query}”` : "Message Stream"}
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{list.length} shown
|
||||
<span className="mono text-xs text-[#8a8f98]">
|
||||
{list.length} messages
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
@@ -354,48 +383,40 @@ export function MessagesView({
|
||||
) : list.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<MessageSquare className="size-7" />}
|
||||
title="No messages"
|
||||
description="Pick a guild to begin, or run a search."
|
||||
title="No messages captured"
|
||||
description="Select a channel or verify discord bridge is active."
|
||||
/>
|
||||
) : (
|
||||
<div>
|
||||
{!searching && (
|
||||
<div className="mb-2 flex items-center justify-center gap-2">
|
||||
{loadMore.isPending ? (
|
||||
<span className="flex items-center gap-1.5 text-xs text-ink-soft">
|
||||
<span className="flex items-center gap-1.5 font-mono text-xs text-[#8a8f98]">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
Loading older…
|
||||
FETCHING EARLIER PACKETS...
|
||||
</span>
|
||||
) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={loadOlder}
|
||||
className="rounded-full border border-hairline bg-white/[0.03] px-3 py-1 text-xs text-ink-soft transition-colors hover:bg-white/[0.06]"
|
||||
className="rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-3 py-1 font-mono text-[10px] text-[#8a8f98] transition-colors hover:bg-white/[0.05] hover:text-[#f7f8f8]"
|
||||
>
|
||||
↑ Load older messages
|
||||
↑ LOAD PREVIOUS BATCH
|
||||
</button>
|
||||
) : loadedPages >= MAX_OLDER_PAGES ? (
|
||||
<span className="mono text-[0.65rem] text-ink-faint">
|
||||
capped at {MAX_OLDER_PAGES} older pages · use search for
|
||||
more
|
||||
</span>
|
||||
) : (
|
||||
messages &&
|
||||
messages.length > 0 && (
|
||||
<span className="mono text-[0.65rem] text-ink-faint">
|
||||
beginning of history
|
||||
</span>
|
||||
)
|
||||
<span className="font-mono text-[10px] text-[#62666d]">
|
||||
{loadedPages >= MAX_OLDER_PAGES
|
||||
? `CAPPED AT ${MAX_OLDER_PAGES} PAGES`
|
||||
: "STREAM ROOT REACHED"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className="scan-line max-h-[60vh] space-y-1.5 overflow-y-auto pr-1"
|
||||
className="max-h-[60vh] space-y-1.5 overflow-y-auto pr-1"
|
||||
onScroll={(e) => {
|
||||
const el = e.currentTarget;
|
||||
// Track whether the user is near the bottom (to follow live
|
||||
// messages) and auto-load older messages when scrolled to top.
|
||||
nearBottomRef.current =
|
||||
el.scrollHeight - el.scrollTop - el.clientHeight < 120;
|
||||
if (searching || !hasMore || loadMore.isPending) return;
|
||||
@@ -405,44 +426,47 @@ export function MessagesView({
|
||||
}
|
||||
}}
|
||||
>
|
||||
{viewMode === "timeline" && timelineNodes
|
||||
? timelineNodes.map((node, _i) =>
|
||||
node.type === "date" ? (
|
||||
<div
|
||||
key={`date-${node.iso}`}
|
||||
className="flex items-center gap-2 px-1 text-[0.65rem] text-ink-faint"
|
||||
>
|
||||
<Calendar className="size-3" />
|
||||
{node.label}
|
||||
</div>
|
||||
) : (
|
||||
<div ref={streamRef} className="space-y-1.5">
|
||||
{viewMode === "timeline" && timelineNodes
|
||||
? timelineNodes.map((node) =>
|
||||
node.type === "date" ? (
|
||||
<div
|
||||
key={`date-${node.iso}`}
|
||||
className="flex items-center gap-2 py-1 font-mono text-[10px] text-[#8a8f98]"
|
||||
>
|
||||
<Calendar className="size-3 text-[#7170ff]" />
|
||||
{node.label}
|
||||
</div>
|
||||
) : (
|
||||
<MessageRow
|
||||
key={node.m.id}
|
||||
m={node.m}
|
||||
selected={selected}
|
||||
onSelect={setSelected}
|
||||
/>
|
||||
),
|
||||
)
|
||||
: display.map((m) => (
|
||||
<MessageRow
|
||||
key={node.m.id}
|
||||
m={node.m}
|
||||
key={m.id}
|
||||
m={m}
|
||||
selected={selected}
|
||||
onSelect={setSelected}
|
||||
/>
|
||||
),
|
||||
)
|
||||
: display.map((m, _i) => (
|
||||
<MessageRow
|
||||
key={m.id}
|
||||
m={m}
|
||||
selected={selected}
|
||||
onSelect={setSelected}
|
||||
/>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</GlassPanel>
|
||||
|
||||
{/* Message Inspector Detail Panel */}
|
||||
<GlassPanel className="lg:col-span-2">
|
||||
<SectionHeader eyebrow="inspect" title="Detail" />
|
||||
<SectionHeader eyebrow="telemetry analysis" title="Inspector Deck" />
|
||||
{!selected ? (
|
||||
<EmptyState
|
||||
title="Select a message"
|
||||
description="Click any message to inspect AI analysis, attachments and edit history."
|
||||
description="Click any packet in the stream to inspect AI flags, moderation heuristics, and attachments."
|
||||
/>
|
||||
) : detail.loading ? (
|
||||
<div className="space-y-2">
|
||||
@@ -455,7 +479,7 @@ export function MessagesView({
|
||||
attachments={detail.attachments}
|
||||
/>
|
||||
) : (
|
||||
<EmptyState title="Not found" />
|
||||
<EmptyState title="Packet not found" />
|
||||
)}
|
||||
</GlassPanel>
|
||||
</div>
|
||||
@@ -530,15 +554,15 @@ function MessageDetail({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[10px] border border-hairline bg-white/[0.03] p-3 text-ink-soft">
|
||||
<div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#d0d6e0] leading-relaxed">
|
||||
{renderMessageContent(m.edited_content ?? m.content, m.metadata) ||
|
||||
"(no text)"}
|
||||
"(no text content)"}
|
||||
</div>
|
||||
|
||||
{m.ai_analysis && (
|
||||
<div>
|
||||
<div className="eyebrow mb-1">AI analysis</div>
|
||||
<div className="rounded-[10px] border border-hairline bg-white/[0.03] p-3 text-ink-soft">
|
||||
<div className="eyebrow mb-1">AI heuristic reasoning</div>
|
||||
<div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#8a8f98] leading-relaxed">
|
||||
{m.ai_analysis}
|
||||
</div>
|
||||
</div>
|
||||
@@ -571,11 +595,11 @@ function MessageDetail({
|
||||
href={a.discord_url ?? a.uploaded_url ?? "#"}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-soft hover:text-ink"
|
||||
className="flex items-center gap-2 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-xs text-[#d0d6e0] hover:border-white/[0.12] hover:text-[#f7f8f8]"
|
||||
>
|
||||
<ImageIcon className="size-3.5 text-signal" />
|
||||
<ImageIcon className="size-3.5 text-[#7170ff]" />
|
||||
<span className="flex-1 truncate">{a.filename}</span>
|
||||
<span className="mono text-ink-faint">
|
||||
<span className="mono text-[10px] text-[#8a8f98]">
|
||||
{formatBytes(a.size)}
|
||||
</span>
|
||||
</a>
|
||||
@@ -602,28 +626,28 @@ function MessageRow({
|
||||
key={m.id}
|
||||
type="button"
|
||||
onClick={() => onSelect(m.id)}
|
||||
className={`animate-stagger flex w-full items-start gap-3 rounded-[12px] border p-3 text-left transition-colors ${
|
||||
className={`msg-feed-card flex w-full items-start gap-3 rounded-[6px] border p-2.5 text-left transition-all ${
|
||||
selected === m.id
|
||||
? "border-signal/40 bg-signal/8"
|
||||
: "border-hairline bg-white/[0.03] hover:bg-white/[0.06]"
|
||||
? "border-[#7170ff]/40 bg-[#7170ff]/10"
|
||||
: "border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]"
|
||||
}`}
|
||||
>
|
||||
<Avatar src={m.avatar_url} name={m.username} size={34} />
|
||||
<Avatar src={m.avatar_url} name={m.username} size={32} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate text-sm font-semibold text-ink">
|
||||
<span className="truncate text-xs font-semibold text-[#f7f8f8]">
|
||||
{m.username}
|
||||
</span>
|
||||
<span className="mono text-[0.65rem] text-ink-faint">
|
||||
<span className="font-mono text-[10px] text-[#8a8f98]">
|
||||
{getMessageChannelLabel(m)}
|
||||
</span>
|
||||
<span className="mono ml-auto text-[0.6rem] text-ink-faint">
|
||||
<span className="ml-auto font-mono text-[10px] text-[#8a8f98]">
|
||||
{formatRelativeTime(m.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 line-clamp-2 text-sm text-ink-soft">
|
||||
<div className="mt-0.5 line-clamp-2 text-xs text-[#d0d6e0]">
|
||||
{renderMessageContent(m.content, m.metadata) || (
|
||||
<span className="italic text-ink-faint">(empty / embed)</span>
|
||||
<span className="italic text-[#8a8f98]">(empty / embed)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
Filter,
|
||||
Shield,
|
||||
ShieldAlert,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { AlertTriangle, CheckCircle2, Shield } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { LiveModerationFeed } from "@/components/LiveModerationFeed";
|
||||
import { ModerationHeatmap } from "@/components/ModerationHeatmap";
|
||||
import { Button, GlassPanel } from "@/components/primitives";
|
||||
import { GlassPanel } from "@/components/primitives";
|
||||
import {
|
||||
ErrorState,
|
||||
MetricTile,
|
||||
@@ -25,9 +19,7 @@ import {
|
||||
import {
|
||||
useHourlyModeration,
|
||||
useModerationActions,
|
||||
useModerationCoverage,
|
||||
useModerationStats,
|
||||
useModerationTrends,
|
||||
} from "@/hooks";
|
||||
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||
import { formatNumber } from "@/lib/format";
|
||||
@@ -44,7 +36,7 @@ if (typeof window !== "undefined") {
|
||||
export function ModerationView({
|
||||
initialStats,
|
||||
initialActions,
|
||||
initialCoverage,
|
||||
initialCoverage: _initialCoverage,
|
||||
}: {
|
||||
initialStats?: ModerationStats;
|
||||
initialActions?: ModerationAction[];
|
||||
@@ -62,8 +54,6 @@ export function ModerationView({
|
||||
initialActions,
|
||||
);
|
||||
const { data: hourly } = useHourlyModeration();
|
||||
const { data: trends } = useModerationTrends(14);
|
||||
const { data: coverage } = useModerationCoverage(30);
|
||||
const ambient = useAmbient();
|
||||
|
||||
const [filterMode, setFilterMode] = useState<"all" | "flagged" | "clean">(
|
||||
|
||||
@@ -6,7 +6,6 @@ import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
GlassCard,
|
||||
GlassPanel,
|
||||
Skeleton,
|
||||
@@ -40,8 +39,8 @@ export function RecordingsView({
|
||||
const [playingId, setPlayingId] = useState<string | null>(null);
|
||||
|
||||
const deckRef = useStaggerReveal<HTMLDivElement>(".recording-deck-card", {
|
||||
stagger: 0.05,
|
||||
y: 14,
|
||||
stagger: 0.04,
|
||||
y: 10,
|
||||
dependencies: [items],
|
||||
});
|
||||
|
||||
@@ -88,129 +87,137 @@ export function RecordingsView({
|
||||
</GlassPanel>
|
||||
);
|
||||
|
||||
const totalRecordings = (items ?? []).length;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex size-3 items-center justify-center">
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
|
||||
<span className="relative inline-flex size-2 rounded-full bg-signal" />
|
||||
</div>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||
RECORDINGS · TAPE_DECK
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] 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">
|
||||
Tape Deck · Captured Audio Archive
|
||||
</h1>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||
<span className="text-ink-faint">CLIPS:</span>
|
||||
<span className="font-bold text-signal">{(items ?? []).length}</span>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
|
||||
<span>STATUS:</span>
|
||||
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
|
||||
{totalRecordings} CLIPS_ONLINE
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="voice captures"
|
||||
title="Recordings"
|
||||
eyebrow="acoustic buffer"
|
||||
title="Voice Capture Tape Deck"
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{(items ?? []).length} clips
|
||||
<span className="mono text-xs text-[#8a8f98]">
|
||||
{totalRecordings} clips archived
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{(items ?? []).length === 0 ? (
|
||||
{totalRecordings === 0 ? (
|
||||
<EmptyState
|
||||
icon={<Headphones className="size-7" />}
|
||||
title="No recordings"
|
||||
description="Voice clips captured by the bot appear here."
|
||||
title="Tape deck is empty"
|
||||
description="Voice transmissions captured in connected channels will be archived here."
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
ref={deckRef}
|
||||
className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
|
||||
className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
{(items ?? []).map((r) => {
|
||||
const up = uploadStatus(r);
|
||||
const isPlaying = playingId === r.id;
|
||||
return (
|
||||
<GlassCard
|
||||
<div
|
||||
key={r.id}
|
||||
className={`recording-deck-card flex flex-col gap-3 transition-colors hover:bg-white/[0.06] ${
|
||||
className={`recording-deck-card flex flex-col justify-between rounded-[8px] border bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] ${
|
||||
isPlaying
|
||||
? "border-signal/40 shadow-[0_0_36px_-16px_var(--color-signal-glow)]"
|
||||
: ""
|
||||
? "border-[#7170ff]/50 bg-[#7170ff]/5 shadow-[0_0_24px_-10px_rgba(113,112,255,0.3)]"
|
||||
: "border-white/[0.06]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar src={r.avatar_url} name={r.username} size={38} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-semibold text-ink">
|
||||
{r.username}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-[0.65rem] text-ink-faint">
|
||||
<Hash className="size-3" />
|
||||
<span className="truncate">
|
||||
{r.channel_name ?? "voice"}
|
||||
</span>
|
||||
<span className="text-ink-faint/60">·</span>
|
||||
<span className="mono">
|
||||
{formatRelativeTime(r.created_at)}
|
||||
</span>
|
||||
<div>
|
||||
{/* Header info */}
|
||||
<div className="flex items-center gap-3 border-b border-white/[0.05] pb-3">
|
||||
<Avatar src={r.avatar_url} name={r.username} size={36} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-xs font-semibold text-ink">
|
||||
{r.username}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 font-mono text-[10px] text-ink-faint">
|
||||
<Hash className="size-2.5 text-[#7170ff]" />
|
||||
<span className="truncate">
|
||||
{r.channel_name ?? "voice"}
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span>{formatRelativeTime(r.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{isPlaying && <NowPlayingChip />}
|
||||
{up && !isPlaying && (
|
||||
<Badge tone={up.tone} className="font-mono text-[9px]">
|
||||
{up.label}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{isPlaying && <NowPlayingChip />}
|
||||
{up && !isPlaying && (
|
||||
<Badge tone={up.tone}>{up.label}</Badge>
|
||||
)}
|
||||
<span className="mono text-[0.65rem] text-ink-faint">
|
||||
{formatBytes(r.size_bytes)}
|
||||
|
||||
{/* Audio Player Scrub */}
|
||||
<div className="my-3">
|
||||
{r.download_url ? (
|
||||
<RecordingAudioPlayer
|
||||
src={r.download_url}
|
||||
label={`Voice recording by ${r.username}`}
|
||||
onPlayStateChange={(active) =>
|
||||
setPlayingId((prev) => {
|
||||
if (active) return r.id;
|
||||
return prev === r.id ? null : prev;
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 font-mono text-[11px] text-[#8a8f98]">
|
||||
<Loader2 className="size-3.5 animate-spin text-[#7170ff]" />
|
||||
{r.upload_status === "pending"
|
||||
? "UPLOAD_PENDING..."
|
||||
: r.upload_error
|
||||
? r.upload_error
|
||||
: "SYNTHESIZING_PCM..."}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions & File Stats */}
|
||||
<div className="flex items-center justify-between border-t border-white/[0.04] pt-2.5">
|
||||
<span className="font-mono text-[10px] text-ink-faint">
|
||||
SIZE: {formatBytes(r.size_bytes)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{r.download_url ? (
|
||||
<RecordingAudioPlayer
|
||||
src={r.download_url}
|
||||
label={`Voice recording by ${r.username}`}
|
||||
onPlayStateChange={(active) =>
|
||||
setPlayingId((prev) => {
|
||||
if (active) return r.id;
|
||||
// Only clear if THIS card was the one playing.
|
||||
return prev === r.id ? null : prev;
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-faint">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
{r.upload_status === "pending"
|
||||
? "Upload pending…"
|
||||
: r.upload_error
|
||||
? r.upload_error
|
||||
: "Processing…"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{r.download_url && (
|
||||
<a
|
||||
href={r.download_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-1.5 rounded-[9px] border border-hairline px-2.5 py-1.5 text-xs text-ink-soft hover:text-ink hover:border-signal/40"
|
||||
<div className="flex items-center gap-2">
|
||||
{r.download_url && (
|
||||
<a
|
||||
href={r.download_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.05] hover:text-ink"
|
||||
>
|
||||
<Download className="size-3 text-[#7170ff]" /> RAW
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDelete(r.id)}
|
||||
disabled={del.isPending}
|
||||
className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-[#f43f5e] transition-colors hover:border-[#f43f5e]/30 hover:bg-[#f43f5e]/10"
|
||||
>
|
||||
<Download className="size-3.5" /> Download
|
||||
</a>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-auto"
|
||||
onClick={() => onDelete(r.id)}
|
||||
disabled={del.isPending}
|
||||
>
|
||||
<Trash2 className="size-3.5" /> Delete
|
||||
</Button>
|
||||
<Trash2 className="size-3" /> PURGE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AudioWaveform,
|
||||
Disc,
|
||||
Headphones,
|
||||
Mic,
|
||||
MicOff,
|
||||
PhoneOff,
|
||||
Radio,
|
||||
Volume2,
|
||||
Waves,
|
||||
} from "lucide-react";
|
||||
import { Mic, PhoneOff, Radio, Volume2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { Equalizer } from "@/components/charts";
|
||||
import { Button, GlassPanel, toast } from "@/components/primitives";
|
||||
import {
|
||||
EmptyState,
|
||||
ErrorState,
|
||||
PageTransition,
|
||||
SectionHeader,
|
||||
@@ -212,10 +200,7 @@ export function VoiceView({
|
||||
|
||||
<GlassPanel className="voice-tile flex flex-col justify-between">
|
||||
<div>
|
||||
<SectionHeader
|
||||
eyebrow="Telemetry"
|
||||
title="Input / Output Mix"
|
||||
/>
|
||||
<SectionHeader eyebrow="Telemetry" title="Input / Output Mix" />
|
||||
<div className="mt-4 space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { Radio, Signal } from "lucide-react";
|
||||
import { useMemo } from "react";
|
||||
import { GlassPanel } from "@/components/primitives";
|
||||
import { Activity, Download, Hash } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Badge, GlassPanel } from "@/components/primitives";
|
||||
import { SectionHeader } from "@/components/shared";
|
||||
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||
import { downloadCsv } from "@/lib/csv";
|
||||
@@ -10,16 +10,16 @@ import { formatRelativeTime } from "@/lib/format";
|
||||
import type { ChannelCultureRow } from "@/lib/types";
|
||||
|
||||
function deriveSignalStrength(c: ChannelCultureRow): number {
|
||||
let score = 0.25;
|
||||
let score = 0.3;
|
||||
if (c.culture_summary) {
|
||||
score += Math.min(0.45, c.culture_summary.length / 400);
|
||||
score += Math.min(0.45, c.culture_summary.length / 350);
|
||||
}
|
||||
if (c.last_analyzed_at) {
|
||||
const ageMs = Date.now() - c.last_analyzed_at;
|
||||
const days = ageMs / (1000 * 60 * 60 * 24);
|
||||
score += Math.max(0, 0.3 - days * 0.02);
|
||||
score += Math.max(0, 0.25 - days * 0.015);
|
||||
}
|
||||
return Math.max(0.08, Math.min(1, score));
|
||||
return Math.max(0.12, Math.min(1, score));
|
||||
}
|
||||
|
||||
export function ChannelCultureGlossary({
|
||||
@@ -27,27 +27,47 @@ export function ChannelCultureGlossary({
|
||||
}: {
|
||||
cultures: ChannelCultureRow[];
|
||||
}) {
|
||||
const ranked = useMemo(
|
||||
() =>
|
||||
cultures
|
||||
.map((c) => ({ c, signal: deriveSignalStrength(c) }))
|
||||
.sort((a, b) => b.signal - a.signal),
|
||||
[cultures],
|
||||
);
|
||||
const [filter, setFilter] = useState("");
|
||||
|
||||
const containerRef = useStaggerReveal<HTMLDivElement>(".channel-row", {
|
||||
stagger: 0.025,
|
||||
y: 6,
|
||||
dependencies: [cultures],
|
||||
const ranked = useMemo(() => {
|
||||
return cultures
|
||||
.map((c) => ({ c, signal: deriveSignalStrength(c) }))
|
||||
.sort((a, b) => b.signal - a.signal);
|
||||
}, [cultures]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!filter.trim()) return ranked;
|
||||
const q = filter.toLowerCase();
|
||||
return ranked.filter(
|
||||
({ c }) =>
|
||||
c.channel_name?.toLowerCase().includes(q) ||
|
||||
c.channel_id.toLowerCase().includes(q) ||
|
||||
c.culture_summary?.toLowerCase().includes(q),
|
||||
);
|
||||
}, [ranked, filter]);
|
||||
|
||||
const containerRef = useStaggerReveal<HTMLDivElement>(".channel-node-card", {
|
||||
stagger: 0.03,
|
||||
y: 10,
|
||||
dependencies: [filtered.length, filter],
|
||||
});
|
||||
|
||||
return (
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="Roster Intelligence"
|
||||
title="Channel Culture & Activity Roster"
|
||||
action={
|
||||
cultures.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{/* Search and Quick Filters */}
|
||||
<GlassPanel className="flex flex-wrap items-center justify-between gap-3 p-3">
|
||||
<div className="relative flex-1 min-w-[220px]">
|
||||
<Hash className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{cultures.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
@@ -60,43 +80,103 @@ export function ChannelCultureGlossary({
|
||||
})),
|
||||
)
|
||||
}
|
||||
className="font-mono text-[11px] text-[#8a8f98] transition-colors hover:text-[#f7f8f8]"
|
||||
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"
|
||||
>
|
||||
<Download className="size-3.5 text-[#7170ff]" />
|
||||
EXPORT_CSV
|
||||
</button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
{cultures.length === 0 ? (
|
||||
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
|
||||
NO CHANNELS LOGGED
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div ref={containerRef} className="space-y-2 mt-3">
|
||||
{ranked.map(({ c }) => (
|
||||
<div
|
||||
key={c.channel_id}
|
||||
className="channel-row flex flex-col gap-1 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]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-xs font-semibold text-[#f7f8f8]">
|
||||
#{c.channel_name ?? c.channel_id.slice(0, 8)}
|
||||
</span>
|
||||
{c.last_analyzed_at && (
|
||||
<span className="font-mono text-[10px] text-[#8a8f98]">
|
||||
{formatRelativeTime(c.last_analyzed_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{c.culture_summary && (
|
||||
<p className="font-sans text-xs text-[#8a8f98] leading-relaxed line-clamp-2">
|
||||
{c.culture_summary}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</GlassPanel>
|
||||
</GlassPanel>
|
||||
|
||||
{/* Channel Nodes Grid */}
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="Roster Telemetry"
|
||||
title="Channel Culture & Activity Spectrum"
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{filtered.length} of {cultures.length} channels
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<div className="py-12 text-center font-mono text-xs text-ink-faint">
|
||||
NO MATCHING CHANNEL TELEMETRY FOUND
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{filtered.map(({ c, signal }) => {
|
||||
const pct = Math.round(signal * 100);
|
||||
const isHighSignal = signal > 0.65;
|
||||
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"
|
||||
>
|
||||
<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 gap-2 min-w-0">
|
||||
<span className="flex size-6 items-center justify-center rounded bg-white/[0.04] text-[#7170ff]">
|
||||
<Hash className="size-3.5" />
|
||||
</span>
|
||||
<span className="truncate font-mono text-xs font-semibold text-ink">
|
||||
{c.channel_name ?? c.channel_id.slice(0, 10)}
|
||||
</span>
|
||||
</div>
|
||||
<Badge
|
||||
tone={isHighSignal ? "signal" : "neutral"}
|
||||
className="font-mono text-[10px]"
|
||||
>
|
||||
{pct}% SIGNAL
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Culture Summary */}
|
||||
<div className="mt-3">
|
||||
{c.culture_summary ? (
|
||||
<p className="font-sans text-xs text-ink-soft leading-relaxed line-clamp-3">
|
||||
{c.culture_summary}
|
||||
</p>
|
||||
) : (
|
||||
<p className="font-mono text-[11px] text-ink-faint italic">
|
||||
Awaiting AI culture profile synthesis...
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Signal Strength Bar & Timestamp */}
|
||||
<div className="mt-4 pt-3 border-t border-white/[0.04]">
|
||||
<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]" />
|
||||
INTEL RATIO
|
||||
</span>
|
||||
<span>
|
||||
{c.last_analyzed_at
|
||||
? formatRelativeTime(c.last_analyzed_at)
|
||||
: "NEVER"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1 w-full overflow-hidden rounded-full bg-white/[0.06]">
|
||||
<div
|
||||
className="h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff] transition-all duration-500"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</GlassPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { Badge, GlassPanel } from "@/components/primitives";
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { CheckCircle2, ShieldAlert, UserX, VolumeX } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
import { Badge } from "@/components/primitives";
|
||||
import { formatRelativeTime } from "@/lib/format";
|
||||
import type { ModerationAction } from "@/lib/types";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
const ACTION_LABEL: Record<string, string> = {
|
||||
delete_message: "Deleted",
|
||||
timeout_user: "Timeout",
|
||||
@@ -15,6 +23,21 @@ const ACTION_LABEL: Record<string, string> = {
|
||||
none: "None",
|
||||
};
|
||||
|
||||
function actionIcon(type: string) {
|
||||
switch (type) {
|
||||
case "ban_user":
|
||||
case "kick_user":
|
||||
return <UserX className="size-3.5 text-[#f43f5e]" />;
|
||||
case "timeout_user":
|
||||
return <VolumeX className="size-3.5 text-[#f59e0b]" />;
|
||||
case "delete_message":
|
||||
case "warn_user":
|
||||
return <ShieldAlert className="size-3.5 text-[#7170ff]" />;
|
||||
default:
|
||||
return <CheckCircle2 className="size-3.5 text-[#10b981]" />;
|
||||
}
|
||||
}
|
||||
|
||||
function severityTone(
|
||||
sev?: string | null,
|
||||
): "signal" | "amber" | "vermilion" | null {
|
||||
@@ -36,67 +59,110 @@ export function LiveModerationFeed({
|
||||
}: {
|
||||
actions: ModerationAction[];
|
||||
}) {
|
||||
const feedRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!feedRef.current) return;
|
||||
const items = feedRef.current.querySelectorAll(".mod-feed-item");
|
||||
if (items.length === 0) return;
|
||||
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) return;
|
||||
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ opacity: 0, x: -8 },
|
||||
{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
duration: 0.32,
|
||||
stagger: 0.025,
|
||||
ease: "power2.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
);
|
||||
},
|
||||
{ scope: feedRef, dependencies: [actions.length] },
|
||||
);
|
||||
|
||||
return (
|
||||
<GlassPanel className="flex max-h-[420px] flex-col">
|
||||
<div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
|
||||
<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 gap-2">
|
||||
<span className="relative flex size-2.5">
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
|
||||
<span className="relative inline-flex size-2.5 rounded-full bg-emerald-500" />
|
||||
<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>
|
||||
<span className="font-mono text-xs font-medium text-ink">
|
||||
Live Stream Audit Log
|
||||
</span>
|
||||
<h3 className="text-sm font-medium text-ink">Live Feed</h3>
|
||||
</div>
|
||||
<span className="text-xs text-ink-faint">{actions.length} recent</span>
|
||||
<span className="font-mono text-[11px] text-ink-faint">
|
||||
{actions.length} RECENT ACTIONS
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div ref={feedRef} className="flex-1 space-y-2 overflow-y-auto pt-3 pr-1">
|
||||
{actions.length === 0 ? (
|
||||
<p className="px-4 py-6 text-center text-xs text-ink-faint">
|
||||
Waiting for new moderation actions…
|
||||
</p>
|
||||
<div className="py-12 text-center font-mono text-xs text-ink-faint">
|
||||
AWAITING MODERATION DISPATCH STREAM...
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-white/5">
|
||||
{actions.map((a, i) => {
|
||||
const tone = severityTone(a.severity);
|
||||
return (
|
||||
<li
|
||||
key={a.id}
|
||||
className={`flex items-start gap-3 px-4 py-3 ${
|
||||
i === 0 ? "animate-[fadeIn_0.4s_ease-out]" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge tone={tone ?? "signal"} className="capitalize">
|
||||
{ACTION_LABEL[a.action_type] ?? a.action_type}
|
||||
actions.map((a) => {
|
||||
const tone = severityTone(a.severity);
|
||||
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]"
|
||||
>
|
||||
<span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-white/[0.08] bg-white/[0.03]">
|
||||
{actionIcon(a.action_type)}
|
||||
</span>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="font-mono text-xs font-semibold text-ink">
|
||||
{ACTION_LABEL[a.action_type] ?? a.action_type}
|
||||
</span>
|
||||
{a.severity && (
|
||||
<Badge
|
||||
tone={tone ?? "signal"}
|
||||
className="font-mono text-[9px] uppercase"
|
||||
>
|
||||
{a.severity}
|
||||
</Badge>
|
||||
{a.severity && (
|
||||
<span className="text-xs text-ink-faint">
|
||||
{a.severity}
|
||||
</span>
|
||||
)}
|
||||
{a.categories?.length ? (
|
||||
<span className="truncate text-xs text-ink-soft">
|
||||
{a.categories.slice(0, 3).join(", ")}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
{a.reason && (
|
||||
<p className="mt-1 truncate text-xs text-ink-soft">
|
||||
“{a.reason}”
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-0.5 text-[11px] text-ink-faint">
|
||||
{a.username ?? a.user_id ?? "unknown"} ·{" "}
|
||||
{a.categories?.length ? (
|
||||
<span className="truncate font-mono text-[10px] text-ink-faint">
|
||||
[{a.categories.slice(0, 2).join(", ")}]
|
||||
</span>
|
||||
) : null}
|
||||
<span className="ml-auto font-mono text-[10px] text-ink-faint">
|
||||
{formatRelativeTime(a.created_at)}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
{a.reason && (
|
||||
<p className="mt-1 font-sans text-xs text-ink-soft line-clamp-2">
|
||||
“{a.reason}”
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-1.5 flex items-center gap-2 font-mono text-[10px] text-ink-faint">
|
||||
<span>TARGET:</span>
|
||||
<span className="text-ink-soft">
|
||||
{a.username ?? a.user_id ?? "UNKNOWN_SUBJECT"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { ChevronDown, Globe } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { GlassPanel } from "@/components/primitives";
|
||||
import { ChevronDown, Download, Globe, Search } from "lucide-react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { Badge, GlassPanel } from "@/components/primitives";
|
||||
import { SectionHeader } from "@/components/shared";
|
||||
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||
import { downloadCsv } from "@/lib/csv";
|
||||
@@ -14,25 +14,27 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<div className="glossary-entry overflow-hidden rounded-md border border-hairline bg-surface/30">
|
||||
<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]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface/50"
|
||||
className="flex w-full items-center justify-between gap-3 px-3.5 py-3 text-left transition-colors"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<span className="flex min-w-0 items-baseline gap-2">
|
||||
<span className="truncate font-medium text-ink">{t.term}</span>
|
||||
<span className="mono shrink-0 text-[10px] text-ink-faint">
|
||||
{t.hit_count} uses
|
||||
<div className="flex min-w-0 items-baseline gap-2.5">
|
||||
<span className="truncate font-mono text-xs font-semibold text-ink">
|
||||
{t.term}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-2 font-mono text-[10px] text-ink-faint">
|
||||
{formatRelativeTime(t.resolved_at)}
|
||||
<Badge tone="signal" className="font-mono text-[9px]">
|
||||
{t.hit_count} hits
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2.5 font-mono text-[10px] text-ink-faint">
|
||||
<span>{formatRelativeTime(t.resolved_at)}</span>
|
||||
<ChevronDown
|
||||
className={`size-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
|
||||
className={`size-3.5 text-ink-muted transition-transform duration-200 ${open ? "rotate-180 text-ink" : ""}`}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
ref={bodyRef}
|
||||
@@ -40,14 +42,16 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
|
||||
style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
<div className="border-t border-hairline px-3 py-2.5 text-sm">
|
||||
<p className="text-ink-faint">{t.definition}</p>
|
||||
<div className="border-t border-white/[0.04] bg-black/20 px-3.5 py-2.5 text-xs">
|
||||
<p className="font-sans text-ink-soft leading-relaxed">
|
||||
{t.definition}
|
||||
</p>
|
||||
{t.source_url && (
|
||||
<a
|
||||
href={t.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-1.5 inline-flex items-center gap-1 text-xs text-ink-soft hover:text-ink"
|
||||
className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-[#7170ff] hover:underline"
|
||||
>
|
||||
<Globe className="size-3" />
|
||||
{t.source_url}
|
||||
@@ -61,65 +65,94 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
|
||||
}
|
||||
|
||||
export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
|
||||
const [filter, setFilter] = useState("");
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!filter.trim()) return terms;
|
||||
const q = filter.toLowerCase();
|
||||
return terms.filter(
|
||||
(t) =>
|
||||
t.term.toLowerCase().includes(q) ||
|
||||
t.definition?.toLowerCase().includes(q),
|
||||
);
|
||||
}, [terms, filter]);
|
||||
|
||||
const listRef = useStaggerReveal<HTMLDivElement>(".glossary-entry", {
|
||||
stagger: 0.035,
|
||||
y: 10,
|
||||
dependencies: [terms],
|
||||
stagger: 0.025,
|
||||
y: 8,
|
||||
dependencies: [filtered.length, filter],
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex size-3 items-center justify-center">
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
|
||||
<span className="relative inline-flex size-2 rounded-full bg-signal" />
|
||||
</div>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||
TERM GLOSSARY · KB_INDEX
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] 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">
|
||||
Slang & Term Glossary · Knowledge Base
|
||||
</h1>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||
<span className="text-ink-faint">TERMS:</span>
|
||||
<span className="font-bold text-signal">{terms.length}</span>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
|
||||
<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]">
|
||||
{terms.length} TERMS_RECORDED
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GlassPanel className="lg:col-span-3">
|
||||
{/* Filter and Action Bar */}
|
||||
<GlassPanel className="flex flex-wrap items-center justify-between gap-3 p-3">
|
||||
<div className="relative flex-1 min-w-[220px]">
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
{terms.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
downloadCsv(
|
||||
"glossary.csv",
|
||||
terms.map((t) => ({
|
||||
term: t.term,
|
||||
definition: t.definition,
|
||||
source: t.source_url,
|
||||
resolved: t.resolved_at,
|
||||
hits: t.hit_count,
|
||||
})),
|
||||
)
|
||||
}
|
||||
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"
|
||||
>
|
||||
<Download className="size-3.5 text-[#7170ff]" />
|
||||
EXPORT_CSV
|
||||
</button>
|
||||
)}
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="knowledge"
|
||||
title="Term Knowledge Base"
|
||||
eyebrow="knowledge directory"
|
||||
title="Slang & Definition Index"
|
||||
action={
|
||||
terms.length > 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
downloadCsv(
|
||||
"glossary.csv",
|
||||
terms.map((t) => ({
|
||||
term: t.term,
|
||||
definition: t.definition,
|
||||
source: t.source_url,
|
||||
resolved: t.resolved_at,
|
||||
hits: t.hit_count,
|
||||
})),
|
||||
)
|
||||
}
|
||||
className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink"
|
||||
>
|
||||
EXPORT_CSV
|
||||
</button>
|
||||
) : null
|
||||
<span className="mono text-xs text-[#8a8f98]">
|
||||
{filtered.length} of {terms.length} terms
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{terms.length === 0 ? (
|
||||
<p className="py-6 text-center font-mono text-xs text-ink-faint">
|
||||
NO TERM RESOLUTIONS CACHED YET
|
||||
</p>
|
||||
{filtered.length === 0 ? (
|
||||
<div className="py-12 text-center font-mono text-xs text-ink-faint">
|
||||
NO TERM DEFINITIONS MATCH YOUR FILTER
|
||||
</div>
|
||||
) : (
|
||||
<div ref={listRef} className="space-y-2">
|
||||
{terms.map((t) => (
|
||||
<div ref={listRef} className="space-y-1.5 mt-3">
|
||||
{filtered.map((t) => (
|
||||
<GlossaryEntry key={t.term} t={t} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Bot,
|
||||
MessageSquare,
|
||||
Send,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { Avatar, Button, GlassPanel, toast } from "@/components/primitives";
|
||||
import { Bot, MessageSquare, Send, Trash2, X } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Button, toast } from "@/components/primitives";
|
||||
import { MarkdownLite } from "@/components/shared";
|
||||
import { useChatbotUserId } from "@/hooks/use-chatbot-user";
|
||||
import { chatbotApi } from "@/lib/api";
|
||||
@@ -86,7 +80,7 @@ export function Chatbot() {
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [msgs, loading]);
|
||||
}, []);
|
||||
|
||||
const send = async (text: string) => {
|
||||
if (!text.trim() || loading || !userId) return;
|
||||
@@ -132,7 +126,11 @@ export function Chatbot() {
|
||||
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]" />}
|
||||
{open ? (
|
||||
<X className="size-4" />
|
||||
) : (
|
||||
<MessageSquare className="size-4 text-[#7170ff]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
|
||||
@@ -16,13 +16,11 @@ function NavItem({
|
||||
label,
|
||||
active,
|
||||
Icon,
|
||||
index,
|
||||
}: {
|
||||
href: string;
|
||||
label: string;
|
||||
active: boolean;
|
||||
Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
index: number;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
@@ -36,10 +34,7 @@ function NavItem({
|
||||
: "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className="relative z-10 size-4"
|
||||
strokeWidth={active ? 2.2 : 1.8}
|
||||
/>
|
||||
<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]" />
|
||||
@@ -83,12 +78,11 @@ export function NavRail() {
|
||||
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"
|
||||
>
|
||||
<div className="flex flex-1 flex-col gap-1">
|
||||
{navItems.map((item, i) => (
|
||||
{navItems.map((item) => (
|
||||
<NavItem
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
label={item.label}
|
||||
index={i}
|
||||
active={isActivePath(path, item.matchPrefix)}
|
||||
Icon={item.icon}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user