Add readonly prompt view for rules

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

@@ -71,7 +71,7 @@ function getActionType(example: string): {
   if (lowerExample.includes("spam") || lowerExample.includes("mark")) {
     return { type: "mark", color };
   }
-  if (lowerExample.includes("label")) {
+  if (lowerExample.includes("label") || lowerExample.includes("categorize")) {
     return { type: "label", color };
   }
 

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

@@ -0,0 +1,85 @@
+"use client";
+
+import { useCallback, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  SimpleRichTextEditor,
+  type SimpleRichTextEditorRef,
+} from "@/components/editor/SimpleRichTextEditor";
+import { LoadingContent } from "@/components/LoadingContent";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useLabels } from "@/hooks/useLabels";
+import { useRules } from "@/hooks/useRules";
+import { toastError } from "@/components/Toast";
+import { ruleToText } from "@/utils/rule/rule-to-text";
+import { MessageText } from "@/components/Typography";
+import { Notice } from "@/components/Notice";
+
+export function RulesPromptFormat() {
+  const { data: rules, isLoading: isLoadingRules } = useRules();
+  const { userLabels, isLoading: isLoadingLabels } = useLabels();
+
+  const editorRef = useRef<SimpleRichTextEditorRef>(null);
+
+  const rulesText = useMemo(() => {
+    if (!rules) return "";
+
+    return rules
+      .map((rule, index) => {
+        const ruleText = ruleToText(rule);
+        return `## Rule ${index + 1}: ${rule.name}\n${rule.enabled ? "" : "(Disabled)\n"}${ruleText}`;
+      })
+      .join("\n\n---\n\n");
+  }, [rules]);
+
+  const onSubmit = useCallback(async () => {
+    const markdown = editorRef.current?.getMarkdown();
+    if (typeof markdown !== "string") return;
+    if (markdown.trim() === "") {
+      toastError({
+        description: "Please enter a prompt to create rules",
+      });
+      return;
+    }
+
+    // setIsSubmitting(true);
+  }, []);
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+    >
+      <LoadingContent
+        loading={isLoadingLabels || isLoadingRules}
+        loadingComponent={<Skeleton className="min-h-[220px] w-full" />}
+      >
+        <Notice variant="info" className="mb-2">
+          Editing in 'Prompt' view is currently disabled. Edit using AI Chat or
+          'List' view instead.
+        </Notice>
+
+        <SimpleRichTextEditor
+          ref={editorRef}
+          defaultValue={rulesText}
+          minHeight={220}
+          userLabels={userLabels}
+          editable={false}
+        />
+      </LoadingContent>
+
+      <div className="flex flex-wrap gap-2 mt-4 items-center">
+        <Button type="submit" size="sm" disabled>
+          Save
+        </Button>
+
+        <MessageText className="pl-2">
+          Editing in 'Prompt' view is currently disabled. Edit using AI chat or
+          'List' view instead.
+        </MessageText>
+      </div>
+    </form>
+  );
+}

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

@@ -1,13 +1,31 @@
 import { Rules } from "@/app/(app)/[emailAccountId]/assistant/Rules";
