@codrstudio/openclaude-chat 0.1.0 → 0.2.0

package/src/display/GalleryRenderer.tsx

@@ -1,65 +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>
-  );
-}
+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

@@ -1,114 +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>
-  );
-}
+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>
+  );
+}

package/src/display/LinkPreviewRenderer.tsx

@@ -1,74 +1,74 @@
-import { useState } from "react";
-import type { DisplayLink } from "./sdk-types.js";
-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>
-  );
-}
+import { useState } from "react";
+import type { DisplayLink } from "./sdk-types.js";
+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

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