import { AIAssistView, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize AI AssistView
const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I get started?',
        'What are the key features?'
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        // Handle prompt request - integrate with AI service here
        setTimeout(() => {
            const response = 'This is the AI response to: ' + args.prompt;
            aiAssistView.addPromptResponse(response);
        }, 1000);
    }
});

// Render to DOM
aiAssistView.appendTo('#aiAssistView');

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Syncfusion CSS -->
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/fluent2.css" rel="stylesheet" />
</head>
<body>
    <div id='container' style="height: 400px; width: 700px;">
        <div id="aiAssistView"></div>
    </div>
</body>
</html>

@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/ai-assistview/index.css";

const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: ['Explain AI', 'Code example', 'Best practices'],
    promptRequest: async (args: PromptRequestEventArgs) => {
        try {
            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${OPENAI_API_KEY}`
                },
                body: JSON.stringify({
                    model: 'gpt-4',
                    messages: [{ role: 'user', content: args.prompt }]
                })
            });
            
            const data = await response.json();
            const aiResponse = data.choices[0].message.content;
            aiAssistView.addPromptResponse(aiResponse);
        } catch (error) {
            aiAssistView.addPromptResponse('Error: ' + error.message);
        }
    }
});

const aiAssistView: AIAssistView = new AIAssistView({
    enableStreaming: true,
    promptRequest: (args: PromptRequestEventArgs) => {
        // Simulate streaming response
        const markdownResponse = `# Response\n\nThis is **bold** and *italic* text.\n\n- Item 1\n- Item 2\n\`\`\`javascript\nconst x = 10;\n\`\`\``;
        
        let index = 0;
        const interval = setInterval(() => {
            if (index < markdownResponse.length) {
                const chunk = markdownResponse.slice(0, index + 5);
                aiAssistView.addPromptResponse(chunk, false);
                index += 5;
            } else {
                clearInterval(interval);
                aiAssistView.addPromptResponse(markdownResponse, true);
            }
        }, 50);
    }
});

