Smart Categories

.vscode/typescriptreact.code-snippets

@@ -50,7 +50,7 @@
       "",
       "export const GET = withError(async (request) => {",
       "  const session = await auth();",
-      "  if (!session) return NextResponse.json({ error: \"Not authenticated\" });",
+      "  if (!session?.user) return NextResponse.json({ error: \"Not authenticated\" });",
       "",
       "  const result = await get${1:ApiName}({ userId: session.user.id });",
       "",
@@ -63,7 +63,7 @@
       "",
       "export const POST = withError(async (request) => {",
       "  const session = await auth();",
-      "  if (!session) return NextResponse.json({ error: \"Not authenticated\" });",
+      "  if (!session?.user) return NextResponse.json({ error: \"Not authenticated\" });",
       "",
       "  const json = await request.json();",
       "  const body = ${1/(.*)/${1:/downcase}/}Body.parse(json);",
@@ -82,7 +82,7 @@
       "",
       "export const DELETE = withError(async (_request, { params }) => {",
       "  const session = await auth();",
-      "  if (!session) return NextResponse.json({ error: \"Not authenticated\" });",
+      "  if (!session?.user) return NextResponse.json({ error: \"Not authenticated\" });",
       "",
       "  const result = await prisma.${2:table}.delete({",
       "    where: {",
@@ -222,7 +222,7 @@
       "",
       "export const POST = withError(async (request: Request) => {",
       "  const session = await auth();",
-      "  if (!session) return NextResponse.json({ error: \"Not authenticated\" });",
+      "  if (!session?.user) return NextResponse.json({ error: \"Not authenticated\" });",
       "",
       "  const json = await request.json();",
       "  const body = saveSettingsBody.parse(json);",

apps/web/.env.example

@@ -11,7 +11,7 @@ OPENAI_API_KEY=
 
 BEDROCK_ACCESS_KEY=
 BEDROCK_SECRET_KEY=
-BEDROCK_REGION=us-east-1
+BEDROCK_REGION=us-west-2
 
 #redis config
 UPSTASH_REDIS_URL="http://localhost:8079"

apps/web/__tests__/ai-categorize-senders.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi } from "vitest";
+import { aiCategorizeSenders } from "@/utils/ai/categorize-sender/ai-categorize-senders";
+import { defaultCategory } from "@/utils/categories";
+
+vi.mock("server-only", () => ({}));
+
+describe("aiCategorizeSenders", () => {
+  const user = {
+    email: "user@test.com",
+    aiProvider: null,
+    aiModel: null,
+    aiApiKey: null,
+  };
+
+  it("should categorize senders using AI", async () => {
+    const senders = [
+      "newsletter@company.com",
+      "support@service.com",
+      "unknown@example.com",
+      "sales@business.com",
+      "noreply@socialnetwork.com",
+    ];
+
+    const result = await aiCategorizeSenders({
+      user,
+      senders: senders.map((sender) => ({ emailAddress: sender, snippet: "" })),
+      categories: getEnabledCategories(),
+    });
+
+    expect(result).toHaveLength(senders.length);
+    expect(result).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          sender: expect.any(String),
+          category: expect.any(String),
+        }),
+      ]),
+    );
+
+    // Check specific senders
+    const newsletterResult = result.find(
+      (r) => r.sender === "newsletter@company.com",
+    );
+    expect(newsletterResult?.category).toBe("newsletter");
+
+    const supportResult = result.find(
+      (r) => r.sender === "support@service.com",
+    );
+    expect(supportResult?.category).toBe("support");
+
+    // The unknown sender might be categorized as "RequestMoreInformation"
+    const unknownResult = result.find(
+      (r) => r.sender === "unknown@example.com",
+    );
+    expect(unknownResult?.category).toBe("RequestMoreInformation");
+  }, 15_000); // Increased timeout for AI call
+
+  it("should handle empty senders list", async () => {
+    const result = await aiCategorizeSenders({
+      user,
+      senders: [],
+      categories: [],
+    });
+
+    expect(result).toEqual([]);
+  });
+
+  it("should categorize senders for all valid SenderCategory values", async () => {
+    const senders = getEnabledCategories()
+      .filter((category) => category.name !== "Unknown")
+      .map((category) => `${category.name}@example.com`);
+
+    const result = await aiCategorizeSenders({
+      user,
+      senders: senders.map((sender) => ({ emailAddress: sender, snippet: "" })),
+      categories: getEnabledCategories(),
+    });
+
+    expect(result).toHaveLength(senders.length);
+
+    for (const sender of senders) {
+      const category = sender.split("@")[0];
+      const senderResult = result.find((r) => r.sender === sender);
+      expect(senderResult).toBeDefined();
+      expect(senderResult?.category).toBe(category);
+    }
+  }, 15_000);
+});
+
+const getEnabledCategories = () => {
+  return Object.entries(defaultCategory)
+    .filter(([_, value]) => value.enabled)
+    .map(([_, value]) => ({
+      name: value.name,
+      description: value.description,
+    }));
+};

apps/web/app/(app)/automation/BulkRunRules.tsx

@@ -2,8 +2,6 @@
 
 import { useRef, useState } from "react";
 import Link from "next/link";
-import useSWR from "swr";
-import { useAtomValue } from "jotai";
 import { HistoryIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useModal, Modal } from "@/components/Modal";
@@ -12,23 +10,21 @@ import type { ThreadsResponse } from "@/app/api/google/threads/controller";
 import type { ThreadsQuery } from "@/app/api/google/threads/validation";
 import { LoadingContent } from "@/components/LoadingContent";
 import { runAiRules } from "@/utils/queue/email-actions";
-import { aiQueueAtom } from "@/store/queue";
 import { sleep } from "@/utils/sleep";
 import { PremiumAlertWithData, usePremium } from "@/components/PremiumAlert";
 import { SetDateDropdown } from "@/app/(app)/automation/SetDateDropdown";
 import { dateToSeconds } from "@/utils/date";
 import { Tooltip } from "@/components/Tooltip";
+import { useThreads } from "@/hooks/useThreads";
+import { useAiQueueState } from "@/store/ai-queue";
 
 export function BulkRunRules() {
   const { isModalOpen, openModal, closeModal } = useModal();
   const [totalThreads, setTotalThreads] = useState(0);
 
-  const query: ThreadsQuery = { type: "inbox" };
-  const { data, isLoading, error } = useSWR<ThreadsResponse>(
-    `/api/google/threads?${new URLSearchParams(query as any).toString()}`,
-  );
+  const { data, isLoading, error } = useThreads({ type: "inbox" });
 
-  const queue = useAtomValue(aiQueueAtom);
+  const queue = useAiQueueState();
 
   const { hasAiAccess, isLoading: isLoadingPremium } = usePremium();
 

apps/web/app/(app)/automation/RuleForm.tsx

@@ -17,7 +17,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "sonner";
 import { capitalCase } from "capital-case";
 import { usePostHog } from "posthog-js/react";
-import { HelpCircleIcon, PlusIcon } from "lucide-react";
+import { ExternalLinkIcon, PlusIcon } from "lucide-react";
 import { Card } from "@/components/Card";
 import { Button } from "@/components/ui/button";
 import { ErrorMessage, Input, Label } from "@/components/Input";
@@ -27,7 +27,7 @@ import {
   SectionDescription,
   TypographyH3,
 } from "@/components/Typography";
-import { ActionType, RuleType } from "@prisma/client";
+import { ActionType, CategoryFilterType, RuleType } from "@prisma/client";
 import { createRuleAction, updateRuleAction } from "@/utils/actions/rule";
 import {
   type CreateRuleBody,
@@ -36,7 +36,6 @@ import {
 import { actionInputs } from "@/utils/actionType";
 import { Select } from "@/components/Select";
 import { Toggle } from "@/components/Toggle";
-import { Tooltip } from "@/components/Tooltip";
 import type { GroupsResponse } from "@/app/api/user/group/route";
 import { LoadingContent } from "@/components/LoadingContent";
 import { TooltipExplanation } from "@/components/TooltipExplanation";
@@ -52,6 +51,9 @@ import { Combobox } from "@/components/Combobox";
 import { useLabels } from "@/hooks/useLabels";
 import { createLabelAction } from "@/utils/actions/mail";
 import type { LabelsResponse } from "@/app/api/google/labels/route";
+import { MultiSelectFilter } from "@/components/MultiSelectFilter";
+import { useCategories } from "@/hooks/useCategories";
+import { useSmartCategoriesEnabled } from "@/hooks/useFeatureFlags";
 
 export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
   const {
@@ -69,7 +71,11 @@ export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
   const { append, remove } = useFieldArray({ control, name: "actions" });
 
   const { userLabels, data: gmailLabelsData, isLoading, mutate } = useLabels();
-
+  const {
+    categories,
+    isLoading: categoriesLoading,
+    error: categoriesError,
+  } = useCategories();
   const router = useRouter();
 
   const posthog = usePostHog();
@@ -136,6 +142,8 @@ export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
     [gmailLabelsData?.labels, router, posthog],
   );
 
+  const showSmartCategories = useSmartCategoriesEnabled();
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="mt-4">
@@ -178,6 +186,52 @@ export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
             placeholder='e.g. Apply this rule to all "receipts"'
             tooltipText="The instructions that will be passed to the AI."
           />
+
+          {showSmartCategories && (
+            <div className="space-y-2">
+              <div className="w-fit">
+                <Select
+                  name="categoryFilterType"
+                  label="Optional: Only apply rule to emails from these categories"
+                  tooltipText="This helps the AI be more accurate and produce better results."
+                  options={[
+                    { label: "Include", value: CategoryFilterType.INCLUDE },
+                    { label: "Exclude", value: CategoryFilterType.EXCLUDE },
+                  ]}
+                  registerProps={register("categoryFilterType")}
+                  error={errors.categoryFilterType}
+                />
+              </div>
+
+              <LoadingContent
+                loading={categoriesLoading}
+                error={categoriesError}
+              >
+                <MultiSelectFilter
+                  title="Categories"
+                  maxDisplayedValues={8}
+                  options={categories.map((category) => ({
+                    label: capitalCase(category.name),
+                    value: category.id,
+                  }))}
+                  selectedValues={new Set(watch("categoryFilters"))}
+                  setSelectedValues={(selectedValues) => {
+                    setValue("categoryFilters", Array.from(selectedValues));
+                  }}
+                />
+                {errors.categoryFilters?.message && (
+                  <ErrorMessage message={errors.categoryFilters.message} />
+                )}
+              </LoadingContent>
+
+              <Button asChild variant="ghost" size="sm" className="ml-2">
+                <Link href="/smart-categories/setup" target="_blank">
+                  Create new category
+                  <ExternalLinkIcon className="ml-1.5 size-4" />
+                </Link>
+              </Button>
+            </div>
+          )}
         </div>
       )}
 
@@ -341,9 +395,10 @@ export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
       </div>
 
       <div className="mt-4 flex items-center justify-end space-x-2">
-        <Tooltip content="When enabled our AI will perform actions automatically. If disabled, you will have to confirm actions first.">
-          <HelpCircleIcon className="h-5 w-5 cursor-pointer" />
-        </Tooltip>
+        <TooltipExplanation
+          size="md"
+          text="When enabled our AI will perform actions automatically. If disabled, you will have to confirm actions first."
+        />
 
         <Toggle
           name="automate"
@@ -356,9 +411,10 @@ export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
       </div>
 
       <div className="mt-4 flex items-center justify-end space-x-2">
-        <Tooltip content="When enabled, this rule applies to all emails in a conversation, including replies. When disabled, it only applies to the first email in each conversation.">
-          <HelpCircleIcon className="h-5 w-5 cursor-pointer" />
-        </Tooltip>
+        <TooltipExplanation
+          size="md"
+          text="When enabled, this rule applies to all emails in a conversation, including replies. When disabled, it only applies to the first email in each conversation."
+        />
 
         <Toggle
           name="runOnThreads"

apps/web/app/(app)/automation/RulesPrompt.tsx

@@ -11,7 +11,7 @@ import {
   saveRulesPromptAction,
   generateRulesPromptAction,
 } from "@/utils/actions/ai-rule";
-import { captureException, isActionError } from "@/utils/error";
+import { isActionError } from "@/utils/error";
 import {
   Card,
   CardContent,

apps/web/app/(app)/automation/group/CreateGroupModal.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { useSWRConfig } from "swr";
 import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Modal, useModal } from "@/components/Modal";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/Input";
@@ -13,7 +14,6 @@ import {
   createNewsletterGroupAction,
   createReceiptGroupAction,
 } from "@/utils/actions/group";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   type CreateGroupBody,
   createGroupBody,

apps/web/app/(app)/bulk-unsubscribe/ArchiveProgress.tsx

@@ -1,12 +1,13 @@
+"use client";
+
 import { memo, useEffect } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { useAtomValue } from "jotai";
 import { ProgressBar } from "@tremor/react";
-import { queueAtom, resetTotalThreads } from "@/store/archive-queue";
+import { resetTotalThreads, useQueueState } from "@/store/archive-queue";
 import { cn } from "@/utils";
 
 export const ArchiveProgress = memo(() => {
-  const { totalThreads, activeThreads } = useAtomValue(queueAtom);
+  const { totalThreads, activeThreads } = useQueueState();
 
   // Make sure activeThreads is an object as this was causing an error.
   const threadsRemaining = Object.values(activeThreads || {}).length;

apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribe.tsx

@@ -10,6 +10,7 @@ import { ActionBar } from "@/app/(app)/stats/ActionBar";
 import { useStatLoader } from "@/providers/StatLoaderProvider";
 import { OnboardingModal } from "@/components/OnboardingModal";
 import { TextLink } from "@/components/Typography";
+import { TopBar } from "@/components/TopBar";
 
 const selectOptions = [
   { label: "Last week", value: "7" },
@@ -52,7 +53,7 @@ export function BulkUnsubscribe() {
 
   return (
     <div>
-      <div className="top-0 z-10 flex flex-col justify-between gap-1 border-b bg-white px-2 py-2 shadow sm:sticky sm:flex-row sm:px-4">
+      <TopBar sticky>
         <OnboardingModal
           title="Getting started with Bulk Unsubscribe"
           description={
@@ -79,7 +80,7 @@ export function BulkUnsubscribe() {
           />
           <LoadStatsButton />
         </div>
-      </div>
+      </TopBar>
 
       <div className="my-2 sm:mx-4 sm:my-4">
         <BulkUnsubscribeSection

apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeMobile.tsx

@@ -26,7 +26,6 @@ import type { RowProps } from "@/app/(app)/bulk-unsubscribe/types";
 import { Button } from "@/components/ui/button";
 import { ButtonLoader } from "@/components/Loading";
 import { NewsletterStatus } from "@prisma/client";
-import { cleanUnsubscribeLink } from "@/utils/parse/parseHtml.client";
 import { Badge } from "@/components/ui/badge";
 
 export function BulkUnsubscribeMobile({