From 62d3749219c08437774c851a9f7cae5b0fd3c299 Mon Sep 17 00:00:00 2001
From: nuthalapativarun <nuthalapativarun@gmail.com>
Date: Wed, 27 May 2026 02:26:02 -0700
Subject: [PATCH] feat: add copy-to-clipboard button for inbound webhook URL
 (#359)

* feat: add copy-to-clipboard button for inbound webhook URL

Users setting up inbound telephony had no easy way to copy the
webhook URL to paste into their provider dashboard. Add a copyable
inbound webhook URL display in the configuration detail card,
following the existing Configuration ID copy button pattern.

* fix: use NEXT_PUBLIC_BACKEND_URL if provided

---------

Co-authored-by: Abhishek Kumar <abhishek@a6k.me>
---
 .../[configId]/page.tsx                       | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/telephony-configurations/[configId]/page.tsx b/ui/src/app/telephony-configurations/[configId]/page.tsx
index 583916e..e1aa6dc 100644
--- a/ui/src/app/telephony-configurations/[configId]/page.tsx
+++ b/ui/src/app/telephony-configurations/[configId]/page.tsx
@@ -57,6 +57,15 @@ import {
 } from "@/components/ui/table";
 import { useAuth } from "@/lib/auth";
 
+const INBOUND_WEBHOOK_PATH = "/api/v1/telephony/inbound/run";
+
+function getInboundWebhookUrl(): string {
+  const backendUrl =
+    process.env.NEXT_PUBLIC_BACKEND_URL ||
+    (typeof window !== "undefined" ? window.location.origin : "");
+  return `${backendUrl}${INBOUND_WEBHOOK_PATH}`;
+}
+
 export default function TelephonyConfigurationDetailPage() {
   const router = useRouter();
   const params = useParams<{ configId: string }>();
@@ -239,7 +248,7 @@ export default function TelephonyConfigurationDetailPage() {
             </Button>
           </div>
         </CardHeader>
-        <CardContent>
+        <CardContent className="space-y-4">
           <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
             {Object.entries(config.credentials ?? {}).map(([k, v]) => (
               <div key={k} className="flex justify-between gap-3">
@@ -250,6 +259,25 @@ export default function TelephonyConfigurationDetailPage() {
               </div>
             ))}
           </dl>
+          <div className="space-y-1">
+            <p className="text-xs text-muted-foreground">Inbound webhook URL</p>
+            <button
+              type="button"
+              onClick={() => {
+                const url = getInboundWebhookUrl();
+                navigator.clipboard
+                  .writeText(url)
+                  .then(() => toast.success("Inbound webhook URL copied"))
+                  .catch(() => toast.error("Failed to copy URL"));
+              }}
+              title="Click to copy inbound webhook URL"
+              aria-label="Copy inbound webhook URL"
+              className="inline-flex items-center gap-1 self-start rounded font-mono text-xs text-muted-foreground hover:text-foreground"
+            >
+              <span className="truncate">{getInboundWebhookUrl()}</span>
+              <Copy className="h-3 w-3 shrink-0" />
+            </button>
+          </div>
         </CardContent>
       </Card>