Syncfusion AI Assistant

How can I help you?

Assist view in EJ2 TypeScript AI AssistView control

13 Mar 202624 minutes to read

Setting prompt text

You can use the prompt property to define the prompt text for the AI AssistView control.

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

enableRipple(true);

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    prompt: 'What tools or apps can help me prioritize tasks?',
    promptRequest: () => {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#promptText');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="promptText"></div>
    </div>
</body>
</html>

Setting prompt placeholder

You can use the promptPlaceholder property to set the placeholder text for the prompt textarea. The default value is Type prompt for assistance....

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

enableRipple(true);

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    promptPlaceholder: 'Type a message...',
    promptRequest: () => {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#placeholder');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="placeholder"></div>
    </div>
</body>
</html>

Prompt-response collection

You can use the prompts property to initialize the control with the configured data as a collection of prompts and responses or individual entries.

The prompts collection stores all the prompts and responses generated.

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

enableRipple(true);

let promptsData = [
    {
        prompt: "What is AI?",
        response: `<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>`
    }
];

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    prompts: promptsData,
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = promptsData.find((promptObj: any) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#prompts');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="prompts"></div>
    </div>
</body>
</html>

Update response as markdown

The AI AssistView supports rendering responses as Markdown content, which is automatically converted to HTML using the built-in Markdown Converter. When you pass markdown-formatted text in the response, it will be displayed as formatted HTML in the AI AssistView. The streaming of markdown content happens seamlessly with built-in support for dynamic rendering.

You can use markdown syntax like bold, italic, headings, lists, code blocks, and links to format your responses:

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

enableRipple(true);

let markdownData = [{
    prompt: 'What is Markdown?',
    response: '# Markdown Guide\n\nMarkdown is a lightweight markup language:\n\n- **Headers:** Use `#`, `##`, `###`\n- **Bold:** `**text**` for bold\n- **Italic:** `*text*` for italic\n- **Code:** Triple backticks for code blocks\n- **Lists:** Use `-` for bullet points\n\nIt\'s simple and perfect for documentation.',
    suggestions: ['How do I use bold?', 'Show code block example']
},
{
    prompt: 'How do I use bold?',
    response: '# Bold Text in Markdown\n\nUse double asterisks `**text**` or double underscores `__text__`:\n\n**This is bold text**\n\nBoth methods produce the same result.',
    suggestions: ['What is Markdown?', 'Show code block example']
}
];

// Prompt suggestions
let markdownSuggestions = [
    'What is Markdown?',
    'How do I use bold?',
    'Show code block example'
];
// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: markdownSuggestions,
    promptRequest: onPromptRequest
});

// Handle prompt request with streaming response
function onPromptRequest(args) {
    var markdownResponse = markdownData.find(function (data) {
        return data.prompt === args.prompt;
    });

    var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';

    if (markdownResponse) {
        aiAssistView.addPromptResponse(markdownResponse.response);
        aiAssistView.promptSuggestions = markdownResponse.suggestions || markdownSuggestions;
    } else {
        aiAssistView.addPromptResponse(defaultResponse);
        aiAssistView.promptSuggestions = markdownSuggestions;
    }
}

// Render the component
aiAssistView.appendTo('#markdown-prompt');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="markdown-prompt"></div>
    </div>
</body>

</html>

Adding prompt suggestions

You can use the promptSuggestions property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience.

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

enableRipple(true);

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let response1 = "Use clear naming, break code into small functions, avoid repetition, write tests, and follow coding standards.";
            let response2 = "Install useful extensions, set up shortcuts, enable linting, and customize settings for smoother development.";
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(args.prompt === aiAssistView.promptSuggestions[0] ? response1 : args.prompt === aiAssistView.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#suggestions');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="suggestions"></div>
    </div>
</body>
</html>

Adding suggestion headers

You can use the promptSuggestionsHeader property to set the header text for the prompt suggestions in the AI AssistView.

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

enableRipple(true);

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestionsHeader: "Suggested Prompts",
    promptSuggestions: [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let response1 = "Use clear naming, break code into small functions, avoid repetition, write tests, and follow coding standards.";
            let response2 = "Install useful extensions, set up shortcuts, enable linting, and customize settings for smoother development.";
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(args.prompt === aiAssistView.promptSuggestions[0] ? response1 : args.prompt === aiAssistView.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#suggestions-header');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="suggestions-header"></div>
    </div>
</body>
</html>

Adding prompt iconCss

You can customize the appearance of the prompter avatar by using the promptIconCss property.

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

enableRipple(true);

let promptsData = [
    {
        prompt: "What is AI?",
        response: `<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>`
    }
];

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    promptIconCss: "e-icons e-user",
    prompts: promptsData,
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = promptsData.find((promptObj: any) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#prompt-icon');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="prompt-icon"></div>
    </div>
</body>
</html>

Adding response iconCss

You can use the responseIconCss property to customize the appearance of the responder avatar. By default, the e-assistview-icon class is added as the built-in AI AssistView response icon.

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

enableRipple(true);

let promptsData = [
    {
        prompt: "What is AI?",
        response: `<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>`
    }
];

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    responseIconCss: "e-icons e-bullet-4",
    prompts: promptsData,
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = promptsData.find((promptObj: any) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#response-icon');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #response-icon .e-icons.e-bullet-4:before {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="response-icon"></div>
    </div>
</body>
</html>

Show or hide clear button

You can use the showClearButton property to show or hide the clear button. By default, its value is false, when the clear button is clicked, the prompt text entered will be cleared.

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

enableRipple(true);

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    showClearButton: true,
    prompt: 'What tools or apps can help me prioritize tasks?',
    promptRequest: () => {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#clearbutton');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="clearbutton"></div>
    </div>
</body>
</html>

Enable scroll to bottom icon

You can use the enableScrollToBottom property to show or hide the scroll-to-bottom indicator. By default, this property is true. When enabled, a floating icon/button appears when the user scrolls away from the bottom of the conversation. Clicking this icon smoothly scrolls the view to the bottom to display the latest response.

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

enableRipple(true);

// Define predefined prompts and responses
let promptsData: PromptModel[] = [
    {
        prompt: "What tools or apps can help me prioritize tasks?",
        response: `<div>Here are some effective task prioritization tools:
                    <ul>
                        <li><strong>Todoist:</strong> A robust task manager with priority levels and project organization.</li>
                        <li><strong>Asana:</strong> Project management tool with timeline and board views.</li>
                        <li><strong>Microsoft To Do:</strong> Simple and integrated with Microsoft ecosystem.</li>
                        <li><strong>Notion:</strong> All-in-one workspace for notes, databases, and tasks.</li>
                        <li><strong>ClickUp:</strong> Comprehensive tool with customizable workflows and prioritization features.</li>
                    </ul>
                </div>`
    },
    {
        prompt: "How do I manage multiple projects effectively?",
        response: `<div>Here are best practices for managing multiple projects:
                    <ul>
                        <li><strong>Use a centralized dashboard:</strong> Track all projects in one place.</li>
                        <li><strong>Set clear milestones:</strong> Break down each project into manageable phases.</li>
                        <li><strong>Prioritize tasks:</strong> Focus on high-impact items first.</li>
                        <li><strong>Delegate effectively:</strong> Assign tasks to team members based on skills.</li>
                        <li><strong>Regular reviews:</strong> Conduct weekly or bi-weekly project status meetings.</li>
                    </ul>
                </div>`
    }
];

let assistViews: AssistViewModel[] = [
    {
        name: "Task Assistant",
        iconCss: "e-icons e-assistview-icon"
    }
];

// Initializes the AI Assist control
let aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        "What tools or apps can help me prioritize tasks?",
        "How do I manage multiple projects effectively?"
    ],
    prompts: promptsData,
    views: assistViews,
    promptRequest: () => {
        setTimeout(() => {
            let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
            aiAssistView.addPromptResponse(defaultResponse);
        }, 1000);
    }
});

// Render initialized AI Assist.
aiAssistView.appendTo('#scroll-to-bottom');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript AI AssistView Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 350px; width: 650px;">
        <div id="scroll-to-bottom"></div>
    </div>
</body>

</html>