Skip to content

Comments

fix: make cal ai div clickable#23807

Merged
Udit-takkar merged 2 commits intomainfrom
chore/cal-ai-improve
Sep 12, 2025
Merged

fix: make cal ai div clickable#23807
Udit-takkar merged 2 commits intomainfrom
chore/cal-ai-improve

Conversation

@Udit-takkar
Copy link
Contributor

@Udit-takkar Udit-takkar commented Sep 12, 2025

What does this PR do?

Screen.Recording.2025-09-13.at.12.05.00.AM.mov
  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • N/A I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
  • N/A I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 12, 2025

Walkthrough

  • Updated packages/features/ee/workflows/components/WorkflowStepContainer.tsx.
  • Made the left portion of the CAL AI agent header clickable (cursor-pointer) to open AgentConfigurationSheet with activeTab set to "prompt".
  • Click action is ignored when the target is a button/menu item or when the component is read-only.
  • Added onClick handler to the right-side actions container to stop event propagation, preventing unintended sheet opening.
  • The right-side actions (e.g., dropdowns, test actions) remain fully interactive.
  • No exported/public entity signatures were changed.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

Pre-merge checks (1 passed, 1 warning, 1 inconclusive)

❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Description Check ❓ Inconclusive The PR body contains the standard template, an attached asset link, and checklist items but does not describe the actual code changes, motivation, or testing steps; it is therefore related to the PR yet very vague and non-descriptive, making it insufficient for review. The description does not explain what files or behavior were changed, nor provide steps to validate the change. This lack of detail prevents a conclusive pass under the provided criteria. Please update the PR description with a concise summary of the code changes (e.g., making the CAL AI agent header clickable and preventing right-side action clicks from opening the configuration sheet), list the files or commits changed, state the motivation and expected behavior, and include clear testing steps and any relevant screenshots or links to related issues. Also indicate whether there are breaking changes and confirm whether documentation or automated tests are required or intentionally N/A.
✅ Passed checks (1 passed)
Check name Status Explanation
Title Check ✅ Passed The title "fix: make cal ai div clickable" accurately and concisely reflects the primary change in the diff and PR objectives — making the CAL AI area clickable to open the AgentConfigurationSheet and adjusting click handling for the right-side actions — and uses a conventional "fix:" prefix, so it is on-topic and specific enough for a quick scan of history.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore/cal-ai-improve

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@graphite-app graphite-app bot requested a review from a team September 12, 2025 18:36
@keithwillcode keithwillcode added core area: core, team members only enterprise area: enterprise, audit log, organisation, SAML, SSO labels Sep 12, 2025
@dosubot dosubot bot added the 🐛 bug Something isn't working label Sep 12, 2025
Copy link
Contributor

@anikdhabal anikdhabal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/features/ee/workflows/components/WorkflowStepContainer.tsx (1)

830-830: Prevent keyboard-triggered propagation from right-side actions

Add onKeyDown to stop Enter/Space bubbling which would open the sheet after the header gains keyboard handling.

-                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                <div
+                  className="flex items-center gap-1"
+                  onClick={(e) => e.stopPropagation()}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+                  }}>
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 68f2fc9 and 6228c56.

📒 Files selected for processing (1)
  • packages/features/ee/workflows/components/WorkflowStepContainer.tsx (2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

  • packages/features/ee/workflows/components/WorkflowStepContainer.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

  • packages/features/ee/workflows/components/WorkflowStepContainer.tsx
**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

Flag default exports and encourage named exports. Named exports provide better tree-shaking, easier refactoring, and clearer imports. Exempt main components like pages, layouts, and components that serve as the primary export of a module.

Files:

  • packages/features/ee/workflows/components/WorkflowStepContainer.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/WorkflowStepContainer.tsx:641-649
Timestamp: 2025-08-26T20:09:17.089Z
Learning: In packages/features/ee/workflows/components/WorkflowStepContainer.tsx, Cal.AI actions are intentionally filtered out/hidden for organization workflows when props.isOrganization is true. This restriction is by design per maintainer Udit-takkar in PR #22995, despite the broader goal of enabling Cal.AI self-serve.
Learnt from: CarinaWolli
PR: calcom/cal.com#23421
File: packages/features/ee/workflows/components/AddActionDialog.tsx:171-174
Timestamp: 2025-09-08T09:34:46.661Z
Learning: In packages/features/ee/workflows/components/AddActionDialog.tsx, the actionOptions prop is guaranteed to never be empty according to maintainer CarinaWolli, so defensive checks for empty arrays are not necessary.
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/AgentConfigurationSheet.tsx:348-371
Timestamp: 2025-08-15T00:27:33.280Z
Learning: In calcom/cal.com workflows and AI agent components, variable insertion follows a consistent pattern of directly transforming the input variable with toUpperCase() and replace(/ /g, "_") to create tokens like {VARIABLE_NAME}. The AgentConfigurationSheet.tsx implementation correctly follows this same pattern as WorkflowStepContainer.tsx, per maintainer Udit-takkar in PR #22995.
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/calAIPhone/providers/retellAI/services/AgentService.ts:83-88
Timestamp: 2025-08-26T20:23:28.396Z
Learning: In calcom/cal.com PR #22995, the workflow update handler in packages/trpc/server/routers/viewer/workflows/update.handler.ts includes workflow-level authorization via isAuthorized(userWorkflow, ctx.user.id, "workflow.update") which validates the user can update the workflow before calling updateToolsFromAgentId (per maintainer Udit-takkar).
📚 Learning: 2025-08-26T20:09:17.089Z
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/WorkflowStepContainer.tsx:641-649
Timestamp: 2025-08-26T20:09:17.089Z
Learning: In packages/features/ee/workflows/components/WorkflowStepContainer.tsx, Cal.AI actions are intentionally filtered out/hidden for organization workflows when props.isOrganization is true. This restriction is by design per maintainer Udit-takkar in PR #22995, despite the broader goal of enabling Cal.AI self-serve.

Applied to files:

  • packages/features/ee/workflows/components/WorkflowStepContainer.tsx
📚 Learning: 2025-08-15T00:27:33.280Z
Learnt from: Udit-takkar
PR: calcom/cal.com#22995
File: packages/features/ee/workflows/components/AgentConfigurationSheet.tsx:348-371
Timestamp: 2025-08-15T00:27:33.280Z
Learning: In calcom/cal.com workflows and AI agent components, variable insertion follows a consistent pattern of directly transforming the input variable with toUpperCase() and replace(/ /g, "_") to create tokens like {VARIABLE_NAME}. The AgentConfigurationSheet.tsx implementation correctly follows this same pattern as WorkflowStepContainer.tsx, per maintainer Udit-takkar in PR #22995.

Applied to files:

  • packages/features/ee/workflows/components/WorkflowStepContainer.tsx
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Install dependencies / Yarn install & cache

Comment on lines +797 to +811
<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" });
}
}}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Make the header click target accessible and readOnly-aware

  • Add keyboard support (Enter/Space), role, tabIndex, and aria-disabled.
  • Only show cursor-pointer when interactive.
  • Broaden interactive-element guard (anchors, inputs, contenteditable) to avoid accidental sheet opens.
