Skip to content

Commit 7a25523

Browse files
Merge branch 'main' into add-friendly-http-errors
2 parents 2e5ebf3 + c55af7b commit 7a25523

File tree

7 files changed

+95
-13
lines changed

7 files changed

+95
-13
lines changed

apps/webapp/app/components/AskAI.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -118,30 +118,31 @@ function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
118118
<motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
119119
<TooltipProvider disableHoverableContent>
120120
<Tooltip>
121-
<div className={isCollapsed ? "w-full" : "inline-flex"}>
122-
<TooltipTrigger asChild>
121+
<TooltipTrigger asChild>
122+
<span className={cn("inline-flex h-8", isCollapsed && "w-full")}>
123123
<Button
124124
variant="small-menu-item"
125125
data-action="ask-ai"
126-
shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
126+
shortcut={{ modifiers: ["mod"], key: "i", enabledOnInputElements: true }}
127127
hideShortcutKey
128128
data-modal-override-open-class-ask-ai="true"
129129
onClick={() => openAskAI()}
130-
className={isCollapsed ? "w-full justify-center" : ""}
130+
fullWidth={isCollapsed}
131+
className={cn("h-full", isCollapsed && "justify-center")}
131132
>
132133
<AISparkleIcon className="size-5" />
133134
</Button>
134-
</TooltipTrigger>
135-
</div>
135+
</span>
136+
</TooltipTrigger>
136137
<TooltipContent
137-
side={isCollapsed ? "right" : "top"}
138-
sideOffset={isCollapsed ? 8 : 4}
139-
className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs"
138+
side="right"
139+
sideOffset={8}
140+
className="flex items-center gap-2 text-xs"
140141
>
141142
Ask AI
142143
<span className="flex items-center">
143144
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
144-
<ShortcutKey shortcut={{ key: "/" }} variant="medium/bright" />
145+
<ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
145146
</span>
146147
</TooltipContent>
147148
</Tooltip>

