52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2663,"use client"; import * as React from "react"; import { Loader2, Plus, Send, Trash2 } from "lucide-react"; import { cn } from "@/lib/utils"; type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE"; interface WebhookResponse { status: number; statusText: string; headers: Record; body: unknown; timing: number; } interface WebhookTesterProps { defaultUrl?: string; defaultMethod?: HttpMethod; defaultHeaders?: Record; defaultBody?: string; onSend?: (request: { url: string; method: HttpMethod; headers: Record; body?: string; }) => Promise; className?: string; } const METHOD_COLORS: Record = { GET: "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300", POST: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300", PUT: "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300", PATCH: "bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300", DELETE: "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300", }; export function WebhookTester({ defaultUrl = "", defaultMethod = "POST", defaultHeaders = { "Content-Type": "application/json" }, defaultBody = "{}", onSend, className, }: WebhookTesterProps) { const [url, setUrl] = React.useState(defaultUrl); const [method, setMethod] = React.useState(defaultMethod); const [headers, setHeaders] = React.useState< { key: string; value: string }[] >(Object.entries(defaultHeaders).map(([key, value]) => ({ key, value }))); const [body, setBody] = React.useState(defaultBody); const [response, setResponse] = React.useState(null); const [error, setError] = React.useState(null); const [loading, setLoading] = React.useState(false); const handleAddHeader = React.useCallback(() => { setHeaders((prev) => [...prev, { key: "", value: "" }]); }, []); const handleRemoveHeader = React.useCallback((index: number) => { setHeaders((prev) => prev.filter((_, i) => i !== index)); }, []); const handleHeaderChange = React.useCallback( (index: number, field: "key" | "value", value: string) => { setHeaders((prev) => prev.map((h, i) => (i === index ? { ...h, [field]: value } : h)), ); }, [], ); const handleSend = React.useCallback(async () => { if (!url) return; setLoading(true); setError(null); setResponse(null); const headersObj = headers.reduce( (acc, { key, value }) => { if (key) acc[key] = value; return acc; }, {} as Record, ); try { if (onSend) { const res = await onSend({ url, method, headers: headersObj, body: method !== "GET" ? body : undefined, }); setResponse(res); } else { const start = performance.now(); const res = await fetch(url, { method, headers: headersObj, body: method !== "GET" ? body : undefined, }); const timing = performance.now() - start; const responseHeaders: Record = {}; res.headers.forEach((value, key) => { responseHeaders[key] = value; }); let responseBody: unknown; const contentType = res.headers.get("content-type"); if (contentType?.includes("application/json")) { responseBody = await res.json(); } else { responseBody = await res.text(); } setResponse({ status: res.status, statusText: res.statusText, headers: responseHeaders, body: responseBody, timing: Math.round(timing), }); } } catch (err) { setError(err instanceof Error ? err.message : "Request failed"); } finally { setLoading(false); } }, [url, method, headers, body, onSend]); const getStatusColor = React.useCallback((status: number) => { if (status >= 200 && status < 300) return "text-green-600"; if (status >= 300 && status < 400) return "text-yellow-600"; if (status >= 400 && status < 500) return "text-orange-600"; return "text-red-600"; }, []); return (

setUrl(e.target.value)} placeholder="https://api.example.com/webhook" aria-label="Webhook URL" className="flex-1 px-3 py-2 border border-border rounded bg-background font-mono text-sm" />

Headers

{headers.map((header, index) => (

handleHeaderChange(index, "key", e.target.value) } placeholder="Header name" aria-label="Header name" className="flex-1 px-2 py-1 border border-border rounded bg-background font-mono text-sm" /> handleHeaderChange(index, "value", e.target.value) } placeholder="Header value" aria-label={`Value for ${header.key || "header"}`} className="flex-[2] px-2 py-1 border border-border rounded bg-background font-mono text-sm" />

))}

{method !== "GET" && (

Body

setBody(e.target.value)}
              placeholder='{"key": "value"}'
              aria-label="Request body"
              className="w-full h-32 px-3 py-2 border border-border rounded bg-background font-mono text-sm resize-none"
            />
          </div>
        )}
      </div>

{(response || error) && (
        <div className="border-t border-border">
          <div className="px-4 py-2 bg-muted/50 text-sm font-medium flex items-center justify-between">
            <span>Response</span>
            {response && (
              <div className="flex items-center gap-3 text-xs">
                <span
                  className={cn(
                    "font-mono font-bold",
                    getStatusColor(response.status),
                  )}
                >
                  {response.status} {response.statusText}
                </span>
                <span className="text-muted-foreground">
                  {response.timing}ms
                </span>
              </div>
            )}
          </div>
          <div className="p-4 overflow-auto max-h-64">
            {error ? (
              <div className="text-red-500 text-sm">{error}</div>
            ) : response ? (
              <pre className="font-mono text-xs whitespace-pre-wrap">
                {typeof response.body === "string"
                  ? response.body
                  : JSON.stringify(response.body, null, 2)}
              </pre>
            ) : null}
          </div>
        </div>
      )}
    </div>
  );
}

export type { WebhookTesterProps, WebhookResponse, HttpMethod };
51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@elements","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/blocks/devtools/webhook-tester/components/elements/webhook-tester.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>