diff --git a/services/frontend/src/app/(dashboard)/layout.tsx b/services/frontend/src/app/(dashboard)/layout.tsx index 79990a6..cc6c082 100644 --- a/services/frontend/src/app/(dashboard)/layout.tsx +++ b/services/frontend/src/app/(dashboard)/layout.tsx @@ -1,16 +1,15 @@ "use client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { Suspense } from "react"; +import { Suspense, useEffect, useState } from "react"; import { TopNav } from "@/components/layout/top-nav"; import { MobileNav } from "@/components/layout/mobile-nav"; -import { WsProvider } from "@/lib/ws/context"; -import { MascotProvider } from "@/components/mascot/mascot-context"; +import { WsProvider, useWebSocket } from "@/lib/ws/context"; +import { MascotProvider, useMascot } from "@/components/mascot/mascot-context"; import { MascotContainer } from "@/components/mascot/mascot-container"; import { MiniPlayer } from "@/components/media/mini-player"; import { MediaPlayerProvider } from "@/lib/hooks/use-media-player"; import { HiddenSidebar } from "@/components/layout/hidden-sidebar"; -import { useState } from "react"; const queryClient = new QueryClient({ defaultOptions: { @@ -22,6 +21,31 @@ const queryClient = new QueryClient({ }, }); +function MascotExpressionSync() { + const ws = useWebSocket(); + const { setExpression } = useMascot(); + + useEffect(() => { + const unsub1 = ws.on("message_created", (data: any) => { + if (data.ai_status === "flagged" || data.ai_status === "warn") { + setExpression("surprise"); + setTimeout(() => setExpression("idle"), 2000); + } + }); + + const unsub2 = ws.on("voice_active_user", () => { + setExpression("listening"); + }); + + return () => { + unsub1(); + unsub2(); + }; + }, [ws, setExpression]); + + return null; +} + export default function DashboardLayout({ children, }: { @@ -34,6 +58,7 @@ export default function DashboardLayout({ +
setGuildId(g ?? "")} />