@schandlergarcia/sf-web-components 1.2.5 → 1.2.7

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

@@ -0,0 +1,293 @@
+import React, { useMemo, useRef, useEffect, useState, useCallback } from "react";
+import * as d3 from "d3";
+import { feature } from "topojson-client";
+import world from "world-atlas/land-110m.json";
+
+const land = feature(world, world.objects.land);
+
+const PROJECTIONS = {
+  naturalEarth: d3.geoNaturalEarth1,
+  mercator: d3.geoMercator,
+  equirectangular: d3.geoEquirectangular,
+};
+
+const THEMES = {
+  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, width, height) {
+  const factory = PROJECTIONS[type] ?? PROJECTIONS.naturalEarth;
+  return factory().fitSize([width, height], { type: "Sphere" });
+}
+
+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,
+}) {
+  const t = THEMES[theme] ?? THEMES.dark;
+  const svgRef = useRef(null);
+  const [transform, setTransform] = useState(d3.zoomIdentity);
+  const zoomRef = useRef(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()
+      .scaleExtent([minZoom, maxZoom])
+      .on("zoom", (e) => 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 = {};
+    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 = [];
+      for (let i = 0; i <= 1; i += 0.02) {
+        const p = proj(interp(i));
+        if (p) pts.push(p);
+      }
+      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();
+    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} fill="none" stroke={t.sphere} strokeWidth={0.8 * invScale} />
+          <path d={landPath} fill={t.land} stroke={t.landStroke} strokeWidth={0.4 * invScale} />
+          <path d={graticulePath} 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.jsx

@@ -0,0 +1,256 @@
+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 from "./useChatState";
+
+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", damping: 28, stiffness: 380 },
+  },
+  exit: { opacity: 0, y: 10, scale: 0.97, transition: { duration: 0.12 } },
+};
+
+/**
+ * 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\u2026",
+  title = "AI Assistant",
+  initialMessages = [],
+  className = "",
+  panelHeight,
+  renderAvatar,
+  onOpenInTab,
+}) {
+  const [open, setOpen] = useState(false);
+  const [portalVisible, setPortalVisible] = useState(false);
+  const panelRef = useRef(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) {
+      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) {
+    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>
+    </>
+  );
+}

package/src/components/library/chat/ChatInput.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from "react";
+import { PaperAirplaneIcon, StopCircleIcon } from "@heroicons/react/24/solid";
+
+/**
+ * Chat input with auto-resize textarea, Send button, and keyboard shortcuts.
+ * Enter sends, Shift+Enter inserts newline.
+ *
+ * @param {Function} onSend — (content: string) => void
+ * @param {boolean}  disabled — disable input while agent is processing
+ * @param {boolean}  isLoading — show stop button instead of send
+ * @param {Function} onStop — optional: called when stop is clicked
+ * @param {string}   placeholder
+ * @param {number}   maxRows — max visible rows before scroll (default 6)
+ */
+export default function ChatInput({
+  onSend,
+  disabled = false,
+  isLoading = false,
+  onStop,
+  placeholder = "Type a message…",
+  maxRows = 6,
+}) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    const lineHeight = 22;
+    const maxHeight = lineHeight * maxRows;
+    ta.style.height = `${Math.min(ta.scrollHeight, maxHeight)}px`;
+  }, [value, maxRows]);
+
+  function handleSend() {
+    if (!value.trim() || disabled) return;
+    onSend?.(value);
+    setValue("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+
+  const canSend = value.trim().length > 0 && !disabled;
+
+  return (
+    <div className="flex items-end gap-2 rounded-xl border border-slate-200 bg-white p-2 shadow-sm transition-colors focus-within:border-brand-300 focus-within:ring-2 focus-within:ring-brand-500/20 dark:border-slate-700 dark:bg-slate-900 dark:focus-within:border-brand-700 dark:focus-within:ring-brand-400/20">
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        className="max-h-36 min-h-[22px] flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:text-slate-50 dark:placeholder:text-slate-500"
+        aria-label="Chat message input"
+      />
+
+      {isLoading && onStop ? (
+        <button
+          type="button"
+          onClick={onStop}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg 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="Stop generating"
+        >
+          <StopCircleIcon className="h-5 w-5" />
+        </button>
+      ) : (
+        <button
+          type="button"
+          onClick={handleSend}
+          disabled={!canSend}
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-brand-600 text-white transition hover:bg-brand-500 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-brand-500 dark:hover:bg-brand-400"
+          aria-label="Send message"
+        >
+          <PaperAirplaneIcon className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+}