* refactor: migrate UnconfirmedBookingBadge from features to apps/web Move UnconfirmedBookingBadge.tsx from packages/features/bookings/ to apps/web/modules/bookings/components/ as part of the architectural refactor to remove trpc client imports from the features layer. Also removes unused preserveBookingsQueryParams function from Navigation.tsx. Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * refactor: move shell navigation and badges to apps/web Move shell navigation components and trpc-using badges from packages/features to apps/web/modules to fix circular dependency: - Move navigation folder to apps/web/modules/shell/navigation/ - Move TeamInviteBadge.tsx to apps/web/modules/shell/ - Create Shell wrapper in apps/web that provides MobileNavigationContainer - Update all Shell imports in apps/web to use the new wrapper - Remove MobileNavigationContainer default from features Shell.tsx - Fix pre-existing lint warnings in touched files This establishes the pattern for migrating React components that use trpc hooks from the features layer to the web app layer, ensuring proper dependency direction: apps/web imports from packages/features, never the reverse. Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: move SideBar.tsx to apps/web to fix build error SideBar.tsx was importing Navigation from the moved navigation folder, causing a build error. Moving SideBar.tsx to apps/web and updating the features Shell to not have a default SidebarContainer fixes this. The web Shell wrapper now provides both the default SidebarContainer and MobileNavigationContainer, maintaining the injection pattern. Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * revert * revert * revert * wip * wip * wip * wip * wip * wip * not used anywhere * wip * wip * wip * wip * fix * fix * wip * wip * wip * wip * wip * fix * fix * fix * fix * migrate * migrate admin-adpi * wip * feat: migrate organization settings components from packages/features to apps/web/modules - Migrate profile.tsx, appearance.tsx, general.tsx, privacy.tsx, guest-notifications.tsx, delegationCredential.tsx, other-team-members-view.tsx, other-team-profile-view.tsx - Migrate attributes directory (AttributesForm.tsx, DeleteAttributeModal.tsx, ListSkeleton.tsx, attributes-create-view.tsx, attributes-edit-view.tsx, attributes-list-view.tsx) - Migrate admin directory (AdminOrgEditPage.tsx, AdminOrgPage.tsx, WorkspacePlatformPage.tsx) - Update all page imports to use new paths from ~/settings/organizations/ - Update relative imports in migrated files to use @calcom/features paths - Fix lint warnings in migrated files Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: update test import path after migration Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: remove unnecessary test-setup import (already in vitest config) Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * wip * refactor: delete original files after migration to apps/web/modules Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix * fix * fix * fix * wip * refactor more * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * mv * update import paths * wip * wip * fix * fix * fix * fix * fix * fix * fix * mv * mv * mv * fix * wip * wip * fix * fix * fix * fix: make test mocks resilient to vi.resetAllMocks() Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: fix AttributeForm test failures Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix * fix * refactor: move ee files to apps/web/modules/ee/ folder - Move teams, workflows, and organizations folders to apps/web/modules/ee/ - Add LICENSE file to apps/web/modules/ee/ - Update all import paths from ~/teams/ to ~/ee/teams/ - Update all import paths from ~/settings/organizations/ to ~/ee/organizations/ - Remove duplicate MemberInvitationModal copy.tsx file Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: move useHasPaidPlan and dependent files to apps/web/modules - Move useHasPaidPlan.ts from packages/features/billing/hooks to apps/web/modules/billing/hooks - Move intercom files from packages/features/ee/support to apps/web/modules/ee/support - Move ContactMenuItem.tsx and dependencies (freshchat, helpscout, zendesk) to apps/web/modules/ee/support - Move ViewRecordingsDialog.tsx and RecordingListSkeleton to apps/web/modules/ee/video - Move CalVideoSettings.tsx to apps/web/modules/eventtypes/components/locations - Move CreateOrEditOutOfOfficeModal.tsx to apps/web/modules/settings/outOfOffice - Refactor UpgradeTeamsBadge to accept props and create wrapper in apps/web/modules/billing - Update all callers to use new file locations - Add eslint-disable comments for pre-existing lint warnings This fixes the tRPC server build failure caused by circular dependency where the server build was traversing into packages/features and pulling in React hooks that depend on @calcom/trpc/react types. Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: correct UpgradeTeamsBadge import path to use package export Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix * fix * fix * fix * fix * fix * fix * fix: pass plan state through SelectProps to UpgradeTeamsBadge - Add upgradeTeamsBadgeProps field to ExtendedOption type in Select component - Update OptionComponent to spread upgradeTeamsBadgeProps to UpgradeTeamsBadge - Update getOptions.ts to accept PlanState object and include upgradeTeamsBadgeProps - Update WorkflowStepContainer.tsx to pass planState to getWorkflowTriggerOptions/getWorkflowTemplateOptions - Update WorkflowDetailsPage.tsx to pass upgradeTeamsBadgeProps in transformed action options - Update AddActionDialog.tsx interface and mapping to include upgradeTeamsBadgeProps - Add eslint-disable comments for pre-existing React Hook dependency warnings This fixes the UpgradeTeamsBadge refactoring issue where the badge was always showing 'upgrade' text instead of the correct text based on plan state (trial_mode, inactive_team_plan, etc.) Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: update import paths to use /ee/ folder for workflows and organizations Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: update workflow component imports to use /ee/ folder Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: add missing types.ts for LocationInput.tsx Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: extract BookingRedirectForm type to shared location Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix * wip * wip * fix: update BookingRedirectForm import to use local types file Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * wip * fix * fix --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Cal.com AI Phone Service Architecture
This package provides a comprehensive, provider-agnostic architecture for AI phone services in Cal.com, offering easy integration with different AI service providers, template management, and self-service UI components.
Architecture Overview
The architecture implements multiple design patterns to create a maintainable, scalable, and flexible system:
Layered Architecture
┌─────────────────────────────────────────────┐
│ Frontend (React/Next.js) │
│ - UI Components (Agent/Phone Management) │
├─────────────────────────────────────────────┤
│ TRPC API Layer │
│ - Type-safe RPC endpoints │
│ - Request/Response validation │
├─────────────────────────────────────────────┤
│ Service Layer │
│ - Business logic orchestration │
│ - Provider abstraction │
├─────────────────────────────────────────────┤
│ Repository Layer │
│ - Data access abstraction │
│ - Query optimization │
├─────────────────────────────────────────────┤
│ Prisma ORM / Database │
│ - PostgreSQL with optimized queries │
└─────────────────────────────────────────────┘
Design Patterns Implemented
- Repository Pattern: Encapsulates data access logic
- Factory Pattern: Creates provider instances dynamically
- Strategy Pattern: Allows switching between AI providers
- Service Pattern: Orchestrates business logic
- Registry Pattern: Manages provider registration
- Template Pattern: Provides reusable conversation templates
- Mapper Pattern: Transforms data between layers
Key Components
1. Generic Interfaces (interfaces/AIPhoneService.interface.ts)
AIPhoneServiceProvider- Main interface that all providers must implementAIPhoneServiceConfiguration- Configuration for setting up AI servicesAIPhoneServiceProviderFactory- Factory interface for creating providers- Common data types (
AIPhoneServiceModel,AIPhoneServiceCall,AIPhoneServiceAgent, etc.) - Phone number management interfaces
- Agent and LLM management interfaces
2. Provider Registry (AIPhoneServiceRegistry.ts)
AIPhoneServiceRegistry- Central registry for managing providerscreateAIPhoneServiceProvider()- Helper function to create providerscreateDefaultAIPhoneServiceProvider()- Convenience function for default provider- Provider registration and management system
3. Template System
- Template Types:
CHECK_IN_APPOINTMENTandCUSTOM_TEMPLATE - Prompt Templates (
promptTemplates.ts): Pre-defined conversation templates with placeholders - Field Mapping (
template-fields-map.ts): Dynamic field definitions for different template types - Schema Validation (
zod-utils.ts): Comprehensive validation schemas for all data types - Template Field Schema (
getTemplateFieldsSchema.ts): Dynamic schema generation based on template type
4. Provider Implementations (providers/)
retellAI/- Complete Retell AI implementation with:- Provider class with full interface implementation
- Factory for provider creation
- SDK client for API communication
- Service layer for business logic
- Error handling and type definitions
example-future-provider/- Example showing how to add new providers
5. UI Components (components/)
CreateAgentStep.tsx- Step-by-step agent creation wizardCreateWorkflowAgent.tsx- Workflow-based agent setupAgentsListPage.tsx- Agent management and listingSkeletonLoaderList.tsx- Loading states for better UX
6. Pages (pages/)
agent.tsx- Agent management pageindex.tsx- Main AI phone service dashboard
7. Data Layer Components
- Repository Classes (
/packages/lib/server/repository/)PrismaAgentRepository- Manages agent data accessPrismaPhoneNumberRepository- Handles phone number operations
- Service Classes (
providers/retellAI/RetellAIService.ts)- Business logic orchestration
- External API integration
- Mapper Functions
- Transform between database models and DTOs
- Handle data serialization/deserialization
Architecture Patterns in Detail
Repository Pattern
The repository pattern provides an abstraction layer over data access, making the system database-agnostic and testable.
Benefits:
- Separation of Concerns: Business logic separated from data access
- Testability: Easy to mock for unit tests
- Flexibility: Can switch between Prisma ORM and raw SQL
- Reusability: Common queries centralized in one place
Factory Pattern
The factory pattern enables dynamic creation of provider instances without exposing instantiation logic.
Benefits:
- Loose Coupling: Client code doesn't depend on concrete classes
- Extensibility: Easy to add new providers
- Configuration Management: Centralized provider setup
Service Pattern
Service layer orchestrates business operations and coordinates between multiple repositories and external services.
Benefits:
- Business Logic Encapsulation: Complex operations in one place
- Transaction Management: Coordinates multiple operations
- Reusability: Common workflows available to all consumers
Registry Pattern
The registry pattern manages provider registration and lookup, acting as a service locator.
Benefits:
- Dynamic Provider Management: Add/remove providers at runtime
- Centralized Configuration: Single point for provider management
- Dependency Injection: Supports IoC principles
Mapper Pattern
Mappers transform data between different representations (database models, DTOs, API responses).
Benefits:
- Data Transformation: Clean separation between layers
- Flexibility: Different representations for different contexts
- Maintainability: Changes in one layer don't affect others
Strategy Pattern
The strategy pattern allows switching between different AI providers seamlessly.
Benefits:
- Provider Independence: Switch providers without changing client code
- Extensibility: Add new providers easily
- Testing: Mock providers for testing
Integration with Cal.com Workflows
The AI Phone system is designed specifically for Cal.com's workflow automation, enabling AI-powered phone calls as part of scheduling workflows.
Workflow Integration Architecture
┌─────────────────────────────────────────────┐
│ Cal.com Workflow Engine │
├─────────────────────────────────────────────┤
│ Workflow Step: AI Phone Call │
├─────────────────────────────────────────────┤
│ AI Phone Service (via Registry) │
├─────────────────────────────────────────────┤
│ Agent + Phone Number Setup │
└─────────────────────────────────────────────┘
Workflow Step Configuration
AI Phone calls are configured as workflow steps with specific triggers.
Supported Workflow Triggers
AI Phone calls can be triggered by various workflow events:
- BEFORE_EVENT: Call attendees before appointments
- AFTER_EVENT: Follow up after meetings
- NEW_EVENT: Welcome calls for new bookings
- RESCHEDULE_EVENT: Notify about schedule changes
- CANCELLED_EVENT: Handle cancellation calls
Workflow Execution Flow
1. Workflow Trigger (e.g., 24 hours before event)
↓
2. Workflow Engine schedules AI Phone Call task
↓
3. Task Runner (executeAIPhoneCall) executes
↓
4. AI Phone Service creates call with dynamic data
↓
5. Call connects and AI handles conversation
↓
6. Call results logged back to workflow
Rate Limiting for Workflows
To prevent abuse, workflow AI calls are rate-limited.
Data Flow Architecture
Workflow-Specific Data Flow
1. Workflow Trigger Event
↓
2. Workflow Step Configuration Retrieved
↓
3. Booking & Attendee Data Fetched
↓
4. Dynamic Variables Prepared
↓
5. AI Agent & Phone Number Selected
↓
6. Phone Call Initiated
↓
7. Results Logged to Workflow
Usage Examples
For complete usage examples, please refer to:
- Basic Usage: See commented examples in
index.ts - Provider Setup: Check provider factories in
providers/ - Workflow Integration: Review
packages/features/handleCreatePhoneCall.ts
Field Types
Supported field types include:
text,textarea,number,email,phoneaddress,multiemail,select,multiselectcheckbox,radio,radioInput,boolean
Template Variables
Templates support dynamic variables:
{{scheduler_name}}- Name of the scheduler{{name}}- Guest name{{email}}- Guest email{{company}}- Guest company{{current_time}}- Current timestamp- And many more
Adding New Providers
For detailed instructions on adding new providers, see the example provider implementation.
Environment Variables
RETELL_AI_KEY- API key for Retell AI (required when using Retell AI provider)STRIPE_PHONE_NUMBER_MONTHLY_PRICE_ID- Stripe price ID for monthly phone number subscriptions (required for billing)NODE_ENV- Controls logging behavior (logging disabled in production)
Stripe Integration
The AI Phone system integrates with Stripe for phone number billing. When users purchase phone numbers through the workflow system, they're redirected to Stripe checkout.
The STRIPE_PHONE_NUMBER_MONTHLY_PRICE_ID should be set to your Stripe price ID that represents the monthly subscription cost for AI phone numbers. This price ID is created in your Stripe dashboard and determines how much customers are charged monthly for each phone number.
Credit System and Billing
Webhook-Based Credit Deduction
The AI Phone system automatically deducts credits from user or team accounts when calls are completed. This is handled by the webhook at apps/web/app/api/webhooks/retellAI/route.ts.
Credit Deduction Flow
1. AI Phone Call Completes
↓
2. Provider sends "call_analyzed" webhook
↓
3. Webhook verifies signature for security
↓
4. System looks up phone number owner (user/team)
↓
5. Calculates credits based on usage factors
↓
6. Verifies sufficient credits available
↓
7. Deducts credits from account
↓
8. Logs transaction for audit
Credit Calculation
Credits are deducted based on multiple factors including:
- Call Duration: Longer calls consume more credits
- Prompt Complexity: Advanced prompts and conversation templates affect cost
- Voice Configuration: Different voice models and settings impact pricing
- Features Used: Additional AI capabilities and tools increase credit usage
The system calculates the total cost and converts it to credits for deduction from the user or team account.
Webhook Setup
The webhook requires proper configuration:
- Webhook URL: Add the webhook endpoint to your AI provider dashboard
- Environment Variables: Set appropriate API keys for webhook verification
- Security: Webhook signatures are verified to ensure authenticity
Credit Service Integration
The webhook integrates with Cal.com's credit system to check and deduct credits appropriately.
Error Handling
The webhook includes comprehensive error handling:
- Invalid Signatures: Returns 401 Unauthorized
- Missing Phone Number: Logs error, cannot deduct credits
- Insufficient Credits: Logs warning but doesn't block (call already completed)
- Missing Cost Data: Logs error and skips credit deduction
Supported Events
The webhook processes call completion events that contain the final usage data and cost information. Other events are acknowledged but not processed for billing purposes.
Provider-Specific Documentation
- Retell AI Provider - Complete Retell AI integration
- Example Provider - Template for new providers
Future Enhancements
- Multi-language template support
- Advanced workflow builder UI
- Provider health checks and automatic failover
- Real-time call monitoring and analytics
- Integration with Cal.com's webhook system
- Custom field type plugins
- Template marketplace and sharing
- Advanced agent training and optimization tools
- Integration with more AI service providers
- Voice cloning and customization options