@gugacoder/agentic-chat 0.2.0

package/src/display/DataTableRenderer.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import type { DisplayTable } from "@gugacoder/agentic-sdk";
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "../ui/table.js";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
+import { Button } from "../ui/button.js";
+import { Badge } from "../ui/badge.js";
+
+type SortDir = "asc" | "desc";
+
+function formatMoney(value: number, currency = "BRL") {
+  return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+
+function renderCellValue(value: unknown, type: string): React.ReactNode {
+  if (value == null) return "—";
+  switch (type) {
+    case "money":
+      return typeof value === "number"
+        ? formatMoney(value)
+        : typeof value === "object" && value !== null && "value" in value
+        ? formatMoney((value as { value: number; currency?: string }).value, (value as { currency?: string }).currency)
+        : String(value);
+    case "image":
+      return typeof value === "string" ? (
+        <img src={value} alt="" className="rounded-sm max-h-12 object-cover" loading="lazy" decoding="async" />
+      ) : null;
+    case "link":
+      return typeof value === "string" ? (
+        <a href={value} target="_blank" rel="noopener noreferrer" className="text-primary underline underline-offset-2 hover:opacity-80">
+          {value}
+        </a>
+      ) : null;
+    case "badge":
+      return <Badge variant="secondary">{String(value)}</Badge>;
+    default:
+      return String(value);
+  }
+}
+
+function compareValues(a: unknown, b: unknown, type: string): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+
+  if (type === "money") {
+    const av = typeof a === "number" ? a : typeof a === "object" && a !== null && "value" in a ? (a as { value: number }).value : 0;
+    const bv = typeof b === "number" ? b : typeof b === "object" && b !== null && "value" in b ? (b as { value: number }).value : 0;
+    return av - bv;
+  }
+  if (type === "number") {
+    return (Number(a) || 0) - (Number(b) || 0);
+  }
+  return String(a).localeCompare(String(b), "pt-BR");
+}
+
+export function DataTableRenderer({ title, columns, rows, sortable }: DisplayTable) {
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>("asc");
+
+  function handleSort(key: string) {
+    if (!sortable) return;
+    if (sortKey === key) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  }
+
+  const sortedRows = sortKey
+    ? [...rows].sort((a, b) => {
+        const col = columns.find((c) => c.key === sortKey);
+        const dir = sortDir === "asc" ? 1 : -1;
+        return compareValues(a[sortKey], b[sortKey], col?.type ?? "text") * dir;
+      })
+    : rows;
+
+  return (
+    <div className="space-y-2">
+      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
+
+      <ScrollArea className="w-full">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left"}
+                >
+                  {sortable ? (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="-ml-3 h-8 font-semibold"
+                      onClick={() => handleSort(col.key)}
+                      aria-sort={
+                        sortKey === col.key
+                          ? sortDir === "asc"
+                            ? "ascending"
+                            : "descending"
+                          : undefined
+                      }
+                    >
+                      {col.label}
+                      {sortKey === col.key ? (
+                        sortDir === "asc" ? (
+                          <ArrowUp className="ml-1 h-3 w-3" />
+                        ) : (
+                          <ArrowDown className="ml-1 h-3 w-3" />
+                        )
+                      ) : (
+                        <ArrowUpDown className="ml-1 h-3 w-3" />
+                      )}
+                    </Button>
+                  ) : (
+                    col.label
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {sortedRows.map((row, ri) => (
+              <TableRow key={ri}>
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.key}
+                    className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left"}
+                  >
+                    {renderCellValue(row[col.key], col.type)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}

package/src/display/FileCardRenderer.tsx

@@ -0,0 +1,55 @@
+import type { DisplayFile } from "@gugacoder/agentic-sdk";
+import {
+  Download,
+  File,
+  FileCode,
+  FileImage,
+  FileMinus,
+  FileText,
+  FileVideo,
+  Music,
+} from "lucide-react";
+import { Button } from "../ui/button.js";
+import { Card } from "../ui/card.js";
+
+function getFileIcon(type: string) {
+  const mime = type.toLowerCase();
+  if (mime.startsWith("image/")) return FileImage;
+  if (mime.startsWith("video/")) return FileVideo;
+  if (mime.startsWith("audio/")) return Music;
+  if (mime === "application/pdf" || mime === "text/plain" || mime.includes("document")) return FileText;
+  if (mime.includes("spreadsheet") || mime.includes("csv")) return FileMinus;
+  if (mime.includes("javascript") || mime.includes("typescript") || mime.includes("json") || mime.includes("html") || mime.includes("css") || mime.includes("xml")) return FileCode;
+  return File;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function FileCardRenderer({ name, type, size, url }: DisplayFile) {
+  const Icon = getFileIcon(type);
+
+  return (
+    <Card className="flex items-center gap-3 p-3">
+      <div className="shrink-0 text-primary">
+        <Icon className="h-8 w-8" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="font-medium text-sm truncate">{name}</p>
+        <p className="text-xs text-muted-foreground">
+          {type}{size !== undefined && ` · ${formatSize(size)}`}
+        </p>
+      </div>
+      {url && (
+        <Button variant="ghost" size="icon" asChild>
+          <a href={url} download={name} aria-label={`Baixar ${name}`}>
+            <Download className="h-4 w-4" />
+          </a>
+        </Button>
+      )}
+    </Card>
+  );
+}

package/src/display/GalleryRenderer.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import type { DisplayGallery } from "@gugacoder/agentic-sdk";
+import { ZoomIn } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog.js";
+
+export function GalleryRenderer({ title, images }: DisplayGallery) {
+  const [lightboxIdx, setLightboxIdx] = useState<number | null>(null);
+
+  const activeImage = lightboxIdx !== null ? images[lightboxIdx] : null;
+
+  return (
+    <div className="space-y-2">
+      {title && <h3 className="text-sm font-medium text-foreground">{title}</h3>}
+
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+        {images.map((img, i) => (
+          <button
+            key={i}
+            className="relative group cursor-pointer rounded-md overflow-hidden"
+            onClick={() => setLightboxIdx(i)}
+            aria-label={img.alt ?? `Imagem ${i + 1}`}
+          >
+            <img
+              src={img.url}
+              alt={img.alt ?? ""}
+              className="w-full h-full object-cover aspect-square"
+              loading="lazy"
+            />
+            <div className="absolute inset-0 bg-background/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
+              <ZoomIn className="h-5 w-5 text-foreground" />
+            </div>
+            {img.caption && (
+              <p className="absolute bottom-0 left-0 right-0 text-sm text-muted-foreground bg-background/80 px-2 py-1 truncate">
+                {img.caption}
+              </p>
+            )}
+          </button>
+        ))}
+      </div>
+
+      <Dialog open={lightboxIdx !== null} onOpenChange={(open) => { if (!open) setLightboxIdx(null); }}>
+        <DialogContent className={cn("max-w-4xl p-0 bg-background/95")}>
+          <DialogTitle className="sr-only">
+            {activeImage?.alt ?? "Visualizador de imagem"}
+          </DialogTitle>
+          {activeImage && (
+            <div className="flex flex-col">
+              <img
+                src={activeImage.url}
+                alt={activeImage.alt ?? ""}
+                className="w-full max-h-[80vh] object-contain"
+              />
+              {activeImage.caption && (
+                <p className="text-sm text-muted-foreground px-4 py-3">
+                  {activeImage.caption}
+                </p>
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/display/ImageViewerRenderer.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import type { DisplayImage } from "@gugacoder/agentic-sdk";
+import { ZoomIn, ZoomOut, RotateCcw, X } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+
+export function ImageViewerRenderer({ url, alt, caption, width, height }: DisplayImage) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [zoom, setZoom] = useState(1);
+
+  function handleOpen() {
+    setZoom(1);
+    setDialogOpen(true);
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <button
+        className="relative group cursor-pointer rounded-md overflow-hidden inline-block"
+        onClick={handleOpen}
+        aria-label={`Ampliar imagem${alt ? `: ${alt}` : ""}`}
+      >
+        <img
+          src={url}
+          alt={alt ?? ""}
+          className="block max-w-full rounded-md"
+          loading="lazy"
+          decoding="async"
+          width={width}
+          height={height}
+        />
+        <div className="absolute inset-0 bg-background/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
+          <ZoomIn className="h-5 w-5 text-foreground" />
+        </div>
+      </button>
+
+      {caption && (
+        <p className="text-xs text-muted-foreground">{caption}</p>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-4xl p-0 bg-background/95 overflow-hidden">
+          <DialogTitle className="sr-only">{alt ?? "Visualizador de imagem"}</DialogTitle>
+
+          <div className="flex flex-col">
+            <div className="flex items-center gap-1 p-2 border-b border-border">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setZoom((z) => Math.max(0.25, z - 0.25))}
+                aria-label="Reduzir zoom"
+                disabled={zoom <= 0.25}
+              >
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+
+              <span className={cn("text-xs text-muted-foreground w-12 text-center tabular-nums")}>
+                {Math.round(zoom * 100)}%
+              </span>
+
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setZoom((z) => Math.min(4, z + 0.25))}
+                aria-label="Aumentar zoom"
+                disabled={zoom >= 4}
+              >
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setZoom(1)}
+                aria-label="Resetar zoom"
+              >
+                <RotateCcw className="h-4 w-4" />
+              </Button>
+
+              <div className="flex-1" />
+
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setDialogOpen(false)}
+                aria-label="Fechar"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="overflow-auto max-h-[80vh] flex items-center justify-center p-4">
+              <img
+                src={url}
+                alt={alt ?? ""}
+                style={{ transform: `scale(${zoom})`, transformOrigin: "center" }}
+                className="max-w-full transition-transform"
+                width={width}
+                height={height}
+              />
+            </div>
+
+            {caption && (
+              <p className="text-xs text-muted-foreground text-center p-2 border-t border-border">
+                {caption}
+              </p>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/display/LinkPreviewRenderer.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import type { DisplayLink } from "@gugacoder/agentic-sdk";
+import { Globe } from "lucide-react";
+import { Card } from "../ui/card";
+
+function getDomain(url: string, domainProp?: string): string {
+  if (domainProp) return domainProp;
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+export function LinkPreviewRenderer({
+  url,
+  title,
+  description,
+  image,
+  favicon,
+  domain,
+}: DisplayLink) {
+  const [imgError, setImgError] = useState(false);
+  const [faviconError, setFaviconError] = useState(false);
+
+  const displayDomain = getDomain(url, domain);
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Link: ${title}`}
+    >
+      <Card className="overflow-hidden hover:bg-muted/50 transition-colors">
+        {image && !imgError && (
+          <div className="aspect-video overflow-hidden">
+            <img
+              src={image}
+              alt={title}
+              className="w-full h-full object-cover"
+              loading="lazy"
+              decoding="async"
+              onError={() => setImgError(true)}
+            />
+          </div>
+        )}
+
+        <div className="p-3 space-y-1">
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            {favicon && !faviconError ? (
+              <img
+                src={favicon}
+                alt=""
+                className="w-3 h-3 rounded-sm"
+                onError={() => setFaviconError(true)}
+                aria-hidden="true"
+              />
+            ) : (
+              <Globe size={12} aria-hidden="true" className="shrink-0" />
+            )}
+            <span>{displayDomain}</span>
+          </div>
+
+          <p className="font-medium text-foreground text-sm">{title}</p>
+
+          {description && (
+            <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+          )}
+        </div>
+      </Card>
+    </a>
+  );
+}

package/src/display/MapViewRenderer.tsx

@@ -0,0 +1,75 @@
+import type { DisplayMap } from "@gugacoder/agentic-sdk";
+import { MapPin } from "lucide-react";
+import { Card } from "../ui/card.js";
+import { Separator } from "../ui/separator.js";
+
+function buildOsmUrl(pins: DisplayMap["pins"], zoom: number): string {
+  if (pins.length === 0) {
+    return `https://www.openstreetmap.org/export/embed.html?bbox=-180,-90,180,90&layer=mapnik`;
+  }
+
+  const lat = pins.reduce((acc, p) => acc + p.lat, 0) / pins.length;
+  const lng = pins.reduce((acc, p) => acc + p.lng, 0) / pins.length;
+
+  const firstPin = pins[0]!;
+  const markerParam =
+    pins.length === 1
+      ? `&mlat=${firstPin.lat}&mlon=${firstPin.lng}`
+      : "";
+
+  return `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.05},${lat - 0.05},${lng + 0.05},${lat + 0.05}&layer=mapnik&zoom=${zoom}${markerParam}`;
+}
+
+export function MapViewRenderer({ title, pins, zoom }: DisplayMap) {
+  const osmUrl = buildOsmUrl(pins, zoom);
+
+  return (
+    <Card className="overflow-hidden">
+      {title && (
+        <div className="px-4 py-3">
+          <h3 className="font-medium text-sm text-foreground">{title}</h3>
+        </div>
+      )}
+
+      <div className="relative aspect-video bg-muted text-muted-foreground overflow-hidden">
+        <iframe
+          src={osmUrl}
+          className="w-full h-full border-0"
+          title={title ?? "Mapa OpenStreetMap"}
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          sandbox="allow-scripts allow-same-origin"
+        />
+        <div className="absolute inset-0 pointer-events-none flex items-center justify-center opacity-10">
+          <MapPin className="h-10 w-10" />
+        </div>
+      </div>
+
+      {pins.length > 0 && (
+        <>
+          <Separator />
+          <ul className="p-3 space-y-2" aria-label="Locais no mapa">
+            {pins.map((pin, i) => (
+              <li key={i} className="flex items-start gap-2">
+                <MapPin className="h-4 w-4 shrink-0 text-primary mt-0.5" aria-hidden="true" />
+                <span className="flex flex-col min-w-0">
+                  {pin.label && (
+                    <span className="font-medium text-sm text-foreground">{pin.label}</span>
+                  )}
+                  {pin.address && (
+                    <span className="text-xs text-muted-foreground">{pin.address}</span>
+                  )}
+                  {!pin.label && !pin.address && (
+                    <span className="text-xs text-muted-foreground font-mono">
+                      {pin.lat.toFixed(4)}, {pin.lng.toFixed(4)}
+                    </span>
+                  )}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </Card>
+  );
+}

package/src/display/MetricCardRenderer.tsx

@@ -0,0 +1,29 @@
+import type { DisplayMetric } from "@gugacoder/agentic-sdk";
+import { ArrowDown, ArrowRight, ArrowUp } from "lucide-react";
+import { Card } from "../ui/card.js";
+
+const TREND_CONFIG = {
+  up: { Icon: ArrowUp, colorClass: "text-primary" },
+  down: { Icon: ArrowDown, colorClass: "text-destructive" },
+  neutral: { Icon: ArrowRight, colorClass: "text-muted-foreground" },
+} as const;
+
+export function MetricCardRenderer({ label, value, unit, trend }: DisplayMetric) {
+  const trendConfig = trend ? TREND_CONFIG[trend.direction] : null;
+
+  return (
+    <Card className="p-4 w-fit">
+      <p className="text-sm text-muted-foreground">{label}</p>
+      <div className="flex items-baseline gap-2 mt-1">
+        <span className="text-2xl font-bold text-foreground">{value}</span>
+        {unit && <span className="text-sm text-muted-foreground">{unit}</span>}
+      </div>
+      {trend && trendConfig && (
+        <div className={`flex items-center gap-1 mt-1 text-sm ${trendConfig.colorClass}`}>
+          <trendConfig.Icon size={14} aria-hidden="true" />
+          <span>{trend.value}</span>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/display/PriceHighlightRenderer.tsx

@@ -0,0 +1,44 @@
+import type { DisplayPrice } from "@gugacoder/agentic-sdk";
+import { ExternalLink } from "lucide-react";
+import { Badge } from "../ui/badge";
+import { Card } from "../ui/card";
+
+function formatPrice(value: number, currency: string): string {
+  return new Intl.NumberFormat("pt-BR", {
+    style: "currency",
+    currency,
+  }).format(value);
+}
+
+export function PriceHighlightRenderer({ value, label, context, source, badge }: DisplayPrice) {
+  return (
+    <Card className="p-4 space-y-1 w-fit">
+      <p className="text-sm text-muted-foreground">{label}</p>
+      <div className="flex items-baseline gap-2">
+        <span className="text-2xl font-bold text-foreground">
+          {formatPrice(value.value, value.currency)}
+        </span>
+        {badge && (
+          <Badge variant="destructive">
+            {badge.label}
+          </Badge>
+        )}
+      </div>
+      {context && <p className="text-sm text-muted-foreground">{context}</p>}
+      {source && (
+        <a
+          href={source.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 text-xs text-primary hover:underline"
+        >
+          {source.favicon && (
+            <img src={source.favicon} alt="" width={14} height={14} aria-hidden="true" />
+          )}
+          <span>{source.name}</span>
+          <ExternalLink size={12} aria-hidden="true" />
+        </a>
+      )}
+    </Card>
+  );
+}