apps/webapp/app/components/Shortcuts.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ function ShortcutContent() {
7676
<ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
7777
</Shortcut>
7878
<Shortcut name="Ask AI">
79-
<ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
79+
<ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
80+
<ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
8081
</Shortcut>
8182
<Shortcut name="Filter">
8283
<ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />

apps/webapp/app/components/navigation/SideMenu.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -993,7 +993,10 @@ function CollapseToggle({
993993
return (
994994
<div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
995995
{/* Vertical line to mask the side menu border */}
996-
<div className="pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 bg-background-bright" />
996+
<div className={cn(
997+
"pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 transition-colors duration-200",
998+
isHovering ? "bg-charcoal-750" : "bg-background-bright"
999+
)} />
9971000
<TooltipProvider disableHoverableContent>
9981001
<Tooltip>
9991002
<TooltipTrigger asChild>

docs/docs.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,8 @@
352352
"guides/frameworks/webhooks-guides-overview",
353353
"guides/frameworks/nextjs-webhooks",
354354
"guides/frameworks/remix-webhooks",
355-
"guides/examples/stripe-webhook"
355+
"guides/examples/stripe-webhook",
356+
"guides/examples/hookdeck-webhook"
356357
]
357358
}
358359
]
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: "Trigger tasks from Hookdeck webhooks"
3+
sidebarTitle: "Hookdeck webhooks"
4+
description: "This example demonstrates how to use Hookdeck to receive webhooks and trigger Trigger.dev tasks."
5+
---
6+
7+
## Overview
8+
9+
This example shows how to use [Hookdeck](https://hookdeck.com) as your webhook infrastructure to trigger Trigger.dev tasks. Hookdeck receives webhooks from external services, and forwards them directly to the Trigger.dev API. This gives you the best of both worlds: Hookdeck's webhook management, logging, and replay capabilities, combined with Trigger.dev's reliable task execution.
10+
11+
## Key features
12+
13+
- Use Hookdeck as your webhook endpoint for external services
14+
- Hookdeck forwards webhooks directly to Trigger.dev tasks via the API
15+
- All webhooks are logged and replayable in Hookdeck
16+
17+
## Setting up Hookdeck
18+
19+
You'll configure everything in the [Hookdeck dashboard](https://dashboard.hookdeck.com). No code changes needed in your app.
20+
21+
### 1. Create a destination
22+
23+
In Hookdeck, create a new [destination](https://hookdeck.com/docs/destinations) with the following settings:
24+
25+
- **URL**: `https://api.trigger.dev/api/v1/tasks/<task-id>/trigger` (replace `<task-id>` with your task ID)
26+
- **Method**: POST
27+
- **Authentication**: Bearer token (use your `TRIGGER_SECRET_KEY` from Trigger.dev)
28+
29+
### 2. Add a transformation
30+
31+
Create a [transformation](https://hookdeck.com/docs/transformations) to wrap the webhook body in the `payload` field that Trigger.dev expects:
32+
33+
```javascript
34+
addHandler("transform", (request, context) => {
35+
request.body = { payload: { ...request.body } };
36+
return request;
37+
});
38+
```
39+
40+
### 3. Create a connection
41+
42+
Create a [connection](https://hookdeck.com/docs/connections) that links your source (where webhooks come from) to the destination and transformation you created above.
43+
44+
## Task code
45+
46+
This task will be triggered when Hookdeck forwards a webhook to the Trigger.dev API.
47+
48+
```ts trigger/webhook-handler.ts
49+
import { task } from "@trigger.dev/sdk";
50+
51+
export const webhookHandler = task({
52+
id: "webhook-handler",
53+
run: async (payload: Record<string, unknown>) => {
54+
// The payload contains the original webhook data from the external service
55+
console.log("Received webhook:", payload);
56+
57+
// Add your custom logic here
58+
},
59+
});
60+
```
61+
62+
## Testing your setup
63+
64+
To test everything is working:
65+
66+
1. Set up your destination, transformation, and connection in [Hookdeck](https://dashboard.hookdeck.com)
67+
2. Send a test webhook to your Hookdeck source URL (use the Hookdeck Console or cURL)
68+
3. Check the Hookdeck dashboard to verify the webhook was received and forwarded
69+
4. Check the [Trigger.dev dashboard](https://cloud.trigger.dev) to see the successful run of your task
70+
71+
For more information on setting up Hookdeck, refer to the [Hookdeck Documentation](https://hookdeck.com/docs).

docs/guides/frameworks/webhooks-guides-overview.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ A webhook handler is code that executes in response to an event. They can be end
3131
How to create a Stripe webhook handler and trigger a task when a 'checkout session completed'
3232
event is received.
3333
</Card>
34+
<Card title="Hookdeck webhooks" icon="webhook" href="/guides/examples/hookdeck-webhook">
35+
Use Hookdeck to receive webhooks and forward them to Trigger.dev tasks with logging and replay
36+
capabilities.
37+
</Card>
3438
<Card
3539
title="Supabase database webhooks guide"
3640
icon="webhook"

docs/guides/introduction.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ Get set up fast using our detailed walk-through guides.
3737
| [Python web crawler](/guides/python/python-crawl4ai) | Use Python, Crawl4AI and Playwright to create a headless web crawler |
3838
| [Sequin database triggers](/guides/frameworks/sequin) | Trigger tasks from database changes using Sequin |
3939
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |
40+
| [Hookdeck webhooks](/guides/examples/hookdeck-webhook) | Use Hookdeck to receive webhooks and forward them to Trigger.dev tasks |
4041
| [Supabase database webhooks](/guides/frameworks/supabase-edge-functions-database-webhooks) | Trigger tasks using Supabase database webhooks |
4142
| [Supabase edge function hello world](/guides/frameworks/supabase-edge-functions-basic) | Trigger tasks from Supabase edge function |
4243
| [Using webhooks in Next.js](/guides/frameworks/nextjs-webhooks) | Trigger tasks from a webhook in Next.js |

0 commit comments

Comments
 (0)