From cf07621de7e8d88eeff8b3928a7ff7e81eeccb23 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sat, 13 Sep 2025 01:46:40 +0530
Subject: [PATCH] fix: make cal ai div clickable (#23807)

---
 .../components/WorkflowStepContainer.tsx       | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index 5b7cf475f8..835c5e2e08 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -794,7 +794,21 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           {stepAgentId && isAgentLoading && <CalAIAgentDataSkeleton />}
           {stepAgentId && agentData && (
             <div className="bg-muted mt-4 rounded-lg p-4">
-              <div className="flex items-center justify-between">
+              <div
+                className="flex cursor-pointer items-center justify-between"
+                onClick={(e) => {
+                  const target = e.target as HTMLElement;
+                  if (
+                    target.closest("button") ||
+                    target.closest('[role="menu"]') ||
+                    target.closest('[role="menuitem"]')
+                  ) {
+                    return;
+                  }
+                  if (!props.readOnly) {
+                    setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
+                  }
+                }}>
                 <div>
                   <h3 className="text-emphasis text-base font-medium">{t("cal_ai_agent")}</h3>
                   {arePhoneNumbersActive.length > 0 ? (
@@ -813,7 +827,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     </div>
                   )}
                 </div>
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                   {arePhoneNumbersActive.length > 0 ? (
                     <Dropdown>
                       <DropdownMenuTrigger asChild>