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

Refactor moderation and recordings views; enhance UI components and improve performance

Browse Source 
- 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
2026-08-26 10:39:00 +07:00
parent 3b688e0d0f
commit ccfe769b2f
12 changed files with 693 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/app/(dashboard)/analysis/view.tsx
+77 -64
View File
@@ -8,6 +8,7 @@ import { useAmbient } from "@/components/ambient/ambient-context";
import { Avatar, Badge, GlassPanel, Input } from "@/components/primitives"; import { Avatar, Badge, GlassPanel, Input } from "@/components/primitives";
import { EmptyState, SectionHeader, SkeletonRows } from "@/components/shared"; import { EmptyState, SectionHeader, SkeletonRows } from "@/components/shared";
import { useChannels, useMessageSearch, useTopReactors } from "@/hooks"; import { useChannels, useMessageSearch, useTopReactors } from "@/hooks";
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
import { aiTone } from "@/lib/ai-status"; import { aiTone } from "@/lib/ai-status";
import { import {
formatDuration, formatDuration,
@@ -29,6 +30,12 @@ export function AnalysisView() {
const reactorsRef = useRef<HTMLDivElement>(null); const reactorsRef = useRef<HTMLDivElement>(null);
const channelsRef = 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(() => { useEffect(() => {
ambient.set( ambient.set(
query ? "amber" : "signal", query ? "amber" : "signal",
@@ -109,90 +116,90 @@ export function AnalysisView() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3"> <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-3"> <div className="flex items-center gap-2.5">
<div className="relative flex size-3 items-center justify-center"> <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" /> <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="relative inline-flex size-2 rounded-full bg-signal" /> Deep Scan · Semantic Search & Telemetry Analysis
</div>
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
ANALYSIS ENGINE · DEEP_SCAN
</h1> </h1>
</div> </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"> <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<span className="text-ink-faint">MODE:</span> <span>ENGINE:</span>
<span className="font-bold text-signal"> <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 ? "SEARCHING" : "IDLE"} {query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
</span> </span>
</div> </div>
</div> </div>
<GlassPanel glow className="relative overflow-hidden"> {/* Hero Query Stage */}
<div className="scan-line absolute inset-x-0 top-0" /> <GlassPanel className="p-5">
<div className="flex items-center gap-3"> <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>
<div className="eyebrow">Semantic search</div> <h2 className="text-base font-semibold text-ink">
<h2 className="display text-balance text-2xl text-ink"> Cross-Guild Archive Intelligence
Search the archive
</h2> </h2>
<p className="font-mono text-[11px] text-[#8a8f98]">
Query vectorized messages, heuristic flags, and user behavior
</p>
</div> </div>
</div> </div>
<div className="relative mt-4"> <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 <Input
className="h-12 pl-12 text-base" className="h-10 pl-10 text-xs text-ink"
placeholder="Find messages, patterns, flags…" placeholder="Search keywords, behavioral patterns, infraction terms..."
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
autoFocus autoFocus
/> />
</div> </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> </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"> <GlassPanel className="lg:col-span-3">
<SectionHeader <SectionHeader
eyebrow="results" eyebrow="search output"
title="Matches" title="Matched Log Packets"
action={ action={
<span className="mono text-xs text-ink-faint"> <span className="mono text-xs text-[#8a8f98]">
{(search.data ?? []).length} {(search.data ?? []).length} results
</span> </span>
} }
/> />
{query.trim().length >= 2 && search.isLoading && ( {query.trim().length >= 2 && search.isLoading && (
<SkeletonRows rows={6} /> <SkeletonRows rows={6} />
)} )}
{(search.data ?? []).length === 0 ? ( {(search.data ?? []).length === 0 && !search.isLoading ? (
<EmptyState <EmptyState
icon={<Search className="size-7" />} icon={<Search className="size-7" />}
title="No matches yet" title="No packets matched"
description="Run a search to surface messages across the guild." 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) => ( {(search.data ?? []).map((m) => (
<div <div
key={m.id} 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} /> <Avatar src={m.avatar_url} name={m.username} size={32} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <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} {m.username}
</span> </span>
<span className="mono text-[0.65rem] text-ink-faint"> <span className="font-mono text-[10px] text-ink-faint">
{getMessageChannelLabel(m)} {getMessageChannelLabel(m)}
</span> </span>
{m.ai_status && ( {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 &&
m.ai_analysis_duration_ms > 0 m.ai_analysis_duration_ms > 0
? `${m.ai_status} · ${formatDuration(m.ai_analysis_duration_ms)}` ? `${m.ai_status} · ${formatDuration(m.ai_analysis_duration_ms)}`
@@ -200,7 +207,7 @@ export function AnalysisView() {
</Badge> </Badge>
)} )}
</div> </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)"} {renderMessageContent(m.content, m.metadata) || "(embed)"}
</div> </div>
</div> </div>
@@ -210,17 +217,19 @@ export function AnalysisView() {
)} )}
</GlassPanel> </GlassPanel>
<div className="space-y-5 lg:col-span-2"> {/* Culture & Leaderboard Side Column */}
<div className="space-y-3 lg:col-span-2">
<GlassPanel> <GlassPanel>
<SectionHeader <SectionHeader
eyebrow="culture" eyebrow="engagement"
title={ title={
<span className="flex items-center gap-2"> <span className="flex items-center gap-1.5">
<TrendingUp className="size-4 text-signal" /> Top reactors <TrendingUp className="size-3.5 text-[#7170ff]" /> Top
Reactors
</span> </span>
} }
/> />
<div ref={reactorsRef} className="space-y-2"> <div ref={reactorsRef} className="space-y-2 mt-3">
{(reactors ?? []).slice(0, 6).map((r, i) => { {(reactors ?? []).slice(0, 6).map((r, i) => {
const maxNet = reactors?.[0]?.net_count || 1; const maxNet = reactors?.[0]?.net_count || 1;
const pct = Math.max( const pct = Math.max(
@@ -230,20 +239,22 @@ export function AnalysisView() {
return ( return (
<div <div
key={r.user_id} 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="font-mono w-4 text-[10px] text-ink-faint">
<span className="w-28 shrink-0 truncate text-ink-soft sm:w-40"> 0{i + 1}
</span>
<span className="w-24 shrink-0 truncate font-mono text-xs text-ink sm:w-32">
{r.username} {r.username}
</span> </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 <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}%` }} style={{ width: `${pct}%` }}
/> />
</div> </div>
<span <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} data-target={r.net_count}
> >
+0 +0
@@ -252,8 +263,8 @@ export function AnalysisView() {
); );
})} })}
{(reactors ?? []).length === 0 && ( {(reactors ?? []).length === 0 && (
<div className="py-4 text-center text-xs text-ink-faint"> <div className="py-4 text-center font-mono text-xs text-ink-faint">
No data NO REACTOR DATA
</div> </div>
)} )}
</div> </div>
@@ -261,30 +272,32 @@ export function AnalysisView() {
<GlassPanel> <GlassPanel>
<SectionHeader <SectionHeader
eyebrow="channels" eyebrow="volume"
title={ title={
<span className="flex items-center gap-2"> <span className="flex items-center gap-1.5">
<Hash className="size-4 text-signal" /> Top channels <Hash className="size-3.5 text-[#7170ff]" /> Top Active
Channels
</span> </span>
} }
/> />
<div ref={channelsRef} className="space-y-2"> <div ref={channelsRef} className="space-y-2 mt-3">
{(channels ?? []).slice(0, 6).map((c) => ( {(channels ?? []).slice(0, 6).map((c) => (
<div <div
key={c.channel_id} 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"> <span className="flex items-center gap-1.5 truncate font-mono text-xs text-ink">
{c.channel_name ?? c.channel_id.slice(0, 8)} <Hash className="size-3 text-[#7170ff]" />
{c.channel_name ?? c.channel_id.slice(0, 10)}
</span> </span>
<span className="mono text-xs text-ink-faint"> <span className="font-mono text-[10px] text-[#8a8f98]">
{c.total_messages} {c.total_messages.toLocaleString()} msgs
</span> </span>
</div> </div>
))} ))}
{(channels ?? []).length === 0 && ( {(channels ?? []).length === 0 && (
<div className="py-4 text-center text-xs text-ink-faint"> <div className="py-4 text-center font-mono text-xs text-ink-faint">
No data NO CHANNEL DATA
</div> </div>
)} )}
</div> </div>
services/frontend/src/app/(dashboard)/dashboard/view.tsx
+7 -7
View File
@@ -3,7 +3,6 @@
import { import {
AudioWaveform, AudioWaveform,
ChevronRight, ChevronRight,
Flame,
MessageSquare, MessageSquare,
Mic, Mic,
Shield, Shield,
@@ -177,13 +176,17 @@ export function DashboardView({
</div> </div>
<div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center"> <div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center">
<div> <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]"> <div className="font-sans text-sm font-semibold text-[#10b981]">
{formatNumber(s.total_clean)} {formatNumber(s.total_clean)}
</div> </div>
</div> </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]"> <div className="font-sans text-sm font-semibold text-[#f43f5e]">
{formatNumber(s.total_flagged)} {formatNumber(s.total_flagged)}
</div> </div>
@@ -220,10 +223,7 @@ export function DashboardView({
<GlassPanel className="linear-tile flex flex-col justify-between"> <GlassPanel className="linear-tile flex flex-col justify-between">
<div> <div>
<SectionHeader <SectionHeader eyebrow="Navigation" title="Quick Diagnostics" />
eyebrow="Navigation"
title="Quick Diagnostics"
/>
<div className="mt-2 space-y-1.5"> <div className="mt-2 space-y-1.5">
<Link <Link
href="/moderation" href="/moderation"
services/frontend/src/app/(dashboard)/media/view.tsx
+4 -10
View File
@@ -1,14 +1,6 @@
"use client"; "use client";
import { import { Disc, Play, Repeat, SkipForward, Square } from "lucide-react";
Disc,
ListMusic,
Play,
Repeat,
SkipForward,
Sliders,
Square,
} from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useAmbient } from "@/components/ambient/ambient-context"; import { useAmbient } from "@/components/ambient/ambient-context";
import { Equalizer } from "@/components/charts"; import { Equalizer } from "@/components/charts";
@@ -161,7 +153,9 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => loop.mutateAsync()} onClick={() => loop.mutateAsync()}
className={media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""} className={
media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""
}
> >
<Repeat className="size-3.5" /> <Repeat className="size-3.5" />
</Button> </Button>
services/frontend/src/app/(dashboard)/messages/view.tsx
+111 -87
View File
@@ -10,6 +10,7 @@ import {
Paperclip, Paperclip,
Search, Search,
ShieldAlert, ShieldAlert,
Sparkles,
} from "lucide-react"; } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { ActivityHeatmap } from "@/components/ActivityHeatmap"; import { ActivityHeatmap } from "@/components/ActivityHeatmap";
@@ -42,6 +43,7 @@ import {
useReviewWsSync, useReviewWsSync,
useSemanticSearch, useSemanticSearch,
} from "@/hooks"; } from "@/hooks";
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
import { aiTone } from "@/lib/ai-status"; import { aiTone } from "@/lib/ai-status";
import { import {
formatBytes, formatBytes,
@@ -57,7 +59,6 @@ import type {
Guild, Guild,
MessageRecord, MessageRecord,
} from "@/lib/types"; } from "@/lib/types";
import { staggerDelay } from "@/lib/utils";
import { useWebSocket } from "@/lib/ws/context"; import { useWebSocket } from "@/lib/ws/context";
export function MessagesView({ export function MessagesView({
@@ -217,28 +218,32 @@ export function MessagesView({
prevLen.current = list.length; prevLen.current = list.length;
}, [list.length, searching]); }, [list.length, searching]);
const streamRef = useStaggerReveal<HTMLDivElement>(".msg-feed-card", {
stagger: 0.02,
y: 6,
dependencies: [display.length, viewMode],
});
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3"> <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-3"> <div className="flex items-center gap-2.5">
<div className="relative flex size-3 items-center justify-center"> <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" /> <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="relative inline-flex size-2 rounded-full bg-signal" /> Chat Log Stream · Ingestion Stream
</div>
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
CHAT LOG STREAM · SCAN_01
</h1> </h1>
</div> </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"> <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<span className="text-ink-faint">FEED:</span> <span>MODE:</span>
<span className="font-bold text-signal"> <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
{searching ? "SEARCH" : viewMode.toUpperCase()} {searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
</span> </span>
</div> </div>
</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 <GuildChannelPicker
mode="text" mode="text"
guildsInitial={initialGuilds} guildsInitial={initialGuilds}
@@ -255,48 +260,72 @@ export function MessagesView({
<div className="relative ml-auto w-full sm:w-64"> <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" /> <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
<Input <Input
className="pl-9" className="pl-9 text-xs"
placeholder="Search messages…" placeholder="Search captured logs..."
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/> />
</div> </div>
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5">
<button <button
type="button" type="button"
onClick={() => setSemanticMode((v) => !v)} onClick={() => setSemanticMode(false)}
className={`rounded-full border px-3 py-1.5 text-xs transition-colors ${ 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 semanticMode
? "border-signal/40 bg-signal/10 text-signal" ? "bg-[#7170ff]/20 text-[#7170ff] border border-[#7170ff]/30"
: "border-hairline bg-white/[0.03] text-ink-soft hover:bg-white/[0.06]" : "text-[#8a8f98] hover:text-[#d0d6e0]"
}`} }`}
title="Toggle semantic (vector) search over the message archive"
> >
{semanticMode ? "Semantic" : "Exact"} <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>
<button <button
type="button" type="button"
onClick={() => onClick={() => setViewMode("timeline")}
setViewMode((v) => (v === "feed" ? "timeline" : "feed")) className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
}
className={`rounded-full border px-3 py-1.5 text-xs transition-colors ${
viewMode === "timeline" viewMode === "timeline"
? "border-signal/40 bg-signal/10 text-signal" ? "bg-white/[0.08] text-white border border-white/[0.12]"
: "border-hairline bg-white/[0.03] text-ink-soft hover:bg-white/[0.06]" : "text-[#8a8f98] hover:text-[#d0d6e0]"
}`} }`}
title="Toggle timeline (date-grouped) view"
> >
{viewMode === "timeline" ? "Timeline" : "Feed"} TIMELINE
</button> </button>
</div>
</GlassPanel> </GlassPanel>
<div className="grid gap-4 lg:grid-cols-5"> <div className="grid gap-3 lg:grid-cols-5">
{semanticSearching && ( {semanticSearching && (
<GlassPanel className="lg:col-span-5"> <GlassPanel className="lg:col-span-5">
<SectionHeader <SectionHeader
eyebrow="semantic" eyebrow="semantic archive"
title={`“${query}”`} title={`Vector Matches for “${query}”`}
action={ action={
<span className="mono text-xs text-ink-faint"> <span className="mono text-xs text-[#8a8f98]">
{semantic.data?.length ?? 0} matches {semantic.data?.length ?? 0} matches
</span> </span>
} }
@@ -308,19 +337,18 @@ export function MessagesView({
{semantic.data.map((r, i) => ( {semantic.data.map((r, i) => (
<div <div
key={r.message_id ?? i} key={r.message_id ?? i}
className="animate-stagger flex items-start gap-3 rounded-[10px] border border-hairline bg-white/[0.03] p-3" 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]"
style={staggerDelay(i)}
> >
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="mono text-[0.6rem] text-signal"> <span className="font-mono text-[10px] font-semibold text-[#7170ff]">
{(r.score * 100).toFixed(0)}% {(r.score * 100).toFixed(0)}% RELEVANCE
</span> </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)} {formatRelativeTime(r.created_at)}
</span> </span>
</div> </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} {r.content}
</div> </div>
</div> </div>
@@ -331,19 +359,20 @@ export function MessagesView({
<EmptyState <EmptyState
icon={<Search className="size-7" />} icon={<Search className="size-7" />}
title="No semantic matches" 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> </GlassPanel>
)} )}
{/* Message Stream Deck */}
<GlassPanel className="lg:col-span-3"> <GlassPanel className="lg:col-span-3">
<SectionHeader <SectionHeader
eyebrow={searching ? "results" : "live feed"} eyebrow={searching ? "query results" : "realtime log"}
title={searching ? `“${query}”` : "Messages"} title={searching ? `Matches for “${query}”` : "Message Stream"}
action={ action={
<span className="mono text-xs text-ink-faint"> <span className="mono text-xs text-[#8a8f98]">
{list.length} shown {list.length} messages
</span> </span>
} }
/> />
@@ -354,48 +383,40 @@ export function MessagesView({
) : list.length === 0 ? ( ) : list.length === 0 ? (
<EmptyState <EmptyState
icon={<MessageSquare className="size-7" />} icon={<MessageSquare className="size-7" />}
title="No messages" title="No messages captured"
description="Pick a guild to begin, or run a search." description="Select a channel or verify discord bridge is active."
/> />
) : ( ) : (
<div> <div>
{!searching && ( {!searching && (
<div className="mb-2 flex items-center justify-center gap-2"> <div className="mb-2 flex items-center justify-center gap-2">
{loadMore.isPending ? ( {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" /> <Loader2 className="size-3.5 animate-spin" />
Loading older… FETCHING EARLIER PACKETS...
</span> </span>
) : hasMore && loadedPages < MAX_OLDER_PAGES ? ( ) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
<button <button
type="button" type="button"
onClick={loadOlder} 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> </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 && <span className="font-mono text-[10px] text-[#62666d]">
messages.length > 0 && ( {loadedPages >= MAX_OLDER_PAGES
<span className="mono text-[0.65rem] text-ink-faint"> ? `CAPPED AT ${MAX_OLDER_PAGES} PAGES`
beginning of history : "STREAM ROOT REACHED"}
</span> </span>
)
)} )}
</div> </div>
)} )}
<div <div
ref={scrollRef} 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) => { onScroll={(e) => {
const el = e.currentTarget; 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 = nearBottomRef.current =
el.scrollHeight - el.scrollTop - el.clientHeight < 120; el.scrollHeight - el.scrollTop - el.clientHeight < 120;
if (searching || !hasMore || loadMore.isPending) return; if (searching || !hasMore || loadMore.isPending) return;
@@ -405,14 +426,15 @@ export function MessagesView({
} }
}} }}
> >
<div ref={streamRef} className="space-y-1.5">
{viewMode === "timeline" && timelineNodes {viewMode === "timeline" && timelineNodes
? timelineNodes.map((node, _i) => ? timelineNodes.map((node) =>
node.type === "date" ? ( node.type === "date" ? (
<div <div
key={`date-${node.iso}`} key={`date-${node.iso}`}
className="flex items-center gap-2 px-1 text-[0.65rem] text-ink-faint" className="flex items-center gap-2 py-1 font-mono text-[10px] text-[#8a8f98]"
> >
<Calendar className="size-3" /> <Calendar className="size-3 text-[#7170ff]" />
{node.label} {node.label}
</div> </div>
) : ( ) : (
@@ -424,7 +446,7 @@ export function MessagesView({
/> />
), ),
) )
: display.map((m, _i) => ( : display.map((m) => (
<MessageRow <MessageRow
key={m.id} key={m.id}
m={m} m={m}
@@ -434,15 +456,17 @@ export function MessagesView({
))} ))}
</div> </div>
</div> </div>
</div>
)} )}
</GlassPanel> </GlassPanel>
{/* Message Inspector Detail Panel */}
<GlassPanel className="lg:col-span-2"> <GlassPanel className="lg:col-span-2">
<SectionHeader eyebrow="inspect" title="Detail" /> <SectionHeader eyebrow="telemetry analysis" title="Inspector Deck" />
{!selected ? ( {!selected ? (
<EmptyState <EmptyState
title="Select a message" 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 ? ( ) : detail.loading ? (
<div className="space-y-2"> <div className="space-y-2">
@@ -455,7 +479,7 @@ export function MessagesView({
attachments={detail.attachments} attachments={detail.attachments}
/> />
) : ( ) : (
<EmptyState title="Not found" /> <EmptyState title="Packet not found" />
)} )}
</GlassPanel> </GlassPanel>
</div> </div>
@@ -530,15 +554,15 @@ function MessageDetail({
</div> </div>
</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) || {renderMessageContent(m.edited_content ?? m.content, m.metadata) ||
"(no text)"} "(no text content)"}
</div> </div>
{m.ai_analysis && ( {m.ai_analysis && (
<div> <div>
<div className="eyebrow mb-1">AI analysis</div> <div className="eyebrow mb-1">AI heuristic reasoning</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-[#8a8f98] leading-relaxed">
{m.ai_analysis} {m.ai_analysis}
</div> </div>
</div> </div>
@@ -571,11 +595,11 @@ function MessageDetail({
href={a.discord_url ?? a.uploaded_url ?? "#"} href={a.discord_url ?? a.uploaded_url ?? "#"}
target="_blank" target="_blank"
rel="noreferrer" 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="flex-1 truncate">{a.filename}</span>
<span className="mono text-ink-faint"> <span className="mono text-[10px] text-[#8a8f98]">
{formatBytes(a.size)} {formatBytes(a.size)}
</span> </span>
</a> </a>
@@ -602,28 +626,28 @@ function MessageRow({
key={m.id} key={m.id}
type="button" type="button"
onClick={() => onSelect(m.id)} 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 selected === m.id
? "border-signal/40 bg-signal/8" ? "border-[#7170ff]/40 bg-[#7170ff]/10"
: "border-hairline bg-white/[0.03] hover:bg-white/[0.06]" : "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="min-w-0 flex-1">
<div className="flex items-center gap-2"> <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} {m.username}
</span> </span>
<span className="mono text-[0.65rem] text-ink-faint"> <span className="font-mono text-[10px] text-[#8a8f98]">
{getMessageChannelLabel(m)} {getMessageChannelLabel(m)}
</span> </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)} {formatRelativeTime(m.created_at)}
</span> </span>
</div> </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) || ( {renderMessageContent(m.content, m.metadata) || (
<span className="italic text-ink-faint">(empty / embed)</span> <span className="italic text-[#8a8f98]">(empty / embed)</span>
)} )}
</div> </div>
</div> </div>
services/frontend/src/app/(dashboard)/moderation/view.tsx
+4 -14
View File
@@ -1,19 +1,13 @@
"use client"; "use client";
import {
AlertTriangle,
CheckCircle2,
Filter,
Shield,
ShieldAlert,
} from "lucide-react";
import { useEffect, useState } from "react";
import { useGSAP } from "@gsap/react"; import { useGSAP } from "@gsap/react";
import gsap from "gsap"; import gsap from "gsap";
import { AlertTriangle, CheckCircle2, Shield } from "lucide-react";
import { useEffect, useState } from "react";
import { useAmbient } from "@/components/ambient/ambient-context"; import { useAmbient } from "@/components/ambient/ambient-context";
import { LiveModerationFeed } from "@/components/LiveModerationFeed"; import { LiveModerationFeed } from "@/components/LiveModerationFeed";
import { ModerationHeatmap } from "@/components/ModerationHeatmap"; import { ModerationHeatmap } from "@/components/ModerationHeatmap";
import { Button, GlassPanel } from "@/components/primitives"; import { GlassPanel } from "@/components/primitives";
import { import {
ErrorState, ErrorState,
MetricTile, MetricTile,
@@ -25,9 +19,7 @@ import {
import { import {
useHourlyModeration, useHourlyModeration,
useModerationActions, useModerationActions,
useModerationCoverage,
useModerationStats, useModerationStats,
useModerationTrends,
} from "@/hooks"; } from "@/hooks";
import { useStaggerReveal } from "@/hooks/use-gsap-animation"; import { useStaggerReveal } from "@/hooks/use-gsap-animation";
import { formatNumber } from "@/lib/format"; import { formatNumber } from "@/lib/format";
@@ -44,7 +36,7 @@ if (typeof window !== "undefined") {
export function ModerationView({ export function ModerationView({
initialStats, initialStats,
initialActions, initialActions,
initialCoverage, initialCoverage: _initialCoverage,
}: { }: {
initialStats?: ModerationStats; initialStats?: ModerationStats;
initialActions?: ModerationAction[]; initialActions?: ModerationAction[];
@@ -62,8 +54,6 @@ export function ModerationView({
initialActions, initialActions,
); );
const { data: hourly } = useHourlyModeration(); const { data: hourly } = useHourlyModeration();
const { data: trends } = useModerationTrends(14);
const { data: coverage } = useModerationCoverage(30);
const ambient = useAmbient(); const ambient = useAmbient();
const [filterMode, setFilterMode] = useState<"all" | "flagged" | "clean">( const [filterMode, setFilterMode] = useState<"all" | "flagged" | "clean">(
services/frontend/src/app/(dashboard)/recordings/view.tsx
+60 -53
View File
@@ -6,7 +6,6 @@ import { useAmbient } from "@/components/ambient/ambient-context";
import { import {
Avatar, Avatar,
Badge, Badge,
Button,
GlassCard, GlassCard,
GlassPanel, GlassPanel,
Skeleton, Skeleton,
@@ -40,8 +39,8 @@ export function RecordingsView({
const [playingId, setPlayingId] = useState<string | null>(null); const [playingId, setPlayingId] = useState<string | null>(null);
const deckRef = useStaggerReveal<HTMLDivElement>(".recording-deck-card", { const deckRef = useStaggerReveal<HTMLDivElement>(".recording-deck-card", {
stagger: 0.05, stagger: 0.04,
y: 14, y: 10,
dependencies: [items], dependencies: [items],
}); });
@@ -88,84 +87,86 @@ export function RecordingsView({
</GlassPanel> </GlassPanel>
); );
const totalRecordings = (items ?? []).length;
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3"> <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-3"> <div className="flex items-center gap-2.5">
<div className="relative flex size-3 items-center justify-center"> <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" /> <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="relative inline-flex size-2 rounded-full bg-signal" /> Tape Deck · Captured Audio Archive
</div>
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
RECORDINGS · TAPE_DECK
</h1> </h1>
</div> </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"> <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<span className="text-ink-faint">CLIPS:</span> <span>STATUS:</span>
<span className="font-bold text-signal">{(items ?? []).length}</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>
</div> </div>
<GlassPanel> <GlassPanel>
<SectionHeader <SectionHeader
eyebrow="voice captures" eyebrow="acoustic buffer"
title="Recordings" title="Voice Capture Tape Deck"
action={ action={
<span className="mono text-xs text-ink-faint"> <span className="mono text-xs text-[#8a8f98]">
{(items ?? []).length} clips {totalRecordings} clips archived
</span> </span>
} }
/> />
{(items ?? []).length === 0 ? ( {totalRecordings === 0 ? (
<EmptyState <EmptyState
icon={<Headphones className="size-7" />} icon={<Headphones className="size-7" />}
title="No recordings" title="Tape deck is empty"
description="Voice clips captured by the bot appear here." description="Voice transmissions captured in connected channels will be archived here."
/> />
) : ( ) : (
<div <div
ref={deckRef} 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) => { {(items ?? []).map((r) => {
const up = uploadStatus(r); const up = uploadStatus(r);
const isPlaying = playingId === r.id; const isPlaying = playingId === r.id;
return ( return (
<GlassCard <div
key={r.id} 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 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"> <div>
<Avatar src={r.avatar_url} name={r.username} size={38} /> {/* 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="min-w-0 flex-1">
<div className="truncate text-sm font-semibold text-ink"> <div className="truncate text-xs font-semibold text-ink">
{r.username} {r.username}
</div> </div>
<div className="flex items-center gap-1.5 text-[0.65rem] text-ink-faint"> <div className="flex items-center gap-1.5 font-mono text-[10px] text-ink-faint">
<Hash className="size-3" /> <Hash className="size-2.5 text-[#7170ff]" />
<span className="truncate"> <span className="truncate">
{r.channel_name ?? "voice"} {r.channel_name ?? "voice"}
</span> </span>
<span className="text-ink-faint/60">·</span> <span>·</span>
<span className="mono"> <span>{formatRelativeTime(r.created_at)}</span>
{formatRelativeTime(r.created_at)}
</span>
</div> </div>
</div> </div>
{isPlaying && <NowPlayingChip />} {isPlaying && <NowPlayingChip />}
{up && !isPlaying && ( {up && !isPlaying && (
<Badge tone={up.tone}>{up.label}</Badge> <Badge tone={up.tone} className="font-mono text-[9px]">
{up.label}
</Badge>
)} )}
<span className="mono text-[0.65rem] text-ink-faint">
{formatBytes(r.size_bytes)}
</span>
</div> </div>
{/* Audio Player Scrub */}
<div className="my-3">
{r.download_url ? ( {r.download_url ? (
<RecordingAudioPlayer <RecordingAudioPlayer
src={r.download_url} src={r.download_url}
@@ -173,44 +174,50 @@ export function RecordingsView({
onPlayStateChange={(active) => onPlayStateChange={(active) =>
setPlayingId((prev) => { setPlayingId((prev) => {
if (active) return r.id; if (active) return r.id;
// Only clear if THIS card was the one playing.
return prev === r.id ? null : prev; 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"> <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" /> <Loader2 className="size-3.5 animate-spin text-[#7170ff]" />
{r.upload_status === "pending" {r.upload_status === "pending"
? "Upload pending…" ? "UPLOAD_PENDING..."
: r.upload_error : r.upload_error
? r.upload_error ? r.upload_error
: "Processing…"} : "SYNTHESIZING_PCM..."}
</div> </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 className="flex items-center gap-2"> <div className="flex items-center gap-2">
{r.download_url && ( {r.download_url && (
<a <a
href={r.download_url} href={r.download_url}
target="_blank" target="_blank"
rel="noreferrer" 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" 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.5" /> Download <Download className="size-3 text-[#7170ff]" /> RAW
</a> </a>
)} )}
<Button <button
variant="outline" type="button"
size="sm"
className="ml-auto"
onClick={() => onDelete(r.id)} onClick={() => onDelete(r.id)}
disabled={del.isPending} 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"
> >
<Trash2 className="size-3.5" /> Delete <Trash2 className="size-3" /> PURGE
</Button> </button>
</div>
</div>
</div> </div>
</GlassCard>
); );
})} })}
</div> </div>
services/frontend/src/app/(dashboard)/voice/view.tsx
+2 -17
View File
@@ -1,22 +1,10 @@
"use client"; "use client";
import { import { Mic, PhoneOff, Radio, Volume2 } from "lucide-react";
AudioWaveform,
Disc,
Headphones,
Mic,
MicOff,
PhoneOff,
Radio,
Volume2,
Waves,
} from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useAmbient } from "@/components/ambient/ambient-context"; import { useAmbient } from "@/components/ambient/ambient-context";
import { Equalizer } from "@/components/charts";
import { Button, GlassPanel, toast } from "@/components/primitives"; import { Button, GlassPanel, toast } from "@/components/primitives";
import { import {
EmptyState,
ErrorState, ErrorState,
PageTransition, PageTransition,
SectionHeader, SectionHeader,
@@ -212,10 +200,7 @@ export function VoiceView({
<GlassPanel className="voice-tile flex flex-col justify-between"> <GlassPanel className="voice-tile flex flex-col justify-between">
<div> <div>
<SectionHeader <SectionHeader eyebrow="Telemetry" title="Input / Output Mix" />
eyebrow="Telemetry"
title="Input / Output Mix"
/>
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
<div> <div>
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]"> <div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
services/frontend/src/components/ChannelCultureGlossary.tsx
+130 -50
View File
@@ -1,8 +1,8 @@
"use client"; "use client";
import { Radio, Signal } from "lucide-react"; import { Activity, Download, Hash } from "lucide-react";
import { useMemo } from "react"; import { useMemo, useState } from "react";
import { GlassPanel } from "@/components/primitives"; import { Badge, GlassPanel } from "@/components/primitives";
import { SectionHeader } from "@/components/shared"; import { SectionHeader } from "@/components/shared";
import { useStaggerReveal } from "@/hooks/use-gsap-animation"; import { useStaggerReveal } from "@/hooks/use-gsap-animation";
import { downloadCsv } from "@/lib/csv"; import { downloadCsv } from "@/lib/csv";
@@ -10,16 +10,16 @@ import { formatRelativeTime } from "@/lib/format";
import type { ChannelCultureRow } from "@/lib/types"; import type { ChannelCultureRow } from "@/lib/types";
function deriveSignalStrength(c: ChannelCultureRow): number { function deriveSignalStrength(c: ChannelCultureRow): number {
let score = 0.25; let score = 0.3;
if (c.culture_summary) { 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) { if (c.last_analyzed_at) {
const ageMs = Date.now() - c.last_analyzed_at; const ageMs = Date.now() - c.last_analyzed_at;
const days = ageMs / (1000 * 60 * 60 * 24); 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({ export function ChannelCultureGlossary({
@@ -27,27 +27,47 @@ export function ChannelCultureGlossary({
}: { }: {
cultures: ChannelCultureRow[]; cultures: ChannelCultureRow[];
}) { }) {
const ranked = useMemo( const [filter, setFilter] = useState("");
() =>
cultures
.map((c) => ({ c, signal: deriveSignalStrength(c) }))
.sort((a, b) => b.signal - a.signal),
[cultures],
);
const containerRef = useStaggerReveal<HTMLDivElement>(".channel-row", { const ranked = useMemo(() => {
stagger: 0.025, return cultures
y: 6, .map((c) => ({ c, signal: deriveSignalStrength(c) }))
dependencies: [cultures], .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 ( return (
<GlassPanel> <div className="space-y-4">
<SectionHeader {/* Search and Quick Filters */}
eyebrow="Roster Intelligence" <GlassPanel className="flex flex-wrap items-center justify-between gap-3 p-3">
title="Channel Culture & Activity Roster" <div className="relative flex-1 min-w-[220px]">
action={ <Hash className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
cultures.length > 0 ? ( <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 <button
type="button" type="button"
onClick={() => 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 EXPORT_CSV
</button> </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> </div>
{c.culture_summary && ( </GlassPanel>
<p className="font-sans text-xs text-[#8a8f98] leading-relaxed line-clamp-2">
{/* 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} {c.culture_summary}
</p> </p>
) : (
<p className="font-mono text-[11px] text-ink-faint italic">
Awaiting AI culture profile synthesis...
</p>
)} )}
</div> </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> </div>
)} )}
</GlassPanel> </GlassPanel>
</div>
); );
} }
services/frontend/src/components/LiveModerationFeed.tsx
+103 -37
View File
@@ -1,9 +1,17 @@
"use client"; "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 { formatRelativeTime } from "@/lib/format";
import type { ModerationAction } from "@/lib/types"; import type { ModerationAction } from "@/lib/types";
if (typeof window !== "undefined") {
gsap.registerPlugin(useGSAP);
}
const ACTION_LABEL: Record<string, string> = { const ACTION_LABEL: Record<string, string> = {
delete_message: "Deleted", delete_message: "Deleted",
timeout_user: "Timeout", timeout_user: "Timeout",
@@ -15,6 +23,21 @@ const ACTION_LABEL: Record<string, string> = {
none: "None", 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( function severityTone(
sev?: string | null, sev?: string | null,
): "signal" | "amber" | "vermilion" | null { ): "signal" | "amber" | "vermilion" | null {
@@ -36,67 +59,110 @@ export function LiveModerationFeed({
}: { }: {
actions: ModerationAction[]; 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 ( return (
<GlassPanel className="flex max-h-[420px] flex-col"> <div className="flex max-h-[460px] flex-col">
<div className="flex items-center justify-between border-b border-white/10 px-4 py-3"> <div className="flex items-center justify-between border-b border-white/[0.06] pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="relative flex size-2.5"> <span className="relative flex size-2">
<span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" /> <span className="absolute inline-flex size-full animate-ping rounded-full bg-[#10b981] opacity-75" />
<span className="relative inline-flex size-2.5 rounded-full bg-emerald-500" /> <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> </span>
<h3 className="text-sm font-medium text-ink">Live Feed</h3>
</div> </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>
<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 ? ( {actions.length === 0 ? (
<p className="px-4 py-6 text-center text-xs text-ink-faint"> <div className="py-12 text-center font-mono text-xs text-ink-faint">
Waiting for new moderation actions… AWAITING MODERATION DISPATCH STREAM...
</p> </div>
) : ( ) : (
<ul className="divide-y divide-white/5"> actions.map((a) => {
{actions.map((a, i) => {
const tone = severityTone(a.severity); const tone = severityTone(a.severity);
return ( return (
<li <div
key={a.id} key={a.id}
className={`flex items-start gap-3 px-4 py-3 ${ 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]"
i === 0 ? "animate-[fadeIn_0.4s_ease-out]" : ""
}`}
> >
<div className="min-w-0 flex-1"> <span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-white/[0.08] bg-white/[0.03]">
<div className="flex items-center gap-2"> {actionIcon(a.action_type)}
<Badge tone={tone ?? "signal"} className="capitalize">
{ACTION_LABEL[a.action_type] ?? a.action_type}
</Badge>
{a.severity && (
<span className="text-xs text-ink-faint">
{a.severity}
</span> </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.categories?.length ? ( {a.categories?.length ? (
<span className="truncate text-xs text-ink-soft"> <span className="truncate font-mono text-[10px] text-ink-faint">
{a.categories.slice(0, 3).join(", ")} [{a.categories.slice(0, 2).join(", ")}]
</span> </span>
) : null} ) : null}
<span className="ml-auto font-mono text-[10px] text-ink-faint">
{formatRelativeTime(a.created_at)}
</span>
</div> </div>
{a.reason && ( {a.reason && (
<p className="mt-1 truncate text-xs text-ink-soft"> <p className="mt-1 font-sans text-xs text-ink-soft line-clamp-2">
“{a.reason}” “{a.reason}”
</p> </p>
)} )}
<p className="mt-0.5 text-[11px] text-ink-faint">
{a.username ?? a.user_id ?? "unknown"} ·{" "} <div className="mt-1.5 flex items-center gap-2 font-mono text-[10px] text-ink-faint">
{formatRelativeTime(a.created_at)} <span>TARGET:</span>
</p> <span className="text-ink-soft">
{a.username ?? a.user_id ?? "UNKNOWN_SUBJECT"}
</span>
</div>
</div>
</div> </div>
</li>
); );
})} })
</ul>
)} )}
</div> </div>
</GlassPanel> </div>
); );
} }
services/frontend/src/components/TermGlossary.tsx
+78 -45
View File
@@ -1,8 +1,8 @@
"use client"; "use client";
import { ChevronDown, Globe } from "lucide-react"; import { ChevronDown, Download, Globe, Search } from "lucide-react";
import { useRef, useState } from "react"; import { useMemo, useRef, useState } from "react";
import { GlassPanel } from "@/components/primitives"; import { Badge, GlassPanel } from "@/components/primitives";
import { SectionHeader } from "@/components/shared"; import { SectionHeader } from "@/components/shared";
import { useStaggerReveal } from "@/hooks/use-gsap-animation"; import { useStaggerReveal } from "@/hooks/use-gsap-animation";
import { downloadCsv } from "@/lib/csv"; import { downloadCsv } from "@/lib/csv";
@@ -14,25 +14,27 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
const bodyRef = useRef<HTMLDivElement>(null); const bodyRef = useRef<HTMLDivElement>(null);
return ( 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 <button
type="button" type="button"
onClick={() => setOpen((v) => !v)} 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} aria-expanded={open}
> >
<span className="flex min-w-0 items-baseline gap-2"> <div className="flex min-w-0 items-baseline gap-2.5">
<span className="truncate font-medium text-ink">{t.term}</span> <span className="truncate font-mono text-xs font-semibold text-ink">
<span className="mono shrink-0 text-[10px] text-ink-faint"> {t.term}
{t.hit_count} uses
</span> </span>
</span> <Badge tone="signal" className="font-mono text-[9px]">
<span className="flex shrink-0 items-center gap-2 font-mono text-[10px] text-ink-faint"> {t.hit_count} hits
{formatRelativeTime(t.resolved_at)} </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 <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> </button>
<div <div
ref={bodyRef} ref={bodyRef}
@@ -40,14 +42,16 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
style={{ gridTemplateRows: open ? "1fr" : "0fr" }} style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
> >
<div className="overflow-hidden"> <div className="overflow-hidden">
<div className="border-t border-hairline px-3 py-2.5 text-sm"> <div className="border-t border-white/[0.04] bg-black/20 px-3.5 py-2.5 text-xs">
<p className="text-ink-faint">{t.definition}</p> <p className="font-sans text-ink-soft leading-relaxed">
{t.definition}
</p>
{t.source_url && ( {t.source_url && (
<a <a
href={t.source_url} href={t.source_url}
target="_blank" target="_blank"
rel="noopener noreferrer" 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" /> <Globe className="size-3" />
{t.source_url} {t.source_url}
@@ -61,37 +65,55 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
} }
export function TermGlossary({ terms }: { terms: 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", { const listRef = useStaggerReveal<HTMLDivElement>(".glossary-entry", {
stagger: 0.035, stagger: 0.025,
y: 10, y: 8,
dependencies: [terms], dependencies: [filtered.length, filter],
}); });
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3"> <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-3"> <div className="flex items-center gap-2.5">
<div className="relative flex size-3 items-center justify-center"> <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" /> <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="relative inline-flex size-2 rounded-full bg-signal" /> Slang & Term Glossary · Knowledge Base
</div>
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
TERM GLOSSARY · KB_INDEX
</h1> </h1>
</div> </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"> <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<span className="text-ink-faint">TERMS:</span> <span>INDEXED:</span>
<span className="font-bold text-signal">{terms.length}</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>
</div> </div>
<GlassPanel className="lg:col-span-3"> {/* Filter and Action Bar */}
<SectionHeader <GlassPanel className="flex flex-wrap items-center justify-between gap-3 p-3">
eyebrow="knowledge" <div className="relative flex-1 min-w-[220px]">
title="Term Knowledge Base" <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
action={ <input
terms.length > 0 ? ( 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 <button
type="button" type="button"
onClick={() => onClick={() =>
@@ -106,20 +128,31 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
})), })),
) )
} }
className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink" 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 EXPORT_CSV
</button> </button>
) : null )}
</GlassPanel>
<GlassPanel>
<SectionHeader
eyebrow="knowledge directory"
title="Slang & Definition Index"
action={
<span className="mono text-xs text-[#8a8f98]">
{filtered.length} of {terms.length} terms
</span>
} }
/> />
{terms.length === 0 ? ( {filtered.length === 0 ? (
<p className="py-6 text-center font-mono text-xs text-ink-faint"> <div className="py-12 text-center font-mono text-xs text-ink-faint">
NO TERM RESOLUTIONS CACHED YET NO TERM DEFINITIONS MATCH YOUR FILTER
</p> </div>
) : ( ) : (
<div ref={listRef} className="space-y-2"> <div ref={listRef} className="space-y-1.5 mt-3">
{terms.map((t) => ( {filtered.map((t) => (
<GlossaryEntry key={t.term} t={t} /> <GlossaryEntry key={t.term} t={t} />
))} ))}
</div> </div>
services/frontend/src/components/chatbot/chatbot.tsx
+9 -11
View File
@@ -1,16 +1,10 @@
"use client"; "use client";
import {
Bot,
MessageSquare,
Send,
Trash2,
X,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useGSAP } from "@gsap/react"; import { useGSAP } from "@gsap/react";
import gsap from "gsap"; 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 { MarkdownLite } from "@/components/shared";
import { useChatbotUserId } from "@/hooks/use-chatbot-user"; import { useChatbotUserId } from "@/hooks/use-chatbot-user";
import { chatbotApi } from "@/lib/api"; import { chatbotApi } from "@/lib/api";
@@ -86,7 +80,7 @@ export function Chatbot() {
useEffect(() => { useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" }); bottomRef.current?.scrollIntoView({ behavior: "smooth" });
}, [msgs, loading]); }, []);
const send = async (text: string) => { const send = async (text: string) => {
if (!text.trim() || loading || !userId) return; if (!text.trim() || loading || !userId) return;
@@ -132,7 +126,11 @@ export function Chatbot() {
onClick={() => setOpen((o) => !o)} 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]" 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> </button>
{open && ( {open && (
services/frontend/src/components/shell/nav-rail.tsx
+2 -8
View File
@@ -16,13 +16,11 @@ function NavItem({
label, label,
active, active,
Icon, Icon,
index,
}: { }: {
href: string; href: string;
label: string; label: string;
active: boolean; active: boolean;
Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
index: number;
}) { }) {
return ( return (
<a <a
@@ -36,10 +34,7 @@ function NavItem({
: "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]", : "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
)} )}
> >
<Icon <Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} />
className="relative z-10 size-4"
strokeWidth={active ? 2.2 : 1.8}
/>
{/* Precision Micro-Indicator */} {/* Precision Micro-Indicator */}
{active && ( {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-[#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" 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"> <div className="flex flex-1 flex-col gap-1">
{navItems.map((item, i) => ( {navItems.map((item) => (
<NavItem <NavItem
key={item.href} key={item.href}
href={item.href} href={item.href}
label={item.label} label={item.label}
index={i}
active={isActivePath(path, item.matchPrefix)} active={isActivePath(path, item.matchPrefix)}
Icon={item.icon} Icon={item.icon}
/> />