+import { RulesPromptFormat } from "@/app/(app)/[emailAccountId]/assistant/RulesPromptFormat";
 import { RulesPrompt } from "@/app/(app)/[emailAccountId]/assistant/RulesPromptNew";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export function RulesTab() {
   return (
     <div>
       <RulesPrompt />
 
-      <h3 className="font-cal text-xl leading-7 mt-8 mb-2">Rules</h3>
-      <Rules showAddRuleButton={false} />
+      <Tabs defaultValue="list" searchParam="format">
+        <div className="flex justify-between items-center mt-8 mb-2">
+          <h3 className="font-cal text-xl leading-7">Rules</h3>
+
+          <TabsList>
+            <TabsTrigger value="list">List</TabsTrigger>
+            <TabsTrigger value="prompt">Prompt</TabsTrigger>
+          </TabsList>
+        </div>
+
+        <TabsContent value="list">
+          <Rules showAddRuleButton={false} />
+        </TabsContent>
+
+        <TabsContent value="prompt">
+          <RulesPromptFormat />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

apps/web/app/(app)/[emailAccountId]/assistant/constants.ts

@@ -81,7 +81,7 @@ export function getActionTypeColor(example: string): string {
   if (lowerExample.includes("mark")) {
     return ACTION_TYPE_COLORS[ActionType.MARK_READ];
   }
-  if (lowerExample.includes("label")) {
+  if (lowerExample.includes("label") || lowerExample.includes("categorize")) {
     return ACTION_TYPE_COLORS[ActionType.LABEL];
   }
   if (lowerExample.includes("digest")) {

apps/web/components/editor/SimpleRichTextEditor.tsx

@@ -17,6 +17,7 @@ interface SimpleRichTextEditorProps {
   minHeight?: number;
   userLabels?: EmailLabel[];
   onClearContents?: () => void;
+  editable?: boolean;
 }
 
 export interface SimpleRichTextEditorRef {
@@ -36,10 +37,12 @@ export const SimpleRichTextEditor = forwardRef<
       minHeight = 300,
       userLabels,
       onClearContents,
+      editable = true,
     },
     ref,
   ) => {
     const editor = useEditor({
+      editable,
       extensions: [
         StarterKit.configure({
           italic: false,
@@ -141,7 +144,9 @@ export const SimpleRichTextEditor = forwardRef<
         <div
           className={cn(
             "rounded-md border border-input bg-background",
-            "focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+            editable &&
+              "focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+            !editable && "bg-muted/30 cursor-not-allowed",
           )}
           style={{ minHeight }}
         >

apps/web/utils/rule/rule-to-text.ts

@@ -0,0 +1,121 @@
+import type { Rule, Action } from "@prisma/client";
+import {
+  ActionType,
+  CategoryFilterType,
+  LogicalOperator,
+} from "@prisma/client";
+
+export interface RuleWithActions extends Rule {
+  actions: Action[];
+  categoryFilters?: { name: string }[];
+  group?: { name: string } | null;
+}
+
+export function ruleToText(rule: RuleWithActions): string {
+  const conditions: string[] = [];
+  const actions: string[] = [];
+
+  // Build conditions
+  if (rule.instructions) {
+    conditions.push(rule.instructions);
+  }
+
+  if (rule.from) {
+    conditions.push(`'From' contains "${rule.from}"`);
+  }
+
+  if (rule.to) {
+    conditions.push(`'To' contains "${rule.to}"`);
+  }
+
+  if (rule.subject) {
+    conditions.push(`'Subject' contains "${rule.subject}"`);
+  }
+
+  if (rule.body) {
+    conditions.push(`'Body' contains "${rule.body}"`);
+  }
+
+  // if (rule.group) {
+  //   conditions.push(`Sender is in group "${rule.group.name}"`);
+  // }
+
+  if (rule.categoryFilterType && rule.categoryFilters?.length) {
+    const categoryNames = rule.categoryFilters.map((c) => c.name).join(", ");
+    if (rule.categoryFilterType === CategoryFilterType.INCLUDE) {
+      conditions.push(`Sender is in categories: ${categoryNames}`);
+    } else {
+      conditions.push(`Sender is NOT in categories: ${categoryNames}`);
+    }
+  }
+
+  // Build actions
+  rule.actions.forEach((action) => {
+    switch (action.type) {
+      case ActionType.ARCHIVE:
+        actions.push("Archive");
+        break;
+      case ActionType.LABEL:
+        if (action.label) {
+          actions.push(`Label as @[${action.label}]`);
+        }
+        break;
+      case ActionType.REPLY:
+        if (action.content) {
+          actions.push(`Reply with: "${action.content}"`);
+        } else {
+          actions.push("Send reply");
+        }
+        break;
+      case ActionType.FORWARD:
+        if (action.to) {
+          actions.push(`Forward to ${action.to}`);
+        }
+        break;
+      case ActionType.SEND_EMAIL:
+        actions.push(`Send email${action.to ? ` to ${action.to}` : ""}`);
+        break;
+      case ActionType.DRAFT_EMAIL:
+        actions.push("Draft a reply");
+        break;
+      case ActionType.MARK_SPAM:
+        actions.push("Mark as spam");
+        break;
+      case ActionType.MARK_READ:
+        actions.push("Mark as read");
+        break;
+      case ActionType.CALL_WEBHOOK:
+        if (action.url) {
+          actions.push(`Call webhook: ${action.url}`);
+        }
+        break;
+      case ActionType.DIGEST:
+        actions.push("Add to digest");
+        break;
+      case ActionType.MOVE_FOLDER:
+        if (action.folderName) {
+          actions.push(`Move to folder "${action.folderName}"`);
+        }
+        break;
+      case ActionType.TRACK_THREAD:
+        // Skip this action as it's typically internal
+        break;
+    }
+  });
+
+  // Combine conditions with operator
+  const operator =
+    rule.conditionalOperator === LogicalOperator.OR ? " OR " : " AND ";
+  const conditionText =
+    conditions.length > 0
+      ? conditions.join(operator)
+      : "No conditions specified";
+
+  // Format the output with actions as bullet list
+  const actionsText =
+    actions.length > 0
+      ? actions.map((action) => `- ${action}`).join("\n")
+      : "- No actions specified";
+
+  return `**When:**\n\n${conditionText}\n\n**Then:**\n${actionsText}`;
+}

version.txt

@@ -1 +1 @@
-v2.6.11
+v2.6.12