Emails redesign (#1076)

Author: Developing-Gamer

.vscode/settings.json

@@ -7,6 +7,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.tabSize": 2,
   "cSpell.words": [
+    "glassmorphic",
     "sparkline",
     "Clickhouse",
     "pushable",

AGENTS.md

@@ -103,6 +103,7 @@ To see all development ports, refer to the index.html of `apps/dev-launchpad/pub
 - When writing database migration files, assume that we have >1,000,000 rows in every table (unless otherwise specified). This means you may have to use CONDITIONALLY_REPEAT_MIGRATION_SENTINEL to avoid running the migration and things like concurrent index builds; see the existing migrations for examples.
 - Each migration file runs in its own transaction with a relatively short timeout. Split long-running operations into separate migration files to avoid timeouts. For example, when adding CHECK constraints, use `NOT VALID` in one migration, then `VALIDATE CONSTRAINT` in a separate migration file.
 - **When building frontend code, always carefully deal with loading and error states.** Be very explicit with these; some components make this easy, eg. the button onClick already takes an async callback for loading state, but make sure this is done everywhere, and make sure errors are NEVER just silently swallowed.
+- Any design components you add or modify in the dashboard, update the Playground page accordingly to showcase the changes.
 - Unless very clearly equivalent from types, prefer explicit null/undefinedness checks over boolean checks, eg. `foo == null` instead of `!foo`.
 
 ### Code-related

apps/backend/.env.development

@@ -58,6 +58,8 @@ STACK_OPENAI_API_KEY=mock_openai_api_key
 STACK_STRIPE_SECRET_KEY=sk_test_mockstripekey
 STACK_STRIPE_WEBHOOK_SECRET=mock_stripe_webhook_secret
 
+STACK_OPENROUTER_API_KEY=mock-openrouter-api-key
+
 # Email monitor configuration for tests
 STACK_EMAIL_MONITOR_VERIFICATION_CALLBACK_URL=http://localhost:8101/handler/email-verification
 STACK_EMAIL_MONITOR_PROJECT_ID=internal

apps/backend/src/app/api/latest/emails/render-email/route.tsx

@@ -1,8 +1,9 @@
 import { getEmailThemeForThemeId, renderEmailWithTemplate } from "@/lib/email-rendering";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { KnownErrors } from "@stackframe/stack-shared/dist/known-errors";
-import { adaptSchema, templateThemeIdSchema, yupNumber, yupObject, yupString, yupUnion } from "@stackframe/stack-shared/dist/schema-fields";
+import { adaptSchema, templateThemeIdSchema, yupBoolean, yupMixed, yupNumber, yupObject, yupString, yupUnion } from "@stackframe/stack-shared/dist/schema-fields";
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+import type { EditableMetadata } from "@stackframe/stack-shared/dist/utils/jsx-editable-transpiler";
 
 export const POST = createSmartRouteHandler({
   metadata: {
@@ -19,18 +20,26 @@ export const POST = createSmartRouteHandler({
       yupObject({
         template_id: yupString().uuid().defined(),
         theme_id: templateThemeIdSchema,
+        editable_markers: yupBoolean().optional(),
+        editable_source: yupString().oneOf(['template', 'theme', 'both']).optional(),
       }),
       yupObject({
         template_id: yupString().uuid().defined(),
         theme_tsx_source: yupString().defined(),
+        editable_markers: yupBoolean().optional(),
+        editable_source: yupString().oneOf(['template', 'theme', 'both']).optional(),
       }),
       yupObject({
         template_tsx_source: yupString().defined(),
         theme_id: templateThemeIdSchema,
+        editable_markers: yupBoolean().optional(),
+        editable_source: yupString().oneOf(['template', 'theme', 'both']).optional(),
       }),
       yupObject({
         template_tsx_source: yupString().defined(),
         theme_tsx_source: yupString().defined(),
+        editable_markers: yupBoolean().optional(),
+        editable_source: yupString().oneOf(['template', 'theme', 'both']).optional(),
       }),
     ).defined(),
   }),
@@ -41,6 +50,7 @@ export const POST = createSmartRouteHandler({
       html: yupString().defined(),
       subject: yupString(),
       notification_category: yupString(),
+      editable_regions: yupMixed<Record<string, EditableMetadata>>().optional(),
     }).defined(),
   }),
   async handler({ body, auth: { tenancy } }) {
@@ -69,12 +79,17 @@ export const POST = createSmartRouteHandler({
       throw new KnownErrors.SchemaError("Either template_id or template_tsx_source must be provided");
     }
 
+    const editableMarkers = 'editable_markers' in body && body.editable_markers === true;
+    const editableSource = ('editable_source' in body ? body.editable_source : 'template') as 'template' | 'theme' | 'both';
+
     const result = await renderEmailWithTemplate(
       contentSource,
       themeSource,
       {
         project: { displayName: tenancy.project.display_name },
         previewMode: true,
+        editableMarkers,
+        editableSource,
         themeProps: {
           projectLogos: {
             logoUrl: tenancy.project.logo_url ?? undefined,
@@ -95,6 +110,7 @@ export const POST = createSmartRouteHandler({
         html: result.data.html,
         subject: result.data.subject,
         notification_category: result.data.notificationCategory,
+        editable_regions: result.data.editableRegions,
       },
     };
   },

apps/backend/src/app/api/latest/internal/ai-chat/[threadId]/route.tsx

@@ -22,7 +22,25 @@ const toolCallContentSchema = yupObject({
 });
 
 const contentSchema = yupArray(yupUnion(textContentSchema, toolCallContentSchema)).defined();
-const openai = createOpenAI({ apiKey: getEnvVariable("STACK_OPENAI_API_KEY", "MISSING_OPENAI_API_KEY") });
+
+const messageSchema = yupObject({
+  role: yupString().oneOf(["user", "assistant", "tool"]).defined(),
+  content: yupMixed().defined(),
+});
+
+// Mock mode sentinel value - when API key is not configured, we return mock responses
+const MOCK_API_KEY_SENTINEL = "mock-openrouter-api-key";
+const apiKey = getEnvVariable("STACK_OPENROUTER_API_KEY", MOCK_API_KEY_SENTINEL);
+const isMockMode = apiKey === MOCK_API_KEY_SENTINEL;
+
+// Only create OpenAI client if not in mock mode
+const openai = isMockMode ? null : createOpenAI({
+  apiKey,
+  baseURL: "https://openrouter.ai/api/v1",
+});
+
+// AI request timeout in milliseconds (2 minutes)
+const AI_REQUEST_TIMEOUT_MS = 120_000;
 
 export const POST = createSmartRouteHandler({
   metadata: {
@@ -38,10 +56,7 @@ export const POST = createSmartRouteHandler({
     }),
     body: yupObject({
       context_type: yupString().oneOf(["email-theme", "email-template", "email-draft"]).defined(),
-      messages: yupArray(yupObject({
-        role: yupString().oneOf(["user", "assistant", "tool"]).defined(),
-        content: yupMixed().defined(),
-      })).defined().min(1),
+      messages: yupArray(messageSchema).defined().min(1),
     }),
   }),
   response: yupObject({
@@ -52,39 +67,76 @@ export const POST = createSmartRouteHandler({
     }).defined(),
   }),
   async handler({ body, params, auth: { tenancy } }) {
+    // Mock mode: return a simple text response without calling AI
+    if (isMockMode) {
+      return {
+        statusCode: 200,
+        bodyType: "json",
+        body: {
+          content: [{
+            type: "text",
+            text: "This is a mock AI response. Configure a real API key to enable AI features.",
+          }],
+        },
+      };
+    }
+
     const adapter = getChatAdapter(body.context_type, tenancy, params.threadId);
-    const result = await generateText({
-      model: openai("gpt-4o"),
-      system: adapter.systemPrompt,
-      messages: body.messages as any,
-      tools: adapter.tools,
-    });
+    // Model is configurable via env var; no default to surface missing config errors
+    const modelName = getEnvVariable("STACK_AI_MODEL");
 
-    const contentBlocks: InferType<typeof contentSchema> = [];
-    result.steps.forEach((step) => {
-      if (step.text) {
-        contentBlocks.push({
-          type: "text",
-          text: step.text,
-        });
-      }
-      step.toolCalls.forEach(toolCall => {
-        contentBlocks.push({
-          type: "tool-call",
-          toolName: toolCall.toolName,
-          toolCallId: toolCall.toolCallId,
-          args: toolCall.args,
-          argsText: JSON.stringify(toolCall.args),
-          result: "success",
+    if (!openai) {
+      // This shouldn't happen since we check isMockMode above, but guard anyway
+      throw new Error("OpenAI client not initialized - STACK_OPENROUTER_API_KEY may be missing");
+    }
+
+    // Validate messages structure before passing to AI
+    const validatedMessages = body.messages.map(msg => ({
+      role: msg.role,
+      content: msg.content,
+    })) as any; // Cast needed: content is a mixed type from yup schema that doesn't map to AI SDK's strict typing
+
+    // Create abort controller for timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), AI_REQUEST_TIMEOUT_MS);
+
+    try {
+      const result = await generateText({
+        model: openai(modelName),
+        system: adapter.systemPrompt,
+        messages: validatedMessages,
+        tools: adapter.tools,
+        abortSignal: controller.signal,
+      });
+
+      const contentBlocks: InferType<typeof contentSchema> = [];
+      result.steps.forEach((step) => {
+        if (step.text) {
+          contentBlocks.push({
+            type: "text",
+            text: step.text,
+          });
+        }
+        step.toolCalls.forEach(toolCall => {
+          contentBlocks.push({
+            type: "tool-call",
+            toolName: toolCall.toolName,
+            toolCallId: toolCall.toolCallId,
+            args: toolCall.args,
+            argsText: JSON.stringify(toolCall.args),
+            result: "success",
+          });
         });
       });
-    });
 
-    return {
-      statusCode: 200,
-      bodyType: "json",
-      body: { content: contentBlocks },
-    };
+      return {
+        statusCode: 200,
+        bodyType: "json",
+        body: { content: contentBlocks },
+      };
+    } finally {
+      clearTimeout(timeoutId);
+    }
   },
 });
 

apps/backend/src/app/api/latest/internal/email-drafts/[id]/route.tsx

@@ -1,7 +1,8 @@
+import { templateThemeIdToThemeMode, themeModeToTemplateThemeId } from "@/lib/email-drafts";
 import { getPrismaClientForTenancy } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { templateThemeIdSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
-import { templateThemeIdToThemeMode, themeModeToTemplateThemeId } from "@/lib/email-drafts";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 
 export const GET = createSmartRouteHandler({
   metadata: { hidden: true },
@@ -25,7 +26,10 @@ export const GET = createSmartRouteHandler({
   }),
   async handler({ auth: { tenancy }, params }) {
     const prisma = await getPrismaClientForTenancy(tenancy);
-    const d = await prisma.emailDraft.findFirstOrThrow({ where: { tenancyId: tenancy.id, id: params.id } });
+    const d = await prisma.emailDraft.findFirst({ where: { tenancyId: tenancy.id, id: params.id } });
+    if (!d) {
+      throw new StatusError(StatusError.NotFound, "No draft found with given id");
+    }
     return {
       statusCode: 200,
       bodyType: "json",
@@ -78,3 +82,34 @@ export const PATCH = createSmartRouteHandler({
   },
 });
 
+export const DELETE = createSmartRouteHandler({
+  metadata: { hidden: true },
+  request: yupObject({
+    auth: yupObject({
+      type: yupString().oneOf(["admin"]).defined(),
+      tenancy: yupObject({}).defined(),
+    }).defined(),
+    params: yupObject({ id: yupString().uuid().defined() }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({ ok: yupString().oneOf(["ok"]).defined() }).defined(),
+  }),
+  async handler({ auth: { tenancy }, params }) {
+    const prisma = await getPrismaClientForTenancy(tenancy);
+    const existing = await prisma.emailDraft.findFirst({ where: { tenancyId: tenancy.id, id: params.id } });
+    if (!existing) {
+      throw new StatusError(StatusError.NotFound, "No draft found with given id");
+    }
+    await prisma.emailDraft.delete({
+      where: { tenancyId_id: { tenancyId: tenancy.id, id: params.id } },
+    });
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: { ok: "ok" },
+    };
+  },
+});
+

apps/backend/src/app/api/latest/internal/email-templates/[templateId]/route.tsx

@@ -38,6 +38,9 @@ export const PATCH = createSmartRouteHandler({
     if (!Object.keys(templateList).includes(templateId)) {
       throw new StatusError(StatusError.NotFound, "No template found with given id");
     }
+
+    // Note: theme_id validation is handled by templateThemeIdSchema in the request schema
+
     const theme = getActiveEmailTheme(tenancy);
     const result = await renderEmailWithTemplate(body.tsx_source, theme.tsxSource, {
       variables: { projectDisplayName: tenancy.project.display_name },
@@ -61,13 +64,19 @@ export const PATCH = createSmartRouteHandler({
       throw new KnownErrors.EmailRenderingError("NotificationCategory is required, import it from @stackframe/emails");
     }
 
+    const configOverride: Record<string, any> = {
+      [`emails.templates.${templateId}.tsxSource`]: body.tsx_source,
+    };
+
+    // Only add themeId if it's explicitly provided
+    if (body.theme_id !== undefined) {
+      configOverride[`emails.templates.${templateId}.themeId`] = body.theme_id;
+    }
+
     await overrideEnvironmentConfigOverride({
       projectId: tenancy.project.id,
       branchId: tenancy.branchId,
-      environmentConfigOverrideOverride: {
-        [`emails.templates.${templateId}.tsxSource`]: body.tsx_source,
-        ...(body.theme_id ? { [`emails.templates.${templateId}.themeId`]: body.theme_id } : {}),
-      },
+      environmentConfigOverrideOverride: configOverride,
     });
 
     return {
@@ -79,3 +88,46 @@ export const PATCH = createSmartRouteHandler({
     };
   },
 });
+
+export const DELETE = createSmartRouteHandler({
+  metadata: {
+    hidden: true,
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: yupString().oneOf(["admin"]).defined(),
+      tenancy: adaptSchema.defined(),
+    }).defined(),
+    params: yupObject({
+      templateId: yupString().uuid().defined(),
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({}).defined(),
+  }),
+  async handler({ auth: { tenancy }, params: { templateId } }) {
+    if (tenancy.config.emails.server.isShared) {
+      throw new KnownErrors.RequiresCustomEmailServer();
+    }
+    const templateList = tenancy.config.emails.templates;
+    if (!Object.keys(templateList).includes(templateId)) {
+      throw new StatusError(StatusError.NotFound, "No template found with given id");
+    }
+
+    await overrideEnvironmentConfigOverride({
+      projectId: tenancy.project.id,
+      branchId: tenancy.branchId,
+      environmentConfigOverrideOverride: {
+        [`emails.templates.${templateId}`]: null as any,
+      },
+    });
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: {},
+    };
+  },
+});