@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/src/components/library/charts/GeoMap.tsx

@@ -1,382 +0,0 @@
-import React, { useMemo, useRef, useEffect, useState, useCallback } from "react";
-import * as d3 from "d3";
-import { feature } from "topojson-client";
-import type { Topology, GeometryCollection } from "topojson-specification";
-import world from "world-atlas/land-110m.json";
-
-const land = feature(world as unknown as Topology<{ land: GeometryCollection }>, (world.objects.land as unknown) as GeometryCollection);
-
-type ProjectionType = "naturalEarth" | "mercator" | "equirectangular";
-
-const PROJECTIONS = {
-  naturalEarth: d3.geoNaturalEarth1,
-  mercator: d3.geoMercator,
-  equirectangular: d3.geoEquirectangular,
-};
-
-interface Theme {
-  bg: string;
-  bgGradient: [string, string];
-  land: string;
-  landStroke: string;
-  sphere: string;
-  graticule: string;
-  graticuleOpacity: number;
-  markerActive: string;
-  markerInactive: string;
-  label: string;
-  labelInactive: string;
-  arc: string;
-  arcHighlight: string;
-  arcDanger: string;
-  dot: string;
-  dotDanger: string;
-  overlayFill: string;
-  overlayStroke: string;
-}
-
-type ThemeName = "dark" | "light";
-
-const THEMES: Record<ThemeName, Theme> = {
-  dark: {
-    bg: "#050b15",
-    bgGradient: ["#0a1628", "#050b15"],
-    land: "#1a2d4a",
-    landStroke: "#2a4060",
-    sphere: "#1e3a5f",
-    graticule: "#162a45",
-    graticuleOpacity: 0.35,
-    markerActive: "#cbd5e1",
-    markerInactive: "#64748b",
-    label: "#cbd5e1",
-    labelInactive: "#64748b",
-    arc: "#818cf8",
-    arcHighlight: "#c4b5fd",
-    arcDanger: "#f87171",
-    dot: "#a5b4fc",
-    dotDanger: "#f87171",
-    overlayFill: "rgba(248,113,113,0.10)",
-    overlayStroke: "rgba(248,113,113,0.30)",
-  },
-  light: {
-    bg: "#f8fafc",
-    bgGradient: ["#f8fafc", "#f1f5f9"],
-    land: "#e2e8f0",
-    landStroke: "#cbd5e1",
-    sphere: "#cbd5e1",
-    graticule: "#e2e8f0",
-    graticuleOpacity: 0.6,
-    markerActive: "#334155",
-    markerInactive: "#94a3b8",
-    label: "#334155",
-    labelInactive: "#94a3b8",
-    arc: "#6366f1",
-    arcHighlight: "#4f46e5",
-    arcDanger: "#ef4444",
-    dot: "#6366f1",
-    dotDanger: "#ef4444",
-    overlayFill: "rgba(239,68,68,0.08)",
-    overlayStroke: "rgba(239,68,68,0.3)",
-  },
-};
-
-function buildProjection(type: ProjectionType, width: number, height: number): d3.GeoProjection {
-  const factory = PROJECTIONS[type] ?? PROJECTIONS.naturalEarth;
-  return factory().fitSize([width, height], { type: "Sphere" });
-}
-
-export interface Marker {
-  id: string;
-  lon: number;
-  lat: number;
-  label?: string | false;
-  active?: boolean;
-}
-
-export interface Arc {
-  id: string;
-  from: [number, number];
-  to: [number, number];
-  danger?: boolean;
-  color?: string;
-  dotColor?: string;
-  progress?: number;
-  _path?: string | null;
-}
-
-export interface Overlay {
-  id: string;
-  center: [number, number];
-  radius?: number;
-  fill?: string;
-  stroke?: string;
-}
-
-export interface InitialBounds {
-  sw: [number, number];
-  ne: [number, number];
-  padding?: number;
-}
-
-interface ChildrenFunctionProps {
-  proj: d3.GeoProjection;
-  pathGen: d3.GeoPath;
-  theme: Theme;
-  width: number;
-  height: number;
-  transform: d3.ZoomTransform;
-}
-
-export interface GeoMapProps {
-  width?: number;
-  height?: number;
-  projection?: ProjectionType;
-  theme?: ThemeName;
-  markers?: Marker[];
-  arcs?: Arc[];
-  overlays?: Overlay[];
-  selectedId?: string | null;
-  onArcClick?: (arc: Arc) => void;
-  onMarkerClick?: (marker: Marker) => void;
-  zoomable?: boolean;
-  minZoom?: number;
-  maxZoom?: number;
-  initialBounds?: InitialBounds | null;
-  className?: string;
-  children?: React.ReactNode | ((props: ChildrenFunctionProps) => React.ReactNode);
-}
-
-export default function GeoMap({
-  width = 960,
-  height = 480,
-  projection: projType = "naturalEarth",
-  theme = "dark",
-  markers = [],
-  arcs = [],
-  overlays = [],
-  selectedId = null,
-  onArcClick,
-  onMarkerClick,
-  zoomable = true,
-  minZoom = 1,
-  maxZoom = 8,
-  initialBounds = null,
-  className = "",
-  children,
-}: GeoMapProps): React.ReactElement {
-  const t = THEMES[theme] ?? THEMES.dark;
-  const svgRef = useRef<SVGSVGElement>(null);
-  const [transform, setTransform] = useState<d3.ZoomTransform>(d3.zoomIdentity);
-  const zoomRef = useRef<d3.ZoomBehavior<SVGSVGElement, unknown> | null>(null);
-
-  const { proj, pathGen, graticulePath, spherePath, landPath } = useMemo(() => {
-    const proj = buildProjection(projType, width, height);
-    const pathGen = d3.geoPath(proj);
-    return {
-      proj,
-      pathGen,
-      graticulePath: pathGen(d3.geoGraticule10()),
-      spherePath: pathGen({ type: "Sphere" }),
-      landPath: pathGen(land),
-    };
-  }, [projType, width, height]);
-
-  // D3 zoom behavior
-  useEffect(() => {
-    if (!zoomable || !svgRef.current) return;
-    const svg = d3.select(svgRef.current);
-    const zoom = d3.zoom<SVGSVGElement, unknown>()
-      .scaleExtent([minZoom, maxZoom])
-      .on("zoom", (e: d3.D3ZoomEvent<SVGSVGElement, unknown>) => setTransform(e.transform));
-    zoomRef.current = zoom;
-    svg.call(zoom);
-    return () => {
-      svg.on(".zoom", null);
-    };
-  }, [zoomable, minZoom, maxZoom]);
-
-  // Apply initial zoom to fit bounds (markers/region) on mount
-  const initialBoundsApplied = useRef(false);
-  useEffect(() => {
-    if (!initialBounds || initialBoundsApplied.current) return;
-    if (!svgRef.current || !zoomRef.current || !proj) return;
-    const { sw, ne, padding = 40 } = initialBounds; // sw=[lonMin,latMin], ne=[lonMax,latMax]
-    const p0 = proj(sw);
-    const p1 = proj(ne);
-    if (!p0 || !p1) return;
-    const bx0 = Math.min(p0[0], p1[0]);
-    const by0 = Math.min(p0[1], p1[1]);
-    const bx1 = Math.max(p0[0], p1[0]);
-    const by1 = Math.max(p0[1], p1[1]);
-    const bw = bx1 - bx0;
-    const bh = by1 - by0;
-    if (bw < 1 || bh < 1) return;
-    const scale = Math.min((width - padding * 2) / bw, (height - padding * 2) / bh);
-    const cx = (bx0 + bx1) / 2;
-    const cy = (by0 + by1) / 2;
-    const tx = width / 2 - cx * scale;
-    const ty = height / 2 - cy * scale;
-    const clampedScale = Math.max(minZoom, Math.min(maxZoom, scale));
-    const t = d3.zoomIdentity.translate(tx, ty).scale(clampedScale);
-    d3.select(svgRef.current).call(zoomRef.current.transform, t);
-    initialBoundsApplied.current = true;
-  }, [initialBounds, proj, width, height, minZoom, maxZoom]);
-
-  const resetZoom = useCallback(() => {
-    if (!svgRef.current || !zoomRef.current) return;
-    d3.select(svgRef.current)
-      .transition()
-      .duration(400)
-      .call(zoomRef.current.transform, d3.zoomIdentity);
-  }, []);
-
-  const isZoomed = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;
-
-  const arcPaths = useMemo(() => {
-    const cache: Record<string, string | null> = {};
-    arcs.forEach(a => {
-      const key = `${a.from[0]},${a.from[1]}-${a.to[0]},${a.to[1]}`;
-      if (cache[key]) { a._path = cache[key]; return; }
-      const interp = d3.geoInterpolate(a.from, a.to);
-      const pts: [number, number][] = [];
-      for (let i = 0; i <= 1; i += 0.02) {
-        const p = proj(interp(i));
-        if (p) pts.push(p as [number, number]);
-      }
-      const path = pts.length > 1 ? d3.line()(pts) : null;
-      cache[key] = path;
-      a._path = path;
-    });
-    return arcs;
-  }, [arcs, proj]);
-
-  const activeMarkerIds = useMemo(() => {
-    const s = new Set<string>();
-    markers.forEach(m => { if (m.active) s.add(m.id); });
-    return s;
-  }, [markers]);
-
-  const txStr = `translate(${transform.x},${transform.y}) scale(${transform.k})`;
-  const invScale = 1 / transform.k;
-
-  return (
-    <div className={`relative overflow-hidden ${className}`} style={{ background: t.bg }}>
-      <svg ref={svgRef} viewBox={`0 0 ${width} ${height}`} className="h-full w-full" preserveAspectRatio="xMidYMid slice" style={zoomable ? { cursor: "grab" } : undefined}>
-        <defs>
-          <radialGradient id="geo-bg" cx="50%" cy="50%" r="55%">
-            <stop offset="0%" stopColor={t.bgGradient[0]} />
-            <stop offset="100%" stopColor={t.bgGradient[1]} />
-          </radialGradient>
-          <filter id="geo-glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b" />
-            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
-          </filter>
-        </defs>
-        <style>{`
-          .geo-arc{stroke-dasharray:8,6;animation:geo-flow 1.5s linear infinite}
-          @keyframes geo-flow{to{stroke-dashoffset:-14}}
-          .geo-dot{animation:geo-pulse 2s ease-in-out infinite}
-          @keyframes geo-pulse{0%,100%{opacity:1}50%{opacity:.5}}
-        `}</style>
-
-        <rect width={width} height={height} fill="url(#geo-bg)" />
-
-        {/* Zoomable content group */}
-        <g transform={txStr}>
-          <path d={spherePath ?? undefined} fill="none" stroke={t.sphere} strokeWidth={0.8 * invScale} />
-          <path d={landPath ?? undefined} fill={t.land} stroke={t.landStroke} strokeWidth={0.4 * invScale} />
-          <path d={graticulePath ?? undefined} fill="none" stroke={t.graticule} strokeWidth={0.3 * invScale} opacity={t.graticuleOpacity} />
-
-          {/* Overlay zones (disruptions, weather) */}
-          {overlays.map(o => {
-            const c = proj(o.center);
-            if (!c) return null;
-            const edge = proj([o.center[0] + (o.radius ?? 5), o.center[1]]);
-            const r = edge ? Math.abs(edge[0] - c[0]) : 30;
-            return (
-              <circle
-                key={o.id}
-                cx={c[0]} cy={c[1]} r={r}
-                fill={o.fill ?? t.overlayFill}
-                stroke={o.stroke ?? t.overlayStroke}
-                strokeWidth={1 * invScale}
-                strokeDasharray="5,5"
-                className="animate-pulse"
-              />
-            );
-          })}
-
-          {/* Arcs */}
-          {arcPaths.map(a => {
-            if (!a._path) return null;
-            const sel = selectedId === a.id;
-            const danger = a.danger;
-            return (
-              <path
-                key={`arc-${a.id}`}
-                d={a._path}
-                fill="none"
-                stroke={danger ? t.arcDanger : sel ? t.arcHighlight : a.color ?? t.arc}
-                strokeWidth={(sel ? 3 : 2) * invScale}
-                opacity={selectedId != null && !sel ? 0.15 : danger ? 0.85 : 0.65}
-                className="geo-arc cursor-pointer"
-                onClick={() => onArcClick?.(a)}
-              />
-            );
-          })}
-
-          {/* Markers */}
-          {markers.map(m => {
-            const p = proj([m.lon, m.lat]);
-            if (!p) return null;
-            const active = m.active ?? activeMarkerIds.has(m.id);
-            return (
-              <g key={m.id} className={onMarkerClick ? "cursor-pointer" : ""} onClick={() => onMarkerClick?.(m)}>
-                <circle cx={p[0]} cy={p[1]} r={(active ? 3 : 2) * invScale} fill={active ? t.markerActive : t.markerInactive} />
-                {m.label !== false && (
-                  <text x={p[0] + 6 * invScale} y={p[1] + 4 * invScale} fontSize={8 * invScale} fill={active ? t.label : t.labelInactive} fontFamily="sans-serif" fontWeight={600}>
-                    {m.label ?? m.id}
-                  </text>
-                )}
-              </g>
-            );
-          })}
-
-          {/* Moving dots (flight positions) */}
-          {arcPaths.map(a => {
-            if (a.progress == null || a.progress <= 0) return null;
-            const interp = d3.geoInterpolate(a.from, a.to);
-            const p = proj(interp(Math.min(a.progress, 0.99)));
-            if (!p) return null;
-            const sel = selectedId === a.id;
-            return (
-              <circle
-                key={`dot-${a.id}`}
-                cx={p[0]} cy={p[1]}
-                r={(sel ? 6 : 4.5) * invScale}
-                fill={a.danger ? t.dotDanger : a.dotColor ?? t.dot}
-                filter="url(#geo-glow)"
-                className="geo-dot cursor-pointer"
-                opacity={selectedId != null && !sel ? 0.3 : 1}
-                onClick={() => onArcClick?.(a)}
-              />
-            );
-          })}
-
-          {/* Custom children get access to projection */}
-          {typeof children === "function" ? children({ proj, pathGen, theme: t, width, height, transform }) : children}
-        </g>
-      </svg>
-
-      {/* Reset zoom button */}
-      {zoomable && isZoomed && (
-        <button
-          onClick={resetZoom}
-          className="absolute bottom-3 right-3 rounded-lg border border-white/15 bg-black/50 px-2.5 py-1.5 text-[11px] font-medium text-white/80 backdrop-blur-md transition hover:bg-black/70 hover:text-white"
-        >
-          Reset view
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/library/chat/ChatBar.tsx

@@ -1,267 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import { createPortal } from "react-dom";
-import { AnimatePresence, motion } from "framer-motion";
-import {
-  SparklesIcon,
-  XMarkIcon,
-  TrashIcon,
-  ArrowTopRightOnSquareIcon,
-} from "@heroicons/react/24/outline";
-import ChatMessageList from "./ChatMessageList";
-import ChatInput from "./ChatInput";
-import useChatState, { UseChatStateOptions, ChatMessage } from "./useChatState";
-import { ChatMessageData } from "./ChatMessage";
-
-const BACKDROP_VARIANTS = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1, transition: { duration: 0.15 } },
-  exit: { opacity: 0, transition: { duration: 0.12 } },
-};
-
-const PANEL_VARIANTS = {
-  hidden: { opacity: 0, y: 20, scale: 0.97 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: { type: "spring" as const, damping: 28, stiffness: 380 },
-  },
-  exit: { opacity: 0, y: 10, scale: 0.97, transition: { duration: 0.12 } },
-};
-
-export interface ChatBarProps {
-  onSend?: UseChatStateOptions["onSend"];
-  suggestions?: string[];
-  placeholder?: string;
-  title?: string;
-  initialMessages?: UseChatStateOptions["initialMessages"];
-  className?: string;
-  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
-  onOpenInTab?: (messages: ChatMessage[]) => void;
-}
-
-/**
- * Command-palette style AI chat bar.
- *
- * Collapsed: a slim, clickable input strip with sparkle icon and ⌘K hint.
- * Expanded: a centered floating overlay (portal) with backdrop, full chat,
- * suggestions, and message history. No layout shift.
- *
- * Activate: click the bar, press ⌘K / Ctrl+K, or click a suggestion chip.
- * Dismiss: Escape or click the backdrop.
- */
-export default function ChatBar({
-  onSend,
-  suggestions = [],
-  placeholder = "Ask a question…",
-  title = "AI Assistant",
-  initialMessages = [],
-  className = "",
-  renderAvatar,
-  onOpenInTab,
-}: ChatBarProps) {
-  const [open, setOpen] = useState(false);
-  const [portalVisible, setPortalVisible] = useState(false);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const chat = useChatState({ initialMessages, onSend });
-  const isEmpty = chat.messages.length === 0;
-
-  const close = useCallback(() => setOpen(false), []);
-
-  useEffect(() => {
-    if (open) setPortalVisible(true);
-  }, [open]);
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      }
-      if (e.key === "Escape" && open) close();
-    }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, close]);
-
-  useEffect(() => {
-    if (open) document.body.style.overflow = "hidden";
-    else document.body.style.overflow = "";
-    return () => { document.body.style.overflow = ""; };
-  }, [open]);
-
-  function handleSend(content: string) {
-    if (!open) setOpen(true);
-    chat.sendMessage(content);
-  }
-
-  const [shortcutLabel, setShortcutLabel] = useState("⌘K");
-  useEffect(() => {
-    setShortcutLabel(/Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘K" : "Ctrl K");
-  }, []);
-
-  const overlay =
-    typeof document !== "undefined" && portalVisible
-      ? createPortal(
-          <AnimatePresence onExitComplete={() => setPortalVisible(false)}>
-            {open && (
-              <>
-                {/* Backdrop */}
-                <motion.div
-                  variants={BACKDROP_VARIANTS}
-                  initial="hidden"
-                  animate="visible"
-                  exit="exit"
-                  className="fixed inset-0 z-50 bg-black/30 backdrop-blur-sm"
-                  onClick={close}
-                  aria-hidden="true"
-                />
-
-                {/* Centered panel */}
-                <motion.div
-                  ref={panelRef}
-                  variants={PANEL_VARIANTS}
-                  initial="hidden"
-                  animate="visible"
-                  exit="exit"
-                  className="fixed inset-x-0 top-[10vh] z-50 mx-auto flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900"
-                  style={{ maxHeight: "75vh" }}
-                >
-                  {/* Header */}
-                  <div className="flex items-center justify-between border-b border-slate-100 px-4 py-2.5 dark:border-slate-800">
-                    <div className="flex items-center gap-2">
-                      <SparklesIcon className="h-4 w-4 text-brand-500" />
-                      <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-50">
-                        {title}
-                      </h3>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      {onOpenInTab ? (
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setOpen(false);
-                            setPortalVisible(false);
-                            document.body.style.overflow = "";
-                            onOpenInTab(chat.messages);
-                          }}
-                          className="rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300"
-                          aria-label="Open in new tab"
-                          title="Open in new tab"
-                        >
-                          <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                        </button>
-                      ) : null}
-                      {chat.messages.length > 0 ? (
-                        <button
-                          type="button"
-                          onClick={chat.clearMessages}
-                          className="rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300"
-                          aria-label="Clear chat"
-                        >
-                          <TrashIcon className="h-4 w-4" />
-                        </button>
-                      ) : null}
-                      <button
-                        type="button"
-                        onClick={close}
-                        className="rounded p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300"
-                        aria-label="Close"
-                      >
-                        <XMarkIcon className="h-4 w-4" />
-                      </button>
-                      <kbd className="ml-1 hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block">
-                        esc
-                      </kbd>
-                    </div>
-                  </div>
-
-                  {/* Body — messages or empty state */}
-                  <div className="min-h-0 flex-1">
-                    {isEmpty ? (
-                      <div className="flex h-full min-h-[200px] flex-col items-center justify-center gap-4 px-6 py-8">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 dark:bg-brand-950/30">
-                          <SparklesIcon className="h-5 w-5 text-brand-500" />
-                        </div>
-                        <p className="text-sm text-slate-500 dark:text-slate-400">
-                          Ask me anything about your data.
-                        </p>
-                        {suggestions.length > 0 ? (
-                          <div className="flex flex-wrap justify-center gap-2">
-                            {suggestions.map((text) => (
-                              <button
-                                key={text}
-                                type="button"
-                                onClick={() => handleSend(text)}
-                                className="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm transition hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:border-brand-700 dark:hover:bg-brand-950/30 dark:hover:text-brand-300"
-                              >
-                                <SparklesIcon
-                                  className="h-3 w-3"
-                                  aria-hidden="true"
-                                />
-                                {text}
-                              </button>
-                            ))}
-                          </div>
-                        ) : null}
-                      </div>
-                    ) : (
-                      <ChatMessageList
-                        messages={chat.messages}
-                        isLoading={chat.isLoading}
-                        isStreaming={chat.isStreaming}
-                        suggestions={suggestions}
-                        onSuggestion={(text) => chat.sendMessage(text)}
-                        renderAvatar={renderAvatar}
-                      />
-                    )}
-                  </div>
-
-                  {/* Input */}
-                  <div className="border-t border-slate-100 p-3 dark:border-slate-800">
-                    <ChatInput
-                      onSend={(content) => chat.sendMessage(content)}
-                      disabled={chat.isLoading}
-                      isLoading={chat.isLoading}
-                      placeholder={placeholder}
-                    />
-                  </div>
-                </motion.div>
-              </>
-            )}
-          </AnimatePresence>,
-          document.body
-        )
-      : null;
-
-  return (
-    <>
-      {overlay}
-
-      {/* Trigger bar */}
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        className={[
-          "group flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-left shadow-sm transition-all hover:border-brand-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-brand-700",
-          className,
-        ]
-          .filter(Boolean)
-          .join(" ")}
-      >
-        <SparklesIcon className="h-5 w-5 shrink-0 text-brand-500" />
-        <span className="flex-1 text-sm text-slate-400 dark:text-slate-500">
-          {placeholder}
-        </span>
-        {chat.messages.length > 0 ? (
-          <span className="rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-600 dark:bg-brand-950/30 dark:text-brand-400">
-            {chat.messages.length} msgs
-          </span>
-        ) : null}
-        <kbd className="hidden rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 group-hover:border-brand-200 group-hover:text-brand-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500 sm:inline-block">
-          {shortcutLabel}
-        </kbd>
-      </button>
-    </>
-  );
-}