Learned patterns dialog

apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx

@@ -64,9 +64,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LearnedPatterns } from "@/app/(app)/[emailAccountId]/assistant/group/LearnedPatterns";
-import { Tooltip } from "@/components/Tooltip";
-import { createGroupAction } from "@/utils/actions/group";
+import { LearnedPatternsDialog } from "@/app/(app)/[emailAccountId]/assistant/group/LearnedPatterns";
 import { NEEDS_REPLY_LABEL_NAME } from "@/utils/reply-tracker/consts";
 import { Badge } from "@/components/Badge";
 import { useAccount } from "@/providers/EmailAccountProvider";
@@ -300,11 +298,6 @@ export function RuleForm({
     ];
   }, [digestEnabled]);
 
-  const [learnedPatternGroupId, setLearnedPatternGroupId] = useState(
-    rule.groupId,
-  );
-  const [showLearnedPatterns, setShowLearnedPatterns] = useState(false);
-
   const [isNameEditMode, setIsNameEditMode] = useState(alwaysEditMode);
   const [isConditionsEditMode, setIsConditionsEditMode] =
     useState(alwaysEditMode);
@@ -401,40 +394,6 @@ export function RuleForm({
               </DropdownMenu>
             )}
 
-            {!!rule.id && (
-              <Tooltip content="Show learned patterns">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="h-9 w-9"
-                  onClick={async () => {
-                    if (!rule.id) return;
-
-                    setShowLearnedPatterns((b) => !b);
-                    if (learnedPatternGroupId) return;
-
-                    const result = await createGroupAction(emailAccountId, {
-                      ruleId: rule.id,
-                    });
-
-                    if (result?.serverError) {
-                      toastError({ description: result.serverError });
-                    } else if (!result?.data?.groupId) {
-                      toastError({
-                        description:
-                          "There was an error setting up learned patterns.",
-                      });
-                    } else {
-                      setLearnedPatternGroupId(result.data.groupId);
-                      setShowLearnedPatterns(true);
-                    }
-                  }}
-                >
-                  <BrainIcon className="size-4" />
-                </Button>
-              </Tooltip>
-            )}
-
             {!alwaysEditMode && (
               <Button
                 size="sm"
@@ -787,12 +746,6 @@ export function RuleForm({
           </div>
         )}
 
-        {showLearnedPatterns && learnedPatternGroupId && (
-          <div className="mt-4">
-            <LearnedPatterns groupId={learnedPatternGroupId} />
-          </div>
-        )}
-
         <div className="mt-4 flex items-center justify-between">
           <TypographyH3 className="text-xl">Actions</TypographyH3>
           {!alwaysEditMode && (
@@ -896,6 +849,15 @@ export function RuleForm({
           />
         </div>
 
+        {!!rule.id && (
+          <div className="mt-4 flex justify-end">
+            <LearnedPatternsDialog
+              ruleId={rule.id}
+              groupId={rule.groupId || null}
+            />
+          </div>
+        )}
+
         <div className="flex justify-end space-x-2 py-6">
           {rule.id && (
             <Button

apps/web/app/(app)/[emailAccountId]/assistant/group/LearnedPatterns.tsx

@@ -1,42 +1,89 @@
 "use client";
 
 import { useState } from "react";
-import { BrainIcon, ChevronDownIcon } from "lucide-react";
-import {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from "@/components/ui/collapsible";
+import { useAction } from "next-safe-action/hooks";
 import { ViewGroup } from "@/app/(app)/[emailAccountId]/assistant/group/ViewGroup";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogHeader,
+  DialogTrigger,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { createGroupAction } from "@/utils/actions/group";
+import { useAccount } from "@/providers/EmailAccountProvider";
+import { toastError } from "@/components/Toast";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function LearnedPatternsDialog({
+  ruleId,
+  groupId,
+}: {
+  ruleId: string;
+  groupId: string | null;
+}) {
+  const { emailAccountId } = useAccount();
 
-export function LearnedPatterns({ groupId }: { groupId: string }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [learnedPatternGroupId, setLearnedPatternGroupId] = useState<
+    string | null
+  >(groupId);
+
+  const { execute, isExecuting } = useAction(
+    createGroupAction.bind(null, emailAccountId),
+    {
+      onSuccess: (data) => {
+        if (data.data?.groupId) {
+          setLearnedPatternGroupId(data.data.groupId);
+        } else {
+          toastError({
+            description: "There was an error setting up learned patterns.",
+          });
+        }
+      },
+      onError: (error) => {
+        toastError({
+          description: error.error.serverError || "Unknown error",
+        });
+      },
+    },
+  );
 
   return (
-    <Collapsible
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      className="overflow-hidden rounded-lg border"
-    >
-      <CollapsibleTrigger className="flex w-full items-center justify-between bg-background p-4 hover:bg-muted">
-        <div className="flex items-center gap-2">
-          <BrainIcon size={16} className="text-muted-foreground" />
-          <span className="font-medium">Learned Patterns</span>
-        </div>
-
-        <div className="flex items-center gap-4">
-          <ChevronDownIcon
-            size={16}
-            className={`transform transition-transform ${
-              isOpen ? "rotate-180" : ""
-            }`}
-          />
-        </div>
-      </CollapsibleTrigger>
-
-      <CollapsibleContent>
-        <ViewGroup groupId={groupId} />
-      </CollapsibleContent>
-    </Collapsible>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={async () => {
+            if (!ruleId) return;
+
+            if (groupId) return;
+
+            execute({ ruleId });
+          }}
+        >
+          View learned patterns
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Learned Patterns</DialogTitle>
+          <DialogDescription>
+            Learned patterns are patterns that the AI has learned from your
+            email history. When a learned pattern is matched other rules
+            conditions are skipped and this rule is automatically selected.
+          </DialogDescription>
+        </DialogHeader>
+
+        {isExecuting ? (
+          <Skeleton className="h-40 w-full" />
+        ) : (
+          learnedPatternGroupId && <ViewGroup groupId={learnedPatternGroupId} />
+        )}
+      </DialogContent>
+    </Dialog>
   );
 }

apps/web/utils/actions/group.validation.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 import { GroupItemType } from "@prisma/client";
 
 export const createGroupBody = z.object({
-  ruleId: z.string(),
+  ruleId: z.string().min(1, "Rule ID is required"),
 });
 export type CreateGroupBody = z.infer<typeof createGroupBody>;
 

version.txt

@@ -1 +1 @@
-v1.9.10
+v1.9.11