notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Makes ai rule generation content work good.

Browse Source
This commit is contained in:
Bryce
2025-08-10 21:21:02 -07:00
parent 47a63d2eab
commit 0dac428217
12 changed files with 2129 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/templates/partials/folder_modal.html
View File

@@ -1,4 +1,10 @@
<div id="folder-modal" @click.away="$refs.modal.close()" class="modal-box" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })">
<!-- x-data="{ errors: {{ 'true' if errors else 'false' }},
ruleText:{% if folder %}{{ folder.rule_text|tojson }}{% endif %},
showAiResults: true }"
-->
<div id="folder-modal" @click.away="$refs.modal.close()" class="modal-box"
x-data='{{ folder_data|tojson }}'
x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })">
<h3 class="font-bold text-lg mb-4" id="modal-title">
{% if folder %}Edit Folder{% else %}Add New Folder{% endif %}
</h3>
@@ -10,8 +16,8 @@
</div>
{% endif %}
<form id="folder-form"
{% if folder %} hx-put="/api/folders/{{ folder.id }}" {% else %} hx-post="/api/folders" {% endif %}
<form id="folder-form"
{% if folder %} hx-put="/api/folders/{{ folder.id }}" {% else %} hx-post="/api/folders" {% endif %}
hx-target="#folder-modal"
hx-swap="outerHTML"
>
@@ -30,10 +36,34 @@
</div>
<div class="mb-4">
<label for="folder-rule" class="block text-sm font-medium mb-1">Rule (Natural Language)</label>
<div class="flex gap-2 mb-2">
<button type="button"
class="btn btn-sm btn-outline btn-secondary"
id="generate-multiple-rules"
hx-post="/api/folders/generate-rule"
hx-vals='{"folder_name": "{{ name if name is defined else '' }}", "folder_type": "{{ 'tidy' if (name is defined and name.strip().lower() == 'inbox') else 'destination' }}", "rule_type": "multiple"}'
hx-target="#rule-generation-result"
hx-swap="innerHTML"
data-loading-disable
aria-label="Generate multiple AI-powered email rule options"
aria-describedby="ai-rule-help">
<i class="fas fa-th mr-1" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Enhance my rules</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
<div id="ai-rule-help" class="hidden">
AI-powered rule generation creates email organization rules based on your folder name and type.
</div>
</div>
<div id="rule-generation-result" class="mb-2" x-show="show_ai_rules">
<!-- AI rule results will be injected here -->
</div>
<textarea id="folder-rule" name="rule_text"
class="textarea textarea-bordered w-full h-24 {% if errors and errors.rule_text %}textarea-error{% endif %}"
placeholder="e.g., Move emails from 'newsletter@company.com' to this folder"
required>{% if rule_text is defined %}{{ rule_text }}{% elif folder %}{{ folder.rule_text }}{% endif %}</textarea>
required
x-model="rule_text"
>{% if rule_text is defined %}{{ rule_text }}{% elif folder %}{{ folder.rule_text }}{% endif %}</textarea>
{% if errors and errors.rule_text %}
<div class="text-error text-sm mt-1">{{ errors.rule_text }}</div>
{% endif %}
@@ -55,4 +85,19 @@
</button>
</div>
</form>
<!-- Alpine.js event listener for AI rule usage -->
<script>
document.addEventListener('alpine:init', () => {
// Listen for the custom event when an AI rule is used
window.addEventListener('ai-rule-used', (event) => {
// Set the textarea value with the selected text
document.getElementById('folder-rule').value = event.detail.text;
// Trigger validation
document.getElementById('folder-rule').dispatchEvent(new Event('input'));
// Hide AI results
document.querySelector('[x-data]').__x.$data.showAiResults = false;
});
});
</script>
</div>