@using Syncfusion.EJ2.InteractiveChat;

<style>
    #editableText {
        width: 100%;
        min-height: 120px;
        max-height: 300px;
        overflow-y: auto;
        font-size: 16px;
        padding: 12px;
        border-radius: 4px;
        border: 1px solid;
    }
</style>

<div class="container" style="height: 350px; width: 650px;">
    <button id="summarizeBtn" class="e-btn e-primary" onclick="onSummarizeClick()">Summarize</button>
    <div id="editableText" contenteditable="true">
        <p>Add your content here for AI processing...</p>
    </div>
    
    <ejs-inlineaiassist id="defaultInlineAssist" 
        relateTo="#summarizeBtn" 
        created="onCreated" 
        promptRequest="onPromptRequest">
        <e-inlineaiassist-responsesettings itemSelect="onItemSelect"></e-inlineaiassist-responsesettings>
    </ejs-inlineaiassist>
</div>

<script>
    var inlineAssist;
    
    function onCreated() {
        inlineAssist = this;
    }
    
    function onPromptRequest(args) {
        setTimeout(function () {
            var response = 'Connect to your AI service for real processing...';
            inlineAssist.addResponse(response);
        }, 1000);
    }
    
    function onItemSelect(args) {
        if (args.command.label === 'Accept') {
            document.getElementById('editableText').innerHTML = 
                '<p>' + inlineAssist.prompts[inlineAssist.prompts.length - 1].response + '</p>';
            inlineAssist.hidePopup();
        }
    }
    
    function onSummarizeClick() {
        if (inlineAssist) {
            inlineAssist.showPopup();
        }
    }
</script>

<!-- Popup mode (default) -->
<ejs-inlineaiassist id="assist1" responseMode="Popup" relateTo="#btn"></ejs-inlineaiassist>

<!-- Inline mode (updates content in-place) -->
<ejs-inlineaiassist id="assist2" responseMode="Inline" relateTo="#btn"></ejs-inlineaiassist>

<ejs-inlineaiassist id="assist3" relateTo="#btn">
    <e-inlineaiassist-commandsettings 
        commands="commandsData" 
        popupWidth="250px" 
        popupHeight="200px"
        itemSelect="onCommandSelect">
    </e-inlineaiassist-commandsettings>
</ejs-inlineaiassist>

<ejs-inlineaiassist id="assist4" 
    created="onCreated"
    promptRequest="onPromptRequest" 
    open="onOpen" 
    close="onClose">
</ejs-inlineaiassist>

// Show popup at current position
inlineAssist.showPopup();

// Execute prompt dynamically
inlineAssist.executePrompt('Your prompt text');

// Add response programmatically
inlineAssist.addResponse('Response text');

// Hide popup
inlineAssist.hidePopup();