@useatlas/react 0.0.1

package/src/components/chat/python-result-card.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { Component, type ReactNode, type ErrorInfo, useContext, useState } from "react";
+import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
+import { DarkModeContext } from "../../hooks/use-dark-mode";
+import { LoadingCard } from "./loading-card";
+import { DataTable } from "./data-table";
+import type { ChartDetectionResult, ChartType } from "../chart/chart-detection";
+import { lazy, Suspense } from "react";
+
+const ResultChart = lazy(() => import("../chart/result-chart").then((m) => ({ default: m.ResultChart })));
+
+interface RechartsChartConfig {
+  type: ChartType;
+  data: Record<string, unknown>[];
+  categoryKey: string;
+  valueKeys: string[];
+}
+
+interface PythonChart {
+  base64: string;
+  mimeType: "image/png";
+}
+
+const ALLOWED_IMAGE_MIME = new Set(["image/png", "image/jpeg"]);
+
+/* ------------------------------------------------------------------ */
+/*  Error boundary                                                     */
+/* ------------------------------------------------------------------ */
+
+class PythonErrorBoundary extends Component<
+  { children: ReactNode },
+  { hasError: boolean; error?: Error }
+> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("PythonResultCard rendering failed:", error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="my-2 rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400">
+          Python result could not be rendered: {this.state.error?.message ?? "unknown error"}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Main component                                                     */
+/* ------------------------------------------------------------------ */
+
+export function PythonResultCard({ part }: { part: unknown }) {
+  return (
+    <PythonErrorBoundary>
+      <PythonResultCardInner part={part} />
+    </PythonErrorBoundary>
+  );
+}
+
+function PythonResultCardInner({ part }: { part: unknown }) {
+  const dark = useContext(DarkModeContext);
+  const args = getToolArgs(part);
+  const raw = getToolResult(part);
+  const done = isToolComplete(part);
+  const [open, setOpen] = useState(true);
+
+  if (!done) return <LoadingCard label="Running Python..." />;
+
+  // Structural validation — result must be a non-null object
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+    return (
+      <div className="my-2 rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+        Python executed but returned an unexpected result format.
+      </div>
+    );
+  }
+
+  const result = raw as Record<string, unknown>;
+
+  if (!result.success) {
+    return (
+      <div className="my-2 overflow-hidden rounded-lg border border-red-300 bg-red-50 dark:border-red-900/50 dark:bg-red-950/20">
+        <div className="px-3 py-2 text-xs font-medium text-red-700 dark:text-red-400">
+          Python execution failed
+        </div>
+        <pre className="border-t border-red-200 px-3 py-2 text-xs whitespace-pre-wrap text-red-600 dark:border-red-900/50 dark:text-red-300">
+          {String(result.error ?? "Unknown error")}
+        </pre>
+        {!!result.output && (
+          <pre className="border-t border-red-200 px-3 py-2 text-xs whitespace-pre-wrap text-red-500 dark:border-red-900/50 dark:text-red-400">
+            {String(result.output)}
+          </pre>
+        )}
+      </div>
+    );
+  }
+
+  const output = result.output ? String(result.output) : null;
+  const table = result.table as { columns: string[]; rows: unknown[][] } | undefined;
+  const charts = Array.isArray(result.charts) ? (result.charts as PythonChart[]) : undefined;
+  const rechartsCharts = Array.isArray(result.rechartsCharts) ? (result.rechartsCharts as RechartsChartConfig[]) : undefined;
+
+  const hasTable = table && Array.isArray(table.columns) && Array.isArray(table.rows)
+    && table.columns.length > 0 && table.rows.length > 0;
+  const hasCharts = charts && charts.length > 0;
+  const hasRechartsCharts = rechartsCharts && rechartsCharts.length > 0;
+
+  // Filter charts to only safe image MIME types
+  const safeCharts = hasCharts
+    ? charts.filter((c) => c.base64 && ALLOWED_IMAGE_MIME.has(c.mimeType))
+    : [];
+
+  return (
+    <div className="my-2 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60"
+      >
+        <span className="rounded bg-emerald-100 px-1.5 py-0.5 font-medium text-emerald-700 dark:bg-emerald-600/20 dark:text-emerald-400">
+          Python
+        </span>
+        <span className="flex-1 truncate text-zinc-500 dark:text-zinc-400">
+          {String(args.explanation ?? "Python result")}
+        </span>
+        <span className="text-zinc-400 dark:text-zinc-600">{open ? "\u25BE" : "\u25B8"}</span>
+      </button>
+
+      {open && (
+        <div className="space-y-2 border-t border-zinc-100 px-3 py-2 dark:border-zinc-800">
+          {output && (
+            <pre className="rounded-md bg-zinc-100 px-3 py-2 text-xs whitespace-pre-wrap text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
+              {output}
+            </pre>
+          )}
+
+          {hasTable && <DataTable columns={table.columns} rows={table.rows} />}
+
+          {hasRechartsCharts &&
+            rechartsCharts.map((chart, i) => (
+              <RechartsChartSection key={i} chart={chart} dark={dark} />
+            ))}
+
+          {safeCharts.length > 0 &&
+            safeCharts.map((chart, i) => (
+              <ChartImage key={i} chart={chart} index={i} />
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Chart image with error handling                                    */
+/* ------------------------------------------------------------------ */
+
+function ChartImage({ chart, index }: { chart: PythonChart; index: number }) {
+  const [failed, setFailed] = useState(false);
+
+  if (failed) {
+    return (
+      <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+        Chart {index + 1} failed to render.
+      </div>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element -- @useatlas/react is framework-agnostic
+    <img
+      src={`data:${chart.mimeType};base64,${chart.base64}`}
+      alt={`Python chart ${index + 1}`}
+      className="max-w-full rounded-lg border border-zinc-200 dark:border-zinc-700"
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Recharts section — bypasses auto-detection with synthetic result   */
+/* ------------------------------------------------------------------ */
+
+function RechartsChartSection({ chart, dark }: { chart: RechartsChartConfig; dark: boolean }) {
+  if (!chart.categoryKey || !Array.isArray(chart.valueKeys) || !Array.isArray(chart.data)) {
+    return (
+      <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+        Chart data is incomplete or malformed.
+      </div>
+    );
+  }
+
+  const headers = [chart.categoryKey, ...chart.valueKeys];
+  const rows: string[][] = chart.data.map((row) =>
+    headers.map((key) => (row[key] == null ? "" : String(row[key]))),
+  );
+
+  // Build a synthetic detection result so ResultChart uses the backend's
+  // chart config directly, bypassing auto-detection that might reject it.
+  const detectionResult: ChartDetectionResult = {
+    chartable: true,
+    columns: headers.map((h, i) => ({
+      header: h,
+      type: i === 0 ? "categorical" as const : "numeric" as const,
+      index: i,
+      uniqueCount: i === 0 ? chart.data.length : 0,
+    })),
+    recommendations: [{
+      type: chart.type,
+      categoryColumn: { header: chart.categoryKey, type: "categorical" as const, index: 0, uniqueCount: chart.data.length },
+      valueColumns: chart.valueKeys.map((k, i) => ({
+        header: k,
+        type: "numeric" as const,
+        index: i + 1,
+        uniqueCount: 0,
+      })) as [{ header: string; type: "numeric"; index: number; uniqueCount: number }, ...{ header: string; type: "numeric"; index: number; uniqueCount: number }[]],
+      reason: "Python-generated chart",
+    }],
+    data: chart.data.map((row) => {
+      const out: Record<string, string | number> = {};
+      for (const key of headers) {
+        const val = row[key];
+        out[key] = typeof val === "number" ? val : String(val ?? "");
+      }
+      return out;
+    }),
+  };
+
+  return (
+    <Suspense fallback={<div className="h-64 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" />}>
+      <ResultChart headers={headers} rows={rows} dark={dark} detectionResult={detectionResult} />
+    </Suspense>
+  );
+}

package/src/components/chat/sql-block.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useContext, useState, useEffect } from "react";
+import { DarkModeContext } from "../../hooks/use-dark-mode";
+import { CopyButton } from "./copy-button";
+
+type SyntaxHighlighterModule = typeof import("react-syntax-highlighter");
+type StyleModule = typeof import("react-syntax-highlighter/dist/esm/styles/prism");
+
+let _cache: { Prism: SyntaxHighlighterModule["Prism"]; oneDark: StyleModule["oneDark"]; oneLight: StyleModule["oneLight"] } | null = null;
+
+const SQL_BLOCK_STYLE = {
+  margin: 0,
+  borderRadius: "0.5rem",
+  fontSize: "0.75rem",
+  padding: "0.75rem 1rem",
+} as const;
+
+export function SQLBlock({ sql }: { sql: string }) {
+  const dark = useContext(DarkModeContext);
+  const [mod, setMod] = useState(_cache);
+
+  useEffect(() => {
+    if (_cache) return;
+    Promise.all([
+      import("react-syntax-highlighter"),
+      import("react-syntax-highlighter/dist/esm/styles/prism"),
+    ]).then(([sh, styles]) => {
+      _cache = { Prism: sh.Prism, oneDark: styles.oneDark, oneLight: styles.oneLight };
+      setMod(_cache);
+    });
+  }, []);
+
+  return (
+    <div className="relative">
+      {mod ? (
+        <mod.Prism
+          language="sql"
+          style={dark ? mod.oneDark : mod.oneLight}
+          customStyle={SQL_BLOCK_STYLE}
+        >
+          {sql}
+        </mod.Prism>
+      ) : (
+        <pre className="overflow-x-auto rounded-lg bg-zinc-100 p-3 text-xs dark:bg-zinc-800">
+          <code>{sql}</code>
+        </pre>
+      )}
+      <div className="absolute right-2 top-2">
+        <CopyButton text={sql} label="Copy SQL" />
+      </div>
+    </div>
+  );
+}

package/src/components/chat/sql-result-card.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useContext, useMemo, useState } from "react";
+import { getToolArgs, getToolResult, isToolComplete, downloadCSV, downloadExcel, toCsvString } from "../../lib/helpers";
+import { FileDown, FileSpreadsheet } from "lucide-react";
+import { DarkModeContext } from "../../hooks/use-dark-mode";
+import { detectCharts } from "../chart/chart-detection";
+import { lazy, Suspense } from "react";
+
+const ResultChart = lazy(() => import("../chart/result-chart").then((m) => ({ default: m.ResultChart })));
+const ChartFallback = <div className="h-64 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" />;
+
+import { LoadingCard } from "./loading-card";
+import { DataTable } from "./data-table";
+import { SQLBlock } from "./sql-block";
+
+/** Convert structured rows (Record<string, unknown>[]) to string[][] for chart detection. */
+function toStringRows(columns: string[], rows: Record<string, unknown>[]): string[][] {
+  return rows.map((row) => columns.map((col) => (row[col] == null ? "" : String(row[col]))));
+}
+
+
+export function SQLResultCard({ part }: { part: unknown }) {
+  const dark = useContext(DarkModeContext);
+  const args = getToolArgs(part);
+  const result = getToolResult(part) as Record<string, unknown> | null;
+  const done = isToolComplete(part);
+  const [open, setOpen] = useState(true);
+  const [sqlOpen, setSqlOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<"both" | "chart" | "table">("both");
+
+  const columns = useMemo(
+    () => (done && result?.success ? ((result.columns as string[]) ?? []) : []),
+    [done, result],
+  );
+  const rows = useMemo(
+    () => (done && result?.success ? ((result.rows as Record<string, unknown>[]) ?? []) : []),
+    [done, result],
+  );
+  const sql = String(args.sql ?? "");
+
+  const stringRows = useMemo(() => toStringRows(columns, rows), [columns, rows]);
+  const chartResult = useMemo(
+    () => (columns.length > 0 ? detectCharts(columns, stringRows) : { chartable: false as const, columns: [] }),
+    [columns, stringRows],
+  );
+
+  if (!done) return <LoadingCard label="Executing query..." />;
+
+  if (!result) {
+    return (
+      <div className="my-2 rounded-lg border border-yellow-300 bg-yellow-50 text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400 px-3 py-2 text-xs">
+        Query completed but no result was returned.
+      </div>
+    );
+  }
+
+  if (!result.success) {
+    return (
+      <div className="my-2 rounded-lg border border-red-300 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400 px-3 py-2 text-xs">
+        Query failed. Check the query and try again.
+      </div>
+    );
+  }
+
+  const hasData = columns.length > 0 && rows.length > 0;
+  const showChart = chartResult.chartable && (viewMode === "chart" || viewMode === "both");
+  const showTable = viewMode === "table" || viewMode === "both" || !chartResult.chartable;
+
+  return (
+    <div className="my-2 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-zinc-100/60 dark:hover:bg-zinc-800/60"
+      >
+        <span className="rounded bg-blue-100 text-blue-700 dark:bg-blue-600/20 dark:text-blue-400 px-1.5 py-0.5 font-medium">
+          SQL
+        </span>
+        <span className="flex-1 truncate text-zinc-500 dark:text-zinc-400">
+          {String(args.explanation ?? "Query result")}
+        </span>
+        <span className="text-zinc-500">
+          {rows.length} row{rows.length !== 1 ? "s" : ""}
+          {result.truncated ? "+" : ""}
+        </span>
+        <span className="text-zinc-400 dark:text-zinc-600">{open ? "\u25BE" : "\u25B8"}</span>
+      </button>
+      {open && (
+        <div className="border-t border-zinc-100 dark:border-zinc-800">
+          {hasData && chartResult.chartable && (
+            <div className="flex gap-1 px-3 pt-2">
+              {(["chart", "both", "table"] as const).map((mode) => (
+                <button
+                  key={mode}
+                  onClick={() => setViewMode(mode)}
+                  className={`rounded px-2.5 py-1 text-xs font-medium transition-colors ${
+                    viewMode === mode
+                      ? "bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200"
+                      : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+                  }`}
+                >
+                  {mode === "chart" ? "Chart" : mode === "both" ? "Both" : "Table"}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {hasData && showChart && (
+            <div className="px-3 py-2">
+              <Suspense fallback={ChartFallback}>
+                <ResultChart headers={columns} rows={stringRows} dark={dark} detectionResult={chartResult} />
+              </Suspense>
+            </div>
+          )}
+
+          {hasData && showTable && <DataTable columns={columns} rows={rows} />}
+
+          {!hasData && (
+            <div className="px-3 py-2 text-xs text-zinc-500 dark:text-zinc-400">
+              Query returned 0 rows.
+            </div>
+          )}
+
+          <div className="flex flex-wrap items-center gap-2 px-3 py-2">
+            {sql && (
+              <button
+                onClick={() => setSqlOpen(!sqlOpen)}
+                className="rounded border border-zinc-200 px-2 py-1.5 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+              >
+                {sqlOpen ? "Hide SQL" : "Show SQL"}
+              </button>
+            )}
+            {hasData && (
+              <button
+                onClick={() => downloadCSV(toCsvString(columns, rows))}
+                className="inline-flex items-center gap-1.5 rounded border border-zinc-200 px-2 py-1.5 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+                title="Download CSV"
+              >
+                <FileDown className="size-3.5" />
+                <span className="hidden sm:inline">CSV</span>
+              </button>
+            )}
+            {hasData && (
+              <button
+                onClick={() => { downloadExcel(columns, rows).catch((err) => { console.warn("Excel download failed:", err); }); }}
+                className="inline-flex items-center gap-1.5 rounded border border-zinc-200 px-2 py-1.5 text-xs text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+                title="Download Excel"
+              >
+                <FileSpreadsheet className="size-3.5" />
+                <span className="hidden sm:inline">Excel</span>
+              </button>
+            )}
+          </div>
+          {sqlOpen && sql && (
+            <div className="px-3 pb-2">
+              <SQLBlock sql={sql} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/chat/starter-prompts.ts

@@ -0,0 +1,6 @@
+export const STARTER_PROMPTS = [
+  "What are the top 10 companies by revenue?",
+  "Show me the distribution of account types",
+  "What is the headcount breakdown by department?",
+  "What is total MRR by plan type?",
+];

package/src/components/chat/tool-part.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Component, memo, type ReactNode, type ErrorInfo } from "react";
+import { getToolName } from "ai";
+import { getToolArgs, getToolResult, isToolComplete } from "../../lib/helpers";
+import { isActionToolResult } from "../../lib/action-types";
+import { ExploreCard } from "./explore-card";
+import { SQLResultCard } from "./sql-result-card";
+import { ActionApprovalCard } from "../actions/action-approval-card";
+import { PythonResultCard } from "./python-result-card";
+import type { ToolRenderers } from "../../lib/tool-renderer-types";
+
+export interface ToolPartProps {
+  part: unknown;
+  toolRenderers?: ToolRenderers;
+}
+
+/** Error boundary that catches rendering failures in custom tool renderers. */
+class ToolRendererErrorBoundary extends Component<
+  { toolName: string; children: ReactNode },
+  { hasError: boolean; error?: Error }
+> {
+  constructor(props: { toolName: string; children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error(
+      `Custom renderer for tool "${this.props.toolName}" failed:`,
+      error,
+      info.componentStack,
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="my-2 rounded-lg border border-red-300 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400">
+          Custom renderer for &ldquo;{this.props.toolName}&rdquo; failed: {this.state.error?.message ?? "unknown error"}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export const ToolPart = memo(function ToolPart({ part, toolRenderers }: ToolPartProps) {
+  let name: string;
+  try {
+    name = getToolName(part as Parameters<typeof getToolName>[0]);
+  } catch (err) {
+    console.warn("Failed to determine tool name:", err);
+    return (
+      <div className="my-2 rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+        Tool result (unknown type)
+      </div>
+    );
+  }
+
+  // Custom renderers take precedence over built-in defaults.
+  // Note: this also overrides the ActionApprovalCard for action tools —
+  // if you register a renderer for a tool that uses the action approval flow,
+  // you are responsible for handling the approval UI yourself.
+  const CustomRenderer = toolRenderers?.[name];
+  if (CustomRenderer) {
+    const args = getToolArgs(part);
+    const result = getToolResult(part);
+    const isLoading = !isToolComplete(part);
+    return (
+      <ToolRendererErrorBoundary toolName={name}>
+        <CustomRenderer toolName={name} args={args} result={result} isLoading={isLoading} />
+      </ToolRendererErrorBoundary>
+    );
+  }
+
+  switch (name) {
+    case "explore":
+      return <ExploreCard part={part} />;
+    case "executeSQL":
+      return <SQLResultCard part={part} />;
+    case "executePython":
+      return <PythonResultCard part={part} />;
+    default: {
+      const result = getToolResult(part);
+      if (isActionToolResult(result)) {
+        return <ActionApprovalCard part={part} />;
+      }
+      return (
+        <div className="my-2 rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900">
+          Tool: {name}
+        </div>
+      );
+    }
+  }
+}, (prev, next) => {
+  // Once a tool part is complete, its output won't change — skip re-renders.
+  // This prevents the Recharts render tree from contributing to React's update depth limit.
+  // Also check toolRenderers identity so swapping renderers at runtime triggers a re-render.
+  if (isToolComplete(prev.part) && isToolComplete(next.part) && prev.toolRenderers === next.toolRenderers) return true;
+  return false;
+});

package/src/components/chat/typing-indicator.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+const DELAY_1 = { animationDelay: "150ms" } as const;
+const DELAY_2 = { animationDelay: "300ms" } as const;
+
+export function TypingIndicator() {
+  return (
+    <div className="flex justify-start">
+      <div className="flex items-center gap-1 rounded-xl bg-zinc-100 px-4 py-3 dark:bg-zinc-800">
+        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500" />
+        <span
+          className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500"
+          style={DELAY_1}
+        />
+        <span
+          className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500"
+          style={DELAY_2}
+        />
+      </div>
+    </div>
+  );
+}