@codrstudio/openclaude-chat 0.1.0

package/src/display/DataTableRenderer.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import type { DisplayTable } from "./sdk-types.js";
+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/DisplayReactRenderer.tsx

@@ -0,0 +1,269 @@
+import { memo, useEffect, useMemo, useRef, useState } from "react"
+import { transform as sucraseTransform } from "sucrase"
+import { SANDBOX_BOOTSTRAP } from "./react-sandbox/bootstrap.js"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+const WHITELIST_MODULES = [
+  "react",
+  "react-dom",
+  "react-dom/client",
+  "framer-motion",
+  "recharts",
+  "lucide-react",
+] as const
+
+type WhitelistedModule = (typeof WHITELIST_MODULES)[number]
+
+interface ImportDecl {
+  module: WhitelistedModule
+  symbols: string[]
+}
+
+interface Layout {
+  height?: number | "auto"
+  aspectRatio?: string
+  maxWidth?: number
+}
+
+export interface DisplayReactRendererProps {
+  // Flattened DisplayReactSchema payload (PartRenderer spreads args as props)
+  version?: "1"
+  title?: string
+  description?: string
+  code: string
+  language?: "jsx" | "tsx"
+  entry?: "default"
+  imports?: ImportDecl[]
+  initialProps?: Record<string, unknown>
+  layout?: Layout
+  theme?: "light" | "dark" | "auto"
+  // Sandbox bundle base — consumers can override (default: "/sandbox")
+  sandboxBase?: string
+}
+
+// ─── Size limits (mirror SDK schema) ──────────────────────────────────────────
+
+const MAX_CODE_BYTES = 8 * 1024
+const MAX_PROPS_BYTES = 32 * 1024
+
+// ─── Module-level bundle cache ────────────────────────────────────────────────
+
+interface SandboxBundles {
+  react: string
+  reactDom: string
+  framerMotion: string
+  recharts: string
+  lucideReact: string
+}
+
+const bundleCache = new Map<string, Promise<SandboxBundles>>()
+
+function loadBundles(base: string): Promise<SandboxBundles> {
+  const key = base
+  const cached = bundleCache.get(key)
+  if (cached) return cached
+  const p = (async () => {
+    const [react, reactDom, framerMotion, recharts, lucideReact] = await Promise.all([
+      fetch(`${base}/react.js`).then((r) => r.text()),
+      fetch(`${base}/react-dom.js`).then((r) => r.text()),
+      fetch(`${base}/framer-motion.js`).then((r) => r.text()),
+      fetch(`${base}/recharts.js`).then((r) => r.text()),
+      fetch(`${base}/lucide-react.js`).then((r) => r.text()),
+    ])
+    return { react, reactDom, framerMotion, recharts, lucideReact }
+  })()
+  bundleCache.set(key, p)
+  return p
+}
+
+// ─── Validation helpers ──────────────────────────────────────────────────────
+
+function byteLength(s: string): number {
+  return new TextEncoder().encode(s).length
+}
+
+function validatePayload(props: DisplayReactRendererProps): string | null {
+  if (!props.code || typeof props.code !== "string") return "missing code"
+  if (byteLength(props.code) > MAX_CODE_BYTES) return `code exceeds ${MAX_CODE_BYTES} bytes`
+  if (props.initialProps) {
+    try {
+      const s = JSON.stringify(props.initialProps)
+      if (byteLength(s) > MAX_PROPS_BYTES) return `initialProps exceeds ${MAX_PROPS_BYTES} bytes`
+    } catch {
+      return "initialProps not JSON-serializable"
+    }
+  }
+  if (props.imports) {
+    for (const imp of props.imports) {
+      if (!WHITELIST_MODULES.includes(imp.module)) {
+        return `import not in whitelist: ${imp.module}`
+      }
+    }
+  }
+  return null
+}
+
+// ─── Transpile user code ─────────────────────────────────────────────────────
+
+function compile(code: string, language: "jsx" | "tsx"): { ok: true; code: string } | { ok: false; error: string } {
+  try {
+    const transforms: ("jsx" | "typescript" | "imports")[] = ["jsx", "imports"]
+    if (language === "tsx") transforms.unshift("typescript")
+    const out = sucraseTransform(code, {
+      transforms,
+      production: true,
+      jsxRuntime: "classic",
+    })
+    return { ok: true, code: out.code }
+  } catch (e) {
+    return { ok: false, error: e instanceof Error ? e.message : String(e) }
+  }
+}
+
+// ─── Build srcdoc ────────────────────────────────────────────────────────────
+
+function buildSrcDoc(bundles: SandboxBundles): string {
+  return `<!doctype html><html><head><meta charset="utf-8"><style>
+  html,body{margin:0;padding:0;}
+  body{font:14px/1.5 system-ui,-apple-system,sans-serif;padding:12px;box-sizing:border-box;}
+  #root{min-height:0;}
+  *{box-sizing:border-box;}
+</style></head><body><div id="root"></div>
+<script>${bundles.react}<\/script>
+<script>${bundles.reactDom}<\/script>
+<script>${bundles.framerMotion}<\/script>
+<script>${bundles.recharts}<\/script>
+<script>${bundles.lucideReact}<\/script>
+<script>${SANDBOX_BOOTSTRAP}<\/script>
+</body></html>`
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const DisplayReactRenderer = memo(function DisplayReactRenderer(props: DisplayReactRendererProps) {
+  const {
+    code,
+    language = "jsx",
+    initialProps,
+    layout,
+    theme = "auto",
+    title,
+    description,
+    sandboxBase = "/sandbox",
+  } = props
+
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const [height, setHeight] = useState<number | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading")
+
+  // Validate + compile once per payload
+  const compiled = useMemo<{ ok: true; code: string } | { ok: false; error: string }>(() => {
+    const validationError = validatePayload(props)
+    if (validationError) return { ok: false, error: validationError }
+    return compile(code, language)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [code, language, JSON.stringify(props.imports), JSON.stringify(initialProps)])
+
+  // Build + inject srcdoc once bundles are available
+  useEffect(() => {
+    if (compiled.ok === false) {
+      setError(compiled.error)
+      setStatus("error")
+      return
+    }
+    let cancelled = false
+    loadBundles(sandboxBase)
+      .then((bundles) => {
+        if (cancelled) return
+        const iframe = iframeRef.current
+        if (!iframe) return
+        iframe.srcdoc = buildSrcDoc(bundles)
+      })
+      .catch((e) => {
+        if (cancelled) return
+        setError(`failed to load sandbox bundles: ${e instanceof Error ? e.message : String(e)}`)
+        setStatus("error")
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [compiled, sandboxBase])
+
+  // postMessage pump: wait for sandbox-boot → send compiled code. Also capture height + ready.
+  useEffect(() => {
+    const handler = (ev: MessageEvent) => {
+      const iframe = iframeRef.current
+      if (!iframe || ev.source !== iframe.contentWindow) return
+      const data = ev.data as { type?: string; height?: number } | undefined
+      if (!data || typeof data !== "object" || !data.type) return
+      if (data.type === "sandbox-boot") {
+        if (!compiled.ok) return
+        iframe.contentWindow?.postMessage(
+          {
+            type: "sandbox-render",
+            compiledCode: compiled.code,
+            payload: {
+              initialProps: initialProps ?? {},
+              theme,
+            },
+          },
+          "*",
+        )
+      } else if (data.type === "sandbox-ready") {
+        setStatus("ready")
+      } else if (data.type === "sandbox-height" && typeof data.height === "number") {
+        if (layout?.height !== "auto" && typeof layout?.height === "number") return
+        setHeight(data.height + 24) // padding from body
+      }
+    }
+    window.addEventListener("message", handler)
+    return () => window.removeEventListener("message", handler)
+  }, [compiled, initialProps, theme, layout?.height])
+
+  // Compute iframe style
+  const iframeStyle: React.CSSProperties = {
+    width: "100%",
+    maxWidth: layout?.maxWidth ? `${layout.maxWidth}px` : undefined,
+    aspectRatio: layout?.aspectRatio,
+    height:
+      typeof layout?.height === "number"
+        ? `${layout.height}px`
+        : height !== null
+          ? `${height}px`
+          : "120px",
+    border: "1px solid var(--border, #e5e5e5)",
+    borderRadius: "8px",
+    display: "block",
+    background: "var(--bg, #fff)",
+  }
+
+  if (error || (compiled.ok === false)) {
+    const msg = error ?? (compiled.ok === false ? compiled.error : "unknown")
+    return (
+      <div className="rounded-lg border border-red-300 bg-red-50 text-red-900 p-3 text-xs">
+        <div className="font-semibold mb-1">React sandbox error</div>
+        <pre className="whitespace-pre-wrap break-words font-mono text-[11px]">{msg}</pre>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {(title || description) && (
+        <div className="flex flex-col gap-0.5 px-0.5">
+          {title && <div className="text-sm font-semibold text-foreground">{title}</div>}
+          {description && <div className="text-xs text-muted-foreground">{description}</div>}
+        </div>
+      )}
+      <iframe
+        ref={iframeRef}
+        sandbox="allow-scripts"
+        title={title ?? "react sandbox"}
+        style={iframeStyle}
+        aria-busy={status === "loading"}
+      />
+    </div>
+  )
+})

package/src/display/FileCardRenderer.tsx

@@ -0,0 +1,55 @@
+import type { DisplayFile } from "./sdk-types.js";
+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 "./sdk-types.js";
+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 "./sdk-types.js";
+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>
+  );
+}