From f9691a60a5f4af1155d830d63e7018c5338daa70 Mon Sep 17 00:00:00 2001 From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com> Date: Fri, 13 Jun 2025 00:16:57 +0300 Subject: [PATCH 1/7] Update action copy --- .../assistant/ActionSummaryCard.tsx | 32 ++++++++++++++----- .../[emailAccountId]/assistant/RuleForm.tsx | 5 ++- .../assistant/onboarding/completed/page.tsx | 7 ++-- apps/web/utils/action-display.ts | 2 +- 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/ActionSummaryCard.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/ActionSummaryCard.tsx index 4aebcb4e92..72ad6de151 100644 --- a/apps/web/app/(app)/[emailAccountId]/assistant/ActionSummaryCard.tsx +++ b/apps/web/app/(app)/[emailAccountId]/assistant/ActionSummaryCard.tsx @@ -6,6 +6,11 @@ import { ACTION_TYPE_TEXT_COLORS, ACTION_TYPE_ICONS, } from "@/app/(app)/[emailAccountId]/assistant/constants"; +import { TooltipExplanation } from "@/components/TooltipExplanation"; +import { + AWAITING_REPLY_LABEL_NAME, + NEEDS_REPLY_LABEL_NAME, +} from "@/utils/reply-tracker/consts"; export function ActionSummaryCard({ action, @@ -18,6 +23,7 @@ export function ActionSummaryCard({ typeOptions.find((opt) => opt.value === action.type)?.label || action.type; let summaryContent: React.ReactNode = actionTypeLabel; + let tooltipText: string | undefined; switch (action.type) { case ActionType.LABEL: { @@ -59,13 +65,21 @@ export function ActionSummaryCard({ } else { summaryContent = ( <> - AI draft reply - {action.to?.value && ( - - {" "} - to {action.to.value} - - )} +
+
+ AI draft reply + {action.to?.value && ( + + {" "} + to {action.to.value} + + )} +
+ +
{summaryContent}
+ {tooltipText && } ); diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx index 1a228ed655..079d2af7b0 100644 --- a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx +++ b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx @@ -1053,7 +1053,7 @@ function ActionCard({ ) : field.name === "content" && action.type === ActionType.DRAFT_EMAIL && !setManually ? ( -
+
Our AI will generate a reply using your knowledge base and previous conversations with the sender @@ -1239,8 +1239,7 @@ function ReplyTrackerAction() { return (
- Used for reply tracking (Reply Zero). This action tracks emails this - rule is applied to and removes the{" "} + This action tracks emails this rule is applied to and removes the{" "} {NEEDS_REPLY_LABEL_NAME} label after you reply to the email.
diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/onboarding/completed/page.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/onboarding/completed/page.tsx index 43a29324af..236c9749f5 100644 --- a/apps/web/app/(app)/[emailAccountId]/assistant/onboarding/completed/page.tsx +++ b/apps/web/app/(app)/[emailAccountId]/assistant/onboarding/completed/page.tsx @@ -24,13 +24,12 @@ export default function CompletedPage(props: {
- We've configured your inbox with smart defaults to help you stay - organized. Your emails will be automatically categorized. + Your emails will be automatically categorized. - Want to customize further? You can chat with the assistant to - create custom rules and fine-tune your preferences anytime. + Want to customize further? You can update your rules on the + Assistant page and fine-tune your preferences anytime.
diff --git a/apps/web/utils/action-display.ts b/apps/web/utils/action-display.ts index d64f6bcd3d..0009644b3b 100644 --- a/apps/web/utils/action-display.ts +++ b/apps/web/utils/action-display.ts @@ -19,7 +19,7 @@ export function getActionDisplay(action: { case ActionType.CALL_WEBHOOK: return "Call Webhook"; case ActionType.TRACK_THREAD: - return "Track Thread"; + return "Auto-update reply label"; default: // Default to capital case for other action types return capitalCase(action.type); From da17d96aef690c49998b20498abdfcf8204fa3ea Mon Sep 17 00:00:00 2001 From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com> Date: Fri, 13 Jun 2025 00:28:27 +0300 Subject: [PATCH 2/7] adjust copy --- apps/web/utils/action-display.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web/utils/action-display.ts b/apps/web/utils/action-display.ts index 0009644b3b..9f5227a178 100644 --- a/apps/web/utils/action-display.ts +++ b/apps/web/utils/action-display.ts @@ -10,6 +10,8 @@ export function getActionDisplay(action: { return "Draft Reply"; case ActionType.LABEL: return action.label ? `Label: ${action.label}` : "Label"; + case ActionType.ARCHIVE: + return "Skip Inbox"; case ActionType.MARK_READ: return "Mark Read"; case ActionType.MARK_SPAM: From 6728aecb0a125992d849eadd477234f10c574674 Mon Sep 17 00:00:00 2001 From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com> Date: Fri, 13 Jun 2025 00:58:43 +0300 Subject: [PATCH 3/7] fix up rule form --- .../[emailAccountId]/assistant/RuleForm.tsx | 1170 +++++++++-------- apps/web/components/Combobox.tsx | 2 +- 2 files changed, 617 insertions(+), 555 deletions(-) diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx index 079d2af7b0..6aa1ff3606 100644 --- a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx +++ b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx @@ -44,7 +44,6 @@ import { createRuleBody, } from "@/utils/actions/rule.validation"; import { actionInputs } from "@/utils/action-item"; -import { Select } from "@/components/Select"; import { Toggle } from "@/components/Toggle"; import { LoadingContent } from "@/components/LoadingContent"; import { TooltipExplanation } from "@/components/TooltipExplanation"; @@ -80,9 +79,17 @@ import { DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; -import { isDefined } from "@/utils/types"; import { ActionSummaryCard } from "@/app/(app)/[emailAccountId]/assistant/ActionSummaryCard"; import { ConditionSummaryCard } from "@/app/(app)/[emailAccountId]/assistant/ConditionSummaryCard"; +import { + Select, + SelectContent, + SelectItem, + SelectValue, + SelectTrigger, +} from "@/components/ui/select"; +import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"; +import { isDefined } from "@/utils/types"; export function Rule({ ruleId, @@ -109,15 +116,7 @@ export function RuleForm({ }) { const { emailAccountId } = useAccount(); - const { - register, - handleSubmit, - watch, - setValue, - control, - formState: { errors, isSubmitting, isSubmitted }, - trigger, - } = useForm({ + const form = useForm({ resolver: zodResolver(createRuleBody), defaultValues: rule ? { @@ -135,6 +134,16 @@ export function RuleForm({ : undefined, }); + const { + register, + handleSubmit, + watch, + setValue, + control, + formState: { errors, isSubmitting, isSubmitted }, + trigger, + } = form; + const { fields: conditionFields, append: appendCondition, @@ -305,589 +314,627 @@ export function RuleForm({ }, [alwaysEditMode]); return ( -
- {isSubmitted && Object.keys(errors).length > 0 && ( -
- - {Object.values(errors).map((error) => ( -
  • {error.message}
    • - ))} - - } - /> -
    - )} - -
    - {isNameEditMode ? ( - - ) : ( - - {watch("name")} - - + + + {isSubmitted && Object.keys(errors).length > 0 && ( +
    + + {Object.values(errors).map((error) => ( +
  • {error.message}
    • + ))} + + } + /> +
    )} -
    - {/* removed for now to keep things simpler */} - {/* {showSystemTypeBadge(rule.systemType) && ( -
    - - This rule has special preset logic that may impact your conditions - +
    + {isNameEditMode ? ( + + ) : ( + + {watch("name")} + + + )}
    - )} */} - -
    - Conditions - -
    - {isConditionsEditMode && ( - - - - - - - setValue("conditionalOperator", value as LogicalOperator) - } + +
    + Conditions + +
    + {isConditionsEditMode && ( + + + + + + + setValue("conditionalOperator", value as LogicalOperator) + } + > + + Match all conditions + + + Match any condition + + + + + )} + + {!!rule.id && ( + + + + )} - {!!rule.id && ( - + {!alwaysEditMode && ( - - )} - - {!alwaysEditMode && ( - - )} + )} +
    -
    - {errors.conditions?.root?.message && ( + {errors.conditions?.root?.message && ( +
    + +
    + )} +
    - -
    - )} - -
    - {conditionFields.map((condition, index) => ( -
    - {index > 0 && ( -
    -
    -
    -
    - {conditionalOperator === LogicalOperator.OR ? "OR" : "AND"} + {conditionFields.map((condition, index) => ( +
    + {index > 0 && ( +
    +
    +
    +
    + {conditionalOperator === LogicalOperator.OR + ? "OR" + : "AND"} +
    +
    -
    -
    - )} - {isConditionsEditMode ? ( - -
    -
    - { + const selectedType = value; + + // check if we have duplicate condition types + const conditionTypes = new Set( + conditions.map((condition) => condition.type), + ); + + if (conditionTypes.size !== conditions.length) { + toastError({ + description: + "You can only have one condition of each type.", + }); + } -
    - {watch(`conditions.${index}.type`) === ConditionType.AI && ( - + + + + + + + {[ + { label: "AI", value: ConditionType.AI }, + { + label: "Static", + value: ConditionType.STATIC, + }, + // Deprecated: only show if this is the selected condition type + condition.type === ConditionType.CATEGORY + ? { + label: "Sender Category", + value: ConditionType.CATEGORY, + } + : null, + ] + .filter(isDefined) + .map((option) => ( + + {option.label} + + ))} + + + )} - error={ - ( - errors.conditions?.[index] as { - instructions?: FieldError; - } - )?.instructions - } - placeholder='e.g. Apply this rule to all "receipts"' - tooltipText="The instructions that will be passed to the AI." /> - )} +
    - {watch(`conditions.${index}.type`) === - ConditionType.STATIC && ( - <> - +
    + {watch(`conditions.${index}.type`) === + ConditionType.AI && ( - - - )} - - {watch(`conditions.${index}.type`) === - ConditionType.CATEGORY && ( - <> -
    - - setValue( - `conditions.${index}.categoryFilterType`, - value as CategoryFilterType, - ) + )} + + {watch(`conditions.${index}.type`) === + ConditionType.STATIC && ( + <> + -
    - -
    -
    - -
    -     - - -
    - - - {categories.length ? ( - <> - ({ - label: capitalCase(category.name), - value: category.id, - }))} - selectedValues={ - new Set( - watch( - `conditions.${index}.categoryFilters`, - ), - ) + tooltipText="Only apply this rule to emails from this address. e.g. @company.com, or hello@company.com" + /> + { - setValue( - `conditions.${index}.categoryFilters`, - Array.from(selectedValues), - ); - }} - /> - {( + )?.to + } + tooltipText="Only apply this rule to emails sent to this address. e.g. @company.com, or hello@company.com" + /> + + + )} + + {watch(`conditions.${index}.type`) === + ConditionType.CATEGORY && ( + <> +
    + + setValue( + `conditions.${index}.categoryFilterType`, + value as CategoryFilterType, + ) + } + className="flex gap-6" + > +
    + +
    +
    + +
    +     + + +
    + + + {categories.length ? ( + <> + ({ + label: capitalCase(category.name), + value: category.id, + }))} + selectedValues={ + new Set( + watch( + `conditions.${index}.categoryFilters`, + ), + ) } + setSelectedValues={(selectedValues) => { + setValue( + `conditions.${index}.categoryFilters`, + Array.from(selectedValues), + ); + }} /> - )} - - - - ) : ( -
    - - No sender categories found. - - - -
    - )} -     - - )} + + Create category + + + + + ) : ( +
    + + No sender categories found. + + + +
    + )} +     + + )} +
    -
    - -     - ) : ( - - )} + + + ) : ( + + )} +
    + ))} +
    + + {isConditionsEditMode && unusedCondition && ( +
    +
    - ))} -
    + )} - {isConditionsEditMode && unusedCondition && ( -
    - -
    - )} + {showLearnedPatterns && learnedPatternGroupId && ( +
    + +
    + )} - {showLearnedPatterns && learnedPatternGroupId && ( -
    - +
    + Actions + {!alwaysEditMode && ( + + )}
    - )} -
    - Actions - {!alwaysEditMode && ( - + {actionErrors.length > 0 && ( +
    + + {actionErrors.map((error, index) => ( +
  • {error}
    • + ))} + + } + /> +
    )} -
    - {actionErrors.length > 0 && ( -
    - - {actionErrors.map((error, index) => ( -
  • {error}
    • - ))} - - } - /> +
    + {watch("actions")?.map((action, i) => + isActionsEditMode ? ( + + ) : ( + + ), + )}
    - )} - -
    - {watch("actions")?.map((action, i) => - isActionsEditMode ? ( - - ) : ( - - ), + + {isActionsEditMode && ( +
    + +
    )} -
    - {isActionsEditMode && ( -
    - + />
    - )} - -
    - - - { - setValue("automate", enabled); - }} - /> -
    -
    - - - { - setValue("runOnThreads", enabled); - }} - /> -
    +
    + -
    - {rule.id && ( -
    + +
    + {rule.id && ( + - )} - {rule.id ? ( - - ) : ( - - )} -
    - + }} + > + Delete + + )} + {rule.id ? ( + + ) : ( + + )} +
    + + ); } @@ -897,6 +944,7 @@ function ActionCard({ register, watch, setValue, + control, errors, userLabels, isLoading, @@ -910,6 +958,7 @@ function ActionCard({ register: ReturnType>["register"]; watch: ReturnType>["watch"]; setValue: ReturnType>["setValue"]; + control: ReturnType>["control"]; errors: any; userLabels: NonNullable; isLoading: boolean; @@ -933,7 +982,6 @@ function ActionCard({ // Helper function to determine if a field can use variables based on context const canFieldUseVariables = ( field: { name: string; expandable?: boolean }, - value: string, isFieldAiGenerated: boolean, ) => { // Check if the field is visible - this is handled before calling the function @@ -976,12 +1024,32 @@ function ActionCard({ return ( -
    +
    - + + + + + + + {typeOptions.map((option) => ( + + {option.label} + + ))} + + + + )} />
    -
    +
    {fields.map((field) => { const isAiGenerated = !!action[field.name]?.ai; const value = watch(`actions.${index}.${field.name}.value`) || ""; @@ -1106,7 +1174,7 @@ function ActionCard({ )} {hasVariables(value) && - canFieldUseVariables(field, value, isAiGenerated) && ( + canFieldUseVariables(field, isAiGenerated) && (
    {(value || "") .split(/(\{\{.*?\}\})/g) @@ -1247,12 +1315,6 @@ function ReplyTrackerAction() { ); } -// function showSystemTypeBadge(systemType?: SystemType | null): boolean { -// if (systemType === SystemType.TO_REPLY) return true; -// if (systemType === SystemType.CALENDAR) return true; -// return false; -// } - export function ThreadsExplanation({ size }: { size: "sm" | "md" }) { return ( role="combobox" aria-expanded={open} - className="w-full justify-between sm:w-[500px]" + className="w-full justify-between" > {(value && props.options.find((option) => option.value === value)?.label) || From ae1bbc06d572c62e9a93e684fa9423b4c08bd070 Mon Sep 17 00:00:00 2001 From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com> Date: Fri, 13 Jun 2025 00:59:21 +0300 Subject: [PATCH 4/7] version --- version.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/version.txt b/version.txt index 01558e339a..b4e17366c0 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -v1.5.3 \ No newline at end of file +v1.5.4 \ No newline at end of file From 513777c7f5e9c6ddf00d26aad7b1c1adcae332f6 Mon Sep 17 00:00:00 2001 From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com> Date: Fri, 13 Jun 2025 01:00:59 +0300 Subject: [PATCH 5/7] styling --- apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx index 6aa1ff3606..ca108179df 100644 --- a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx +++ b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx @@ -463,7 +463,7 @@ export function RuleForm({ )} {isConditionsEditMode ? ( -
    +
    -
    +
    Date: Fri, 13 Jun 2025 01:09:43 +0300 Subject: [PATCH 6/7] fix select --- apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx index ca108179df..32e6929f9d 100644 --- a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx +++ b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx @@ -496,7 +496,7 @@ export function RuleForm({ ); } }} - defaultValue={field.value} + value={field.value} > @@ -1031,10 +1031,7 @@ function ActionCard({ name={`actions.${index}.type`} render={({ field }) => ( - From d0a2dfaaedd440b07a125d980f59ce50e9d30b4d Mon Sep 17 00:00:00 2001 From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com> Date: Fri, 13 Jun 2025 01:10:06 +0300 Subject: [PATCH 7/7] fix --- .../app/(app)/[emailAccountId]/assistant/RuleForm.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx index 32e6929f9d..053bc11e0e 100644 --- a/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx +++ b/apps/web/app/(app)/[emailAccountId]/assistant/RuleForm.tsx @@ -475,15 +475,20 @@ export function RuleForm({ const selectedType = value; // check if we have duplicate condition types - const conditionTypes = new Set( - conditions.map((condition) => condition.type), + const prospectiveTypes = new Set( + conditions.map((c, idx) => + idx === index ? selectedType : c.type, + ), ); - if (conditionTypes.size !== conditions.length) { + if ( + prospectiveTypes.size !== conditions.length + ) { toastError({ description: "You can only have one condition of each type.", }); + return; // abort update } const emptyCondition = getEmptyCondition(