Data Stream

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface DataStreamEntry {
7  text: string;
8  timestamp?: string;
9  type?: "info" | "warning" | "error" | "success";
10}
11 
12interface DataStreamProps extends React.HTMLAttributes<HTMLDivElement> {
13  entries: DataStreamEntry[];
14  maxVisible?: number;
15  streaming?: boolean;
16  title?: string;
17}
18 
19const typeColor: Record<string, string> = {
20  error: "text-red-500",
21  info: "text-primary",
22  success: "text-green-500",
23  warning: "text-amber-500",
24};
25 
26const typeDot: Record<string, string> = {
27  error: "bg-red-500",
28  info: "bg-primary",
29  success: "bg-green-500",
30  warning: "bg-amber-500",
31};
32 
33export function DataStream({
34  entries,
35  title = "DATA STREAM",
36  maxVisible = 8,
37  streaming = true,
38  className,
39  ...props
40}: DataStreamProps) {
41  const scrollRef = React.useRef<HTMLDivElement>(null);
42  const [visibleCount, setVisibleCount] = React.useState(0);
43  const entriesRef = React.useRef(entries);
44  entriesRef.current = entries;
45 
46  // Staggered entry reveal using count instead of copying array
47  React.useEffect(() => {
48    setVisibleCount(0);
49    let count = 0;
50    const interval = setInterval(() => {
51      count++;
52      if (count > entriesRef.current.length) {
53        clearInterval(interval);
54        return;
55      }
56      setVisibleCount(count);
57    }, 300);
58    return () => clearInterval(interval);
59  }, []);
60 
61  React.useEffect(() => {
62    if (scrollRef.current) {
63      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
64    }
65  }, []);
66 
67  return (
68    <div
69      data-slot="tron-data-stream"
70      className={cn(
71        "relative overflow-hidden rounded border border-primary/30 bg-card/80 backdrop-blur-sm",
72        className
73      )}
74      {...props}
75    >
76      {/* Scanline overlay */}
77      <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
78 
79      {/* Header */}
80      <div className="flex items-center gap-2 border-border/50 border-b px-4 py-2">
81        {streaming ? (
82          <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-green-500 shadow-[0_0_4px_rgba(34,197,94,0.6)]" />
83        ) : null}
84        <span className="text-[10px] text-foreground/80 uppercase tracking-widest">
85          {title}
86        </span>
87        <span className="ml-auto font-mono text-[10px] text-foreground/40">
88          {visibleCount}/{entries.length}
89        </span>
90      </div>
91// … truncated