From c54c52a42d9957cfd0b2f3085996a25399a3bd51 Mon Sep 17 00:00:00 2001
From: Reinier van der Leer <pwuts@agpt.co>
Date: Thu, 12 Dec 2024 15:13:52 +0100
Subject: [PATCH] fix webhook URL UI

---
 .../frontend/src/components/CustomNode.tsx    | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
index 97e65c0c2849..4d2b0d0e1fca 100644
--- a/autogpt_platform/frontend/src/components/CustomNode.tsx
+++ b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -729,10 +729,26 @@ export function CustomNode({
             <div>
               {data.uiType === BlockUIType.WEBHOOK_MANUAL &&
                 (data.webhook ? (
-                  <p className="nodrag">
-                    Webhook URL: <br />
-                    <code className="select-all">{data.webhook.url}</code>
-                  </p>
+                  <div className="nodrag mr-5 flex flex-col gap-1">
+                    Webhook URL:
+                    <div className="flex gap-2 rounded-md bg-gray-50 p-2">
+                      <code className="select-all text-sm">
+                        {data.webhook.url}
+                      </code>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="size-7 flex-none"
+                        onClick={() =>
+                          data.webhook &&
+                          navigator.clipboard.writeText(data.webhook.url)
+                        }
+                        title="Copy webhook URL"
+                      >
+                        <CopyIcon className="size-4" />
+                      </Button>
+                    </div>
+                  </div>
                 ) : (
                   <p className="italic text-gray-500">
                     (A Webhook URL will be generated when you save the agent)