System Architecture
Core Features
Data Management
Frontend Components
Extensibility
The following files were used as context for generating this wiki page:
The "UI Surfaces" within the Comp AI project primarily refer to the email templates and reusable components designed for transactional communications. These surfaces are built using React for Email (@react-email/components) and styled with Tailwind CSS, enabling a consistent and branded user experience across various automated email notifications. They are located within the apps/api/src/email directory, indicating their role in the API application's communication layer.
These UI surfaces serve to inform users about critical events, such as granting access to compliance documentation or assigning tasks. By leveraging a component-based approach, the system ensures maintainability, reusability, and a standardized look and feel for all outgoing emails.
The email UI surfaces utilize a set of foundational React components to construct the email layouts. These components encapsulate common visual elements and styling, promoting consistency across different email templates.
The Logo component is a simple, reusable element responsible for displaying the Comp AI brand logo at the top of email communications. It uses an Img tag from @react-email/components to embed the logo image.
import { Img, Section } from '@react-email/components';
export function Logo() {
return (
<Section className="mt-[32px]">
<Img
src={'https://assets.trycomp.ai/logo.png'}
width="45"
height="45"
alt
Sources: apps/api/src/email/components/logo.tsx:1-14
The Footer component provides standard legal and branding information at the bottom of email templates. It includes a link to the Comp AI website and the company's physical address.
import { Hr, Link, Section, Text } from '@react-email/components';
export function Footer() {
return (
<Section className="w-full">
<Hr />
<Text className="font-regular text-[14px]">
AI that handles compliance for you -{
Sources: apps/api/src/email/components/footer.tsx:1-18
The project includes specific email templates for different transactional purposes, each designed to convey particular information to the recipient. These templates integrate the reusable Logo and Footer components.
The AccessGrantedEmail template is used to notify a user that they have been granted access to an organization's policy documentation. It provides details about the access, including the organization name, expiration date, and a direct link to view the documents.
The AccessGrantedEmail component expects the following properties:
Sources: apps/api/src/email/templates/access-granted.tsx:13-18
The TaskItemAssignedEmail template is sent to a user when they are assigned a new task within an organization. It includes information about the task, who assigned it, and a direct link to the task. It also provides an option for the user to manage their email preferences.
The TaskItemAssignedEmail component expects the following properties:
The template also utilizes the getUnsubscribeUrl function from the @trycompai/email package to generate a dynamic unsubscribe link.
Sources: apps/api/src/email/templates/task-item-assigned.tsx:17-24, apps/api/src/email/templates/task-item-assigned.tsx:26
The email UI surfaces are built upon a modern web development stack tailored for email rendering:
Tailwind component from @react-email/components, it enables utility-first styling directly within the React components, ensuring responsive and consistent designs.Geist font is specified for use in the emails, with Helvetica as a fallback, to maintain brand aesthetics.apps/api application, suggesting they are rendered server-side as part of API-triggered workflows.The following diagram illustrates how the email templates are composed from shared components.
Sources: apps/api/src/email/templates/access-granted.tsx:1-18, apps/api/src/email/templates/task-item-assigned.tsx:1-24, apps/api/src/email/components/logo.tsx:1-14, apps/api/src/email/components/footer.tsx:1-18
The general flow for rendering and preparing an email for dispatch involves several steps, from data provision to final HTML generation.
Sources: apps/api/src/email/templates/access-granted.tsx, apps/api/src/email/templates/task-item-assigned.tsx
The TaskItemAssignedEmail template imports getUnsubscribeUrl from @trycompai/email. This indicates the presence of a dedicated package for email-related utilities, which likely handles common email functionalities beyond just rendering, such as generating unsubscribe links.
Sources: apps/api/src/email/templates/task-item-assigned.tsx:10
string |
| The URL to the portal where documents can be viewed. |
string |
| The name of the user who assigned the task. |
organizationName | string | The name of the organization where the task was assigned. |
taskUrl | string | The URL to view the assigned task. |