-              <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
+                className={classNames("flex items-center justify-between", !props.readOnly && "cursor-pointer")}
+                role={!props.readOnly ? "button" : undefined}
+                aria-disabled={props.readOnly || undefined}
+                tabIndex={!props.readOnly ? 0 : -1}
+                onClick={(e) => {
+                  if (props.readOnly) return;
+                  const target = e.target as HTMLElement;
+                  if (
+                    target.closest(
+                      "button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select"
+                    )
+                  ) {
+                    return;
+                  }
+                  setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
+                }}
+                onKeyDown={(e) => {
+                  if (props.readOnly) return;
+                  if (e.key === "Enter" || e.key === " ") {
+                    const target = e.target as HTMLElement;
+                    if (
+                      target.closest(
+                        "button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select"
+                      )
+                    ) {
+                      return;
+                    }
+                    e.preventDefault();
+                    setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
+                  }
+                }}>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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
className={classNames("flex items-center justify-between", !props.readOnly && "cursor-pointer")}
role={!props.readOnly ? "button" : undefined}
aria-disabled={props.readOnly || undefined}
tabIndex={!props.readOnly ? 0 : -1}
onClick={(e) => {
if (props.readOnly) return;
const target = e.target as HTMLElement;
if (
target.closest(
"button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select"
)
) {
return;
}
setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
}}
onKeyDown={(e) => {
if (props.readOnly) return;
if (e.key === "Enter" || e.key === " ") {
const target = e.target as HTMLElement;
if (
target.closest(
"button,[role='menu'],[role='menuitem'],a,[contenteditable='true'],input,textarea,select"
)
) {
return;
}
e.preventDefault();
setAgentConfigurationSheet({ open: true, activeTab: "prompt" });
}
}}>
🤖 Prompt for AI Agents
In packages/features/ee/workflows/components/WorkflowStepContainer.tsx around
lines 797 to 811, the header div is only clickable by mouse and always shows a
pointer; update it to be accessible and readOnly-aware by: give the header a
role="button", set tabIndex={props.readOnly ? -1 : 0}, add
aria-disabled={props.readOnly}, apply cursor-pointer conditionally only when not
readOnly, broaden the interactive-element guard to also check for anchors,
inputs, textareas and contenteditable elements (e.g., target.closest('a'),
'input', 'textarea', '[contenteditable="true"]'), and add an onKeyDown handler
that triggers the same open-sheet behavior for Enter/Space when not readOnly
while preventing default and preserving the existing guard checks.

@github-actions
Copy link
Contributor

github-actions bot commented Sep 12, 2025

E2E results are ready!

@Udit-takkar Udit-takkar enabled auto-merge (squash) September 12, 2025 19:55
@vercel
Copy link

vercel bot commented Sep 12, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
cal Ignored Ignored Sep 12, 2025 7:55pm
cal-eu Ignored Ignored Sep 12, 2025 7:55pm

@Udit-takkar Udit-takkar merged commit cf07621 into main Sep 12, 2025
37 checks passed
@Udit-takkar Udit-takkar deleted the chore/cal-ai-improve branch September 12, 2025 20:16
@coderabbitai coderabbitai bot mentioned this pull request Sep 14, 2025
3 tasks
@coderabbitai coderabbitai bot mentioned this pull request Sep 22, 2025
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something isn't working core area: core, team members only enterprise area: enterprise, audit log, organisation, SAML, SSO ready-for-e2e size/S

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants