From d053421f575accd9442ab98a101751de46b47216 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Sun, 5 Jan 2025 15:01:35 +0200
Subject: [PATCH] Refactor components to process tab (instead of test tab)

---
 apps/web/app/(app)/automation/Process.tsx     |   4 +-
 .../(app)/automation/ProcessResultDisplay.tsx | 123 +++++++++++
 .../{TestRules.tsx => ProcessRules.tsx}       | 208 +-----------------
 .../app/(app)/automation/ReportMistake.tsx    |  10 +-
 .../(app)/automation/TestCustomEmailForm.tsx  |  69 ++++++
 apps/web/utils/actions/ai-rule.ts             |   9 +-
 apps/web/utils/actions/validation.ts          |   5 +
 7 files changed, 220 insertions(+), 208 deletions(-)
 create mode 100644 apps/web/app/(app)/automation/ProcessResultDisplay.tsx
 rename apps/web/app/(app)/automation/{TestRules.tsx => ProcessRules.tsx} (58%)
 create mode 100644 apps/web/app/(app)/automation/TestCustomEmailForm.tsx

diff --git a/apps/web/app/(app)/automation/Process.tsx b/apps/web/app/(app)/automation/Process.tsx
index 64b141a4..8ef3d268 100644
--- a/apps/web/app/(app)/automation/Process.tsx
+++ b/apps/web/app/(app)/automation/Process.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { TestRulesContent } from "@/app/(app)/automation/TestRules";
+import { ProcessRulesContent } from "@/app/(app)/automation/ProcessRules";
 import { Toggle } from "@/components/Toggle";
 import {
   Card,
@@ -34,7 +34,7 @@ export function Process() {
           />
         </div>
       </CardHeader>
-      <TestRulesContent testMode={!applyMode} />
+      <ProcessRulesContent testMode={!applyMode} />
     </Card>
   );
 }
diff --git a/apps/web/app/(app)/automation/ProcessResultDisplay.tsx b/apps/web/app/(app)/automation/ProcessResultDisplay.tsx
new file mode 100644
index 00000000..f3451adc
--- /dev/null
+++ b/apps/web/app/(app)/automation/ProcessResultDisplay.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import Link from "next/link";
+import { capitalCase } from "capital-case";
+import { CheckCircle2Icon, EyeIcon, ExternalLinkIcon } from "lucide-react";
+import type { RunRulesResult } from "@/utils/ai/choose-rule/run-rules";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { HoverCard } from "@/components/HoverCard";
+import { Badge } from "@/components/Badge";
+import { isAIRule } from "@/utils/condition";
+
+export function ProcessResultDisplay({
+  result,
+  prefix,
+}: {
+  result: RunRulesResult;
+  prefix?: string;
+}) {
+  if (!result) return null;
+
+  if (!result.rule) {
+    return (
+      <HoverCard
+        className="w-auto max-w-3xl"
+        content={
+          <Alert variant="destructive" className="bg-white">
+            <AlertTitle>No rule matched</AlertTitle>
+            <AlertDescription className="space-y-2">
+              <div>
+                This email does not match any of the rules you have set.
+              </div>
+              <div>
+                <strong>Reason:</strong> {result.reason || "No reason provided"}
+              </div>
+            </AlertDescription>
+          </Alert>
+        }
+      >
+        <Badge color="red">
+          {prefix ? prefix : ""}No rule matched
+          <EyeIcon className="ml-1.5 size-3.5 opacity-70" />
+        </Badge>
+      </HoverCard>
+    );
+  }
+
+  const MAX_LENGTH = 280;
+
+  const aiGeneratedContent = result.actionItems?.map((action, i) => (
+    <div
+      key={i}
+      className="space-y-2 rounded-md border border-gray-200 bg-gray-50 p-3"
+    >
+      <div className="text-xs font-semibold uppercase tracking-wide text-gray-900">
+        {capitalCase(action.type)}
+      </div>
+      {Object.entries(action)
+        .filter(
+          ([key, value]) =>
+            value &&
+            ["label", "subject", "content", "to", "cc", "bcc", "url"].includes(
+              key,
+            ),
+        )
+        .map(([key, value]) => (
+          <div key={key} className="flex text-sm text-gray-800">
+            <span className="min-w-16 font-medium text-gray-600">
+              {capitalCase(key)}:
+            </span>
+            <span className="ml-2 max-h-40 flex-1 overflow-y-auto">
+              {value}
+            </span>
+          </div>
+        ))}
+    </div>
+  ));
+
+  return (
+    <HoverCard
+      className="w-auto max-w-5xl"
+      content={
+        <Alert variant="blue" className="max-w-prose bg-white">
+          <CheckCircle2Icon className="h-4 w-4" />
+          <AlertTitle className="flex items-center justify-between">
+            Matched rule "{result.rule.name}"
+            <Link
+              href={`/automation/rule/${result.rule.id}`}
+              target="_blank"
+              className="ml-1.5"
+            >
+              <span className="sr-only">View rule</span>
+              <ExternalLinkIcon className="size-3.5 opacity-70" />
+            </Link>
+          </AlertTitle>
+          <AlertDescription className="mt-2 space-y-4">
+            {isAIRule(result.rule) && (
+              <div className="text-sm">
+                <span className="font-medium">AI Instructions: </span>
+                {result.rule.instructions.substring(0, MAX_LENGTH)}
+                {result.rule.instructions.length >= MAX_LENGTH && "..."}
+              </div>
+            )}
+            {!!aiGeneratedContent?.length && (
+              <div className="space-y-3">{aiGeneratedContent}</div>
+            )}
+            {!!result.reason && (
+              <div className="border-l-2 border-blue-200 pl-3 text-sm">
+                <span className="font-medium">Reason: </span>
+                {result.reason}
+              </div>
+            )}
+          </AlertDescription>
+        </Alert>
+      }
+    >
+      <Badge color="green">
+        {prefix ? prefix : ""}
+        {result.rule.name}
+        <EyeIcon className="ml-1.5 size-3.5 opacity-70" />
+      </Badge>
+    </HoverCard>
+  );
+}
diff --git a/apps/web/app/(app)/automation/TestRules.tsx b/apps/web/app/(app)/automation/ProcessRules.tsx
similarity index 58%
rename from apps/web/app/(app)/automation/TestRules.tsx
rename to apps/web/app/(app)/automation/ProcessRules.tsx
index 5aa9607e..69518939 100644
--- a/apps/web/app/(app)/automation/TestRules.tsx
+++ b/apps/web/app/(app)/automation/ProcessRules.tsx
@@ -1,45 +1,32 @@
 "use client";
 
 import { useCallback, useState, useRef, useMemo } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
