Ai

<et2-ai>
<et2-textbox value="This is some text that needs to be more formal."></et2-textbox>
</et2-ai>

      

      
    

<et2-ai>
    <et2-vbox>
        <et2-textbox label="Job" id="job_name" value="Do the thing with the thing"></et2-textbox>
        <et2-textarea label="Details" id="body" value="Don't forget the meeting tomorrow at 10 AM."></et2-textarea>
    </et2-box>
</et2-ai>

      

      
    

<et2-ai id="custom-ai">
<et2-textarea id="my-target" value="Original content. "></et2-textarea>
</et2-ai>
<script>
    const aiWidget = document.getElementById('custom-ai');
    aiWidget.prompts = [
        {
            id: "aiassist.translate-de", 
            label: "Translate to German",
            action: { target: "#my-target", mode: "replace" }
        },
        {
            id: "custom.expand", 
            label: "Add more detail",
            action: { target: "#my-target", mode: "append" }
        }
    ];
</script>

      

      
    

<et2-ai id="event-demo">
    <et2-textarea value="This text will be intercepted."></et2-textarea>
</et2-ai>

<script>
    const eventAi = document.getElementById('event-demo');
    eventAi.addEventListener('et2-ai-apply', (e) => {
        // e.detail.result contains the AI output
        // e.detail.target contains the element where it will be applied
        
        if (confirm("Do you want to add a signature to the result?")) {
            e.detail.result += "\n\nGenerated by AI Assistant";
        }
        
        // To stop the widget from automatically updating the target:
        // e.preventDefault();
    });
</script>