@codrstudio/openclaude-chat 0.1.0

package/src/display/react-sandbox/bootstrap.ts

@@ -0,0 +1,155 @@
+// The bootstrap script runs INSIDE the sandboxed iframe.
+// It is serialized to a string and embedded in the srcdoc HTML.
+// Keep it dependency-free — only browser APIs + the 5 globals injected via <script> tags.
+
+export const SANDBOX_BOOTSTRAP = `
+(function() {
+  var WHITELIST = {
+    "react": "__React",
+    "react-dom": "__ReactDOM",
+    "react-dom/client": "__ReactDOM",
+    "framer-motion": "__FramerMotion",
+    "recharts": "__Recharts",
+    "lucide-react": "__LucideReact"
+  };
+
+  function getGlobal(name) {
+    return window[WHITELIST[name]];
+  }
+
+  function makeRequire() {
+    return function require(name) {
+      var g = getGlobal(name);
+      if (!g) throw new Error("sandbox: module not in whitelist: " + name);
+      return g;
+    };
+  }
+
+  function renderError(title, detail) {
+    var root = document.getElementById("root");
+    if (!root) return;
+    root.innerHTML = "";
+    var box = document.createElement("div");
+    box.style.cssText = "padding:12px 14px;border:1px solid #fca5a5;background:#fef2f2;color:#991b1b;border-radius:8px;font:12px/1.5 system-ui,sans-serif;";
+    var t = document.createElement("div");
+    t.style.cssText = "font-weight:600;margin-bottom:4px;";
+    t.textContent = title;
+    box.appendChild(t);
+    if (detail) {
+      var d = document.createElement("pre");
+      d.style.cssText = "margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font:11px/1.4 ui-monospace,monospace;color:#7f1d1d;";
+      d.textContent = String(detail);
+      box.appendChild(d);
+    }
+    root.appendChild(box);
+  }
+
+  function applyTheme(theme) {
+    var dark = theme === "dark" || (theme === "auto" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
+    var root = document.documentElement;
+    if (dark) {
+      root.style.setProperty("--bg", "#0a0a0a");
+      root.style.setProperty("--fg", "#fafafa");
+      root.style.setProperty("--muted", "#a3a3a3");
+      root.style.setProperty("--border", "#262626");
+      root.style.setProperty("--accent", "#60a5fa");
+      document.body.style.background = "#0a0a0a";
+      document.body.style.color = "#fafafa";
+    } else {
+      root.style.setProperty("--bg", "#ffffff");
+      root.style.setProperty("--fg", "#0a0a0a");
+      root.style.setProperty("--muted", "#737373");
+      root.style.setProperty("--border", "#e5e5e5");
+      root.style.setProperty("--accent", "#2563eb");
+      document.body.style.background = "#ffffff";
+      document.body.style.color = "#0a0a0a";
+    }
+  }
+
+  function mount(payload, compiledCode) {
+    try {
+      var React = window.__React;
+      var ReactDOM = window.__ReactDOM;
+      var FramerMotion = window.__FramerMotion;
+      if (!React || !ReactDOM) {
+        renderError("Sandbox: React runtime missing", "__React/__ReactDOM not on window.");
+        return;
+      }
+
+      applyTheme(payload.theme || "auto");
+
+      // Evaluate compiled CJS module. sucrase's "imports" transform produces code
+      // that expects exports/module/require in scope.
+      var moduleObj = { exports: {} };
+      var exportsObj = moduleObj.exports;
+      var requireFn = makeRequire();
+      var fn;
+      try {
+        // eslint-disable-next-line no-new-func
+        fn = new Function("exports", "module", "require", "React", compiledCode);
+      } catch (e) {
+        renderError("Sandbox: compile error", e && e.message);
+        return;
+      }
+      try {
+        fn(exportsObj, moduleObj, requireFn, React);
+      } catch (e) {
+        renderError("Sandbox: runtime error", e && (e.stack || e.message));
+        return;
+      }
+      var Component = moduleObj.exports && (moduleObj.exports.default || moduleObj.exports);
+      if (typeof Component !== "function") {
+        renderError("Sandbox: no default export", "Expected 'export default function ...' but got: " + typeof Component);
+        return;
+      }
+
+      // Minimal error boundary
+      var ErrorBoundary = (function() {
+        function EB(props) { React.Component.call(this, props); this.state = { err: null }; }
+        EB.prototype = Object.create(React.Component.prototype);
+        EB.prototype.constructor = EB;
+        EB.getDerivedStateFromError = function(err) { return { err: err }; };
+        EB.prototype.componentDidCatch = function(err) { renderError("Sandbox: render crash", err && (err.stack || err.message)); };
+        EB.prototype.render = function() {
+          if (this.state.err) return null;
+          return this.props.children;
+        };
+        return EB;
+      })();
+
+      var root = document.getElementById("root");
+      root.innerHTML = "";
+      var element = React.createElement(ErrorBoundary, null, React.createElement(Component, payload.initialProps || {}));
+      if (FramerMotion && FramerMotion.MotionConfig) {
+        element = React.createElement(FramerMotion.MotionConfig, { reducedMotion: "user" }, element);
+      }
+      var reactRoot = ReactDOM.createRoot(root);
+      reactRoot.render(element);
+
+      // ResizeObserver → notify parent of content height
+      if (typeof ResizeObserver !== "undefined") {
+        var ro = new ResizeObserver(function(entries) {
+          for (var i = 0; i < entries.length; i++) {
+            var h = Math.ceil(entries[i].contentRect.height);
+            window.parent.postMessage({ type: "sandbox-height", height: h }, "*");
+          }
+        });
+        ro.observe(root);
+      }
+
+      window.parent.postMessage({ type: "sandbox-ready" }, "*");
+    } catch (e) {
+      renderError("Sandbox: unexpected error", e && (e.stack || e.message));
+    }
+  }
+
+  window.addEventListener("message", function(ev) {
+    var data = ev.data;
+    if (!data || data.type !== "sandbox-render") return;
+    mount(data.payload, data.compiledCode);
+  });
+
+  // Signal parent we are alive and waiting for code
+  window.parent.postMessage({ type: "sandbox-boot" }, "*");
+})();
+`

package/src/display/registry.ts

@@ -0,0 +1,84 @@
+import type { ComponentType } from "react";
+
+import { AlertRenderer } from "./AlertRenderer.js";
+import { MetricCardRenderer } from "./MetricCardRenderer.js";
+import { PriceHighlightRenderer } from "./PriceHighlightRenderer.js";
+import { FileCardRenderer } from "./FileCardRenderer.js";
+import { CodeBlockRenderer } from "./CodeBlockRenderer.js";
+import { SourcesListRenderer } from "./SourcesListRenderer.js";
+import { StepTimelineRenderer } from "./StepTimelineRenderer.js";
+import { ProgressStepsRenderer } from "./ProgressStepsRenderer.js";
+import { ChartRenderer } from "./ChartRenderer.js";
+import { CarouselRenderer } from "./CarouselRenderer.js";
+import { ProductCardRenderer } from "./ProductCardRenderer.js";
+import { ComparisonTableRenderer } from "./ComparisonTableRenderer.js";
+import { DataTableRenderer } from "./DataTableRenderer.js";
+import { SpreadsheetRenderer } from "./SpreadsheetRenderer.js";
+import { GalleryRenderer } from "./GalleryRenderer.js";
+import { ImageViewerRenderer } from "./ImageViewerRenderer.js";
+import { LinkPreviewRenderer } from "./LinkPreviewRenderer.js";
+import { MapViewRenderer } from "./MapViewRenderer.js";
+import { ChoiceButtonsRenderer } from "./ChoiceButtonsRenderer.js";
+import { DisplayReactRenderer } from "./DisplayReactRenderer.js";
+
+export type DisplayActionName =
+  | "metric"
+  | "price"
+  | "alert"
+  | "choices"
+  | "table"
+  | "spreadsheet"
+  | "comparison"
+  | "carousel"
+  | "gallery"
+  | "sources"
+  | "product"
+  | "link"
+  | "file"
+  | "image"
+  | "chart"
+  | "map"
+  | "code"
+  | "progress"
+  | "steps"
+  | "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DisplayRendererMap = Partial<Record<string, ComponentType<any>>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const defaultDisplayRenderers: Record<DisplayActionName, ComponentType<any>> = {
+  // highlight
+  metric: MetricCardRenderer,
+  price: PriceHighlightRenderer,
+  alert: AlertRenderer,
+  choices: ChoiceButtonsRenderer,
+  // collection
+  table: DataTableRenderer,
+  spreadsheet: SpreadsheetRenderer,
+  comparison: ComparisonTableRenderer,
+  carousel: CarouselRenderer,
+  gallery: GalleryRenderer,
+  sources: SourcesListRenderer,
+  // card
+  product: ProductCardRenderer,
+  link: LinkPreviewRenderer,
+  file: FileCardRenderer,
+  image: ImageViewerRenderer,
+  // visual
+  chart: ChartRenderer,
+  map: MapViewRenderer,
+  code: CodeBlockRenderer,
+  progress: ProgressStepsRenderer,
+  steps: StepTimelineRenderer,
+  react: DisplayReactRenderer,
+};
+
+export function resolveDisplayRenderer(
+  action: string,
+  overrides?: DisplayRendererMap,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): ComponentType<any> | null {
+  if (overrides?.[action]) return overrides[action]!;
+  return (defaultDisplayRenderers as Record<string, ComponentType<any>>)[action] ?? null;
+}

package/src/display/sdk-types.ts

@@ -0,0 +1,217 @@
+// Tipos dos display widgets — espelham os schemas em
+// D:\aw\context\workspaces\openclaude-sdk\repo\src\display\schemas.ts
+// Mantemos local para nao ter dependencia dura em typings da SDK.
+
+export type Money = {
+  value: number;
+  currency?: string;
+};
+
+export type SourceRef = {
+  name: string;
+  url: string;
+  favicon?: string;
+};
+
+export type DisplayBadge = {
+  label: string;
+  variant?: "default" | "success" | "warning" | "error" | "info";
+};
+
+// 1. METRICAS E DADOS ────────────────────────────────────────────
+
+export type DisplayMetric = {
+  label: string;
+  value: string | number;
+  unit?: string;
+  trend?: {
+    direction: "up" | "down" | "neutral";
+    value: string;
+  };
+  icon?: string;
+};
+
+export type DisplayChart = {
+  type: "bar" | "line" | "pie" | "area" | "donut";
+  title: string;
+  data: Array<{
+    label: string;
+    value: number;
+    color?: string;
+  }>;
+  format?: {
+    prefix?: string;
+    suffix?: string;
+    locale?: string;
+  };
+};
+
+export type DisplayTable = {
+  title?: string;
+  columns: Array<{
+    key: string;
+    label: string;
+    type?: "text" | "number" | "money" | "image" | "link" | "badge";
+    align?: "left" | "center" | "right";
+  }>;
+  rows: Array<Record<string, unknown>>;
+  sortable?: boolean;
+};
+
+export type DisplayProgress = {
+  title?: string;
+  steps: Array<{
+    label: string;
+    status: "completed" | "current" | "pending";
+    description?: string;
+  }>;
+};
+
+// 2. PRODUTOS E COMERCIO ─────────────────────────────────────────
+
+export type DisplayProduct = {
+  title: string;
+  image?: string;
+  price?: Money;
+  originalPrice?: Money;
+  rating?: {
+    score: number;
+    count: number;
+  };
+  source?: SourceRef;
+  badges?: DisplayBadge[];
+  url?: string;
+  description?: string;
+};
+
+export type DisplayComparison = {
+  title?: string;
+  items: DisplayProduct[];
+  attributes?: Array<{ key: string; label: string }>;
+};
+
+export type DisplayPrice = {
+  value: Money;
+  label: string;
+  context?: string;
+  source?: SourceRef;
+  badge?: DisplayBadge;
+};
+
+// 3. MIDIA ───────────────────────────────────────────────────────
+
+export type DisplayImage = {
+  url: string;
+  alt?: string;
+  caption?: string;
+  width?: number;
+  height?: number;
+};
+
+export type DisplayGallery = {
+  title?: string;
+  images: Array<{ url: string; alt?: string; caption?: string }>;
+  layout?: "grid" | "masonry";
+  columns?: number;
+};
+
+export type DisplayCarousel = {
+  title?: string;
+  items: Array<{
+    image?: string;
+    title: string;
+    subtitle?: string;
+    price?: Money;
+    url?: string;
+    badges?: DisplayBadge[];
+  }>;
+};
+
+// 4. REFERENCIAS E NAVEGACAO ─────────────────────────────────────
+
+export type DisplaySources = {
+  label?: string;
+  sources: Array<{
+    title: string;
+    url: string;
+    favicon?: string;
+    snippet?: string;
+  }>;
+};
+
+export type DisplayLink = {
+  url: string;
+  title: string;
+  description?: string;
+  image?: string;
+  favicon?: string;
+  domain?: string;
+};
+
+export type DisplayMap = {
+  title?: string;
+  pins: Array<{
+    lat: number;
+    lng: number;
+    label?: string;
+    address?: string;
+  }>;
+  zoom?: number;
+};
+
+// 5. DOCUMENTOS E ARQUIVOS ───────────────────────────────────────
+
+export type DisplayFile = {
+  name: string;
+  type: string;
+  size?: number;
+  url?: string;
+  preview?: string;
+};
+
+export type DisplayCode = {
+  language: string;
+  code: string;
+  title?: string;
+  lineNumbers?: boolean;
+};
+
+export type DisplaySpreadsheet = {
+  title?: string;
+  headers: string[];
+  rows: Array<Array<string | number | null>>;
+  format?: {
+    moneyColumns?: number[];
+    percentColumns?: number[];
+  };
+};
+
+// 6. INTERATIVO ──────────────────────────────────────────────────
+
+export type DisplaySteps = {
+  title?: string;
+  steps: Array<{
+    title: string;
+    description?: string;
+    status?: "completed" | "current" | "pending";
+  }>;
+  orientation?: "vertical" | "horizontal";
+};
+
+export type DisplayAlert = {
+  variant: "info" | "warning" | "error" | "success";
+  title?: string;
+  message: string;
+  icon?: string;
+};
+
+export type DisplayChoices = {
+  question?: string;
+  choices: Array<{
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+  }>;
+  layout?: "buttons" | "cards" | "list";
+};

package/src/hooks/ChatProvider.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useContext } from "react";
+import { useOpenClaudeChat, type UseOpenClaudeChatOptions } from "./useOpenClaudeChat.js";
+
+type ChatContextValue = ReturnType<typeof useOpenClaudeChat>;
+
+const ChatContext = createContext<ChatContextValue | null>(null);
+
+export interface ChatProviderProps extends UseOpenClaudeChatOptions {
+  children: React.ReactNode;
+}
+
+export function ChatProvider({ children, ...options }: ChatProviderProps) {
+  const chat = useOpenClaudeChat(options);
+  return <ChatContext.Provider value={chat}>{children}</ChatContext.Provider>;
+}
+
+export function useChatContext(): ChatContextValue {
+  const ctx = useContext(ChatContext);
+  if (!ctx) throw new Error("useChatContext must be used within ChatProvider");
+  return ctx;
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+
+export function useIsMobile(breakpoint = 768): boolean {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [breakpoint]);
+
+  return isMobile;
+}