improvement(response): removed nested response block output, add docs for webhook block, styling improvements for subblocks

Author: waleedlatif1

apps/docs/content/docs/de/tools/generic_webhook.mdx

@@ -14,7 +14,7 @@ import { Image } from '@/components/ui/image'
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Webhook-Block-Konfiguration"
     width={500}
     height={400}

apps/docs/content/docs/de/triggers/webhook.mdx

@@ -15,7 +15,7 @@ Der generische Webhook-Block erstellt einen flexiblen Endpunkt, der beliebige Pa
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Generische Webhook-Konfiguration"
     width={500}
     height={400}

apps/docs/content/docs/en/blocks/meta.json

@@ -14,6 +14,7 @@
     "router",
     "variables",
     "wait",
+    "webhook",
     "workflow"
   ]
 }

apps/docs/content/docs/en/blocks/webhook.mdx

@@ -0,0 +1,87 @@
+---
+title: Webhook
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { Image } from '@/components/ui/image'
+
+The Webhook block sends HTTP POST requests to external webhook endpoints with automatic webhook headers and optional HMAC signing.
+
+<div className="flex justify-center">
+  <Image
+    src="/static/blocks/webhook.png"
+    alt="Webhook Block"
+    width={500}
+    height={400}
+    className="my-6"
+  />
+</div>
+
+## Configuration
+
+### Webhook URL
+
+The destination endpoint for your webhook request. Supports both static URLs and dynamic values from other blocks.
+
+### Payload
+
+JSON data to send in the request body. Use the AI wand to generate payloads or reference workflow variables:
+
+```json
+{
+  "event": "workflow.completed",
+  "data": {
+    "result": "<agent.content>",
+    "timestamp": "<function.result>"
+  }
+}
+```
+
+### Signing Secret
+
+Optional secret for HMAC-SHA256 payload signing. When provided, the block adds an `X-Webhook-Signature` header:
+
+```
+X-Webhook-Signature: t=1234567890,v1=abc123...
+```
+
+Verify signatures by computing `HMAC-SHA256(secret, "${timestamp}.${body}")`.
+
+### Additional Headers
+
+Custom headers to include with the request. User-provided headers override automatic webhook headers.
+
+## Automatic Headers
+
+Every request includes:
+
+| Header | Description |
+|--------|-------------|
+| `Content-Type` | `application/json` |
+| `X-Webhook-Timestamp` | Unix timestamp (milliseconds) |
+| `X-Delivery-ID` | Unique delivery identifier (UUID) |
+| `Idempotency-Key` | Same as delivery ID for deduplication |
+
+## Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `data` | json | Response body from the endpoint |
+| `status` | number | HTTP status code |
+| `headers` | json | Response headers |
+
+## Example Use Cases
+
+**Notify external services** - Send workflow results to Slack, Discord, or custom endpoints
+```
+Agent → Function (format) → Webhook (notify)
+```
+
+**Trigger external workflows** - Start processes in other systems when conditions are met
+```
+Condition (check) → Webhook (trigger) → Response
+```
+
+<Callout>
+The Webhook block always uses POST. For other HTTP methods or more control, use the [API block](/blocks/api).
+</Callout>

apps/docs/content/docs/en/triggers/webhook.mdx

@@ -15,7 +15,7 @@ The Generic Webhook block creates a flexible endpoint that can receive any paylo
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Generic Webhook Configuration"
     width={500}
     height={400}

apps/docs/content/docs/es/tools/generic_webhook.mdx

@@ -13,7 +13,7 @@ import { Image } from '@/components/ui/image'
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Configuración del bloque Webhook"
     width={500}
     height={400}

apps/docs/content/docs/es/triggers/webhook.mdx

@@ -15,7 +15,7 @@ El bloque de webhook genérico crea un punto de conexión flexible que puede rec
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Configuración genérica de webhook"
     width={500}
     height={400}

apps/docs/content/docs/fr/tools/generic_webhook.mdx

@@ -14,7 +14,7 @@ import { Image } from '@/components/ui/image'
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Configuration du bloc Webhook"
     width={500}
     height={400}

apps/docs/content/docs/fr/triggers/webhook.mdx

@@ -15,7 +15,7 @@ Le bloc Webhook générique crée un point de terminaison flexible qui peut rece
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Configuration de webhook générique"
     width={500}
     height={400}

apps/docs/content/docs/ja/tools/generic_webhook.mdx

@@ -13,7 +13,7 @@ import { Image } from '@/components/ui/image'
 
 <div className="flex justify-center">
   <Image
-    src="/static/blocks/webhook.png"
+    src="/static/blocks/webhook-trigger.png"
     alt="Webhookブロックの設定"
     width={500}
     height={400}