Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.7 kB · 53 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354import type { LivestreamStore } from "@streamplace/core";import { useMemo } from "react";import { useTranslation } from "react-i18next";import { useStore } from "zustand";import { useShallow } from "zustand/react/shallow";import { ChatInput } from "../stream/chat-input";import { ChatPanel as ChatMessages } from "../stream/chat-panel";
/** * Dashboard chat panel with message count and messages/min rate. * Wraps the existing ChatPanel and ChatInput components. */export function ChatPanelWidget({ store }: { store: LivestreamStore }) { const { t } = useTranslation("common"); const state = useStore( store, useShallow((s) => ({ chat: s.chat, websocketConnected: s.websocketConnected, livestream: s.livestream, })), );
const isConnected = state.websocketConnected; const isLive = !!state.livestream;
// Messages per minute calculation const messagesPerMinute = useMemo(() => { if (!state.chat) return 0; const oneMinuteAgo = Date.now() - 60 * 1000; return state.chat.filter((msg) => { try { return new Date(msg.indexedAt).getTime() > oneMinuteAgo; } catch { return false; } }).length; }, [state.chat]);
return ( <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-b-lg border border-(--color-border) bg-(--color-bg-elevated)"> {/* Messages */} <div className="flex min-h-0 flex-1 flex-col overflow-hidden"> <ChatMessages store={store} /> </div>
{/* Input */} <div className="shrink-0 border-t border-(--color-border)"> <ChatInput store={store} /> </div> </div> );}