const aiAssistView: AIAssistView = new AIAssistView({
    responseToolbarSettings: {
        items: [
            { type: 'Button', iconCss: 'e-icons e-copy', tooltip: 'Copy' },
            { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' },
            { type: 'Button', iconCss: 'e-icons e-assist-dislike', tooltip: 'Dislike' }
        ],
        itemClicked: (args: ToolbarItemClickedEventArgs) => {
            if (args.item.iconCss.includes('copy')) {
                // Copy response to clipboard
                const responseText = aiAssistView.prompts[args.dataIndex].response;
                navigator.clipboard.writeText(responseText);
            } else if (args.item.iconCss.includes('like')) {
                console.log('User liked the response');
            }
        }
    }
});

import { AIAssistView, AssistThinking, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';

AIAssistView.Inject(AssistThinking);

const aiAssistView: AIAssistView = new AIAssistView({
    promptRequest: (args: PromptRequestEventArgs) => {
        // Show an in-progress reasoning stage first
        aiAssistView.addPromptResponse({
            blocks: [{
                blockType: 'thinking',
                title: 'Understanding your request',
                isActive: true,
                collapsed: false,
                stages: [
                    { id: 'step1', status: 'inprogress', content: 'Analyzing the request…' }
                ]
            }]
        }, false); // isFinalUpdate: false while streaming

        // Later, mark the stage complete and append the final response
        setTimeout(() => {
            aiAssistView.addPromptResponse({
                blocks: [{
                    blockType: 'thinking',
                    title: 'Understanding your request',
                    isActive: false,
                    collapsed: true,
                    stages: [
                        { id: 'step1', status: 'completed', content: 'Analyzed the request.' }
                    ]
                }],
                response: 'Here is the final answer based on my reasoning.'
            }, true); // isFinalUpdate: true
        }, 1000);
    }
});

import { AIAssistView } from '@syncfusion/ej2-interactive-chat';

const aiAssistView: AIAssistView = new AIAssistView({
    promptRequest: onPromptRequest
});

// Register a tool BEFORE it's referenced in any response; toolName must be unique
aiAssistView.registerToolUI({
    toolName: 'weather-card',
    template: (props: any) => `
        <div class="e-card">
            <div class="e-card-header-title">${props.location}</div>
            <div class="e-card-sub-title">${props.temperature}</div>
        </div>
    `
});

function onPromptRequest(args: any) {
    setTimeout(() => {
        // Mix text and tool blocks in a single response
        aiAssistView.addPromptResponse({
            blocks: [
                { blockType: 'text', content: 'Here is the forecast:' },
                { blockType: 'tool', toolName: 'weather-card', props: { location: 'New York', temperature: '1°C / -4°C' } }
            ]
        });
    }, 1000);
}

aiAssistView.appendTo('#aiAssistView');

const aiAssistView: AIAssistView = new AIAssistView({
    enableAttachments: true,
    attachmentSettings: {
        allowedFileTypes: '.pdf,.docx,.txt,.jpg,.png',
        maxFileSize: 5242880, // 5MB
        maximumCount: 3,
        saveUrl: 'https://your-api.com/upload',
        removeUrl: 'https://your-api.com/remove'
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        console.log('Attached files:', args.attachedFiles);
        // Process prompt with attached files
        aiAssistView.addPromptResponse('Received your prompt with attachments');
    }
});

import { AIAssistView, PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-interactive-chat';

let promptsData: PromptModel[] = [
    { prompt: "What is AI?", response: "AI stands for Artificial Intelligence..." }
];

const regenerateResponses: string[] = [
    "AI, or Artificial Intelligence, refers to the simulation of human intelligence in machines.",
    "Artificial Intelligence is the development of computer systems that perform human-like tasks."
];

const aiAssistView: AIAssistView = new AIAssistView({
    prompts: promptsData,
    responseToolbarSettings: {
        // e-assist-regenerate enables the built-in regenerate button
        items: [
            { type: 'Button', iconCss: 'e-icons e-assist-copy', tooltip: 'Copy' },
            { type: 'Button', iconCss: 'e-icons e-assist-regenerate', tooltip: 'Regenerate' }
        ]
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        // Regenerate re-fires promptRequest with the existing prompt text
        setTimeout(() => {
            const response = regenerateResponses[Math.floor(Math.random() * regenerateResponses.length)];
            aiAssistView.addPromptResponse(response);
        }, 1000);
    }
});

import { AIAssistView, PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-interactive-chat';

const promptsData: PromptModel[] = [
    { prompt: "What is AI?", response: "AI stands for Artificial Intelligence..." }
];

const aiAssistView: AIAssistView = new AIAssistView({
    prompts: promptsData,
    responseToolbarSettings: {
        // e-assist-audio enables the built-in Read Aloud button
        items: [
            { type: 'Button', iconCss: 'e-icons e-assist-audio', tooltip: 'Read Aloud' },
            { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' }
        ]
    },
    textToSpeechSettings: {
        language: 'en-US',
        speechPitch: 1,
        speechRate: 1,
        volume: 1
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('This response can be read aloud via the toolbar.');
        }, 1000);
    }
});

import { AIAssistView, PromptRequestEventArgs, TelemetryData, TelemetryMetric } from '@syncfusion/ej2-interactive-chat';

// Enable telemetry and limit the report to a specific set/order of metrics
const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I set achievable goals at work?',
        'Why do people fly in their dreams?'
    ],
    telemetrySettings: {
        enable: true,
        metrics: ['status', 'duration', 'model', 'inputTokens', 'outputTokens', 'totalTokens'] as TelemetryMetric[]
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service.';
            // Attach AI usage details via the TelemetryData argument of addPromptResponse
            const telemetryData: TelemetryData = {
                model: 'gpt-4o',
                inputTokens: 128,
                outputTokens: 512,
                customAttributes: { region: 'us-east-1', tenant: 'acme' }
            };
            aiAssistView.addPromptResponse(defaultResponse, true, telemetryData);
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

import { AIAssistView, PromptRequestEventArgs, TelemetryReport } from '@syncfusion/ej2-interactive-chat';

const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I set achievable goals at work?',
        'Why do people fly in their dreams?'
    ],
    telemetrySettings: {
        enable: true,
        // Return the report (modified or not) to deliver it, or null to suppress it
        beforeReport: (report: TelemetryReport): TelemetryReport | null => {
            report.customAttributes = { region: 'us-east-1', tenant: 'acme', beta: true };
            return report;
        }
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('Response with custom telemetry attributes.');
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

import { AIAssistView, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';

const agents: any[] = [
    { id: 'TechSupport', name: 'TechSupport' },
    { id: 'HRAssistant', name: 'HRAssistant' },
    { id: 'KnowledgeBase', name: 'KnowledgeBase' }
];

const aiAssistView: AIAssistView = new AIAssistView({
    promptPlaceholder: "Type '@' to mention an agent...",
    mentions: [
        {
            mentionChar: '@',
            dataSource: agents,
            fields: { text: 'name', value: 'id' },
            filterType: 'StartsWith',
            highlight: true,
            popupWidth: '250px',
            popupHeight: '200px'
        }
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('Processed mention from prompt: ' + args.prompt);
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

import { AIAssistView } from '@syncfusion/ej2-interactive-chat';

const agents: any[] = [
    { id: 'TechSupport', name: 'TechSupport', iconCss: 'e-icons e-comment-status' },
    { id: 'HRAssistant', name: 'HRAssistant', iconCss: 'e-icons e-people' }
];

const commands: any[] = [
    { id: 'table', name: '/table', description: 'Answer as a markdown table' },
    { id: 'rewrite', name: '/rewrite', description: 'Rewrite for clarity' }
];

const aiAssistView: AIAssistView = new AIAssistView({
    promptPlaceholder: "Type '@' for agents or '/' for commands...",
    mentions: [
        {
            mentionChar: '@',
            dataSource: agents,
            fields: { text: 'name', value: 'id', iconCss: 'iconCss' }
        },
        {
            mentionChar: '/',
            dataSource: commands,
            showMentionChar: false,
            fields: { text: 'name', value: 'id' },
            itemTemplate:
                '<div class="listItems">' +
                    '<span class="commandName">${name}</span>' +
                    '<span class="commandDesc">${description}</span>' +
                '</div>'
        }
    ],
    promptRequest: () => {
        setTimeout(() => aiAssistView.addPromptResponse('Mention processed.'), 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

import { AIAssistView, PromptRequestEventArgs } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const aiAssistView: AIAssistView = new AIAssistView({
    responseAnimationTemplate: responseAnimationContent,
    // Returning a Promise keeps the animation visible until the response is added
    promptRequest: (args: PromptRequestEventArgs) => {
        return new Promise<void>((resolve: () => void) => {
            setTimeout(() => {
                const defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services.';
                aiAssistView.addPromptResponse(defaultResponse);
                resolve();
            }, 2000);
        });
    }
});

aiAssistView.appendTo('#aiAssistView');

function responseAnimationContent() {
    return `<div class="assistview-loading-status">
                <div class="assistview-grid-icon">
                    <span></span><span></span><span></span>
                    <span></span><span></span><span></span>
                    <span></span><span></span><span></span>
                </div>
                <span class="assistview-loading-label">Generating</span>
            </div>`;
}

import { AIAssistView } from '@syncfusion/ej2-interactive-chat';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Use the `align` property on a toolbar item to position it within the toolbar
// (supported values: 'Left', 'Center', 'Right'; default is 'Left').
const aiAssistView: AIAssistView = new AIAssistView({
    toolbarSettings: {
        items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ],
    },
    promptRequest: () => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services.');
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');