-import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { parseAsBoolean, useQueryState } from "nuqs";
-import { capitalCase } from "capital-case";
 import {
   BookOpenCheckIcon,
-  CheckCircle2Icon,
   SparklesIcon,
   PenSquareIcon,
   PauseIcon,
-  EyeIcon,
-  ExternalLinkIcon,
   ChevronsDownIcon,
   RefreshCcwIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/Input";
 import { toastError } from "@/components/Toast";
 import { LoadingContent } from "@/components/LoadingContent";
-import { SlideOverSheet } from "@/components/SlideOverSheet";
 import type { MessagesResponse } from "@/app/api/google/messages/route";
 import { Separator } from "@/components/ui/separator";
 import { TestRulesMessage } from "@/app/(app)/cold-email-blocker/TestRulesMessage";
-import {
-  runRulesAction,
-  testAiCustomContentAction,
-} from "@/utils/actions/ai-rule";
+import { runRulesAction } from "@/utils/actions/ai-rule";
 import type { RulesResponse } from "@/app/api/user/rules/route";
 import { Table, TableBody, TableRow, TableCell } from "@/components/ui/table";
 import { CardContent } from "@/components/ui/card";
 import { isActionError } from "@/utils/error";
 import type { RunRulesResult } from "@/utils/ai/choose-rule/run-rules";
 import { SearchForm } from "@/components/SearchForm";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { ReportMistake } from "@/app/(app)/automation/ReportMistake";
-import { HoverCard } from "@/components/HoverCard";
 import { Badge } from "@/components/Badge";
 import {
   isAIRule,
@@ -49,29 +36,12 @@ import {
 } from "@/utils/condition";
 import { BulkRunRules } from "@/app/(app)/automation/BulkRunRules";
 import { cn } from "@/utils";
+import { TestCustomEmailForm } from "@/app/(app)/automation/TestCustomEmailForm";
+import { ProcessResultDisplay } from "@/app/(app)/automation/ProcessResultDisplay";
 
 type Message = MessagesResponse["messages"][number];
 
-export function TestRules(props: { disabled?: boolean }) {
-  return (
-    <SlideOverSheet
-      title="Test Rules"
-      description="Test how your rules perform against real emails."
-      content={
-        <div className="mt-4">
-          <TestRulesContent testMode />
-        </div>
-      }
-    >
-      <Button variant="outline" disabled={props.disabled}>
-        <BookOpenCheckIcon className="mr-2 h-4 w-4" />
-        Test Rules
-      </Button>
-    </SlideOverSheet>
-  );
-}
-
-export function TestRulesContent({ testMode }: { testMode: boolean }) {
+export function ProcessRulesContent({ testMode }: { testMode: boolean }) {
   const [searchQuery, setSearchQuery] = useQueryState("search");
   const [showCustomForm, setShowCustomForm] = useQueryState(
     "custom",
@@ -198,7 +168,7 @@ export function TestRulesContent({ testMode }: { testMode: boolean }) {
       {hasAiRules && showCustomForm && testMode && (
         <div className="mt-2">
           <CardContent>
-            <TestRulesForm />
+            <TestCustomEmailForm />
           </CardContent>
           <Separator />
         </div>
@@ -214,7 +184,7 @@ export function TestRulesContent({ testMode }: { testMode: boolean }) {
             <Table>
               <TableBody>
                 {messages.map((message) => (
-                  <TestRulesContentRow
+                  <ProcessRulesRow
                     key={message.id}
                     message={message}
                     userEmail={email!}
@@ -245,56 +215,7 @@ export function TestRulesContent({ testMode }: { testMode: boolean }) {
   );
 }
 
-type TestRulesInputs = { message: string };
-
-const TestRulesForm = () => {
-  const [testResult, setTestResult] = useState<RunRulesResult | undefined>();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TestRulesInputs>();
-
-  const onSubmit: SubmitHandler<TestRulesInputs> = useCallback(async (data) => {
-    const result = await testAiCustomContentAction({ content: data.message });
-    if (isActionError(result)) {
-      toastError({
-        title: "Error testing email",
-        description: result.error,
-      });
-    } else {
-      setTestResult(result);
-    }
-  }, []);
-
-  return (
-    <div>
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
-        <Input
-          type="text"
-          autosizeTextarea
-          rows={3}
-          name="message"
-          placeholder="Paste in email content or write your own. e.g. Receipt from Stripe for $49"
-          registerProps={register("message", { required: true })}
-          error={errors.message}
-        />
-        <Button type="submit" loading={isSubmitting}>
-          <SparklesIcon className="mr-2 h-4 w-4" />
-          Test Rules
-        </Button>
-      </form>
-      {testResult && (
-        <div className="mt-4">
-          <TestResultDisplay result={testResult} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-function TestRulesContentRow({
+function ProcessRulesRow({
   message,
   userEmail,
   isRunning,
@@ -331,7 +252,7 @@ function TestRulesContentRow({
                   {result.existing && (
                     <Badge color="yellow">Already processed</Badge>
                   )}
-                  <TestResultDisplay result={result} />
+                  <ProcessResultDisplay result={result} />
                 </div>
                 <ReportMistake result={result} message={message} />
                 <Button
@@ -361,116 +282,3 @@ function TestRulesContentRow({
     </TableRow>
   );
 }
-
-export function TestResultDisplay({
-  result,
-  prefix,
-}: {
-  result: RunRulesResult;
-  prefix?: string;
-}) {
-  if (!result) return null;
-
-  if (!result.rule) {
-    return (
-      <HoverCard
-        className="w-auto max-w-3xl"
-        content={
-          <Alert variant="destructive" className="bg-white">
-            <AlertTitle>No rule matched</AlertTitle>
-            <AlertDescription className="space-y-2">
-              <div>
-                This email does not match any of the rules you have set.
-              </div>
-              <div>
-                <strong>Reason:</strong> {result.reason || "No reason provided"}
-              </div>
-            </AlertDescription>
-          </Alert>
-        }
-      >
-        <Badge color="red">
-          {prefix ? prefix : ""}No rule matched
-          <EyeIcon className="ml-1.5 size-3.5 opacity-70" />
-        </Badge>
-      </HoverCard>
-    );
-  }
-
-  const MAX_LENGTH = 280;
-
-  const aiGeneratedContent = result.actionItems?.map((action, i) => (
-    <div
-      key={i}
-      className="space-y-2 rounded-md border border-gray-200 bg-gray-50 p-3"
-    >
-      <div className="text-xs font-semibold uppercase tracking-wide text-gray-900">
-        {capitalCase(action.type)}
-      </div>
-      {Object.entries(action)
-        .filter(
-          ([key, value]) =>
-            value &&
-            ["label", "subject", "content", "to", "cc", "bcc", "url"].includes(
-              key,
-            ),
-        )
-        .map(([key, value]) => (
-          <div key={key} className="flex text-sm text-gray-800">
-            <span className="min-w-16 font-medium text-gray-600">
-              {capitalCase(key)}:
-            </span>
-            <span className="ml-2 max-h-40 flex-1 overflow-y-auto">
-              {value}
-            </span>
-          </div>
-        ))}
-    </div>
-  ));
-
-  return (
-    <HoverCard
-      className="w-auto max-w-5xl"
-      content={
-        <Alert variant="blue" className="max-w-prose bg-white">
-          <CheckCircle2Icon className="h-4 w-4" />
-          <AlertTitle className="flex items-center justify-between">
-            Matched rule "{result.rule.name}"
-            <Link
-              href={`/automation/rule/${result.rule.id}`}
-              target="_blank"
-              className="ml-1.5"
-            >
-              <span className="sr-only">View rule</span>
-              <ExternalLinkIcon className="size-3.5 opacity-70" />
-            </Link>
-          </AlertTitle>
-          <AlertDescription className="mt-2 space-y-4">
-            {isAIRule(result.rule) && (
-              <div className="text-sm">
-                <span className="font-medium">AI Instructions: </span>
-                {result.rule.instructions.substring(0, MAX_LENGTH)}
-                {result.rule.instructions.length >= MAX_LENGTH && "..."}
-              </div>
-            )}
-            {!!aiGeneratedContent?.length && (
-              <div className="space-y-3">{aiGeneratedContent}</div>
-            )}
-            {!!result.reason && (
-              <div className="border-l-2 border-blue-200 pl-3 text-sm">
-                <span className="font-medium">Reason: </span>
-                {result.reason}
-              </div>
-            )}
-          </AlertDescription>
-        </Alert>
-      }
-    >
-      <Badge color="green">
-        {prefix ? prefix : ""}
-        {result.rule.name}
-        <EyeIcon className="ml-1.5 size-3.5 opacity-70" />
-      </Badge>
-    </HoverCard>
-  );
-}
diff --git a/apps/web/app/(app)/automation/ReportMistake.tsx b/apps/web/app/(app)/automation/ReportMistake.tsx
index 74a7e628..8ff36b0b 100644
--- a/apps/web/app/(app)/automation/ReportMistake.tsx
+++ b/apps/web/app/(app)/automation/ReportMistake.tsx
@@ -41,7 +41,7 @@ import { updateRuleInstructionsAction } from "@/utils/actions/rule";
 import { Separator } from "@/components/ui/separator";
 import { SectionDescription } from "@/components/Typography";
 import { Badge } from "@/components/Badge";
-import { TestResultDisplay } from "@/app/(app)/automation/TestRules";
+import { ProcessResultDisplay } from "@/app/(app)/automation/ProcessResultDisplay";
 import { isReplyInThread } from "@/utils/thread";
 import { isAIRule, isGroupRule, isStaticRule } from "@/utils/condition";
 import { Loading } from "@/components/Loading";
@@ -299,7 +299,7 @@ function AIFixView({
     <div className="space-y-2">
       {fixedInstructionsRule?.instructions ? (
         <div className="space-y-2">
-          <TestResultDisplay result={{ rule: fixedInstructionsRule }} />
+          <ProcessResultDisplay result={{ rule: fixedInstructionsRule }} />
           <Instructions
             label="Original:"
             instructions={fixedInstructionsRule?.instructions}
@@ -338,7 +338,7 @@ function RuleMismatch({
       <Label name="matchedRule" label="Matched:" />
       <div className="mt-1">
         {result ? (
-          <TestResultDisplay result={result} />
+          <ProcessResultDisplay result={result} />
         ) : (
           <p>No rule matched</p>
         )}
@@ -461,7 +461,7 @@ function ManualFixView({
   return (
     <>
       <>
-        {result && <TestResultDisplay result={result} prefix="Matched: " />}
+        {result && <ProcessResultDisplay result={result} prefix="Matched: " />}
         {actualRule && (
           <>
             {isAIRule(actualRule) ? (
@@ -764,7 +764,7 @@ function RerunTestButton({ message }: { message: ParsedMessage }) {
       {testResult && (
         <div className="mt-2 flex items-center gap-2">
           <SectionDescription>Test Result:</SectionDescription>
-          <TestResultDisplay result={testResult} />
+          <ProcessResultDisplay result={testResult} />
         </div>
       )}
     </>
diff --git a/apps/web/app/(app)/automation/TestCustomEmailForm.tsx b/apps/web/app/(app)/automation/TestCustomEmailForm.tsx
new file mode 100644
index 00000000..d975eac4
--- /dev/null
+++ b/apps/web/app/(app)/automation/TestCustomEmailForm.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { type SubmitHandler, useForm } from "react-hook-form";
+import { SparklesIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/Input";
+import { toastError } from "@/components/Toast";
+import { testAiCustomContentAction } from "@/utils/actions/ai-rule";
+import { isActionError } from "@/utils/error";
+import type { RunRulesResult } from "@/utils/ai/choose-rule/run-rules";
+import { ProcessResultDisplay } from "@/app/(app)/automation/ProcessResultDisplay";
+import {
+  testAiCustomContentBody,
+  type TestAiCustomContentBody,
+} from "@/utils/actions/validation";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+export const TestCustomEmailForm = () => {
+  const [testResult, setTestResult] = useState<RunRulesResult | undefined>();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TestAiCustomContentBody>({
+    resolver: zodResolver(testAiCustomContentBody),
+  });
+
+  const onSubmit: SubmitHandler<TestAiCustomContentBody> = useCallback(
+    async (data) => {
+      const result = await testAiCustomContentAction(data);
+      if (isActionError(result)) {
+        toastError({
+          title: "Error testing email",
+          description: result.error,
+        });
+      } else {
+        setTestResult(result);
+      }
+    },
+    [],
+  );
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
+        <Input
+          type="text"
+          autosizeTextarea
+          rows={3}
+          name="content"
+          placeholder="Paste in email content or write your own. e.g. Receipt from Stripe for $49"
+          registerProps={register("content", { required: true })}
+          error={errors.content}
+        />
+        <Button type="submit" loading={isSubmitting}>
+          <SparklesIcon className="mr-2 h-4 w-4" />
+          Test
+        </Button>
+      </form>
+      {testResult && (
+        <div className="mt-4">
+          <ProcessResultDisplay result={testResult} />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/web/utils/actions/ai-rule.ts b/apps/web/utils/actions/ai-rule.ts
index 34a17cfb..b356e84a 100644
--- a/apps/web/utils/actions/ai-rule.ts
+++ b/apps/web/utils/actions/ai-rule.ts
@@ -33,6 +33,8 @@ import {
   type SaveRulesPromptBody,
   runRulesBody,
   type RunRulesBody,
+  testAiCustomContentBody,
+  type TestAiCustomContentBody,
 } from "@/utils/actions/validation";
 import { aiPromptToRules } from "@/utils/ai/rule/prompt-to-rules";
 import { aiDiffRules } from "@/utils/ai/rule/diff-rules";
@@ -131,7 +133,12 @@ export const runRulesAction = withActionInstrumentation(
 
 export const testAiCustomContentAction = withActionInstrumentation(
   "testAiCustomContent",
-  async ({ content }: { content: string }) => {
+  async (unsafeBody: TestAiCustomContentBody) => {
+    const { data, error } = testAiCustomContentBody.safeParse(unsafeBody);
+    if (error) return { error: error.message };
+
+    const { content } = data;
+
     const session = await auth();
     if (!session?.user.id) return { error: "Not logged in" };
     const gmail = getGmailClient(session);
diff --git a/apps/web/utils/actions/validation.ts b/apps/web/utils/actions/validation.ts
index 4de83903..d72898dd 100644
--- a/apps/web/utils/actions/validation.ts
+++ b/apps/web/utils/actions/validation.ts
@@ -159,6 +159,11 @@ export type RulesExamplesBody = z.infer<typeof rulesExamplesBody>;
 export const testAiBody = z.object({ messageId: z.string() });
 export type TestAiBody = z.infer<typeof testAiBody>;
 
+export const testAiCustomContentBody = z.object({
+  content: z.string().min(1, "Please enter a message"),
+});
+export type TestAiCustomContentBody = z.infer<typeof testAiCustomContentBody>;
+
 export const runRulesBody = z.object({
   messageId: z.string(),
   threadId: z.string(),